diginet-core-ui 1.3.36 → 1.3.37

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { Account } from '../../../icons';
 import AvatarDefault from '../../../assets/avatar/default.svg';
-import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon } from '../../';
+import { InputBase, Chip, CircularProgress, Checkbox, TreeView, HelperText, Label, ButtonIcon, Typography } from '../../';
 import { mapParent, randomString, updatePosition } from '../../../utils';
 import { getGlobal } from '../../../global';
 import { color as colors } from '../../../styles/colors';
@@ -88,6 +88,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onInput,
   onChange,
   onLoadMore,
+  onClosed,
   renderItem,
   renderSelectedItem,
   valueObjectDefault,
@@ -97,10 +98,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   formStyle,
   labelProps,
   errorStyle,
-  refs,
   children,
   dropdownItemStyle
-}, ref) => {
+}, reference) => {
   const dropdownRef = useRef(null);
   const timerRef = useRef(null);
   const formRef = useRef(null);
@@ -115,7 +115,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowSymbol: false
   }));
   const [openState, setOpenState] = useState(false);
-  const [errorState, setErrorState] = useState(error && !valueProp && valueProp !== 0);
   const [showClear, setShowClear] = useState(false);
 
   const _isMobile = isMobile.any();
@@ -377,6 +376,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
 
     document.documentElement.style.overflow = 'auto';
+    onClosed === null || onClosed === void 0 ? void 0 : onClosed();
   };
 
   const renderDropdown = pattern => {
@@ -838,10 +838,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
               startIcon: icon,
               label: displayText,
               size: itemMultipleSize,
+              disabled: disabled,
               clearAble: true,
               onRemove: e => onRemove(e, value),
               style: {
-                margin: '3px 0'
+                margin: '3px 0',
+                width: '100%'
               }
             });
           }
@@ -1049,10 +1051,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         startIcon: icon,
         label: text,
         size: itemMultipleSize,
+        disabled: disabled,
         clearAble: true,
         onRemove: e => onRemove(e, value),
         style: {
-          margin: '3px 0'
+          margin: '3px 0',
+          width: '100%'
         }
       });
     }
@@ -1081,8 +1085,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const icon = getIconFromData(data);
       const valueWithIcon = jsx(Fragment, null, icon && jsx("div", {
         css: DropdownIconCSS
-      }, icon), jsx("div", {
-        css: DropdownTextCSS
+      }, icon), jsx(Typography, {
+        type: 'p1',
+        lineClamp: 1,
+        hoverTooltip: !_isMobile
       }, text));
       const el = document.createElement('div');
       el.style.cssText = 'display: flex; align-items: center; min-height:24px;';
@@ -1092,17 +1098,43 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(ref, () => ({
-    closeDropdown: () => {
-      closeDropdown();
-    },
-    showDropdown: () => {
-      showDropdown();
-    },
-    onClear,
-    setPreviousValue,
-    DOM: dropdownRef.current
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = dropdownRef.current || {};
+    const _instance = {
+      closeDropdown: () => {
+        closeDropdown();
+      },
+      showDropdown: () => {
+        showDropdown();
+      },
+      onClear,
+      setPreviousValue,
+      setValue: value => {
+        if (allValue[unique][allValue[unique].length - 1] !== value) {
+          allValue[unique].push(value);
+        }
+
+        setValueIntoInput(value);
+      }
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance; // keep old method
+
+    currentRef.closeDropdown = () => closeDropdown();
+
+    currentRef.showDropdown = () => showDropdown();
+
+    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;
+    return currentRef;
+  });
   useEffect(() => {
     setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
   }, [clearAble, valueProp, disabled, readOnly, loading]);
@@ -1122,7 +1154,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     };
   }, [valueObjectDefault]);
   useEffect(() => {
-    !!refs && refs(dropdownRef);
     allValue[unique] = [];
 
     if (defaultValue !== undefined && JSON.stringify(defaultValue) !== '[]') {
@@ -1186,9 +1217,6 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       };
     }
   }, [loading]);
-  useEffect(() => {
-    setErrorState(error && (!valueProp && valueProp !== 0 || (valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) === 0));
-  }, [error, valueProp]);
   useEffect(() => {
     if (valueProp !== undefined && (!boxRef.current || children || JSON.stringify(valueProp) !== JSON.stringify(currentValue[unique]))) {
       setValueIntoInput(valueProp);
@@ -1295,7 +1323,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const inputComp = useMemo(() => {
     const _InputCSS = InputCSS(multiple, renderSelectedItem, clearAble);
 
-    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
+    const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
 
     const _DropdownInputCSS = DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem);
 
@@ -1305,7 +1333,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: ['DGN-UI-Dropdown-Form', openState && 'dropdown-showing'].join(' ').trim().replace(/\s+/g, ' '),
       style: formStyle
     }, jsx("div", {
-      css: _InputCSS
+      css: _InputCSS,
+      className: 'DGN-UI-Dropdown-Form-Input'
     }, multiple ? jsx("div", { ...inputProps,
       style: {
         cursor: 'text',
@@ -1337,7 +1366,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: inputRef,
       css: _DropdownInputCSS,
       type: "text",
-      placeholder: placeholder
+      placeholder: placeholder,
+      disabled: disabled
     })), jsx("div", {
       ref: iconRef,
       css: IconCSS(viewType, loading, showClear),
@@ -1363,7 +1393,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       disabled: disabled || readOnly
     })));
   }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear]);
-  const errorComp = useMemo(() => errorState && jsx(HelperText, {
+  const errorComp = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
       minHeight: '16px',
@@ -1371,13 +1401,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       top: '100%',
       ...errorStyle
     }
-  }, error), [error, valueProp, disabled, errorStyle, errorState]);
+  }, error), [error, disabled, errorStyle]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
     ref: dropdownRef,
     css: DropdownRootCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, loading, showClear),
-    className: ['DGN-UI-Dropdown', className, errorState && 'error', loading && 'dgn-dropdown-loading', disabled ? 'disabled' : readOnly && 'readOnly'].join(' ').trim().replace(/\s+/g, ' '),
+    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);
 }));
@@ -1385,7 +1415,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 const InputCSS = (multiple, renderSelectedItem, clearAble) => css`
     ${flexRow};
-    flex: 1 1 auto;
+    width: 100%;
     ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
 `;
 
@@ -1397,11 +1427,15 @@ const DropdownIconCSS = css`
     height: inherit;
     margin-right: 8px;
     height: 32px;
+    min-height: 32px;
     width: 32px;
+    min-width: 32px;
     border-radius: 16px;
     img {
         height: 32px;
+        min-height: 32px;
         width: 32px;
+        min-width: 32px;
         object-fit: cover;
     }
 `;
@@ -1423,8 +1457,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
         ${flexWrap};
         ${overflowHidden};
         ${breakWord};
-        /* max-height: max-content; */
-        ${!multiple ? 'min-height: 24px; max-width: 100%; white-space: nowrap;' : ''}
+        ${!multiple ? 'min-height: 24px; max-width: 100%;' : ''}
         &::after {
             ${flexRow};
             ${positionAbsolute};
@@ -1455,10 +1488,14 @@ const DropdownInputCSS = (viewType, multiple, placeholder, itemMultipleSize, ren
             min-width: 24px;
             ` : `
             height: 24px;
+            min-height: 24px;
             width: 24px;
+            min-width: 24px;
             img {
                 height: 24px;
+                min-height: 24px;
                 width: 24px;
+                min-width: 24px;
             }
             `}
     }
@@ -1479,22 +1516,25 @@ const IconCSS = (viewType, loading, showClear) => css`
     }
 `;
 
-const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem) => viewType !== 'outlined' ? css`
+const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled) => viewType !== 'outlined' ? css`
               ${flexRow};
               ${alignCenter};
               ${positionRelative};
               ${borderBox};
-              flex: 1 1 auto;
+              width: 100%;
               padding-bottom: ${multiple ? 1 : 4}px;
               padding-top: ${multiple ? 1 : 4}px;
-              &:not(:focus-within):hover {
-                  &::before {
-                      border-bottom-color: ${active};
-                  }
-                  .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
-                      color: ${active};
-                  }
+              ${!disabled && `
+                    &:not(:focus-within):hover {
+                        &::before {
+                            border-bottom-color: ${active};
+                        }
+                        .css-${DropdownInputCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
+                            color: ${active};
+                    }
               }
+              `}
+
               &:focus-within {
                   border-bottom-color: ${focus};
                   &::after {
@@ -1539,15 +1579,17 @@ const DropdownFormCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
               ${borderRadius4px};
               ${borderBox};
               ${border(1, rest)};
-              flex: 1 1 auto;
+              width: 100%;
               min-height: 40px;
-              &:not(:focus-within):hover {
-                  background-color: ${hover};
-                  border-color: ${active};
-                  input {
-                      background-color: ${hover};
-                  }
-              }
+              ${!disabled && `
+                &:not(:focus-within):hover {
+                    background-color: ${hover};
+                    border-color: ${active};
+                    input {
+                        background-color: ${hover};
+                    }
+                }
+              `}
               &:focus-within {
                   border-color: ${focus};
               }
@@ -1644,7 +1686,6 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     ${displayBlock};
     ${positionRelative};
     margin-bottom: 20px;
-    /* min-width: 150px; */
     height: max-content;
     &.error {
         .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
@@ -1659,8 +1700,6 @@ const DropdownRootCSS = (viewType, multiple, placeholder, itemMultipleSize, rend
     }
     &.dgn-dropdown-loading,
     &.disabled {
-        ${pointerEventsNone};
-        ${userSelectNone};
         .css-${DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem).name} {
             border-color: ${systemDisabled};
             .css-${IconCSS(viewType, loading, showClear).name} {
@@ -1754,14 +1793,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,
@@ -1779,9 +1818,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]),
 
@@ -1791,9 +1830,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]),
 
@@ -1860,22 +1899,19 @@ Dropdown.propTypes = {
   /** The array of elements that appear in the dropdown */
   dataSource: PropTypes.array,
 
-  /** The function to get ref of Dropdown component */
-  refs: PropTypes.func,
-
-  /** 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,
 
@@ -1888,10 +1924,28 @@ Dropdown.propTypes = {
   /** the function will run when scroll near the end */
   onLoadMore: PropTypes.func,
 
+  /** the function will run when dropdown closed */
+  onClosed: PropTypes.func,
+
   /** the contents in Dropdown box (Exp: TreeView) */
   children: PropTypes.node,
 
-  /** any props else */
-  props: PropTypes.any
+  /**
+   * 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)
+  })])
 };
 export default Dropdown;

package/components/modal/header.js

@@ -1,102 +1,100 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useContext, useRef, forwardRef } from 'react';
+import { memo, useMemo, useContext, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import ModalContext from './context';
-import { brand22 } from '../../styles/colors';
 import { ButtonIcon, Typography } from '../';
+import { alignCenter, borderBox, flexRow, justifyBetween, positionRelative } from '../../styles/general';
+import { color as colors } from '../../styles/colors';
+const {
+  fill: {
+    headerbar
+  }
+} = colors;
 const ModalHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   title,
   className,
   children,
   style,
-  refs,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  showClose
+}, reference) => {
   const modal = useContext(ModalContext);
-  const ModalHeaderBox = css`
-        display: flex;
-        position: relative;
-        background-color: ${brand22};
-        width: 100%;
-        height: 56px;
-        padding: 16px 24px;
-        margin-bottom: 2px;
-        align-items: center;
-        justify-content: space-between;
-        border-radius: 4px 4px 0px 0px;
-        box-sizing: border-box;
-        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-        cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
-        order: 1;
-    `;
-  const HeaderTitle = css`
-        display: flex;
-        position: relative;
-        align-items: center;
-        width: calc(100% - 40px);
-    `;
-  const ClearIconBox = css`
-        display: flex;
-        position: relative;
-        width: 24px;
-        height: 24px;
-        justify-content: center;
-        align-items: center;
-        margin-left: 16px;
-    `;
-  useEffect(() => {
-    !!refs && refs(ref);
-  }, []);
-  const Header = useMemo(() => jsx("div", {
-    css: ModalHeaderBox,
-    className: 'DGN-UI-Modal-Header ' + className,
-    ...props,
+  const ref = useRef(null);
+
+  const _ModalHeaderCSS = ModalHeaderCSS(modal);
+
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => jsx("div", {
+    css: _ModalHeaderCSS,
+    className: ['DGN-UI-Modal-Header', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     onMouseDown: modal.onMoveModal,
     ref: ref
-  }, jsx("div", {
-    css: HeaderTitle
   }, jsx(Typography, {
     type: 'h3',
     style: {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
-      textOverflow: 'ellipsis'
+      textOverflow: 'ellipsis',
+      width: '100%'
     }
-  }, children ? children : title)), jsx("div", {
-    css: ClearIconBox
-  }, jsx(ButtonIcon, {
+  }, children ? children : title), showClose && jsx(ButtonIcon, {
     viewType: 'ghost',
-    name: 'close',
+    name: 'Close',
+    style: {
+      marginLeft: 16
+    },
     onClick: modal.close
-  }))), [children, title, style]);
-  return Header;
+  })), [children, title, style, className, showClose]);
 }));
+
+const ModalHeaderCSS = modal => css`
+    ${flexRow};
+    ${positionRelative};
+    ${justifyBetween};
+    ${alignCenter};
+    ${borderBox};
+    background-color: ${headerbar};
+    width: 100%;
+    height: 56px;
+    padding: 16px 24px;
+    margin-bottom: 2px;
+    border-radius: 4px 4px 0px 0px;
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+    cursor: ${modal.onMoveModal ? 'move' : 'inherit'};
+    order: 1;
+`;
+
 ModalHeader.defaultProps = {
   title: '',
-  className: ''
+  className: '',
+  style: {},
+  showClose: true
 };
 ModalHeader.propTypes = {
-  /** customize style inline */
+  /**  style inline of component */
   style: PropTypes.object,
 
-  /** class of ModalHeader */
+  /** class for component */
   className: PropTypes.string,
 
-  /** get modal header ref by function */
-  refs: PropTypes.func,
+  /** content for header (not work when have children) */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** title for header */
-  title: PropTypes.node,
+  /** content in header (priority) */
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** child content in header (like title) */
-  children: PropTypes.node
+  /** show close modal button */
+  showClose: PropTypes.bool
 };
 export default ModalHeader;