uiw 4.12.0 → 4.13.0

package/README.md

@@ -7,27 +7,24 @@
   <a href="https://github.com/uiwjs/uiw/actions">
     <img alt="Github Actions" src="https://github.com/uiwjs/uiw/workflows/Build%20uiw/badge.svg">
   </a>
-  <a href="https://github.com/uiwjs/uiw/issues">
-    <img alt="Github Issues" src="https://img.shields.io/github/issues/uiwjs/uiw.svg">
+  <a href="https://github.com/uiwjs/uiw">
+    <img alt="License MIT" src="https://img.shields.io/dub/l/vibe-d.svg">
   </a>
-  <a href="https://github.com/uiwjs/uiw/network">
-    <img alt="Github Forks" src="https://img.shields.io/github/forks/uiwjs/uiw.svg">
+  <a href="https://github.com/facebook/jest">
+    <img alt="jest" src="https://facebook.github.io/jest/img/jest-badge.svg">
   </a>
-  <a href="https://github.com/uiwjs/uiw/stargazers">
-    <img alt="Github Stars" src="https://img.shields.io/github/stars/uiwjs/uiw.svg">
+  <a href="https://gitpod.io/#https://github.com/uiwjs/uiw">
+    <img alt="Open in Gitpod" src="https://shields.io/badge/Open%20in-Gitpod-green?logo=Gitpod">
   </a>
   <br>
   <a href="https://github.com/uiwjs/uiw/releases">
     <img alt="Github Releases" src="https://img.shields.io/github/release/uiwjs/uiw.svg">
   </a>
-  <a href="https://github.com/uiwjs/uiw">
-    <img alt="License MIT" src="https://img.shields.io/dub/l/vibe-d.svg">
-  </a>
   <a href="https://www.npmjs.com/package/uiw">
     <img alt="npm version" src="https://img.shields.io/npm/v/uiw.svg">
   </a>
-  <a href="https://github.com/facebook/jest">
-    <img alt="jest" src="https://facebook.github.io/jest/img/jest-badge.svg">
+  <a href="https://github.com/uiwjs/uiw/stargazers">
+    <img alt="Github Stars" src="https://img.shields.io/github/stars/uiwjs/uiw.svg">
   </a>
 </p>
 
@@ -107,7 +104,7 @@ Package | Version | Description
 [`@uiw/react-grid`](/packages/react-grid)| [![npm version](https://img.shields.io/npm/v/@uiw/react-grid.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-grid)                           | -
 [`@uiw/react-icon`](/packages/react-icon)| [![npm version](https://img.shields.io/npm/v/@uiw/react-icon.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-icon)                           | -
 [`@uiw/react-input`](/packages/react-input)| [![npm version](https://img.shields.io/npm/v/@uiw/react-input.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-input)                         | -
-[`@uiw/react-layout`](/packages/react-layout)| [![npm version](https://img.shields.io/npm/v/@uiw/react-layout.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-layout)                       | -
+[`@uiw/react-layout`](https://github.com/uiwjs/react-layout)| [![npm version](https://img.shields.io/npm/v/@uiw/react-layout.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-layout)                       | -
 [`@uiw/react-list`](/packages/react-list)| [![npm version](https://img.shields.io/npm/v/@uiw/react-list.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-list)                           | -
 [`@uiw/react-loader`](/packages/react-loader)| [![npm version](https://img.shields.io/npm/v/@uiw/react-loader.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-loader)                       | -
 [`@uiw/react-menu`](/packages/react-menu)| [![npm version](https://img.shields.io/npm/v/@uiw/react-menu.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-menu)                           | -
@@ -124,7 +121,8 @@ Package | Version | Description
 [`@uiw/react-progress`](/packages/react-progress)| [![npm version](https://img.shields.io/npm/v/@uiw/react-progress.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-progress)                   | -
 [`@uiw/react-radio`](/packages/react-radio)| [![npm version](https://img.shields.io/npm/v/@uiw/react-radio.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-radio)                         | -
 [`@uiw/react-rate`](/packages/react-rate)| [![npm version](https://img.shields.io/npm/v/@uiw/react-rate.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-rate)                           | -
-[`@uiw/react-search-select`](/packages/react-search-select)| [![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-search-select)         | -
+[`@uiw/react-search-select`](/packages/react-search-select)| [![npm version](https://img.shields.io/npm/v/@uiw/react-search-select.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-search-select) | -
+[`@uiw/react-search-tree`](/packages/react-search-tree)| [![npm version](https://img.shields.io/npm/v/@uiw/react-search-tree.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-search-tree) | -
 [`@uiw/react-select`](/packages/react-select)| [![npm version](https://img.shields.io/npm/v/@uiw/react-select.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-select)                       | -
 [`@uiw/react-split`](https://github.com/uiwjs/react-split)| [![npm version](https://img.shields.io/npm/v/@uiw/react-split.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-split) | -
 [`@uiw/react-slider`](/packages/react-slider)| [![npm version](https://img.shields.io/npm/v/@uiw/react-slider.svg?maxAge=3600)](https://www.npmjs.com/package/@uiw/react-slider)                       | -
@@ -149,7 +147,7 @@ Use Gitpod, a free online dev environment for GitHub.
 Or clone locally:
 
 ```bash
-$ git clone https://github.com/uiwjs/uiwjs.github.io.git --recurse-submodules
+$ git clone git@github.com:uiwjs/uiw.git
 ```
 
 Install dependencies & compile component code.

package/dist/uiw.css

@@ -1943,6 +1943,62 @@ sup.w-badge-count {
   display: none;
 }
 
+.w-dateinputrange-contents {
+  display: flex;
+  justify-content: space-between;
+}
+.w-dateinputrange-contents input {
+  box-shadow: none;
+  padding: 0px;
+  height: 20px;
+}
+.w-dateinputrange-contents .w-input-inner:hover {
+  box-shadow: none !important;
+}
+.w-dateinputrange-contents .w-input-inner:focus {
+  box-shadow: none !important;
+}
+.w-dateinputrange-inner {
+  display: flex;
+  justify-content: space-between;
+  outline: none;
+  border: none;
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: 0 0 0 0 rgba(19, 124, 189, 0), 0 0 0 0 rgba(19, 124, 189, 0), inset 0 0 0 1px rgba(16, 22, 26, 0.15), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+  box-sizing: border-box;
+  background: #fff;
+  min-height: 30px;
+  margin: 0 !important;
+  padding: 3px 10px 3px 10px;
+  vertical-align: middle;
+  line-height: 30px;
+  color: #393e48;
+  font-weight: 400;
+  font-size: inherit;
+  transition: box-shadow 0.3s cubic-bezier(0.4, 1, 0.75, 0.9);
+  -webkit-appearance: none;
+          -moz-appearance: none;
+       appearance: none;
+}
+.w-dateinputrange-inner:focus {
+  box-shadow: 0 0 0 1px #393e48, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+}
+.w-dateinputrange-inner:hover {
+  box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+}
+.w-dateinputrange-inner:focus.w-dateinputrange-inner:hover {
+  box-shadow: 0 0 0 1px #6e6e6e, 0 0 0 3px rgba(57, 62, 72, 0.17), inset 0 1px 1px rgba(16, 22, 26, 0.2);
+}
+.w-dateinputrange-inner:disabled {
+  box-shadow: none;
+  background: #dddddd;
+  opacity: 0.75;
+  color: #a5a5a5;
+  cursor: not-allowed;
+  resize: none;
+}
+
 .w-dateinput {
   display: inline-block;
 }

package/dist/uiw.js

@@ -328,6 +328,7 @@ __webpack_require__.d(__webpack_exports__, {
   "Collapse": () => (/* reexport */ react_collapse_esm),
   "CopyToClipboard": () => (/* reexport */ CopyToClipboard),
   "DateInput": () => (/* reexport */ DateInput),
+  "DateInputRange": () => (/* reexport */ DateInputRange),
   "DatePicker": () => (/* reexport */ DatePicker),
   "DatePickerCaption": () => (/* reexport */ DatePickerCaption),
   "DatePickerDay": () => (/* reexport */ DatePickerDay),
@@ -345,7 +346,11 @@ __webpack_require__.d(__webpack_exports__, {
   "Icon": () => (/* reexport */ Icon),
   "Input": () => (/* reexport */ react_input_esm),
   "Layout": () => (/* reexport */ react_layout_esm),
+  "LayoutContent": () => (/* reexport */ LayoutContent),
   "LayoutContext": () => (/* reexport */ LayoutContext),
+  "LayoutFooter": () => (/* reexport */ LayoutFooter),
+  "LayoutHeader": () => (/* reexport */ LayoutHeader),
+  "LayoutSider": () => (/* reexport */ LayoutSider),
   "List": () => (/* reexport */ react_list_esm),
   "ListItem": () => (/* reexport */ ListItem),
   "Loader": () => (/* reexport */ react_loader_esm),
@@ -4479,6 +4484,117 @@ function CopyToClipboard(props) {
   }));
 }
 
+;// CONCATENATED MODULE: ../react-date-input/esm/style/date-input-range.css
+// extracted by mini-css-extract-plugin
+/* harmony default export */ const date_input_range = ({});
+;// CONCATENATED MODULE: ../react-date-input/esm/DateInputRange.js
+
+
+var DateInputRange_excluded = ["prefixCls", "bodyStyle", "className", "popoverProps", "datePickerProps", "allowClear", "format", "onChange", "value"];
+
+
+
+
+
+
+
+
+
+function DateInputRange(props) {
+  var {
+    prefixCls = 'w-dateinputrange',
+    bodyStyle = undefined,
+    className,
+    popoverProps,
+    datePickerProps,
+    allowClear = true,
+    format = 'YYYY/MM/DD',
+    onChange,
+    value
+  } = props,
+      inputProps = _objectWithoutPropertiesLoose(props, DateInputRange_excluded);
+
+  var [dateRange, setDateRange] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)([]);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
+    var valueTemp = [];
+    var propsValue = value;
+
+    if (Array.isArray(propsValue) && !!(propsValue != null && propsValue.length)) {
+      propsValue.forEach((date, index) => {
+        valueTemp[index] = typeof propsValue[index] === 'string' ? new Date(date) : date;
+      });
+    }
+
+    setDateRange(valueTemp);
+  }, [JSON.stringify(value)]);
+
+  function handleChange(cdate, idx) {
+    var changeValue = [...dateRange];
+    changeValue[idx] = cdate;
+    setDateRange(changeValue);
+    onChange && onChange(cdate, changeValue);
+  }
+
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: [prefixCls + "-contents", prefixCls + "-inner"].filter(Boolean).join(' ').trim(),
+    style: _extends({
+      width: 300
+    }, bodyStyle),
+    children: [/*#__PURE__*/(0,jsx_runtime.jsx)(Popover, _extends({
+      trigger: "focus",
+      placement: "bottomLeft",
+      autoAdjustOverflow: true
+    }, popoverProps, {
+      content: /*#__PURE__*/(0,jsx_runtime.jsx)(DatePicker, _extends({
+        date: dateRange[0],
+        className: prefixCls + "-popover"
+      }, datePickerProps, {
+        onChange: selectedDate => handleChange(selectedDate, 0)
+      })),
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)(react_input_esm, _extends({
+        placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F",
+        readOnly: true
+      }, inputProps, {
+        // onChange={(v) => console.log('v', v)}
+        value: dateRange[0] ? formatter(format, dateRange[0]) : '',
+        className: [prefixCls, className].filter(Boolean).join(' ').trim()
+      }))
+    })), /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+      type: "swap-right",
+      verticalAlign: "baseline",
+      style: {
+        fontSize: 21,
+        top: -1,
+        margin: '0px 8px 0px 5px'
+      }
+    }), /*#__PURE__*/(0,jsx_runtime.jsx)(Popover, _extends({
+      trigger: "focus",
+      placement: "bottomLeft",
+      autoAdjustOverflow: true
+    }, popoverProps, {
+      content: /*#__PURE__*/(0,jsx_runtime.jsx)(DatePicker, _extends({
+        date: dateRange[1],
+        className: prefixCls + "-popover"
+      }, datePickerProps, {
+        onChange: selectedDate => handleChange(selectedDate, 1)
+      })),
+      children: /*#__PURE__*/(0,jsx_runtime.jsx)(react_input_esm, _extends({
+        placeholder: "\u8BF7\u9009\u62E9\u65E5\u671F",
+        readOnly: true
+      }, inputProps, {
+        value: dateRange[1] ? formatter(format, dateRange[1]) : '' // onChange={(v) => console.log('v2', v)}
+        ,
+        className: [prefixCls, className].filter(Boolean).join(' ').trim()
+      }))
+    })), allowClear && dateRange.length > 0 && /*#__PURE__*/(0,jsx_runtime.jsx)(Icon, {
+      className: prefixCls + "-close-btn",
+      color: "#ccc",
+      onClick: () => setDateRange([]),
+      type: "close"
+    })]
+  });
+}
+
 ;// CONCATENATED MODULE: ../react-date-input/esm/style/index.css
 // extracted by mini-css-extract-plugin
 /* harmony default export */ const react_date_input_esm_style = ({});
@@ -4494,6 +4610,7 @@ var react_date_input_esm_excluded = ["prefixCls", "className", "popoverProps", "
 
 
 
+
 function DateInput(props) {
   var {
     prefixCls = 'w-dateinput',
@@ -5564,8 +5681,11 @@ function Form(_ref, ref //| React.RefObject<FormRefType>,
   }
 
   function setFields(fields) {
-    data.current = fields;
-    setData(data);
+    var tempData = _extends({}, data, {
+      current: fields
+    });
+
+    setData(tempData);
   }
 
   function handleChange(name, validator, element, cb) {
@@ -5904,7 +6024,7 @@ class Layout extends (external_root_React_commonjs2_react_commonjs_react_amd_rea
         siderHook: this.getSiderHook()
       },
       children: /*#__PURE__*/(0,jsx_runtime.jsx)("section", _extends({
-        className: [prefixCls, className, (typeof hasSider === 'boolean' ? hasSider : this.state.siders.length > 0) ? prefixCls + "-has-sider" : null].filter(Boolean).join(' ').trim()
+        className: [prefixCls, className, typeof hasSider === 'boolean' && hasSider || this.state.siders.length > 0 ? prefixCls + "-has-sider" : null].filter(Boolean).join(' ').trim()
       }, other, {
         children: children
       }))
@@ -5926,24 +6046,21 @@ Layout.defaultProps = {
 var Header_excluded = ["prefixCls", "className", "children"];
 
 
-/* harmony default export */ const Header = (function (props) {
-  if (props === void 0) {
-    props = {};
-  }
-
-  var {
+function LayoutHeader(props) {
+  var _ref = props || {},
+      {
     prefixCls = 'w-layout-header',
     className,
     children
-  } = props,
-      other = _objectWithoutPropertiesLoose(props, Header_excluded);
+  } = _ref,
+      other = _objectWithoutPropertiesLoose(_ref, Header_excluded);
 
   return /*#__PURE__*/(0,jsx_runtime.jsx)("header", _extends({
     className: [prefixCls, className].filter(Boolean).join(' ').trim()
   }, other, {
     children: children
   }));
-});
+}
 
 ;// CONCATENATED MODULE: ../../node_modules/@uiw/react-layout/esm/Footer.js
 
@@ -5951,11 +6068,7 @@ var Header_excluded = ["prefixCls", "className", "children"];
 var Footer_excluded = ["prefixCls", "className", "children"];
 
 
-/* harmony default export */ const Footer = (function (props) {
-  if (props === void 0) {
-    props = {};
-  }
-
+function LayoutFooter(props) {
   var {
     prefixCls = 'w-layout-footer',
     className,
@@ -5968,7 +6081,7 @@ var Footer_excluded = ["prefixCls", "className", "children"];
   }, other, {
     children: children
   }));
-});
+}
 
 ;// CONCATENATED MODULE: ../../node_modules/@uiw/react-layout/esm/Sider.js
 
@@ -6028,15 +6141,11 @@ function Sider(props) {
   }));
 }
 
-/* harmony default export */ const esm_Sider = (function (props) {
-  if (props === void 0) {
-    props = {};
-  }
-
+function LayoutSider(props) {
   return /*#__PURE__*/(0,jsx_runtime.jsx)(LayoutContext.Consumer, {
     children: context => /*#__PURE__*/(0,jsx_runtime.jsx)(Sider, _extends({}, props, context))
   });
-});
+}
 
 ;// CONCATENATED MODULE: ../../node_modules/@uiw/react-layout/esm/Content.js
 
@@ -6044,11 +6153,7 @@ function Sider(props) {
 var Content_excluded = ["prefixCls", "className", "children"];
 
 
-/* harmony default export */ const Content = (function (props) {
-  if (props === void 0) {
-    props = {};
-  }
-
+function LayoutContent(props) {
   var {
     prefixCls = 'w-layout-content',
     className,
@@ -6061,7 +6166,7 @@ var Content_excluded = ["prefixCls", "className", "children"];
   }, other, {
     children: children
   }));
-});
+}
 
 ;// CONCATENATED MODULE: ../../node_modules/@uiw/react-layout/esm/style/index.css
 // extracted by mini-css-extract-plugin
@@ -6073,10 +6178,10 @@ var Content_excluded = ["prefixCls", "className", "children"];
 
 
 
-Layout.Header = Header;
-Layout.Footer = Footer;
-Layout.Sider = esm_Sider;
-Layout.Content = Content;
+Layout.Header = LayoutHeader;
+Layout.Footer = LayoutFooter;
+Layout.Sider = LayoutSider;
+Layout.Content = LayoutContent;
 
 
 
@@ -7690,7 +7795,7 @@ var react_tag_esm_excluded = ["prefixCls", "className", "style", "title", "child
 ;// CONCATENATED MODULE: ../react-search-select/esm/index.js
 
 
-var react_search_select_esm_excluded = ["allowClear", "disabled", "size", "maxTagCount", "option", "loading", "labelInValue", "prefixCls", "className", "mode", "style", "isOpen", "value", "defaultValue", "showSearch", "placeholder", "onSearch", "onChange", "onSelect"];
+var react_search_select_esm_excluded = ["allowClear", "disabled", "size", "maxTagCount", "option", "loading", "labelInValue", "prefixCls", "className", "mode", "style", "isOpen", "value", "defaultValue", "showSearch", "tagProps", "placeholder", "onSearch", "onChange", "onSelect"];
 
 
 
@@ -7719,6 +7824,7 @@ function SearchSelect(props) {
     value,
     defaultValue,
     showSearch,
+    tagProps = {},
     placeholder,
     onSearch,
     onChange,
@@ -7901,19 +8007,20 @@ function SearchSelect(props) {
             flexFlow: 'wrap'
           },
           children: [isMultiple && selectedValue.slice(0, maxTagCount).map((item, index) => {
-            return /*#__PURE__*/(0,jsx_runtime.jsx)(react_tag_esm, {
-              style: {
+            return /*#__PURE__*/(0,jsx_runtime.jsx)(react_tag_esm, _extends({
+              style: _extends({
                 height: 20,
                 margin: 1,
                 display: 'flex',
                 alignItems: 'center'
-              },
+              }, tagProps.style),
               className: prefixCls + "-tag",
+              color: "#393E48"
+            }, tagProps, {
               closable: true,
               onClose: () => handleItemsClick(index, item),
-              color: "#393E48",
               children: item.label
-            }, index);
+            }), index);
           }), !!omitTagCount && /*#__PURE__*/(0,jsx_runtime.jsxs)(react_tag_esm, {
             style: {
               height: 20,
@@ -8155,7 +8262,7 @@ class Split extends (external_root_React_commonjs2_react_commonjs_react_amd_reac
 
         return /*#__PURE__*/(0,jsx_runtime.jsxs)((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, {
           children: [BarCom, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().cloneElement(element, _extends({}, props))]
-        });
+        }, idx);
       })
     }));
   }
@@ -9657,6 +9764,9 @@ function SearchTagInput(props) {
   optionRef.current = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useMemo)(() => selectedOption, [selectedOption]);
   var [selectIconType, setSelectIconType] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)('');
   var inputRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
+    setSelectedOption(values);
+  }, [JSON.stringify(values)]);
 
   function renderSelectIcon(type) {
     var selectIconType = type === 'enter' && allowClear && (!!selectedOption.length || searchValue) ? 'close' : '';
@@ -9835,6 +9945,15 @@ function TreeCheckeds(props) {
       }
     };
 
+    var iteratorParent = child => {
+      // 向上迭代
+      if (child.parent) {
+        var selectCount = child.parent.children.filter(child => !selectOption[child.key]).length;
+        addOrDel(child.parent.key, child.parent.label, selectCount === 0);
+        iteratorParent(child.parent);
+      }
+    };
+
     childrens.forEach(child => {
       var _child$children, _child$label;
 
@@ -9843,11 +9962,7 @@ function TreeCheckeds(props) {
       }
 
       addOrDel(child.key, (_child$label = child.label) == null ? void 0 : _child$label.toString(), isAdd);
-
-      if (child.parent) {
-        var selectCount = child.parent.children.filter(child => !selectOption[child.key]).length;
-        addOrDel(child.parent.key, child.parent.label, selectCount === 0);
-      }
+      iteratorParent(child);
     });
     return selectOption;
   };
@@ -9873,10 +9988,13 @@ function SearchTree(props) {
 
   var [selectedValues, selectedValuesSet] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(value);
   var [selectedOptions, selectedOptionSet] = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(options);
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(() => {
+    selectedValuesSet(value);
+  }, [JSON.stringify(value)]);
 
   var selectedChange = (resultValue, cur, isChecked) => {
     selectedValuesSet(resultValue);
-    onChange == null ? void 0 : onChange(resultValue, cur, isChecked);
+    onChange == null ? void 0 : onChange(cur, resultValue, isChecked);
   }; // 防抖