uiw 4.12.2 → 4.13.0

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),
@@ -4483,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 = ({});
@@ -4498,6 +4610,7 @@ var react_date_input_esm_excluded = ["prefixCls", "className", "popoverProps", "
 
 
 
+
 function DateInput(props) {
   var {
     prefixCls = 'w-dateinput',
@@ -7682,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"];
 
 
 
@@ -7711,6 +7824,7 @@ function SearchSelect(props) {
     value,
     defaultValue,
     showSearch,
+    tagProps = {},
     placeholder,
     onSearch,
     onChange,
@@ -7893,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,