@talend/react-faceted-search
Version:
73 lines (72 loc) • 2.28 kB
JavaScript
import { useMemo } from 'react';
import { startOfDay } from 'date-fns/startOfDay';
import PropTypes from 'prop-types';
import { ButtonPrimary, Form } from '@talend/design-system';
import { getDataAttrFromProps } from '@talend/utils';
import { getApplyDataFeature } from '../../../helpers/usage.helpers';
import styles from './BadgeDate.module.scss';
import { DatePicker } from "@talend/react-components";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const BadgeDateForm = ({
id,
onChange,
onSubmit,
value,
feature,
t,
...rest
}) => {
const applyDataFeature = useMemo(() => getApplyDataFeature(feature), [feature]);
return /*#__PURE__*/_jsxs(Form, {
id: `${id}-date-`,
onSubmit: onSubmit,
children: [/*#__PURE__*/_jsxs(DatePicker.Manager, {
id: `${id}-date-picker-manager`,
value: value,
onChange: (event, data) => {
if (!data.errors.length) {
onChange(event, startOfDay(data.date).getTime());
}
},
children: [/*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("label", {
htmlFor: `${id}-date-input`,
children: t('SELECT_A_DATE', 'Select a date')
}), /*#__PURE__*/_jsx(DatePicker.Input, {
id: `${id}-date-input`,
placeholder: t('TYPE_HERE', {
defaultValue: 'Type here'
})
})]
}), /*#__PURE__*/_jsx("div", {
className: styles['tc-badge-date-form-picker-container'],
children: /*#__PURE__*/_jsx(DatePicker.Picker, {})
})]
}), /*#__PURE__*/_jsx(Form.Buttons, {
padding: {
x: 0,
bottom: 0,
top: 'M'
},
children: /*#__PURE__*/_jsx(ButtonPrimary, {
"data-feature": applyDataFeature,
type: "submit",
...getDataAttrFromProps(rest),
children: t('APPLY', {
defaultValue: 'Apply'
})
})
})]
});
};
BadgeDateForm.propTypes = {
id: PropTypes.string.isRequired,
onChange: PropTypes.func,
onSubmit: PropTypes.func.isRequired,
value: PropTypes.number,
feature: PropTypes.string.isRequired,
t: PropTypes.func.isRequired
};
// eslint-disable-next-line import/prefer-default-export
export { BadgeDateForm };
//# sourceMappingURL=BadgeDateForm.component.js.map