@antscorp/antsomi-ui 2.0.117 → 2.0.119

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

@@ -7,23 +7,24 @@ 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';
+import { fromRaw, safeParseAccessInfo } from './utils';
 export const ShareAccess = memo((props) => {
-    const { accessInfo, excludeUserAccess, userId, onChange, userPermission, isLoading } = props;
-    const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
+    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,

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

@@ -5,10 +5,9 @@ import { ModalTransferOwnership } from '../ModalTransferOwnerShip/ModalTransferO
 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 { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, hideTransferOwnership, className, } = props;
     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, {})] }) }));
+    return (_jsxs(StyledLayoutContentRoot, { className: className, 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/hooks/useShareAccess.d.ts

@@ -3,7 +3,7 @@ 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?: {

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,16 @@
 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;
+            // console.log({ action });
             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,12 +28,30 @@ export type ObjectAccessInfo = {
     ownerId: number;
     listAccess: UserAccessInfo[];
 };
+export type UserAccessInfoRaw = {
+    user_id: number;
+    role: number;
+    allow_view: number;
+    allow_edit: number;
+    allow_comment: number;
+    full_name?: string;
+    email?: string;
+    avatar?: string;
+    [key: string]: any;
+};
+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 = {
     publicOnlyWith?: boolean;
 };
 export type ShareAccessProps = {
+    className?: string;
     userId?: number;
     userPermission?: {
         edit: number;
@@ -47,6 +65,8 @@ export type ShareAccessProps = {
     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 = {

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

@@ -1,5 +1,5 @@
 import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, REGEX_REMOVE_NAME, ROLE_ACCESS_LABEL, ROLE_MAPPING, } from './constants';
-import { remove } from 'lodash';
+import { remove, mapKeys, camelCase, snakeCase } from 'lodash';
 import { snakeCaseToCamelCase } from '@antscorp/antsomi-ui/es/utils';
 export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
     const valueMapping = {
@@ -87,9 +87,42 @@ export const safeParseAccessInfo = (accessInfo) => {
     return {
         ...accessInfo,
         ownerId: +(ownerId || -1),
-        listAccess: accessInfo?.listAccess?.map(user => ({ ...user, userId: +user.userId })),
+        listAccess: accessInfo?.listAccess?.map(user => ({
+            ...user,
+            userId: +user.userId,
+            role: +user.role,
+            allowView: +user.allowView,
+            allowEdit: +user.allowEdit,
+            allowComment: +user.allowComment,
+        })),
     };
 };
+export const fromRaw = (raw) => ({
+    isPublic: raw.is_public,
+    publicRole: raw.public_role,
+    ownerId: raw.owner_id ?? -1,
+    listAccess: raw.list_access.map(u => ({
+        ...mapKeys(u, (_v, key) => camelCase(key)),
+        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 => ({
+        ...mapKeys(u, (_v, key) => snakeCase(key)),
+        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.117",
+  "version": "2.0.119",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",