diginet-core-ui 1.4.39 → 1.4.40

package/src/components/list/list-item-action.js

@@ -0,0 +1,94 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    boxBorder,
+    displayFlex,
+    itemsCenter,
+    order,
+    parseMaxHeight,
+    positionRelative,
+    textColor,
+    z,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp } from 'utils';
+
+const ListItemAction = memo(
+    forwardRef(({ children, name, className, style, onClick, ...props }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        const theme = useTheme();
+        const { colors, spacing } = theme;
+
+        const ListItemActionCSS = css`
+            ${displayFlex};
+            ${positionRelative};
+            ${itemsCenter};
+            ${parseMaxHeight(24)};
+            margin-left: ${spacing([4])};
+            line-height: 40px;
+            ${textColor(getProp(colors, 'system/active'))};
+            ${bgColor('transparent')};
+            ${boxBorder};
+            ${order(3)};
+            ${z(1)};
+        `;
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const ListItemActionView = useMemo(() => {
+            let node = children;
+            if (!node) {
+                node = <ButtonIcon viewType={'ghost'} name={name} onClick={onClick} />;
+            }
+            return (
+                <div
+                    className={classNames('DGN-UI-List-Item-Action', className)}
+                    css={ListItemActionCSS}
+                    ref={ref}
+                    style={style}
+                    {...props}
+                >
+                    {node}
+                </div>
+            );
+        }, [children, name, style, theme]);
+
+        return ListItemActionView;
+    })
+);
+
+ListItemAction.defaultProps = {
+    className: '',
+};
+
+ListItemAction.propTypes = {
+    /** the name of icon to display in ListItemAction (used instead of children) */
+    name: PropTypes.string,
+    /** classes name for list item action */
+    className: PropTypes.string,
+    /** the function to get ref of ListItemAction */
+    refs: PropTypes.func,
+    /** the function for click event */
+    onClick: PropTypes.func,
+    /** style inline of ListItemAction */
+    style: PropTypes.object,
+    /** content to display in ListItem */
+    children: PropTypes.node,
+};
+
+export default ListItemAction;

package/src/components/list/list-item-icon.js

@@ -0,0 +1,89 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Icon } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    boxBorder,
+    displayFlex,
+    itemsCenter,
+    order,
+    parseMinWidth,
+    positionRelative,
+    textColor,
+    z,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp } from 'utils';
+
+const ListItemIcon = memo(
+    forwardRef(({ className, children, name, style, ...props }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        const theme = useTheme();
+
+        const ListItemIconCSS = css`
+            ${displayFlex};
+            ${positionRelative};
+            ${itemsCenter};
+            ${parseMinWidth(40)};
+            ${textColor(getProp(theme.colors, 'system/active'))};
+            ${bgColor('transparent')};
+            ${boxBorder};
+            ${order(1)};
+            ${z(1)};
+        `;
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const ListItemIconView = useMemo(() => {
+            let node = children;
+            if (!node) {
+                node = <Icon name={name} />;
+            }
+            return (
+                <div
+                    css={ListItemIconCSS}
+                    className={classNames('DGN-UI-List-Item-Icon', className)}
+                    ref={ref}
+                    style={style}
+                    {...props}
+                >
+                    {node}
+                </div>
+            );
+        }, [children, name, theme]);
+
+        return ListItemIconView;
+    })
+);
+
+ListItemIcon.defaultProps = {
+    className: '',
+};
+
+ListItemIcon.propTypes = {
+    /** the name of icon to display in ListItemIcon (used instead of children) */
+    name: PropTypes.string,
+    /** class for ListItemIcon */
+    className: PropTypes.string,
+    /** the function to get ref of ListItemIcon */
+    refs: PropTypes.func,
+    /** style inline of ListItemIcon */
+    style: PropTypes.object,
+    /** the icon to display in ListItem */
+    children: PropTypes.node,
+};
+
+export default ListItemIcon;

package/src/components/list/list-item-text.js

@@ -0,0 +1,69 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Typography } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { bgColor, boxBorder, displayFlex, itemsCenter, order, positionRelative } from 'styles/general';
+import { classNames } from 'utils';
+
+const ListItemText = memo(
+    forwardRef(({ className, children, style, ...props }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        const ListItemTextCSS = css`
+            ${displayFlex};
+            flex: 1 1 auto;
+            ${positionRelative};
+            ${itemsCenter};
+            ${bgColor('inherit')};
+            ${boxBorder};
+            ${order(2)};
+        `;
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const ListItemTextView = useMemo(
+            () => (
+                <div
+                    css={ListItemTextCSS}
+                    className={classNames('DGN-UI-List-Item-Text', className)}
+                    ref={ref}
+                    style={style}
+                    {...props}
+                >
+                    <Typography>{children}</Typography>
+                </div>
+            ),
+            [children]
+        );
+
+        return ListItemTextView;
+    })
+);
+
+ListItemText.defaultProps = {
+    className: '',
+};
+
+ListItemText.propTypes = {
+    /** class for ListItemText */
+    className: PropTypes.string,
+    /** the function to get ref of ListItemText */
+    refs: PropTypes.func,
+    /** style inline of ListItemText */
+    style: PropTypes.object,
+    /** content to display in ListItem */
+    children: PropTypes.node,
+};
+
+export default ListItemText;

package/src/components/list/list-item.js

@@ -0,0 +1,131 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import Ripple from 'components/button/ripple-effect';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    boxBorder,
+    cursorPointer,
+    displayFlex,
+    flexRow,
+    itemsCenter,
+    overflowHidden,
+    parseMaxWidth,
+    parseMinHeight,
+    parseWidthHeight,
+    positionRelative,
+    textColor,
+    userSelectNone,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp } from 'utils';
+
+const ListItem = memo(
+    forwardRef(({ children, className, style, onClick, button, inset, ...props }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        const theme = useTheme();
+        const { spacing } = theme;
+
+        const ListItemCSS = css`
+            ${displayFlex};
+            ${flexRow};
+            ${positionRelative};
+            flex: 1 1 auto;
+            ${itemsCenter};
+            ${parseWidthHeight('100%', 'auto')};
+            ${parseMaxWidth(360)};
+            ${parseMinHeight(32)};
+            padding: ${spacing([0, 4])};
+            ${textColor(getProp(theme.colors, 'system/active'))};
+            ${overflowHidden};
+            ${bgColor('inherit')}
+            ${boxBorder};
+            &.click-able {
+                ${cursorPointer};
+                ${userSelectNone};
+                &:hover {
+                    ${bgColor(getProp(theme.colors, 'fill/hover'))};
+                }
+            }
+            &.DGN-Active {
+                ${bgColor(getProp(theme.colors, 'fill/hover'))};
+            }
+            &.inset {
+                padding-left: ${spacing([14])};
+            }
+        `;
+
+        const handleClick = e => {
+            const { currentTarget, target } = e;
+            const actionNode = currentTarget.querySelector('.DGN-UI-List-Item-Action');
+            if (!actionNode || !actionNode.contains(target)) {
+                onClick(e);
+            }
+        };
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        useEffect(() => {
+            if (inset) {
+                ref.current.classList.add('inset');
+            }
+            return () => {
+                if (inset && ref.current) {
+                    ref.current.classList.remove('inset');
+                }
+            };
+        }, [inset]);
+
+        const ListItemView = useMemo(
+            () => (
+                <div
+                    css={ListItemCSS}
+                    className={classNames('DGN-UI-List-Item', onClick && 'click-able', className)}
+                    ref={ref}
+                    onClick={onClick ? handleClick : null}
+                    style={style}
+                    {...props}
+                >
+                    {children}
+                    {button && <Ripple />}
+                </div>
+            ),
+            [children, button, style, theme]
+        );
+
+        return ListItemView;
+    })
+);
+
+ListItem.defaultProps = {
+    className: '',
+};
+
+ListItem.propTypes = {
+    /** has the same effect as a button if true */
+    button: PropTypes.bool,
+    /** classes name for list item */
+    className: PropTypes.string,
+    /** the function to get ref of ListItem */
+    refs: PropTypes.func,
+    /** the function for click event */
+    onClick: PropTypes.func,
+    /** style inline of ListItem */
+    style: PropTypes.object,
+    /** includes ListItemIcon, ListItemText, ListItemAction */
+    children: PropTypes.node,
+};
+
+export default ListItem;

package/src/components/list/list.js

@@ -0,0 +1,164 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    borderRadius,
+    boxBorder,
+    displayBlock,
+    parseMaxHeight,
+    parseMaxWidth,
+    parseWidth,
+    parseWidthHeight,
+    positionRelative,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { classNames, getProp } from 'utils';
+
+const levels = [0, 1, 'second', 'third', 'fourth', 'fifth'];
+
+const List = memo(
+    forwardRef(({ className, width, maxWidth, children, style, scrollAble, maxHeight, level, ...props }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        const theme = useTheme();
+        const { spacing } = theme;
+
+        const ListCSS = css`
+            ${displayBlock};
+            ${positionRelative};
+            ${parseWidthHeight(width, 'auto')}
+            ${parseMaxWidth(maxWidth)}
+            padding:${spacing([1.25, 0])};
+            ${bgColor(getProp(theme.colors, 'system/standard'))};
+            ${boxBorder};
+            &.scroll-able {
+                ${parseMaxHeight(maxHeight ?? 300)};
+                overflow-y: auto;
+                padding-top: ${spacing([0])};
+                &::-webkit-scrollbar {
+                    ${parseWidth(6)};
+                    ${bgColor(getProp(theme.colors, 'system/standard'))};
+                    ${borderRadius(4)};
+                }
+                &::-webkit-scrollbar-thumb {
+                    ${borderRadius(10)};
+                    mix-blend-mode: normal;
+                    ${bgColor(getProp(theme.colors, 'system/disabled'))};
+                    background-clip: content-box;
+                }
+            }
+            .second {
+                padding: ${spacing([0])};
+                .DGN-UI-List-Item {
+                    padding-left: ${spacing([8])};
+                }
+            }
+            .third {
+                padding: ${spacing([0])};
+                .DGN-UI-List-Item {
+                    padding-left: ${spacing([12])};
+                }
+            }
+            .fourth {
+                padding: ${spacing([0])};
+                .DGN-UI-List-Item {
+                    padding-left: ${spacing([16])};
+                }
+            }
+            .fifth {
+                padding: ${spacing([0])};
+                .DGN-UI-List-Item {
+                    padding-left: ${spacing([20])};
+                }
+            }
+        `;
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        useEffect(() => {
+            if (level && level > 1 && level < levels.length) {
+                ref.current.classList.add(levels[level]);
+            }
+            return () => {
+                if (ref.current && level && level > 1 && level < levels.length) {
+                    ref.current.classList.remove(levels[level]);
+                }
+            };
+        }, [level]);
+
+        useEffect(() => {
+            if (scrollAble || maxHeight) {
+                ref.current.classList.add('scroll-able');
+            }
+            return () => {
+                if (ref.current && (scrollAble || maxHeight)) {
+                    ref.current.classList.remove('scroll-able');
+                }
+            };
+        }, [scrollAble, maxHeight]);
+
+        useEffect(() => {
+            if (style) {
+                Object.assign(ref.current.style, style);
+            }
+            return () => {
+                if (style && ref.current) {
+                    ref.current.style = null;
+                }
+            };
+        }, [style]);
+
+        const ListView = useMemo(
+            () => (
+                <div css={ListCSS} ref={ref} className={classNames('DGN-UI-List', className)} {...props}>
+                    {children}
+                </div>
+            ),
+            [children, theme]
+        );
+
+        return ListView;
+    })
+);
+
+List.defaultProps = {
+    scrollAble: false,
+    width: '100%',
+    maxWidth: '360px',
+    className: '',
+};
+
+List.propTypes = {
+    /** fixed height of List and positive scroll list items */
+    scrollAble: PropTypes.bool,
+    /** class for List */
+    className: PropTypes.string,
+    /** width of list */
+    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** max width */
+    maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** fixed height of List and positive scroll list items */
+    maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** represents the level of nested List, The higher the level, the content will be pushed */
+    level: PropTypes.number, // [1,2,3,4,5]
+    /** the function to get ref */
+    refs: PropTypes.func,
+    /** style inline for List */
+    style: PropTypes.object,
+    /** include list subheader, list items */
+    children: PropTypes.node,
+};
+
+export default List;

package/src/components/list/sub-header.js

@@ -0,0 +1,79 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Typography } from 'components';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    boxBorder,
+    displayBlock,
+    parseWidthHeight,
+    positionSticky,
+    textLeft,
+    top,
+    userSelectNone,
+    z,
+} from 'styles/general';
+import { useTheme } from 'theme';
+
+const ListSubHeader = memo(
+    forwardRef(({ children, style, ...props }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { spacing } = theme;
+
+        const ref = useRef(null);
+
+        const ListSubHeaderCSS = css`
+            ${displayBlock};
+            ${positionSticky};
+            ${top(0)};
+            ${parseWidthHeight('100%', 'auto')};
+            padding: ${spacing([0, 4])};
+            ${bgColor('inherit')};
+            ${boxBorder};
+            ${userSelectNone};
+            ${textLeft};
+            ${z(2)};
+        `;
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        const ListSubHeaderRootView = useMemo(
+            () => (
+                <div css={ListSubHeaderCSS} ref={ref} style={style} {...props}>
+                    <Typography
+                        type={'h4'}
+                        color={'system/disabled'}
+                        style={{ textTransform: 'initial', lineHeight: '32px' }}
+                    >
+                        {children}
+                    </Typography>
+                </div>
+            ),
+            [children]
+        );
+
+        return ListSubHeaderRootView;
+    })
+);
+
+ListSubHeader.propTypes = {
+    /** the function to get ref of ListSubHeader */
+    refs: PropTypes.func,
+    /** style inline of ListSubHeader */
+    style: PropTypes.object,
+    /** element to display is a subtitle */
+    children: PropTypes.node,
+};
+
+export default ListSubHeader;