@antscorp/antsomi-ui 1.3.5-beta.415 → 1.3.5-beta.416

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

@@ -1,6 +1,8 @@
 var _a, _b, _c;
+// Libraries
 import styled from 'styled-components';
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// Constants
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const HeaderV2Styled = styled.div `
   height: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.headerHeight};
   background-color: #f6f8fc;
@@ -42,6 +44,7 @@ export const HeaderV2Styled = styled.div `
     font-size: 20px;
     line-height: 23px;
     font-weight: bold;
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorTextBase};
   }
 `;
 export const LogoWrapper = styled.div `

package/es/components/molecules/ModalSelect/Card.js

@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { CardDefinationContainer, CardRecommendedContainer, RecommendItem, StyledCard, } from './styled';
-import { Typography } from 'antd';
+import { Tooltip, Typography } from 'antd';
 import clsx from 'clsx';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { Text, Paragraph } = Typography;
@@ -20,22 +20,42 @@ export const Card = (props) => {
     return (React.createElement(StyledCard, Object.assign({ bordered: bordered }, rest), children));
 };
 export const CardDefination = (props) => {
+    const refreshKey = useRef(0);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [expandable, setExpandable] = useState(true);
     const { title, description, descriptionEllipsis = {
         rows: 3,
         symbol: 'Learn more',
-        expandable: true,
         tooltip: true,
     }, } = props;
+    useEffect(() => {
+        if (!expandable) {
+            setExpandable(true);
+        }
+    }, [expandable]);
+    const handleCollapse = () => {
+        refreshKey.current += 1;
+        setExpandable(false);
+    };
     return (React.createElement(CardDefinationContainer, null,
         title && React.createElement(Text, { className: "title" }, title),
-        description && (React.createElement(Paragraph, { ellipsis: descriptionEllipsis, className: "description" }, description))));
+        description && (React.createElement(Paragraph, { key: refreshKey.current, ellipsis: Object.assign(Object.assign({}, descriptionEllipsis), { expandable, onExpand: () => setIsExpanded(true) }), className: "description" },
+            description,
+            isExpanded && (React.createElement("span", { className: "antsomi-typography-collapse", onClick: handleCollapse }, "View less"))))));
 };
 export const CardRecommended = (props) => {
     const { title, recomendations = [] } = props;
     return (React.createElement(CardRecommendedContainer, null,
         title && React.createElement(Text, { className: "title" }, title),
         React.createElement("div", { className: "recomendations" }, recomendations.map(i => {
-            const { className, color = globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue2, bordered = false } = i;
-            return (React.createElement(RecommendItem, Object.assign({}, i, { key: i.key, color: color, bordered: bordered, className: clsx('item', className) })));
+            const { description, className, color = globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue2, bordered = false } = i;
+            const item = (React.createElement(RecommendItem, Object.assign({}, i, { key: i.key, color: color, bordered: bordered, className: clsx('item', className) })));
+            if (typeof description === 'string') {
+                return (React.createElement(Tooltip, { title: description, placement: "top" }, item));
+            }
+            if (description) {
+                return React.createElement(Tooltip, Object.assign({}, description), item);
+            }
+            return item;
         }))));
 };

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

@@ -125,6 +125,12 @@ export const CardDefinationContainer = styled.div `
     .antsomi-typography-expand {
       font-weight: 500;
     }
+
+    .antsomi-typography-collapse {
+      font-weight: 500;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary};
+      cursor: pointer;
+    }
   }
 `;
 export const CardRecommendedContainer = styled.div `

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

@@ -1,6 +1,7 @@
 import React, { RefCallback } from 'react';
 import { MenuProps, ModalProps, TagProps } from 'antd';
 import { EllipsisConfig } from 'antd/es/typography/Base';
+import { TooltipProps } from 'antd/lib';
 export type ModalSelectProps = {
     open?: boolean;
     value?: string;
@@ -23,5 +24,6 @@ export type CardRecommendedProps = {
     title?: string;
     recomendations?: (TagProps & {
         key?: React.Key;
+        description?: string | TooltipProps;
     })[];
 };

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

@@ -17,7 +17,7 @@ export declare const ROLE_ACCESS_LABEL: {
     2: string;
     3: string;
 };
-export declare const ACCESS_PROPERTIES_BY_ROLE: Record<AccessRole, Pick<UserAccessInfo, 'role' | 'allowView' | 'allowEdit' | 'allowComment' | 'accessType'>>;
+export declare const ACCESS_PROPERTIES_BY_ROLE: Record<AccessRole, Pick<UserAccessInfo, 'role' | 'allowView' | 'allowEdit' | 'allowComment'>>;
 export declare const PEOPLE_ACTION_KEYS: {
     readonly TO_VIEWER: "to_viewer";
     readonly TO_EDITOR: "to_editor";

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

@@ -22,30 +22,18 @@ export const ACCESS_PROPERTIES_BY_ROLE = {
         allowView: 1,
         allowEdit: 1,
         allowComment: 1,
-        accessType: {
-            label: ROLE_ACCESS_LABEL[ROLE_MAPPING.OWNER],
-            value: ROLE_ACCESS_LABEL[ROLE_MAPPING.OWNER].toLowerCase(),
-        },
     },
     [ROLE_MAPPING.EDITOR]: {
         role: ROLE_MAPPING.EDITOR,
         allowView: 1,
         allowEdit: 1,
         allowComment: 1,
-        accessType: {
-            label: ROLE_ACCESS_LABEL[ROLE_MAPPING.EDITOR],
-            value: ROLE_ACCESS_LABEL[ROLE_MAPPING.EDITOR].toLowerCase(),
-        },
     },
     [ROLE_MAPPING.VIEWER]: {
         role: ROLE_MAPPING.VIEWER,
         allowView: 1,
         allowEdit: 0,
         allowComment: 0,
-        accessType: {
-            label: ROLE_ACCESS_LABEL[ROLE_MAPPING.VIEWER],
-            value: ROLE_ACCESS_LABEL[ROLE_MAPPING.VIEWER].toLowerCase(),
-        },
     },
 };
 export const PEOPLE_ACTION_KEYS = {

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

@@ -1,11 +1,12 @@
 import produce from 'immer';
 import { TYPES } from './actions';
+import { mappingOutData } from './utils';
 export const shareAccessReducer = (onChange) => (state, action) => produce(state, draft => {
     switch (action.type) {
         case TYPES.UPDATE_OBJECT_ACCESS_INFO: {
             draft.accessInfo = action.payload;
             if (onChange) {
-                onChange(action.payload);
+                onChange(mappingOutData(action.payload));
             }
             break;
         }

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

@@ -13,17 +13,13 @@ export type UserInfo = {
 };
 export type UserAccessInfo = {
     userId: number;
-    fullName: string;
-    email: string;
-    avatar: string;
+    fullName?: string;
+    email?: string;
+    avatar?: string;
     role: number;
     allowView: number;
     allowEdit: number;
     allowComment: number;
-    accessType: {
-        label: string;
-        value: string;
-    };
     [key: string]: any;
 };
 export type ObjectAccessInfo = {

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

@@ -1,4 +1,4 @@
-import { ObjectAccessInfo, UserInfo } from './types';
+import { ObjectAccessInfo, UserAccessInfo, UserInfo } from './types';
 export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
 export declare const composeObjectMenuPermissions: (params: {
     isPublic: boolean;
@@ -41,18 +41,20 @@ export declare const formattedAccessInfo: (accessInfo: ObjectAccessInfo) => {
     ownerId: number;
     listAccess: {
         userId: number;
-        fullName: string;
-        email: string;
-        avatar: string;
+        fullName?: string | undefined;
+        email?: string | undefined;
+        avatar?: string | undefined;
         role: number;
         allowView: number;
         allowEdit: number;
         allowComment: number;
-        accessType: {
-            label: string;
-            value: string;
-        };
     }[];
     isPublic: number;
     publicRole: number | null;
 };
+export declare const mappingOutData: (shareAccess: ObjectAccessInfo) => {
+    isPublic: number;
+    publicRole: number | null;
+    ownerId: number;
+    listAccess: UserAccessInfo[];
+};

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

@@ -59,10 +59,7 @@ export const getActionsByUser = (args) => {
 export const initAccessInfoDefault = (userInfo) => ({
     ownerId: +(userInfo === null || userInfo === void 0 ? void 0 : userInfo.user_id),
     listAccess: [
-        Object.assign(Object.assign({}, snakeCaseToCamelCase(userInfo)), { role: ROLE_MAPPING.OWNER, allowView: 1, allowEdit: 1, allowComment: 1, accessType: {
-                label: ROLE_ACCESS_LABEL[ROLE_MAPPING.OWNER],
-                value: ROLE_ACCESS_LABEL[ROLE_MAPPING.OWNER].toLowerCase(),
-            } }),
+        Object.assign(Object.assign({}, snakeCaseToCamelCase(userInfo)), { role: ROLE_MAPPING.OWNER, allowView: 1, allowEdit: 1, allowComment: 1 }),
     ],
     publicRole: PUBLIC_ROLE.ONLY_VIEWER,
     isPublic: 0,
@@ -71,3 +68,17 @@ export const formattedAccessInfo = (accessInfo) => {
     var _a;
     return (Object.assign(Object.assign({}, accessInfo), { ownerId: +((accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.ownerId) || -1), listAccess: (_a = accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess) === null || _a === void 0 ? void 0 : _a.map(user => (Object.assign(Object.assign({}, user), { userId: +user.userId }))) }));
 };
+export const mappingOutData = (shareAccess) => {
+    const result = Object.assign({}, shareAccess);
+    result.listAccess = result.listAccess.map(accessInfo => {
+        const roleLabel = ROLE_ACCESS_LABEL[accessInfo.role];
+        if (typeof roleLabel === 'string') {
+            accessInfo.accessType = {
+                label: roleLabel,
+                value: roleLabel.toLowerCase(),
+            };
+        }
+        return accessInfo;
+    });
+    return result;
+};

package/package.json

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