@talend/react-faceted-search
Version:
165 lines • 5.5 kB
JavaScript
import { useCallback, useEffect, useMemo, useState } from 'react';
import { subDays } from 'date-fns';
import PropTypes from 'prop-types';
import { ButtonPrimary, ButtonTertiary, Form, InlineMessageDestructive, SizedIcon, StackHorizontal, StackVertical } from '@talend/design-system';
import { getDataAttrFromProps } from '@talend/utils';
import { InputDateTimeRangePicker } from "@talend/react-components";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
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] = useState(value.id === 'CUSTOM');
const badgePeriodFormId = `${id}-period-form`;
const goBack = () => setCustom(false);
const [dirty, setDirty] = useState(false);
const initialStartDateTime = useMemo(() => subDays(new Date(), 1), []);
const initialEndDateTime = useMemo(() => new Date(), []);
const options = rest.values || getPeriodOptions(t);
const resetRange = useCallback(() => {
onChange(null, {
id: 'CUSTOM',
startDateTime: initialStartDateTime,
endDateTime: initialEndDateTime,
errorMessage: null
});
}, [onChange, initialStartDateTime, initialEndDateTime]);
const onSelectOption = 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]);
useEffect(() => {
if (dirty) {
onSubmit();
setDirty(false);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dirty]);
return /*#__PURE__*/_jsxs(Form, {
id: `${badgePeriodFormId}-form`,
onSubmit: onSubmit,
children: [!isCustom && /*#__PURE__*/_jsx(StackVertical, {
gap: "0",
align: "normal",
children: options.map(rowItem => {
return /*#__PURE__*/_jsx(ButtonTertiary, {
onClick: event => onSelectOption(rowItem, event),
"data-testid": `badge-period-form-item-${rowItem.id}`,
"data-test": `badge-period-form-item-${rowItem.id}`,
...getDataAttrFromProps(rowItem),
children: rowItem.id === 'CUSTOM' ? /*#__PURE__*/_jsxs(StackHorizontal, {
gap: "0",
align: "center",
justify: "spaceBetween",
children: [/*#__PURE__*/_jsx("span", {
children: rowItem.label
}), /*#__PURE__*/_jsx(SizedIcon, {
name: "chevron-right",
size: "M"
})]
}) : /*#__PURE__*/_jsx("span", {
children: rowItem.label
})
}, rowItem.id);
})
}), isCustom && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsx(ButtonTertiary, {
"data-testid": "badge-period-form-custom-button",
icon: "chevron-left",
onClick: goBack,
...getDataAttrFromProps(rest),
children: t('CUSTOM', {
defaultValue: 'Custom'
})
})
}), /*#__PURE__*/_jsx(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__*/_jsx(InlineMessageDestructive, {
description: value.errorMessage
}), /*#__PURE__*/_jsxs(Form.Buttons, {
children: [/*#__PURE__*/_jsx(ButtonTertiary, {
id: "reset-button",
disabled: rest.isLoading,
onClick: resetRange,
...getDataAttrFromProps(rest),
children: t('RESET', {
defaultValue: 'Reset'
})
}), /*#__PURE__*/_jsx(ButtonPrimary, {
id: "apply-button",
type: "submit",
disabled: rest.isLoading || !!(value !== null && value !== void 0 && value.errorMessage),
...getDataAttrFromProps(rest),
children: t('APPLY', {
defaultValue: 'Apply'
})
})]
})]
})]
});
};
BadgePeriodForm.propTypes = {
id: PropTypes.string,
onChange: PropTypes.func.isRequired,
onSubmit: PropTypes.func.isRequired,
value: PropTypes.object,
t: PropTypes.func.isRequired
};
export { BadgePeriodForm };
//# sourceMappingURL=BadgePeriodForm.component.js.map