@antscorp/antsomi-ui 1.3.3-beta.86 → 1.3.3-beta.87

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

@@ -1,20 +1,20 @@
-// Libraries
-import React, { memo } from 'react';
-import classNames from 'classnames';
-// Atoms
-import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
-// Styled
-import { StyledSettingWrapper } from './styled';
-export const SettingWrapper = memo(props => {
-    // Props
-    const { label, className, labelClassName, containerStyle, labelStyle, labelColor, vertical, children, } = props;
-    return (React.createElement(StyledSettingWrapper, { className: className, vertical: vertical, style: containerStyle },
-        label && (React.createElement(Text, { className: classNames(labelClassName), color: labelColor, style: labelStyle, title: label }, label)),
-        React.createElement("div", { style: { flexShrink: 0 } }, children)));
-});
-SettingWrapper.defaultProps = {
-    label: '',
-    className: '',
-    labelColor: '#666666',
-    labelClassName: '',
-};
+// Libraries
+import React, { memo } from 'react';
+import classNames from 'classnames';
+// Atoms
+import { Text } from '@antscorp/antsomi-ui/es/components/atoms';
+// Styled
+import { StyledSettingWrapper } from './styled';
+export const SettingWrapper = memo(props => {
+    // Props
+    const { label, className, labelClassName, containerStyle, labelStyle, labelColor, vertical, children, } = props;
+    return (React.createElement(StyledSettingWrapper, { className: className, vertical: vertical, style: containerStyle },
+        label && (React.createElement(Text, { className: classNames(labelClassName), color: labelColor, style: labelStyle, title: label }, label)),
+        React.createElement("div", { style: { flexShrink: 0 } }, children)));
+});
+SettingWrapper.defaultProps = {
+    label: '',
+    className: '',
+    labelColor: '#666666',
+    labelClassName: '',
+};

package/es/components/molecules/SettingWrapper/styled.d.ts

@@ -1,5 +1,5 @@
-interface StyledSettingWrapperProps {
-    vertical?: boolean;
-}
-export declare const StyledSettingWrapper: import("styled-components").StyledComponent<"div", any, StyledSettingWrapperProps, never>;
-export {};
+interface StyledSettingWrapperProps {
+    vertical?: boolean;
+}
+export declare const StyledSettingWrapper: import("styled-components").StyledComponent<"div", any, StyledSettingWrapperProps, never>;
+export {};

package/es/components/molecules/SettingWrapper/styled.js

@@ -1,17 +1,17 @@
-// Libraries
-import styled, { css } from 'styled-components';
-export const StyledSettingWrapper = styled.div `
-  display: flex;
-
-  ${props => props.vertical
-    ? css `
-          flex-direction: column;
-          margin-top: 5px;
-          margin-bottom: 5px;
-        `
-    : css `
-          align-items: center;
-          justify-content: space-between;
-          flex-wrap: wrap;
-        `}
-`;
+// Libraries
+import styled, { css } from 'styled-components';
+export const StyledSettingWrapper = styled.div `
+  display: flex;
+
+  ${props => props.vertical
+    ? css `
+          flex-direction: column;
+          margin-top: 5px;
+          margin-bottom: 5px;
+        `
+    : css `
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: wrap;
+        `}
+`;

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

@@ -1,16 +1,16 @@
-import React from 'react';
-import { SettingWrapperProps } from '../SettingWrapper';
-import { PopoverProps } from 'antd';
-export type SettingWrapperPopoverProps = {
-    label: string;
-    wrapperProps?: Omit<SettingWrapperProps, 'label'>;
-    popoverProps?: Omit<PopoverProps, 'content'>;
-    iconPopover?: React.ReactNode;
-};
-/**
- * Renders a popover wrapper for a setting.
- *
- * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
- * @returns {React.ReactElement} The rendered popover wrapper.
- */
-export declare const SettingWrapperPopover: React.FC<React.PropsWithChildren<SettingWrapperPopoverProps>>;
+import React from 'react';
+import { SettingWrapperProps } from '../SettingWrapper';
+import { PopoverProps } from 'antd';
+export type SettingWrapperPopoverProps = {
+    label: string;
+    wrapperProps?: Omit<SettingWrapperProps, 'label'>;
+    popoverProps?: Omit<PopoverProps, 'content'>;
+    iconPopover?: React.ReactNode;
+};
+/**
+ * Renders a popover wrapper for a setting.
+ *
+ * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
+ * @returns {React.ReactElement} The rendered popover wrapper.
+ */
+export declare const SettingWrapperPopover: React.FC<React.PropsWithChildren<SettingWrapperPopoverProps>>;

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

@@ -1,17 +1,17 @@
-import React from 'react';
-import { SettingWrapper } from '../SettingWrapper';
-import { Button, Icon, Popover } from '../../atoms';
-/**
- * Renders a popover wrapper for a setting.
- *
- * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
- * @returns {React.ReactElement} The rendered popover wrapper.
- */
-export const SettingWrapperPopover = ({ label, children, wrapperProps, popoverProps, iconPopover, }) => {
-    var _a, _b;
-    return (React.createElement(SettingWrapper, Object.assign({ label: label, labelStyle: Object.assign({ fontWeight: 'bold' }, ((_a = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.labelStyle) !== null && _a !== void 0 ? _a : {})) }, (wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {})),
-        React.createElement(Popover, Object.assign({ content: children, trigger: ['click'], overlayInnerStyle: Object.assign({ padding: '12px 16px', minWidth: 288, maxHeight: '90vh', overflow: 'auto' }, ((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.overlayInnerStyle) !== null && _b !== void 0 ? _b : {})) }, (popoverProps !== null && popoverProps !== void 0 ? popoverProps : {})), iconPopover)));
-};
-SettingWrapperPopover.defaultProps = {
-    iconPopover: React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-edit-2" }), type: "text" }),
-};
+import React from 'react';
+import { SettingWrapper } from '../SettingWrapper';
+import { Button, Icon, Popover } from '../../atoms';
+/**
+ * Renders a popover wrapper for a setting.
+ *
+ * @param {React.PropsWithChildren<SettingWrapperPopoverProps>} props - The props object containing the label, children, wrapperProps and popoverProps.
+ * @returns {React.ReactElement} The rendered popover wrapper.
+ */
+export const SettingWrapperPopover = ({ label, children, wrapperProps, popoverProps, iconPopover, }) => {
+    var _a, _b;
+    return (React.createElement(SettingWrapper, Object.assign({ label: label, labelStyle: Object.assign({ fontWeight: 'bold' }, ((_a = wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.labelStyle) !== null && _a !== void 0 ? _a : {})) }, (wrapperProps !== null && wrapperProps !== void 0 ? wrapperProps : {})),
+        React.createElement(Popover, Object.assign({ content: children, trigger: ['click'], overlayInnerStyle: Object.assign({ padding: '12px 16px', minWidth: 288, maxHeight: '90vh', overflow: 'auto' }, ((_b = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.overlayInnerStyle) !== null && _b !== void 0 ? _b : {})) }, (popoverProps !== null && popoverProps !== void 0 ? popoverProps : {})), iconPopover)));
+};
+SettingWrapperPopover.defaultProps = {
+    iconPopover: React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-edit-2" }), type: "text" }),
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ShareAccessProps } from './types';
+export declare const ShareAccess: (props: ShareAccessProps) => React.JSX.Element;

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

@@ -0,0 +1,23 @@
+/* eslint-disable react/jsx-no-constructed-context-values */
+import React, { useEffect, useReducer } from 'react';
+import { ShareAccessDispatchContext, ShareAccessStateContext } from './context';
+import { LayoutContent } from './components';
+import { shareAccessReducer } from './reducer';
+import { updateObjAccessInfo } from './actions';
+export const ShareAccess = (props) => {
+    const { accessInfo, userId, onChange, userPermission } = props;
+    const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
+        modalTransferOwnership: {
+            open: false,
+            userToOwnerShipId: -1,
+        },
+    });
+    useEffect(() => {
+        if (!accessInfo)
+            return;
+        dispatch(updateObjAccessInfo(accessInfo));
+    }, [accessInfo]);
+    return (React.createElement(ShareAccessStateContext.Provider, { value: Object.assign(Object.assign({}, state), { accessUserId: userId, accessUserPermission: userPermission }) },
+        React.createElement(ShareAccessDispatchContext.Provider, { value: dispatch },
+            React.createElement(LayoutContent, Object.assign({}, props)))));
+};

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

@@ -0,0 +1,16 @@
+import { ObjectAccessInfo, ShareAccessState } from './types';
+export declare const TYPES: {
+    readonly UPDATE_OBJECT_ACCESS_INFO: "UPDATE_OBJECT_ACCESS_INFO";
+    readonly UPDATE_MODAL_TRANSTER_OWNERSHIP: "UPDATE_MODAL_TRANSTER_OWNERSHIP";
+};
+export declare const updateObjAccessInfo: (objectAccessInfo: ObjectAccessInfo) => {
+    type: "UPDATE_OBJECT_ACCESS_INFO";
+    payload: ObjectAccessInfo;
+};
+export declare const updateModalTransferOwnership: (modalState: Partial<ShareAccessState['modalTransferOwnership']>) => {
+    type: "UPDATE_MODAL_TRANSTER_OWNERSHIP";
+    payload: Partial<{
+        open: boolean;
+        userToOwnerShipId: number;
+    }>;
+};

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

@@ -0,0 +1,12 @@
+export const TYPES = {
+    UPDATE_OBJECT_ACCESS_INFO: 'UPDATE_OBJECT_ACCESS_INFO',
+    UPDATE_MODAL_TRANSTER_OWNERSHIP: 'UPDATE_MODAL_TRANSTER_OWNERSHIP',
+};
+export const updateObjAccessInfo = (objectAccessInfo) => ({
+    type: TYPES.UPDATE_OBJECT_ACCESS_INFO,
+    payload: objectAccessInfo,
+});
+export const updateModalTransferOwnership = (modalState) => ({
+    type: TYPES.UPDATE_MODAL_TRANSTER_OWNERSHIP,
+    payload: modalState,
+});

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GeneralAccess: () => React.JSX.Element | null;

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

@@ -0,0 +1,78 @@
+import Icon from '@antscorp/icons';
+import { Dropdown } from 'antd';
+import produce from 'immer';
+import React from 'react';
+import { updateObjAccessInfo } from '../../actions';
+import { GENERAL_ACCESS, PUBLIC_ROLE, ROLE_ACCESS_LABEL } from '../../constants';
+import { useShareAccess } from '../../hooks';
+import { StyledGeneralAccessRoot } from './styled';
+export const GeneralAccess = () => {
+    const { state, dispatch } = useShareAccess();
+    const { accessInfo, allowEdit } = state;
+    if (!accessInfo)
+        return null;
+    const { isPublic, publicRole } = accessInfo;
+    const handleChangeGeneralAccess = (value) => {
+        if (!accessInfo || !dispatch || !allowEdit)
+            return;
+        const updated = produce(accessInfo, draft => {
+            draft.isPublic = value;
+            if (!isPublic && value === GENERAL_ACCESS.PUBLIC) {
+                draft.publicRole = PUBLIC_ROLE.ONLY_VIEWER;
+            }
+        });
+        dispatch(updateObjAccessInfo(updated));
+    };
+    const handleChangePublicRole = (value) => {
+        if (!accessInfo || !dispatch || !allowEdit)
+            return;
+        const updated = produce(accessInfo, draft => {
+            draft.publicRole = value;
+        });
+        dispatch(updateObjAccessInfo(updated));
+    };
+    const renderDescription = () => {
+        let description = 'Only people with access can open this item.';
+        if (isPublic && publicRole === PUBLIC_ROLE.ONLY_VIEWER) {
+            description = 'Anyone on the portal can view this item.';
+        }
+        if (isPublic && publicRole === PUBLIC_ROLE.ONLY_EDITOR) {
+            description = 'Anyone on the portal can edit this item.';
+        }
+        return description;
+    };
+    return (React.createElement(StyledGeneralAccessRoot, null,
+        React.createElement("div", { className: "title" }, "General access"),
+        React.createElement("div", { className: "setting" },
+            React.createElement(Icon, { className: "accessable-icon", type: isPublic ? 'icon-ants-mui-lock-open' : 'icon-ants-mui-lock' }),
+            React.createElement("div", { className: "general-info" },
+                React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+                        items: [
+                            isPublic
+                                ? { key: GENERAL_ACCESS.RESTRICTED, label: React.createElement("div", null, "Restricted ") }
+                                : { key: GENERAL_ACCESS.PUBLIC, label: React.createElement("div", null, "Public") },
+                        ],
+                        onClick: v => handleChangeGeneralAccess(+v.key),
+                    } },
+                    React.createElement("div", { className: "general-dropdown-wrapper" },
+                        React.createElement("div", { className: "accessable-title" }, isPublic ? 'Public' : 'Restricted'),
+                        allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" }))),
+                React.createElement("div", { className: "description" }, renderDescription())),
+            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit, menu: {
+                    items: [
+                        publicRole === PUBLIC_ROLE.ONLY_VIEWER
+                            ? {
+                                key: PUBLIC_ROLE.ONLY_EDITOR,
+                                label: ROLE_ACCESS_LABEL[PUBLIC_ROLE.ONLY_EDITOR],
+                            }
+                            : {
+                                key: PUBLIC_ROLE.ONLY_VIEWER,
+                                label: ROLE_ACCESS_LABEL[PUBLIC_ROLE.ONLY_VIEWER],
+                            },
+                    ],
+                    onClick: v => handleChangePublicRole(+v.key),
+                } },
+                React.createElement("div", { className: "public-role-dropdown-wrapper" },
+                    React.createElement("div", { className: "for-title" }, ROLE_ACCESS_LABEL[publicRole]),
+                    allowEdit && React.createElement(Icon, { className: "icon-angle", type: "icon-ants-angle-down" })))))));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,57 @@
+var _a;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const StyledGeneralAccessRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    margin-bottom: 12px;
+    font-weight: bold;
+  }
+
+  .setting {
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid #e6e6e6;
+    padding: 8px;
+
+    .icon-angle {
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+    }
+
+    .accessable-icon {
+      font-size: 28px;
+      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+      display: flex;
+      align-items: center;
+    }
+
+    .general-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-left: 15px;
+
+      .general-dropdown-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        width: fit-content;
+
+        .accessable-title {
+          font-weight: bold;
+        }
+      }
+    }
+
+    .public-role-dropdown-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+`;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ShareAccessProps } from '../../types';
+export declare const LayoutContent: (props: ShareAccessProps) => React.JSX.Element | null;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useShareAccess } from '../../hooks';
+import { GeneralAccess } from '../GeneralAccess';
+import { ModalTransferOwnership } from '../ModalTransferOwnerShip/ModalTransferOwnerShip';
+import { PeopleAccess } from '../PeopleAccess';
+import { SearchUser } from '../SearchUser';
+import { StyledLayoutContentRoot } from './styled';
+export const LayoutContent = (props) => {
+    const { getUserInfo, allowChangeOnwership = true } = props;
+    const { state } = useShareAccess();
+    const { allowEdit, allowView } = state;
+    if (!allowEdit && !allowView)
+        return null;
+    return (React.createElement(StyledLayoutContentRoot, null,
+        React.createElement(SearchUser, { getUserInfo: getUserInfo }),
+        React.createElement(PeopleAccess, { allowChangeOnwership: allowChangeOnwership }),
+        React.createElement(GeneralAccess, null),
+        React.createElement(ModalTransferOwnership, null)));
+};

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

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

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

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

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

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

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+export const StyledLayoutContentRoot = styled.div `
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+`;

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

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

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

@@ -0,0 +1,43 @@
+import { Button } from 'antd';
+import produce from 'immer';
+import React from 'react';
+import { updateModalTransferOwnership, updateObjAccessInfo } from '../../actions';
+import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
+import { useShareAccess } from '../../hooks';
+import { StyledModal } from './styled';
+export const ModalTransferOwnership = () => {
+    const { state, dispatch } = useShareAccess();
+    const { modalTransferOwnership, accessInfo } = state;
+    const handleClose = () => {
+        if (!dispatch)
+            return;
+        dispatch(updateModalTransferOwnership({
+            open: false,
+            userToOwnerShipId: -1,
+        }));
+    };
+    const handleTransfer = () => {
+        if (!dispatch || !accessInfo)
+            return;
+        let needUpdate = true;
+        const updated = produce(accessInfo, draft => {
+            const { userToOwnerShipId } = modalTransferOwnership;
+            const { listAccess } = accessInfo;
+            const ownerIndex = listAccess.findIndex(acc => acc.role === ROLE_MAPPING.OWNER);
+            const userUpdatedIndex = listAccess.findIndex(acc => acc.userId === userToOwnerShipId);
+            if (ownerIndex === -1 || userUpdatedIndex === -1) {
+                needUpdate = false;
+            }
+            draft.listAccess[ownerIndex] = Object.assign(Object.assign({}, listAccess[ownerIndex]), ACCESS_PROPERTIES_BY_ROLE[ROLE_MAPPING.EDITOR]);
+            draft.listAccess[userUpdatedIndex] = Object.assign(Object.assign({}, listAccess[userUpdatedIndex]), ACCESS_PROPERTIES_BY_ROLE[ROLE_MAPPING.OWNER]);
+            draft.ownerId = userToOwnerShipId;
+        });
+        if (needUpdate) {
+            dispatch(updateObjAccessInfo(updated));
+        }
+        handleClose();
+    };
+    return (React.createElement(StyledModal, { closable: false, open: modalTransferOwnership.open, title: "Make this account the owner?", footer: React.createElement(React.Fragment, null,
+            React.createElement(Button, { type: "primary", onClick: handleTransfer }, "Select"),
+            React.createElement(Button, { onClick: handleClose }, "Cancel")) }, "The new owner could remove you. You also might lose the ability to change share settings. Some people will lose access to this item unless this item is shared direcly with them."));
+};

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

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const StyledModal: import("styled-components").StyledComponent<import("react").FC<import("antd").ModalProps> & import("antd/es/modal/confirm").ModalStaticFunctions & {
+    useModal: typeof import("antd/es/modal/useModal").default;
+    destroyAll: () => void;
+    config: typeof import("antd/es/modal/confirm").modalGlobalConfig;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/modal/PurePanel").PurePanelProps) => import("react").JSX.Element;
+}, any, {}, never>;

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

@@ -0,0 +1,18 @@
+import { Modal } from 'antd';
+import styled from 'styled-components';
+export const StyledModal = styled(Modal) `
+  &.antsomi-modal {
+    .antsomi-modal-content {
+      .antsomi-modal-header,
+      .antsomi-modal-body {
+        padding: 12px 12px 0 12px;
+      }
+
+      .antsomi-modal-footer {
+        display: flex;
+        justify-content: flex-start;
+        padding: 10px 12px;
+      }
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,97 @@
+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, accessUserId, accessUserPermission } = 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({
+                    userId: accessUserId,
+                    updatedUserId: access.userId,
+                    objectAccessInfo: accessInfo,
+                    userPermission: accessUserPermission,
+                });
+                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

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

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

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

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

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