@antscorp/antsomi-ui 1.3.5-beta.62 → 1.3.5-beta.621

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

@@ -0,0 +1,244 @@
+// Libraries
+import React from 'react';
+import { isEmpty } from 'lodash';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import dayjs from 'dayjs';
+// Components
+import { Popover, Typography, Icon, FormatInputNumber, Flex, Input } from '../../../atoms';
+import { DATE_TIME_FORMAT, DATE_TIME_FORMAT_DISPLAY, METRIC_TYPE, } from '@antscorp/antsomi-ui/es/constants';
+import { Menu } from '../..';
+import { DatePicker, MatchesAnySelect } from '../../../molecules';
+// Styled
+import { FilterMetricLabel } from '../styled';
+import { OPERATORS_CODE } from '@antscorp/antsomi-ui/es/constants/condition';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+import { EXCEPTION_OFF_FILTER_CLASS, METRIC_MAP_NUMBER_TYPE, METRIC_MAP_STRING_TYPE, } from '../constants/filter';
+const { MATCHES, MATCHES_ANY, NOT_MATCHES, ON, BEFORE, BEFORE_DATE, AFTER, AFTER_DATE } = OPERATORS_CODE;
+const { t } = i18nInstance;
+const { Text } = Typography;
+/* Filter */
+export const serializeFilterMetricsToMenuItems = ({ filterMetrics = [], level = 0, onSelectFilterMetric, onClickFilterMetric, }) => {
+    const isShowPopover = level >= 1;
+    return filterMetrics.map(metric => {
+        const isHasChild = Array.isArray(metric.children) && metric.children.length;
+        /* Format label of filter metric */
+        const label = (React.createElement(FilterMetricLabel, { align: "center", justify: "space-between" },
+            React.createElement(Typography.Text, { className: "ants-w-full", ellipsis: { tooltip: true } }, metric.name),
+            isHasChild && isShowPopover ? React.createElement(Icon, { type: "icon-ants-expand-more", size: 20 }) : null));
+        const menuItem = {
+            key: metric.id,
+            label: !isEmpty(metric.children) && isShowPopover ? (React.createElement(Popover, { content: React.createElement(Menu, { items: serializeFilterMetricsToMenuItems({
+                        filterMetrics: metric.children || [],
+                        level: level + 1,
+                        onSelectFilterMetric,
+                        onClickFilterMetric,
+                    }), mode: "inline", inlineIndent: 5 }), placement: "rightTop", arrow: false, align: { offset: [10, -10] }, overlayInnerStyle: { width: 250, padding: 0 } }, label)) : (label),
+        };
+        return Object.assign(Object.assign(Object.assign({}, menuItem), (!!metric.children &&
+            !isEmpty(metric.children) &&
+            !level && {
+            children: serializeFilterMetricsToMenuItems({
+                filterMetrics: metric.children || [],
+                level: level + 1,
+                onSelectFilterMetric,
+                onClickFilterMetric,
+            }),
+        })), { onClick: () => onClickFilterMetric && !isHasChild && onClickFilterMetric(metric) });
+    });
+};
+/**
+ * Flattens an array of filter metrics, including their nested children, into a single-level array.
+ *
+ * @param {FilterMetric[]} filterMetrics - The array of filter metrics to flatten. Each filter metric can contain
+ *                                         nested children which will also be included in the flattened result.
+ * @returns {FilterMetric[]} A single-level array of filter metrics, including all nested children.
+ *
+ * @example
+ * // Given the following input:
+ * const filterMetrics = [
+ *   {
+ *     id: 1,
+ *     name: 'Metric 1',
+ *     children: [
+ *       {
+ *         id: 2,
+ *         name: 'Metric 1.1',
+ *         children: []
+ *       },
+ *       {
+ *         id: 3,
+ *         name: 'Metric 1.2',
+ *         children: [
+ *           {
+ *             id: 4,
+ *             name: 'Metric 1.2.1',
+ *             children: []
+ *           }
+ *         ]
+ *       }
+ *     ]
+ *   },
+ *   {
+ *     id: 5,
+ *     name: 'Metric 2',
+ *     children: []
+ *   }
+ * ];
+ *
+ * // The output will be:
+ * const result = flatFilterMetrics(filterMetrics);
+ * // result will be:
+ * // [
+ * //   { id: 2, name: 'Metric 1.1', children: [] },
+ * //   { id: 4, name: 'Metric 1.2.1', children: [] },
+ * //   { id: 3, name: 'Metric 1.2', children: [...] },
+ * //   { id: 1, name: 'Metric 1', children: [...] },
+ * //   { id: 5, name: 'Metric 2', children: [] }
+ * // ]
+ */
+export const flatFilterMetrics = (filterMetrics) => filterMetrics.reduce((acc, cur) => {
+    if (Array.isArray(cur.children) && cur.children.length) {
+        return [...acc, ...flatFilterMetrics(cur.children), cur];
+    }
+    return [...acc, cur];
+}, []);
+/* Render Value Field */
+export const renderValueField = ({ filterMetric, operator, value, matchesAny, onLoadMore = () => { }, onChangeValue = () => { }, }) => {
+    const { dataType, name } = filterMetric;
+    switch (operator) {
+        case OPERATORS_CODE.GREATER_THAN:
+        case OPERATORS_CODE.GREATER_THAN_EQUAL:
+        case OPERATORS_CODE.LESS_THAN:
+        case OPERATORS_CODE.LESS_THAN_EQUAL: {
+            return (React.createElement(FormatInputNumber, { value: value, placeholder: `${t(translations.format)}: 1,234.560`, onChange: onChangeValue, style: { width: '100%' } }));
+        }
+        case OPERATORS_CODE.BETWEEN: {
+            const renderBetweenValue = () => {
+                const [firstValue, secondValue] = typeof value === 'string' ? value === null || value === void 0 ? void 0 : value.split(' AND ') : [];
+                switch (dataType) {
+                    case METRIC_TYPE.DATE:
+                    case METRIC_TYPE.DATE_TIME: {
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement(DatePicker, { placeholder: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, format: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, allowClear: false, popupClassName: EXCEPTION_OFF_FILTER_CLASS, value: dayjs(firstValue).isValid() ? dayjs(firstValue) : undefined, onChange: value => onChangeValue(`${value || ''} AND ${secondValue || ''}`) }),
+                            React.createElement(Text, { style: { flexShrink: 0, textTransform: 'lowercase' } }, t(translations.and.title).toString()),
+                            React.createElement(DatePicker, { placeholder: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, format: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, allowClear: false, popupClassName: EXCEPTION_OFF_FILTER_CLASS, value: dayjs(secondValue).isValid() ? dayjs(secondValue) : undefined, onChange: value => onChangeValue(`${value || ''} AND ${secondValue || ''}`) })));
+                    }
+                    default: {
+                        return (React.createElement(React.Fragment, null,
+                            React.createElement(FormatInputNumber, { value: firstValue || undefined, max: secondValue, style: { width: '100%' }, onChange: value => onChangeValue(`${value || ''} AND ${secondValue || ''}`) }),
+                            React.createElement(Text, { style: { flexShrink: 0, textTransform: 'lowercase' } }, t(translations.and.title).toString()),
+                            React.createElement(FormatInputNumber, { value: secondValue || undefined, min: firstValue, style: { width: '100%' }, onChange: value => onChangeValue(`${firstValue || ''} AND ${value || ''}`) })));
+                    }
+                }
+            };
+            return (React.createElement(Flex, { vertical: true, gap: 20 }, renderBetweenValue()));
+        }
+        case OPERATORS_CODE.EQUALS:
+        case OPERATORS_CODE.IS:
+        case OPERATORS_CODE.NOT_EQUALS: {
+            switch (dataType) {
+                // Return InputNumber Field
+                case METRIC_TYPE.NUMBER:
+                    return (React.createElement(FormatInputNumber, { value: value, style: { width: '100%' }, onChange: value => onChangeValue(value) }));
+                // Return Input Field
+                default:
+                    return (React.createElement(Input, { placeholder: t(translations.inputYourValue.title), onChange: e => onChangeValue(e.target.value) }));
+            }
+        }
+        case OPERATORS_CODE.CONTAINS:
+        case OPERATORS_CODE.CONTAIN:
+        case OPERATORS_CODE.DOES_NOT_CONTAIN:
+        case OPERATORS_CODE.DOESNT_CONTAIN:
+        case OPERATORS_CODE.START_WITH:
+        case OPERATORS_CODE.END_WITH:
+        case OPERATORS_CODE.NOT_END_WITH:
+        case OPERATORS_CODE.NOT_START_WITH: {
+            return (React.createElement(Input, { value: value, placeholder: t(translations.inputYourValue.title), onChange: e => onChangeValue(e.target.value) }));
+        }
+        case OPERATORS_CODE.MATCHES:
+        case OPERATORS_CODE.MATCHES_ANY:
+        case OPERATORS_CODE.NOT_MATCHES: {
+            const { list, isLoading } = matchesAny || {};
+            return (React.createElement(MatchesAnySelect, { selectedItems: Array.isArray(value) ? value : [], popupClassName: EXCEPTION_OFF_FILTER_CLASS, objectName: name, items: list, loading: isLoading, onChange: onChangeValue, onLoadMore: onLoadMore }));
+        }
+        case OPERATORS_CODE.AFTER:
+        case OPERATORS_CODE.AFTER_DATE:
+        case OPERATORS_CODE.BEFORE:
+        case OPERATORS_CODE.ON:
+        case OPERATORS_CODE.BEFORE_DATE: {
+            return (React.createElement(DatePicker, { placeholder: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, format: DATE_TIME_FORMAT_DISPLAY.FILTER_CONDITION, allowClear: false, getPopupContainer: trigger => trigger.parentElement, placement: "bottomLeft", popupClassName: EXCEPTION_OFF_FILTER_CLASS, value: value && dayjs(value).isValid() ? dayjs(value) : undefined, onChange: onChangeValue }));
+        }
+        default:
+            return null;
+    }
+};
+/**
+ * Retrieves a filter metric by its name from a collection of filter metrics.
+ *
+ * @typedef {Object} Metric
+ * @property {string} name - The name of the metric.
+ * @property {any} [otherProperties] - Other properties of the metric.
+ *
+ * @typedef {Object} TGetFilterMetricByName
+ * @property {Metric[]} filterMetrics - An array of filter metrics.
+ * @property {string} name - The name of the metric to find.
+ *
+ * @param {TGetFilterMetricByName} params - The parameters containing filter metrics and the name of the metric to find.
+ * @returns {Metric|undefined} The metric with the specified name, or undefined if not found.
+ */
+export const getFilterMetricByName = ({ filterMetrics, name, }) => {
+    const flattenMetrics = flatFilterMetrics(filterMetrics);
+    return flattenMetrics.find(metric => metric.name === name);
+};
+export const mapFiltersToRules = (filters) => filters.map(({ column, operator, value, dataType }) => ({
+    dataType: METRIC_MAP_STRING_TYPE[dataType || 'string'],
+    metricCode: column,
+    operatorValue: operator,
+    filterValue: value,
+}));
+export const mapRulesToFilters = (rules) => rules.map(({ dataType, metricCode, operatorValue, filterValue }) => ({
+    dataType: METRIC_MAP_NUMBER_TYPE[dataType || 1],
+    column: metricCode,
+    operator: operatorValue,
+    value: filterValue,
+}));
+export const mapFiltersToApiFilters = (filters, includeDataType = false, formatFilterValue) => {
+    const serializedFilters = filters.map(({ column, operator, value, dataType }) => {
+        let serializeValue = '';
+        if (formatFilterValue && formatFilterValue[operator]) {
+            serializeValue = formatFilterValue[operator](value);
+        }
+        else {
+            switch (operator) {
+                case MATCHES:
+                case MATCHES_ANY:
+                case NOT_MATCHES: {
+                    if (Array.isArray(value)) {
+                        // Check if value is object the return object.key otherwise return this value
+                        serializeValue = value.map(item => typeof item === 'object' ? item.key || item : item);
+                    }
+                    break;
+                }
+                /** Date time */
+                case AFTER:
+                case AFTER_DATE:
+                case BEFORE:
+                case ON:
+                case BEFORE_DATE: {
+                    if (dayjs(value).isValid()) {
+                        serializeValue = dayjs(value).format(DATE_TIME_FORMAT.FILTER_CONDITION);
+                    }
+                    break;
+                }
+                default:
+                    serializeValue = value;
+                    break;
+            }
+        }
+        return {
+            [column]: Object.assign({ [operator]: serializeValue }, (includeDataType && { dataType: METRIC_MAP_STRING_TYPE[dataType || 'string'] })),
+        };
+    });
+    return serializedFilters;
+};

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 {};

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

@@ -0,0 +1,47 @@
+// Libraries
+import React, { useContext } from 'react';
+import moment from 'moment';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Atoms
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { DatePickerV2 } from '@antscorp/antsomi-ui/es/components/molecules';
+// Constants
+import { dateFormatAPI, dateFormatFE, defaultDateFormatAPI } from '../../../constants';
+// Utils
+import { getValidMomentDate } from '../../../utils';
+// Translations
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Filter context
+import { FilterContext } from '../../../context';
+export const InputCalendarBetween = props => {
+    const { t } = i18nInstance;
+    const { required, focused, value, onChange } = props;
+    // Context
+    const { isFormatDateTimeMilliseconds } = useContext(FilterContext);
+    const [from, to] = value
+        .split(isFormatDateTimeMilliseconds ? ' AND ' : 'AND')
+        .map(val => (isFormatDateTimeMilliseconds ? +val : val));
+    const onChangeFrom = (_, dateString) => {
+        const momentDate = getValidMomentDate(moment(dateString));
+        const newDate = isFormatDateTimeMilliseconds
+            ? (momentDate === null || momentDate === void 0 ? void 0 : momentDate.startOf('day').valueOf()) || null
+            : (momentDate === null || momentDate === void 0 ? void 0 : momentDate.format(defaultDateFormatAPI)) || null;
+        const newValue = isFormatDateTimeMilliseconds ? `${newDate} AND ${to}` : `${newDate}AND${to}`;
+        onChange(newValue);
+    };
+    const onChangeTo = (_, dateString) => {
+        const momentDate = getValidMomentDate(moment(dateString));
+        const newDate = isFormatDateTimeMilliseconds
+            ? (momentDate === null || momentDate === void 0 ? void 0 : momentDate.endOf('day').valueOf()) || null
+            : (momentDate === null || momentDate === void 0 ? void 0 : momentDate.format('YYYY-MM-DD 23:59:59')) || null;
+        const newValue = isFormatDateTimeMilliseconds
+            ? `${from} AND ${newDate}`
+            : `${from}AND${newDate}`;
+        onChange(newValue);
+    };
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+        React.createElement(DatePickerV2, { focused: focused, required: required, format: dateFormatFE, value: getValidMomentDate(moment(from, !isFormatDateTimeMilliseconds ? dateFormatAPI : '')), onChange: onChangeFrom, style: { borderTop: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' } }),
+        React.createElement(Text, { style: { marginLeft: 16, marginRight: 16 } }, t(translations.and.title).toString()),
+        React.createElement(DatePickerV2, { focused: focused, required: required, format: dateFormatFE, value: getValidMomentDate(moment(to, !isFormatDateTimeMilliseconds ? dateFormatAPI : '')), onChange: onChangeTo, style: { borderTop: '0px', borderLeftWidth: '0px', borderRightWidth: '0px' } })));
+};

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

@@ -0,0 +1,13 @@
+import React from 'react';
+type TimeUnit = 'DAY' | 'HOUR';
+interface InputDateTimeAgoProps {
+    value: string | number;
+    timeUnit?: TimeUnit;
+    onChangeMultipleValue: ({ value, time_unit, }: {
+        value?: InputDateTimeAgoProps['value'];
+        time_unit?: InputDateTimeAgoProps['timeUnit'];
+    }) => void;
+    required?: boolean;
+}
+export declare const InputDateTimeAgo: React.FC<InputDateTimeAgoProps>;
+export {};

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

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import React from 'react';
+import { InputNumberWithLabel as InputNumber, Select, } from '@antscorp/antsomi-ui/es/components/molecules';
+export const InputDateTimeAgo = props => {
+    const { value, timeUnit, onChangeMultipleValue, required } = props;
+    const onChangeTime = val => {
+        onChangeMultipleValue({
+            value: val,
+        });
+    };
+    const onChangeUnit = (val) => {
+        onChangeMultipleValue({
+            time_unit: val,
+        });
+    };
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+        React.createElement(InputNumber, { required: required, value: value, onChange: onChangeTime, width: "100%" }),
+        React.createElement(Select, { style: { marginLeft: 16, width: 96 }, value: timeUnit, onChange: onChangeUnit, options: optionsInputDateTimeAgo })));
+};
+const optionsInputDateTimeAgo = [
+    { value: 'DAY', label: 'Days' },
+    { value: 'HOUR', label: 'Hours' },
+];

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface InputDateTimeBetweenAgoProps {
+    value: string;
+    timeUnit?: string;
+    onChange: ({ value, time_unit, }: {
+        value?: InputDateTimeBetweenAgoProps['value'];
+        time_unit?: InputDateTimeBetweenAgoProps['timeUnit'];
+    }) => void;
+}
+export declare const InputDateTimeBetweenAgo: React.FC<InputDateTimeBetweenAgoProps>;
+export {};

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

@@ -0,0 +1,34 @@
+// Libraries
+import React from 'react';
+// Translations
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Atoms
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { InputNumberWithLabel as InputNumber, Select, } from '@antscorp/antsomi-ui/es/components/molecules';
+const DATE_TIME_BETWEEN_OPTIONS = [
+    { value: 'DAY', label: 'Days' },
+    { value: 'HOUR', label: 'Hours' },
+];
+export const InputDateTimeBetweenAgo = props => {
+    const { t } = i18nInstance;
+    const { value, timeUnit, onChange } = props;
+    const [from, to] = (value === null || value === void 0 ? void 0 : value.split(' AND ')) || [];
+    const onChangeFrom = val => {
+        const newValue = `${val} AND ${to}`;
+        onChange({ value: newValue });
+    };
+    const onChangeTo = val => {
+        const newValue = `${from} AND ${val}`;
+        onChange({ value: newValue });
+    };
+    const onChangeUnit = val => {
+        onChange({ time_unit: val });
+    };
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+        React.createElement(InputNumber, { required: true, value: from, onChange: onChangeFrom, width: "100%", min: to }),
+        React.createElement(Text, { style: { margin: '0px 16px ' } }, t(translations.and.title).toString()),
+        React.createElement(InputNumber, { required: true, value: to, onChange: onChangeTo, width: "100%", max: from }),
+        React.createElement(Select, { style: { marginLeft: 16, width: 96 }, value: timeUnit, onChange: onChangeUnit, options: Object.values(DATE_TIME_BETWEEN_OPTIONS) })));
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface InputNumberProps {
+    value: string | number;
+    onChange: (val: InputNumberProps['value']) => void;
+}
+export declare const InputNumber: React.FC<InputNumberProps>;
+export {};

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

@@ -0,0 +1,11 @@
+// Libraries
+import React from 'react';
+// Molecules
+import { InputNumberWithLabel as InputNumberAntd } from '@antscorp/antsomi-ui/es/components/molecules';
+export const InputNumber = props => {
+    const { value, onChange } = props;
+    const onChangeValue = val => {
+        onChange(val);
+    };
+    return React.createElement(InputNumberAntd, { value: value, onChange: onChangeValue, width: "100%" });
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface InputNumberBetweenProps {
+    value: string;
+    onChange: (val: InputNumberBetweenProps['value']) => void;
+}
+export declare const InputNumberBetween: React.FC<InputNumberBetweenProps>;
+export {};

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

@@ -0,0 +1,26 @@
+// Libraries
+import React from 'react';
+// Translations
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Atoms
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { InputNumberWithLabel as InputNumber } from '@antscorp/antsomi-ui/es/components/molecules';
+export const InputNumberBetween = props => {
+    const { t } = i18nInstance;
+    const { value, onChange } = props;
+    const [from, to] = value.split(' AND ');
+    const onChangeFrom = (val) => {
+        const newValue = `${val} AND ${to}`;
+        onChange(newValue);
+    };
+    const onChangeTo = (val) => {
+        const newValue = `${from} AND ${val}`;
+        onChange(newValue);
+    };
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+        React.createElement(InputNumber, { required: true, value: from, onChange: onChangeFrom, width: "100%", max: to }),
+        React.createElement(Text, { style: { marginLeft: 16, marginRight: 16 } }, t(translations.and.title).toString()),
+        React.createElement(InputNumber, { required: true, value: to, onChange: onChangeTo, width: "100%", min: from })));
+};