diginet-core-ui 1.3.44 → 1.3.46

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

@@ -105,6 +105,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   dropdownItemStyle
 }, reference) => {
+  if (multiple && selectBox === undefined) selectBox = true;
   const dropdownRef = useRef(null);
   const timerRef = useRef(null);
   const formRef = useRef(null);
@@ -169,14 +170,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
 
         setOpenState(true);
-        setTimeout(() => {
-          showDropdown();
-          setTimeout(() => {
-            if (children && boxRef.current && boxRef.current.querySelector('input')) {
-              boxRef.current.querySelector('input').focus();
-            }
-          }, 10);
-        }, timing[unique + 'Box'] ? 200 : 0);
       }
     } else if (multiple || itemMode === 'treeview') {
       if (searchRef.current) {
@@ -459,7 +452,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const icon = getIconFromData(data);
 
       if (multiple && selectBox) {
-        const checked = currentValue[unique].includes(value);
+        const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
         items.push(jsx("div", {
           key: index,
           css: !itemDisabled ? _DropdownItemCSS : [DisabledCSS, _DropdownItemCSS],
@@ -607,7 +600,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       const dropdownItem = document.createElement('div');
-      dropdownItem.className = `css-${_DropdownItemCSS.name}`;
+      dropdownItem.className = `DGN-UI-Dropdown-Item css-${_DropdownItemCSS.name}`;
       dropdownItem.tabIndex = -1;
       dropdownItem.addEventListener('click', () => onChangeValue(displayText, value, icon, data, i));
       dropdownItem.addEventListener('keypress', e => {
@@ -616,7 +609,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       let item = null;
 
       if (multiple && selectBox) {
-        const checked = currentValue[unique].includes(value);
+        const checked = Array.isArray(currentValue[unique]) ? currentValue[unique].includes(value) : [currentValue[unique]].includes(value);
         item = jsx(Checkbox, {
           defaultChecked: checked,
           style: {
@@ -899,7 +892,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    if (closeAfterSelect) {
+    if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
     }
   };
@@ -952,6 +945,11 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     e && e.target && e.target.blur();
     updatePositionDropdown();
+    onInput === null || onInput === void 0 ? void 0 : onInput({ ...(inputRef === null || inputRef === void 0 ? void 0 : inputRef.current),
+      target: {
+        value: inputRef === null || inputRef === void 0 ? void 0 : inputRef.current.value
+      }
+    });
     !!onChange && onChange({
       value: currentValue[unique]
     });
@@ -1035,7 +1033,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
 
       if (!isSearch[unique]) {
-        inputRef.current.value = '';
+        inputRef.current.value = source;
       }
     }
   };
@@ -1130,13 +1128,18 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     currentRef.showDropdown = () => showDropdown();
 
-    currentRef.onClear = onClear, currentRef.setPreviousValue = setPreviousValue, currentRef.setValue = value => {
+    currentRef.onClear = onClear;
+    currentRef.setPreviousValue = setPreviousValue;
+
+    currentRef.setValue = value => {
       if (allValue[unique][allValue[unique].length - 1] !== value) {
         allValue[unique].push(value);
       }
 
       setValueIntoInput(value);
-    }, currentRef.DOM = dropdownRef.current;
+    };
+
+    currentRef.DOM = dropdownRef.current;
     return currentRef;
   });
   useEffect(() => {
@@ -1298,7 +1301,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         !!onLoadMore && dataSource.length < total && boxRef.current.addEventListener('scroll', onLoadMoreHandler);
       } else {
         isSearch[unique] = false;
-        renderDropdown();
       }
     } else {
       if (!multiple && !disabled && !readOnly) {
@@ -1406,6 +1408,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ...errorStyle
     }
   }, error), [error, disabled, errorStyle]);
+  const dropdownComp = useMemo(() => {
+    return openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null;
+  }, [openState, dataSource]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
@@ -1413,7 +1418,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear),
     className: ['DGN-UI-Dropdown', className, error && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
     style: style
-  }, labelComp, inputComp, errorComp), openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null);
+  }, labelComp, inputComp, errorComp), dropdownComp);
 }));
 /* Start styled */
 
@@ -1756,7 +1761,6 @@ Dropdown.defaultProps = {
   required: false,
   multiple: false,
   allowSearch: false,
-  selectBox: false,
   closeAfterSelect: true,
   inputProps: {},
   formStyle: {},
@@ -1797,14 +1801,14 @@ Dropdown.propTypes = {
   /** display this icon if not found the icon follow iconExpr */
   iconDefault: PropTypes.string,
 
-  /** field name used for icon display<br/>
-   * Example:<br/>
-   * &nbsp;&nbsp;string: 'icon'<br/>
-   * &nbsp;&nbsp;object: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
-   * &nbsp;&nbsp;}
+  /** field name used for icon display<br/>
+   * Example:<br/>
+   * &nbsp;&nbsp;string: 'icon'<br/>
+   * &nbsp;&nbsp;object: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key: 'icon',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;prefix: 'https://imglink.com',<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;suffix: '.jpg'<br/>
+   * &nbsp;&nbsp;}
    */
   iconExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     key: PropTypes.string,
@@ -1822,9 +1826,9 @@ Dropdown.propTypes = {
   /** field name used for text display in input */
   keyExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
 
@@ -1834,9 +1838,9 @@ Dropdown.propTypes = {
   /** the field name used for the returned result */
   valueExpr: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+  /**
+   * duration wait enter search content on search<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
    */
   searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -1903,19 +1907,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown */
   dataSource: PropTypes.array,
 
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
+  /** function displays items by custom<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
    */
   renderItem: PropTypes.func,
 
-  /** function displays selected items by custom, example:<br/>
-   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
+  /** function displays selected items by custom, example:<br/>
+   * renderItem={(data, index) => index + ' - ' + data.name}<br/>
    */
   renderSelectedItem: PropTypes.func,
 
-  /** the function will run when entering input<br/>
-   * if undefined: the filter function will run (default)
+  /** the function will run when entering input<br/>
+   * if undefined: the filter function will run (default)
    */
   onInput: PropTypes.func,
 
@@ -1934,19 +1938,19 @@ Dropdown.propTypes = {
   /** the contents in Dropdown box (Exp: TreeView) */
   children: PropTypes.node,
 
-  /**
-   * ref methods
-   *
-   * how to get component element? ref.current
-   *
-   * how to call method? ref.current.instance.{method}
-   *
-   * * showDropdown(): Show dropdown
-   * * closeDropdown(): Close dropdown
-   * * onClear(): Clear selected value
-   * * setPreviousValue(): Set value to previous value
-   * * setValue(value): Set value of dropdown
-   *  * @param {value} - string || number || array
+  /**
+   * ref methods
+   *
+   * how to get component element? ref.current
+   *
+   * how to call method? ref.current.instance.{method}
+   *
+   * * showDropdown(): Show dropdown
+   * * closeDropdown(): Close dropdown
+   * * onClear(): Clear selected value
+   * * setPreviousValue(): Set value to previous value
+   * * setValue(value): Set value of dropdown
+   *  * @param {value} - string || number || array
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

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

@@ -5,66 +5,68 @@ import { memo, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Typography } from '../../';
-import theme from '../../../theme/settings';
 import { getGlobal } from '../../../global';
+import theme from '../../../theme/settings';
+const {
+  colors: {
+    system: {
+      disabled: systemDisabled
+    },
+    semantic: {
+      success,
+      warning,
+      danger,
+      info
+    }
+  },
+  spacing
+} = theme;
+const colorMap = new Map([['default', danger], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   status,
   className,
+  style,
   children,
-  ...props
+  id
 }, ref) => {
-  /* Start styled */
-  const HelperTextRoot = css`
-        margin-top: 4px;
-        &.info {
-            color: ${theme.colors.info};
-        }
-        &.success {
-            color: ${theme.colors.success};
-        }
-        &.warning {
-            color: ${theme.colors.warning};
-        }
-        &.danger {
-            color: ${theme.colors.danger};
-        }
-        &.disabled {
-            color: ${theme.colors.disabled};
-        }
-    `;
-  /* End styled */
-
+  const color = colorMap.get(status);
   return jsx(Typography, {
     ref: ref,
+    id: id,
     type: 'p3',
-    color: theme.colors.danger,
+    color: disabled ? systemDisabled : color,
     fullWidth: false,
-    css: HelperTextRoot,
-    className: ['DGN-UI-HelperText', className, status, disabled ? 'disabled' : ''].join(' ').trim(),
-    ...props
+    css: HelperTextRootCSS,
+    className: ['DGN-UI-HelperText', className].join(' ').trim().replace(/\s+/g, ' '),
+    style: style,
+    lineClamp: 1
   }, typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
 }));
+const HelperTextRootCSS = css`
+    margin-top: ${spacing()}px;
+`;
 HelperText.defaultProps = {
   disabled: false,
   status: 'default',
   className: '',
+  style: {},
   children: ''
 };
 HelperText.propTypes = {
-  /** prevent all event if true */
+  /** If true, the component is disabled. */
   disabled: PropTypes.bool,
 
   /** status type to display color for input (only available for type is inform) */
   status: PropTypes.oneOf(['default', 'warning', 'success', 'danger', 'info']),
 
-  /** class use in for helper text */
+  /** Class for component. */
   className: PropTypes.string,
 
-  /** the content to display in HelperText */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** any props else */
-  props: PropTypes.any
+  /** Content to display in component. */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
 export default HelperText;

package/components/form-control/number-input/index2.js

@@ -221,14 +221,14 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       e.preventDefault();
     } // key arrow down
     else if (keyCode === 40) {
-        _onInput({ ...e,
-          target: { ...e.target,
-            value: Number(convertMoneyToNumber(value) || 0) - step
-          }
-        });
+      _onInput({ ...e,
+        target: { ...e.target,
+          value: Number(convertMoneyToNumber(value) || 0) - step
+        }
+      });
 
-        e.preventDefault();
-      } // disabled negative
+      e.preventDefault();
+    } // disabled negative
 
 
     const disabled180 = (keyCode === 189 || keyCode === 109) && (disabledNegative || value.includes('-')); // Block event if include conditions

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

@@ -3,11 +3,11 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { forwardRef, memo, useState, useRef } from 'react';
+import { forwardRef, memo, useState, useRef, useEffect, useMemo } from 'react';
 import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
 import Typography from './../../typography';
-import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, pointerEventsNone, cursorNotAllowed } from '../../../styles/general';
+import { cursorPointer, borderBox, positionAbsolute, positionRelative, displayNone, displayBlock, cursorNoDrop } from '../../../styles/general';
 const {
   spacing,
   colors: {
@@ -24,6 +24,7 @@ const {
 const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   disabled,
+  readOnly,
   name,
   defaultChecked,
   checked,
@@ -34,8 +35,7 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onChange,
   inputRef,
   inputProps,
-  lineClamp,
-  hoverTooltip,
+  labelProps,
   ...props
 }, ref) => {
   if (!inputRef) {
@@ -46,127 +46,140 @@ const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowNumber: false,
     allowSymbol: false
   }));
-  const formCheck = css`
-                ${positionRelative};
-                ${displayBlock};
-                &.disabled {
-                    ${pointerEventsNone};
-                }
-            `;
-  const formCheckInput = css`
-                ${positionAbsolute};
-                ${borderBox};
-                ${displayNone};
-                &:hover ~ label::before {
-                    box-shadow: 0 0 0 2px ${clFillHover};
-                    background: ${clFillHover};
-                }
-                &:checked ~ label:after {
-                    ${borderBox};
-                    ${positionAbsolute};
-                    width: ${width / 2}px;
-                    height: ${width / 2}px;
-                    left: ${width / 4}px;
-                    background: ${clSystemActive};
-                    border-radius: 50%;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    content: '';
-                    transition: 0.28s ease;
-                }
-                &:checked ~ label:before {
-                    border-color: ${clSystemActive};
-                }
-                &:disabled + label {
-                    ${pointerEventsNone};
-                    ${cursorNotAllowed};
-                    color: ${clDisabled};
-                    &::after {
-                        background: ${clDisabled};
-                    }
-                    &::before {
-                        border-color: ${clDisabled};
-                    }
-                }
-            `;
-  const formCheckLabel = css`
-                ${displayBlock};
-                ${positionRelative};
-                ${cursorPointer};
-                padding-left: ${width + spacing(1.5)}px;
-                min-height: ${width}px;
-                margin: 2px;
-                &:before {
-                    ${positionAbsolute};
-                    ${borderBox};
-                    width: ${width}px;
-                    height: ${width}px;
-                    border-radius: 50%;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    left: 0;
-                    content: '';
-                    border: 2px solid ${clSystemRest};
-                    transition: 0.28s ease;
-                }
-            `;
+  const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
+
+  const _formCheckInputCSS = formCheckInputCSS(width);
+
+  const _formCheckLabelCSS = formCheckLabelCSS(width);
 
   const handleChange = e => {
-    const el = { ...e
+    if (disabled || readOnly) return;
+    if (checked === undefined) setCheckedState(true);
+    e = {
+      value: value,
+      target: { ...inputRef.current,
+        checked: true
+      }
     };
-    el.value = value !== null && value !== void 0 ? value : label;
-    onChange && onChange(el);
+    if (onChange) onChange(e);
   };
 
-  return jsx("div", {
-    id: 'DGN-Core-Radio-' + (id || unique),
-    css: formCheck,
-    className: ['DGN-UI-Radio', disabled ? 'disabled' : '', className].join(' ').trim(),
-    ref: ref,
-    ...props
-  }, jsx("input", { ...inputProps,
-    disabled: disabled,
-    ref: inputRef,
-    name: name,
-    hidden: true,
-    checked: checked,
-    type: "radio",
-    defaultChecked: defaultChecked,
-    css: formCheckInput,
-    id: id || unique,
-    onChange: handleChange
-  }), jsx("label", {
-    css: formCheckLabel,
-    htmlFor: id || unique
-  }, jsx(Typography, {
-    color: disabled ? clDisabled : '',
-    type: 'p1',
-    lineClamp: lineClamp,
-    hoverTooltip: hoverTooltip
-  }, label !== null && label !== void 0 ? label : value)));
+  useEffect(() => {
+    if (checked !== undefined) setCheckedState(Boolean(checked));
+  }, [checked]);
+  return useMemo(() => {
+    return jsx("div", {
+      id: 'DGN-Core-Radio-' + (id || unique),
+      css: formCheckCSS,
+      className: ['DGN-UI-Radio', className].join(' ').trim().replace(/\s+/g, ' '),
+      ref: ref,
+      ...props
+    }, 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 ? clDisabled : '',
+      type: 'p1',
+      ...labelProps
+    }, label !== null && label !== void 0 ? label : value)));
+  }, [disabled, onChange, readOnly, checkedState]);
 }));
+const formCheckCSS = css`
+    ${displayBlock};
+    padding: ${spacing(0.5)}px;
+`;
+
+const formCheckInputCSS = width => css`
+    ${positionAbsolute};
+    ${borderBox};
+    ${displayNone};
+    &:checked ~ label:after {
+        ${borderBox};
+        ${positionAbsolute};
+        width: ${width / 2}px;
+        height: ${width / 2}px;
+        left: ${width / 4}px;
+        background: ${clSystemActive};
+        border-radius: 50%;
+        top: 50%;
+        transform: translateY(-50%);
+        content: '';
+        transition: 0.28s ease;
+    }
+    &:checked ~ label:before {
+        border-color: ${clSystemActive};
+    }
+`;
+
+const formCheckLabelCSS = width => 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 ${clFillHover};
+        background: ${clFillHover};
+    }
+    &.disabled,
+    &.read-only {
+        ${cursorNoDrop};
+    }
+    &.disabled {
+        color: ${clDisabled};
+        &:after {
+            background: ${clDisabled} !important;
+        }
+        &:before {
+            border-color: ${clDisabled} !important;
+        }
+    }
+    &:before {
+        ${positionAbsolute};
+        ${borderBox};
+        width: ${width}px;
+        height: ${width}px;
+        border-radius: 50%;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        content: '';
+        border: 2px solid ${clSystemRest};
+        transition: 0.28s ease;
+    }
+`;
+
 Radio.defaultProps = {
   disabled: false,
+  readOnly: false,
   defaultChecked: false,
   label: '',
   value: '',
   className: '',
-  width: 20
+  width: 20,
+  labelProps: {}
 };
 Radio.propTypes = {
-  /**
-   * If `true`, the component is disabled.
-   */
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /**
-   * If `true`, the component is checked.
-   */
+  /** If `true`, the component is checked. */
   checked: PropTypes.bool,
 
-  /**
-   * If `true`, the component is defaultChecked.
-   */
+  /** If `true`, the component is defaultChecked. */
   defaultChecked: PropTypes.bool,
 
   /** Id is randomized randomly to avoid duplication. */
@@ -176,7 +189,7 @@ Radio.propTypes = {
   name: PropTypes.string,
 
   /** The value of the component. The DOM API casts this to a string. */
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** The name of the Radio is displayed on the interface */
   label: PropTypes.string,
@@ -184,7 +197,7 @@ Radio.propTypes = {
   /** The class for Radio component */
   className: PropTypes.string,
 
-  /** props for input */
+  /** Props for input. */
   inputProps: PropTypes.object,
 
   /** Callback fired when the state is changed.
@@ -195,10 +208,10 @@ Radio.propTypes = {
    *  */
   onChange: PropTypes.func,
 
-  /** The line-clamp property truncates text at a specific number of lines. */
-  lineClamp: PropTypes.number,
+  /** Prevent all event if true. */
+  readOnly: PropTypes.bool,
 
-  /** If true, hover will show tooltip when text clamped. */
-  hoverTooltip: PropTypes.bool
+  /** Props for Typography of label. */
+  labelProps: PropTypes.object
 };
 export default Radio;