@antscorp/antsomi-ui 2.0.116 → 2.0.118

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

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

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

@@ -1,32 +1,35 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable react/jsx-no-constructed-context-values */
-import { useReducer } from 'react';
+import { memo, useReducer } from 'react';
+import isEqual from 'react-fast-compare';
 import { ShareAccessDispatchContext, ShareAccessStateContext } from './context';
 import { LayoutContent } from './components';
 import { shareAccessReducer } from './reducer';
 import { updateObjAccessInfo } from './actions';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks/useDeepCompareEffect';
-import { safeParseAccessInfo } from './utils';
-export const ShareAccess = (props) => {
-    const { accessInfo, excludeUserAccess, userId, onChange, userPermission } = props;
-    const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
+import { fromRaw, safeParseAccessInfo } from './utils';
+export const ShareAccess = memo((props) => {
+    const { accessInfo, rawAccessInfo, excludeUserAccess, userId, onChange, onRawChange, userPermission, isLoading, } = props;
+    const [state, dispatch] = useReducer(shareAccessReducer(onChange, onRawChange), {
         modalTransferOwnership: {
             open: false,
             userToOwnerShipId: -1,
         },
     });
     useDeepCompareEffect(() => {
-        if (!accessInfo)
+        const resolved = rawAccessInfo ? fromRaw(rawAccessInfo) : accessInfo;
+        if (!resolved)
             return;
         dispatch(updateObjAccessInfo({
-            updated: safeParseAccessInfo(accessInfo),
+            updated: safeParseAccessInfo(resolved),
             triggerOut: false,
         }));
-    }, [accessInfo]);
+    }, [accessInfo, rawAccessInfo]);
     return (_jsx(ShareAccessStateContext.Provider, { value: {
             ...state,
             excludeUserAccess,
             accessUserId: userId,
             accessUserPermission: userPermission,
+            isLoading,
         }, children: _jsx(ShareAccessDispatchContext.Provider, { value: dispatch, children: _jsx(LayoutContent, { ...props }) }) }));
-};
+}, isEqual);

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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+import { Spin } from '@antscorp/antsomi-ui/es/components/atoms';
 export const LayoutContent = (props) => {
     const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, hideTransferOwnership, } = props;
-    // const { state } = useShareAccess();
-    // const { allowEdit, allowView } = state;
-    // if (!allowEdit && !allowView) return null;
-    return (_jsxs(StyledLayoutContentRoot, { children: [allowAddUser && _jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }));
+    const { state } = useShareAccess();
+    const { isLoading } = state;
+    return (_jsx(Spin, { spinning: !!isLoading, children: _jsxs(StyledLayoutContentRoot, { children: [!isLoading && allowAddUser && (_jsx(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder })), _jsx(PeopleAccess, { excludeUserAccess: excludeUserAccess, hideTransferOwnership: hideTransferOwnership }), _jsx(GeneralAccess, { generalAccessSettings: generalAccessSettings }), _jsx(ModalTransferOwnership, {})] }) }));
 };

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

@@ -19,7 +19,7 @@ const ROLE_BY_ACTIONS = {
 export const PeopleAccess = (props) => {
     const { excludeUserAccess, hideTransferOwnership } = props;
     const { state, dispatch } = useShareAccess();
-    const { accessInfo, accessUserId, accessUserPermission } = state;
+    const { accessInfo, accessUserId, accessUserPermission, isLoading } = state;
     const dataSourceSorted = useMemo(() => {
         if (!Array.isArray(accessInfo?.listAccess))
             return [];
@@ -86,7 +86,7 @@ export const PeopleAccess = (props) => {
     };
     if (!accessInfo)
         return null;
-    return (_jsxs(StyledPeopleAccessRoot, { children: [_jsx("div", { className: "title", children: "People with access" }), _jsx(List, { dataSource: dataSourceSorted, loading: { spinning: dataSourceSorted.length === 0, indicator: _jsx(Spin, {}) }, renderItem: access => {
+    return (_jsxs(StyledPeopleAccessRoot, { children: [_jsx("div", { className: "title", children: "People with access" }), _jsx(List, { dataSource: dataSourceSorted, loading: { spinning: !!isLoading, indicator: _jsx(Spin, {}) }, renderItem: access => {
                     const actions = getActionsByUser({
                         userId: accessUserId,
                         updatedUserId: access.userId,

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

@@ -3,7 +3,8 @@ export declare const useShareAccess: () => {
     state: {
         allowEdit: boolean;
         allowView: boolean;
-        accessInfo?: import("../types").ObjectAccessInfo | undefined;
+        accessInfo?: import("..").ObjectAccessInfo | undefined;
+        isLoading?: boolean | undefined;
         accessUserId?: number | undefined;
         accessUserPermission?: {
             view: number;

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

@@ -1,3 +1,4 @@
 export { ShareAccess } from './ShareAccess';
 export * as Constants from './constants';
 export * as Utils from './utils';
+export type { ObjectAccessInfo, ObjectAccessInfoRaw, UserAccessInfo, UserAccessInfoRaw, ShareAccessProps, } from './types';

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

@@ -1,2 +1,2 @@
 import { ShareAccessAction, ShareAccessProps, ShareAccessState } from './types';
-export declare const shareAccessReducer: (onChange: ShareAccessProps['onChange']) => (state: ShareAccessState, action: ShareAccessAction) => ShareAccessState;
+export declare const shareAccessReducer: (onChange: ShareAccessProps['onChange'], onRawChange: ShareAccessProps['onRawChange']) => (state: ShareAccessState, action: ShareAccessAction) => ShareAccessState;

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

@@ -1,13 +1,15 @@
 import produce from 'immer';
 import { TYPES } from './actions';
-import { mappingOutData } from './utils';
-export const shareAccessReducer = (onChange) => (state, action) => produce(state, draft => {
+import { mappingOutData, toRaw } from './utils';
+export const shareAccessReducer = (onChange, onRawChange) => (state, action) => produce(state, draft => {
     switch (action.type) {
         case TYPES.UPDATE_OBJECT_ACCESS_INFO: {
             const { updated, triggerOut = true } = action.payload;
             draft.accessInfo = updated;
-            if (onChange && triggerOut) {
-                onChange(mappingOutData(action.payload.updated));
+            if (triggerOut) {
+                const mapped = mappingOutData(action.payload.updated);
+                onChange?.(mapped);
+                onRawChange?.(toRaw(mapped));
             }
             break;
         }

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

@@ -28,6 +28,19 @@ export type ObjectAccessInfo = {
     ownerId: number;
     listAccess: UserAccessInfo[];
 };
+export type UserAccessInfoRaw = {
+    user_id: number;
+    role: number;
+    allow_view: number;
+    allow_edit: number;
+    allow_comment: number;
+};
+export type ObjectAccessInfoRaw = {
+    is_public: number;
+    public_role: number | null;
+    owner_id?: number;
+    list_access: UserAccessInfoRaw[];
+};
 export type ActionKey = (typeof PEOPLE_ACTION_KEYS)[keyof typeof PEOPLE_ACTION_KEYS];
 export type ExcludeUserAccess = Array<ActionKey>;
 export type GeneralAccessSettings = {
@@ -40,16 +53,20 @@ export type ShareAccessProps = {
         view: number;
     };
     accessInfo?: ObjectAccessInfo;
+    isLoading?: boolean;
     allowAddUser?: boolean;
     placeholder?: string;
     excludeUserAccess?: ExcludeUserAccess;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
     generalAccessSettings?: GeneralAccessSettings;
     onChange?: (accessInfo: ObjectAccessInfo) => void;
+    rawAccessInfo?: ObjectAccessInfoRaw;
+    onRawChange?: (raw: ObjectAccessInfoRaw) => void;
     hideTransferOwnership?: boolean;
 };
 export type ShareAccessState = {
     accessInfo?: ObjectAccessInfo;
+    isLoading?: boolean;
     accessUserId?: number;
     accessUserPermission?: {
         view: number;

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

@@ -1,4 +1,4 @@
-import { ActionKey, ObjectAccessInfo, UserAccessInfo, UserInfo } from './types';
+import { ActionKey, ObjectAccessInfo, ObjectAccessInfoRaw, UserAccessInfo, UserInfo } from './types';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -54,6 +54,8 @@ export declare const safeParseAccessInfo: (accessInfo: ObjectAccessInfo) => {
     isPublic: number;
     publicRole: number | null;
 };
+export declare const fromRaw: (raw: ObjectAccessInfoRaw) => ObjectAccessInfo;
+export declare const toRaw: (info: ObjectAccessInfo) => ObjectAccessInfoRaw;
 export declare const mappingOutData: (shareAccess: ObjectAccessInfo) => {
     isPublic: number;
     publicRole: number | null;

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

@@ -90,6 +90,30 @@ export const safeParseAccessInfo = (accessInfo) => {
         listAccess: accessInfo?.listAccess?.map(user => ({ ...user, userId: +user.userId })),
     };
 };
+export const fromRaw = (raw) => ({
+    isPublic: raw.is_public,
+    publicRole: raw.public_role,
+    ownerId: raw.owner_id ?? -1,
+    listAccess: raw.list_access.map(u => ({
+        userId: u.user_id,
+        role: u.role,
+        allowView: u.allow_view,
+        allowEdit: u.allow_edit,
+        allowComment: u.allow_comment,
+    })),
+});
+export const toRaw = (info) => ({
+    is_public: info.isPublic,
+    public_role: info.publicRole,
+    owner_id: info.ownerId,
+    list_access: info.listAccess.map(u => ({
+        user_id: u.userId,
+        role: u.role,
+        allow_view: u.allowView,
+        allow_edit: u.allowEdit,
+        allow_comment: u.allowComment,
+    })),
+});
 export const mappingOutData = (shareAccess) => {
     const result = { ...shareAccess };
     result.listAccess = result.listAccess.map(accessInfo => {

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

@@ -23,6 +23,7 @@ export { IconSelectionRenderer } from './IconSelection/components/Icon';
 export { AlignSetting } from './AlignSetting';
 export { EdgeSetting } from './EdgeSetting';
 export { ShareAccess, Constants as ShareAccessConstants, Utils as ShareAccessUtils, } from './ShareAccess';
+export type { ObjectAccessInfo, ObjectAccessInfoRaw, UserAccessInfo, UserAccessInfoRaw, ShareAccessProps, } from './ShareAccess';
 export { Collapse } from './Collapse';
 export { TreeSelect } from './TreeSelect';
 export { Card } from './Card';

package/package.json

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