diginet-core-ui 1.4.39 → 1.4.40

package/src/components/badge/index.js

@@ -0,0 +1,307 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Icon } from 'components';
+import OptionWrapper from 'components/others/option-wrapper';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import {
+    bgColor,
+    borderRadius4px,
+    boxBorder,
+    displayInlineFlex,
+    flexRow,
+    flexWrap,
+    itemsCenter,
+    justifyCenter,
+    parseMinWidthHeight,
+    parseWidthHeight,
+    pointerEventsNone,
+    positionAbsolute,
+    positionRelative,
+    textColor,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp } from 'utils';
+
+const colorMap = new Map([['default', 'system/rest']]);
+
+const iconSizeMap = new Map([
+    ['medium', 24],
+    ['large', 32],
+    ['giant', 40],
+]);
+
+const dotSizeMap = new Map([
+    ['medium', 8],
+    ['large', 10],
+    ['giant', 12],
+]);
+
+const dotIndentMap = new Map([
+    ['medium', 4],
+    ['large', 2],
+]);
+
+const typographySizeMap = new Map([
+    ['medium', 'paragraph3'],
+    ['large', 'paragraph2'],
+    ['giant', 'paragraph1'],
+]);
+
+const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) => {
+    const halfDotSize = dotSize / 2;
+    const { horizontal, vertical } = anchorOrigin;
+    const dotIndent = hasContent ? dotIndentMap.get(size) || 0 : 0;
+    const verticalCssRight =
+        vertical === 'bottom'
+            ? css`
+                  bottom: ${-dotIndent}px;
+              `
+            : css`
+                  top: ${-dotIndent}px;
+              `;
+    const verticalCssLeft =
+        vertical === 'bottom'
+            ? css`
+                  bottom: ${-halfDotSize}px;
+              `
+            : css`
+                  top: ${-halfDotSize}px;
+              `;
+    if (contentDirection === 'right') {
+        if (horizontal === 'left') {
+            return css`
+                left: ${-dotIndent}px;
+                ${verticalCssRight};
+            `;
+        } else {
+            return css`
+                left: ${`calc(100% - ${dotSize - dotIndent}px);`};
+                ${verticalCssRight};
+            `;
+        }
+    } else {
+        if (horizontal === 'left') {
+            return css`
+                right: ${`calc(100% - ${halfDotSize}px);`};
+                ${verticalCssLeft};
+            `;
+        } else {
+            return css`
+                right: ${`${-halfDotSize}px;`};
+                ${verticalCssLeft};
+            `;
+        }
+    }
+};
+
+const Badge = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+        const { colors, typography } = theme;
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Badge' });
+        const {
+            action = {},
+            anchorOrigin,
+            children,
+            className,
+            color,
+            content,
+            contentDirection,
+            iconProps,
+            id,
+            invisible,
+            max,
+            name,
+            showZero,
+            size,
+            style,
+            ...other
+        } = props;
+
+        const ref = useRef(null);
+
+        const typographySize = typography[typographySizeMap.get(size)];
+        const iconSize = iconSizeMap.get(size);
+        const dotSize = content || (content === 0 && showZero) ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
+
+        let dotColor = colorMap.get(color) || color;
+        dotColor = getProp(colors, dotColor, dotColor);
+
+        const dotPos = calDotPos(
+            anchorOrigin,
+            !children && name ? 'right' : contentDirection,
+            dotSize,
+            content || content === 0,
+            size
+        );
+
+        const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor, theme);
+        const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS.name);
+
+        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(() => {
+            let node = children;
+            if (!node && name) {
+                node = (
+                    <Icon
+                        viewBox
+                        name={name}
+                        width={iconSize}
+                        height={iconSize}
+                        color={'currentColor'}
+                        {...iconProps}
+                    />
+                );
+            }
+            return (
+                <div
+                    css={_BadgeRootCSS}
+                    ref={ref}
+                    id={id}
+                    className={classNames('DGN-UI-Badge', className)}
+                    style={style}
+                    {...other}
+                >
+                    <span className={'DGN-UI-Badge-Children'}>{node}</span>
+                    {content !== undefined && !invisible ? (
+                        <span css={_BadgeNumberCSS} className={'DGN-UI-Badge-Dot'}>
+                            {max && content > max ? max + '+' : content === 0 && !showZero ? null : content}
+                        </span>
+                    ) : null}
+                </div>
+            );
+        }, [
+            anchorOrigin,
+            children,
+            className,
+            color,
+            content,
+            contentDirection,
+            iconProps,
+            id,
+            invisible,
+            max,
+            name,
+            other,
+            showZero,
+            size,
+            style,
+            theme,
+        ]);
+    })
+);
+
+const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, { colors, spacing }) => css`
+    ${typographySize};
+    ${flexRow};
+    ${itemsCenter};
+    ${justifyCenter};
+    ${flexWrap};
+    ${boxBorder};
+    ${pointerEventsNone};
+    ${children || name ? positionAbsolute : positionRelative};
+    ${textColor(getProp(colors, 'system/standard'))};
+    ${bgColor(dotColor)};
+    ${parseMinWidthHeight(dotSize)};
+    border-radius: ${dotSize / 2}px;
+    padding: ${spacing([0, 1])};
+`;
+
+const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
+    ${displayInlineFlex};
+    ${itemsCenter};
+    ${justifyCenter};
+    ${positionRelative};
+    ${boxBorder};
+    ${borderRadius4px};
+    ${parseWidthHeight('max-content')};
+    ${parseMinWidthHeight('max-content')};
+    .css-${BadgeNumberCSSName} {
+        ${(children || name) && dotPos};
+    }
+`;
+
+// Badge.defaultProps = {
+//     anchorOrigin: { vertical: 'top', horizontal: 'right' },
+//     className: '',
+//     color: 'default',
+//     content: null,
+//     contentDirection: 'left',
+//     invisible: false,
+//     max: 99,
+//     showZero: false,
+//     size: 'medium',
+//     style: {},
+// };
+
+Badge.propTypes = {
+    /** The anchor of the badge. */
+    anchorOrigin: PropTypes.shape({
+        horizontal: PropTypes.oneOf(['left', 'right']),
+        vertical: PropTypes.oneOf(['top', 'bottom']),
+    }),
+    /** The badge will be added relative to this node. */
+    children: PropTypes.node,
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The color of the component. */
+    color: PropTypes.oneOfType([
+        PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
+        PropTypes.string,
+    ]),
+    /** The content rendered within the badge. */
+    content: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    /** Direction of content within the badge */
+    contentDirection: PropTypes.oneOf(['left', 'right']),
+    /** If `true`, the badge is invisible */
+    invisible: PropTypes.bool,
+    /** Max count to show. */
+    max: PropTypes.number,
+    /** Prop name of [ButtonIcon](https://core.diginet.com.vn/ui/?path=/docs/buttonicon) components.  */
+    name: PropTypes.string,
+    /** Controls whether the badge is hidden when `content` is zero. */
+    showZero: PropTypes.bool,
+    /** Size of the components.
+     *
+     * * medium (dot 8px, typography p3)
+     * * large (button 10px, typography p2)
+     * * giant (button 12px, typography p1)
+     * */
+    size: PropTypes.oneOf(['medium', 'large', 'giant']),
+    /** Style inline of component. */
+    style: PropTypes.object,
+    /**
+     * 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
+     */
+};
+
+export { Badge };
+export default OptionWrapper(Badge);

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

@@ -0,0 +1,187 @@
+import { ButtonIcon, Icon, Typography } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import React from 'react';
+import { useTheme } from 'theme';
+import { Badge } from '.';
+
+const theme = useTheme();
+Badge.defaultProps = theme?.components?.Badge?.defaultProps || {};
+
+export default {
+    title: 'Components/Badge',
+    component: Badge,
+    parameters: {
+        componentSubtitle: 'Badge generates a small badge to the top-right of its child(ren).',
+    },
+};
+
+const styles = {
+    flexRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: 24,
+    },
+    flexCol: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 24,
+    },
+};
+
+const colorArr = ['default', 'primary', 'info', 'success', 'warning', 'danger'];
+const contentArr = [null, 1, 100, 'Update'];
+
+const renderSize = (args, size) => {
+    return (
+        <div style={styles.flexRow}>
+            <Typography type={'h4'} color={'primary'}>
+                {size}
+            </Typography>
+            {contentArr.map((content, idx) => (
+                <Badge key={idx} {...args} color={'danger'} size={size} content={content} />
+            ))}
+        </div>
+    );
+};
+
+const renderLeft = (args, children) => {
+    return (
+        <div style={styles.flexRow}>
+            {contentArr.map((content, idx) => (
+                <Badge key={idx} {...args} color={'danger'} content={content}>
+                    {children}
+                </Badge>
+            ))}
+        </div>
+    );
+};
+
+const renderRight = (args, circular = false) => {
+    return (
+        <div style={styles.flexRow}>
+            {contentArr.map((content, idx) => (
+                <ButtonIcon key={idx} viewType={'text'} color={'primary'} circular={circular}>
+                    <Badge {...args} content={content} />
+                </ButtonIcon>
+            ))}
+        </div>
+    );
+};
+
+const Template = args => (
+    <>
+        <ImportComp components={'Badge'} />
+        <div style={styles.flexCol}>
+            <Typography type={'t1'} color={'primary'}>
+                Color
+            </Typography>
+            <div style={styles.flexRow}>
+                <Typography type={'h4'} color={'primary'}>
+                    Dot
+                </Typography>
+                {colorArr.map((color, idx) => (
+                    <Badge key={idx} {...args} color={color} />
+                ))}
+            </div>
+            <div style={styles.flexRow}>
+                <Typography type={'h4'} color={'primary'}>
+                    Minimum value
+                </Typography>
+                {colorArr.map((color, idx) => (
+                    <Badge key={idx} {...args} color={color} content={1} />
+                ))}
+            </div>
+            <div style={styles.flexRow}>
+                <Typography type={'h4'} color={'primary'}>
+                    Maximum value
+                </Typography>
+                {colorArr.map((color, idx) => (
+                    <Badge key={idx} {...args} color={color} content={100} />
+                ))}
+            </div>
+            <div style={styles.flexRow}>
+                <Typography type={'h4'} color={'primary'}>
+                    Text
+                </Typography>
+                {colorArr.map((color, idx) => (
+                    <Badge key={idx} {...args} color={color} content={'Update'} />
+                ))}
+            </div>
+            <Typography type={'t1'} color={'primary'}>
+                Size
+            </Typography>
+            {renderSize(args, 'medium')}
+            {renderSize(args, 'large')}
+            {renderSize(args, 'giant')}
+            <Typography type={'t1'} color={'primary'}>
+                contentDirection: left
+            </Typography>
+            {renderLeft(args, <Icon name={'wrong-name'} width={40} height={40} />)}
+            {renderLeft(args, <ButtonIcon name={'Notification'} viewType={'filled'} color={'primary'} />)}
+            {renderLeft(args, <ButtonIcon name={'Notification'} viewType={'filled'} color={'primary'} circular />)}
+            {renderLeft(args, <ButtonIcon name={'Notification'} viewType={'outlined'} color={'primary'} />)}
+            {renderLeft(args, <ButtonIcon name={'Notification'} viewType={'outlined'} color={'primary'} circular />)}
+
+            <Typography type={'t1'} color={'primary'}>
+                contentDirection: right
+            </Typography>
+            {renderLeft({ ...args, contentDirection: 'right' }, <Icon name={'wrong-name'} width={40} height={40} />)}
+            {renderRight({ ...args, name: 'Notification', color: 'danger' })}
+            {renderRight({ ...args, name: 'Notification', color: 'danger' }, true)}
+        </div>
+    </>
+);
+
+const Template2 = args => (
+    <>
+        <ImportComp components={'Badge'} />
+        <Badge {...args} color={'danger'}>
+            <ButtonIcon name={'Notification'} />
+        </Badge>
+    </>
+);
+
+const Template3 = args => (
+    <>
+        <ImportComp components={'Badge'} />
+        <ButtonIcon viewType={'text'}>
+            <Badge {...args} />
+        </ButtonIcon>
+    </>
+);
+
+const Template4 = args => (
+    <>
+        <ImportComp components={'Badge'} />
+        <Badge {...args} />
+    </>
+);
+
+export const Sample = Template.bind({
+    parameters: { controls: { disable: true } },
+});
+Sample.args = {
+    onClick: undefined,
+};
+
+export const BadgeOutside = Template2.bind({
+    parameters: { controls: { exclude: ['name', 'children'] } },
+});
+BadgeOutside.args = {
+    onClick: () => console.log('on click badge!'),
+};
+
+export const BadgeInside = Template3.bind({});
+BadgeInside.args = {
+    color: 'danger',
+    name: 'Notification',
+    onClick: () => console.log('on click badge!'),
+};
+
+export const Custom = Template4.bind({});
+Custom.args = {
+    color: 'danger',
+    onClick: () => console.log('on click badge!'),
+};