@orfeas126/box-ui-elements
Version:
Box UI Elements
66 lines (65 loc) • 2.24 kB
JavaScript
import * as React from 'react';
import { injectIntl } from 'react-intl';
import IconPlusThin from '../../icons/general/IconPlusThin';
import IconMinusThin from '../../icons/general/IconMinusThin';
import PlainButton from '../plain-button/PlainButton';
import messages from '../../elements/common/messages';
import { bdlGray50 } from '../../styles/variables';
import './GridViewSlider.scss';
const GridViewSlider = ({
columnCount,
gridMaxColumns,
gridMinColumns,
intl,
maxColumnCount,
onChange
}) => {
const {
formatMessage
} = intl;
const RANGE_STEP = 1;
// This math is necessary since the highest value of the slider should result in
// the lowest number of columns
const RANGE_MIN = gridMaxColumns - maxColumnCount + 1;
const RANGE_MAX = gridMaxColumns - gridMinColumns + 1;
const sliderValue = RANGE_MAX - columnCount + 1;
return gridMinColumns < maxColumnCount && /*#__PURE__*/React.createElement("div", {
className: "bdl-GridViewSlider"
}, /*#__PURE__*/React.createElement(PlainButton, {
className: "bdl-GridViewSlider-button",
onClick: () => {
onChange(Math.max(RANGE_MIN, sliderValue - RANGE_STEP));
},
type: "button",
"aria-label": formatMessage(messages.gridViewDecreaseColumnSize)
}, /*#__PURE__*/React.createElement(IconMinusThin, {
color: bdlGray50,
width: 14,
height: 14
})), /*#__PURE__*/React.createElement("input", {
"aria-label": formatMessage(messages.gridViewColumnSize),
className: "bdl-GridViewSlider-range",
max: RANGE_MAX,
min: RANGE_MIN,
onChange: event => {
onChange(event.currentTarget.valueAsNumber);
},
step: RANGE_STEP,
type: "range",
value: sliderValue
}), /*#__PURE__*/React.createElement(PlainButton, {
className: "bdl-GridViewSlider-button",
onClick: () => {
onChange(Math.min(RANGE_MAX, sliderValue + RANGE_STEP));
},
type: "button",
"aria-label": formatMessage(messages.gridViewIncreaseColumnSize)
}, /*#__PURE__*/React.createElement(IconPlusThin, {
color: bdlGray50,
width: 14,
height: 14
})));
};
export { GridViewSlider as GridViewSliderBase };
export default injectIntl(GridViewSlider);
//# sourceMappingURL=GridViewSlider.js.map