diginet-core-ui 1.3.71 → 1.3.72

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

@@ -104,7 +104,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   dropdownItemStyle,
   searchExpr,
   searchMode,
-  maximumSelectionLength
+  maximumSelectionLength,
+  multilineSelectedItem
 }, reference) => {
   if (multiple && selectBox === undefined) selectBox = true;
   if (typeof searchExpr === 'string') searchExpr = [searchExpr];
@@ -144,7 +145,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const _IconCSS = IconCSS(viewType, loading, showClear);
 
-  const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, _DropdownInputCSS.name);
+  const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, disabled, placeholder, _DropdownInputCSS.name);
 
   const _DropdownListCSS = DropdownListCSS(loading);
 
@@ -189,8 +190,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         if ((typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none') && !multiple) {
           var _inputRef$current$chi;
 
-          inputRef.current.innerHTML = inputRef.current.textContent.trim();
-          if (!allowSearch) inputRef.current.contentEditable = true;
+          inputRef.current.innerHTML = inputRef.current.textContent.trim(); // if (!allowSearch) inputRef.current.contentEditable = true;
+
           const caret = (_inputRef$current$chi = inputRef.current.childNodes) !== null && _inputRef$current$chi !== void 0 && _inputRef$current$chi.length ? 1 : 0;
           const range = document.createRange();
           range.setStart(inputRef.current, caret);
@@ -900,6 +901,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (closeAfterSelect === true || closeAfterSelect === undefined && !multiple) {
       closeDropdown();
+    } else {
+      setTimeout(() => {
+        updatePositionDropdown();
+      }, 0);
     }
   }; // const onChangeValueWithCheckbox = e => {
   //     const firstChild = e.currentTarget.firstChild;
@@ -1098,7 +1103,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const icon = getIconFromData(data);
       const valueWithIcon = jsx(Fragment, null, icon && icon, jsx(Typography, {
         type: 'p1',
-        lineClamp: 1,
+        lineClamp: multilineSelectedItem ? undefined : 1,
         hoverTooltip: !_isMobile
       }, text));
       const el = document.createElement('div');
@@ -1220,11 +1225,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef.current.addEventListener('click', onClickInput);
       inputRef.current.addEventListener('input', onChangeInput);
       !!onLoadMore && dropdownListRef.current && dropdownListRef.current.addEventListener('scroll', onLoadMoreHandler);
-    } else {
-      if (multiple || allowSearch) {
-        inputRef.current.contentEditable = false;
-      }
-    }
+    } // else {
+    //     if (multiple || allowSearch) {
+    //         inputRef.current.contentEditable = false;
+    //     }
+    // }
+
 
     if (disabled || readOnly || children) {
       inputRef.current.addEventListener('keydown', onPreventKeyDownHandler);
@@ -1238,11 +1244,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (!readOnly && !disabled) {
         inputRef.current.removeEventListener('click', onClickInput);
         inputRef.current.removeEventListener('input', onChangeInput);
-      } else {
-        if (multiple && !allowSearch) {
-          inputRef.current.contentEditable = true;
-        }
-      }
+      } // else {
+      //     if (multiple && !allowSearch) {
+      //         inputRef.current.contentEditable = true;
+      //     }
+      // }
+
 
       if (disabled || readOnly || children) {
         inputRef.current.removeEventListener('keydown', onPreventKeyDownHandler);
@@ -1379,7 +1386,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       return item;
     })) : typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none' ? jsx("div", { ...inputProps,
-      contentEditable: !disabled && !allowSearch,
+      // contentEditable={!disabled && !allowSearch}
       style: inputStyle,
       ref: inputRef,
       css: _DropdownInputCSS,
@@ -1390,22 +1397,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return false;
         }
       }
-    }) : jsx(Fragment, null, jsx("input", { ...inputProps,
-      style: openState || !textValue ? inputStyle : { ...inputStyle,
-        visibility: 'hidden'
-      },
+    }) : jsx(Fragment, null, jsx(Typography, {
       ref: inputRef,
       css: _DropdownInputCSS,
-      type: "text",
-      placeholder: placeholder,
-      disabled: disabled || allowSearch
-    }), !openState && textValue && jsx(Typography, {
       hoverTooltip: true,
-      lineClamp: 1,
+      lineClamp: multilineSelectedItem ? undefined : 1,
       type: 'p1',
-      css: _DropdownInputCSS,
       style: {
-        position: 'absolute',
         lineHeight: '24px'
       },
       onClick: onClickInput
@@ -1433,7 +1431,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       disabled: disabled || readOnly
     })));
-  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, dataSource, valueObjectDefault, valueExpr, displayExpr, openState, showClear, textValue, valueMulti]);
+  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, dataSource, valueObjectDefault, valueExpr, displayExpr, multilineSelectedItem, openState, showClear, textValue, valueMulti]);
   const ErrorView = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
@@ -1445,7 +1443,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, error), [error, disabled, errorStyle]);
   const DropdownView = useMemo(() => {
     return openState ? /*#__PURE__*/createPortal(showDropdown(), document.body) : null;
-  }, [openState, valueMulti, dataSource, loading, multiple, selectBox, maximumSelectionLength]);
+  }, [openState, valueMulti, dataSource, loading, multiple, selectBox, maximumSelectionLength, multilineSelectedItem]);
   /* End component */
 
   return jsx(Fragment, null, jsx("div", {
@@ -1528,7 +1526,7 @@ const IconCSS = (viewType, loading, showClear) => css`
     }
 `;
 
-const DropdownFormCSS = (viewType, multiple, disabled, DropdownInputCSSName) => viewType !== 'outlined' ? css`
+const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInputCSSName) => viewType !== 'outlined' ? css`
               ${flexRow};
               ${alignCenter};
               ${positionRelative};
@@ -1561,6 +1559,10 @@ const DropdownFormCSS = (viewType, multiple, disabled, DropdownInputCSSName) =>
                       transform: rotateX(180deg);
                   }
               }
+              span:empty:before {
+                  content: '${placeholder}';
+                  color: ${sub};
+              }
               &::placeholder {
                   color: ${sub};
               }
@@ -1793,7 +1795,8 @@ Dropdown.defaultProps = {
   formStyle: {},
   dataSource: [],
   onInput: null,
-  searchMode: 'contains'
+  searchMode: 'contains',
+  multilineSelectedItem: false
 };
 Dropdown.propTypes = {
   /**The variant to use. */
@@ -1970,6 +1973,9 @@ Dropdown.propTypes = {
   /** Set restrictions regarding the maximum number of options that can be selected. (Use with prop `multiple`) */
   maximumSelectionLength: PropTypes.number,
 
+  /** If `true`, show multi-line selected item(s). */
+  multilineSelectedItem: PropTypes.bool,
+
   /**
    * ref methods
    *

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

@@ -430,10 +430,10 @@ TextInput.propTypes = {
   /** 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', 'quickEdit', '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
+  /** 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]),
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.71",
+  "version": "1.3.72",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,9 @@ npm test
 ```
 
 ## Changelog
+## 1.3.72
+- \[Changed\]: Dropdown – Add prop multilineSelectedItem
+
 ## 1.3.71
 - \[Changed\]: Tooltip – Add prop disableInteractive
 - \[Changed\]: Card – Update storybook Card