@antscorp/antsomi-ui 1.3.4 → 1.3.5-beta.2

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

@@ -0,0 +1,19 @@
+import produce from 'immer';
+import { TYPES } from './actions';
+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);
+            }
+            break;
+        }
+        case TYPES.UPDATE_MODAL_TRANSTER_OWNERSHIP: {
+            draft.modalTransferOwnership = Object.assign(Object.assign({}, state.modalTransferOwnership), action.payload);
+            break;
+        }
+        default:
+            break;
+    }
+});

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

@@ -0,0 +1,54 @@
+import { updateModalTransferOwnership, updateObjAccessInfo } from './actions';
+export type UserInfo = {
+    avatar: string;
+    full_name: string;
+    email: string;
+    user_id: number;
+    user_name: string;
+    user_type: number;
+    ctime: Date;
+    utime: Date;
+};
+export type UserAccessInfo = {
+    userId: number;
+    fullName: string;
+    email: string;
+    avatar: string;
+    role: number;
+    allowView: number;
+    allowEdit: number;
+    allowComment: number;
+    [key: string]: any;
+};
+export type ObjectAccessInfo = {
+    isPublic: number;
+    publicRole: number | null;
+    ownerId: number;
+    listAccess: UserAccessInfo[];
+};
+export type ShareAccessProps = {
+    userId?: number;
+    userPermission?: {
+        edit: number;
+        view: number;
+    };
+    accessInfo?: ObjectAccessInfo;
+    allowChangeOnwership?: boolean;
+    getUserInfo?(search: string, signal: AbortSignal): Promise<UserInfo[]> | UserInfo[];
+    onChange?: (accessInfo: ObjectAccessInfo) => void;
+};
+export type ShareAccessState = {
+    accessInfo?: ObjectAccessInfo;
+    accessUserId?: number;
+    accessUserPermission?: {
+        view: number;
+        edit: number;
+    };
+    modalTransferOwnership: {
+        open: boolean;
+        userToOwnerShipId: number;
+    };
+};
+export type ShareAccessAction = ReturnType<typeof updateObjAccessInfo> | ReturnType<typeof updateModalTransferOwnership>;
+export type AccessRole = 1 | 2 | 3;
+export type GeneralAccess = 1 | 0;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,38 @@
+import { ObjectAccessInfo } from './types';
+export declare const mergePermission: (objectPermissionAllow: boolean, menuPermissionValue: number) => boolean;
+export declare const composeObjectMenuPermissions: (params: {
+    isPublic: boolean;
+    publicRole: number | null;
+    objectPermission: {
+        edit: boolean;
+        view: boolean;
+    };
+    menuPermission: {
+        edit: number;
+        view: number;
+    };
+}) => {
+    edit: boolean;
+    view: boolean;
+};
+export declare const getActionsByUser: (args: {
+    userId?: number;
+    userPermission?: {
+        view: number;
+        edit: number;
+    };
+    updatedUserId?: number;
+    objectAccessInfo?: ObjectAccessInfo;
+}) => ({
+    readonly label: "Viewer";
+    readonly key: "to_viewer";
+} | {
+    readonly label: "Editor";
+    readonly key: "to_editor";
+} | {
+    readonly label: "Transfer ownership";
+    readonly key: "to_owner";
+} | {
+    readonly label: "Remove Access";
+    readonly key: "remove_acess";
+})[];

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

@@ -0,0 +1,57 @@
+import { MENU_PERMISSION, PEOPLE_ACTIONS, PEOPLE_ACTION_KEYS, PUBLIC_ROLE, ROLE_MAPPING, } from './constants';
+import { remove } from 'lodash';
+export const mergePermission = (objectPermissionAllow, menuPermissionValue) => {
+    const valueMapping = {
+        [`${MENU_PERMISSION.NONE}_false`]: false,
+        [`${MENU_PERMISSION.CREATED_BY_USER}_false`]: false,
+        [`${MENU_PERMISSION.MANAGEMENT_BY_USER}_false`]: false,
+        [`${MENU_PERMISSION.EVERYTHING}_false`]: true,
+        [`${MENU_PERMISSION.NONE}_true`]: false,
+        [`${MENU_PERMISSION.CREATED_BY_USER}_true`]: true,
+        [`${MENU_PERMISSION.MANAGEMENT_BY_USER}_true`]: true,
+        [`${MENU_PERMISSION.EVERYTHING}_true`]: true,
+    };
+    return !!valueMapping[`${menuPermissionValue}_${objectPermissionAllow}`];
+};
+export const composeObjectMenuPermissions = (params) => {
+    const { menuPermission, objectPermission, isPublic, publicRole } = params;
+    const edit = mergePermission(objectPermission.edit, menuPermission.edit);
+    const view = mergePermission(objectPermission.view, menuPermission.view);
+    return {
+        edit: edit || (isPublic && publicRole === PUBLIC_ROLE.ONLY_EDITOR),
+        view: view || (isPublic && publicRole === PUBLIC_ROLE.ONLY_VIEWER),
+    };
+};
+export const getActionsByUser = (args) => {
+    const { userId, userPermission, updatedUserId, objectAccessInfo } = args;
+    if (!userId || !updatedUserId || !objectAccessInfo)
+        return [];
+    const { ownerId, listAccess, publicRole, isPublic } = objectAccessInfo;
+    const user = listAccess.find(access => access.userId === userId);
+    const updatedUser = listAccess.find(access => access.userId === updatedUserId);
+    const { edit: allowEdit } = composeObjectMenuPermissions({
+        isPublic: !!isPublic,
+        publicRole,
+        objectPermission: {
+            view: !!(user === null || user === void 0 ? void 0 : user.allowView),
+            edit: !!(user === null || user === void 0 ? void 0 : user.allowEdit),
+        },
+        menuPermission: {
+            view: (userPermission === null || userPermission === void 0 ? void 0 : userPermission.view) || MENU_PERMISSION.NONE,
+            edit: (userPermission === null || userPermission === void 0 ? void 0 : userPermission.edit) || MENU_PERMISSION.NONE,
+        },
+    });
+    if ((!user && !isPublic) || !updatedUser || !allowEdit || updatedUser.userId === ownerId)
+        return [];
+    const actions = Object.values(PEOPLE_ACTION_KEYS);
+    if (userId !== ownerId) {
+        remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_OWNER);
+    }
+    if (allowEdit && updatedUser.role === ROLE_MAPPING.EDITOR) {
+        remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_EDITOR);
+    }
+    if (allowEdit && updatedUser.role === ROLE_MAPPING.VIEWER) {
+        remove(actions, actKey => actKey === PEOPLE_ACTION_KEYS.TO_VIEWER);
+    }
+    return actions.map(actKey => PEOPLE_ACTIONS[actKey]);
+};

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

@@ -0,0 +1,19 @@
+export declare const OPTION_TEXT_DECORATION: readonly [{
+    readonly label: "None";
+    readonly value: "none";
+}, {
+    readonly label: "Underline";
+    readonly value: "underline";
+}, {
+    readonly label: "Overline";
+    readonly value: "overline";
+}, {
+    readonly label: "Line Through";
+    readonly value: "line-through";
+}, {
+    readonly label: "Underline - Overline";
+    readonly value: "underline overline";
+}, {
+    readonly label: "Underline - Line Through";
+    readonly value: "underline line-through";
+}];

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

@@ -0,0 +1,26 @@
+export const OPTION_TEXT_DECORATION = [
+    {
+        label: 'None',
+        value: 'none',
+    },
+    {
+        label: 'Underline',
+        value: 'underline',
+    },
+    {
+        label: 'Overline',
+        value: 'overline',
+    },
+    {
+        label: 'Line Through',
+        value: 'line-through',
+    },
+    {
+        label: 'Underline - Overline',
+        value: 'underline overline',
+    },
+    {
+        label: 'Underline - Line Through',
+        value: 'underline line-through',
+    },
+];

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_TEXT_DECORATION } from './constants';
+export type TextDecorationSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_TEXT_DECORATION)[number]['label'][];
+    onChange?: (textTransform: (typeof OPTION_TEXT_DECORATION)[number]['value']) => void;
+};
+/**
+ * Generates a function comment for the given function body.
+ *
+ * @param {TextDecorationSelectProps} props - the props for the TextDecorationSelect component
+ * @return {React.FC<TextDecorationSelectProps>} the TextDecorationSelect component
+ */
+export declare const TextDecorationSelect: React.FC<TextDecorationSelectProps>;

package/es/components/molecules/TextDecorationSelect/index.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select } from '../Select';
+import { OPTION_TEXT_DECORATION } from './constants';
+import { SettingWrapper } from '../SettingWrapper';
+/**
+ * Generates a function comment for the given function body.
+ *
+ * @param {TextDecorationSelectProps} props - the props for the TextDecorationSelect component
+ * @return {React.FC<TextDecorationSelectProps>} the TextDecorationSelect component
+ */
+export const TextDecorationSelect = (props) => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    useEffect(() => {
+        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+    }, [value]);
+    const textDecorationOptions = useMemo(() => {
+        let draftFontFamily = [...OPTION_TEXT_DECORATION];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            draftFontFamily = OPTION_TEXT_DECORATION.filter(({ label }) => showOptions.some(font => font === label));
+        }
+        return draftFontFamily;
+    }, [showOptions]);
+    const handleChange = (value) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...textDecorationOptions], style: { width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};

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

@@ -0,0 +1,13 @@
+export declare const OPTION_TEXT_TRANSFORM: readonly [{
+    readonly label: "None";
+    readonly value: "none";
+}, {
+    readonly label: "Capitalize";
+    readonly value: "capitalize";
+}, {
+    readonly label: "Uppercase";
+    readonly value: "uppercase";
+}, {
+    readonly label: "Lowercase";
+    readonly value: "lowercase";
+}];

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

@@ -0,0 +1,19 @@
+// export const LABEL_TEXT_TRANSFORM = 'None' || 'Capitalize' || 'Uppercase' || 'Lowercase';
+export const OPTION_TEXT_TRANSFORM = [
+    {
+        label: 'None',
+        value: 'none',
+    },
+    {
+        label: 'Capitalize',
+        value: 'capitalize',
+    },
+    {
+        label: 'Uppercase',
+        value: 'uppercase',
+    },
+    {
+        label: 'Lowercase',
+        value: 'lowercase',
+    },
+];

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SelectProps } from '../Select';
+import { OPTION_TEXT_TRANSFORM } from './constants';
+export type TextTransformSelectProps = Omit<SelectProps, 'onChange'> & {
+    label?: string;
+    showOptions?: (typeof OPTION_TEXT_TRANSFORM)[number]['label'][];
+    onChange?: (textTransform: (typeof OPTION_TEXT_TRANSFORM)[number]['value']) => void;
+};
+export declare const TextTransformSelect: React.FC<TextTransformSelectProps>;

package/es/components/molecules/TextTransformSelect/index.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useMemo, useState } from 'react';
+import { Select } from '../Select';
+import { SettingWrapper } from '../SettingWrapper';
+import { OPTION_TEXT_TRANSFORM } from './constants';
+export const TextTransformSelect = (props) => {
+    const { defaultValue, label, value, showOptions, onChange } = props, selectProps = __rest(props, ["defaultValue", "label", "value", "showOptions", "onChange"]);
+    const [selected, setSelected] = useState(defaultValue || value);
+    useEffect(() => {
+        setSelected(value === null || value === void 0 ? void 0 : value.toString());
+    }, [value]);
+    const textTransformOptions = useMemo(() => {
+        let draftFontFamily = [...OPTION_TEXT_TRANSFORM];
+        if (showOptions === null || showOptions === void 0 ? void 0 : showOptions.length) {
+            draftFontFamily = OPTION_TEXT_TRANSFORM.filter(({ label }) => showOptions.some(font => font === label));
+        }
+        return draftFontFamily;
+    }, [showOptions]);
+    const handleChange = (value) => {
+        if (onChange && typeof onChange === 'function') {
+            onChange(value);
+        }
+    };
+    return (React.createElement(SettingWrapper, { label: label !== null && label !== void 0 ? label : '', containerStyle: { width: '100%' }, vertical: true },
+        React.createElement(Select, Object.assign({ value: selected, options: [...textTransformOptions], style: { width: '100%' }, onChange: select => {
+                setSelected(select);
+                handleChange(select);
+            }, showSearch: true }, selectProps))));
+};

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").BaseOptionType | import("rc-tree-select/lib/TreeSelect").DefaultOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
+export declare const TreeSelect: (<ValueType = any, OptionType extends import("rc-tree-select/lib/TreeSelect").DefaultOptionType | import("rc-tree-select/lib/TreeSelect").BaseOptionType = import("rc-tree-select/lib/TreeSelect").DefaultOptionType>(props: import("antd").TreeSelectProps<ValueType, OptionType> & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<import("antd").RefSelectProps>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) & {
     displayName?: string | undefined;
@@ -7,5 +7,5 @@ export declare const TreeSelect: (<ValueType = any, OptionType extends import("r
     SHOW_ALL: "SHOW_ALL";
     SHOW_PARENT: "SHOW_PARENT";
     SHOW_CHILD: "SHOW_CHILD";
-    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => React.JSX.Element;
+    _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 };

package/es/components/molecules/UploadImage/MediaIcon.d.ts

@@ -1,2 +1,3 @@
-declare const MediaIcon: (_props: any) => JSX.Element;
+import React from 'react';
+declare const MediaIcon: (_props: any) => React.JSX.Element;
 export default MediaIcon;

package/es/components/molecules/UploadImage/MediaThumb.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { MediaMode } from '.';
+export interface MediaThumbProps {
+    mode: MediaMode;
+    media: any;
+}
+declare const _default: React.NamedExoticComponent<MediaThumbProps>;
+export default _default;

package/es/components/molecules/UploadImage/MediaThumb.js

@@ -0,0 +1,15 @@
+// Libraries
+import React, { lazy, Suspense, memo } from 'react';
+// Assets
+import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
+// Styled
+import { Image } from './styled';
+const LazyVideoThumbnail = lazy(() => import('./VideoThumbnail'));
+const MediaThumb = props => {
+    const { mode, media } = props;
+    if (mode === 'image')
+        return React.createElement(Image, { src: media.url, alt: "img" });
+    return (React.createElement(Suspense, { fallback: React.createElement(Image, { src: PlaceholderImage, alt: "img" }) },
+        React.createElement(LazyVideoThumbnail, { mode: mode, media: media })));
+};
+export default memo(MediaThumb);

package/es/components/molecules/UploadImage/VideoThumbnail.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { MediaThumbProps } from './MediaThumb';
+declare const VideoThumbnail: React.FC<MediaThumbProps>;
+export default VideoThumbnail;

package/es/components/molecules/UploadImage/VideoThumbnail.js

@@ -0,0 +1,43 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+// Libraries
+import React, { useState, useEffect, useRef } from 'react';
+// Assets
+import PlaceholderImage from '@antscorp/antsomi-ui/es/assets/images/placeholder-image.png';
+// Styled
+import { Image } from './styled';
+const VideoThumbnail = props => {
+    const { mode, media } = props;
+    const [isShow, setIsShow] = useState(false);
+    // Refs
+    const videoRef = useRef(null);
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        const video = videoRef.current;
+        const dimension = 400;
+        let listener = () => { };
+        if (media && media.url && mode === 'video') {
+            const context = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
+            if (canvas && video && context) {
+                listener = () => {
+                    context.drawImage(video, 0, 0, dimension, dimension);
+                    setIsShow(true);
+                };
+                video.addEventListener('loadeddata', listener);
+                // Set the preload time range
+                video.currentTime = 2;
+                // Start loading the video from the specified time
+                video.load();
+            }
+        }
+        return () => {
+            video === null || video === void 0 ? void 0 : video.removeEventListener('loadeddata', listener);
+        };
+    }, [media, mode]);
+    return (React.createElement("div", { style: { width: '100%', height: '100%' } },
+        React.createElement("video", { loop: false, muted: true, controls: false, width: 400, height: 400, ref: videoRef, style: { display: 'none' }, preload: "metadata" },
+            React.createElement("source", { src: media === null || media === void 0 ? void 0 : media.url, type: "video/mp4" })),
+        React.createElement("canvas", { ref: canvasRef, style: { width: '100%', height: '100%', display: isShow ? 'block' : 'none' } }),
+        React.createElement(Image, { src: PlaceholderImage, alt: "placeholder", style: { display: isShow ? 'none' : 'block' } })));
+};
+export default VideoThumbnail;

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

@@ -1,14 +1,18 @@
 import React from 'react';
 import { UploadProps as AntdUploadProps } from 'antd/lib/upload';
+export type MediaMode = 'image' | 'video';
 interface UploadImageProps extends AntdUploadProps {
     labelHeadingModal?: string;
     labelButtonSelect?: string;
+    labelModalDelete?: string;
     searchPlaceholder?: string;
     onRemoveImage?: Function;
     onChangeImage?: Function;
-    selectedImage?: UploadImageObject;
+    selectedImage?: UploadMediaObject;
     isOpen?: boolean;
     isInputMode?: boolean;
+    iconName?: string;
+    mode?: MediaMode;
     width?: any;
     errors?: Array<any>;
     extensions?: string[];
@@ -26,7 +30,7 @@ interface UploadImageProps extends AntdUploadProps {
     required?: boolean;
     focused?: boolean;
 }
-interface UploadImageObject {
+interface UploadMediaObject {
     url: string;
 }
 export declare const UploadImage: React.FC<UploadImageProps>;