diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,329 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { Typography } from "../..";
-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 = /*#__PURE__*/memo(/*#__PURE__*/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 jsx("div", {
-    id: 'DGN-UI-Checkbox-' + id.replace('DGN-UI-', ''),
-    css: CheckboxContainerCSS,
-    className: classNames('DGN-UI-Checkbox', className),
-    ref: ref,
-    ...other,
-    onClick: () => {
-      var _inputRef$current$cli, _inputRef$current;
-      return (_inputRef$current$cli = (_inputRef$current = inputRef.current).click) === null || _inputRef$current$cli === void 0 ? void 0 : _inputRef$current$cli.call(_inputRef$current);
-    }
-  }, jsx("div", {
-    css: CheckBoxRootCSS,
-    className: classNames('DGN-UI-Checkbox-Root', disabled && 'disabled', readOnly && 'read-only')
-  }, jsx("input", {
-    value: value,
-    ...inputProps,
-    className: classNames(determinate ? 'determinate' : 'indeterminate', inputProps === null || inputProps === void 0 ? void 0 : 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: true
-  }), jsx("label", {
-    css: CheckBoxLabelCSS
-  }, jsx("span", {
-    className: classNames(determinate ? 'determinate' : 'indeterminate', readOnly && 'read-only', disabled && 'disabled'),
-    css: _CheckBoxSquareCSS
-  }), children || label ? jsx(Typography, {
-    type: 'p1',
-    css: css`
-                                    margin-left: ${spacing([1])};
-                                `,
-    color: disabled ? 'system/disabled' : undefined,
-    ...labelProps
-  }, jsx(Fragment, null, children || label, required ? jsx("span", {
-    css: textColor(disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'semantic/danger'))
-  }, "*") : null)) : null)));
-}));
-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/components/form-control/control/index.js

@@ -1,91 +0,0 @@
-/** @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 = /*#__PURE__*/memo(/*#__PURE__*/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 jsx("div", {
-    ...props,
-    className: ['DGN-UI-Control', className].join(' ').trim().replace(/\s+/g, ' '),
-    css: controlRootCSS(classes, colors),
-    style: style,
-    ref: ref
-  }, children);
-}));
-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;

package/components/form-control/date-input/DateField.js

@@ -1,187 +0,0 @@
-import { isValid } from 'date-fns';
-import { useReducer } from 'react';
-import { modifyDate } from "./utils";
-export const patternMap = {
-  Y: 'year',
-  y: 'year',
-  M: 'month',
-  D: 'day',
-  d: 'day',
-  H: 'hour',
-  h: 'hour',
-  m: 'minute',
-  s: 'second',
-  a: 'meridian'
-};
-export class DateField {
-  constructor(format, value) {
-    this.format = format;
-    this.patternArray = [];
-    this.year = null;
-    this.month = null;
-    this.day = null;
-    this.hour = null;
-    this.minute = null;
-    this.second = null;
-    const formatArray = format.match(new RegExp('([Y|y|D|d|M|H|h|m|s|a])+', 'ig')) || [];
-    this.patternArray = formatArray.map(pattern => {
-      return {
-        pattern,
-        key: patternMap[pattern[0]]
-      };
-    });
-    if (value && isValid(value)) {
-      this.year = value.getFullYear();
-      this.month = value.getMonth() + 1;
-      this.day = value.getDate();
-      this.hour = value.getHours();
-      this.minute = value.getMinutes();
-      this.second = value.getSeconds();
-    }
-  }
-}
-
-/**
- * Pad a number with zeros to the left.
- */
-const padNumber = (number, length) => {
-  let numberString = String(number);
-  if (numberString.length >= length) {
-    return numberString;
-  }
-  const paddingCount = length - numberString.length;
-  for (let i = 0; i < paddingCount; i++) {
-    numberString = '0' + numberString;
-  }
-  return numberString;
-};
-export const useDateField = (format, localize, date) => {
-  const [dateField, dispatch] = useReducer((state, action) => {
-    switch (action.type) {
-      case 'setYear':
-        return {
-          ...state,
-          year: action.value
-        };
-      case 'setMonth':
-        return {
-          ...state,
-          month: action.value
-        };
-      case 'setDay':
-        return {
-          ...state,
-          day: action.value
-        };
-      case 'setHour':
-        return {
-          ...state,
-          hour: action.value
-        };
-      case 'setMinute':
-        return {
-          ...state,
-          minute: action.value
-        };
-      case 'setSecond':
-        return {
-          ...state,
-          second: action.value
-        };
-      case 'setNewDate':
-        return new DateField(format, action.value);
-      default:
-        return state;
-    }
-  }, new DateField(format, date));
-  const toDateString = () => {
-    let str = format;
-    dateField.patternArray.forEach(item => {
-      const {
-        key,
-        pattern
-      } = item;
-      const hour = dateField.hour;
-      let value = dateField[key];
-      if (value !== null) {
-        if (pattern === 'MMM' && typeof value === 'number') {
-          value = localize === null || localize === void 0 ? void 0 : localize.months[['notFull']][value - 1];
-        } else if (pattern === 'MMMM' && typeof value === 'number') {
-          value = localize === null || localize === void 0 ? void 0 : localize.months[['full']][value - 1];
-        } else if (pattern === 'aa') {
-          if (typeof hour === 'number') {
-            value = hour > 12 ? 'PM' : 'AM';
-          } else {
-            value = 'aa';
-          }
-        } else if (pattern === 'hh' && typeof value === 'number') {
-          value = value === 0 ? 12 : value > 12 ? value - 12 : value;
-        }
-        if (typeof value === 'number') {
-          value = padNumber(value, pattern.length);
-        }
-        str = str.replace(pattern, value);
-      }
-    });
-    return str;
-  };
-
-  // Check if the field value is valid.
-  const validFieldValue = (type, value) => {
-    var _format$match;
-    let isValid = true;
-    (_format$match = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match === void 0 ? void 0 : _format$match.forEach(pattern => {
-      const key = patternMap[pattern[0]];
-      const fieldValue = type === key ? value : dateField[key];
-      if (fieldValue === null) {
-        isValid = false;
-        return;
-      }
-    });
-    return isValid;
-  };
-  const isEmptyValue = (type, value) => {
-    var _format$match2;
-    const checkValueArray = (_format$match2 = format.match(new RegExp('([y|d|M|H|h|m|s])+', 'ig'))) === null || _format$match2 === void 0 ? void 0 : _format$match2.map(pattern => {
-      const key = patternMap[pattern[0]];
-      const fieldValue = type === key ? value : dateField[key];
-      return fieldValue !== null;
-    });
-    return checkValueArray === null || checkValueArray === void 0 ? void 0 : checkValueArray.every(item => item === false);
-  };
-  const toDate = (type, value) => {
-    const {
-      year,
-      month,
-      day,
-      hour,
-      minute,
-      second
-    } = dateField;
-    const date = new Date(year || 0, typeof month === 'number' ? month - 1 : 0,
-    // The default day is 1 when the value is null, otherwise it becomes the last day of the month.
-    day || 1, hour || 0, minute || 0, second || 0);
-    if (typeof type === 'undefined' || typeof value === 'undefined') {
-      return date;
-    }
-    if (value === null || !validFieldValue(type, value)) {
-      if (isEmptyValue(type, value)) {
-        return null;
-      }
-      return new Date('');
-    }
-    if (type === 'meridian' && typeof hour === 'number') {
-      const newHour = hour > 12 ? hour - 12 : hour + 12;
-      type = 'hour';
-      value = newHour;
-    }
-    return modifyDate(date, type, value);
-  };
-  return {
-    dateField,
-    dispatch,
-    toDate,
-    toDateString,
-    isEmptyValue
-  };
-};