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

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

@@ -0,0 +1,569 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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;
+};
+var _a;
+/* eslint-disable @typescript-eslint/no-use-before-define */
+// Libraries
+import React, { useEffect, useState } from 'react';
+import { keyBy } from 'lodash';
+import classNames from 'classnames';
+import styled from 'styled-components';
+import { Popover, Input } from 'antd';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Atoms
+import { Button, Divider, Icon, Text, Tag } from '@antscorp/antsomi-ui/es/components/atoms';
+// Molecules
+import { ModalSelect, StyledTreeSelect } from '../InputOrSelect';
+// Components
+import { TreeContentWrapper } from './Tree';
+import { ColumnSuggestion } from './ColumnSuggestion';
+// Services
+import { getListInfoMetadata, getListSuggestionItems, getListSuggestionObjects, } from '@antscorp/antsomi-ui/es/services/MediaTemplateDesign/BusinessObject';
+// Translation
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Hooks
+import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
+// Constants
+import { DEFAULT_CUSTOMER_META_DATA, DEFAULT_EVENT_META_DATA, DEFAULT_VISITOR_META_DATA, SEGMENT_IDS, VALUE_TYPE, } from '../../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Utils
+import { checkDuplicateArray, getScopSuggest, setValueSelectAll } from '../../../utils';
+const { EVENT, CUSTOMER, VISITOR } = VALUE_TYPE;
+const { TextArea } = Input;
+export const InputSelectMulti = props => {
+    // I18n
+    const { t } = i18nInstance;
+    // Props
+    const { value, itemTypeId, itemTypeName, column, customerMetadata = DEFAULT_CUSTOMER_META_DATA, visitorMetadata = DEFAULT_VISITOR_META_DATA, eventMetadata = {}, valueType, hideSelectField, onChangeMultipleValue, onChange, errorMessage, extend, } = props;
+    // State
+    const [data, setData] = useState({});
+    const [loading, setLoading] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [treeData, setTreeData] = useState([]);
+    const [page, setPage] = useState(1);
+    const [searchValue, setSearchValue] = useState('');
+    const [isShowCheck, setIsShowCheck] = useState(false);
+    const [mapLabel, setMapLabel] = useState({});
+    const [dataSelect, setDataSelect] = useState([]);
+    const [dataExtend, setDataExtend] = useState([]);
+    const [modalSelectVisible, setModalSelectVisible] = useState(false);
+    const [openPopover, setPopover] = useState(false);
+    const [isCheckDropDown, setIsCheck] = useState(false);
+    // Debounce
+    const debounceSearchValue = useDebounce(searchValue, 500);
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            const res = yield getSuggestions({ pageNum: page, search: debounceSearchValue });
+            const newData = Object.assign({}, res);
+            setData(newData);
+            setTreeData(Object.values(newData));
+            setLoading(false);
+        }))();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [debounceSearchValue]);
+    useEffect(() => {
+        if (column === SEGMENT_IDS) {
+            (() => __awaiter(void 0, void 0, void 0, function* () {
+                const res = yield getInfoMetadata();
+                const newData = Object.assign({}, res);
+                setMapLabel(newData);
+            }))();
+        }
+        setDataSelect(value);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    useEffect(() => {
+        if (extend) {
+            setDataExtend(extend);
+        }
+    }, [extend]);
+    useEffect(() => {
+        if (isCheckDropDown) {
+            setTimeout(() => {
+                setIsCheck(false);
+            }, 1000);
+        }
+    }, [isCheckDropDown]);
+    const getSuggestions = (_a) => __awaiter(void 0, [_a], void 0, function* ({ pageNum, search }) {
+        return column === SEGMENT_IDS
+            ? getSuggestionObjects({ pageNum, search })
+            : getSuggestionItems({ pageNum, search });
+    });
+    const getSuggestionItems = (_b) => __awaiter(void 0, [_b], void 0, function* ({ pageNum, search }) {
+        const { rows } = yield getListSuggestionItems({}, {
+            limit: 20,
+            page: pageNum,
+            sd: 'asc',
+            search,
+            decryptFields: [column],
+            propertyCode: column,
+            itemTypeId,
+            itemTypeName,
+            // 1 | 3
+            scope: getScopSuggest({ itemTypeId }),
+            itemPropertyName: column,
+            systemDefined: 0,
+            isPk: 0,
+        });
+        const data = keyBy(rows.map((item) => {
+            const key = item.id || item.name;
+            return {
+                value: key,
+                title: key,
+                key,
+                isLeaf: true,
+            };
+        }), 'value');
+        return data;
+    });
+    const getSuggestionObjects = (_c) => __awaiter(void 0, [_c], void 0, function* ({ pageNum, search }) {
+        const { rows } = yield getListSuggestionObjects({}, {
+            limit: 20,
+            page: pageNum,
+            sd: 'asc',
+            search,
+            decryptFields: [column],
+            propertyCode: column,
+            itemTypeId,
+            itemTypeName,
+            isLookupLabelId: true,
+            feServices: 'suggestionMultilang',
+            feKey: `${itemTypeId}-${itemTypeName}-${column}`,
+            objectType: 'BO_SEGMENTS',
+            isPk: 1,
+            objectName: column,
+            filters: {
+                OR: [
+                    {
+                        AND: [
+                            {
+                                type: 1,
+                                column: 'item_type_id',
+                                data_type: 'number',
+                                operator: 'equals',
+                                value: itemTypeId,
+                            },
+                            {
+                                type: 1,
+                                column: 'status',
+                                data_type: 'number',
+                                operator: 'matches',
+                                value: [1, 2],
+                            },
+                        ],
+                    },
+                ],
+            },
+        });
+        const data = keyBy(rows.map((item) => 
+        // const key = item.id || item.name;
+        ({
+            value: item.id,
+            title: item.name,
+            key: item.id,
+            status: +item.status,
+            isLeaf: true,
+        })), 'value');
+        return data;
+    });
+    const getInfoMetadata = () => __awaiter(void 0, void 0, void 0, function* () {
+        const { rows } = yield getListInfoMetadata({}, {
+            objectType: 'BO_SEGMENTS',
+            filters: {
+                OR: [
+                    {
+                        AND: [
+                            {
+                                column: 'segment_id',
+                                data_type: 'number',
+                                operator: 'matches',
+                                value,
+                            },
+                        ],
+                    },
+                ],
+            },
+        });
+        const data = rows.reduce((acc, cur) => {
+            acc[cur.id] = cur.name;
+            return acc;
+        }, {});
+        return data;
+    });
+    const onPopover = () => {
+        setIsCheck(true);
+        setPopover(!openPopover);
+    };
+    const onApply = data => {
+        setIsCheck(true);
+        setPopover(!openPopover);
+        onApplyExtendValue(data);
+    };
+    const onSelectAll = () => {
+        const data = setValueSelectAll(treeData);
+        const newData = checkDuplicateArray(data.concat(value));
+        setDataSelect(newData);
+        onChange(newData, 'value');
+    };
+    const onChangeValue = (val) => {
+        const newData = [...dataSelect];
+        const index = dataSelect.findIndex(each => each === val);
+        if (index === -1) {
+            newData.push(val);
+        }
+        else {
+            newData.splice(index, 1);
+        }
+        setDataSelect(newData);
+        onChange(newData, 'value');
+        // onChange(val);
+    };
+    const onChangeRemoveExtend = val => {
+        const newData = [...dataExtend];
+        const index = dataExtend.findIndex(each => each === val);
+        if (index === -1) {
+            newData.push(val);
+        }
+        else {
+            newData.splice(index, 1);
+        }
+        setDataExtend(newData);
+        onChange(newData, 'extend');
+    };
+    const onChangeOpen = () => {
+        setOpen(!open);
+        setPopover(false);
+    };
+    const onChangeTreeData = (val) => {
+        setTreeData(val);
+    };
+    const onLoadMore = () => __awaiter(void 0, void 0, void 0, function* () {
+        setLoadingMore(true);
+        const newPage = page + 1;
+        const res = yield getSuggestions({ pageNum: newPage, search: searchValue });
+        const newData = Object.assign(Object.assign({}, data), res);
+        setData(newData);
+        setTreeData(Object.values(newData));
+        setLoadingMore(false);
+        setPage(prev => prev + 1);
+    });
+    const onScroll = event => {
+        if (isShowCheck) {
+            return;
+        }
+        const target = event.target;
+        const bottom = target.scrollHeight - target.scrollTop < target.clientHeight + 70;
+        if (bottom && !loadingMore) {
+            onLoadMore();
+        }
+    };
+    const onSearch = (val) => {
+        setLoading(true);
+        setPage(1);
+        setSearchValue(val);
+    };
+    const onChangeIsShowCheck = () => {
+        if (!isShowCheck) {
+            const newData = props.value.map(name => data[name] || {
+                // hard value
+                value: name,
+                title: name,
+                key: name,
+                isLeaf: name,
+            });
+            onChangeTreeData(newData);
+        }
+        else {
+            onChangeTreeData(Object.values(data));
+        }
+        setIsShowCheck(prev => !prev);
+    };
+    const onUncheckAll = () => {
+        var _a;
+        setDataSelect([]);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, [], 'value', 'extend');
+    };
+    const handleOkModalSelect = ({ valueType, metaData }) => {
+        const mapMetaData = {
+            event_metadata: metaData.event,
+            visitor_metadata: metaData.visitor,
+            customer_metadata: metaData.customer,
+        };
+        setModalSelectVisible(false);
+        onChangeMultipleValue(Object.assign(Object.assign({ value: [] }, mapMetaData), { value_type: valueType }));
+    };
+    const onApplyExtendValue = value => {
+        const newArray = (dataExtend || []).concat(value);
+        setDataExtend(newArray);
+        onChange(newArray, 'extend');
+    };
+    const handleCancelModalSelect = () => {
+        setModalSelectVisible(false);
+    };
+    const renderInput = () => {
+        var _a, _b;
+        return (React.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                height: 32,
+                padding: '4px 12px 4px 4px',
+                borderBottom: `1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.gray5}`,
+            } },
+            React.createElement("div", { style: { width: '100%', cursor: 'pointer' }, onClick: () => setModalSelectVisible(true) },
+                React.createElement(Tag, null, (valueType === EVENT.value &&
+                    (eventMetadata.item_property_label || eventMetadata.item_property_name)) ||
+                    (valueType === CUSTOMER.value && customerMetadata.item_property_name) ||
+                    (valueType === VISITOR.value && visitorMetadata.item_property_name))),
+            React.createElement(Icon, { type: "icon-ants-remove", style: { fontSize: 10, color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorTextBase, cursor: 'pointer' }, onClick: () => {
+                    onChangeMultipleValue({
+                        event_metadata: DEFAULT_EVENT_META_DATA,
+                        value_type: 'normal',
+                    });
+                } })));
+    };
+    return (React.createElement(React.Fragment, null,
+        ['event', 'customer', 'visitor'].includes(valueType || '') ? (renderInput()) : (React.createElement(SelectMultiple
+        // open
+        , { 
+            // open
+            virtual: false, treeData: treeData, value: dataExtend ? value.concat(dataExtend) : value, dropdownExtraContent: !hideSelectField ? (React.createElement(React.Fragment, null,
+                React.createElement(Divider, { style: {
+                        border: '0.51px solid rgb(203, 214, 226)',
+                        marginTop: 6,
+                        marginBottom: 6,
+                    } }),
+                React.createElement("div", { style: { display: 'flex', alignItems: 'center', padding: '0px 10px' } },
+                    React.createElement(Text, null, t(translations.or.title).toString()),
+                    React.createElement(Button, { type: "text", onClick: () => setModalSelectVisible(true) }, t(translations.selectAField.title).toString())))) : null, searchValue: searchValue, notFoundContent: React.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: 128,
+                } }, loading ? 'Loading...' : 'No data'), onSearch: onSearch, onChange: onChangeValue, onChangeTreeData: onChangeTreeData, 
+            // data={data}
+            loading: loading, onScroll: onScroll, isShowCheck: isShowCheck, onChangeIsShowCheck: onChangeIsShowCheck, onUncheckAll: onUncheckAll, mapLabel: mapLabel, dataSelect: dataSelect, onChangeOpen: onChangeOpen, open: open, onSelectAll: onSelectAll, onApplyExtendValue: onApplyExtendValue, column: column, extendValue: dataExtend, onChangeRemoveExtend: onChangeRemoveExtend, onPopover: onPopover, onApply: onApply, openPopover: openPopover, isCheckDropDown: isCheckDropDown })),
+        errorMessage ? (React.createElement(Text, { color: "#ff4d4f", style: { marginLeft: 8 } }, errorMessage)) : null,
+        React.createElement(ModalSelect, { valueType: valueType || 'event', isModalVisible: modalSelectVisible, customerMetadata: customerMetadata, visitorMetadata: visitorMetadata, eventMetadata: eventMetadata, handleOk: handleOkModalSelect, handleCancel: handleCancelModalSelect })));
+};
+export const SelectMultiple = props => {
+    const { onChangeTreeData, 
+    // data,
+    loading, onScroll, isShowCheck, onChangeIsShowCheck, onUncheckAll, mapLabel, dropdownExtraContent, treeData, onChange, dataSelect, onChangeOpen, open, onSelectAll, onApplyExtendValue, extendValue, column, onChangeRemoveExtend, onPopover, onApply, openPopover, isCheckDropDown, searchValue, onSearch } = props, restOf = __rest(props, ["onChangeTreeData", "loading", "onScroll", "isShowCheck", "onChangeIsShowCheck", "onUncheckAll", "mapLabel", "dropdownExtraContent", "treeData", "onChange", "dataSelect", "onChangeOpen", "open", "onSelectAll", "onApplyExtendValue", "extendValue", "column", "onChangeRemoveExtend", "onPopover", "onApply", "openPopover", "isCheckDropDown", "searchValue", "onSearch"]);
+    // I18next
+    const { t } = i18nInstance;
+    return (React.createElement(StyledTreeSelect, Object.assign({ showSearch: false, searchValue: searchValue, treeCheckable: true, 
+        // open
+        placement: "bottomRight", autoClearSearchValue: true, dropdownStyle: { minWidth: '600px', width: '600px' }, open: open, onDropdownVisibleChange: isCheckDropDown ? () => { } : onChangeOpen, maxTagCount: "responsive", tagRender: v => React.createElement(Tag, Object.assign({}, v), mapLabel[v.value] || v.label), placeholder: t(translations.selectAnItem.title).toString(), dropdownRender: menu => (React.createElement(SelectMultipleDropdown, { menu: menu, isShowCheck: isShowCheck, extraContent: dropdownExtraContent, onChangeIsShowCheck: onChangeIsShowCheck, onUncheckAll: onUncheckAll, onScroll: onScroll, treeData: treeData, onChange: onChange, dataSelect: dataSelect, onChangeOpen: onChangeOpen, onSelectAll: onSelectAll, onApplyExtendValue: onApplyExtendValue, column: column, extendValue: extendValue, onChangeRemoveExtend: onChangeRemoveExtend, onPopover: onPopover, onApply: onApply, openPopover: openPopover, searchValue: searchValue, onSearch: onSearch, loading: loading })) }, restOf)));
+};
+export const SelectMultipleDropdown = props => {
+    var _a, _b, _c;
+    const { menu, isShowCheck, onChangeIsShowCheck, onUncheckAll, onScroll, extraContent, treeData, onChange, dataSelect, onChangeOpen, onSelectAll, onApplyExtendValue, extendValue = [], column, onChangeRemoveExtend, onPopover, onApply, openPopover, searchValue, onSearch, loading, } = props;
+    const [data, setData] = useState([]);
+    const [dataTextArea, setDataArea] = useState('');
+    const onChangeText = (value, evt) => {
+        const result = value.split(/\n/).filter(element => element);
+        setDataArea(value);
+        setData(result);
+    };
+    const onChangeKey = evt => {
+        const newArray = [...data];
+        if (evt.keyCode === 13) {
+            // eslint-disable-next-line array-callback-return
+            newArray.map((each, index) => {
+                if (newArray.length === index + 1) {
+                    newArray[index] = `${each}\n`;
+                }
+            });
+            setDataArea(`${dataTextArea}\n`);
+            setData(newArray);
+        }
+        // console.log(data);
+    };
+    const onCancelExtend = (e) => {
+        setData([]);
+        setDataArea('');
+        onPopover();
+    };
+    const onCancel = () => {
+        // onUncheckAll();
+        onChangeOpen();
+    };
+    const applyExtend = e => {
+        setDataArea('');
+        onApply(data);
+        setData([]);
+    };
+    const onSearchInput = e => {
+        onSearch(e.target.value);
+    };
+    const content = (React.createElement("div", { style: {
+            width: '300px',
+            height: '200',
+        } },
+        React.createElement("div", { style: { marginBottom: '5px' } }, "Extend values"),
+        React.createElement("div", null,
+            React.createElement(TextArea
+            // componentKey={props.componentKey}
+            , { "aria-label": "minimum height", placeholder: "You can extend values by input or paste values, separated by enter", onChange: evt => onChangeText(evt.target.value, evt), onKeyDown: onChangeKey, style: {
+                    width: '98%',
+                    height: '130px',
+                    border: '1px #c8ccd7 solid',
+                    outline: 'none',
+                    resize: 'none',
+                }, value: dataTextArea || '' })),
+        React.createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'space-around',
+                width: '120px',
+                paddingTop: '15px',
+            } },
+            React.createElement(Button, { onClick: applyExtend, type: "primary" }, "Apply"),
+            React.createElement(Button, { onClick: onCancelExtend, type: "default" }, "Cancel"))));
+    return (React.createElement(StyledDropdown, null,
+        React.createElement("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } },
+            React.createElement(WrapperHeader, null,
+                React.createElement(Input, { style: {
+                        width: 290,
+                        margin: '2px 10px 2px 5px',
+                        border: '1px solid rgba(0, 0, 0, 0.42)',
+                        borderRadius: '5px',
+                    }, value: searchValue, onChange: onSearchInput, placeholder: "Search values" }),
+                React.createElement(Icon, { style: {
+                        top: '13px',
+                        left: '270px',
+                        position: 'absolute',
+                    }, type: "icon-ants-search", size: 16 }))),
+        React.createElement(Divider, { style: {
+                border: '0.51px solid rgb(203, 214, 226)',
+                margin: '5px 0px 0px 0px',
+            } }),
+        React.createElement(ContainerCustomize, null,
+            React.createElement(WrapperContentCustomize, null, loading ? (React.createElement("div", { style: {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: 128,
+                } },
+                React.createElement(Text, { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorIcon }, "Loading..."))) : (React.createElement(SuggestionTitle, null,
+                React.createElement(HeaderContent, null,
+                    React.createElement(Text, { style: { fontWeight: 'bold', marginLeft: '10px' } },
+                        column,
+                        React.createElement("span", { style: { fontWeight: 'normal' } }, `(${treeData.length})`)),
+                    React.createElement(Text, { style: {
+                            cursor: 'pointer',
+                            fontWeight: 'bold',
+                            paddingLeft: '10px',
+                            paddingRight: '10px',
+                        }, color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary, onClick: onSelectAll }, "Select All")),
+                React.createElement(TreeContentWrapper, { onScroll: onScroll, data: dataSelect, onChange: onChange, treeData: treeData })))),
+            React.createElement(WrapperSuggestion, null,
+                React.createElement(SuggestionTitle, null,
+                    React.createElement(HeaderContent, null,
+                        React.createElement(Text, { style: { fontWeight: 'bold', marginLeft: '10px' } },
+                            "Selected",
+                            React.createElement("span", { style: { fontWeight: 'normal' } }, `(${dataSelect.length + extendValue.length})`)),
+                        React.createElement(Text, { style: {
+                                cursor: 'pointer',
+                                fontWeight: 'bold',
+                                paddingLeft: '10px',
+                                paddingRight: '10px',
+                            }, color: (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary, onClick: onUncheckAll }, "Remove All")),
+                    React.createElement(ColumnSuggestion, { onChangeRemoveExtend: onChangeRemoveExtend, extendValue: extendValue, onChange: onChange, data: dataSelect })))),
+        React.createElement(Divider, { style: { border: '0.51px solid rgb(203, 214, 226)', margin: '0px 0px 7px 0px' } }),
+        React.createElement(WrapperFooterContent, null,
+            React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around', width: '120px' } },
+                React.createElement(Button, { onClick: onChangeOpen, type: "primary" }, "Apply"),
+                React.createElement(Button, { onClick: onCancel, type: "default" }, "Cancel")),
+            React.createElement(Popover, { getPopupContainer: triggerNode => triggerNode.parentElement, visible: openPopover, 
+                // onVisibleChange={onVisibleChange}
+                overlayClassName: classNames('antsomi-w-[330px]', 'no-arrow', 'title-bg-blue'), placement: "bottomRight", content: content, trigger: ['click'] },
+                React.createElement(Button, { onClick: onPopover, type: "default" },
+                    React.createElement(Icon, { size: 10, type: "icon-ants-flag" }),
+                    "Extend Value"))),
+        extraContent));
+};
+export const StyledDropdown = styled.div `
+  .antsomi-select-tree-list {
+    .antsomi-select-tree-title {
+      font-size: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontSize}px;
+    }
+    .antsomi-select-tree-treenode {
+      margin-right: 8px;
+      margin-left: 8px;
+
+      .antsomi-select-tree-switcher.antsomi-select-tree-switcher-noop {
+        display: none;
+      }
+    }
+  }
+`;
+export const WrapperHeader = styled.div `
+  display: flex;
+  height: 35px;
+  justify-content: space-between;
+  .MuiPaper-root.MuiPaper-rounded {
+    flex: 1;
+  }
+`;
+export const ContainerCustomize = styled.div `
+  overflow: hidden;
+  display: flex;
+  max-height: 350px;
+  min-height: 250px;
+`;
+export const WrapperContentCustomize = styled.div `
+  /* max-width: 40.0625rem; */
+  // flex-grow: 1;
+  width: 50%;
+  border-right: 1px solid rgb(230, 230, 230);
+`;
+export const WrapperContentSuggestion = styled.div `
+  /* max-width: 40.0625rem; */
+  // flex-grow: 1;
+  width: 50%;
+`;
+export const WrapperSuggestion = styled.div `
+  width: 50%;
+`;
+export const SuggestionTitle = styled.div `
+  font-size: 1rem;
+  width: 100%;
+  height: 100%;
+  margin-top: 5px;
+`;
+export const SpanSelect = styled.span `
+  margin-left: 15px;
+  font-size: 12px;
+`;
+export const HeaderContent = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+export const WrapperFooterContent = styled.div `
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+`;

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

@@ -0,0 +1,10 @@
+import React, { ReactNode } from 'react';
+interface TextTreeSelectProps {
+    label?: ReactNode | null;
+    attribute: string | null;
+    searchValue?: string;
+    open?: boolean;
+    onDropdownVisibleChange?: any;
+}
+export declare const TextTreeSelect: React.FC<TextTreeSelectProps>;
+export {};

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

@@ -0,0 +1,13 @@
+// Libraries
+import React from 'react';
+// Atoms
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
+export const TextTreeSelect = props => {
+    const { label, attribute, searchValue, open, onDropdownVisibleChange } = props;
+    const onClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onDropdownVisibleChange(open);
+    };
+    return (React.createElement(Text, { style: { marginLeft: 8 }, onClick: onClick }, searchValue ? '' : attribute ? label : ''));
+};

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

@@ -0,0 +1,11 @@
+import { InputBoolean } from './InputBoolean';
+import { InputNumberBetween } from './InputNumberBetween';
+import { InputCalendarBetween } from './InputCalendarBetween';
+import { InputDateTimeBetweenAgo } from './InputDateTimeBetweenAgo';
+import { InputDateTimeAgo } from './InputDateTimeAgo';
+import { InputCalendar } from './InputCalendar';
+import { InputSelectMulti } from './InputSelectMulti';
+import { InputOrSelect } from './InputOrSelect';
+import { InputArray } from './InputArray';
+import { InputNumber } from './InputNumber';
+export { InputBoolean, InputNumberBetween, InputCalendar, InputCalendarBetween, InputDateTimeAgo, InputDateTimeBetweenAgo, InputSelectMulti, InputOrSelect, InputArray, InputNumber, };

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

@@ -0,0 +1,11 @@
+import { InputBoolean } from './InputBoolean';
+import { InputNumberBetween } from './InputNumberBetween';
+import { InputCalendarBetween } from './InputCalendarBetween';
+import { InputDateTimeBetweenAgo } from './InputDateTimeBetweenAgo';
+import { InputDateTimeAgo } from './InputDateTimeAgo';
+import { InputCalendar } from './InputCalendar';
+import { InputSelectMulti } from './InputSelectMulti';
+import { InputOrSelect } from './InputOrSelect';
+import { InputArray } from './InputArray';
+import { InputNumber } from './InputNumber';
+export { InputBoolean, InputNumberBetween, InputCalendar, InputCalendarBetween, InputDateTimeAgo, InputDateTimeBetweenAgo, InputSelectMulti, InputOrSelect, InputArray, InputNumber, };