UNPKG

cspace-ui

Version:
231 lines (219 loc) 5.25 kB
import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, intlShape, FormattedMessage, } from 'react-intl'; import { baseComponents as inputComponents } from 'cspace-input'; import { OP_COMPLETE, OP_CONTAIN, OP_EQ, OP_GT, OP_GTC, OP_GTE, OP_LT, OP_LTC, OP_LTE, OP_MATCH, OP_RANGE, OP_NULL, OP_NOT_COMPLETE, OP_NOT_CONTAIN, OP_NOT_EQ, OP_NOT_MATCH, OP_NOT_RANGE, OP_NOT_NULL, } from '../../../constants/searchOperators'; const { OptionPickerInput, } = inputComponents; const operatorMessages = { full: defineMessages({ [OP_COMPLETE]: { id: 'operatorInput.OP_COMPLETE', defaultMessage: 'is complete', }, [OP_CONTAIN]: { id: 'operatorInput.OP_CONTAIN', defaultMessage: 'contains', }, [OP_EQ]: { id: 'operatorInput.OP_EQ', defaultMessage: 'is', }, [OP_GT]: { id: 'operatorInput.OP_GT', defaultMessage: 'is greater than', }, [OP_GTC]: { id: 'operatorInput.OP_GTC', defaultMessage: 'is greater than or contains', }, [OP_GTE]: { id: 'operatorInput.OP_GTE', defaultMessage: 'is at least', }, [OP_LT]: { id: 'operatorInput.OP_LT', defaultMessage: 'is less than', }, [OP_LTC]: { id: 'operatorInput.OP_LTC', defaultMessage: 'is less than or contains', }, [OP_LTE]: { id: 'operatorInput.OP_LTE', defaultMessage: 'is at most', }, [OP_MATCH]: { id: 'operatorInput.OP_MATCH', defaultMessage: 'matches', }, [OP_RANGE]: { id: 'operatorInput.OP_RANGE', defaultMessage: 'is between', }, [OP_NULL]: { id: 'operatorInput.OP_NULL', defaultMessage: 'is blank', }, [OP_NOT_COMPLETE]: { id: 'operatorInput.OP_NOT_COMPLETE', defaultMessage: 'is incomplete', }, [OP_NOT_CONTAIN]: { id: 'operatorInput.OP_NOT_CONTAIN', defaultMessage: 'does not contain', }, [OP_NOT_EQ]: { id: 'operatorInput.OP_NOT_EQ', defaultMessage: 'is not', }, [OP_NOT_MATCH]: { id: 'operatorInput.OP_NOT_MATCH', defaultMessage: 'does not match', }, [OP_NOT_RANGE]: { id: 'operatorInput.OP_NOT_RANGE', defaultMessage: 'is not between', }, [OP_NOT_NULL]: { id: 'operatorInput.OP_NOT_NULL', defaultMessage: 'is not blank', }, }), compact: defineMessages({ [OP_COMPLETE]: { id: 'operatorInput.compact.OP_COMPLETE', defaultMessage: 'is complete', }, [OP_CONTAIN]: { id: 'operatorInput.compact.OP_CONTAIN', defaultMessage: 'contains', }, [OP_EQ]: { id: 'operatorInput.compact.OP_EQ', defaultMessage: '=', }, [OP_GT]: { id: 'operatorInput.compact.OP_GT', defaultMessage: '>', }, [OP_GTC]: { id: 'operatorInput.compact.OP_GTC', defaultMessage: '> or contains', }, [OP_GTE]: { id: 'operatorInput.compact.OP_GTE', defaultMessage: '≥', }, [OP_LT]: { id: 'operatorInput.compact.OP_LT', defaultMessage: '<', }, [OP_LTC]: { id: 'operatorInput.compact.OP_LTC', defaultMessage: '< or contains', }, [OP_LTE]: { id: 'operatorInput.compact.OP_LTE', defaultMessage: '≤', }, [OP_MATCH]: { id: 'operatorInput.compact.OP_MATCH', defaultMessage: 'matches', }, [OP_RANGE]: { id: 'operatorInput.compact.OP_RANGE', defaultMessage: 'is between', }, [OP_NULL]: { id: 'operatorInput.compact.OP_NULL', defaultMessage: 'is blank', }, [OP_NOT_COMPLETE]: { id: 'operatorInput.compact.OP_NOT_COMPLETE', defaultMessage: 'is incomplete', }, [OP_NOT_CONTAIN]: { id: 'operatorInput.compact.OP_NOT_CONTAIN', defaultMessage: 'doesn\'t contain', }, [OP_NOT_EQ]: { id: 'operatorInput.compact.OP_NOT_EQ', defaultMessage: '≠', }, [OP_NOT_MATCH]: { id: 'operatorInput.compact.OP_NOT_MATCH', defaultMessage: 'doesn\'t match', }, [OP_NOT_RANGE]: { id: 'operatorInput.compact.OP_NOT_RANGE', defaultMessage: 'isn\'t between', }, [OP_NOT_NULL]: { id: 'operatorInput.compact.OP_NOT_NULL', defaultMessage: 'isn\'t blank', }, }), }; const propTypes = { compact: PropTypes.bool, intl: intlShape, name: PropTypes.string, operators: PropTypes.arrayOf(PropTypes.string), readOnly: PropTypes.bool, value: PropTypes.string, onCommit: PropTypes.func, }; function OperatorInput(props) { const { compact, intl, name, operators, readOnly, value, onCommit, } = props; const messages = compact ? operatorMessages.compact : operatorMessages.full; if (readOnly) { return ( <FormattedMessage {...messages[value]} tagName="div" /> ); } const options = operators.map((op) => ( { value: op, label: intl.formatMessage(messages[op]) } )); return ( <OptionPickerInput blankable={false} name={name} options={options} value={value} onCommit={onCommit} /> ); } OperatorInput.propTypes = propTypes; export default injectIntl(OperatorInput);