Spaces:
Runtime error
Runtime error
File size: 3,389 Bytes
6bcb42f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
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);
|