@antscorp/antsomi-ui 1.3.5-beta.98 → 1.3.5-common.2

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

@@ -0,0 +1,135 @@
+var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+// Libraries
+import styled from 'styled-components';
+// Antd components
+import { Tag, Select as AntdSelect } from 'antd';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const SelectWrapper = styled.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+`;
+export const StyledSelect = styled(AntdSelect) `
+  font-family: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.fontFamily};
+
+  .antsomi-select-arrow {
+    display: flex;
+    align-items: center;
+    color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorTextBase} !important;
+  }
+
+  &.antsomi-select-open {
+    .antsomi-select-selector {
+      background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue0};
+      --tw-shadow: 0 1px 0 0 ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary} !important;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow) !important;
+    }
+  }
+
+  &.antsomi-select-single:not(.antsomi-select-customize-input) .antsomi-select-selector {
+    height: 30px;
+  }
+
+  .antsomi-select-selector {
+    justify-content: space-between;
+    min-height: 30px;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-weight: 400;
+    font-size: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.fontSize}px;
+    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorTextBase};
+    transition: all 0.3s ease-in;
+
+    &:hover {
+      background: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue0};
+    }
+
+    height: ${props => { var _a; return ((_a = props.className) === null || _a === void 0 ? void 0 : _a.includes('select-auto-height')) && 'auto'; }};
+    border-radius: 0px !important;
+    border-style: none !important;
+    --tw-shadow: 0 1px 0 0 ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue1} !important;
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow) !important;
+
+    &:active,
+    &:focus {
+      background: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue0};
+      --tw-shadow: 0 1px 0 0 ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.colorPrimary} !important;
+      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+        var(--tw-shadow) !important;
+    }
+
+    &:disabled {
+      background: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.accent};
+      color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.accent5};
+      box-shadow: 0 1px 0 0 ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.accent1};
+    }
+
+    .antsomi-select-selection-overflow {
+      row-gap: 5px;
+    }
+  }
+
+  &.antsomi-select-disabled {
+    .antsomi-select-arrow {
+      color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.colorTextDisabled} !important;
+    }
+
+    .antsomi-tag {
+      opacity: 0.5 !important;
+    }
+  }
+  &.antsomi-select-status-error {
+    border-bottom: solid 1px #ff4d4f !important;
+
+    ::placeholder {
+      color: #ff4d4f !important;
+    }
+  }
+
+  &.left-12 .antsomi-select-selection-placeholder {
+    left: 12px;
+  }
+
+  .antsomi-select-clear {
+    background: transparent;
+  }
+`;
+export const StyledTag = styled(Tag) `
+  position: relative !important;
+  display: flex !important;
+  align-items: center !important;
+  width: fit-content !important;
+  height: 24px !important;
+  margin-right: 5px !important;
+  padding: 5px 10px !important;
+  border-radius: 15px !important;
+  border: none !important;
+  background-color: ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.blue2} !important;
+  cursor: pointer !important;
+
+  .antsomi-tag-close-icon {
+    opacity: 0 !important;
+    position: absolute !important;
+    right: 2px !important;
+    transition: all 0.3s !important;
+  }
+
+  &:hover {
+    .antsomi-tag-close-icon {
+      opacity: 1 !important;
+    }
+  }
+`;
+export const CloseButton = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 26px;
+  border: 2px solid ${p => { var _a; return (p.borderColor ? p.borderColor : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue2); }};
+  background-color: ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw0};
+`;

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

@@ -1,9 +1,11 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
-import React, { useEffect, useReducer } from 'react';
+import React, { useReducer } from 'react';
 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 { formattedAccessInfo } from './utils';
 export const ShareAccess = (props) => {
     const { accessInfo, excludeUserAccess, userId, onChange, userPermission } = props;
     const [state, dispatch] = useReducer(shareAccessReducer(onChange), {
@@ -12,10 +14,10 @@ export const ShareAccess = (props) => {
             userToOwnerShipId: -1,
         },
     });
-    useEffect(() => {
+    useDeepCompareEffect(() => {
         if (!accessInfo)
             return;
-        dispatch(updateObjAccessInfo(accessInfo));
+        dispatch(updateObjAccessInfo(formattedAccessInfo(accessInfo)));
     }, [accessInfo]);
     return (React.createElement(ShareAccessStateContext.Provider, { value: Object.assign(Object.assign({}, state), { excludeUserAccess, accessUserId: userId, accessUserPermission: userPermission }) },
         React.createElement(ShareAccessDispatchContext.Provider, { value: dispatch },

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

@@ -33,12 +33,12 @@ export const GeneralAccess = ({ generalAccessSettings }) => {
         dispatch(updateObjAccessInfo(updated));
     };
     const renderDescription = () => {
-        let description = 'Only people with access can open this item.';
+        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.';
+            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.';
+            description = 'Anyone on the portal can edit this item';
         }
         return description;
     };

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

@@ -1,4 +1,4 @@
-var _a;
+var _a, _b;
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledGeneralAccessRoot = styled.div `
@@ -14,6 +14,7 @@ export const StyledGeneralAccessRoot = styled.div `
     display: flex;
     justify-content: space-between;
     border: 1px solid #e6e6e6;
+    border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
     padding: 8px;
 
     .icon-angle {
@@ -24,7 +25,7 @@ export const StyledGeneralAccessRoot = styled.div `
 
     .accessable-icon {
       font-size: 28px;
-      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary};
+      color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary};
       display: flex;
       align-items: center;
     }

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

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

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

@@ -1,18 +1,16 @@
 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, generalAccessSettings, excludeUserAccess, allowAddUser = true } = props;
-    const { state } = useShareAccess();
-    const { allowEdit, allowView } = state;
-    if (!allowEdit && !allowView)
-        return null;
+    const { getUserInfo, generalAccessSettings, excludeUserAccess, placeholder, allowAddUser = true, } = props;
+    // const { state } = useShareAccess();
+    // const { allowEdit, allowView } = state;
+    // if (!allowEdit && !allowView) return null;
     return (React.createElement(StyledLayoutContentRoot, null,
-        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo }),
+        allowAddUser && React.createElement(SearchUser, { getUserInfo: getUserInfo, placeholder: placeholder }),
         React.createElement(PeopleAccess, { excludeUserAccess: excludeUserAccess }),
         React.createElement(GeneralAccess, { generalAccessSettings: generalAccessSettings }),
         React.createElement(ModalTransferOwnership, null)));

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

@@ -1,8 +1,8 @@
 import Icon from '@antscorp/icons';
 import produce from 'immer';
 import { Avatar, Dropdown, List } from 'antd';
-import { remove } from 'lodash';
-import React from 'react';
+import { remove, cloneDeep } from 'lodash';
+import React, { useMemo } 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';
@@ -17,6 +17,16 @@ export const PeopleAccess = (props) => {
     const { excludeUserAccess } = props;
     const { state, dispatch } = useShareAccess();
     const { accessInfo, accessUserId, accessUserPermission } = state;
+    const dataSourceSorted = useMemo(() => {
+        if (!Array.isArray(accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess))
+            return [];
+        const listAccess = cloneDeep((accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess) || []);
+        return listAccess.sort((a, b) => {
+            if (+a.role === +b.role)
+                return 0;
+            return +a.role === 1 ? -1 : 1;
+        });
+    }, [accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess]);
     const handleClickAction = (actKey, updatedUserId) => {
         if (!accessInfo || !dispatch)
             return;
@@ -72,7 +82,7 @@ export const PeopleAccess = (props) => {
         return null;
     return (React.createElement(StyledPeopleAccessRoot, null,
         React.createElement("div", { className: "title" }, "People with access"),
-        React.createElement(List, { dataSource: accessInfo.listAccess, renderItem: access => {
+        React.createElement(List, { dataSource: dataSourceSorted, renderItem: access => {
                 const actions = getActionsByUser({
                     userId: accessUserId,
                     updatedUserId: access.userId,

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

@@ -1,3 +1,5 @@
+var _a;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
 export const StyledPeopleAccessRoot = styled.div `
   display: flex;
@@ -9,6 +11,7 @@ export const StyledPeopleAccessRoot = styled.div `
   }
 
   .antsomi-list {
+    border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
     border: 1px solid #e6e6e6;
 
     .antsomi-list-items {

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

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

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

@@ -7,7 +7,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Avatar, Select } from 'antd';
 import { useDebounce } from '@antscorp/antsomi-ui/es/hooks/useDebounceV2';
 import { StyledSearchUserRoot, StyledSelectItem } from './styled';
@@ -17,13 +17,21 @@ import produce from 'immer';
 import { ACCESS_PROPERTIES_BY_ROLE, ROLE_MAPPING } from '../../constants';
 import { updateObjAccessInfo } from '../../actions';
 export const SearchUser = (props) => {
-    const { getUserInfo } = props;
+    const { getUserInfo, placeholder } = props;
     const { state, dispatch } = useShareAccess();
     const { accessInfo, allowEdit } = state;
     const [users, setUsers] = useState([]);
     const [isFetching, setIsFetching] = useState(false);
     const [searchTerm, setSearchTerm] = useState('');
     const debounceSearchTerm = useDebounce(searchTerm, 700);
+    const excludedUsers = useMemo(() => {
+        if (!Array.isArray(users) || !Array.isArray(accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess))
+            return [];
+        return users.filter(user => {
+            const userIdx = accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess.findIndex(item => +item.userId === +user.user_id);
+            return userIdx === -1;
+        });
+    }, [accessInfo === null || accessInfo === void 0 ? void 0 : accessInfo.listAccess, users]);
     useEffect(() => {
         if (!isEmail(debounceSearchTerm) || !getUserInfo)
             return;
@@ -49,7 +57,7 @@ export const SearchUser = (props) => {
         if (!accessInfo || !dispatch || !allowEdit)
             return;
         setSearchTerm('');
-        const existed = accessInfo.listAccess.some(access => access.userId === +user.user_id);
+        const existed = accessInfo.listAccess.some(access => +access.userId === +user.user_id);
         if (existed)
             return;
         const updated = produce(accessInfo, draft => {
@@ -58,11 +66,12 @@ export const SearchUser = (props) => {
             draft.listAccess.push(newUser);
         });
         dispatch(updateObjAccessInfo(updated));
+        setUsers([]);
     };
     if (!allowEdit)
         return null;
     return (React.createElement(StyledSearchUserRoot, null,
-        React.createElement(Select, { showSearch: true, placeholder: "Add people and groups", value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (users || []).map(user => ({
+        React.createElement(Select, { showSearch: true, placeholder: placeholder || 'Add people and groups', value: [], searchValue: searchTerm, defaultActiveFirstOption: false, suffixIcon: null, filterOption: false, onSearch: v => setSearchTerm(v), notFoundContent: null, loading: isFetching, options: (excludedUsers || []).map(user => ({
                 value: user.user_id,
                 label: (React.createElement(StyledSelectItem, { onClick: () => handleAddUser(user) },
                     React.createElement(Avatar, { src: user.avatar }),

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

@@ -3,17 +3,17 @@ export declare const useShareAccess: () => {
     state: {
         allowEdit: boolean;
         allowView: boolean;
-        accessInfo?: import("../types").ObjectAccessInfo | undefined;
+        accessInfo?: import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ObjectAccessInfo | undefined;
         accessUserId?: number | undefined;
         accessUserPermission?: {
             view: number;
             edit: number;
         } | undefined;
-        excludeUserAccess?: import("../types").ExcludeUserAccess | undefined;
+        excludeUserAccess?: import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ExcludeUserAccess | undefined;
         modalTransferOwnership: {
             open: boolean;
             userToOwnerShipId: number;
         };
     };
-    dispatch: import("react").Dispatch<import("../types").ShareAccessAction> | null;
+    dispatch: import("react").Dispatch<import("@antscorp/antsomi-ui/es/components/molecules/ShareAccess/types").ShareAccessAction> | null;
 };

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

@@ -40,6 +40,7 @@ export type ShareAccessProps = {
     };
     accessInfo?: ObjectAccessInfo;
     allowAddUser?: boolean;
+    placeholder?: string;
     excludeUserAccess?: ExcludeUserAccess;
     getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
     generalAccessSettings?: GeneralAccessSettings;

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

@@ -37,3 +37,18 @@ export declare const getActionsByUser: (args: {
     readonly key: "remove_acess";
 })[];
 export declare const initAccessInfoDefault: (userInfo: Partial<UserInfo>) => ObjectAccessInfo;
+export declare const formattedAccessInfo: (accessInfo: ObjectAccessInfo) => {
+    ownerId: number;
+    listAccess: {
+        userId: number;
+        fullName: string;
+        email: string;
+        avatar: string;
+        role: number;
+        allowView: number;
+        allowEdit: number;
+        allowComment: number;
+    }[];
+    isPublic: number;
+    publicRole: number | null;
+};

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

@@ -64,3 +64,7 @@ export const initAccessInfoDefault = (userInfo) => ({
     publicRole: PUBLIC_ROLE.ONLY_VIEWER,
     isPublic: 0,
 });
+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 }))) }));
+};

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

@@ -1 +1,6 @@
-export { Tabs } from 'antd';
+/// <reference types="react" />
+export declare const Tabs: import("styled-components").StyledComponent<import("react").FC<import("antd").TabsProps> & {
+    TabPane: import("react").FC<import("antd").TabPaneProps>;
+}, any, {
+    shadow?: boolean | undefined;
+}, never>;

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

@@ -1 +1,10 @@
-export { Tabs } from 'antd';
+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;' : '')}
+  }
+`;

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import type { FormInstance, SelectProps } from 'antd';
+import { ImageSliderProps } from './components';
 import { ShareAccessProps } from '../ShareAccess/types';
+import { RuleObject } from 'antd/es/form';
 export type categoriesProps = {
     [key: string]: (string | number)[];
 };
@@ -8,10 +10,10 @@ export interface TemplateValueOptions {
     saveOption?: string;
     templateName?: {
         id: undefined;
-        label: string;
+        label?: string;
     } | {
         id: string | number;
-        label: string;
+        label?: string;
     };
     description?: string;
     defaultThumbnail?: number;
@@ -20,30 +22,25 @@ export interface TemplateValueOptions {
     };
     accessInfo?: ShareAccessProps['accessInfo'];
 }
-export interface ImagePreviewOptions {
-    thumbnails: (string | undefined)[];
-    isLoading?: boolean;
-    skeleton?: boolean;
-    previewNavigation?: boolean;
-    slidesPerView?: number;
-    hideThumbnailsList?: boolean;
-    hideDefaultButton?: boolean;
-    label?: string;
-    imageWidth?: number;
-    imageHeight?: number;
+export interface FormValue extends Required<Omit<TemplateValueOptions, 'templateName' | 'accessInfo'>> {
+    templateName: string;
+    templateNameSelect: number | string | undefined;
 }
 export interface TemplateSaveAsProps {
     className?: string;
     shareAccess: Omit<{
         show: boolean;
     } & ShareAccessProps, 'accessInfo' | 'onChange'>;
-    imageReview: ImagePreviewOptions;
+    imageReview: {
+        label?: string;
+    } & Omit<ImageSliderProps, 'defaultThumbnail' | 'onSelectDefault'>;
     saveOptions?: {
         saveNewText?: string;
         saveExistText?: string;
-        readonly saveNewValue?: string;
-        readonly saveExistValue?: string;
+        saveNewValue?: string;
+        saveExistValue?: string;
     };
+    isLoadingCategories?: boolean;
     categories?: Array<{
         label: string | React.ReactNode;
         key: string | number;
@@ -59,21 +56,30 @@ export interface TemplateSaveAsProps {
     templateNames: Array<{
         label: string;
         id: string | number;
+        description?: string;
     }>;
     templateNamesOptions?: {
         label?: string;
         isLoading?: boolean;
         defaultNewTemplateName?: string;
+        selectPlaceholder?: string;
+        placeholder?: string;
         onSearch?: (searchValue: string) => void;
         onNamePopupScroll?: SelectProps['onPopupScroll'];
+        onScrollToBottom?: () => void;
+        validateName?: (rule: RuleObject, value: any) => void;
     };
     descriptionOptions?: {
         label?: string;
         placeholder?: string;
     };
-    form?: FormInstance<any>;
+    form?: FormInstance<FormValue>;
     value?: TemplateValueOptions;
     onChange?: (value: Partial<TemplateValueOptions>, errors?: any[]) => void;
+    onSaveThumbnail?: (data: {
+        thumbnails: ImageSliderProps['thumbnails'];
+        thumbnailChange: number;
+    }) => void;
     onEvent?: (value: Partial<TemplateValueOptions>) => void;
 }
 export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;