@antscorp/antsomi-ui 1.3.7-beta.49 → 1.3.7-beta.50

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

@@ -1,34 +1,34 @@
 import styled from 'styled-components';
-export const StyledSearchUserRoot = styled.div `
-  width: 100%;
-
-  .antsomi-select {
-    width: 100%;
-
-    /* move to global css (for autocomplete) */
-    /* .antsomi-select-selector {
-      border: none !important;
-    } */
-  }
+export const StyledSearchUserRoot = styled.div `
+  width: 100%;
+
+  .antsomi-select {
+    width: 100%;
+
+    /* move to global css (for autocomplete) */
+    /* .antsomi-select-selector {
+      border: none !important;
+    } */
+  }
 `;
-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;
-  }
+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/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,16 @@
 import produce from 'immer';
-import { mappingOutData } from './utils';
 import { TYPES } from './constants';
-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

@@ -27,28 +27,50 @@ 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;
         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

@@ -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/SliderWithInputNumber/styled.js

@@ -2,6 +2,6 @@
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const SliderWithInputNumberWrapper = styled.div `
-  font-size: ${THEME.token?.fontSize}px;
+export const SliderWithInputNumberWrapper = styled.div `
+  font-size: ${THEME.token?.fontSize}px;
 `;

package/es/components/molecules/Tabs/Tabs.js

@@ -1,14 +1,14 @@
 import { Tabs as AntdTabs } from 'antd';
 import styled from 'styled-components';
-export const Tabs = styled(AntdTabs) `
-  position: relative;
-  z-index: 1;
-
-  > .antsomi-tabs-nav {
-    ${({ shadow }) => (shadow ? 'box-shadow: 0px 3px 3px 0px #002E591A;' : '')}
-  }
-
-  .antsomi-tabs-tab-btn {
-    text-shadow: none !important;
-  }
+export const Tabs = styled(AntdTabs) `
+  position: relative;
+  z-index: 1;
+
+  > .antsomi-tabs-nav {
+    ${({ shadow }) => (shadow ? 'box-shadow: 0px 3px 3px 0px #002E591A;' : '')}
+  }
+
+  .antsomi-tabs-tab-btn {
+    text-shadow: none !important;
+  }
 `;

package/es/components/molecules/TagifyInput/TagifyInput.js

@@ -563,21 +563,21 @@ const TagifyInput = forwardRef((props, ref) => {
             }
         }
         const additionalTagAttrs = getAttributesString(additionalAttributes);
-        return `
-        <tag
-          contenteditable='false'
-          spellcheck='false'
-          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
-          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
-          ${tagify.getAttributes(tagData)}
-          ${additionalTagAttrs}
-        >
-          ${closeIcon}
-
+        return `
+        <tag
+          contenteditable='false'
+          spellcheck='false'
+          tabIndex="${settings.a11y.focusableTags ? 0 : -1}"
+          class="${settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
+          ${tagify.getAttributes(tagData)}
+          ${additionalTagAttrs}
+        >
+          ${closeIcon}
+
           ${generateTagContent({
             tagData,
             content: visibleTagContent,
-        })}
+        })}
         </tag>`;
     }, []);
     /*
@@ -1086,44 +1086,44 @@ const TagifyInput = forwardRef((props, ref) => {
         if (!tagifyTooltip) {
             const style = document.createElement('style');
             style.type = 'text/css';
-            style.appendChild(document.createTextNode(`
-          .tagify__tooltip {
-            display: none;
-            position: fixed;
-            background-color: #595959;
-            border-radius: 10px;
-            color: #ffffff;
-            padding: 6px;
-            z-index: 10000;
-            max-width: 280px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-          }
-
-          .tagify__tooltip_content {
-            width: 100%;
-            max-width: 250px;
-            height: auto;
-            position: relative;
-            transition: 0s;
-            font-size: 12px;
-            line-height: 16px;
-            text-align: center;
-            word-wrap: break-word;
-            white-space: normal;
-          }
-
-          .tagify__tooltip_content:before {
-            content: '';
-            position: absolute;
-            top: 100%;
-            right: 50%;
-            left: auto;
-            background-color: #595959;
-            width: 10px;
-            height: 10px;
-            transform: rotate(45deg) translate(50%,-50%);
-            border-radius: 1px;
-          }
+            style.appendChild(document.createTextNode(`
+          .tagify__tooltip {
+            display: none;
+            position: fixed;
+            background-color: #595959;
+            border-radius: 10px;
+            color: #ffffff;
+            padding: 6px;
+            z-index: 10000;
+            max-width: 280px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+          }
+
+          .tagify__tooltip_content {
+            width: 100%;
+            max-width: 250px;
+            height: auto;
+            position: relative;
+            transition: 0s;
+            font-size: 12px;
+            line-height: 16px;
+            text-align: center;
+            word-wrap: break-word;
+            white-space: normal;
+          }
+
+          .tagify__tooltip_content:before {
+            content: '';
+            position: absolute;
+            top: 100%;
+            right: 50%;
+            left: auto;
+            background-color: #595959;
+            width: 10px;
+            height: 10px;
+            transform: rotate(45deg) translate(50%,-50%);
+            border-radius: 1px;
+          }
         `));
             document.head.appendChild(style);
             const tooltipWrapper = document.createElement('div');

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

@@ -5,49 +5,49 @@ import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { MIN_H_WRAPPER } from './constants';
 // Utils
 import { getBackgroundInputStatus, getTagifyInputStyled, getTagifyStyled, getTagifyTagStyled, } from './utils.style';
-export const WrapperPlaceHolder = styled.div `
+export const WrapperPlaceHolder = styled.div `
   ${({ $isShow }) => $isShow
-    ? css `
-          display: block;
-          float: right;
-          min-height: ${MIN_H_WRAPPER}px;
+    ? css `
+          display: block;
+          float: right;
+          min-height: ${MIN_H_WRAPPER}px;
         `
-    : css `
-          display: none;
-        `};
+    : css `
+          display: none;
+        `};
 `;
-export const TagifyWrapper = styled.div `
-  cursor: text;
-  background: ${globalToken?.bw0};
-  border-bottom: 1px solid ${({ $status }) => getBackgroundInputStatus($status)};
-  min-height: ${MIN_H_WRAPPER}px;
-  width: 100%;
-
-  &::after {
-    content: '';
-    display: block;
-    clear: both;
-  }
-
-  .tagify {
+export const TagifyWrapper = styled.div `
+  cursor: text;
+  background: ${globalToken?.bw0};
+  border-bottom: 1px solid ${({ $status }) => getBackgroundInputStatus($status)};
+  min-height: ${MIN_H_WRAPPER}px;
+  width: 100%;
+
+  &::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+
+  .tagify {
     ${({ $cssTagifyVariables }) => $cssTagifyVariables &&
     Object.entries($cssTagifyVariables)
         .map(([key, value]) => `${key}: ${value};`)
-        .join('\n')}
-
-    // --- Section tagify style ---
-    ${getTagifyStyled}
-
-    // --- Section input style ---
-    &__input {
-      ${getTagifyInputStyled}
-    }
-
-    // --- Section tag style ---
-    &__tag {
-      ${getTagifyTagStyled}
-    }
-  }
+        .join('\n')}
+
+    // --- Section tagify style ---
+    ${getTagifyStyled}
+
+    // --- Section input style ---
+    &__input {
+      ${getTagifyInputStyled}
+    }
+
+    // --- Section tag style ---
+    &__tag {
+      ${getTagifyTagStyled}
+    }
+  }
 `;
 export const TagInput = styled.input ``;
 export const TagTextArea = styled.textarea ``;

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

@@ -381,15 +381,15 @@ export const emojiManufacturer = (text, collectionType) => {
         return [];
     }
 };
-export const getEmojiTag = ({ src, emoji, code }) => `
-  <img
-    src="${src}"
-    data-emoji="${emoji}"
-    data-emoji-code="${code}"
-    alt="${emoji}"
-    width="16px"
-    height="16px"
-    style="transform: translateY(3.5px); cursor: text;"
+export const getEmojiTag = ({ src, emoji, code }) => `
+  <img
+    src="${src}"
+    data-emoji="${emoji}"
+    data-emoji-code="${code}"
+    alt="${emoji}"
+    width="16px"
+    height="16px"
+    style="transform: translateY(3.5px); cursor: text;"
   />`;
 export const isPersonalizeTagType = (type) => [
     CUSTOMER,
@@ -484,10 +484,10 @@ export const generateTagContent = (params) => {
     dataAttrs.forEach((value, key) => {
         dataAttrsString = dataAttrsString.concat(` data-${key}="${value}"`);
     });
-    return `
-    <div ${dataAttrsString} class="tagify__tag-content">
-      ${content}
-    </div>
+    return `
+    <div ${dataAttrsString} class="tagify__tag-content">
+      ${content}
+    </div>
   `;
 };
 /**