diginet-core-ui 1.4.39 → 1.4.40

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

@@ -1,224 +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, useMemo, useRef, useState } from 'react';
-import { boxBorder, cursorNoDrop, cursorPointer, displayBlock, displayNone, positionAbsolute, positionRelative } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, getProp, randomString } from "../../../utils";
-const Radio = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Radio'
-  });
-  const {
-    action = {},
-    id,
-    disabled,
-    readOnly,
-    name,
-    defaultChecked,
-    checked,
-    value,
-    label,
-    className,
-    width,
-    onChange,
-    inputRef: inputRefProp,
-    inputProps,
-    labelProps,
-    required,
-    ...other
-  } = props;
-  const ref = useRef(null);
-  const inputRef = inputRefProp || useRef(null);
-  const [unique] = useState(randomString(10, {
-    allowNumber: false,
-    allowSymbol: false
-  }));
-  const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
-  const _formCheckInputCSS = formCheckInputCSS(width, theme);
-  const _formCheckLabelCSS = formCheckLabelCSS(width, theme);
-  const handleChange = e => {
-    if (disabled || readOnly) return;
-    if (checked === undefined) setCheckedState(true);
-    e = {
-      value: value,
-      target: {
-        ...inputRef.current,
-        checked: true,
-        value: value
-      }
-    };
-    if (onChange) onChange(e);
-  };
-  useEffect(() => {
-    if (checked !== undefined) setCheckedState(Boolean(checked));
-  }, [checked]);
-  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(() => {
-    return jsx("div", {
-      id: 'DGN-Core-Radio-' + (id || unique),
-      css: formCheckCSS(theme),
-      className: classNames('DGN-UI-Radio', className),
-      ref: ref,
-      ...other
-    }, jsx("input", {
-      ...inputProps,
-      disabled: disabled,
-      ref: inputRef,
-      name: name,
-      hidden: true,
-      checked: checkedState,
-      type: "radio",
-      css: _formCheckInputCSS,
-      id: id || unique,
-      onChange: handleChange
-    }), jsx("label", {
-      css: _formCheckLabelCSS,
-      className: `${disabled ? 'disabled' : ''} ${readOnly ? 'read-only' : ''}`,
-      htmlFor: id || unique,
-      onClick: handleChange
-    }, jsx(Typography, {
-      color: disabled ? 'system/disabled' : 'text/main',
-      type: 'p1',
-      ...labelProps
-    }, jsx(Fragment, null, label !== null && label !== void 0 ? label : value, required && jsx("span", {
-      style: {
-        color: disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'danger')
-      }
-    }, "*")))));
-  }, [disabled, onChange, readOnly, checkedState, theme]);
-}));
-const formCheckCSS = ({
-  spacing
-}) => css`
-    ${displayBlock};
-    padding: ${spacing(0.5)}px;
-`;
-const formCheckInputCSS = (width, {
-  colors
-}) => css`
-    ${positionAbsolute};
-    ${boxBorder};
-    ${displayNone};
-    &:checked ~ label:after {
-        ${boxBorder};
-        ${positionAbsolute};
-        width: ${width / 2}px;
-        height: ${width / 2}px;
-        left: ${width / 4}px;
-        background: ${getProp(colors, 'system/active')};
-        border-radius: 50%;
-        top: 50%;
-        transform: translateY(-50%);
-        content: '';
-        transition: 0.28s ease;
-    }
-    &:checked ~ label:before {
-        border-color: ${getProp(colors, 'system/active')};
-    }
-`;
-const formCheckLabelCSS = (width, {
-  colors,
-  spacing
-}) => css`
-    ${displayBlock};
-    ${positionRelative};
-    ${cursorPointer};
-    margin-bottom: 0 !important;
-    padding-left: ${width + spacing(1.5)}px;
-    min-height: ${width}px;
-    &:hover:not(.disabled):not(.read-only)::before {
-        box-shadow: 0 0 0 2px ${getProp(colors, 'fill/hover')};
-        background: ${getProp(colors, 'fill/hover')};
-    }
-    &.disabled,
-    &.read-only {
-        ${cursorNoDrop};
-    }
-    &.disabled {
-        color: ${getProp(colors, 'system/disabled')};
-        &:after {
-            background: ${getProp(colors, 'system/disabled')} !important;
-        }
-        &:before {
-            border-color: ${getProp(colors, 'system/disabled')} !important;
-        }
-    }
-    &:before {
-        ${positionAbsolute};
-        ${boxBorder};
-        width: ${width}px;
-        height: ${width}px;
-        border-radius: 50%;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 0;
-        content: '';
-        border: 2px solid ${getProp(colors, 'system/rest')};
-        transition: 0.28s ease;
-    }
-`;
-
-// Radio.defaultProps = {
-//     disabled: false,
-//     readOnly: false,
-//     defaultChecked: false,
-//     className: '',
-//     width: 20,
-//     labelProps: {},
-// };
-
-Radio.propTypes = {
-  /** If `true`, the component is disabled. */
-  disabled: PropTypes.bool,
-  /** If `true`, the component is checked. */
-  checked: PropTypes.bool,
-  /** If `true`, the component is defaultChecked. */
-  defaultChecked: PropTypes.bool,
-  /** Id is randomized randomly to avoid duplication. */
-  id: PropTypes.string,
-  /** The id of the `input` element. */
-  name: PropTypes.string,
-  /** The value of the component. The DOM API casts this to a string. */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** The name of the Radio is displayed on the interface */
-  label: PropTypes.string,
-  /** The class for Radio component */
-  className: PropTypes.string,
-  /** Props for input. */
-  inputProps: PropTypes.object,
-  /** Callback fired when the state is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   * You can pull out the new checked state by accessing `event.target.checked` (boolean).
-   *  */
-  onChange: PropTypes.func,
-  /** Prevent all event if true. */
-  readOnly: PropTypes.bool,
-  /** Props for Typography of label. */
-  labelProps: PropTypes.object,
-  /** If `true`, the label will indicate that the Radio is required. */
-  required: PropTypes.bool
-};
-export default Radio;

package/components/form-control/text-input/index.js

@@ -1,239 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { HelperText, InputBase, Label } from "../..";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { cursorNotAllowed, displayBlock, positionRelative } from "../../../styles/general";
-import { useTheme } from "../../../theme";
-import useThemeProps from "../../../theme/utils/useThemeProps";
-import { classNames, onValidate, refType as ref } from "../../../utils";
-const TextInput = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'TextInput'
-  });
-  const {
-    action = {},
-    autoComplete,
-    autoFocus,
-    autoWidth,
-    className,
-    defaultValue,
-    delayOnChange,
-    disabled,
-    endIcon,
-    endIconProps,
-    error,
-    helperTextProps,
-    hoverTooltip,
-    inputProps,
-    inputRef = useRef(null),
-    inputStyle,
-    label,
-    labelProps,
-    maxRows,
-    multiline,
-    name,
-    nonStyle,
-    onBlur,
-    onChange,
-    onFocus,
-    onInput,
-    onKeyDown,
-    onKeyUp,
-    onPaste,
-    placeholder,
-    readOnly,
-    required,
-    rows,
-    startIcon,
-    startIconProps,
-    status,
-    style,
-    type,
-    validates,
-    value: valueProp,
-    viewType,
-    ...other
-  } = props;
-  const ref = useRef(null);
-  const [value, setValue] = useState(valueProp || defaultValue);
-  const isError = !!error;
-  const _TextInputRoot = TextInputRoot(theme);
-  useEffect(() => {
-    setValue(valueProp);
-  }, [valueProp]);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const validateResult = validates && onValidate(value, validates, true);
-  return jsx("div", {
-    ref: ref,
-    css: _TextInputRoot,
-    className: classNames('DGN-UI-TextInput', className, disabled && 'disabled'),
-    style: style,
-    ...other
-  }, !!label && jsx(Label, {
-    required: required,
-    disabled: disabled,
-    ...labelProps
-  }, label), jsx(InputBase, {
-    type: /text|number|password/.test(type) ? type : 'text',
-    autoComplete: autoComplete,
-    inputRef: inputRef,
-    viewType: viewType,
-    defaultValue: defaultValue,
-    delayOnChange: delayOnChange,
-    placeholder: placeholder,
-    autoFocus: autoFocus,
-    disabled: disabled,
-    readOnly: readOnly,
-    multiline: multiline,
-    name: name,
-    autoWidth: autoWidth,
-    rows: rows,
-    maxRows: maxRows,
-    status: isError || validateResult ? 'danger' : status,
-    inputProps: inputProps,
-    inputStyle: inputStyle,
-    startIcon: startIcon,
-    startIconProps: startIconProps,
-    endIcon: endIcon,
-    endIconProps: endIconProps,
-    onChange: onChange,
-    onBlur: onBlur,
-    onFocus: onFocus,
-    onInput: onInput,
-    onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp,
-    onPaste: onPaste,
-    value: valueProp,
-    hoverTooltip: hoverTooltip,
-    nonStyle: nonStyle
-  }), isError && jsx(HelperText, {
-    ...helperTextProps,
-    disabled: disabled,
-    status: status
-  }, error), !isError && validateResult && jsx(HelperText, {
-    ...helperTextProps,
-    disabled: disabled
-  }, validateResult));
-}));
-const TextInputRoot = ({
-  spacing
-}) => css`
-    ${displayBlock};
-    ${positionRelative};
-    margin-bottom: ${spacing([5])};
-    &.disabled {
-        ${cursorNotAllowed};
-    }
-`;
-
-// TextInput.defaultProps = {
-//     autoComplete: 'off',
-//     autoFocus: false,
-//     autoWidth: false,
-//     className: '',
-//     defaultValue: '',
-//     disabled: false,
-//     hoverTooltip: false,
-//     error: '',
-//     label: '',
-//     multiline: false,
-//     readOnly: false,
-//     required: false,
-//     status: 'default',
-//     type: 'text',
-//     viewType: 'underlined',
-// };
-
-TextInput.propTypes = {
-  /** This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill). */
-  autoComplete: PropTypes.string,
-  /** If `true`, the input element is focused during the first mount. */
-  autoFocus: PropTypes.bool,
-  /** If `true`, the width of the component will automatically be set according to the contents inside the input, don't run with multiline = true */
-  autoWidth: PropTypes.bool,
-  /** Class for component. */
-  className: PropTypes.string,
-  /** The default value. Use when the component is not controlled. */
-  defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** If `true`, the component is disabled.*/
-  disabled: PropTypes.bool,
-  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the right of input. */
-  endIcon: PropTypes.any,
-  /** Props of end icon in InputBase component. */
-  endIconProps: PropTypes.object,
-  /** Error displayed below input. */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  /**  [Props](https://core.diginet.com.vn/ui/?path=/story/form-control-text-helpertext) of helper text. */
-  helperTextProps: PropTypes.object,
-  /** [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,
-  /** Style inline of input element. */
-  inputStyle: PropTypes.object,
-  /** The label of the component. */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label--simple) of label. */
-  labelProps: PropTypes.object,
-  /** Maximum number of rows to display when multiline option is set to true. */
-  maxRows: PropTypes.number,
-  /** If `true`, a textarea element is rendered. */
-  multiline: PropTypes.bool,
-  /** Callback fired when the input is blurred. */
-  onBlur: PropTypes.func,
-  /** Callback fired when the value is changed. */
-  onChange: PropTypes.func,
-  /** Callback fired when the input is focused. */
-  onFocus: PropTypes.func,
-  /** Callback fired when input. */
-  onInput: PropTypes.func,
-  /** Callback fired when pressing a key. */
-  onKeyDown: PropTypes.func,
-  /** Callback fired when releases a key. */
-  onKeyUp: PropTypes.func,
-  /** The short hint displayed in the input before the user enters a value. */
-  placeholder: PropTypes.string,
-  /** If `true`, the component is readOnly. */
-  readOnly: PropTypes.bool,
-  /** If `true`, the input element is required. */
-  required: PropTypes.bool,
-  /** Number of rows to display when multiline option is set to true. */
-  rows: PropTypes.number,
-  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed to the left of input. */
-  startIcon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  /** Props of start icon in InputBase component. */
-  startIconProps: PropTypes.object,
-  /** Status type to display color for input. */
-  status: PropTypes.oneOf(['default', 'warning', 'success', 'danger']),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** Type of the input element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). */
-  type: PropTypes.oneOf(['inform', 'edit', 'text', 'number', 'password']),
-  /** Validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
-   */
-  validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
-  /** The value of the input element, required for a controlled component. */
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** The variant to use. */
-  viewType: PropTypes.oneOf(['underlined', 'outlined', 'none'])
-};
-export default TextInput;