@antscorp/antsomi-ui 1.3.5-beta.1 → 1.3.5-beta.11

package/es/assets/css/main.scss

@@ -1,5 +1,3 @@
-@import "animate.css";
-
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;

package/es/components/common/ConfigProvider/ConfigProvider.d.ts

@@ -2,6 +2,7 @@ import { ConfigProviderProps as AntdConfigProviderProps } from 'antd/es/config-p
 import React, { ReactNode } from 'react';
 import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 import { TLocale } from '@antscorp/antsomi-ui/es/types';
+import 'animate.css';
 interface ConfigProviderProps extends Omit<AntdConfigProviderProps, 'locale'> {
     children?: ReactNode;
     locale?: TLocale;

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -27,6 +27,7 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // Initialize languages
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
+import 'animate.css';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);

package/es/components/common/ConfigProvider/GlobalStyle.js

@@ -11,7 +11,7 @@ import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
 const { accent6, accent7, scrollBarSize } = THEME.token || {};
 export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
     return (React.createElement(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
@@ -769,5 +769,14 @@ export const GlobalStyle = () => {
           }
         }
       }
+
+      /* Menu */
+      .antsomi-menu {
+        .antsomi-menu-submenu.antsomi-menu-submenu-selected {
+          .antsomi-menu-item.antsomi-menu-item-selected {
+            background-color: ${(_37 = THEME.token) === null || _37 === void 0 ? void 0 : _37.blue};
+          }
+        }
+      }
     ` }));
 };

package/es/components/molecules/CalendarSelection/CalendarSelection.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CalendarSelectionProps } from './types';
+export declare const CalendarSelection: React.FC<CalendarSelectionProps>;

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -0,0 +1,45 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import React, { useLayoutEffect, useReducer, useRef } from 'react';
+import { Divider } from 'antd';
+import { ActionContext, StateContext } from './context';
+import { reducer, INITIAL_STATE } from './reducer';
+import { StyledPopover, StyledPopoverBody } from './styled';
+import { CustomPicker, Footer, RangeSelectOptions, TimeRangeDisplay } from './components';
+import { LOCAL_TIMEZONE, RANGE_LIMIT } from './constants';
+import { initState } from './actions';
+import { useTriggerOut } from './hooks/useTriggerOut';
+export const CalendarSelection = props => {
+    const initialed = useRef(false);
+    const { value, popoverProps, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, onChange, } = props;
+    const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
+    useLayoutEffect(() => {
+        if (!value)
+            return;
+        dispatch(initState(value, !initialed.current));
+        initialed.current = true;
+    }, [value]);
+    // useLayoutEffect(() => {
+    //   if (!state.open) {
+    //     return () => {
+    //       dispatch(resetValue());
+    //     };
+    //   }
+    // }, [state.open]);
+    useTriggerOut({ state, dispatch, onChange });
+    const popoverContent = (React.createElement(React.Fragment, null,
+        React.createElement(StyledPopoverBody, null,
+            React.createElement(RangeSelectOptions, null),
+            React.createElement(Divider, { type: "vertical", style: { margin: 0, height: 'auto' } }),
+            React.createElement(CustomPicker, null)),
+        React.createElement(Divider, { style: { margin: 0 } }),
+        React.createElement(Footer, null)));
+    // console.log(state.value.current.rangeValue);
+    return (React.createElement(StateContext.Provider, { value: Object.assign(Object.assign({}, state), { rangeLimit,
+            timezone }) },
+        React.createElement(ActionContext.Provider, { value: { dispatch } },
+            React.createElement(StyledPopover, Object.assign({}, popoverProps, { open: state.open, arrow: false, trigger: ['click'], content: popoverContent, destroyTooltipOnHide: true, overlayInnerStyle: { padding: 0 }, onOpenChange: isOpen => {
+                    if (!isOpen)
+                        dispatch({ type: 'toggle_popover' });
+                } }),
+                React.createElement(TimeRangeDisplay, { showType: timeDisplayProps === null || timeDisplayProps === void 0 ? void 0 : timeDisplayProps.showType })))));
+};

package/es/components/molecules/CalendarSelection/actions.d.ts

@@ -0,0 +1,55 @@
+import { Custom, RangeInfo, CalendarSelectionValue, RangeValue } from './types';
+export declare const ACTION_TYPES: {
+    readonly initState: "init_state";
+    readonly changeRangeType: "change_range_type";
+    readonly updateRangeInfo: "update_range_info";
+    readonly updateRangeValue: "update_range_value";
+    readonly changeAutoUpdateTo: "change_auto_update_to";
+    readonly togglePopover: "toggle_popover";
+    readonly apply: "apply";
+    readonly resetValue: "reset_value";
+};
+export declare const changeRangeType: (rangeType: string, callback?: ((rangeInfo: RangeInfo) => void) | undefined) => {
+    type: "change_range_type";
+    payload: {
+        rangeType: string;
+        callback: ((rangeInfo: RangeInfo) => void) | undefined;
+    };
+};
+export declare const updateRangeInfo: (updateValue: Partial<RangeInfo>) => {
+    type: "update_range_info";
+    payload: {
+        updateValue: Partial<RangeInfo>;
+    };
+};
+export declare const updateRangeValue: (rangeValue: RangeValue[], options?: {
+    isManual: boolean;
+}) => {
+    type: "update_range_value";
+    payload: {
+        rangeValue: RangeValue[];
+        options: {
+            isManual: boolean;
+        } | undefined;
+    };
+};
+export declare const changeAutoUpdateTo: (value: Custom['autoUpdateTo']) => {
+    type: "change_auto_update_to";
+    payload: import("./types").AutoUpdateTo;
+};
+export declare const initState: (initData: CalendarSelectionValue, needTriggerOut?: boolean) => {
+    type: "init_state";
+    payload: {
+        initData: CalendarSelectionValue;
+        needTriggerOut: boolean;
+    };
+};
+export declare const togglePopover: () => {
+    type: "toggle_popover";
+};
+export declare const apply: () => {
+    type: "apply";
+};
+export declare const resetValue: () => {
+    type: "reset_value";
+};

package/es/components/molecules/CalendarSelection/actions.js

@@ -0,0 +1,39 @@
+export const ACTION_TYPES = {
+    initState: 'init_state',
+    changeRangeType: 'change_range_type',
+    updateRangeInfo: 'update_range_info',
+    updateRangeValue: 'update_range_value',
+    changeAutoUpdateTo: 'change_auto_update_to',
+    togglePopover: 'toggle_popover',
+    apply: 'apply',
+    resetValue: 'reset_value',
+};
+export const changeRangeType = (rangeType, callback) => ({
+    type: ACTION_TYPES.changeRangeType,
+    payload: { rangeType, callback },
+});
+export const updateRangeInfo = (updateValue) => ({
+    type: ACTION_TYPES.updateRangeInfo,
+    payload: { updateValue },
+});
+export const updateRangeValue = (rangeValue, options) => ({
+    type: ACTION_TYPES.updateRangeValue,
+    payload: { rangeValue, options },
+});
+export const changeAutoUpdateTo = (value) => ({
+    type: ACTION_TYPES.changeAutoUpdateTo,
+    payload: value,
+});
+export const initState = (initData, needTriggerOut = false) => ({
+    type: ACTION_TYPES.initState,
+    payload: { initData, needTriggerOut },
+});
+export const togglePopover = () => ({
+    type: ACTION_TYPES.togglePopover,
+});
+export const apply = () => ({
+    type: ACTION_TYPES.apply,
+});
+export const resetValue = () => ({
+    type: ACTION_TYPES.resetValue,
+});

package/es/components/molecules/CalendarSelection/components/AutoUpdateTo/AutoUpdateTo.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    className?: string;
+    id?: string;
+};
+export declare const AutoUpdateTo: React.FC<Props>;
+export {};

package/es/components/molecules/CalendarSelection/components/AutoUpdateTo/AutoUpdateTo.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Select } from '@antscorp/antsomi-ui/es/components/molecules/Select';
+import { updateRangeInfo } from '../../actions';
+import { AUTO_UPDATE_TO_KEY, AUTO_UPDATE_TO_OPTIONS, SELECTION_KEY } from '../../constants';
+import { useCalendarSelectionContext } from '../../hooks';
+import { isAutoUpdateToOption } from '../../utils';
+import { StyledAutoUpdateToRoot } from './styled';
+export const AutoUpdateTo = props => {
+    const { className, id } = props;
+    const { state, action } = useCalendarSelectionContext();
+    const { rangeInfo } = state.value.current;
+    const value = AUTO_UPDATE_TO_OPTIONS[rangeInfo.type === 'custom' ? rangeInfo.autoUpdateTo : AUTO_UPDATE_TO_KEY.fixed].label;
+    const handleChangeUpdateTo = (value) => {
+        if (!isAutoUpdateToOption(value))
+            return;
+        action.dispatch(updateRangeInfo({
+            type: SELECTION_KEY.custom,
+            autoUpdateTo: value,
+        }));
+    };
+    return (React.createElement(StyledAutoUpdateToRoot, { className: className },
+        React.createElement("div", { className: "label" }, "Auto update to"),
+        React.createElement(Select, { id: id, options: Object.values(AUTO_UPDATE_TO_OPTIONS).map(i => (Object.assign(Object.assign({}, i), { value: i.key }))), value: value, onChange: handleChangeUpdateTo })));
+};

package/es/components/molecules/CalendarSelection/components/AutoUpdateTo/index.d.ts

@@ -0,0 +1 @@
+export * from './AutoUpdateTo';

package/es/components/molecules/CalendarSelection/components/AutoUpdateTo/index.js

@@ -0,0 +1 @@
+export * from './AutoUpdateTo';

package/es/components/molecules/CalendarSelection/components/AutoUpdateTo/styled.d.ts

@@ -0,0 +1 @@
+export declare const StyledAutoUpdateToRoot: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/CalendarSelection/components/AutoUpdateTo/styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+export const StyledAutoUpdateToRoot = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .antsomi-select-selector {
+    min-width: 80px;
+  }
+`;

package/es/components/molecules/CalendarSelection/components/CustomPicker/CustomPicker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CustomPickerProps } from './types';
+export declare const CustomPicker: React.FC<CustomPickerProps>;

package/es/components/molecules/CalendarSelection/components/CustomPicker/CustomPicker.js

@@ -0,0 +1,89 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { TinyColor } from '@ctrl/tinycolor';
+import { RangePicker } from '../RangePicker';
+import { useCalendarSelectionContext } from '../../hooks';
+import dayjs from 'dayjs';
+import isBetween from 'dayjs/plugin/isBetween';
+import { AutoUpdateTo } from '../AutoUpdateTo';
+import { updateRangeValue } from '../../actions';
+import { CalendarContainerStyled, StyledCellDate, StyledCustomPickerRoot } from './styled';
+import { ConfigProvider } from 'antd';
+import { interpolateHsl } from 'd3-interpolate';
+import { isEmpty } from 'lodash';
+dayjs.extend(isBetween);
+const generateRangeInputLabel = (idx, label) => {
+    if (label)
+        return label;
+    if (idx === 0)
+        return 'custom';
+    return `custom compare${idx > 1 ? ` ${idx}}` : ''}`;
+};
+export const CustomPicker = () => {
+    const popupContainer = useRef(null);
+    const { state, action } = useCalendarSelectionContext();
+    const { rangeValue } = state.value.current;
+    const [activeRangeIdx, setActiveRangeIdx] = useState(null);
+    useEffect(() => {
+        if (rangeValue.length > 0) {
+            setActiveRangeIdx(0);
+        }
+    }, [rangeValue.length]);
+    const handleCalendarChange = (start, end) => {
+        var _a, _b;
+        if (!start || !end || activeRangeIdx === null)
+            return;
+        const replacedRange = rangeValue[activeRangeIdx];
+        if (((_a = replacedRange.start) === null || _a === void 0 ? void 0 : _a.isSame(start)) && ((_b = replacedRange.end) === null || _b === void 0 ? void 0 : _b.isSame(end)))
+            return;
+        const updatedRangeValue = [...rangeValue];
+        updatedRangeValue.splice(activeRangeIdx, 1, Object.assign(Object.assign({}, replacedRange), { start,
+            end }));
+        action.dispatch(updateRangeValue(updatedRangeValue, { isManual: true }));
+    };
+    const renderCellDate = useCallback((date, originNode) => {
+        const colors = rangeValue.reduce((acc, cur) => {
+            if (date.isBetween(cur.start, cur.end, 'd', '[]') && cur.color) {
+                acc.push(cur.color);
+            }
+            return acc;
+        }, []);
+        if (isEmpty(colors))
+            return originNode;
+        const cellBgColor = new TinyColor(colors.length > 1
+            ? colors.reduce((acc, color) => interpolateHsl(acc, color)(0.5), colors[0])
+            : colors[0]);
+        return React.createElement(StyledCellDate, { rangeColor: cellBgColor }, originNode);
+    }, [rangeValue]);
+    return (React.createElement(StyledCustomPickerRoot, null,
+        React.createElement("div", { className: "range-inputs" }, rangeValue.map((range, rangeIdx) => (React.createElement(ConfigProvider, { key: rangeIdx, theme: {
+                components: {
+                    DatePicker: Object.assign({ cellHeight: 20 }, (range.color && {
+                        hoverBorderColor: range.color,
+                        colorBorder: range.color,
+                        colorPrimary: range.color,
+                        colorPrimaryActive: range.color,
+                        cellActiveWithRangeBg: new TinyColor(range.color).lighten(40).toHexString(),
+                    })),
+                },
+            } },
+            React.createElement("div", { className: "range-input" },
+                React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
+                React.createElement(RangePicker, { open: true, value: [range.start, range.end], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
+                        if (activeRangeIdx !== rangeIdx)
+                            return null;
+                        return originalPanel;
+                    }, cellRender: (current, info) => {
+                        if (typeof current === 'number' || info.type !== 'date') {
+                            return info.originNode;
+                        }
+                        return renderCellDate(current, info.originNode);
+                    }, onCalendarChange: value => {
+                        var _a, _b;
+                        const start = dayjs((_a = value === null || value === void 0 ? void 0 : value.at(0)) === null || _a === void 0 ? void 0 : _a.toDate());
+                        const end = dayjs((_b = value === null || value === void 0 ? void 0 : value.at(1)) === null || _b === void 0 ? void 0 : _b.toDate());
+                        handleCalendarChange(start, end);
+                    } })))))),
+        React.createElement(AutoUpdateTo, null),
+        React.createElement(CalendarContainerStyled, { className: "calendar-container", ref: popupContainer })));
+};

package/es/components/molecules/CalendarSelection/components/CustomPicker/index.d.ts

@@ -0,0 +1 @@
+export * from './CustomPicker';

package/es/components/molecules/CalendarSelection/components/CustomPicker/index.js

@@ -0,0 +1 @@
+export * from './CustomPicker';

package/es/components/molecules/CalendarSelection/components/CustomPicker/styled.d.ts

@@ -0,0 +1,6 @@
+import { TinyColor } from '@ctrl/tinycolor';
+export declare const StyledCellDate: import("styled-components").StyledComponent<"div", any, {
+    rangeColor: TinyColor;
+}, never>;
+export declare const StyledCustomPickerRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CalendarContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/CalendarSelection/components/CustomPicker/styled.js

@@ -0,0 +1,141 @@
+import styled from 'styled-components';
+export const StyledCellDate = styled.div `
+  --cellTextColor: ${p => (p.rangeColor.isLight() ? '#000' : '#fff')};
+  --cellBgColor: ${p => p.rangeColor.lighten(40).toHexString()};
+  --cellHoverBgColor: ${p => p.rangeColor.lighten(30).toHexString()};
+  --rangeColor: ${p => p.rangeColor.toHexString()};
+
+  position: relative;
+
+  &:before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    content: '';
+  }
+`;
+export const StyledCustomPickerRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 12px;
+
+  .range-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .range-input {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+  }
+
+  .custom-label,
+  .range-inputs .range-input-label {
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #838383;
+  }
+`;
+export const CalendarContainerStyled = styled.div `
+  /* Variables */
+  --cellHeight: 28px;
+  --cellWidth: 28px;
+  --colorToDay: rgb(211, 211, 211);
+  --colorSelected: rgb(0, 94, 184);
+  --colorInRange: rgb(216, 234, 252);
+
+  position: relative;
+
+  .antsomi-picker-dropdown {
+    position: relative;
+    top: 0 !important;
+    left: 0 !important;
+    box-shadow: none;
+    padding: 0;
+
+    .antsomi-picker-panel-container {
+      box-shadow: none;
+    }
+    .antsomi-picker-panels {
+      display: inline-flex;
+      flex-direction: column;
+    }
+
+    /* Content */
+    .antsomi-picker-content {
+      /* Rectangle */
+      & td,
+      & th,
+      & .antsomi-picker-cell-inner,
+      & td::before {
+        /* width: var(--cellWidth);
+        height: var(--cellHeight); */
+      }
+
+      /* Date node */
+      .antsomi-picker-cell-inner {
+        height: 21.5px;
+      }
+
+      /* Today node */
+      .antsomi-picker-cell-today {
+        .antsomi-picker-cell-inner {
+          &::before {
+            border-radius: 18px;
+            border: 0.0001rem solid var(--colorToDay);
+          }
+        }
+      }
+
+      /* Selected node */
+      .antsomi-picker-cell-in-view {
+        &.antsomi-picker-cell-selected,
+        &.antsomi-picker-cell-range-start,
+        &.antsomi-picker-cell-range-end {
+          .antsomi-picker-cell-inner {
+            background: var(--colorSelected) !important;
+            border-radius: 18px !important;
+          }
+        }
+      }
+
+      /* In Range */
+      .antsomi-picker-cell-in-range.antsomi-picker-cell-in-view {
+        &::before {
+          background: var(--colorInRange) !important;
+        }
+        .antsomi-picker-cell-inner {
+          background: var(--colorInRange) !important;
+          &::after {
+            content: none;
+            background: var(--colorInRange) !important;
+          }
+        }
+      }
+
+      /* In Range Start End */
+      .antsomi-picker-cell-in-view.antsomi-picker-cell-range-start:not(
+          .antsomi-picker-cell-range-start-single
+        ) {
+        &::before {
+          background: var(--colorInRange) !important;
+        }
+      }
+      .antsomi-picker-cell-in-view.antsomi-picker-cell-range-end:not(
+          .antsomi-picker-cell-range-end-single
+        ) {
+        &::before {
+          background: var(--colorInRange) !important;
+        }
+      }
+    }
+    .antsomi-picker-range-arrow {
+      display: none !important;
+    }
+  }
+`;

package/es/components/molecules/CalendarSelection/components/CustomPicker/types.d.ts

@@ -0,0 +1 @@
+export type CustomPickerProps = {};

package/es/components/molecules/CalendarSelection/components/Footer/Footer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Footer: () => React.JSX.Element;

package/es/components/molecules/CalendarSelection/components/Footer/Footer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button } from '@antscorp/antsomi-ui/es/components/atoms/Button';
+import { useCalendarSelectionContext } from '../../hooks';
+import { apply, togglePopover } from '../../actions';
+import { StyledFooterRoot } from './styled';
+export const Footer = () => {
+    const { action } = useCalendarSelectionContext();
+    return (React.createElement(StyledFooterRoot, null,
+        React.createElement(Button, { onClick: () => action.dispatch(apply()), type: "primary" }, "Apply"),
+        React.createElement(Button, { onClick: () => action.dispatch(togglePopover()) }, "Cancel")));
+};

package/es/components/molecules/CalendarSelection/components/Footer/index.d.ts

@@ -0,0 +1 @@
+export * from './Footer';

package/es/components/molecules/CalendarSelection/components/Footer/index.js

@@ -0,0 +1 @@
+export * from './Footer';

package/es/components/molecules/CalendarSelection/components/Footer/styled.d.ts

@@ -0,0 +1 @@
+export declare const StyledFooterRoot: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/CalendarSelection/components/Footer/styled.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+export const StyledFooterRoot = styled.div `
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+`;

package/es/components/molecules/CalendarSelection/components/RangePicker/RangePicker.d.ts

@@ -0,0 +1,5 @@
+import { DatePicker } from 'src/components/molecules';
+import React, { ComponentProps } from 'react';
+type RangePickerProps = {} & ComponentProps<typeof DatePicker.RangePicker>;
+export declare const RangePicker: React.FC<RangePickerProps>;
+export {};

package/es/components/molecules/CalendarSelection/components/RangePicker/RangePicker.js

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StyledRangePicker } from './styled';
+const DATE_FORMAT = 'DD/MM/YYYY';
+export const RangePicker = props => (React.createElement(StyledRangePicker, Object.assign({}, props, { allowEmpty: [true, true], allowClear: false, autoFocus: false, size: "large", suffixIcon: false, format: DATE_FORMAT })));

package/es/components/molecules/CalendarSelection/components/RangePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './RangePicker';

package/es/components/molecules/CalendarSelection/components/RangePicker/index.js

@@ -0,0 +1 @@
+export * from './RangePicker';

package/es/components/molecules/CalendarSelection/components/RangePicker/styled.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledRangePicker: import("styled-components").StyledComponent<import("antd/es/date-picker/generatePicker/interface").PickerComponentClass<import("antd/es/date-picker/generatePicker").RangePickerProps<import("dayjs").Dayjs> & {
+    dropdownClassName?: string | undefined;
+    popupClassName?: string | undefined;
+    rootClassName?: string | undefined;
+}, unknown>, any, {}, never>;

package/es/components/molecules/CalendarSelection/components/RangePicker/styled.js

@@ -0,0 +1,13 @@
+import { DatePicker } from '@antscorp/antsomi-ui/es/components/molecules';
+import styled from 'styled-components';
+const { RangePicker } = DatePicker;
+export const StyledRangePicker = styled(RangePicker) `
+  font-size: 12px;
+  padding-right: 8px;
+
+  .ant-picker-input {
+    input {
+      width: 80px;
+    }
+  }
+`;

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/RangeSelectOptions.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ListRangeSelectionProps } from './types';
+export declare const RangeSelectOptions: React.FC<ListRangeSelectionProps>;

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/RangeSelectOptions.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { RANGE_SELECTION_OPTIONS, RANGE_TIME, SELECTION_KEY } from '../../constants';
+import { Divider } from '@antscorp/antsomi-ui/es/components/atoms';
+import { List } from 'antd';
+import { NumOfDaysRanges, Option } from './components';
+import { RangeSelectOptionsRoot } from './styled';
+const customOption = RANGE_SELECTION_OPTIONS[SELECTION_KEY.custom];
+const baseOptions = RANGE_TIME.map(key => {
+    var _a;
+    const option = RANGE_SELECTION_OPTIONS[key];
+    return {
+        key,
+        type: key,
+        label: option.label.trim(),
+        options: ((_a = option.options) === null || _a === void 0 ? void 0 : _a.map(i => (Object.assign(Object.assign({}, i), { type: i.key })))) || [],
+    };
+});
+export const RangeSelectOptions = () => (React.createElement(RangeSelectOptionsRoot, null,
+    React.createElement(List, { dataSource: [customOption], renderItem: item => React.createElement(Option, { type: item.key, label: item.label }) }),
+    React.createElement(Divider, { style: { marginTop: 4, marginBottom: 4 } }),
+    React.createElement(List, { dataSource: baseOptions, renderItem: item => React.createElement(Option, { type: item.key, label: item.label, options: item.options }) }),
+    React.createElement(Divider, { style: { marginTop: 4, marginBottom: 4 } }),
+    React.createElement(NumOfDaysRanges, null)));

package/es/components/molecules/CalendarSelection/components/RangeSelectOptions/components/NumOfDaysRanges/NumOfDaysRanges.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NumOfDaysRanges: () => React.JSX.Element;