@talend/react-faceted-search
Version:
172 lines (171 loc) • 6.15 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BadgePeriodForm = void 0;
var _react = require("react");
var _dateFns = require("date-fns");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _utils = require("@talend/utils");
var _reactComponents = require("@talend/react-components");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function getPeriodOptions(t) {
return [{
id: 'LAST_24_HOURS',
value: 'lastDay',
label: t('LAST_24_HOURS', {
defaultValue: 'Last 24 hours'
})
}, {
id: 'LAST_3_DAYS',
value: 'last3days',
label: t('LAST_3_DAYS', {
defaultValue: 'Last 3 days'
})
}, {
id: 'LAST_WEEK',
value: 'last7days',
label: t('LAST_WEEK', {
defaultValue: 'Last 7 days'
})
}, {
id: 'LAST_MONTH',
value: 'last30days',
label: t('LAST_MONTH', {
defaultValue: 'Last 30 days'
})
}, {
id: 'CUSTOM',
value: 'custom',
label: t('CUSTOM', {
defaultValue: 'Custom'
})
}];
}
const BadgePeriodForm = ({
id,
onChange,
onSubmit,
t,
value,
...rest
}) => {
const [isCustom, setCustom] = (0, _react.useState)(value.id === 'CUSTOM');
const badgePeriodFormId = `${id}-period-form`;
const goBack = () => setCustom(false);
const [dirty, setDirty] = (0, _react.useState)(false);
const initialStartDateTime = (0, _react.useMemo)(() => (0, _dateFns.subDays)(new Date(), 1), []);
const initialEndDateTime = (0, _react.useMemo)(() => new Date(), []);
const options = rest.values || getPeriodOptions(t);
const resetRange = (0, _react.useCallback)(() => {
onChange(null, {
id: 'CUSTOM',
startDateTime: initialStartDateTime,
endDateTime: initialEndDateTime,
errorMessage: null
});
}, [onChange, initialStartDateTime, initialEndDateTime]);
const onSelectOption = (0, _react.useCallback)((rowItem, event) => {
if (rowItem.id === 'CUSTOM') {
setCustom(true);
onChange(event, {
id: 'CUSTOM',
startDateTime: initialStartDateTime,
endDateTime: initialEndDateTime,
errorMessage: null
});
} else {
onChange(event, rowItem);
setDirty(true);
}
}, [onChange, setDirty, initialStartDateTime, initialEndDateTime]);
(0, _react.useEffect)(() => {
if (dirty) {
onSubmit();
setDirty(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dirty]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.Form, {
id: `${badgePeriodFormId}-form`,
onSubmit: onSubmit,
children: [!isCustom && /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.StackVertical, {
gap: "0",
align: "normal",
children: options.map(rowItem => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonTertiary, {
onClick: event => onSelectOption(rowItem, event),
"data-testid": `badge-period-form-item-${rowItem.id}`,
"data-test": `badge-period-form-item-${rowItem.id}`,
...(0, _utils.getDataAttrFromProps)(rowItem),
children: rowItem.id === 'CUSTOM' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.StackHorizontal, {
gap: "0",
align: "center",
justify: "spaceBetween",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: rowItem.label
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.SizedIcon, {
name: "chevron-right",
size: "M"
})]
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
children: rowItem.label
})
}, rowItem.id);
})
}), isCustom && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonTertiary, {
"data-testid": "badge-period-form-custom-button",
icon: "chevron-left",
onClick: goBack,
...(0, _utils.getDataAttrFromProps)(rest),
children: t('CUSTOM', {
defaultValue: 'Custom'
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactComponents.InputDateTimeRangePicker, {
id: `${badgePeriodFormId}-date-time-range-picker`,
startDateTime: (value === null || value === void 0 ? void 0 : value.startDateTime) || initialStartDateTime,
endDateTime: (value === null || value === void 0 ? void 0 : value.endDateTime) || initialEndDateTime,
onChange: (event, range) => {
onChange(event, {
...range,
id: 'CUSTOM'
});
}
}), (value === null || value === void 0 ? void 0 : value.errorMessage) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.InlineMessageDestructive, {
description: value.errorMessage
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.Form.Buttons, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonTertiary, {
id: "reset-button",
disabled: rest.isLoading,
onClick: resetRange,
...(0, _utils.getDataAttrFromProps)(rest),
children: t('RESET', {
defaultValue: 'Reset'
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonPrimary, {
id: "apply-button",
type: "submit",
disabled: rest.isLoading || !!(value !== null && value !== void 0 && value.errorMessage),
...(0, _utils.getDataAttrFromProps)(rest),
children: t('APPLY', {
defaultValue: 'Apply'
})
})]
})]
})]
});
};
exports.BadgePeriodForm = BadgePeriodForm;
BadgePeriodForm.propTypes = {
id: _propTypes.default.string,
onChange: _propTypes.default.func.isRequired,
onSubmit: _propTypes.default.func.isRequired,
value: _propTypes.default.object,
t: _propTypes.default.func.isRequired
};
//# sourceMappingURL=BadgePeriodForm.component.js.map