@harvest-profit/npk
Version:
NPK UI Design System
76 lines • 4.47 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const DateInput_1 = __importDefault(require("./DateInput"));
const Calendar_1 = __importDefault(require("../Calendar"));
const Menu_1 = __importDefault(require("../Menu"));
const Button_1 = __importDefault(require("../Button"));
const regular_1 = require("@harvest-profit/npk/icons/regular");
const Group_1 = __importDefault(require("../Input/Group"));
const helpers_1 = require("./helpers");
const DateRangeInput = ({ picker, visibleMonths = 2, value: externalValue, onChange: onExternalChange, granularity = 'day', output = 'ISO', includeYear = true, isoType = null, monthAsName = false, name, ...props }) => {
let includeTime = (0, helpers_1.isoDateIncludesTime)(externalValue?.start) || (0, helpers_1.isoDateIncludesTime)(externalValue?.end);
if (isoType === 'DateTime')
includeTime = true;
if (isoType === 'Date')
includeTime = false;
const formatter = (0, helpers_1.useValueFormatter)(output, includeTime);
// Ensure the value is in the correct format
let value = { start: formatter.from(externalValue?.start), end: formatter.from(externalValue?.end) };
if (!value.start && !value.end)
value = null;
const ref = (0, react_1.useRef)(null);
const [isFocused, setIsFocused] = (0, react_1.useState)(false);
const onFocus = () => {
setTimeout(() => {
if (ref.current && !isFocused && ref.current.contains(document.activeElement)) {
setIsFocused(true);
if (props.onFocus)
props.onFocus({ target: ref.current });
}
}, 10);
};
const onBlur = () => {
setTimeout(() => {
if (ref.current && isFocused && !ref.current.contains(document.activeElement)) {
setIsFocused(false);
if (props.onFocus)
props.onBlur({ target: ref.current });
}
}, 10);
};
(0, react_1.useEffect)(() => {
if (!isFocused && value?.start && value?.end && value.start > value.end) {
if (onExternalChange)
onExternalChange({ start: formatter.to(value.end), end: formatter.to(value.start) });
}
}, [isFocused, value?.start, value?.end]);
const onChangeStart = (newValue) => {
if (onExternalChange) {
onExternalChange({
start: formatter.to(newValue),
end: formatter.to(value?.end),
});
}
};
const onChangeEnd = (newValue) => {
if (onExternalChange) {
onExternalChange({
start: formatter.to(value?.start),
end: formatter.to(newValue),
});
}
};
// If you provide a "picker" prop, we will show a calendar
const extraProps = {};
if (picker) {
extraProps.trailingVisual = ((0, jsx_runtime_1.jsxs)(Menu_1.default, { arrow: true, placement: "bottom", autoDismiss: false, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { invisible: true, icon: regular_1.CalendarIcon, "aria-label": "Pick a date range", tabIndex: -1 }), (0, jsx_runtime_1.jsx)(Menu_1.default.Overlay, { children: (0, jsx_runtime_1.jsx)(Calendar_1.default, { visibleMonths: visibleMonths, range: true, value: value, onChange: onExternalChange, output: "Date", ...props }) })] }));
}
return ((0, jsx_runtime_1.jsxs)(Group_1.default, { containsSegments: true, contentsRef: ref, ...props, ...extraProps, children: [(0, jsx_runtime_1.jsx)(DateInput_1.default, { output: "Date", name: `${name}_start`, excludeGroup: true, onChange: onChangeStart, value: value?.start, granularity: granularity, variant: "plain", onFocus: onFocus, onBlur: onBlur, includeYear: includeYear, monthAsName: monthAsName }), (0, jsx_runtime_1.jsx)("span", { style: { padding: '0 10px' }, children: "\u2013" }), (0, jsx_runtime_1.jsx)(DateInput_1.default, { output: "Date", name: `${name}_end`, excludeGroup: true, onChange: onChangeEnd, value: value?.end, granularity: granularity, variant: "plain", onFocus: onFocus, onBlur: onBlur, includeYear: includeYear, monthAsName: monthAsName })] }));
};
exports.default = DateRangeInput;
//# sourceMappingURL=DateRangeInput.js.map