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

package/es/components/molecules/SearchPopover/components/PopoverSelect/index.d.ts

@@ -0,0 +1 @@
+export { PopoverSelect } from './PopoverSelect';

package/es/components/molecules/SearchPopover/components/PopoverSelect/index.js

@@ -0,0 +1 @@
+export { PopoverSelect } from './PopoverSelect';

package/es/components/molecules/SearchPopover/components/PopoverSelect/styles.scss

@@ -0,0 +1,59 @@
+.search-popover-overlay {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      min-width: 300px;
+
+      .antsomi-popover-inner-content {
+        .antsomi-menu.list-fields {
+          border-bottom: 1px solid var(--divider-1);
+
+          > .antsomi-menu-item {
+            padding: 0;
+
+            > .antsomi-menu-title-content {
+              > .antsomi-checkbox-wrapper {
+                padding: 0 var(--item-padding);
+                display: flex;
+                align-items: center;
+                width: 100%;
+                height: 100%;
+
+                span:nth-child(2) {
+                  > i {
+                    min-width: 20px;
+                    text-align: center;
+                  }
+
+                  display: flex;
+                  align-items: center;
+                  gap: 6px;
+                }
+              }
+            }
+          }
+        }
+
+        > .actions {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 10px;
+          padding: 5px 0px;
+
+          > button {
+            height: 30px;
+            padding: 0 10px;
+          }
+        }
+
+        > .footer {
+          gap: 10px;
+          padding: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+}

package/es/components/molecules/SearchPopover/components/index.d.ts

@@ -0,0 +1,2 @@
+export { PopoverAddField } from './PopoverAddField';
+export { PopoverSelect } from './PopoverSelect';

package/es/components/molecules/SearchPopover/components/index.js

@@ -0,0 +1,2 @@
+export { PopoverAddField } from './PopoverAddField';
+export { PopoverSelect } from './PopoverSelect';

package/es/components/molecules/SearchPopover/constants.d.ts

@@ -0,0 +1,27 @@
+export declare const FIELD_DATA_TYPE: {
+    readonly NUMBER: {
+        readonly label: "Number";
+        readonly name: "number";
+        readonly value: 2;
+    };
+    readonly STRING: {
+        readonly label: "String";
+        readonly name: "string";
+        readonly value: 1;
+    };
+    readonly TEXT: {
+        readonly label: "Text";
+        readonly name: "text";
+        readonly value: 1;
+    };
+    readonly DATE_TIME: {
+        readonly label: "Datetime";
+        readonly name: "datetime";
+        readonly value: 5;
+    };
+    readonly BOOLEAN: {
+        readonly label: "Boolean";
+        readonly name: "boolean";
+        readonly value: 17;
+    };
+};

package/es/components/molecules/SearchPopover/constants.js

@@ -0,0 +1,27 @@
+export const FIELD_DATA_TYPE = {
+    NUMBER: {
+        label: 'Number',
+        name: 'number',
+        value: 2,
+    },
+    STRING: {
+        label: 'String',
+        name: 'string',
+        value: 1,
+    },
+    TEXT: {
+        label: 'Text',
+        name: 'text',
+        value: 1,
+    },
+    DATE_TIME: {
+        label: 'Datetime',
+        name: 'datetime',
+        value: 5,
+    },
+    BOOLEAN: {
+        label: 'Boolean',
+        name: 'boolean',
+        value: 17,
+    },
+};

package/es/components/molecules/SearchPopover/index.d.ts

@@ -0,0 +1,3 @@
+export { PopoverAddField, PopoverSelect } from './components';
+export { SearchPopover } from './SearchPopover';
+export type { SearchPopoverProps, PopoverAddFieldProps } from './types';

package/es/components/molecules/SearchPopover/index.js

@@ -0,0 +1,2 @@
+export { PopoverAddField, PopoverSelect } from './components';
+export { SearchPopover } from './SearchPopover';

package/es/components/molecules/SearchPopover/styles.scss

@@ -0,0 +1,31 @@
+.search-popover-overlay {
+  &.antsomi-popover {
+    .antsomi-popover-inner {
+      padding: 0;
+
+      .antsomi-input-group-wrapper {
+        padding: 8px 10px;
+        border-bottom: 1px solid var(--divider-1);
+
+        .antsomi-input {
+          padding-left: 0;
+          padding-right: 0;
+        }
+
+        .antsomi-input-group-addon {
+          border: none;
+          background: transparent;
+          font-size: 20px;
+          padding: 0;
+          min-width: 25px;
+
+          > i {
+            font-size: 24px;
+            color: #595959;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

package/es/components/molecules/SearchPopover/types.d.ts

@@ -0,0 +1,30 @@
+import { PopoverProps } from 'antd';
+import { InputProps } from '../../atoms/Input';
+import React, { PropsWithChildren } from 'react';
+export type SearchPopoverProps = PropsWithChildren<{
+    inputSearchProps?: InputProps;
+} & PopoverProps>;
+export type Option = {
+    key: string;
+    label: React.ReactNode | ((info: {
+        selected: boolean;
+    }) => React.ReactNode);
+};
+export type Field = Option & {
+    dataType?: string | number;
+};
+export type PopoverSelectProps<TOption extends Option = Option> = SearchPopoverProps & Partial<{
+    options: TOption[];
+    selected: string[];
+    onCancel: () => void;
+    onApply: (selected: string[]) => void;
+    children: React.ReactNode;
+    showAllLabel: string;
+    showSelectedLabel: string;
+    deselectAllLabel: string;
+    selectAllLabel: string;
+    onSearchPredicate: (option: TOption) => boolean;
+}>;
+export type PopoverAddFieldProps = Omit<PopoverSelectProps, 'options'> & {
+    fields: Field[];
+};

package/es/components/molecules/SearchPopover/types.js

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

package/es/components/molecules/SearchPopover/utils.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const renderIconField: (dataType?: string | number) => React.JSX.Element;

package/es/components/molecules/SearchPopover/utils.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Icon } from '../../atoms/Icon';
+import { FIELD_DATA_TYPE } from './constants';
+export const renderIconField = (dataType = FIELD_DATA_TYPE.STRING.name) => {
+    switch (dataType) {
+        case FIELD_DATA_TYPE.STRING.name:
+        case FIELD_DATA_TYPE.STRING.value:
+        case FIELD_DATA_TYPE.TEXT.name:
+        case FIELD_DATA_TYPE.TEXT.value:
+            return React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+        case FIELD_DATA_TYPE.BOOLEAN.name:
+        case FIELD_DATA_TYPE.BOOLEAN.value:
+            return React.createElement(Icon, { type: "icon-ants-boolean", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.NUMBER.name:
+        case FIELD_DATA_TYPE.NUMBER.value:
+            return React.createElement(Icon, { type: "icon-ants-123", style: { color: '#51a5d5' } });
+        case FIELD_DATA_TYPE.DATE_TIME.name:
+        case FIELD_DATA_TYPE.DATE_TIME.value:
+            return React.createElement(Icon, { type: "icon-ants-calendar-v2", style: { color: '#56b261' } });
+        default:
+            return React.createElement(Icon, { type: "icon-ants-ABC", style: { color: '#56b261' } });
+    }
+};

package/es/components/molecules/SelectAccount/AccountChip.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+type AccountChipProps = {
+    label: string;
+    value: string;
+    user: any;
+    disabled?: boolean;
+    isViewMode?: boolean;
+    isError?: boolean;
+    errorMsg?: string;
+    onRemove?: (item: any) => void;
+};
+declare const AccountChip: React.FC<AccountChipProps>;
+export default AccountChip;

package/es/components/molecules/SelectAccount/AccountChip.js

@@ -0,0 +1,31 @@
+// Libraries
+import React, { useContext } from 'react';
+// Context
+import { SelectAccountContext } from './context';
+// Components
+import { AccountChipWrapper } from './styled';
+import Icon from '@antscorp/icons';
+import { Tooltip, Typography } from '../../atoms';
+const AccountChip = props => {
+    const { user, label, value, disabled, isViewMode, isError, errorMsg, onRemove } = props;
+    const { state } = useContext(SelectAccountContext);
+    const { disabledAccount, userIdKey, styles } = state;
+    const handleRemove = () => {
+        if (typeof onRemove === 'function') {
+            onRemove({ value, user });
+        }
+    };
+    const isDisabled = disabled || (state === null || state === void 0 ? void 0 : state.disabled) || (disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(user === null || user === void 0 ? void 0 : user[userIdKey]));
+    return (React.createElement(Tooltip, { open: isError ? undefined : false, title: errorMsg },
+        React.createElement(AccountChipWrapper, { className: "select-account-chip", style: Object.assign({}, ((styles === null || styles === void 0 ? void 0 : styles.accountChip) || {})), disabled: isDisabled, isError: isError },
+            React.createElement(Typography.Text, { className: "name", ellipsis: { tooltip: { title: label } }, style: { maxWidth: '150px' } }, label),
+            !isViewMode && !(state === null || state === void 0 ? void 0 : state.isViewMode) && !isDisabled && (React.createElement("div", { className: "icon-remove", onClick: handleRemove },
+                React.createElement(Icon, { type: "icon-ants-remove-slim" }))))));
+};
+AccountChip.defaultProps = {
+    disabled: false,
+    isViewMode: false,
+    isError: false,
+    errorMsg: '',
+};
+export default AccountChip;

package/es/components/molecules/SelectAccount/AccountItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+type AccountItemProps = {
+    checked: boolean;
+    label: string;
+    disabled?: boolean;
+    name?: string;
+    onChange?: (e: CheckboxChangeEvent) => void;
+};
+declare const _default: React.NamedExoticComponent<AccountItemProps>;
+export default _default;

package/es/components/molecules/SelectAccount/AccountItem.js

@@ -0,0 +1,10 @@
+import React, { memo } from 'react';
+import { CheckboxStyled } from './styled';
+import { Typography } from '../../atoms';
+const AccountItem = props => {
+    const { checked, label, disabled, name, onChange } = props;
+    const TextLabel = ({ children }) => (React.createElement(Typography.Text, { ellipsis: { tooltip: { title: children } }, style: { maxWidth: '220px' } }, children));
+    return (React.createElement(CheckboxStyled, { name: name, disabled: disabled, checked: checked, onChange: onChange },
+        React.createElement(TextLabel, null, label)));
+};
+export default memo(AccountItem);

package/es/components/molecules/SelectAccount/AccountList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type AccountListProps = {};
+declare const _default: React.NamedExoticComponent<AccountListProps>;
+export default _default;

package/es/components/molecules/SelectAccount/AccountList.js

@@ -0,0 +1,93 @@
+// Libraries
+import React, { memo, useContext, useEffect, useState } from 'react';
+import { slice } from 'lodash';
+// Context
+import { SelectAccountContext } from './context/SelectAccountContext';
+// Components
+import { AccountListBody, AccountListContent, AccountListFooter, AccountListTitleGroup, AccountListWrapper, } from './styled';
+import { Button, Icon, Input, Scrollbars } from '../../atoms';
+import { Dropdown } from '../Dropdown';
+import AccountItem from './AccountItem';
+const AccountList = () => {
+    var _a;
+    const { formListRef, state, dispatch } = useContext(SelectAccountContext);
+    const { usersSelected, usersDisplay, disabledAccount, nameKey, userIdKey, searchText, listAccountGroupDisplay, limit = 10, } = state;
+    const POSITION_TOP = 0.9;
+    // States
+    const [openGroup, setOpenGroup] = useState(true);
+    const [openAccount, setOpenAccount] = useState(true);
+    const [page, setPage] = useState(1);
+    const [pageGroup, setPageGroup] = useState(1);
+    const [tempSelected, setTempSelected] = useState([]);
+    useEffect(() => {
+        setTempSelected([...usersSelected]);
+    }, [usersSelected]);
+    const handleCancel = () => {
+        dispatch({ type: 'CLOSE_ACCOUNT_LIST' });
+    };
+    const handleApply = () => {
+        dispatch({ type: 'APPLY_SELECTED', payload: tempSelected });
+    };
+    const handleSearch = text => {
+        dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: text });
+    };
+    const handleTempSelected = (isChecked, key) => {
+        if (isChecked) {
+            setTempSelected([...tempSelected, key]);
+        }
+        else {
+            setTempSelected(tempSelected.filter(id => id !== key));
+        }
+    };
+    return (React.createElement(AccountListWrapper, null,
+        React.createElement(AccountListBody, null,
+            React.createElement("form", { ref: formListRef, id: "form-account-list" },
+                React.createElement(Input, { value: searchText, placeholder: "Search", suffix: React.createElement(Icon, { type: "icon-ants-search-2" }), onAfterChange: value => handleSearch(value), debounce: 500 }),
+                (state === null || state === void 0 ? void 0 : state.type) === 'group' ? (React.createElement(React.Fragment, null,
+                    React.createElement(Dropdown, { open: openGroup, getPopupContainer: () => document.getElementById('account-group-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => {
+                            var _a;
+                            return (
+                            // <AccountListContent>
+                            React.createElement(Scrollbars, { width: "100%", autoHeight: true, autoHeightMax: 160, onScrollFrame: values => {
+                                    if (values.top > POSITION_TOP &&
+                                        limit * pageGroup < (listAccountGroupDisplay === null || listAccountGroupDisplay === void 0 ? void 0 : listAccountGroupDisplay.length)) {
+                                        setPageGroup(pageGroup + 1);
+                                    }
+                                } },
+                                React.createElement(AccountListContent, null, (_a = slice(listAccountGroupDisplay, 0, limit * pageGroup)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItem, { key: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], name: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey], checked: tempSelected.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), label: item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupNameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]), onChange: e => handleTempSelected(e.target.checked, item === null || item === void 0 ? void 0 : item[state === null || state === void 0 ? void 0 : state.groupIdKey]) })))))
+                            // </AccountListContent>
+                            );
+                        } },
+                        React.createElement(AccountListTitleGroup, { onClick: () => setOpenGroup(!openGroup) },
+                            React.createElement("div", null, state.groupText || 'Account group'),
+                            React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
+                                    transform: openGroup ? 'rotate(180deg)' : 'rotate(0deg)',
+                                    transition: '0.3s',
+                                } }))),
+                    React.createElement("div", { id: "account-group-list" }),
+                    React.createElement(Dropdown, { open: openAccount, getPopupContainer: () => document.getElementById('account-list') || document.body, overlayStyle: { position: 'initial' }, trigger: ['click'], dropdownRender: () => {
+                            var _a;
+                            return (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", onScrollFrame: values => {
+                                    if (values.top > POSITION_TOP && limit * page < (usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.length)) {
+                                        setPage(page + 1);
+                                    }
+                                } },
+                                React.createElement(AccountListContent, null, (_a = slice(usersDisplay, 0, limit * page)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItem, { key: item === null || item === void 0 ? void 0 : item[userIdKey], name: item === null || item === void 0 ? void 0 : item[userIdKey], checked: tempSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), label: item === null || item === void 0 ? void 0 : item[nameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onChange: e => handleTempSelected(e.target.checked, item === null || item === void 0 ? void 0 : item[userIdKey]) }))))));
+                        } },
+                        React.createElement(AccountListTitleGroup, { onClick: () => setOpenAccount(!openAccount) },
+                            React.createElement("div", null, state.accountText || 'Account'),
+                            React.createElement(Icon, { type: "icon-ants-expand-more", size: 20, color: "#595959", style: {
+                                    transform: openAccount ? 'rotate(180deg)' : 'rotate(0deg)',
+                                    transition: '0.3s',
+                                } }))),
+                    React.createElement("div", { id: "account-list" }))) : (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 160, width: "100%", style: { marginTop: 15 }, onScrollFrame: values => {
+                        if (values.top > POSITION_TOP && limit * page < (usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.length)) {
+                            setPage(page + 1);
+                        }
+                    } },
+                    React.createElement(AccountListContent, null, (_a = slice(usersDisplay, 0, limit * page)) === null || _a === void 0 ? void 0 : _a.map(item => (React.createElement(AccountItem, { key: item === null || item === void 0 ? void 0 : item[userIdKey], checked: tempSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), label: item === null || item === void 0 ? void 0 : item[nameKey], disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), onChange: e => handleTempSelected(e.target.checked, item === null || item === void 0 ? void 0 : item[userIdKey]) })))))))),
+        React.createElement(AccountListFooter, null,
+            React.createElement(Button, { onClick: () => handleCancel() }, state.cancelText || 'Cancel'),
+            React.createElement(Button, { type: "primary", onClick: () => handleApply() }, state.applyText || 'Apply'))));
+};
+export default memo(AccountList);

package/es/components/molecules/SelectAccount/ButtonAdd.d.ts

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

package/es/components/molecules/SelectAccount/ButtonAdd.js

@@ -0,0 +1,30 @@
+// Libraries
+import React, { useContext } from 'react';
+// Context
+import { SelectAccountContext } from './context';
+// Components
+import { ButtonAddStyled } from './styled';
+import { Icon, Popover } from '../../atoms';
+import AccountList from './AccountList';
+const ButtonAdd = () => {
+    var _a;
+    const { state, dispatch } = useContext(SelectAccountContext);
+    const handleClose = visible => {
+        if (!visible) {
+            dispatch({ type: 'CLOSE_ACCOUNT_LIST' });
+        }
+    };
+    const handleAfterClose = visible => {
+        if (!visible) {
+            dispatch({ type: 'UPDATE_SEARCH_TEXT', payload: '' });
+        }
+    };
+    return (React.createElement(Popover, { open: state.openAccountList, content: React.createElement(AccountList, null), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, destroyTooltipOnHide: true, onOpenChange: handleClose, afterOpenChange: handleAfterClose, placement: "bottomLeft" },
+        React.createElement(ButtonAddStyled, { className: "select-account-btn-add", style: Object.assign({}, (((_a = state === null || state === void 0 ? void 0 : state.styles) === null || _a === void 0 ? void 0 : _a.btnAdd) || {})), disabled: state.disabled || !state.isInitDone, onClick: () => state.openAccountList
+                ? dispatch({ type: 'CLOSE_ACCOUNT_LIST' })
+                : dispatch({ type: 'OPEN_ACCOUNT_LIST' }) },
+            React.createElement("div", { className: "icon" },
+                React.createElement(Icon, { type: "icon-ants-add", size: 10 })),
+            React.createElement("div", { className: "name" }, state.addText || 'Add account'))));
+};
+export default ButtonAdd;

package/es/components/molecules/SelectAccount/ButtonViewAll.d.ts

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

package/es/components/molecules/SelectAccount/ButtonViewAll.js

@@ -0,0 +1,35 @@
+// Libraries
+import React, { useContext } from 'react';
+// Context
+import { SelectAccountContext } from './context';
+// Components
+import { ButtonViewAllStyled, ViewAllWrapper } from './styled';
+import { Popover } from '../../atoms';
+import AccountChip from './AccountChip';
+const ButtonViewAll = () => {
+    const { state, dispatch } = useContext(SelectAccountContext);
+    const { usersSelected, nameKey, userIdKey, users, styles } = state;
+    const handleRemove = ({ userId, index }) => {
+        dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
+    };
+    const contentViewAll = () => (React.createElement(ViewAllWrapper, null,
+        state.showOwnerDefault && React.createElement(AccountChip, { label: "Owner", user: {}, value: "owner", disabled: true }),
+        state.type === 'group'
+            ? usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
+                const group = state.listAccountGroup.find(u => (u === null || u === void 0 ? void 0 : u[state === null || state === void 0 ? void 0 : state.groupIdKey]) === id);
+                if (!group) {
+                    const user = users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
+                    if (!user)
+                        return null;
+                    return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
+                }
+                return (React.createElement(AccountChip, { key: group === null || group === void 0 ? void 0 : group[state.groupIdKey], user: group, value: group === null || group === void 0 ? void 0 : group[state.groupIdKey], label: group === null || group === void 0 ? void 0 : group[state === null || state === void 0 ? void 0 : state.groupNameKey], onRemove: () => handleRemove({ userId: group === null || group === void 0 ? void 0 : group[state.groupIdKey], index }) }));
+            })
+            : usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
+                const user = users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
+                return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
+            })));
+    return (React.createElement(Popover, { content: () => contentViewAll(), trigger: "click", arrow: false, overlayInnerStyle: { padding: 0 }, destroyTooltipOnHide: true },
+        React.createElement(ButtonViewAllStyled, { className: "select-account-view-all", style: Object.assign({}, ((styles === null || styles === void 0 ? void 0 : styles.btnViewAll) || {})), type: "text" }, "View all")));
+};
+export default ButtonViewAll;

package/es/components/molecules/SelectAccount/Content.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Content: React.FC;

package/es/components/molecules/SelectAccount/Content.js

@@ -0,0 +1,43 @@
+// Libraries
+import React, { useContext } from 'react';
+// Context
+import { SelectAccountContext } from './context';
+// Components
+import { Wrapper } from './styled';
+import AccountChip from './AccountChip';
+import ButtonAdd from './ButtonAdd';
+import ButtonViewAll from './ButtonViewAll';
+export const Content = () => {
+    var _a;
+    const { state, dispatch } = useContext(SelectAccountContext);
+    const { usersSelected, nameKey, userIdKey, users, disabled, className, styles } = state;
+    const handleRemove = ({ userId, index }) => {
+        dispatch({ type: 'REMOVE_USER', payload: { userId, index } });
+    };
+    return (React.createElement(Wrapper, { className: `select-account ${className}`, style: Object.assign({}, ((styles === null || styles === void 0 ? void 0 : styles.wrapper) || {})), disabled: !!disabled },
+        state.showOwnerDefault && React.createElement(AccountChip, { label: "Owner", user: {}, value: "owner", disabled: true }),
+        state.type === 'group'
+            ? usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
+                var _a;
+                if (index >= (state === null || state === void 0 ? void 0 : state.limitShow))
+                    return null;
+                const group = (_a = state === null || state === void 0 ? void 0 : state.listAccountGroup) === null || _a === void 0 ? void 0 : _a.find(u => (u === null || u === void 0 ? void 0 : u[state === null || state === void 0 ? void 0 : state.groupIdKey]) === id);
+                if (!group) {
+                    const user = users === null || users === void 0 ? void 0 : users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
+                    if (!user)
+                        return null;
+                    return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
+                }
+                return (React.createElement(AccountChip, { key: group === null || group === void 0 ? void 0 : group[state.groupIdKey], user: group, value: group === null || group === void 0 ? void 0 : group[state.groupIdKey], label: group === null || group === void 0 ? void 0 : group[state === null || state === void 0 ? void 0 : state.groupNameKey], onRemove: () => handleRemove({ userId: group === null || group === void 0 ? void 0 : group[state.groupIdKey], index }) }));
+            })
+            : usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.map((id, index) => {
+                if (index >= (state === null || state === void 0 ? void 0 : state.limitShow))
+                    return null;
+                const user = users === null || users === void 0 ? void 0 : users.find(u => (u === null || u === void 0 ? void 0 : u[userIdKey]) === id);
+                if (!user)
+                    return null;
+                return (React.createElement(AccountChip, { key: user === null || user === void 0 ? void 0 : user[userIdKey], user: user, value: user === null || user === void 0 ? void 0 : user[userIdKey], label: user === null || user === void 0 ? void 0 : user[nameKey], onRemove: () => handleRemove({ userId: user === null || user === void 0 ? void 0 : user[userIdKey], index }) }));
+            }),
+        ((_a = state === null || state === void 0 ? void 0 : state.usersSelected) === null || _a === void 0 ? void 0 : _a.length) > (state === null || state === void 0 ? void 0 : state.limitShow) && React.createElement(ButtonViewAll, null),
+        !(state === null || state === void 0 ? void 0 : state.isViewMode) && (!(state === null || state === void 0 ? void 0 : state.onlyOne) || !(usersSelected === null || usersSelected === void 0 ? void 0 : usersSelected.length)) && React.createElement(ButtonAdd, null)));
+};

package/es/components/molecules/SelectAccount/context/SelectAccountContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SelectAccountProps, TContext } from '../type';
+export declare const SelectAccountContext: React.Context<TContext>;
+export declare const SelectAccountProvider: React.FC<React.PropsWithChildren<SelectAccountProps>>;

package/es/components/molecules/SelectAccount/context/SelectAccountContext.js

@@ -0,0 +1,72 @@
+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, { createContext, useEffect, useMemo, useReducer, useRef } from 'react';
+import { uniq, get } from 'lodash';
+// Reducer
+import { initialState, reducer } from './reducer';
+// Hooks
+import { useGetAbstractUsers } from '../hook';
+import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
+const initialContext = {
+    formListRef: { current: null },
+    state: initialState,
+    dispatch: () => { },
+};
+export const SelectAccountContext = createContext(initialContext);
+export const SelectAccountProvider = props => {
+    const { children, initData } = props, rest = __rest(props, ["children", "initData"]);
+    const [state, dispatch] = useReducer(reducer, Object.assign(Object.assign(Object.assign({}, initialState), rest), { usersSelected: [...(uniq(initData) || [])] }));
+    const changedRef = useRef(0);
+    const formListRef = useRef(null);
+    const contextValue = useMemo(() => ({ formListRef, state, dispatch }), [formListRef, state, dispatch]);
+    const { usersSelected, isInitDone, onChange } = state;
+    // Fetch users
+    const { isLoading, data } = useGetAbstractUsers({
+        queryFn: state.serviceAccounts,
+        params: state.paramsFetchUsers,
+        search: state.searchType === 'server' ? state.searchText : '',
+    });
+    useDeepCompareEffect(() => {
+        changedRef.current++;
+        dispatch({ type: 'UPDATE_USERS_SELECTED', payload: [...(uniq(initData) || [])] });
+    }, [initData]);
+    useEffect(() => {
+        dispatch({ type: 'INIT' });
+    }, []);
+    useEffect(() => {
+        dispatch({ type: 'UPDATE', payload: Object.assign({}, rest) });
+    }, [rest]);
+    useEffect(() => {
+        if (!isLoading && state.serviceAccounts) {
+            const newData = get(data, (state === null || state === void 0 ? void 0 : state.dataAccountsKey) || '', Array.isArray(data) ? data : []);
+            dispatch({
+                type: 'UPDATE_USERS',
+                payload: newData,
+            });
+            dispatch({ type: 'UPDATE_USERS_DISPLAY', payload: newData });
+        }
+    }, [data]);
+    // Callback OnChange
+    // useEffect(() => {
+    //   if (isInitDone && typeof onChange === 'function' && changedRef.current <= 0) {
+    //     onChange(
+    //       usersSelected,
+    //       state.users.filter(user => usersSelected.includes(user[state.userIdKey])),
+    //     );
+    //   }
+    //   if (changedRef.current > 0) {
+    //     changedRef.current--;
+    //   }
+    // }, [usersSelected]);
+    return (React.createElement(SelectAccountContext.Provider, { value: contextValue }, children));
+};

package/es/components/molecules/SelectAccount/context/index.d.ts

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

package/es/components/molecules/SelectAccount/context/index.js

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

package/es/components/molecules/SelectAccount/context/reducer.d.ts

@@ -0,0 +1,3 @@
+import { TAction, TState } from '../type';
+export declare const initialState: TState;
+export declare const reducer: (state: TState, action: TAction) => TState;