@hisptz/react-ui
Version:
A collection of reusable complex DHIS2 react ui components.
69 lines (68 loc) • 2.47 kB
JavaScript
import i18n from "@dhis2/d2-i18n";
import { SegmentedControl } from "@dhis2/ui";
import { head, isEmpty } from "lodash";
import React, { useCallback, useMemo, useState } from "react";
import CalendarSpecificPeriodSelector from "./components/CalendarSpecificPeriodDimension";
import { CalendarTypes } from "./components/CalendarSpecificPeriodDimension/constants/calendar";
import DateRange from "./components/DateRange";
export default function PeriodSelector(_ref) {
let {
excludedPeriodTypes,
calendar,
selectedPeriods,
onSelect,
excludeFixedPeriods,
excludeRelativePeriods,
singleSelection,
enableDateRange,
defaultInputType,
allowFuturePeriods
} = _ref;
const initialInputType = useMemo(() => {
if (!isEmpty(selectedPeriods)) {
const period = head(selectedPeriods !== null && selectedPeriods !== void 0 ? selectedPeriods : []);
if ((period === null || period === void 0 ? void 0 : period.type) === "RANGE") {
return "dateRange";
} else {
return "period";
}
} else {
return defaultInputType !== null && defaultInputType !== void 0 ? defaultInputType : "period";
}
}, []);
const [inputType, setInputType] = useState(initialInputType);
const onInputTypeChange = useCallback(_ref2 => {
let {
value
} = _ref2;
onSelect({
items: []
});
setInputType(value);
}, [onSelect]);
return /*#__PURE__*/React.createElement("div", {
className: "column gap-16"
}, enableDateRange && /*#__PURE__*/React.createElement(SegmentedControl, {
selected: inputType,
onChange: onInputTypeChange,
options: [{
label: i18n.t("Period"),
value: "period"
}, {
label: i18n.t("Date Range"),
value: "dateRange"
}]
}), inputType === "period" && /*#__PURE__*/React.createElement(CalendarSpecificPeriodSelector, {
allowFuturePeriods: allowFuturePeriods,
singleSelection: singleSelection,
excludedPeriodTypes: excludedPeriodTypes !== null && excludedPeriodTypes !== void 0 ? excludedPeriodTypes : [],
calendar: calendar !== null && calendar !== void 0 ? calendar : CalendarTypes.GREGORIAN,
onSelect: onSelect,
selectedPeriods: selectedPeriods,
excludeFixedPeriods: excludeFixedPeriods,
excludeRelativePeriods: excludeRelativePeriods
}), inputType === "dateRange" && /*#__PURE__*/React.createElement(DateRange, {
value: selectedPeriods,
onChange: onSelect
}));
}