diginet-core-ui 1.4.39 → 1.4.40

package/src/components/tree-view/index.stories.js

@@ -0,0 +1,347 @@
+import { TreeView } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React, { useEffect, useState } from 'react';
+
+export default {
+    title: 'Components/TreeView',
+    component: TreeView,
+    parameters: {
+        componentSubtitle: 'A tree view widget presents a hierarchical list.',
+    },
+};
+
+const data = [
+    {
+        OrgunitParentID: 'TONGCONGTY',
+        OrgunitID: 'TONGCONGTY',
+        OrgunitName: 'Tổng công ty',
+        OrgunitLevelID: '01',
+        OrgLevelName: 'Tổng công ty',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 1,
+        DisplayOrder: 1,
+        IsShow: true,
+        MinChild: false,
+        expand: true,
+    },
+    {
+        OrgunitParentID: 'TONGCONGTY',
+        OrgunitID: 'HANOI',
+        OrgunitName: 'Đơn vị Bắc Dương',
+        OrgunitLevelID: '02',
+        OrgLevelName: 'Đơn vị',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 2,
+        DisplayOrder: 2,
+        IsShow: true,
+        MinChild: false,
+    },
+    {
+        OrgunitParentID: 'HANOI',
+        OrgunitID: 'KETOAN',
+        OrgunitName: 'Khối kế toán',
+        OrgunitLevelID: '03',
+        OrgLevelName: 'Khối',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 3,
+        DisplayOrder: 3,
+        IsShow: true,
+        MinChild: false,
+    },
+    {
+        OrgunitParentID: 'KETOAN',
+        OrgunitID: 'KETOANKHO',
+        OrgunitName: 'Tổ kế toán kho',
+        OrgunitLevelID: '04',
+        OrgLevelName: 'Phòng ban',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 4,
+        DisplayOrder: 4,
+        IsShow: true,
+        MinChild: false,
+    },
+    {
+        OrgunitParentID: 'KETOANKHO',
+        OrgunitID: 'TOTUVANKHO',
+        OrgunitName: 'Tổ tư vấn kho',
+        OrgunitLevelID: '05',
+        OrgLevelName: 'Tổ nhóm',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 5,
+        DisplayOrder: 5,
+        IsShow: false,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'KETOANKHO',
+        OrgunitID: 'BAOTRIKHO',
+        OrgunitName: 'Tổ bảo trì kho',
+        OrgunitLevelID: '05',
+        OrgLevelName: 'Tổ nhóm',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 5,
+        DisplayOrder: 6,
+        IsShow: false,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'KETOANKHO',
+        OrgunitID: 'VANHANHKHO',
+        OrgunitName: 'Tổ vận hành kho',
+        OrgunitLevelID: '05',
+        OrgLevelName: 'Tổ nhóm',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 5,
+        DisplayOrder: 7,
+        IsShow: false,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'KETOAN',
+        OrgunitID: 'KETOANVANPHONG',
+        OrgunitName: 'Tổ kế toán văn phòng',
+        OrgunitLevelID: '04',
+        OrgLevelName: 'Phòng ban',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 4,
+        DisplayOrder: 8,
+        IsShow: true,
+        MinChild: false,
+    },
+    {
+        OrgunitParentID: 'KETOANVANPHONG',
+        OrgunitID: 'TUVANVP',
+        OrgunitName: 'Tổ tư vấn văn phòng',
+        OrgunitLevelID: '05',
+        OrgLevelName: 'Tổ nhóm',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 5,
+        DisplayOrder: 9,
+        IsShow: false,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'KETOANVANPHONG',
+        OrgunitID: 'THONGKEVP',
+        OrgunitName: 'Tổ thống kê văn phòng',
+        OrgunitLevelID: '05',
+        OrgLevelName: 'Tổ nhóm',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 5,
+        DisplayOrder: 10,
+        IsShow: false,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'KETOAN',
+        OrgunitID: 'KETOANNHANSU',
+        OrgunitName: 'Tổ kế toán nhân sự',
+        OrgunitLevelID: '04',
+        OrgLevelName: 'Phòng ban',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 4,
+        DisplayOrder: 11,
+        IsShow: true,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'HANOI',
+        OrgunitID: 'NHANSU',
+        OrgunitName: 'Phòng nhân sự',
+        OrgunitLevelID: '03',
+        OrgLevelName: 'Khối',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 3,
+        DisplayOrder: 12,
+        IsShow: true,
+        MinChild: false,
+    },
+    {
+        OrgunitParentID: 'NHANSU',
+        OrgunitID: 'NHANSUNHOBD',
+        OrgunitName: 'Phòng nhân sự nhỏ',
+        OrgunitLevelID: '04',
+        OrgLevelName: 'Phòng ban',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 4,
+        DisplayOrder: 13,
+        IsShow: true,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'HANOI',
+        OrgunitID: 'HANHCHINHBD',
+        OrgunitName: 'Phòng hành chính Bắc Dương',
+        OrgunitLevelID: '03',
+        OrgLevelName: 'Khối',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 3,
+        DisplayOrder: 14,
+        IsShow: true,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'TONGCONGTY',
+        OrgunitID: 'HAIDUONG',
+        OrgunitName: 'Đơn vị Hải Dương',
+        OrgunitLevelID: '02',
+        OrgLevelName: 'Đơn vị',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 2,
+        DisplayOrder: 15,
+        IsShow: true,
+        MinChild: false,
+    },
+    {
+        OrgunitParentID: 'HAIDUONG',
+        OrgunitID: 'KETOANHAIDUONG',
+        OrgunitName: 'Khối kế toán Hải dương',
+        OrgunitLevelID: '03',
+        OrgLevelName: 'Khối',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 3,
+        DisplayOrder: 16,
+        IsShow: true,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'TONGCONGTY',
+        OrgunitID: 'TRUONGDUONG',
+        OrgunitName: 'Đơn vị Trường Dương',
+        OrgunitLevelID: '02',
+        OrgLevelName: 'Đơn vị',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 2,
+        DisplayOrder: 17,
+        IsShow: true,
+        MinChild: true,
+    },
+    {
+        OrgunitParentID: 'TONGCONGTY',
+        OrgunitID: 'DONGDUONG',
+        OrgunitName: 'Đơn vị Đông Dương',
+        OrgunitLevelID: '02',
+        OrgLevelName: 'Đơn vị',
+        OrgunitAddress: '',
+        Disabled: 0,
+        OrgLevel: 2,
+        DisplayOrder: 18,
+        IsShow: true,
+        MinChild: true,
+    },
+];
+
+const Template = args => {
+    const [value, setValue] = useState(args.value);
+
+    useEffect(() => {
+        setValue(args.value);
+    }, [args.value]);
+
+    return (
+        <>
+            <ImportComp components={'TreeView'} />
+            <TreeView {...args} value={value} onChange={e => setValue(e.value)} />
+        </>
+    );
+};
+
+export const Simple = Template.bind({});
+export const SelectBox = Template.bind({});
+export const Multiple = Template.bind({});
+export const MultipleNonChild = Template.bind({});
+export const DisabledRelevantValue = Template.bind({});
+export const MultipleInheritance = Template.bind({});
+export const SelectAll = Template.bind({});
+export const SearchAble = Template.bind({});
+export const ShowSelectedItems = Template.bind({});
+
+Simple.args = {
+    dataSource: data,
+    displayExpr: 'OrgunitName',
+    valueExpr: 'OrgunitID',
+    id: 'OrgunitID',
+    parentID: 'OrgunitParentID',
+    value: ['HANOI'],
+};
+
+SelectBox.args = {
+    ...Simple.args,
+    showSelectedItems: true,
+    selectBox: true,
+    value: ['KETOAN'],
+    onChange: e => console.log(e.value),
+};
+
+Multiple.args = {
+    ...Simple.args,
+    showSelectedItems: true,
+    multiple: true,
+    value: ['KETOAN', 'DONGDUONG'],
+    onChange: (e, data) => console.log(e.value, data),
+};
+
+MultipleNonChild.args = {
+    ...Simple.args,
+    multiple: true,
+    value: ['KETOAN', 'DONGDUONG'],
+    multipleValueMode: 'single',
+    // onChange: (e, data) => console.log(e.value, e.justSelected, data)
+};
+DisabledRelevantValue.args = {
+    ...Simple.args,
+    multiple: true,
+    disabledRelevantValue: true,
+    value: ['KETOAN', 'DONGDUONG'],
+    multipleValueMode: 'single',
+    onChange: (e, data) => console.log(e.value, e.justSelected, data),
+};
+MultipleInheritance.args = {
+    ...Simple.args,
+    multiple: true,
+    value: ['KETOAN', 'DONGDUONG'],
+    multipleValueMode: 'inheritance',
+    onChange: (e, data) => console.log(e.value, e.justSelected, data),
+};
+
+SelectAll.args = {
+    ...Simple.args,
+    multiple: true,
+    selectAll: true,
+    selectAllLabel: 'Chọn tất cả',
+    value: ['KETOAN', 'DONGDUONG'],
+    onChange: (e, data) => console.log(e.value, data),
+};
+
+SearchAble.args = {
+    ...Simple.args,
+    allowSearch: true,
+    searchDelayTime: '0.7s',
+};
+
+ShowSelectedItems.args = {
+    ...Simple.args,
+    multiple: true,
+    allowSearch: true,
+    showSelectedItems: true,
+    searchDelayTime: '0.7s',
+    value: ['KETOAN', 'DONGDUONG'],
+    onChange: (e, data) => console.log(e.value, e.justSelected, data),
+};

package/src/components/typography/index.js

@@ -0,0 +1,331 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Popover } from 'components';
+import PropTypes from 'prop-types';
+import { Fragment, forwardRef, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import {
+    breakAll,
+    breakWord,
+    cursorPointer,
+    displayBlock,
+    displayInlineBlock,
+    italic,
+    overflowHidden,
+    parseHeight,
+    parseMaxWidth,
+    parseMinWidth,
+    positionRelative,
+    textCapitalize,
+    textCenter,
+    textColor,
+    textLineThrough,
+    textLowercase,
+    textSentence,
+    textUnderline,
+    textUppercase,
+    whiteSpaceBreakSpaces,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp, renderHTML } from 'utils';
+
+const colorMap = new Map([['default', 'text/main']]);
+
+const formatMap = new Map([
+    ['capitalize', textCapitalize],
+    ['uppercase', textUppercase],
+    ['lowercase', textLowercase],
+    ['italic', italic],
+    ['line-through', textLineThrough],
+    ['underline', textUnderline],
+    ['sentence', textSentence],
+]);
+
+const isTextClamped = elm => elm?.scrollHeight > elm?.clientHeight;
+
+const Typography = memo(
+    forwardRef((inProps, reference) => {
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Typography' });
+        const {
+            action = {},
+            capitalize, // deprecated
+            center,
+            children,
+            className,
+            color: colorProp,
+            format,
+            fullWidth,
+            hoverTooltip,
+            italic,
+            lineClamp,
+            mapping,
+            onClick,
+            tooltipDirection,
+            type,
+            uppercase, // deprecated
+            ...other
+        } = props;
+
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        const theme = useTheme();
+        const formatCSS = [];
+        if (Array.isArray(format)) {
+            format.forEach(item => {
+                formatMap.get(item) && formatCSS.push(formatMap.get(item));
+            });
+        } else if (typeof format === 'string' && formatMap.get(format)) {
+            formatCSS.push(formatMap.get(format));
+        }
+
+        const [openTooltip, setOpenTooltip] = useState(false);
+
+        let color = colorMap.get(colorProp) || colorProp;
+        color = getProp(theme.colors, color, color);
+
+        const _TextRootCSS = [
+            TextRootCSS(color, type, lineClamp, onClick, hoverTooltip, center, fullWidth, uppercase, capitalize, theme),
+            ...formatCSS,
+        ];
+        const _PopoverContentCSS = PopoverContentCSS(theme);
+
+        const showTooltip = () => {
+            if (!hoverTooltip) return;
+            if (isTextClamped(ref.current)) {
+                setOpenTooltip(true);
+            }
+        };
+
+        const hideTooltip = () => {
+            if (!hoverTooltip) return;
+            if (isTextClamped(ref.current)) {
+                setOpenTooltip(false);
+            }
+        };
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const classes = classNames('DGN-UI-Typography', `DGN-UI-Typography-${type}`, className);
+
+        const content =
+            Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)')
+                ? children.join('')
+                : children;
+
+        const renderTooltip = hoverTooltip ? (
+            <Popover
+                css={parseMinWidth(300)}
+                open={openTooltip}
+                pressESCToClose={false}
+                fullScreen={false}
+                bgColor={'fill/tooltip'}
+                anchor={ref}
+                width={ref.current?.clientWidth || 'max-content'}
+                direction={tooltipDirection}
+            >
+                {renderHTML(content, mapping, {
+                    css: [_TextRootCSS, _PopoverContentCSS],
+                    className: classes,
+                })}
+            </Popover>
+        ) : null;
+
+        return useMemo(() => {
+            return (
+                <Fragment>
+                    {renderHTML(content, mapping, {
+                        ref: ref,
+                        css: [_TextRootCSS, lineClamp && ClampCSS(lineClamp)],
+                        className: classes,
+                        onMouseEnter: showTooltip,
+                        onMouseLeave: hideTooltip,
+                        onClick: onClick,
+                        ...other,
+                    })}
+                    {renderTooltip}
+                </Fragment>
+            );
+        }, [
+            capitalize,
+            center,
+            children,
+            className,
+            color,
+            format,
+            fullWidth,
+            hoverTooltip,
+            italic,
+            lineClamp,
+            mapping,
+            onClick,
+            tooltipDirection,
+            type,
+            uppercase,
+            openTooltip,
+            other,
+            theme,
+        ]);
+    })
+);
+
+const TextRootCSS = (
+    color,
+    type,
+    lineClamp,
+    onClick,
+    hoverTooltip,
+    center,
+    fullWidth,
+    uppercase,
+    capitalize,
+    { typography }
+) => css`
+    ${displayInlineBlock};
+    ${positionRelative};
+    ${onClick && cursorPointer};
+    ${hoverTooltip && lineClamp === 1 ? breakAll : breakWord};
+    ${whiteSpaceBreakSpaces};
+    ${textColor(color)};
+    ${parseMaxWidth('max-content')};
+    ${type !== 'inherit' && typography[type]};
+    ${center && textCenter};
+    ${uppercase && textUppercase};
+    ${capitalize && textCapitalize};
+    ${fullWidth &&
+    css`
+        ${displayBlock};
+        ${parseMaxWidth('initial')};
+    `}
+`;
+
+const ClampCSS = lineClamp => css`
+    ${overflowHidden};
+    display: -webkit-box;
+    -webkit-line-clamp: ${lineClamp};
+    -webkit-box-orient: vertical;
+`;
+
+const PopoverContentCSS = ({ colors, spacing }) => css`
+    ${textColor(getProp(colors, 'text/tooltip'))};
+    padding: ${spacing([1, 1.5])};
+    ${parseHeight('fit-content')};
+`;
+
+// Typography.defaultProps = {
+//     center: false,
+//     className: '',
+//     color: 'default',
+//     format: [],
+//     fullWidth: true,
+//     hoverTooltip: false,
+//     mapping: 'span',
+//     tooltipDirection: 'bottom',
+//     type: 'p1',
+// };
+
+/** type of text<br/>
+ * h1: Title <br/>
+ * h2: Header Popup <br/>
+ * h3: Header popup <br/>
+ * h4: Button, Tab, Title group <br/>
+ * h5: Label column, Title group <br/>
+ * h6: Label form <br/>
+ * p1: Body text <br/>
+ * p2: Body text <br/>
+ * p3: Notice, Tooltip <br/>
+ */
+export const arrTypeTypography = [
+    't1',
+    't2',
+    't3',
+    't4',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'p1',
+    'p2',
+    'p3',
+    'title1',
+    'title2',
+    'title3',
+    'title4',
+    'heading1',
+    'heading2',
+    'heading3',
+    'heading4',
+    'heading5',
+    'heading6',
+    'paragraph1',
+    'paragraph2',
+    'paragraph3',
+];
+
+Typography.propTypes = {
+    /** If `true`, text-align is center. */
+    center: PropTypes.bool,
+    /** The content of the component. */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** Color of text ['primary', 'secondary', 'success', 'warning', 'danger', 'info', '#hex', rgb(#,#,#)]. */
+    color: PropTypes.string,
+    /** Option to make the text bold, italic, capitalize or underline. */
+    format: PropTypes.oneOfType([
+        PropTypes.oneOf([
+            'capitalize',
+            'uppercase',
+            'lowercase',
+            'italic',
+            'line-through',
+            'underline',
+            'sentence',
+            'none',
+        ]),
+        PropTypes.arrayOf(
+            PropTypes.oneOf([
+                'capitalize',
+                'uppercase',
+                'lowercase',
+                'italic',
+                'line-through',
+                'underline',
+                'sentence',
+                'none',
+            ])
+        ),
+    ]),
+    /** If `true`, the component will take up the full width of its container. */
+    fullWidth: PropTypes.bool,
+    /** If `true`, hover will show tooltip when text clamped. */
+    hoverTooltip: PropTypes.bool,
+    /** The line-clamp property truncates text at a specific number of lines. */
+    lineClamp: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
+    /** The component used for the root node. Either a string to use a HTML element or a component. */
+    mapping: PropTypes.string,
+    /** Callback fired when the component is clicked. */
+    onClick: PropTypes.func,
+    /** Accepts all props which `mapping` tag support. */
+    props: PropTypes.object,
+    /** Tooltip direction. */
+    tooltipDirection: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+    /** Applies the theme typography styles. */
+    type: PropTypes.oneOf([...arrTypeTypography, 'inherit']),
+};
+
+export default Typography;