@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

package/es/components/organism/DataTable/constants/theme.d.ts

@@ -0,0 +1,2 @@
+import { DataTableThemeConfig } from '../types';
+export declare const DATA_TABLE_THEME: DataTableThemeConfig;

package/es/components/organism/DataTable/constants/theme.js

@@ -0,0 +1,28 @@
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const DATA_TABLE_THEME = {
+    token: {
+        toolbarHeight: 54,
+        toolbarPadding: '0 15px',
+    },
+    components: {
+        Table: {
+            headerBg: '#F9F9F9',
+            fontWeightStrong: 700,
+            cellPaddingBlock: 10,
+            borderColor: '#E5E5E5',
+            rowHoverBg: '#DEEFFE',
+            borderRadius: 0,
+            headerBorderRadius: 0,
+        },
+        Menu: {
+            itemBorderRadius: 0,
+            itemHeight: 30,
+            lineHeight: 30,
+            padding: 10,
+            itemSelectedColor: '#000000',
+            itemSelectedBg: '#DEEFFE',
+            itemMarginBlock: 6,
+            subMenuItemBg: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw0,
+        },
+    },
+};

package/es/components/organism/DataTable/constants/toolbar.d.ts

@@ -0,0 +1,14 @@
+import { TToolbarActionOptions } from '../types';
+export declare const TOOLBAR_ACTION_KEYS: {
+    readonly SEARCH: "SEARCH";
+    readonly COLUMN: "COLUMN";
+    readonly EXPLORE: "EXPLORE";
+    readonly EXPORT: "EXPORT";
+    readonly CALENDAR: "CALENDAR";
+    readonly TABLE: "TABLE";
+    readonly COMPARE: "COMPARE";
+    readonly NODE_VIEW: "NODE_VIEW";
+    readonly GRID_VIEW: "GRID_VIEW";
+    readonly MORE: "MORE";
+};
+export declare const TOOLBAR_ACTION_OPTIONS: TToolbarActionOptions;

package/es/components/organism/DataTable/constants/toolbar.js

@@ -0,0 +1,52 @@
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+export const TOOLBAR_ACTION_KEYS = {
+    SEARCH: 'SEARCH',
+    COLUMN: 'COLUMN',
+    EXPLORE: 'EXPLORE',
+    EXPORT: 'EXPORT',
+    CALENDAR: 'CALENDAR',
+    TABLE: 'TABLE',
+    COMPARE: 'COMPARE',
+    NODE_VIEW: 'NODE_VIEW',
+    GRID_VIEW: 'GRID_VIEW',
+    MORE: 'MORE',
+};
+const { SEARCH, COLUMN, EXPLORE, EXPORT, CALENDAR, TABLE, COMPARE } = TOOLBAR_ACTION_KEYS;
+export const TOOLBAR_ACTION_OPTIONS = {
+    [SEARCH]: {
+        key: SEARCH,
+        label: i18nInstance.t(translations.dataTableToolbar.toolbarActions.search).toString(),
+        icon: 'icon-ants-search-2',
+    },
+    [COLUMN]: {
+        key: COLUMN,
+        label: 'Column',
+        icon: 'icon-ants-column-2',
+    },
+    [EXPLORE]: {
+        key: EXPLORE,
+        label: 'Explore',
+        icon: 'icon-ants-explore',
+    },
+    [EXPORT]: {
+        key: EXPORT,
+        label: 'Export',
+        icon: 'file-download',
+    },
+    [CALENDAR]: {
+        key: CALENDAR,
+        label: 'Calendar',
+        icon: 'file-download',
+    },
+    [TABLE]: {
+        key: TABLE,
+        label: 'Table',
+        icon: 'file-download',
+    },
+    [COMPARE]: {
+        key: COMPARE,
+        label: 'Compare',
+        icon: 'file-download',
+    },
+};

package/es/components/organism/DataTable/contexts/DataTableContext.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StoreApi } from 'zustand';
+import { DataTableStore } from '../types';
+export declare const DataTableContext: import("react").Context<StoreApi<DataTableStore<any>> | null>;
+export declare function useDataTableContext<T>(selector: (dataTableStore: DataTableStore) => T): T;

package/es/components/organism/DataTable/contexts/DataTableContext.js

@@ -0,0 +1,15 @@
+// Libraries
+import { createContext, useContext } from 'react';
+import { useStore } from 'zustand';
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import isEqual from 'react-fast-compare';
+export const DataTableContext = createContext(null);
+export function useDataTableContext(selector) {
+    const store = useContext(DataTableContext);
+    if (!store)
+        throw new Error('Missing DataTableContext.Provider in the tree');
+    const selectedState = useStore(store, selector);
+    const memoizedState = useDeepCompareMemo(() => selectedState, [selectedState]);
+    console.log('🚀 ~ state:', selectedState);
+    return useDeepCompareMemo(() => (isEqual(selectedState, memoizedState) ? memoizedState : selectedState), [selectedState, memoizedState]);
+}

package/es/components/organism/DataTable/contexts/index.js

@@ -0,0 +1 @@
+"use strict";

package/es/components/organism/DataTable/hooks/index.d.ts

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

package/es/components/organism/DataTable/hooks/index.js

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

package/es/components/organism/DataTable/hooks/useDataTable.d.ts

@@ -0,0 +1,5 @@
+import { DataTableProps } from '../types';
+export declare const useDataTable: <TTableDataType>(props: DataTableProps<TTableDataType>) => {
+    pagination: import("../types").PaginationProps;
+    setPagination: (pagination: Partial<import("../types").PaginationProps>) => void;
+};

package/es/components/organism/DataTable/hooks/useDataTable.js

@@ -0,0 +1,40 @@
+// Libraries
+import { useShallow } from 'zustand/react/shallow';
+// Context
+import { useDataTableContext } from '../contexts/DataTableContext';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+export const useDataTable = (props) => {
+    // Props
+    const { table, toolbar, filter } = props || {};
+    // Store
+    const pagination = useDataTableContext(useShallow(store => store.pagination));
+    const setTable = useDataTableContext(store => store.setTable);
+    const setPagination = useDataTableContext(store => store.setPagination);
+    const setToolbar = useDataTableContext(store => store.setToolbar);
+    const setFilter = useDataTableContext(store => store.setFilter);
+    // Effects
+    /* Handle update table */
+    useDeepCompareEffect(() => {
+        if (table) {
+            setTable(table);
+        }
+    }, [setTable, table]);
+    /* Handle update toolbar */
+    useDeepCompareEffect(() => {
+        if (toolbar) {
+            setToolbar({
+                collapse: toolbar.collapse,
+            });
+        }
+    }, [setToolbar, toolbar === null || toolbar === void 0 ? void 0 : toolbar.collapse]);
+    /* Handle update filter */
+    useDeepCompareEffect(() => {
+        if (filter) {
+            setFilter(filter);
+        }
+    }, [setFilter, filter]);
+    return {
+        pagination,
+        setPagination,
+    };
+};

package/es/components/organism/DataTable/index.d.ts

@@ -0,0 +1,3 @@
+export { DataTable } from './DataTable';
+export type { DataTableProps, TableProps as DataTableTable, SavedFilter, SavedFilterItem, FilterMetic, } from './types';
+export { CDP_DATA_TABLE_SAMPLE, FILTER_METRICS } from './constants';

package/es/components/organism/DataTable/index.js

@@ -0,0 +1,3 @@
+export { DataTable } from './DataTable';
+// Constants
+export { CDP_DATA_TABLE_SAMPLE, FILTER_METRICS } from './constants';

package/es/components/organism/DataTable/providers/AntdTableConfigProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ConfigProviderProps } from 'antd';
+interface AntdConfigProviderV2Props extends ConfigProviderProps {
+}
+export declare const AntdTableConfigProvider: React.FC<AntdConfigProviderV2Props>;
+export declare const dataTableGlobalToken: (Partial<import("antd/es/theme/internal").AliasToken> & Partial<import("@antscorp/antsomi-ui/es/components/organism/DataTable/types/theme").TDataTableToken>) | undefined;
+export {};

package/es/components/organism/DataTable/providers/AntdTableConfigProvider.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React from 'react';
+import { ConfigProvider, theme } from 'antd';
+import { DATA_TABLE_THEME } from '../constants';
+const { getDesignToken } = theme;
+export const AntdTableConfigProvider = props => {
+    const { children } = props, restProps = __rest(props, ["children"]);
+    return (React.createElement(ConfigProvider, Object.assign({ theme: DATA_TABLE_THEME }, restProps), children));
+};
+export const dataTableGlobalToken = getDesignToken(DATA_TABLE_THEME);

package/es/components/organism/DataTable/providers/DataTableProvider.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { StoreApi } from 'zustand';
+import { DataTableStore } from '../types';
+interface DataTableProviderProps {
+    store: StoreApi<DataTableStore>;
+}
+export declare const DataTableProvider: React.FC<React.PropsWithChildren<DataTableProviderProps>>;
+export {};

package/es/components/organism/DataTable/providers/DataTableProvider.js

@@ -0,0 +1,8 @@
+// Libraries
+import React from 'react';
+// Contexts
+import { DataTableContext } from '../contexts/DataTableContext';
+export const DataTableProvider = props => {
+    const { children, store } = props;
+    return React.createElement(DataTableContext.Provider, { value: store }, children);
+};

package/es/components/organism/DataTable/providers/index.d.ts

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

package/es/components/organism/DataTable/providers/index.js

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

package/es/components/organism/DataTable/stores/index.d.ts

@@ -0,0 +1,2 @@
+import { DataTableState, DataTableStore } from '../types';
+export declare const createDataTableStore: (initProps?: Partial<DataTableState<any>>) => import("zustand").StoreApi<DataTableStore<any>>;

package/es/components/organism/DataTable/stores/index.js

@@ -0,0 +1,10 @@
+// Libraries
+import { createStore } from 'zustand';
+import { cloneDeep, merge } from 'lodash';
+// Constants
+import { dataTableInitialState } from '../constants';
+export const createDataTableStore = (initProps) => createStore()(set => (Object.assign(Object.assign(Object.assign({}, dataTableInitialState), initProps), { 
+    /* Actions */
+    setState: newState => set(store => merge(cloneDeep(store), cloneDeep(newState))), setFilter: filter => set(store => (Object.assign(Object.assign({}, store), { filter: merge(cloneDeep(store.filter), cloneDeep(filter)) }))), setModifyColumn: modifyColumn => set(store => (Object.assign(Object.assign({}, store), { modifyColumn: merge(cloneDeep(store.modifyColumn), cloneDeep(modifyColumn)) }))), setTable: table => set(store => (Object.assign(Object.assign({}, store), { table: merge(cloneDeep(store.table), cloneDeep(table)) }))), setToolbar: toolbar => set(store => (Object.assign(Object.assign({}, store), { toolbar: merge(cloneDeep(store.toolbar), cloneDeep(toolbar)) }))), setPagination: pagination => {
+        set(store => (Object.assign(Object.assign({}, store), { pagination: merge(cloneDeep(store.pagination), cloneDeep(pagination)) })));
+    } })));

package/es/components/organism/DataTable/styled/index.d.ts

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

package/es/components/organism/DataTable/styled/index.js

@@ -0,0 +1,32 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const DataTableWrapper = styled.div `
+  position: relative;
+  width: 100%;
+
+  #data-table-pagination {
+    margin-top: 5px;
+    justify-content: flex-end;
+  }
+`;
+export const IconButton = styled.div `
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 200ms;
+
+  i {
+    font-size: 14px;
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  }
+
+  &:hover {
+    i {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw10};
+    }
+  }
+`;

package/es/components/organism/DataTable/types/filter.d.ts

@@ -0,0 +1,22 @@
+export interface SavedFilterItem {
+    id: string;
+    name: string;
+    removable?: boolean;
+}
+export interface FilterMetic {
+    id: string | number;
+    name: string;
+    dataType?: string;
+    children?: FilterMetic[];
+}
+export interface SavedFilter {
+    list?: SavedFilterItem[];
+    selected?: string | number;
+    onClickRemove?: (savedFilter: SavedFilterItem) => void;
+    onSelect?: (savedFilter: SavedFilterItem) => void;
+}
+export interface FilterProps {
+    isFilterActive?: boolean;
+    savedFilter?: SavedFilter;
+    filterMetrics?: FilterMetic[];
+}

package/es/components/organism/DataTable/types/filter.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/DataTable/types/index.d.ts

@@ -0,0 +1,38 @@
+import { TableProps as AntdTableProps } from 'antd';
+import { ToolbarProps } from './toolbar';
+import { FilterProps } from './filter';
+export interface TableProps<T> extends AntdTableProps<T> {
+}
+export interface ModifyColumnProps {
+}
+export interface PaginationProps {
+    page: number;
+    pageSize: number;
+}
+export interface DataTableProps<TTableDataType = any> extends Partial<DataTableState<TTableDataType>> {
+}
+export interface DataTableState<TTableDataType> {
+    name: string;
+    modifyColumn: ModifyColumnProps;
+    filter: FilterProps;
+    toolbar: ToolbarProps;
+    table: TableProps<TTableDataType>;
+    pagination: PaginationProps;
+}
+export interface DataTableStore<TTableDataType = any> {
+    name: string;
+    modifyColumn: ModifyColumnProps;
+    filter: FilterProps;
+    toolbar: ToolbarProps;
+    table: TableProps<TTableDataType>;
+    pagination: PaginationProps;
+    setState: (newState: Partial<DataTableState<TTableDataType>>) => void;
+    setModifyColumn: (modifyColumn: RecursivePartial<ModifyColumnProps>) => void;
+    setFilter: (filter: RecursivePartial<FilterProps>) => void;
+    setPagination: (pagination: Partial<PaginationProps>) => void;
+    setToolbar: (toolbar: Partial<ToolbarProps>) => void;
+    setTable: (table: Partial<TableProps<TTableDataType>>) => void;
+}
+export * from './theme';
+export * from './toolbar';
+export * from './filter';

package/es/components/organism/DataTable/types/index.js

@@ -0,0 +1,3 @@
+export * from './theme';
+export * from './toolbar';
+export * from './filter';

package/es/components/organism/DataTable/types/theme.d.ts

@@ -0,0 +1,9 @@
+import { ThemeConfig } from 'antd';
+import { AliasToken } from 'antd/es/theme/internal';
+export type TDataTableToken = {
+    toolbarHeight: number;
+    toolbarPadding: string;
+};
+export interface DataTableThemeConfig extends Omit<ThemeConfig, 'token'> {
+    token?: Partial<AliasToken> & Partial<TDataTableToken>;
+}

package/es/components/organism/DataTable/types/theme.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/DataTable/types/toolbar.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from 'antd';
+import { AddButtonProps } from '../components/AddButton';
+import { TOOLBAR_ACTION_KEYS } from '../constants';
+export type TActionButtonKey<T extends string[] = []> = (typeof TOOLBAR_ACTION_KEYS)[keyof typeof TOOLBAR_ACTION_KEYS] | T[number];
+export type TActionButton = {
+    buttonProps?: ButtonProps;
+    key?: string;
+    label?: string;
+    icon?: string;
+    customRender?: (node: ReactNode) => ReactNode;
+};
+export type TToolbarActionOptions = Record<string, {
+    key: string;
+    label: string;
+    icon?: string;
+}>;
+export type TCollapse = {
+    collapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+};
+export interface ToolbarProps<TActionKey extends string[] = []> {
+    addButton?: AddButtonProps | ((node: ReactNode) => ReactNode);
+    actionButtons?: Partial<Record<TActionButtonKey<TActionKey>, TActionButton>>;
+    collapse?: TCollapse;
+}

package/es/components/organism/DataTable/types/toolbar.js

@@ -0,0 +1 @@
+export {};

package/es/components/organism/DataTable/utils/filter.d.ts

@@ -0,0 +1,5 @@
+import { MenuProps } from 'antd';
+import { FilterMetic } from '../types';
+type MenuItem = Required<MenuProps>['items'][number];
+export declare const serializeFilterMetricsToMenuItems: (filterMetrics: FilterMetic[]) => MenuItem[];
+export {};

package/es/components/organism/DataTable/utils/filter.js

@@ -0,0 +1,12 @@
+import { isEmpty } from 'lodash';
+/* Filter */
+export const serializeFilterMetricsToMenuItems = (filterMetrics) => filterMetrics.map(metric => {
+    const menuItem = {
+        key: metric.id,
+        label: metric.name,
+    };
+    return Object.assign(Object.assign({}, menuItem), (!!metric.children &&
+        !isEmpty(metric.children) && {
+        children: serializeFilterMetricsToMenuItems(metric.children),
+    }));
+});

package/es/components/organism/DataTable/utils/index.d.ts

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

package/es/components/organism/DataTable/utils/index.js

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

package/es/components/organism/FilterSetting/components/common/InputArray/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface InputArrayProps {
+    value: string[];
+    onChange: (v: InputArrayProps['value']) => void;
+    required?: boolean;
+    focused?: boolean;
+}
+export declare const InputArray: React.FC<InputArrayProps>;
+export {};

package/es/components/organism/FilterSetting/components/common/InputArray/index.js

@@ -0,0 +1,32 @@
+// Libraries
+import React from 'react';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Atoms
+import { StyledTag as Tag } from '@antscorp/antsomi-ui/es/components/molecules/SelectV2/styled';
+import { StyledSelect } from './styled';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+export const InputArray = props => {
+    const { value, onChange, required, focused } = props;
+    // Translations
+    const { t } = i18nInstance;
+    const onRemove = (v) => {
+        const index = value.findIndex(item => item === v);
+        if (index > -1) {
+            const newValue = [...value];
+            newValue.splice(index, 1);
+            onChange(newValue);
+        }
+    };
+    // Them dieu kien nhap phim sau (string, number, datetime)
+    const onInputKeyDown = (e) => {
+        if (e.code === 'Enter' || e.key === 'Enter') {
+            // remove duplicate values
+            const newValue = [...new Set([...value, e.target.value])];
+            return onChange(newValue);
+        }
+    };
+    return (React.createElement(StyledSelect, { mode: "tags", required: required, focused: focused, placeholder: t(translations.pleaseInputValue.title).toString(), onInputKeyDown: onInputKeyDown, onDeselect: onRemove, value: value, tagRender: v => React.createElement(Tag, Object.assign({}, v), v.label), dropdownStyle: {
+            display: 'none',
+        } }));
+};

package/es/components/organism/FilterSetting/components/common/InputArray/styled.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const StyledSelect: import("styled-components").StyledComponent<{
+    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): import("react").JSX.Element;
+    defaultProps: {
+        suffixIcon: import("react").JSX.Element;
+        filterOption: (input: any, option: any) => boolean;
+        tagRender: (props: any) => import("react").JSX.Element;
+        containerStyle: {};
+        labelStyle: {};
+        clearIcon: import("react").JSX.Element;
+    };
+}, any, {}, never>;

package/es/components/organism/FilterSetting/components/common/InputArray/styled.js

@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { SelectV2 as Select } from '@antscorp/antsomi-ui/es/components/molecules';
+export const StyledSelect = styled(Select) `
+  width: 100%;
+  overflow: auto;
+  padding-bottom: 2px;
+  transform: translateY(2px);
+`;

package/es/components/organism/FilterSetting/components/common/InputBoolean/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SelectProps } from '@antscorp/antsomi-ui/es/components/molecules/Select';
+interface InputBooleanProps extends SelectProps {
+    value: string;
+    onChange: (v: InputBooleanProps['value']) => void;
+}
+export declare const InputBoolean: React.FC<InputBooleanProps>;
+export {};

package/es/components/organism/FilterSetting/components/common/InputBoolean/index.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { Select } from '@antscorp/antsomi-ui/es/components/molecules';
+export const InputBoolean = props => {
+    const { value, options, onChange } = props, restOf = __rest(props, ["value", "options", "onChange"]);
+    return (React.createElement(Select, Object.assign({ value: value, options: [
+            { value: 'true', label: 'True' },
+            { value: 'false', label: 'False' },
+        ], onChange: val => onChange(val) }, restOf)));
+};

package/es/components/organism/FilterSetting/components/common/InputCalendar/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TOperatorValue } from '@antscorp/antsomi-ui/es/components/atoms/InputDynamic/types';
+interface InputCalendarProps {
+    value: string | number | null;
+    required?: boolean;
+    focused?: boolean;
+    operator?: TOperatorValue;
+    onChange: (v: InputCalendarProps['value']) => void;
+}
+export declare const InputCalendar: React.FC<InputCalendarProps>;
+export {};

package/es/components/organism/FilterSetting/components/common/InputCalendar/index.js

@@ -0,0 +1,44 @@
+// Libraries
+import React, { useContext, useMemo } from 'react';
+import moment from 'moment';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Molecules
+import { DatePickerV2 } from '@antscorp/antsomi-ui/es/components/molecules';
+// Constants
+import { dateFormatAPI, dateFormatFE, defaultDateFormatAPI, endDateFormat, OPERATORS_OPTION, } from '../../../constants';
+// Utils
+import { getValidMomentDate } from '../../../utils';
+// Locales
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Context
+import { FilterContext } from '../../../context';
+export const InputCalendar = props => {
+    const { value, operator, required, focused, onChange } = props;
+    const { t } = i18nInstance;
+    // Context
+    const { isFormatDateTimeMilliseconds } = useContext(FilterContext);
+    // Memo
+    const isAfterDate = useMemo(() => operator === OPERATORS_OPTION.AFTER_DATE.value, [operator]);
+    const onChangeValue = (_, dateString) => {
+        const momentDate = getValidMomentDate(moment(dateString));
+        let newValue = null;
+        switch (isFormatDateTimeMilliseconds) {
+            case true:
+                newValue =
+                    (isAfterDate
+                        ? momentDate === null || momentDate === void 0 ? void 0 : momentDate.endOf('day').valueOf()
+                        : momentDate === null || momentDate === void 0 ? void 0 : momentDate.startOf('day').valueOf()) || null;
+                break;
+            default:
+                newValue = (momentDate === null || momentDate === void 0 ? void 0 : momentDate.format(isAfterDate ? endDateFormat : defaultDateFormatAPI)) || null;
+                break;
+        }
+        onChange(newValue);
+    };
+    return (React.createElement(DatePickerV2, { focused: focused, required: required, format: dateFormatFE, placeholder: t(translations.selectDate.title).toString(), value: getValidMomentDate(moment(value, !isFormatDateTimeMilliseconds ? dateFormatAPI : '')), onChange: onChangeValue, popupStyle: { zIndex: 9999 }, style: {
+            width: '100%',
+            borderTopWidth: '0px',
+            borderLeftWidth: '0px',
+            borderRightWidth: '0px',
+        } }));
+};

package/es/components/organism/FilterSetting/components/common/InputCalendarBetween/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface InputCalendarBetweenProps {
+    value: string;
+    required?: boolean;
+    focused?: boolean;
+    onChange: (v: InputCalendarBetweenProps['value']) => void;
+}
+export declare const InputCalendarBetween: React.FC<InputCalendarBetweenProps>;
+export {};