tdesign-react 0.37.2-alpha.2 → 0.37.2-alpha.3

package/dist/tdesign.js

@@ -9049,7 +9049,7 @@
 
   var noop$1 = (function () {});
 
-  function useControlled() {
+  var useControlled = function useControlled() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var valueKey = arguments.length > 1 ? arguments[1] : undefined;
     var onChange = arguments.length > 2 ? arguments[2] : undefined;
@@ -9073,7 +9073,7 @@
 
       onChange === null || onChange === void 0 ? void 0 : onChange.apply(void 0, [newValue].concat(args));
     }];
-  }
+  };
 
   function useAnimation() {
     var _useConfig = useConfig$1(),
@@ -19319,8 +19319,6 @@
     max: 0,
     minCollapsedNum: 0,
     multiple: false,
-    placeholder: void 0,
-    popupVisible: void 0,
     readonly: false,
     reserveKeyword: false,
     showArrow: true,
@@ -30302,8 +30300,6 @@
         loadingText = _props$loadingText === void 0 ? emptyText : _props$loadingText,
         max = props.max,
         popupProps = props.popupProps,
-        popupVisible = props.popupVisible,
-        onPopupVisibleChange = props.onPopupVisibleChange,
         reserveKeyword = props.reserveKeyword,
         className = props.className,
         style = props.style,
@@ -30355,35 +30351,35 @@
 
     var name = "".concat(classPrefix, "-select");
 
-    var _useState = React.useState(popupVisible || false),
-        _useState2 = _slicedToArray(_useState, 2),
-        showPopup = _useState2[0],
-        setShowPopup = _useState2[1];
-
-    var _useControlled3 = useControlled(props, "inputValue", props.onInputChange),
+    var _useControlled3 = useControlled(props, "popupVisible", props.onPopupVisibleChange),
         _useControlled4 = _slicedToArray(_useControlled3, 2),
-        inputValue = _useControlled4[0],
-        onInputChange = _useControlled4[1];
+        showPopup = _useControlled4[0],
+        setShowPopup = _useControlled4[1];
+
+    var _useControlled5 = useControlled(props, "inputValue", props.onInputChange),
+        _useControlled6 = _slicedToArray(_useControlled5, 2),
+        inputValue = _useControlled6[0],
+        onInputChange = _useControlled6[1];
+
+    var _useState = React.useState([]),
+        _useState2 = _slicedToArray(_useState, 2),
+        currentOptions = _useState2[0],
+        setCurrentOptions = _useState2[1];
 
     var _useState3 = React.useState([]),
         _useState4 = _slicedToArray(_useState3, 2),
-        currentOptions = _useState4[0],
-        setCurrentOptions = _useState4[1];
+        tmpPropOptions = _useState4[0],
+        setTmpPropOptions = _useState4[1];
 
-    var _useState5 = React.useState([]),
+    var _useState5 = React.useState({}),
         _useState6 = _slicedToArray(_useState5, 2),
-        tmpPropOptions = _useState6[0],
-        setTmpPropOptions = _useState6[1];
+        valueToOption = _useState6[0],
+        setValueToOption = _useState6[1];
 
-    var _useState7 = React.useState({}),
+    var _useState7 = React.useState([]),
         _useState8 = _slicedToArray(_useState7, 2),
-        valueToOption = _useState8[0],
-        setValueToOption = _useState8[1];
-
-    var _useState9 = React.useState([]),
-        _useState10 = _slicedToArray(_useState9, 2),
-        selectedOptions = _useState10[0],
-        setSelectedOptions = _useState10[1];
+        selectedOptions = _useState8[0],
+        setSelectedOptions = _useState8[1];
 
     React.useEffect(function () {
       if (keys) {
@@ -30446,9 +30442,9 @@
       return get_1(selectedOptions[0] || {}, (keys === null || keys === void 0 ? void 0 : keys.label) || "label") || void 0;
     }, [selectedOptions, keys, multiple]);
 
-    var handleShowPopup = function handleShowPopup(visible) {
+    var handleShowPopup = function handleShowPopup(visible, ctx) {
       if (disabled) return;
-      setShowPopup(visible);
+      setShowPopup(visible, ctx);
       onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
       visible && onInputChange("");
     };
@@ -30598,7 +30594,7 @@
     };
 
     React.useEffect(function () {
-      if (inputValue) {
+      if (typeof inputValue !== "undefined") {
         handleFilter(String(inputValue));
       }
     }, [inputValue]);
@@ -30627,7 +30623,9 @@
         size: size,
         multiple: multiple,
         showPopup: showPopup,
-        setShowPopup: setShowPopup,
+        setShowPopup: function setShowPopup(show) {
+          return handleShowPopup(show, {});
+        },
         options: currentOptions,
         empty: empty,
         max: max,
@@ -30741,7 +30739,7 @@
       suffixIcon: renderSuffixIcon(),
       panel: renderContent(),
       placeholder: !multiple && showPopup && selectedLabel ? selectedLabel : placeholder || t(local.placeholder),
-      inputValue: showPopup ? inputValue : "",
+      inputValue: inputValue,
       tagInputProps: _objectSpread$1v({
         autoWidth: true
       }, tagInputProps),
@@ -30755,7 +30753,7 @@
         overlayClassName: ["".concat(name, "__dropdown"), ["narrow-scrollbar"], overlayClassName]
       }, restPopupProps),
       popupVisible: showPopup,
-      onPopupVisibleChange: onPopupVisibleChange || handleShowPopup,
+      onPopupVisibleChange: handleShowPopup,
       onTagChange: onTagChange,
       onInputChange: handleInputChange,
       onFocus: onFocus,
@@ -54198,6 +54196,29 @@
 
     return dataList;
   }
+  function getQuarters(year, _ref6) {
+    var _ref6$disableDate = _ref6.disableDate,
+        disableDate = _ref6$disableDate === void 0 ? function () {
+      return false;
+    } : _ref6$disableDate,
+        minDate = _ref6.minDate,
+        maxDate = _ref6.maxDate;
+    var quarterArr = [];
+    var today = getToday();
+
+    for (var i = 1; i <= 4; i++) {
+      var date = dayjs(new Date(year, 0)).quarter(i).toDate();
+      quarterArr.push({
+        value: date,
+        now: isSame(date, today, "quarter"),
+        disabled: typeof disableDate === "function" && disableDate(date) || outOfRanges(date, minDate, maxDate),
+        active: false,
+        text: "Q".concat(i)
+      });
+    }
+
+    return chunk_1(quarterArr, 4);
+  }
   function getYears(year, _ref7) {
     var _ref7$disableDate = _ref7.disableDate,
         disableDate = _ref7$disableDate === void 0 ? function () {
@@ -54540,6 +54561,26 @@
       }
     }
 
+    if (/Q/g.test(format)) {
+      if (typeof dateText !== "string") {
+        dateText = dayjs(dateText).format(format);
+      }
+
+      var _yearStr = dateText.split(/[-/.]/)[0];
+      var quarterStr = dateText.split(/[-/.]/)[1];
+      var quarterFormatStr = format.split(/[-/.]/)[1];
+
+      var _firstWeek = dayjs(_yearStr, "YYYY").startOf("year");
+
+      for (var _i = 0; _i <= 52; _i += 1) {
+        var nextQuarter = _firstWeek.add(_i, "quarter");
+
+        if (nextQuarter.format(quarterFormatStr) === quarterStr) {
+          return nextQuarter;
+        }
+      }
+    }
+
     return dayjs(dateText, format).isValid() ? dayjs(dateText, format) : dayjs(dateText);
   }
   function getDefaultFormat(_ref4) {
@@ -54565,6 +54606,14 @@
       };
     }
 
+    if (mode === "quarter") {
+      return {
+        format: format || "YYYY-[Q]Q",
+        valueType: valueType || "YYYY-[Q]Q",
+        timeFormat: TIME_FORMAT$1
+      };
+    }
+
     if (mode === "week") {
       return {
         format: format || "YYYY-wo",
@@ -55756,6 +55805,7 @@
     }),
         timeFormat = _getDefaultFormat.timeFormat;
 
+    var showTimePicker = enableTimePicker && mode === "date";
     var defaultTime = "00:00:00";
     return /* @__PURE__ */React__default["default"].createElement("div", {
       className: "".concat(panelName, "-content")
@@ -55802,7 +55852,7 @@
         });
       },
       onCellMouseLeave: onCellMouseLeave
-    })), enableTimePicker && /* @__PURE__ */React__default["default"].createElement("div", {
+    })), showTimePicker && /* @__PURE__ */React__default["default"].createElement("div", {
       className: "".concat(panelName, "-time")
     }, /* @__PURE__ */React__default["default"].createElement("div", {
       className: "".concat(panelName, "-time-viewer")
@@ -55921,6 +55971,8 @@
         year: year,
         month: month
       }, options);
+    } else if (mode === "quarter") {
+      data = getQuarters(year, options);
     } else if (mode === "month") {
       data = getMonths(year, options);
     } else if (mode === "year") {
@@ -56180,9 +56232,9 @@
 
     if (mode === "year") {
       defaultYearMonthTime.year[1] += 10;
-    } else if (mode === "month") {
+    } else if (mode === "month" || mode === "quarter") {
       defaultYearMonthTime.year[1] += 1;
-    } else if (mode === "date") {
+    } else if (mode === "date" || mode === "week") {
       defaultYearMonthTime.month[1] += 1;
     }
 
@@ -56192,17 +56244,16 @@
 
     return {
       year: value.map(function (v) {
-        return dayjs(v, format).year() || dayjs(v).year();
+        return parseToDayjs(v, format).year();
       }),
       month: value.map(function (v) {
-        return dayjs(v, format).month() || dayjs(v).month();
+        return parseToDayjs(v, format).month();
       }),
       time: value.map(function (v) {
-        return dayjs(v, format).format(timeFormat) || dayjs(v).format(timeFormat);
+        return parseToDayjs(v, format).format(timeFormat);
       })
     };
   }
-
   function useRange$1(props) {
     var _useControlled = useControlled(props, "value", props.onChange),
         _useControlled2 = _slicedToArray(_useControlled, 2),
@@ -56622,7 +56673,7 @@
         setTime(formatTime(value || [dayjs().format(timeFormat), dayjs().format(timeFormat)], timeFormat));
 
         if (!value.length) {
-          setYear([dayjs().year(), dayjs().year()]);
+          setYear(initYearMonthTime(value, mode, format).year);
           setMonth([dayjs().month(), dayjs().month() + 1]);
         } else if (value.length === 2 && !enableTimePicker) {
           var nextMonth = value.map(function (v) {
@@ -56725,6 +56776,7 @@
         date: 1,
         week: 1,
         month: 12,
+        quarter: 12,
         year: 120
       };
       var monthCount = monthCountMap[mode] || 0;
@@ -60334,6 +60386,7 @@
         date: 1,
         week: 1,
         month: 12,
+        quarter: 12,
         year: 120
       };
       var monthCount = monthCountMap[mode] || 0;
@@ -60546,6 +60599,7 @@
         date: 1,
         week: 1,
         month: 12,
+        quarter: 12,
         year: 120
       };
       var monthCount = monthCountMap[mode] || 0;
@@ -60834,6 +60888,7 @@
         date: 1,
         week: 1,
         month: 12,
+        quarter: 12,
         year: 120
       };
       var monthCount = monthCountMap[mode] || 0;
@@ -66385,6 +66440,186 @@
 
   var Space = Space$1;
 
+  var rateDefaultProps = {
+    defaultValue: 0,
+    allowHalf: false,
+    color: "#ED7B2F",
+    disabled: false,
+    size: "20",
+    count: 5,
+    gap: 6,
+    showText: false,
+    texts: ["\u6781\u5DEE", "\u5931\u671B", "\u4E00\u822C", "\u6EE1\u610F", "\u60CA\u559C"]
+  };
+
+  var getFilledStarSvg = function getFilledStarSvg(size) {
+    return /* @__PURE__ */React__default["default"].createElement("svg", {
+      fill: "none",
+      viewBox: "0 0 16 16",
+      width: "".concat(size),
+      height: "".concat(size)
+    }, /* @__PURE__ */React__default["default"].createElement("path", {
+      fill: "currentColor",
+      d: "M7.73 1.55a.3.3 0 01.54 0l1.94 3.92 4.32.62a.3.3 0 01.17.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92z",
+      fillOpacity: "0.9"
+    }));
+  };
+
+  var getFilledHalfStarSvg = function getFilledHalfStarSvg(size) {
+    return /* @__PURE__ */React__default["default"].createElement("svg", {
+      fill: "none",
+      viewBox: "0 0 16 16",
+      width: "".concat(size),
+      height: "".concat(size)
+    }, /* @__PURE__ */React__default["default"].createElement("defs", null, /* @__PURE__ */React__default["default"].createElement("linearGradient", {
+      id: "half_grad"
+    }, /* @__PURE__ */React__default["default"].createElement("stop", {
+      offset: "50%",
+      stopColor: "currentColor"
+    }), /* @__PURE__ */React__default["default"].createElement("stop", {
+      offset: "50%",
+      stopColor: "white",
+      stopOpacity: "1"
+    }))), /* @__PURE__ */React__default["default"].createElement("path", {
+      fill: "url(#half_grad)",
+      d: "M7.73 1.55a.3.3 0 01.54 0l1.94 3.92 4.32.62a.3.3 0 01.17.52l-3.13 3.05.74 4.3a.3.3 0 01-.44.32L8 12.25l-3.87 2.03a.3.3 0 01-.43-.31l.73-4.31L1.3 6.6a.3.3 0 01.17-.52l4.33-.62 1.93-3.92z",
+      fillOpacity: "0.9"
+    }));
+  };
+
+  var Rate$1 = function Rate(props) {
+    var allowHalf = props.allowHalf,
+        color = props.color,
+        count = props.count,
+        disabled = props.disabled,
+        gap = props.gap,
+        showText = props.showText,
+        size = props.size,
+        texts = props.texts,
+        onChange = props.onChange;
+
+    var _useControlled = useControlled(props, "value", onChange),
+        _useControlled2 = _slicedToArray(_useControlled, 2),
+        _useControlled2$ = _useControlled2[0],
+        starValue = _useControlled2$ === void 0 ? 0 : _useControlled2$,
+        setStarValue = _useControlled2[1];
+
+    var _useState = React.useState(void 0),
+        _useState2 = _slicedToArray(_useState, 2),
+        _useState2$ = _useState2[0],
+        hoverValue = _useState2$ === void 0 ? void 0 : _useState2$,
+        setHoverValue = _useState2[1];
+
+    var rootRef = React__default["default"].useRef(null);
+
+    var _useConfig = useConfig$1(),
+        classPrefix = _useConfig.classPrefix;
+
+    var getStarValue = function getStarValue(event, index) {
+      if (allowHalf) {
+        var rootNode = rootRef.current;
+
+        var _rootNode$getBounding = rootNode.getBoundingClientRect(),
+            left = _rootNode$getBounding.left;
+
+        var firstStar = rootNode.firstChild;
+
+        var _firstStar$getBoundin = firstStar.getBoundingClientRect(),
+            width = _firstStar$getBoundin.width;
+
+        var clientX = event.clientX;
+        var starMiddle = width * (index - 0.5) + gap * (index - 1);
+
+        if (clientX - left < starMiddle) {
+          return index - 0.5;
+        }
+
+        if (clientX - left >= starMiddle) {
+          return index;
+        }
+      } else {
+        return index;
+      }
+    };
+
+    var mouseEnterHandler = function mouseEnterHandler(event, index) {
+      setHoverValue(getStarValue(event, index));
+    };
+
+    var mouseLeaveHandler = function mouseLeaveHandler() {
+      setHoverValue(void 0);
+    };
+
+    var clickHandler = function clickHandler(event, index) {
+      setStarValue(getStarValue(event, index));
+    };
+
+    var getStarStyle = React.useCallback(function (index, count2, displayValue2) {
+      var filledColor = Array.isArray(color) ? color[0] : color || "#ED7B2F";
+      var defaultColor = Array.isArray(color) ? color[1] : "#E7E7E7";
+      return {
+        marginRight: index < count2 - 1 ? gap : "",
+        width: size,
+        height: size,
+        color: index < displayValue2 ? filledColor : defaultColor
+      };
+    }, [size, color, gap]);
+    var getStar = React.useCallback(function (allowHalf2, index, displayValue2) {
+      if (allowHalf2 && index + 0.5 === displayValue2) {
+        return getFilledHalfStarSvg(size);
+      }
+
+      if (index >= displayValue2) {
+        return getFilledStarSvg(size);
+      }
+
+      if (index < displayValue2) {
+        return getFilledStarSvg(size);
+      }
+    }, [size]);
+    var displayValue = hoverValue || starValue;
+    return /* @__PURE__ */React__default["default"].createElement("div", {
+      className: "".concat(classPrefix, "-rate"),
+      ref: rootRef,
+      onMouseLeave: function onMouseLeave() {
+        return !disabled && mouseLeaveHandler();
+      }
+    }, _toConsumableArray(Array(count)).map(function (_, index) {
+      return showText ? /* @__PURE__ */React__default["default"].createElement(Tooltip, {
+        key: index,
+        content: texts[displayValue - 1],
+        className: "".concat(classPrefix, "-rate__wrapper")
+      }, /* @__PURE__ */React__default["default"].createElement("div", {
+        key: index,
+        onMouseMove: function onMouseMove(event) {
+          return !disabled && mouseEnterHandler(event, index + 1);
+        },
+        onClick: function onClick(event) {
+          return !disabled && clickHandler(event, index + 1);
+        },
+        style: getStarStyle(index, count, displayValue),
+        className: "".concat(classPrefix, "-rate__wrapper")
+      }, getStar(allowHalf, index, displayValue))) : /* @__PURE__ */React__default["default"].createElement("div", {
+        key: index,
+        onMouseMove: function onMouseMove(event) {
+          return !disabled && mouseEnterHandler(event, index + 1);
+        },
+        onClick: function onClick(event) {
+          return !disabled && clickHandler(event, index + 1);
+        },
+        style: getStarStyle(index, count, displayValue),
+        className: "".concat(classPrefix, "-rate__wrapper")
+      }, getStar(allowHalf, index, displayValue));
+    }), showText && /* @__PURE__ */React__default["default"].createElement("div", {
+      className: "".concat(classPrefix, "-rate__text")
+    }, texts[displayValue - 1]));
+  };
+
+  Rate$1.displayName = "Rate";
+  Rate$1.defaultProps = rateDefaultProps;
+
+  var Rate = Rate$1;
+
   if (typeof console !== "undefined" && console.warn && typeof window !== "undefined") {
     console.warn("You are using a whole package of TDesign!");
   }
@@ -66441,6 +66676,7 @@
   exports.Radio = Radio;
   exports.RangeInput = RangeInput;
   exports.RangeInputPopup = RangeInputPopup;
+  exports.Rate = Rate;
   exports.Row = Row;
   exports.Select = Select;
   exports.SelectInput = SelectInput;