diginet-core-ui 1.4.39 → 1.4.40

package/src/components/form-control/time-picker/v2/index.stories.js

@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+import TimePicker from './';
+import { ImportComp } from 'components/others/import/index.stories';
+
+export default {
+    title: 'Components/TimePicker',
+    component: TimePicker,
+    parameters: {
+        componentSubtitle: 'TimePicker let users select time values.',
+    },
+};
+
+const Template = args => {
+    const [value, setValue] = useState(null);
+    console.log('🚀 ~ Template ~ value:', value);
+    return (
+        <>
+            <ImportComp components={'TimePicker'} />
+            <TimePicker
+                value={value}
+                onChange={e => {
+                    console.log('🚀 ~ Template ~ e:', e);
+                    setValue(e.value);
+                }}
+                {...args}
+            />
+        </>
+    );
+};
+
+export const Sample = Template.bind({});
+
+Sample.args = {
+    mode12h: false,
+    displayFormat: 'HH:mm',
+    returnFormat: 'HH:mm',
+    minuteStep: 15,
+    disabled: false,
+    viewType: 'underlined',
+    label: 'Thời gian',
+    readOnly: false,
+    required: false,
+};

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

@@ -0,0 +1,247 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Typography } from 'components';
+import PropTypes from 'prop-types';
+import { Fragment, forwardRef, memo, useEffect, useRef, useState } from 'react';
+import {
+    borderRadius,
+    cursorNoDrop,
+    cursorPointer,
+    displayBlock,
+    flexRow,
+    itemsCenter,
+    parseMinHeight,
+    parseMinWidth,
+    parseWidthHeight,
+    positionAbsolute,
+    positionRelative,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import useThemeProps from 'theme/utils/useThemeProps';
+import { classNames, getProp } from 'utils';
+
+const Toggle = memo(
+    forwardRef((inProps, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const theme = useTheme();
+
+        // props priority: `inProps` > `themeDefaultProps`
+        const props = useThemeProps({ props: inProps, name: 'Toggle' });
+        const {
+            checked,
+            disabled,
+            height,
+            hoverTooltip,
+            id,
+            inputProps,
+            inputRef: inputRefProp,
+            label,
+            lineClamp,
+            name,
+            readOnly,
+            required,
+            width,
+            defaultChecked,
+            onChange,
+            ...other
+        } = props;
+
+        const ref = useRef(null);
+        const inputRef = inputRefProp || useRef(null);
+
+        const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
+
+        const isEnable = !readOnly && !disabled;
+
+        const _FormCheckCSS = FormCheckCSS(height, theme);
+        const _ToggleCSS = ToggleCSS(theme);
+        const _SliderCSS = SliderCSS(checkedState, disabled, isEnable, width, height, theme);
+
+        const handleChange = () => {
+            if (!isEnable) return;
+            setCheckedState(checked !== undefined ? Boolean(checked) : !checkedState);
+            const e = {
+                value: !checkedState,
+                target: { ...inputRef.current, checked: !checkedState },
+            };
+            if (onChange) onChange(e);
+        };
+
+        useEffect(() => {
+            if (checked !== undefined) setCheckedState(Boolean(checked));
+        }, [checked]);
+
+        return (
+            <div css={_FormCheckCSS} ref={ref} id={'DGN-Core-Toggle' + (id ? `-${id}` : '')} {...other}>
+                <input
+                    {...inputProps}
+                    ref={inputRef}
+                    hidden
+                    name={name}
+                    type="checkbox"
+                    disabled={disabled}
+                    readOnly={readOnly}
+                    checked={checkedState}
+                    onChange={handleChange}
+                />
+                <label css={_ToggleCSS} onClick={handleChange}>
+                    <span css={_SliderCSS} className={classNames(disabled && 'disabled', readOnly && 'readOnly')} />
+                    {label !== undefined && (
+                        <Typography
+                            type={'p1'}
+                            color={disabled ? 'system/disabled' : 'text/main'}
+                            hoverTooltip={hoverTooltip}
+                            lineClamp={lineClamp || null}
+                            mapping={'label'}
+                        >
+                            <Fragment>
+                                {label}
+                                {required && (
+                                    <Typography color={'danger'} fullWidth={false}>
+                                        *
+                                    </Typography>
+                                )}
+                            </Fragment>
+                        </Typography>
+                    )}
+                </label>
+            </div>
+        );
+    })
+);
+
+const FormCheckCSS = (height, { spacing }) => css`
+    ${positionRelative};
+    ${parseMinHeight(height)};
+    padding: ${spacing([0.5])};
+`;
+
+const ToggleCSS = ({ spacing }) => css`
+    ${flexRow};
+    ${itemsCenter};
+    ${positionRelative};
+    ${cursorPointer};
+    gap: ${spacing([1.5])};
+`;
+
+const CheckedSliderCSS = (isEnable, disabled, width, height, colors) => css`
+    background: ${getProp(colors, disabled ? 'system/disabled' : 'system/active')};
+    outline: 1px solid ${getProp(colors, disabled ? 'system/disabled' : 'system/active')};
+    &::after {
+        left: ${width - height}px;
+        background: ${getProp(colors, 'system/standard')};
+    }
+    ${isEnable &&
+    css`
+        &:hover {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/hover')};
+        }
+        &:focus {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/focus')};
+        }
+        &:active {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/pressed')};
+        }
+    `}
+`;
+
+const NotCheckedSliderCSS = (isEnable, disabled, colors) => css`
+    background: ${getProp(colors, 'system/standard')};
+    outline: 1px solid ${getProp(colors, disabled ? 'system/disabled' : 'system/rest')};
+    &::after {
+        left: 2px;
+        background: ${getProp(colors, disabled ? 'system/disabled' : 'system/rest')};
+    }
+    ${isEnable &&
+    css`
+        &:hover {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/hover')};
+            outline-color: ${getProp(colors, 'system/active')};
+            background-color: ${getProp(colors, 'fill/hover')};
+        }
+        &:focus {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/focus')};
+            background-color: ${getProp(colors, 'fill/focus')};
+        }
+        &:active {
+            box-shadow: 0 0 0 2px ${getProp(colors, 'fill/pressed')};
+            background-color: ${getProp(colors, 'fill/pressed')};
+        }
+        &:hover:after {
+            background-color: ${getProp(colors, 'system/active')};
+        }
+    `}
+`;
+
+const SliderCSS = (checkedState, disabled, isEnable, width, height, { colors, spacing }) => css`
+    ${positionRelative};
+    ${displayBlock};
+    ${parseWidthHeight(width, height)};
+    ${parseMinWidth(width)};
+    ${borderRadius(height)};
+    ${!isEnable && cursorNoDrop}
+    &::after {
+        ${positionAbsolute};
+        ${parseWidthHeight(height - spacing(1), height - spacing(1))};
+        content: '';
+        top: 2px;
+        border-radius: 100%;
+        transition: 0.3s ease-in-out;
+        margin: 0px auto;
+    }
+    ${checkedState
+        ? CheckedSliderCSS(isEnable, disabled, width, height, colors)
+        : NotCheckedSliderCSS(isEnable, disabled, colors)};
+`;
+
+// Toggle.defaultProps = {
+//     disabled: false,
+//     readOnly: false,
+//     defaultChecked: false,
+//     label: '',
+//     value: '',
+//     id: '',
+//     width: 40,
+//     height: 20,
+//     lineClamp: null,
+//     required: false,
+// };
+
+Toggle.propTypes = {
+    /** * If `true`, the component is disabled. */
+    disabled: PropTypes.bool,
+    /** prevent all event if true */
+    readOnly: PropTypes.bool,
+    /** If `true`, the component is defaultChecked. */
+    defaultChecked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
+    /** If `true`, the component is checked. */
+    checked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
+    /** Id is randomized randomly to avoid duplication. */
+    id: PropTypes.string,
+    /** Name attribute of the `input` element. */
+    name: PropTypes.string,
+    /** The name of the Radio is displayed on the interface */
+    label: PropTypes.string,
+    /** height is a number, height of Toggle default 20 */
+    height: PropTypes.number,
+    /** width is a number, width of Toggle default 40 */
+    width: PropTypes.number,
+    /** props for input */
+    inputProps: PropTypes.object,
+    /** The line-clamp property truncates text at a specific number of Label. */
+    lineClamp: PropTypes.number,
+    /** Shows tooltip containing Label on hover */
+    hoverTooltip: PropTypes.bool,
+    /** * Callback fired when the state is changed.
+     *
+     * @param {object} event The event source of the callback.
+     * You can pull out the new checked state by accessing `event.target.checked` (boolean).
+     */
+    onChange: PropTypes.func,
+    /** If `true`, the label will indicate that the checkbox is required. */
+    required: PropTypes.bool,
+};
+
+export default Toggle;

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

@@ -0,0 +1,51 @@
+import { Toggle } from 'components';
+import ImportComp from 'components/others/import';
+import React from 'react';
+import { useTheme } from 'theme';
+
+const theme = useTheme();
+Toggle.defaultProps = theme?.components?.Toggle?.defaultProps || {};
+
+export default {
+    title: 'Components/Toggle',
+    component: Toggle,
+    parameters: {
+        componentSubtitle: 'Toggle switch, used for selection between two values.',
+    },
+};
+
+const Template = args => (
+    <>
+        <ImportComp components={'Label'} />
+        <Toggle {...args} />
+    </>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+    label: 'Toggle',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+    ...Basic.args,
+    required: true,
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+    ...Basic.args,
+    checked: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+    ...Basic.args,
+    disabled: true,
+};
+
+export const ReadOnly = Template.bind({});
+ReadOnly.args = {
+    ...Basic.args,
+    readOnly: true,
+};

package/src/components/form-view/helper-text.js

@@ -0,0 +1,30 @@
+/* eslint-disable react/display-name */
+import { Typography } from 'components';
+import PropTypes from 'prop-types';
+import React, { memo } from 'react';
+
+const HelperText = memo(({ text, style, ...props }) => {
+    const helperText = {
+        display: 'block',
+        marginTop: 5,
+        marginBottom: 5,
+    };
+
+    return (
+        <Typography type={'p3'} style={{ ...helperText, ...style }} {...props}>
+            {text}
+        </Typography>
+    );
+});
+HelperText.defaultProps = {
+    text: '',
+};
+
+HelperText.propTypes = {
+    /** helper text for input */
+    text: PropTypes.string,
+    /** style inline of helper text in HelperText component */
+    style: PropTypes.object,
+};
+
+export default HelperText;

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

@@ -0,0 +1,100 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { borderColor, fill, pointerEventsNone } from 'styles/general';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+import HelperText from '../form-view/helper-text';
+import Input from '../form-view/input';
+import Label from '../form-view/label';
+
+const FormLabel = ({
+    dataType,
+    format,
+    helperTextProps,
+    inputProps,
+    inputStyleProps,
+    label,
+    text,
+    thousandChar,
+    thousandSeparator,
+    utc,
+    value,
+    viewType,
+}) => {
+    const theme = useTheme();
+
+    const InformCSS = css`
+        margin-bottom: 1rem;
+        &.disabled {
+            ${pointerEventsNone};
+            ${borderColor(getProp(theme.colors, 'system/disabled'))};
+            path {
+                ${fill('transparent')};
+            }
+            &::before {
+                ${borderColor(getProp(theme.colors, 'system/disabled'))};
+            }
+        }
+    `;
+
+    return (
+        <div css={InformCSS}>
+            <Label label={label} />
+            <Input
+                value={value}
+                inputProps={inputProps}
+                inputStyleProps={inputStyleProps}
+                dataType={dataType}
+                viewType={viewType}
+                format={format}
+                utc={utc}
+                thousandSeparator={thousandSeparator}
+                thousandChar={thousandChar}
+            />
+            <HelperText text={text} {...helperTextProps} />
+        </div>
+    );
+};
+
+FormLabel.defaultProps = {
+    dataType: 'none',
+    format: 'MM/DD/YYYY',
+    label: '',
+    text: '',
+    thousandChar: ',',
+    thousandSeparator: 'false',
+    utc: 'false',
+    value: '',
+    viewType: 'underlined',
+};
+
+FormLabel.propTypes = {
+    /** utc for Form label */
+    utc: PropTypes.bool,
+    /** thousandSeparator for Form label */
+    thousandSeparator: PropTypes.bool,
+    /** thousandChar for Form label */
+    thousandChar: PropTypes.string,
+    /** label for Form label */
+    label: PropTypes.string,
+    /** the displayed value for each change */
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+    /** text for Form label */
+    text: PropTypes.string,
+    /** viewType for Form label */
+    viewType: PropTypes.string,
+    /** dataType for Form label */
+    dataType: PropTypes.string,
+    /** props of span in InputView comp** dataType for Form label */
+    format: PropTypes.string,
+    /** props of span in format component */
+    inputProps: PropTypes.object,
+    /** style inline of span in InputView component */
+    inputStyleProps: PropTypes.object,
+    /** props for helper text */
+    helperTextProps: PropTypes.object,
+};
+
+export default FormLabel;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import LabelInputComponent from './index';
+import { ImportComp } from 'components/others/import/index.stories';
+
+// export default {
+//     title: 'Form View / FormLabel',
+//     component: LabelInputComponent,
+// };
+
+const Template = args => (
+    <>
+        <ImportComp components={'LabelInputComponent'} />
+        <LabelInputComponent {...args} />
+    </>
+);
+
+export const LabelInput = Template.bind({});
+LabelInput.args = {
+    thousandSeparator: false,
+    utc: false,
+    label: 'label',
+    value: 'Cảnh Toàn Đẹp Choai',
+    helperText: 'Text chưa nhập',
+    format: 'MM/DD/YYYY',
+};

package/src/components/form-view/input.js

@@ -0,0 +1,134 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useMemo, useRef } from 'react';
+import {
+    border,
+    borderBottom,
+    borderRadius,
+    bottom,
+    boxBorder,
+    displayFlex,
+    inset,
+    insetX,
+    itemsCenter,
+    parseHeight,
+    pointerEventsNone,
+    positionAbsolute,
+    positionRelative,
+    scale,
+} from 'styles/general';
+import { useTheme } from 'theme';
+import { formatDate, getProp } from 'utils';
+
+const InputView = memo(
+    forwardRef(({ inputProps, inputStyleProps, value, viewType, dataType, format, utc, thousandChar }, reference) => {
+        if (!reference) reference = useRef(null);
+
+        const ref = useRef(null);
+
+        const theme = useTheme();
+        const { colors, spacing, typography } = theme;
+
+        const TextInput =
+            viewType !== 'outlined'
+                ? css`
+                      ${displayFlex};
+                      ${itemsCenter};
+                      ${positionRelative};
+                      flex: 1 1 auto;
+                      ${typography.paragraph1};
+                      padding-top: ${spacing([1.5])};
+                      padding-bottom: ${spacing([1.5])};
+                      &::before {
+                          content: '';
+                          ${positionAbsolute};
+                          ${insetX(0)};
+                          ${bottom(0)};
+                          ${borderBottom(1, getProp(colors, 'system/disabled'))};
+                      }
+                      &::after {
+                          content: '';
+                          ${positionAbsolute};
+                          ${insetX(0)};
+                          ${bottom(-1)};
+                          ${borderBottom(2, 'transparent')}
+                          ${scale(0)};
+                          transform-origin: center;
+                          transition: all 0.2s ease;
+                      }
+                  `
+                : css`
+                      ${displayFlex};
+                      ${itemsCenter};
+                      ${positionRelative};
+                      flex: 1 1 auto;
+                      ${typography.paragraph1};
+                      ${border(1, getProp(colors, 'system/disabled'))};
+                      ${borderRadius(4)};
+                      ${parseHeight(40)};
+                      ${boxBorder};
+                      &::after {
+                          content: '';
+                          ${positionAbsolute};
+                          ${inset(-2)};
+                          ${border(2, 'transparent')};
+                          ${borderRadius(4)};
+                          ${pointerEventsNone};
+                      }
+                  `;
+
+        const numberWithFormat = (x, thousandChar) => {
+            let a = '';
+            switch (thousandChar) {
+                case ',':
+                    a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+                    break;
+                case '.':
+                    a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+                    break;
+                default:
+                    a = x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+            }
+            return a;
+        };
+
+        const dateWithFormat = date => {
+            value = formatDate(date, format, utc);
+            return value;
+        };
+
+        useEffect(() => {
+            if (dataType === 'integer' && format !== null) {
+                ref.current.innerHTML = numberWithFormat(value, thousandChar);
+            }
+            if (dataType === 'date' && format !== null) {
+                ref.current.innerHTML = dateWithFormat(value);
+            }
+        }, [value]);
+
+        return useMemo(() => {
+            return (
+                <span {...inputProps} style={inputStyleProps} css={TextInput} ref={ref}>
+                    {value}
+                </span>
+            );
+        }, [inputProps, inputStyleProps, value, theme]);
+    })
+);
+
+InputView.defaultProps = {
+    label: '',
+};
+
+InputView.propTypes = {
+    /** the displayed value for each change */
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
+    /** props of span in InputView component */
+    inputProps: PropTypes.object,
+    /** style inline of span in InputView component */
+    inputStyleProps: PropTypes.object,
+};
+
+export default InputView;

package/src/components/form-view/label.js

@@ -0,0 +1,39 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { memo } from 'react';
+import { displayBlock, textColor } from 'styles/general';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+
+const Label = memo(({ label, labelProps }) => {
+    const theme = useTheme();
+    const { spacing } = theme;
+
+    const LabelTextCSS = css`
+        ${displayBlock};
+        ${textColor(getProp(theme.colors, 'text/label'))};
+        ${theme.typography.paragraph3};
+        margin-bottom: ${spacing([1.25])};
+    `;
+
+    return (
+        <label style={labelProps} css={LabelTextCSS}>
+            {label}
+        </label>
+    );
+});
+
+Label.defaultProps = {
+    label: '',
+};
+
+Label.propTypes = {
+    /** label for input */
+    label: PropTypes.string,
+    /** style inline of label in Label component */
+    labelProps: PropTypes.object,
+};
+
+export default Label;