@talend/react-components
Version:
Set of react components.
151 lines (150 loc) • 6.33 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _translate = _interopRequireDefault(require("../../translate"));
var _DateTimeRange = _interopRequireDefault(require("../DateTimeRange"));
var _Context = require("../DateTimeRange/Context");
var _InputDateTimePicker = _interopRequireDefault(require("../InputDateTimePicker"));
var _InputDateTimeRangePickerModule = _interopRequireDefault(require("./InputDateTimeRangePicker.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const PROPS_TO_OMIT_FOR_INPUT = ['id', 'dateFormat', 'onBlur', 'onChange', 'startDateTime', 'endDateTime', 'isDisabledChecker'];
function InputDateTimeRangePicker(props) {
const {
id,
dateFormat,
useSeconds,
onChange,
onBlur,
inline
} = props;
const inputProps = (0, _lodash.omit)(props, PROPS_TO_OMIT_FOR_INPUT);
const [vertical, setVertical] = (0, _react.useState)(false);
const containerRef = (0, _react.useRef)();
const isDisplayInline = !!inline;
const className = (0, _classnames.default)({
'range-picker': !vertical,
[_InputDateTimeRangePickerModule.default['range-picker']]: !vertical,
'range-picker-vertical': vertical && !isDisplayInline,
[_InputDateTimeRangePickerModule.default['range-picker-vertical']]: vertical && !isDisplayInline,
'date-time-range-picker-inline': isDisplayInline,
[_InputDateTimeRangePickerModule.default['date-time-range-picker-inline']]: isDisplayInline
});
const showHorizontalAndTest = (0, _react.useMemo)(() => {
return function showHorizontal() {
if (vertical) {
setVertical(false);
}
// delay for the display to update
setTimeout(() => {
var _rangeContainer$offse;
const rangeContainer = containerRef.current;
if (rangeContainer && rangeContainer.scrollWidth > ((_rangeContainer$offse = rangeContainer.offsetParent) === null || _rangeContainer$offse === void 0 ? void 0 : _rangeContainer$offse.offsetWidth)) {
setVertical(true);
}
});
};
}, [vertical]);
(0, _react.useEffect)(() => {
const resizeListener = window.addEventListener('resize', (0, _lodash.debounce)(showHorizontalAndTest, 200));
return () => window.removeEventListener('resize', resizeListener);
}, [showHorizontalAndTest]);
(0, _react.useEffect)(() => {
showHorizontalAndTest();
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimeRange.default.Manager, {
startDateTime: props.startDateTime,
endDateTime: props.endDateTime,
onChange: onChange,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Context.DateTimeRangeContext.Consumer, {
children: ({
startDateTime,
endDateTime,
onStartChange,
onEndChange
}) => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: className,
ref: containerRef,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "range-input",
"data-testid": "range-start",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Form.Label, {
htmlFor: props.id,
children: props.t('TC_DATE_PICKER_RANGE_FROM', {
defaultValue: 'From'
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputDateTimePicker.default, {
...inputProps,
id: `${id}-start`,
dateFormat: dateFormat,
useSeconds: useSeconds,
value: startDateTime,
endDate: endDateTime,
onChange: onStartChange,
onBlur: onBlur,
defaultTimeValue: props.defaultTimeStart
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: (0, _classnames.default)(_InputDateTimeRangePickerModule.default.arrow, 'arrow'),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SizedIcon, {
name: vertical ? 'arrow-bottom' : 'arrow-right',
size: "S"
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: "range-input",
"data-testid": "range-end",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Form.Label, {
htmlFor: props.id,
children: props.t('TC_DATE_PICKER__RANGE_TO', {
defaultValue: 'To'
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputDateTimePicker.default, {
...inputProps,
id: `${id}-end`,
dateFormat: dateFormat,
useSeconds: useSeconds,
value: endDateTime,
startDate: startDateTime,
onChange: onEndChange,
onBlur: onBlur,
defaultTimeValue: props.defaultTimeEnd
})]
})]
})
})
});
}
InputDateTimeRangePicker.defaultProps = {
dateFormat: 'YYYY-MM-DD',
t: (0, _translate.default)()
};
InputDateTimeRangePicker.propTypes = {
id: _propTypes.default.string.isRequired,
dateFormat: _propTypes.default.string,
useSeconds: _propTypes.default.bool,
onChange: _propTypes.default.func,
onBlur: _propTypes.default.func,
defaultTimeStart: _propTypes.default.shape({
hours: _propTypes.default.string.isRequired,
minutes: _propTypes.default.string.isRequired,
seconds: _propTypes.default.string
}),
defaultTimeEnd: _propTypes.default.shape({
hours: _propTypes.default.string.isRequired,
minutes: _propTypes.default.string.isRequired,
seconds: _propTypes.default.string
}),
startDateTime: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
endDateTime: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.string]),
inline: _propTypes.default.string,
t: _propTypes.default.func
};
var _default = exports.default = InputDateTimeRangePicker;
//# sourceMappingURL=InputDateTimeRangePicker.component.js.map