scratch-paint/src/components/stroke-color-indicator.jsx

42 lines
1.3 KiB
React
Raw Normal View History

2017-09-07 17:59:14 -04:00
import React from 'react';
import PropTypes from 'prop-types';
import {defineMessages, injectIntl, intlShape} from 'react-intl';
import BufferedInputHOC from './forms/buffered-input-hoc.jsx';
import Label from './forms/label.jsx';
import Input from './forms/input.jsx';
import {MIXED} from '../helper/style-path';
2017-09-07 17:59:14 -04:00
import styles from './paint-editor.css';
const BufferedInput = BufferedInputHOC(Input);
const messages = defineMessages({
stroke: {
id: 'paint.paintEditor.stroke',
description: 'Label for the color picker for the outline color',
defaultMessage: 'Outline'
}
});
const StrokeColorIndicatorComponent = props => (
<div className={styles.inputGroup}>
<Label text={props.intl.formatMessage(messages.stroke)}>
<BufferedInput
type="text"
2017-10-03 13:45:19 -04:00
// @todo Don't use text
value={props.strokeColor === MIXED ? 'mixed' :
props.strokeColor === null ? 'transparent' : props.strokeColor}
2017-09-07 17:59:14 -04:00
onSubmit={props.onChangeStrokeColor}
/>
</Label>
</div>
);
StrokeColorIndicatorComponent.propTypes = {
intl: intlShape,
onChangeStrokeColor: PropTypes.func.isRequired,
strokeColor: PropTypes.string
2017-09-07 17:59:14 -04:00
};
export default injectIntl(StrokeColorIndicatorComponent);