@geneui/components
Version:
The Gene UI components library designed for BI tools
184 lines (180 loc) • 7.36 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { n as noop, b as isToday, d as isYesterday, e as isThisWeek, g as isLastWeek, h as isThisMonth, j as isLastMonth, l as isLastMonthToDate, m as getLMTD } from '../index-a0e4e333.js';
import { d as dayjsWithPlugins } from '../dateValidation-67caec66.js';
import Button from '../Button/index.js';
import DatePickerInput from '../DatePickerInput/index.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import { g as getBrowserDateFormat } from '../localization-4ba17032.js';
import 'react-dom';
import '../_commonjsHelpers-24198af3.js';
import '../tslib.es6-f211516f.js';
import '../Icon/index.js';
import '../configs-00612ce0.js';
import '../hooks/useClick.js';
import '../hooks/useKeyDown.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../index-08898b29.js';
import '../index-122432cd.js';
import '../hooks/useClickOutside.js';
import '../Scrollbar/index.js';
import '../GeneUIProvider/index.js';
import '../debounce-4419bc2f.js';
import '../ExtendedInput/index.js';
import '../useEllipsisDetection-4d997d5d.js';
import '../SuggestionList/index.js';
import '../config-1053d64d.js';
import '../callAfterDelay-7272faca.js';
import '../index-6d7e99cd.js';
import '../DatePicker/index.js';
import '../guid-8ddf77b3.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .date-filters-holder{align-items:center;display:flex;justify-content:flex-end;width:100%}[data-gene-ui-version=\"2.16.5\"] .date-filters-holder>:not(:last-child){flex-shrink:0}[data-gene-ui-version=\"2.16.5\"] .date-filter-input{margin-inline-start:1rem}html:not([dir=rtl]) .date-filter-input .input-structure{padding-right:0}html[dir=rtl] .date-filter-input .input-structure{padding-left:0}[data-gene-ui-version=\"2.16.5\"] .date-filter-input .icon{border-radius:var(--input-element-border-radius,100%);height:3.6rem;margin:0 0 0 .5rem;width:3.6rem}html[dir=rtl] .date-filter-input .icon{margin:0 .5rem 0 0}[data-gene-ui-version=\"2.16.5\"] .date-filter-input.active .icon{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.16.5\"] .date-filter-input.active .input-element-back{background:#0000;border-color:var(--hero)}";
styleInject(css_248z);
function getFilterByKey(key, date) {
const [start, end] = date;
const startDate = start ? dayjsWithPlugins(start) : null;
const endDate = end ? dayjsWithPlugins(end) : null;
const today = dayjsWithPlugins();
const dayFromLastWeek = today.subtract(7, 'day');
const dayFromLastMonth = today.subtract(1, 'month');
if (key === 'today') return {
selected: startDate && isToday(startDate, endDate || startDate),
value: [today, today]
};
if (key === 'yesterday') return {
selected: startDate && isYesterday(startDate, endDate || startDate),
value: [today.subtract(1, 'day'), today.subtract(1, 'day')]
};
if (key === 'thisWeek') return {
selected: startDate && isThisWeek(startDate, endDate),
value: [today.startOf('week'), today.endOf('week')]
};
if (key === 'lastWeek') return {
selected: startDate && isLastWeek(startDate, endDate),
value: [dayFromLastWeek.startOf('week'), dayFromLastWeek.endOf('week')]
};
if (key === 'thisMonth') return {
selected: startDate && isThisMonth(startDate, endDate),
value: [today.startOf('month'), today.endOf('month')]
};
if (key === 'lastMonth') return {
selected: startDate && isLastMonth(startDate, endDate),
value: [dayFromLastMonth.startOf('month'), dayFromLastMonth.endOf('month')]
};
if (key === 'LMTD') return {
selected: startDate && isLastMonthToDate(startDate, endDate),
value: [dayFromLastMonth.startOf('month'), getLMTD(today, dayFromLastMonth)]
};
}
const getRightDate = (date, isControlled) => isControlled && date ? dayjsWithPlugins(date).toDate() : null;
function DateFilter(props) {
const {
value,
onChange,
format,
filters,
className,
buttonProps,
pickerProps,
...restProps
} = props;
const isControlled = ('value' in props);
const [localValue, setLocalValue] = useState(() => {
const [start, end] = value;
const startDate = getRightDate(start, isControlled);
const endDate = getRightDate(end, isControlled);
return [startDate, endDate];
});
const handleChange = useCallback(dates => {
setLocalValue(dates);
onChange(dates);
}, [onChange]);
const handleButtonClick = useCallback(_ref => {
let [start, end] = _ref;
const dateObj = [start.toDate(), end.toDate()];
setLocalValue(dateObj);
onChange(dateObj);
}, [onChange]);
return /*#__PURE__*/React__default.createElement("div", _extends({
className: classnames('date-filters-holder', className)
}, restProps), Object.keys(filters).map(key => {
const label = filters[key];
const filter = getFilterByKey(key, localValue);
return filter ? /*#__PURE__*/React__default.createElement(Button, _extends({
key: key,
onClick: () => handleButtonClick(filter.value),
color: "default",
active: filter.selected,
appearance: "minimal"
}, buttonProps), label) : null;
}), /*#__PURE__*/React__default.createElement(DatePickerInput.WithRange, _extends({
value: localValue,
format: format,
onChange: handleChange,
appearance: "minimal",
flexibility: "content-size",
className: "date-filter-input active"
}, pickerProps)));
}
DateFilter.propTypes = {
/**
* Specify the format of date
*/
format: PropTypes.string,
/**
* Fires when user attempts to change value
* (dates: Array) => void
*/
onChange: PropTypes.func,
/**
* Controls which filter buttons will be displayed based on filters object existing keys.
* For example if you define only `today` property on filters objects
* It will be display button with [today]'s property value
* Which will change Datefilter value to today.
* All filters will be displayed by default.
*/
filters: PropTypes.exact({
today: PropTypes.string,
yesterday: PropTypes.string,
thisWeek: PropTypes.string,
lastWeek: PropTypes.string,
thisMonth: PropTypes.string,
lastMonth: PropTypes.string,
LMTD: PropTypes.string
}),
/**
* Current value. Creates a controlled component.
*/
value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.instanceOf(dayjsWithPlugins)), PropTypes.arrayOf(PropTypes.instanceOf(Date)), PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
/**
* Additional classname which applies to datefilter holder div element
*/
className: PropTypes.string,
/**
* Accepts same props as button component (atoms)
*/
buttonProps: PropTypes.object,
/**
* This props will pass to picker, check DatePicker prop types
*/
pickerProps: PropTypes.object
};
DateFilter.defaultProps = {
value: [],
format: getBrowserDateFormat(),
onChange: noop,
filters: {
today: 'Today',
yesterday: 'Yesterday',
thisWeek: 'This Week',
lastWeek: 'Last Week',
thisMonth: 'This Month',
lastMonth: 'Last Month',
LMTD: 'LMTD'
}
};
export { DateFilter as default };