diginet-core-ui 1.4.39 → 1.4.40

package/src/components/avatar/index.js

@@ -0,0 +1,472 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import AvatarDefault from 'assets/avatar/default.svg';
+import { ButtonIcon, Image, ModalSample, Notify, Popover, Typography } from 'components';
+import OptionWrapper from 'components/others/option-wrapper';
+import { getGlobal } from 'global';
+import PropTypes from 'prop-types';
+import {
+    Fragment,
+    forwardRef,
+    isValidElement,
+    memo,
+    useEffect,
+    useImperativeHandle,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
+import {
+    borderNone,
+    borderRadius,
+    boxContent,
+    cursorInherit,
+    cursorPointer,
+    displayBlock,
+    displayFlex,
+    displayInlineFlex,
+    displayNone,
+    flexCol,
+    itemsCenter,
+    overflowHidden,
+    parseMinWidth,
+    parseWidthHeight,
+    positionAbsolute,
+    positionRelative,
+    userSelectNone,
+    z,
+} from 'styles/general';
+import { getColor } from 'styles/utils';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp, isMobile, refType as ref } from 'utils';
+
+const checkFileType = (type, matchType) => {
+    if (typeof matchType === 'object' && matchType instanceof RegExp) {
+        return matchType.test(type);
+    } else if (typeof matchType === 'object' && Array.isArray(matchType)) {
+        const pattern = new RegExp('^image/(' + matchType.join('|') + ')', 'i');
+        return pattern.test(type);
+    } else {
+        return new RegExp(matchType).test(type);
+    }
+};
+
+const Avatar = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Avatar' });
+        const {
+            action = {},
+            actionIconHeight,
+            actionIconWidth,
+            allowEdit,
+            className,
+            clearAble,
+            data,
+            defaultSrc: defaultSrcProp,
+            direction,
+            disabled,
+            height,
+            hoverAble,
+            id,
+            lazyLoading,
+            matchType,
+            maxSize,
+            maxSizeError: maxSizeErrorProp,
+            onChange,
+            onClick,
+            onRemove,
+            outlined,
+            readOnly,
+            src,
+            style,
+            width,
+            wrongTypeError: wrongTypeErrorProp,
+        } = props;
+
+        const defaultSrc = defaultSrcProp || AvatarDefault;
+
+        const maxSizeError = maxSizeErrorProp || `File ${getGlobal(['errorDefault', 'maxSize'])}`;
+        const wrongTypeError = wrongTypeErrorProp || `File ${getGlobal(['errorDefault', 'fileType'])}`;
+
+        const ref = useRef(null);
+        const inputRef = useRef(null);
+        const avatarRef = useRef(null);
+        const notifyRef = useRef(null);
+
+        const [viewAvatar, setViewAvatar] = useState(false);
+        const [viewMoreInfo, setViewMoreInfo] = useState(false);
+        const [srcState, setSrcState] = useState(src);
+
+        const _ActionIconCSS = ActionIconCSS(actionIconWidth);
+        const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly || disabled);
+        const _AvatarContainerCSS = AvatarContainerCSS(_ActionIconCSS.name);
+        const _AvatarRootCSS = AvatarRootCSS(width, height, outlined, theme);
+
+        const _isMobile = isMobile.any();
+
+        const triggerInput = e => {
+            if (e || !srcState) {
+                inputRef.current.click();
+            } else {
+                // on View
+                setViewAvatar(true);
+            }
+        };
+
+        const onChangeAvatar = input => {
+            const [file] = input.target.files;
+            if (!file) return;
+            const reader = new FileReader();
+            if (!checkFileType(file.type, matchType)) {
+                input.target.value = '';
+                notifyRef.current.instance.show(wrongTypeError);
+                return;
+            }
+
+            if (+maxSize && file.size > maxSize * 1024 ** 2) {
+                input.target.value = '';
+                notifyRef.current.instance.show(maxSizeError);
+                return;
+            }
+
+            reader.onload = e => {
+                setSrcState(e.target.result);
+            };
+
+            reader.readAsDataURL(file);
+            !!onChange && onChange(input);
+        };
+
+        const onRemoveAvatar = () => {
+            setSrcState(null);
+            inputRef.current.value = '';
+            !!onRemove && onRemove();
+        };
+
+        const renderData = () => {
+            if (isValidElement(data)) return data;
+            const info = Object.keys(data || {});
+            if (info?.length) {
+                return info.map((key, index) => {
+                    return (
+                        <Typography key={index} color={'text/tooltip'} type={'p1'}>
+                            {key + ': ' + data[key]}
+                        </Typography>
+                    );
+                });
+            }
+            return (
+                <Typography color={'text/tooltip'} type={'p1'}>
+                    {getGlobal('noDataText')}
+                </Typography>
+            );
+        };
+
+        const showMoreInfo = () => {
+            if (hoverAble) setViewMoreInfo(true);
+        };
+
+        const closeMoreInfo = () => {
+            if (hoverAble) setViewMoreInfo(false);
+        };
+
+        const _onClick = event => {
+            onClick && event.stopPropagation();
+            if (disabled) return;
+            if (readOnly) {
+                if (_isMobile) showMoreInfo();
+            } else {
+                allowEdit ? triggerInput() : onClick?.(event);
+            }
+        };
+
+        const _onMouseEnter = () => {
+            if (!_isMobile) showMoreInfo();
+        };
+
+        const _onMouseLeave = () => {
+            if (!_isMobile) closeMoreInfo();
+        };
+
+        useEffect(() => {
+            if (src) {
+                setSrcState(src);
+            }
+            return () => {
+                setSrcState(defaultSrc);
+            };
+        }, [src]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        return useMemo(() => {
+            return (
+                <Fragment>
+                    <div css={_AvatarContainerCSS}>
+                        <div
+                            ref={ref}
+                            css={_AvatarRootCSS}
+                            className={classNames('DGN-UI-Avatar', className)}
+                            style={style}
+                            id={id}
+                        >
+                            <input
+                                ref={inputRef}
+                                type="file"
+                                title={''}
+                                accept={'image/*'}
+                                onChange={onChangeAvatar}
+                                disabled={disabled}
+                            />
+                            <div
+                                ref={avatarRef}
+                                css={_AvatarPreviewCSS}
+                                onClick={_onClick}
+                                onMouseEnter={_onMouseEnter}
+                                onMouseLeave={_onMouseLeave}
+                                tabIndex="-1"
+                                onBlur={closeMoreInfo}
+                            >
+                                <Image
+                                    circular
+                                    defaultSrc={defaultSrc}
+                                    src={srcState}
+                                    width={'100%'}
+                                    height={'100%'}
+                                    lazyLoading={lazyLoading}
+                                />
+                            </div>
+                        </div>
+                        {allowEdit && !readOnly && !disabled ? (
+                            <span css={_ActionIconCSS}>
+                                <ButtonIcon
+                                    viewType={'ghost'}
+                                    name={'Edit'}
+                                    width={actionIconWidth}
+                                    height={actionIconHeight}
+                                    className={'icon-edit'}
+                                    onClick={triggerInput}
+                                />
+                                {clearAble && srcState ? (
+                                    <ButtonIcon
+                                        viewType={'ghost'}
+                                        name={'Delete'}
+                                        width={actionIconWidth}
+                                        height={actionIconHeight}
+                                        className={'icon-delete'}
+                                        onClick={onRemoveAvatar}
+                                        style={{ marginTop: '8px' }}
+                                    />
+                                ) : null}
+                            </span>
+                        ) : null}
+                    </div>
+                    <ModalSample open={viewAvatar} onClose={() => setViewAvatar(false)} width={'max-content'}>
+                        <Image defaultSrc={defaultSrc} src={srcState} width={'100%'} height={'100%'} />
+                    </ModalSample>
+                    {hoverAble ? (
+                        <Popover
+                            arrow
+                            open={viewMoreInfo}
+                            pressESCToClose={false}
+                            bgColor={'fill/tooltip'}
+                            anchor={avatarRef}
+                            fullScreen={false}
+                            direction={direction}
+                        >
+                            <div css={MoreInfoCSS(theme)}>{typeof data === 'function' ? data() : renderData()}</div>
+                        </Popover>
+                    ) : null}
+                    <Notify ref={notifyRef} progressing={true} autoDisappear={true} color={'danger'} />
+                </Fragment>
+            );
+        }, [
+            actionIconHeight,
+            actionIconWidth,
+            allowEdit,
+            clearAble,
+            data,
+            defaultSrcProp,
+            direction,
+            disabled,
+            height,
+            hoverAble,
+            lazyLoading,
+            matchType,
+            maxSize,
+            maxSizeError,
+            outlined,
+            readOnly,
+            width,
+            srcState,
+            theme,
+            viewAvatar,
+            viewMoreInfo,
+        ]);
+    })
+);
+
+const ActionIconCSS = actionIconWidth => css`
+    ${displayFlex};
+    ${flexCol};
+    ${positionAbsolute};
+    ${parseMinWidth(actionIconWidth)};
+    right: ${-actionIconWidth}px;
+    transition: opacity 0.5s;
+    opacity: 0;
+    ${z(2)};
+`;
+
+const AvatarPreviewCSS = isDisabled => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${overflowHidden};
+    ${parseWidthHeight('100%')};
+    ${borderRadius('50%')};
+    ${isDisabled ? cursorInherit : cursorPointer};
+`;
+
+const AvatarContainerCSS = ActionIconCSSName => css`
+    ${displayInlineFlex};
+    ${positionRelative};
+    ${itemsCenter};
+    &:hover {
+        .css-${ActionIconCSSName} {
+            opacity: 1;
+        }
+    }
+`;
+const AvatarRootCSS = (width, height, outlined, { colors }) => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${overflowHidden};
+    ${userSelectNone};
+    ${borderNone};
+    ${boxContent};
+    ${parseWidthHeight(width, height)};
+    ${borderRadius('50%')};
+    border: ${typeof outlined === 'boolean' && outlined
+        ? `1px solid ${getColor(getProp(colors, 'system/standard'))}`
+        : outlined};
+    input {
+        ${displayNone};
+    }
+`;
+
+const MoreInfoCSS = ({ spacing }) => css`
+    ${displayBlock};
+    ${positionRelative};
+    padding: ${spacing([2])};
+`;
+
+// Avatar.defaultProps = {
+//     actionIconHeight: 24,
+//     actionIconWidth: 24,
+//     allowEdit: false,
+//     className: '',
+//     clearAble: true,
+//     data: {},
+//     direction: 'bottom',
+//     disabled: false,
+//     height: 48,
+//     hoverAble: false,
+//     lazyLoading: false,
+//     matchType: /^image\/(gif|jpe?g|tiff?|png|webp|bmp|svg(\+xml)?)$/i,
+//     maxSizeError: `File ${getGlobal(['errorDefault', 'maxSize'])}`,
+//     outlined: false,
+//     readOnly: false,
+//     style: {},
+//     width: 48,
+//     wrongTypeError: `File ${getGlobal(['errorDefault', 'fileType'])}`,
+// };
+
+Avatar.propTypes = {
+    /** The height of action icon. */
+    actionIconHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** The width of action icon. */
+    actionIconWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** If `true`, allow to edit avatar. */
+    allowEdit: PropTypes.bool,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** If `true`, display remove avatar icon. */
+    clearAble: PropTypes.bool,
+    /**
+     * data to display when hoverAble is true<br />
+     * data is an object or function return a jsx element
+     */
+    data: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.node]),
+    /**
+     * it is used to display the default if there is no src<br />
+     * if undefined, will display icons available in the icons store
+     */
+    defaultSrc: PropTypes.string,
+    /** the direction to display more info */
+    direction: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+    /** prevent all events, only view */
+    disabled: PropTypes.bool,
+    /** The height of avatar box (48 or '48px' or ...) */
+    height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** show more info in popover if true */
+    hoverAble: PropTypes.bool,
+    /** lazy loading */
+    lazyLoading: PropTypes.bool,
+    /** type of image was allowed */
+    matchType: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.func, PropTypes.array]),
+    /** maximum size for avatar file (unit: MB) */
+    maxSize: PropTypes.number,
+    /** the error to show on exceeded allowed size */
+    maxSizeError: PropTypes.string,
+    /** will run after change avatar */
+    onChange: PropTypes.func,
+    /** Callback fired when the component is clicked. */
+    onClick: PropTypes.func,
+    /** will run after remove avatar */
+    onRemove: PropTypes.func,
+    /** border of avatar (true or '1px solid #color') */
+    outlined: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** only view and allow show more info if hoverAble is true */
+    readOnly: PropTypes.bool,
+    /** source of file (http:// or https://) */
+    src: PropTypes.string,
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /** The width of avatar box (48 or '48px' or ...) */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** the error to show on wrong type */
+    wrongTypeError: PropTypes.string,
+    /**
+     * ref methods (ref.current.instance.*method*)
+     *
+     * * option(): Gets all UI component properties
+     *  * Returns value - object
+     * * option(optionName): Gets the value of a single property
+     *  * @param {optionName} - string
+     *  * Returns value - any
+     * * option(optionName, optionValue): Updates the value of a single property
+     *  * @param {optionName} - string
+     *  * @param {optionValue} - any
+     * * option(options): Updates the values of several properties
+     *  * @param {options} - object
+     */
+    ref: ref,
+};
+
+export { Avatar };
+export default OptionWrapper(Avatar);

package/src/components/avatar/index.stories.js

@@ -0,0 +1,80 @@
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { useTheme } from 'theme';
+import { Avatar } from '.';
+
+const theme = useTheme();
+Avatar.defaultProps = theme?.components?.Avatar?.defaultProps || {};
+
+export default {
+    title: 'Components/Avatar',
+    component: Avatar,
+    parameters: {
+        componentSubtitle: 'Displays an image that represents a user or organization.',
+    },
+};
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'Avatar'} />
+            <Avatar {...args} />
+        </>
+    );
+};
+
+const Template2 = args => {
+    return (
+        <>
+            <ImportComp components={'Avatar'} />
+            {[...Array(200).keys()].map((_, idx) => {
+                return <Avatar key={idx} {...args} src={`https://via.placeholder.com/1200x1200&text=image${idx}`} />;
+            })}
+        </>
+    );
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+    defaultSrc: 'https://diginet.com.vn/wp-content/uploads/2020/05/oops-2.png',
+    src: 'https://diginet.com.vn/wp-content/uploads/2020/04/Group-18.png',
+};
+
+export const AllowEdit = Template.bind({});
+AllowEdit.args = {
+    ...Basic.args,
+    allowEdit: true,
+};
+
+export const WithoutSrcAndErrorSrc = Template.bind({});
+WithoutSrcAndErrorSrc.args = {
+    ...Basic.args,
+    src: null,
+};
+
+export const WithoutSrcAndDefaultSrc = Template.bind({});
+WithoutSrcAndDefaultSrc.args = {
+    src: null,
+    defaultSrc: null,
+};
+
+export const Hoverable = Template.bind({});
+Hoverable.args = {
+    ...Basic.args,
+    data: {
+        'Nhân viên': 'Huu Thuan Legend',
+        Tuổi: 18,
+        'Chức vụ': 'Tester',
+        'Tình trạng hôn nhân': 'Single',
+    },
+    hoverAble: true,
+};
+
+export const LazyLoading = Template2.bind({});
+LazyLoading.parameters = { controls: { exclude: ['src'] } };
+LazyLoading.args = {
+    width: 100,
+    height: 100,
+    disabled: true,
+    lazyLoading: true,
+};