@antscorp/antsomi-ui 1.3.5-beta.540 → 1.3.5-beta.541

package/es/components/atoms/Iframe/Iframe.d.ts

@@ -0,0 +1,4 @@
+import React, { IframeHTMLAttributes } from 'react';
+export interface IframeProps extends IframeHTMLAttributes<HTMLIFrameElement> {
+}
+export declare const Iframe: React.FC<IframeProps>;

package/es/components/atoms/Iframe/Iframe.js

@@ -0,0 +1,63 @@
+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 clsx from 'clsx';
+import React, { useEffect, useRef } from 'react';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Styled
+import styled from 'styled-components';
+const StyledIframe = styled.iframe `
+  border: none;
+`;
+export const Iframe = props => {
+    const { children, className } = props, restProps = __rest(props, ["children", "className"]);
+    // Ref
+    const iframeRef = useRef(null);
+    // Effects
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        const handleLoad = () => {
+            var _a;
+            const iframeDoc = iframe.contentDocument || ((_a = iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
+            const style = document.createElement('style');
+            style.innerHTML = `
+         ::-webkit-scrollbar {
+            background-color: transparent;
+            width: 4px;
+          }
+          ::-webkit-scrollbar-thumb {
+            background-color: transparent;
+            border-radius: 4px;
+          }
+
+          *:hover {
+            &::-webkit-scrollbar-thumb {
+              background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.gray5};
+            }
+          }
+      `;
+            if (iframeDoc) {
+                iframeDoc.head.appendChild(style);
+            }
+        };
+        if (iframe) {
+            iframe.addEventListener('load', handleLoad);
+        }
+        return () => {
+            if (iframe) {
+                iframe.removeEventListener('load', handleLoad);
+            }
+        };
+    }, []);
+    return (React.createElement(StyledIframe, Object.assign({}, restProps, { className: clsx('antsomi-iframe', className), ref: iframeRef })));
+};

package/es/components/atoms/Iframe/index.d.ts

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

package/es/components/atoms/Iframe/index.js

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

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

@@ -50,7 +50,7 @@ const AccountList = () => {
                     React.createElement("div", { id: "account-list" }))) : (React.createElement(AccountListContent, { style: { marginTop: 15 } }, usersDisplay === null || usersDisplay === void 0 ? void 0 : usersDisplay.map(item => (React.createElement(CheckboxStyled, { key: item === null || item === void 0 ? void 0 : item[userIdKey], name: item === null || item === void 0 ? void 0 : item[userIdKey], value: typeof (item === null || item === void 0 ? void 0 : item[userIdKey]), disabled: disabledAccount === null || disabledAccount === void 0 ? void 0 : disabledAccount.includes(item === null || item === void 0 ? void 0 : item[userIdKey]), defaultChecked: usersSelected.includes(item === null || item === void 0 ? void 0 : item[userIdKey]) },
                     React.createElement(TextLabel, null, item === null || item === void 0 ? void 0 : item[nameKey])))))))),
         React.createElement(AccountListFooter, null,
-            React.createElement(Button, { onClick: () => handleCancel() }, "Cancel"),
-            React.createElement(Button, { type: "primary", onClick: () => handleApply() }, "Apply"))));
+            React.createElement(Button, { onClick: () => handleCancel() }, state.cancelText || 'Cancel'),
+            React.createElement(Button, { type: "primary", onClick: () => handleApply() }, state.applyText || 'Apply'))));
 };
 export default AccountList;

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

@@ -25,6 +25,6 @@ const ButtonAdd = () => {
                 : dispatch({ type: 'OPEN_ACCOUNT_LIST' }) },
             React.createElement("div", { className: "icon" },
                 React.createElement(Icon, { type: "icon-ants-add", size: 10 })),
-            React.createElement("div", { className: "name" }, "Add account"))));
+            React.createElement("div", { className: "name" }, state.addText || 'Add account'))));
 };
 export default ButtonAdd;

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

@@ -57,13 +57,16 @@ export const SelectAccountProvider = props => {
         }
     }, [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]);
+    // 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/reducer.js

@@ -1,6 +1,6 @@
 import produce from 'immer';
 import { parseValue } from '../utils';
-import { intersection, union } from 'lodash';
+import { difference, union } from 'lodash';
 export const initialState = {
     isInitDone: false,
     searchText: '',
@@ -60,12 +60,34 @@ export const reducer = (state, action) => produce(state, draft => {
             for (const element of disabledElements) {
                 element.disabled = true;
             }
+            // Convert FormData to object
             const entriesFormData = Object.fromEntries(formData);
-            const selected = Object.keys(Object.fromEntries(formData)).map(key => parseValue(key, entriesFormData[key].toString()));
-            draft.usersSelected = [
-                ...(union(intersection(draft.usersSelected, selected), selected) || []),
-            ];
+            // Get new select from form data
+            const selected = Object.keys(entriesFormData).map(key => parseValue(key, entriesFormData[key].toString()));
+            // Get all display when search
+            const allDisplay = [];
+            allDisplay.push(...draft.usersDisplay.map(user => user[draft.userIdKey]));
+            if (draft.type === 'group') {
+                allDisplay.push(...draft.listAccountGroupDisplay.map(user => user[draft.groupIdKey]));
+            }
+            // Get unselected from all display
+            const unSelected = difference(allDisplay, selected);
+            // Get selected remaining
+            const selectedRemain = difference(draft.usersSelected, unSelected);
+            // Merge selected remaining and selected
+            draft.usersSelected = [...(union(selectedRemain, selected) || [])];
             draft.openAccountList = false;
+            // handle change
+            if (typeof draft.onChange === 'function') {
+                const optionUsersSelected = [...state.users].filter(user => draft.usersSelected.includes(user[state.userIdKey]));
+                const optionGroupSelected = state.type === 'group'
+                    ? [...state.listAccountGroup].filter(group => draft.usersSelected.includes(group[state.groupIdKey]))
+                    : [];
+                draft.onChange(draft.usersSelected, [
+                    ...(optionUsersSelected || []),
+                    ...(optionGroupSelected || []),
+                ]);
+            }
             break;
         }
         case 'UPDATE_USERS':
@@ -111,6 +133,17 @@ export const reducer = (state, action) => produce(state, draft => {
                 const clone = [...draft.usersSelected];
                 const newSelected = [...clone.slice(0, index), ...clone.slice(index + 1)];
                 draft.usersSelected = newSelected;
+                // handle change
+                if (typeof draft.onChange === 'function') {
+                    const optionUsersSelected = [...state.users].filter(user => draft.usersSelected.includes(user[state.userIdKey]));
+                    const optionGroupSelected = state.type === 'group'
+                        ? [...state.listAccountGroup].filter(group => draft.usersSelected.includes(group[state.groupIdKey]))
+                        : [];
+                    draft.onChange(draft.usersSelected, [
+                        ...(optionUsersSelected || []),
+                        ...(optionGroupSelected || []),
+                    ]);
+                }
             }
             break;
         default:

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

@@ -19,5 +19,8 @@ SelectAccount.defaultProps = {
     dataAccountsKey: 'data',
     className: '',
     styles: {},
+    addText: 'Add account',
+    applyText: 'Apply',
+    cancelText: 'Cancel',
 };
 export default SelectAccount;

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

@@ -37,6 +37,9 @@ export type SelectAccountProps = {
     };
     nameKey: string;
     userIdKey: string;
+    addText?: string;
+    applyText?: string;
+    cancelText?: string;
     onChange?: (idSelected: Array<string | number>, users: Record<string, any>) => void;
 } & (SelectAccountWithUsers | SelectAccountWithApi) & (AccountProps | GroupAccountProps);
 export type TState = SelectAccountProps & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.540",
+  "version": "1.3.5-beta.541",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",