@antscorp/antsomi-ui 1.3.5-beta.21 → 1.3.5-beta.211

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 { Tag } from '@antscorp/antsomi-ui/es/components/atoms';
+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 })));
+};

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { CustomerMetadata, EventBoFieldMetadata, VisitorMetadata } from '@antscorp/antsomi-ui/es/components/atoms/InputDynamic/types';
+type Value = string | null;
+type ValueType = 'event' | 'normal' | 'customer' | 'visitor' | string;
+type BOField = {
+    label: string;
+    value: string;
+    dataType: string;
+};
+interface InputOrSelectProps {
+    value: Value;
+    eventMetadata: EventBoFieldMetadata;
+    visitorMetadata: VisitorMetadata;
+    customerMetadata: CustomerMetadata;
+    valueType: ValueType;
+    onChangeMultipleValue: ({ value, event_metadata, visitor_metadata, customer_metadata, value_type, }: {
+        value?: InputOrSelectProps['value'];
+        event_metadata?: InputOrSelectProps['eventMetadata'];
+        visitor_metadata?: InputOrSelectProps['visitorMetadata'];
+        customer_metadata?: InputOrSelectProps['customerMetadata'];
+        value_type?: InputOrSelectProps['valueType'];
+    }) => void;
+    dataType: string | null;
+    businessObject?: Record<string, string>;
+    boFieldOptions?: BOField[];
+    useBo?: boolean;
+    hideSelectField?: boolean;
+}
+export declare const InputOrSelect: React.FC<InputOrSelectProps>;
+interface ModalSelectProps {
+    isModalVisible: boolean;
+    valueType: ValueType;
+    handleOk: ({ valueType, metaData }: {
+        valueType: any;
+        metaData: any;
+    }) => void;
+    handleCancel: () => void;
+    eventMetadata: EventBoFieldMetadata;
+    customerMetadata: CustomerMetadata;
+    visitorMetadata: VisitorMetadata;
+    businessObject?: Record<string, string>;
+    boFieldOptions?: BOField[];
+    defaultIsBo?: boolean;
+    onError?: (errorMsg: string) => void;
+}
+export declare const ModalSelect: React.FC<ModalSelectProps>;
+export declare const StyledAutoComplete: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-select/lib/Select").DefaultOptionType | import("rc-select/lib/Select").BaseOptionType = import("rc-select/lib/Select").DefaultOptionType>(props: import("antd").AutoCompleteProps<ValueType, OptionType> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<import("antd").RefSelectProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+    Option: import("rc-select/lib/Option").OptionFC;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
+}, any, {}, never>;
+export declare const StyledDropdown: import("styled-components").StyledComponent<"div", any, {
+    $isSearching: boolean;
+}, never>;
+export declare const StyledSelect: import("styled-components").StyledComponent<{
+    (props: import("@antscorp/antsomi-ui/es/components/molecules").SelectV2Props): React.JSX.Element;
+    defaultProps: {
+        suffixIcon: React.JSX.Element;
+        filterOption: (input: any, option: any) => boolean;
+        tagRender: (props: any) => React.JSX.Element;
+        containerStyle: {};
+        labelStyle: {};
+        clearIcon: React.JSX.Element;
+    };
+}, any, any, never>;
+export declare const StyledTreeSelect: import("styled-components").StyledComponent<(<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").DefaultOptionType | import("rc-tree-select/lib/TreeSelect").BaseOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<import("antd").RefSelectProps>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>) & {
+    displayName?: string | undefined;
+    TreeNode: React.FC<import("rc-tree-select/lib/TreeNode").TreeNodeProps>;
+    SHOW_ALL: "SHOW_ALL";
+    SHOW_PARENT: "SHOW_PARENT";
+    SHOW_CHILD: "SHOW_CHILD";
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
+}, any, {}, never>;
+export declare const StyledSearch: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("antd/lib/input/Search").SearchProps & React.RefAttributes<import("antd").InputRef>>, any, {}, never>;
+export {};