103 lines
3.3 KiB
React
103 lines
3.3 KiB
React
import {defineMessages, FormattedMessage, intlShape, injectIntl} from 'react-intl';
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
|
|
import Box from '../box/box.jsx';
|
|
import Modal from '../../containers/modal.jsx';
|
|
|
|
import styles from './slider-prompt.css';
|
|
|
|
|
|
const messages = defineMessages({
|
|
minValue: {
|
|
defaultMessage: 'Minimum value',
|
|
description: 'Label of slider modal',
|
|
id: 'gui.sliderModal.min'
|
|
},
|
|
maxValue: {
|
|
defaultMessage: 'Maximum value',
|
|
description: 'Label of slider modal',
|
|
id: 'gui.sliderModal.max'
|
|
},
|
|
title: {
|
|
defaultMessage: 'Change slider range',
|
|
description: 'Title of slider modal',
|
|
id: 'gui.sliderModal.title'
|
|
}
|
|
});
|
|
|
|
const SliderPromptComponent = props => (
|
|
<Modal
|
|
className={styles.modalContent}
|
|
contentLabel={props.intl.formatMessage(messages.title)}
|
|
id="sliderPrompt"
|
|
onRequestClose={props.onCancel}
|
|
>
|
|
<Box className={styles.body}>
|
|
<Box className={styles.label}>
|
|
{props.intl.formatMessage(messages.minValue)}
|
|
</Box>
|
|
<Box>
|
|
<input
|
|
className={styles.minInput}
|
|
name={props.intl.formatMessage(messages.minValue)}
|
|
pattern="-?[0-9]*(\.[0-9]+)?"
|
|
type="text"
|
|
value={props.minValue}
|
|
onChange={props.onChangeMin}
|
|
onKeyPress={props.onKeyPress}
|
|
/>
|
|
</Box>
|
|
<Box className={styles.label}>
|
|
{props.intl.formatMessage(messages.maxValue)}
|
|
</Box>
|
|
<Box>
|
|
<input
|
|
className={styles.maxInput}
|
|
name={props.intl.formatMessage(messages.maxValue)}
|
|
pattern="-?[0-9]*(\.[0-9]+)?"
|
|
type="text"
|
|
value={props.maxValue}
|
|
onChange={props.onChangeMax}
|
|
onKeyPress={props.onKeyPress}
|
|
/>
|
|
</Box>
|
|
<Box className={styles.buttonRow}>
|
|
<button
|
|
className={styles.cancelButton}
|
|
onClick={props.onCancel}
|
|
>
|
|
<FormattedMessage
|
|
defaultMessage="Cancel"
|
|
description="Button in prompt for cancelling the dialog"
|
|
id="gui.sliderPrompt.cancel"
|
|
/>
|
|
</button>
|
|
<button
|
|
className={styles.okButton}
|
|
onClick={props.onOk}
|
|
>
|
|
<FormattedMessage
|
|
defaultMessage="OK"
|
|
description="Button in prompt for confirming the dialog"
|
|
id="gui.sliderPrompt.ok"
|
|
/>
|
|
</button>
|
|
</Box>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
|
|
SliderPromptComponent.propTypes = {
|
|
intl: intlShape,
|
|
maxValue: PropTypes.string,
|
|
minValue: PropTypes.string,
|
|
onCancel: PropTypes.func.isRequired,
|
|
onChangeMax: PropTypes.func.isRequired,
|
|
onChangeMin: PropTypes.func.isRequired,
|
|
onKeyPress: PropTypes.func.isRequired,
|
|
onOk: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default injectIntl(SliderPromptComponent);
|