diginet-core-ui 1.4.39 → 1.4.40

package/src/components/form-control/checkbox/index.js

@@ -0,0 +1,382 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Typography } from 'components';
+import PropTypes from 'prop-types';
+import { Fragment, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import {
+    bgColor,
+    border,
+    borderColor,
+    borderRadius,
+    boxBorder,
+    cursorNotAllowed,
+    cursorPointer,
+    displayBlock,
+    displayFlex,
+    flexRow,
+    itemsCenter,
+    itemsStart,
+    left,
+    parseMinWidthHeight,
+    parseWidth,
+    parseWidthHeight,
+    positionAbsolute,
+    positionRelative,
+    scale,
+    textColor,
+    top,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp, randomString, refType as ref } from 'utils';
+
+const padding = 0.75;
+
+const Checkbox = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Checkbox' });
+        const {
+            action = {},
+            checked,
+            children,
+            className,
+            color: colorProp,
+            defaultChecked,
+            determinate,
+            disabled,
+            forTreeView,
+            id: idProp,
+            inputProps,
+            inputRef: inputRefProp,
+            label,
+            labelProps,
+            name,
+            onChange,
+            readOnly,
+            required,
+            stopPropagation,
+            value,
+            width: widthProp,
+            ...other
+        } = props;
+
+        const inputRef = inputRefProp || useRef(null);
+        let width = widthProp;
+        if (typeof widthProp === 'number') width += 'px';
+        const id = idProp || 'DGN-UI-' + randomString(10, { allowNumber: false, allowSymbol: false });
+
+        const ref = useRef(null);
+
+        const theme = useTheme();
+        const { colors, spacing } = useTheme();
+        const color = getProp(colors, colorProp, colorProp);
+
+        const [checkedState, setCheckedState] = useState(checked || defaultChecked);
+
+        // if (!id) {
+        //     [id] = useState('DGN-UI-' + randomString(10, { allowNumber: false, allowSymbol: false }));
+        // }
+
+        const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, color, theme);
+        const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, color, colors);
+
+        const handleChange = event => {
+            stopPropagation && event.stopPropagation();
+            if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
+            const oldLogicChecked = inputRef.current.checked; //Use for TreeView
+            if (forTreeView) {
+                inputRef.current.checked = !oldLogicChecked; //Use for TreeView
+            }
+            setChecked(checked !== undefined ? Boolean(checked) : !checkedState);
+            const currentInputRef = inputRef.current;
+            if (!forTreeView) inputRef.current.checked = !checkedState;
+            const e = {
+                value: forTreeView ? oldLogicChecked : !checkedState,
+                target: currentInputRef,
+            };
+            if (onChange) onChange(e);
+        };
+
+        const setChecked = check => {
+            if (typeof check === 'boolean') {
+                setCheckedState(check);
+            }
+        };
+
+        useEffect(() => {
+            if (checked !== undefined) setCheckedState(Boolean(checked));
+        }, [checked]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            currentRef.element = ref.current;
+            const _instance = {
+                determinate: determinate,
+                setChecked: setChecked,
+                getChecked: () => checkedState,
+                ...action,
+            }; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            currentRef.determinate = determinate;
+            currentRef.setChecked = setChecked;
+            currentRef.getChecked = () => checkedState;
+            return currentRef;
+        });
+
+        return (
+            <div
+                id={'DGN-UI-Checkbox-' + id.replace('DGN-UI-', '')}
+                css={CheckboxContainerCSS}
+                className={classNames('DGN-UI-Checkbox', className)}
+                ref={ref}
+                {...other}
+                onClick={() => inputRef.current.click?.()}
+            >
+                <div
+                    css={CheckBoxRootCSS}
+                    className={classNames('DGN-UI-Checkbox-Root', disabled && 'disabled', readOnly && 'read-only')}
+                >
+                    <input
+                        value={value}
+                        {...inputProps}
+                        className={classNames(determinate ? 'determinate' : 'indeterminate', inputProps?.className)}
+                        readOnly={readOnly || inputProps.readOnly}
+                        disabled={disabled || inputProps.disabled}
+                        ref={inputRef}
+                        css={_CheckBoxInputCSS}
+                        id={id}
+                        name={name}
+                        type="checkbox"
+                        checked={checkedState}
+                        onChange={handleChange}
+                        hidden
+                    />
+                    <label css={CheckBoxLabelCSS}>
+                        <span
+                            className={classNames(
+                                determinate ? 'determinate' : 'indeterminate',
+                                readOnly && 'read-only',
+                                disabled && 'disabled'
+                            )}
+                            css={_CheckBoxSquareCSS}
+                        />
+                        {children || label ? (
+                            <Typography
+                                type={'p1'}
+                                css={css`
+                                    margin-left: ${spacing([1])};
+                                `}
+                                color={disabled ? 'system/disabled' : undefined}
+                                {...labelProps}
+                            >
+                                <Fragment>
+                                    {children || label}
+                                    {required ? (
+                                        <span
+                                            css={textColor(
+                                                disabled
+                                                    ? getProp(colors, 'system/disabled')
+                                                    : getProp(colors, 'semantic/danger')
+                                            )}
+                                        >
+                                            *
+                                        </span>
+                                    ) : null}
+                                </Fragment>
+                            </Typography>
+                        ) : null}
+                    </label>
+                </div>
+            </div>
+        );
+    })
+);
+
+const CheckBoxSquareCSS = (width, color, { colors, spacing }) => css`
+    ${displayFlex};
+    ${flexRow};
+    ${positionRelative};
+    ${cursorPointer};
+    ${boxBorder};
+    ${parseWidthHeight(width)};
+    ${border(2, getProp(colors, 'system/rest'))};
+    ${parseMinWidthHeight(width)};
+    ${bgColor(getProp(colors, 'system/standard'))};
+    ${borderRadius(2)};
+    margin: ${spacing([padding])};
+    &.determinate {
+        &::after {
+            ${displayBlock};
+            ${positionAbsolute};
+            ${parseWidthHeight(12.6, 7)};
+            ${left('50%')};
+            ${top('43%')};
+            content: '';
+            transform: translate(-50%, -50%) scale(0) rotate(45deg);
+            transition: transform 0.3s;
+        }
+    }
+    &.indeterminate {
+        &::after {
+            ${displayFlex};
+            ${flexRow};
+            ${positionAbsolute};
+            ${parseWidthHeight(10, 2)};
+            ${bgColor(getProp(colors, 'system/white'))};
+            ${left(2)};
+            ${top(6)};
+            ${scale(0)};
+            content: '';
+            transition: transform 0.3s;
+        }
+    }
+    &:not(.disabled):not(.read-only) {
+        &:hover {
+            box-shadow: 0 0 0 3px ${getProp(colors, 'fill/hover')};
+            ${bgColor(getProp(colors, 'fill/hover'))};
+            ${borderColor(color)};
+        }
+        &:focus,
+        &:active {
+            box-shadow: 0 0 0 3px ${getProp(colors, 'fill/pressed')};
+            ${bgColor(getProp(colors, 'fill/pressed'))};
+        }
+    }
+    &:not(disabled):focus {
+        box-shadow: 0 0 0 3px ${getProp(colors, 'fill/pressed')};
+        ${bgColor(getProp(colors, 'fill/pressed'))};
+    }
+    &.disabled,
+    &.read-only {
+        ${cursorNotAllowed};
+    }
+`;
+
+const CheckBoxInputCSS = (CheckBoxSquareCSSName, color, colors) => css`
+    &:checked + label > span.css-${CheckBoxSquareCSSName} {
+        &.determinate {
+            &::after {
+                transform: translate(-50%, -66%) scale(1) rotate(-45deg);
+                background: linear-gradient(
+                            ${getProp(colors, 'system/standard')},
+                            ${getProp(colors, 'system/standard')}
+                        )
+                        left bottom/2px 100%,
+                    linear-gradient(${getProp(colors, 'system/standard')}, ${getProp(colors, 'system/standard')}) left
+                        bottom/100% 2px;
+                background-repeat: no-repeat;
+            }
+        }
+        &.indeterminate {
+            &::after {
+                ${scale(1)};
+            }
+        }
+    }
+    &:checked:not(:disabled) + label > span.css-${CheckBoxSquareCSSName} {
+        ${bgColor(color)};
+        ${borderColor(color)};
+    }
+    &:checked:disabled {
+        & + label > span.css-${CheckBoxSquareCSSName} {
+            &:not(.indeterminate) {
+                ${bgColor(getProp(colors, 'system/disabled'))};
+            }
+            &.indeterminate {
+                ${bgColor(getProp(colors, 'formal2'))};
+                ${borderColor(getProp(colors, 'formal2'))};
+            }
+        }
+    }
+    &:disabled {
+        & + label > span.css-${CheckBoxSquareCSSName} {
+            ${borderColor(getProp(colors, 'system/disabled'))};
+        }
+    }
+`;
+
+const CheckBoxLabelCSS = css`
+    ${displayFlex};
+    ${flexRow};
+    ${positionRelative};
+    ${itemsCenter};
+    ${boxBorder};
+`;
+
+const CheckBoxRootCSS = css`
+    ${displayFlex};
+    ${flexRow};
+    ${itemsStart};
+    ${boxBorder};
+    & > label {
+        margin-bottom: 0px;
+    }
+`;
+
+const CheckboxContainerCSS = css`
+    ${displayBlock};
+    ${positionRelative};
+    ${parseWidth('fit-content')};
+`;
+
+// Checkbox.defaultProps = {
+//     className: '',
+//     color: 'primary',
+//     defaultChecked: false,
+//     determinate: true,
+//     disabled: false,
+//     inputProps: {},
+//     label: '',
+//     labelProps: {},
+//     readOnly: false,
+//     stopPropagation: true,
+//     width: 18,
+// };
+
+Checkbox.propTypes = {
+    /** If `true`, the component is checked. */
+    checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
+    /** Class for component. */
+    className: PropTypes.string,
+    /** The main color of the component. ['primary', 'info', 'success', 'warning', 'danger', #hex, rgb(#, #, #)] */
+    color: PropTypes.string,
+    /** The default checked state. Use when the component is not controlled. */
+    defaultChecked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
+    /** If `true` display tick or indeterminate if `false`. */
+    determinate: PropTypes.bool,
+    /** If `true`, the component is disabled. */
+    disabled: PropTypes.bool,
+    /** The id of the component. */
+    id: PropTypes.string,
+    /** [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. */
+    inputProps: PropTypes.object,
+    /** Pass a ref to the input element. */
+    inputRef: ref,
+    /** The name of the Radio is displayed on the interface. */
+    label: PropTypes.string,
+    /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography--title) applied to the `Typography` label. */
+    labelProps: PropTypes.object,
+    /** The name of the Checkbox corresponds to the label displayed on the interface. */
+    name: PropTypes.string,
+    /**
+     * Callback fired when the state is changed.
+     *
+     * You can pull out the new checked state by accessing `event.value` or `event.target.checked` (boolean).
+     */
+    onChange: PropTypes.func,
+    /** If `true`, the component is readonly. */
+    readOnly: PropTypes.bool,
+    /** If `true`, the label will indicate that the checkbox is required. */
+    required: PropTypes.bool,
+    /** The value of input */
+    value: PropTypes.any,
+    /** The width of checkbox. */
+    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default Checkbox;

package/src/components/form-control/checkbox/index.stories.js

@@ -0,0 +1,110 @@
+import { Checkbox, Col, Row } from 'components';
+import { ImportComp } from 'components/others/import/index.stories';
+import { useTheme } from 'theme';
+import React from 'react';
+import { SbTemplate, Template as TemplateItem } from 'utils';
+
+const theme = useTheme();
+Checkbox.defaultProps = theme?.components?.CheckBox?.defaultProps || {};
+
+export default {
+    title: 'Components/Checkbox',
+    component: Checkbox,
+    parameters: {
+        componentSubtitle: 'Checkboxes allow the user to select one or more items from a set.',
+    },
+};
+
+const propsCustom = [{ color: 'info' }, { color: 'warning' }, { color: 'danger' }];
+
+const TemplateCheckbox1 = args => {
+    return (
+        <SbTemplate
+            args={args}
+            componentName={'Checkbox'}
+            component={Checkbox}
+            propsCustom={propsCustom}
+            listItem={[
+                {
+                    horizontal: true,
+                    title: 'Basic',
+                },
+                {
+                    title: 'Checked - Color',
+                    horizontal: true,
+                    argsExtra: { checked: true },
+                },
+                {
+                    title: 'Disabled',
+                    horizontal: true,
+                    argsExtra: { disabled: true },
+                },
+                {
+                    title: 'ReadOnly',
+                    horizontal: true,
+                    argsExtra: { readOnly: true },
+                },
+            ]}
+        />
+    );
+};
+
+const TemplateCheckbox = args => {
+    return (
+        <Row>
+            <Col xs={12}>
+                <ImportComp components={'Checkbox'} />
+            </Col>
+            <Col xs={12}>
+                <TemplateItem horizontal title={'Basic'} args={args} component={Checkbox} propsCustom={propsCustom} />
+                <TemplateItem
+                    horizontal
+                    title={'Checked - Color'}
+                    args={{ ...args, checked: true }}
+                    component={Checkbox}
+                    propsCustom={propsCustom}
+                />
+                <TemplateItem
+                    horizontal
+                    title={'Disabled'}
+                    args={{ ...args, disabled: true }}
+                    component={Checkbox}
+                    propsCustom={propsCustom}
+                />
+                <TemplateItem
+                    horizontal
+                    title={'ReadOnly'}
+                    args={{ ...args, readOnly: true }}
+                    component={Checkbox}
+                    propsCustom={propsCustom}
+                />
+            </Col>
+        </Row>
+    );
+};
+
+const Template = args => {
+    return (
+        <>
+            <ImportComp components={'Checkbox'} />
+            <Checkbox {...args} />
+        </>
+    );
+};
+
+// TemplateCheckbox và TemplateCheckbox1 là 2 cách viết render tương tự nhau
+export const Basic = TemplateCheckbox.bind({});
+
+// Có thẻ viết 1 trong 2 cách
+export const Required = TemplateCheckbox1.bind({});
+// export const Required = TemplateCheckbox.bind({});
+
+export const Custom = Template.bind({});
+
+Basic.args = {
+    label: 'CheckBox',
+};
+Required.args = {
+    ...Basic.args,
+    required: true,
+};

package/src/components/form-control/control/index.js

@@ -0,0 +1,99 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { displayBlock, pointerEventsNone, positionRelative, textColor, userSelectNone } from 'styles/general';
+import { getProp } from 'utils';
+import { useTheme } from 'theme';
+
+const Control = memo(
+    forwardRef(({ children, className, disabled, error, style, ...props }, reference) => {
+        const ref = useRef(null);
+
+        const { colors } = useTheme();
+
+        const classes = {
+            disabled: 'DGN-UI-Control-disabled',
+            error: 'DGN-UI-Control-error',
+        };
+
+        useLayoutEffect(() => {
+            if (disabled) {
+                ref.current.classList.add(classes.disabled);
+            }
+            if (!disabled && error) {
+                ref.current.classList.add(classes.error);
+                ref.current.querySelector('div.DGN-UI-InputBase').classList.add('danger');
+            }
+
+            return () => {
+                if (disabled) {
+                    ref.current.classList.remove(classes.disabled);
+                }
+                if (!disabled && error) {
+                    ref.current.classList.remove(classes.error);
+                    ref.current.querySelector('div.DGN-UI-InputBase').classList.remove('danger');
+                }
+            };
+        }, [disabled, error]);
+
+        useImperativeHandle(reference, () => {
+            const currentRef = ref.current || {};
+            const _instance = {}; // methods
+            _instance.__proto__ = {}; // hidden methods
+            currentRef.instance = _instance;
+            return currentRef;
+        });
+
+        return (
+            <div
+                {...props}
+                className={['DGN-UI-Control', className].join(' ').trim().replace(/\s+/g, ' ')}
+                css={controlRootCSS(classes, colors)}
+                style={style}
+                ref={ref}
+            >
+                {children}
+            </div>
+        );
+    })
+);
+
+const controlRootCSS = (classes, colors) => css`
+    ${displayBlock}
+    ${positionRelative}
+    margin-bottom: 20px;
+    &.${classes.disabled} {
+        ${pointerEventsNone}
+        ${userSelectNone}
+    }
+    &.${classes.error} {
+        * :not(label) {
+            ${textColor(getProp(colors, 'semantic/danger'))};
+        }
+    }
+`;
+
+Control.defaultProps = {
+    className: '',
+    style: {},
+    disabled: false,
+    error: '',
+};
+
+Control.propTypes = {
+    /** children of the form control */
+    children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]).isRequired,
+    /** the class for the form control */
+    className: PropTypes.string,
+    /** prevent all event if true, hide all icon */
+    disabled: PropTypes.bool,
+    /** error for input */
+    error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    /** style of the component */
+    style: PropTypes.object,
+};
+
+export default Control;