@antscorp/antsomi-ui 1.3.3-beta.47 → 1.3.3-beta.49

package/es/components/molecules/ShareAccess/components/PeopleAccess/PeopleAccess.js

@@ -1,92 +1,92 @@
-import Icon from '@antscorp/icons';
-import { produce } from 'immer';
-import { Avatar, Dropdown, List } from 'antd';
-import { remove } from 'lodash';
-import React from 'react';
-import { ACCESS_PROPERTIES_BY_ROLE, PEOPLE_ACTION_KEYS, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from '../../constants';
-import { useShareAccess } from '../../hooks';
-import { getActionsByUser } from '../../utils';
-import { StyledPeopleAccessRoot } from './styled';
-import { updateModalTransferOwnership, updateObjAccessInfo } from '../../actions';
-const ROLE_BY_ACTIONS = {
-    [PEOPLE_ACTION_KEYS.TO_OWNER]: ROLE_MAPPING.OWNER,
-    [PEOPLE_ACTION_KEYS.TO_EDITOR]: ROLE_MAPPING.EDITOR,
-    [PEOPLE_ACTION_KEYS.TO_VIEWER]: ROLE_MAPPING.VIEWER,
-};
-export const PeopleAccess = (props) => {
-    const { allowChangeOnwership } = props;
-    const { state, dispatch } = useShareAccess();
-    const { accessInfo, userAccess } = state;
-    const handleClickAction = (actKey, updatedUserId) => {
-        if (!accessInfo || !dispatch)
-            return;
-        const updatedUserIndex = accessInfo.listAccess.findIndex(access => access.userId === updatedUserId);
-        if (updatedUserIndex === -1)
-            return;
-        let needDispatchUpdate = false;
-        const updated = produce(accessInfo, draft => {
-            switch (actKey) {
-                case PEOPLE_ACTION_KEYS.TO_OWNER: {
-                    dispatch(updateModalTransferOwnership({
-                        open: true,
-                        userToOwnerShipId: updatedUserId,
-                    }));
-                    break;
-                }
-                case PEOPLE_ACTION_KEYS.TO_EDITOR:
-                case PEOPLE_ACTION_KEYS.TO_VIEWER: {
-                    draft.listAccess[updatedUserIndex] = Object.assign(Object.assign({}, accessInfo.listAccess[updatedUserIndex]), ACCESS_PROPERTIES_BY_ROLE[ROLE_BY_ACTIONS[actKey]]);
-                    needDispatchUpdate = true;
-                    break;
-                }
-                case PEOPLE_ACTION_KEYS.REMOVE_ACCESS: {
-                    draft === null || draft === void 0 ? void 0 : draft.listAccess.splice(updatedUserIndex, 1);
-                    needDispatchUpdate = true;
-                    break;
-                }
-                default:
-                    break;
-            }
-        });
-        if (!needDispatchUpdate)
-            return;
-        dispatch(updateObjAccessInfo(updated));
-    };
-    const renderActionItems = (actions) => {
-        let hasDivider = false;
-        return actions.flatMap(act => {
-            const items = [];
-            const needDivider = PEOPLE_ACTION_KEYS.REMOVE_ACCESS === act.key || PEOPLE_ACTION_KEYS.TO_OWNER === act.key;
-            if (needDivider && !hasDivider) {
-                items.push({ type: 'divider' });
-                items.push({ key: act.key, label: act.label });
-                hasDivider = true;
-                return items;
-            }
-            items.push({ key: act.key, label: act.label });
-            return items;
-        });
-    };
-    if (!accessInfo || !userAccess)
-        return null;
-    return (React.createElement(StyledPeopleAccessRoot, null,
-        React.createElement("div", { className: "title" }, "People with access"),
-        React.createElement(List, { dataSource: accessInfo.listAccess, renderItem: access => {
-                const actions = getActionsByUser(userAccess.userId, access.userId, accessInfo);
-                if (!allowChangeOnwership) {
-                    remove(actions, act => act.key === PEOPLE_ACTION_KEYS.TO_OWNER);
-                }
-                return (React.createElement(List.Item, null,
-                    React.createElement(Avatar, { src: access.avatar }),
-                    React.createElement("div", { className: "info" },
-                        React.createElement("div", { className: "name" }, access.fullName),
-                        React.createElement("div", { className: "email" }, access.email)),
-                    React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, menu: {
-                            items: renderActionItems(actions),
-                            onClick: e => handleClickAction(e.key, access.userId),
-                        } },
-                        React.createElement("div", { className: "role-actions" },
-                            React.createElement("div", { className: "role" }, ROLE_ACCESS_LABEL[access.role] || ''),
-                            !!actions.length && (React.createElement(Icon, { type: "icon-ants-angle-down", style: { fontSize: 10 } }))))));
-            } })));
-};
+import Icon from '@antscorp/icons';
+import { produce } from 'immer';
+import { Avatar, Dropdown, List } from 'antd';
+import { remove } from 'lodash';
+import React from 'react';
+import { ACCESS_PROPERTIES_BY_ROLE, PEOPLE_ACTION_KEYS, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from '../../constants';
+import { useShareAccess } from '../../hooks';
+import { getActionsByUser } from '../../utils';
+import { StyledPeopleAccessRoot } from './styled';
+import { updateModalTransferOwnership, updateObjAccessInfo } from '../../actions';
+const ROLE_BY_ACTIONS = {
+    [PEOPLE_ACTION_KEYS.TO_OWNER]: ROLE_MAPPING.OWNER,
+    [PEOPLE_ACTION_KEYS.TO_EDITOR]: ROLE_MAPPING.EDITOR,
+    [PEOPLE_ACTION_KEYS.TO_VIEWER]: ROLE_MAPPING.VIEWER,
+};
+export const PeopleAccess = (props) => {
+    const { allowChangeOnwership } = props;
+    const { state, dispatch } = useShareAccess();
+    const { accessInfo, userAccess } = state;
+    const handleClickAction = (actKey, updatedUserId) => {
+        if (!accessInfo || !dispatch)
+            return;
+        const updatedUserIndex = accessInfo.listAccess.findIndex(access => access.userId === updatedUserId);
+        if (updatedUserIndex === -1)
+            return;
+        let needDispatchUpdate = false;
+        const updated = produce(accessInfo, draft => {
+            switch (actKey) {
+                case PEOPLE_ACTION_KEYS.TO_OWNER: {
+                    dispatch(updateModalTransferOwnership({
+                        open: true,
+                        userToOwnerShipId: updatedUserId,
+                    }));
+                    break;
+                }
+                case PEOPLE_ACTION_KEYS.TO_EDITOR:
+                case PEOPLE_ACTION_KEYS.TO_VIEWER: {
+                    draft.listAccess[updatedUserIndex] = Object.assign(Object.assign({}, accessInfo.listAccess[updatedUserIndex]), ACCESS_PROPERTIES_BY_ROLE[ROLE_BY_ACTIONS[actKey]]);
+                    needDispatchUpdate = true;
+                    break;
+                }
+                case PEOPLE_ACTION_KEYS.REMOVE_ACCESS: {
+                    draft === null || draft === void 0 ? void 0 : draft.listAccess.splice(updatedUserIndex, 1);
+                    needDispatchUpdate = true;
+                    break;
+                }
+                default:
+                    break;
+            }
+        });
+        if (!needDispatchUpdate)
+            return;
+        dispatch(updateObjAccessInfo(updated));
+    };
+    const renderActionItems = (actions) => {
+        let hasDivider = false;
+        return actions.flatMap(act => {
+            const items = [];
+            const needDivider = PEOPLE_ACTION_KEYS.REMOVE_ACCESS === act.key || PEOPLE_ACTION_KEYS.TO_OWNER === act.key;
+            if (needDivider && !hasDivider) {
+                items.push({ type: 'divider' });
+                items.push({ key: act.key, label: act.label });
+                hasDivider = true;
+                return items;
+            }
+            items.push({ key: act.key, label: act.label });
+            return items;
+        });
+    };
+    if (!accessInfo)
+        return null;
+    return (React.createElement(StyledPeopleAccessRoot, null,
+        React.createElement("div", { className: "title" }, "People with access"),
+        React.createElement(List, { dataSource: accessInfo.listAccess, renderItem: access => {
+                const actions = getActionsByUser(userAccess === null || userAccess === void 0 ? void 0 : userAccess.userId, access.userId, accessInfo);
+                if (!allowChangeOnwership) {
+                    remove(actions, act => act.key === PEOPLE_ACTION_KEYS.TO_OWNER);
+                }
+                return (React.createElement(List.Item, null,
+                    React.createElement(Avatar, { src: access.avatar }),
+                    React.createElement("div", { className: "info" },
+                        React.createElement("div", { className: "name" }, access.fullName),
+                        React.createElement("div", { className: "email" }, access.email)),
+                    React.createElement(Dropdown, { trigger: ['click'], disabled: !actions.length, menu: {
+                            items: renderActionItems(actions),
+                            onClick: e => handleClickAction(e.key, access.userId),
+                        } },
+                        React.createElement("div", { className: "role-actions" },
+                            React.createElement("div", { className: "role" }, ROLE_ACCESS_LABEL[access.role] || ''),
+                            !!actions.length && (React.createElement(Icon, { type: "icon-ants-angle-down", style: { fontSize: 10 } }))))));
+            } })));
+};

package/es/components/molecules/ShareAccess/components/PeopleAccess/index.d.ts

@@ -1 +1 @@
-export * from './PeopleAccess';
+export * from './PeopleAccess';

package/es/components/molecules/ShareAccess/components/PeopleAccess/index.js

@@ -1 +1 @@
-export * from './PeopleAccess';
+export * from './PeopleAccess';

package/es/components/molecules/ShareAccess/components/PeopleAccess/styled.d.ts

@@ -1 +1 @@
-export declare const StyledPeopleAccessRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledPeopleAccessRoot: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/ShareAccess/components/PeopleAccess/styled.js

@@ -1,46 +1,46 @@
-import styled from 'styled-components';
-export const StyledPeopleAccessRoot = styled.div `
-  display: flex;
-  flex-direction: column;
-
-  .title {
-    margin-bottom: 12px;
-    font-weight: bold;
-  }
-
-  .antsomi-list {
-    border: 1px solid #e6e6e6;
-
-    .antsomi-list-items {
-      padding: 0;
-
-      .antsomi-list-item {
-        padding: 8px;
-        border: none;
-
-        .info {
-          flex: 1;
-          margin-left: 15px;
-
-          .name {
-            font-weight: bold;
-          }
-
-          .email {
-            color: #595959;
-          }
-        }
-
-        .role-actions {
-          display: flex;
-          align-items: center;
-          gap: 4px;
-
-          &:hover {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-`;
+import styled from 'styled-components';
+export const StyledPeopleAccessRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    margin-bottom: 12px;
+    font-weight: bold;
+  }
+
+  .antsomi-list {
+    border: 1px solid #e6e6e6;
+
+    .antsomi-list-items {
+      padding: 0;
+
+      .antsomi-list-item {
+        padding: 8px;
+        border: none;
+
+        .info {
+          flex: 1;
+          margin-left: 15px;
+
+          .name {
+            font-weight: bold;
+          }
+
+          .email {
+            color: #595959;
+          }
+        }
+
+        .role-actions {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+`;

package/es/components/molecules/ShareAccess/components/SearchUser/SearchUser.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ShareAccessProps } from '../../types';
-type SearchUserProps = Pick<ShareAccessProps, 'getUserInfo'>;
-export declare const SearchUser: (props: SearchUserProps) => React.JSX.Element;
-export {};
+import React from 'react';
+import { ShareAccessProps } from '../../types';
+type SearchUserProps = Pick<ShareAccessProps, 'getUserInfo'>;
+export declare const SearchUser: (props: SearchUserProps) => React.JSX.Element | null;
+export {};

package/es/components/molecules/ShareAccess/components/SearchUser/SearchUser.js

@@ -1,71 +1,73 @@
-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());
-    });
-};
-import React, { useEffect, useState } from 'react';
-import { Avatar, Select } from 'antd';
-import { useDebounce } from 'use-debounce';
-import { StyledSearchUserRoot, StyledSelectItem } from './styled';
-import { isEmail } from '@antscorp/antsomi-ui/es/utils';
-import { useShareAccess } from '../../hooks';
-import { produce } from 'immer';
-import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
-import { updateObjAccessInfo } from '../../actions';
-export const SearchUser = (props) => {
-    const { getUserInfo } = props;
-    const { state, dispatch } = useShareAccess();
-    const { accessInfo } = state;
-    const [users, setUsers] = useState([]);
-    const [isFetching, setIsFetching] = useState(false);
-    const [searchTerm, setSearchTerm] = useState('');
-    const [debounceSearchTerm] = useDebounce(searchTerm, 700);
-    useEffect(() => {
-        if (!isEmail(debounceSearchTerm) || !getUserInfo)
-            return;
-        const controller = new AbortController();
-        (() => __awaiter(void 0, void 0, void 0, function* () {
-            try {
-                setIsFetching(true);
-                const data = yield getUserInfo(debounceSearchTerm, controller.signal);
-                setUsers(data);
-            }
-            catch (error) {
-                setUsers([]);
-            }
-            finally {
-                setIsFetching(false);
-            }
-        }))();
-        return () => {
-            controller.abort();
-        };
-    }, [debounceSearchTerm, getUserInfo]);
-    const handleAddUser = (user) => {
-        if (!accessInfo || !dispatch)
-            return;
-        setSearchTerm('');
-        const existed = accessInfo.listAccess.some(access => access.userId === +user.user_id);
-        if (existed)
-            return;
-        const updated = produce(accessInfo, draft => {
-            const defaultViewerProps = ACCESS_PROPERTIES_BY_ROLE[ROLE_MAPPING.VIEWER];
-            const newUser = Object.assign({ userId: user.user_id, fullName: user.full_name, email: user.email, avatar: user.avatar }, defaultViewerProps);
-            draft.listAccess.push(newUser);
-        });
-        dispatch(updateObjAccessInfo(updated));
-    };
-    return (React.createElement(StyledSearchUserRoot, null,
-        React.createElement(Select, { showSearch: true, placeholder: "Add people and group.", value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (users || []).map(user => ({
-                value: user.user_id,
-                label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
-                    React.createElement(Avatar, { src: user.avatar }),
-                    React.createElement("div", { className: "info" },
-                        React.createElement("div", { className: "name" }, user.user_name),
-                        React.createElement("div", { className: "email" }, user.email)))),
-            })) })));
-};
+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());
+    });
+};
+import React, { useEffect, useState } from 'react';
+import { Avatar, Select } from 'antd';
+import { useDebounce } from 'use-debounce';
+import { StyledSearchUserRoot, StyledSelectItem } from './styled';
+import { isEmail } from '@antscorp/antsomi-ui/es/utils';
+import { useShareAccess } from '../../hooks';
+import { produce } from 'immer';
+import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
+import { updateObjAccessInfo } from '../../actions';
+export const SearchUser = (props) => {
+    const { getUserInfo } = props;
+    const { state, dispatch } = useShareAccess();
+    const { accessInfo, allowEdit } = state;
+    const [users, setUsers] = useState([]);
+    const [isFetching, setIsFetching] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [debounceSearchTerm] = useDebounce(searchTerm, 700);
+    useEffect(() => {
+        if (!isEmail(debounceSearchTerm) || !getUserInfo)
+            return;
+        const controller = new AbortController();
+        (() => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                setIsFetching(true);
+                const data = yield getUserInfo(debounceSearchTerm, controller.signal);
+                setUsers(data);
+            }
+            catch (error) {
+                setUsers([]);
+            }
+            finally {
+                setIsFetching(false);
+            }
+        }))();
+        return () => {
+            controller.abort();
+        };
+    }, [debounceSearchTerm, getUserInfo]);
+    const handleAddUser = (user) => {
+        if (!accessInfo || !dispatch || !allowEdit)
+            return;
+        setSearchTerm('');
+        const existed = accessInfo.listAccess.some(access => access.userId === +user.user_id);
+        if (existed)
+            return;
+        const updated = produce(accessInfo, draft => {
+            const defaultViewerProps = ACCESS_PROPERTIES_BY_ROLE[ROLE_MAPPING.VIEWER];
+            const newUser = Object.assign({ userId: user.user_id, fullName: user.full_name, email: user.email, avatar: user.avatar }, defaultViewerProps);
+            draft.listAccess.push(newUser);
+        });
+        dispatch(updateObjAccessInfo(updated));
+    };
+    if (!allowEdit)
+        return null;
+    return (React.createElement(StyledSearchUserRoot, null,
+        React.createElement(Select, { showSearch: true, placeholder: "Add people and group.", value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (users || []).map(user => ({
+                value: user.user_id,
+                label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
+                    React.createElement(Avatar, { src: user.avatar }),
+                    React.createElement("div", { className: "info" },
+                        React.createElement("div", { className: "name" }, user.user_name),
+                        React.createElement("div", { className: "email" }, user.email)))),
+            })) })));
+};

package/es/components/molecules/ShareAccess/components/SearchUser/index.d.ts

@@ -1 +1 @@
-export * from './SearchUser';
+export * from './SearchUser';

package/es/components/molecules/ShareAccess/components/SearchUser/index.js

@@ -1 +1 @@
-export * from './SearchUser';
+export * from './SearchUser';

package/es/components/molecules/ShareAccess/components/SearchUser/styled.d.ts

@@ -1,2 +1,2 @@
-export declare const StyledSearchUserRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledSelectItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSearchUserRoot: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSelectItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/ShareAccess/components/SearchUser/styled.js

@@ -1,29 +1,29 @@
-import styled from 'styled-components';
-export const StyledSearchUserRoot = styled.div `
-  width: 100%;
-
-  .antsomi-select {
-    width: 100%;
-  }
-`;
-export const StyledSelectItem = styled.div `
-  display: flex;
-  justify-content: left;
-  align-items: center;
-  gap: 8px;
-
-  .info {
-    .name {
-      font-weight: bold;
-    }
-
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  :hover {
-    background-color: #f2f9ff;
-    cursor: pointer;
-  }
-`;
+import styled from 'styled-components';
+export const StyledSearchUserRoot = styled.div `
+  width: 100%;
+
+  .antsomi-select {
+    width: 100%;
+  }
+`;
+export const StyledSelectItem = styled.div `
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 8px;
+
+  .info {
+    .name {
+      font-weight: bold;
+    }
+
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  :hover {
+    background-color: #f2f9ff;
+    cursor: pointer;
+  }
+`;

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

@@ -1 +1 @@
-export * from './LayoutContent';
+export * from './LayoutContent';

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

@@ -1 +1 @@
-export * from './LayoutContent';
+export * from './LayoutContent';