scratch-paint/src/components/stroke-color-indicator.jsx
Matthew Taylor 42399fe815 Add optional class to fill/stroke groups
And add a margin between them on the fill tool
2017-12-22 10:23:30 -05:00

57 lines
1.8 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import Popover from 'react-popover';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
import ColorButton from './color-button/color-button.jsx';
import ColorPicker from '../containers/color-picker.jsx';
import InputGroup from './input-group/input-group.jsx';
import Label from './forms/label.jsx';
const messages = defineMessages({
stroke: {
id: 'paint.paintEditor.stroke',
description: 'Label for the color picker for the outline color',
defaultMessage: 'Outline'
}
});
const StrokeColorIndicatorComponent = props => (
<InputGroup
className={props.className}
disabled={props.disabled}
>
<Popover
body={
<ColorPicker
color={props.strokeColor}
onChangeColor={props.onChangeStrokeColor}
/>
}
isOpen={props.strokeColorModalVisible}
preferPlace="below"
onOuterAction={props.onCloseStrokeColor}
>
<Label text={props.intl.formatMessage(messages.stroke)}>
<ColorButton
outline
color={props.strokeColor}
onClick={props.onOpenStrokeColor}
/>
</Label>
</Popover>
</InputGroup>
);
StrokeColorIndicatorComponent.propTypes = {
className: PropTypes.string,
disabled: PropTypes.bool.isRequired,
intl: intlShape,
onChangeStrokeColor: PropTypes.func.isRequired,
onCloseStrokeColor: PropTypes.func.isRequired,
onOpenStrokeColor: PropTypes.func.isRequired,
strokeColor: PropTypes.string,
strokeColorModalVisible: PropTypes.bool.isRequired
};
export default injectIntl(StrokeColorIndicatorComponent);