@redocly/theme/lib/components/Filter/FilterDateRange.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterDateRange = FilterDateRange;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const FilterOptions_1 = require("../../components/Filter/FilterOptions");
const FilterTitle_1 = require("../../components/Filter/FilterTitle");
const DatePicker_1 = require("../../components/DatePicker/DatePicker");
const hooks_1 = require("../../core/hooks");
const utils_1 = require("../../core/utils");
function FilterDateRange({ filter }) {
    const { useTranslate } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const from = filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined;
    const to = filter.selectedOptions.to ? new Date(filter.selectedOptions.to) : undefined;
    return (react_1.default.createElement(FilterDateRangeWrapper, { "data-component-name": "Filter/FilterDateRange" },
        react_1.default.createElement(FilterTitle_1.FilterTitle, { "data-translation-key": filter.titleTranslationKey }, translate(filter.titleTranslationKey, filter.title)),
        react_1.default.createElement(FilterOptions_1.FilterOptions, null,
            react_1.default.createElement(DateRangeWrapper, null,
                react_1.default.createElement(DateRangeRow, null,
                    react_1.default.createElement("span", null, translate('filter.dateRange.from', 'From:')),
                    react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: new Date(), onChange: (from) => {
                            if (Array.isArray(from))
                                return;
                            filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));
                        } })),
                react_1.default.createElement(DateRangeRow, null,
                    react_1.default.createElement("span", null, translate('filter.dateRange.to', 'To:')),
                    react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", format: "y-MM-dd", minDate: from, value: to, onChange: (to) => {
                            if (Array.isArray(to))
                                return;
                            filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));
                        } }))))));
}
const DateRangeWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  gap: var(--filter-options-gap);
`;
const DateRangeRow = styled_components_1.default.div `
  color: var(--filter-date-picker-color);
  display: flex;
  flex-direction: row;

  align-items: center;
  gap: var(--filter-date-picker-gap);

  > span {
    width: var(--filter-date-picker-width);
    color: var(--filter-option-label-color);
  }
`;
const FilterDateRangeWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
`;
//# sourceMappingURL=FilterDateRange.js.map