@nutui/nutui-react-taro 2.0.0-alpha.7 → 2.0.0-alpha.8

package/dist/style.mjs

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react-taro v2.0.0-alpha.7 Fri May 12 2023 15:37:03 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.0-alpha.8 Fri May 12 2023 19:09:19 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/variables-jmapp.scss

@@ -894,25 +894,19 @@ $infiniteloading-bottom-color: var(
 ) !default;
 
 //range（✅）
-$range-tip-font-color: var(--nutui-range-tip-font-color, $gray1) !default;
-$range-bg-color: var(--nutui-range-bg-color, rgba(#3768fa, 0.5)) !default;
-$range-bg-color-tick: var(
-  --nutui-range-bg-color-tick,
-  rgba(#3768fa, 0.9)
-) !default;
-$range-bar-bg-color: linear-gradient(
-  135deg,
-  $primary-color 0%,
-  $primary-color-end 100%
-) !default;
-$range-bar-btn-bg-color: var(
-  --nutui-range-bar-btn-bg-color,
+$range-font-color: var(--nutui-range-font-color, $gray1) !default;
+$range-height: var(--nutui-range-height, 4px) !default;
+$range-margin: var(--nutui-range-margin, 15px) !default;
+$range-inactive-color: var(--nutui-range-inactive-color, #fa958c) !default;
+$range-active-color: var(--nutui-range-active-color, $primary-color) !default;
+$range-button-background: var(
+  --nutui-range-button-background,
   $primary-text-color
 ) !default;
-$range-bar-btn-width: var(--nutui-range-bar-btn-width, 24px) !default;
-$range-bar-btn-height: var(--nutui-range-bar-btn-height, 24px) !default;
-$range-bar-btn-border: var(
-  --nutui-range-bar-btn-border,
+$range-button-width: var(--nutui-range-button-width, 24px) !default;
+$range-button-height: var(--nutui-range-button-height, 24px) !default;
+$range-button-border: var(
+  --nutui-range-button-border,
   1px solid $primary-color
 ) !default;
 

package/dist/styles/variables.scss

@@ -880,22 +880,19 @@ $infiniteloading-bottom-color: var(
 ) !default;
 
 //range（✅）
-$range-tip-font-color: var(--nutui-range-tip-font-color, $gray1) !default;
-$range-bg-color: var(--nutui-range-bg-color, rgba(#fa2c19, 0.5)) !default;
-$range-bg-color-tick: var(--nutui-range-bg-color-tick, #fa958c) !default;
-$range-bar-bg-color: linear-gradient(
-  135deg,
-  $primary-color 0%,
-  $primary-color-end 100%
-) !default;
-$range-bar-btn-bg-color: var(
-  --nutui-range-bar-btn-bg-color,
+$range-font-color: var(--nutui-range-font-color, $gray1) !default;
+$range-height: var(--nutui-range-height, 4px) !default;
+$range-margin: var(--nutui-range-margin, 15px) !default;
+$range-inactive-color: var(--nutui-range-inactive-color, #fa958c) !default;
+$range-active-color: var(--nutui-range-active-color, $primary-color) !default;
+$range-button-background: var(
+  --nutui-range-button-background,
   $primary-text-color
 ) !default;
-$range-bar-btn-width: var(--nutui-range-bar-btn-width, 24px) !default;
-$range-bar-btn-height: var(--nutui-range-bar-btn-height, 24px) !default;
-$range-bar-btn-border: var(
-  --nutui-range-bar-btn-border,
+$range-button-width: var(--nutui-range-button-width, 24px) !default;
+$range-button-height: var(--nutui-range-button-height, 24px) !default;
+$range-button-border: var(
+  --nutui-range-button-border,
   1px solid $primary-color
 ) !default;
 

package/dist/types/index.d.ts

@@ -601,6 +601,7 @@ interface CascaderOption {
     loading?: boolean;
     root?: boolean;
 }
+type CascaderValue = Exclude<CascaderOption['value'], undefined>[];
 interface optionKey {
     textKey: string;
     valueKey: string;
@@ -613,7 +614,8 @@ interface CascaderProps extends BasicComponent {
     activeColor: string;
     activeIcon: string;
     options: CascaderOption[];
-    value: string[];
+    value?: CascaderValue;
+    defaultValue?: CascaderValue;
     title: string;
     optionKey: optionKey;
     format: Record<string, string | number | null>;
@@ -623,8 +625,8 @@ interface CascaderProps extends BasicComponent {
     lazy: boolean;
     onLoad: (node: any, resolve: any) => void;
     onClose?: () => void;
-    onChange: (value: any, params: any) => void;
-    onPathChange: (value: any, params: any) => void;
+    onChange: (value: CascaderValue, params?: any) => void;
+    onPathChange: (value: CascaderValue, params: any) => void;
 }
 declare const Cascader: React__default.ForwardRefExoticComponent<Partial<CascaderProps> & {
     children?: React__default.ReactNode;
@@ -935,34 +937,26 @@ declare const Radio: FunctionComponent<Partial<RadioProps> & React__default.HTML
     RadioGroup: typeof RadioGroup;
 };
 
-type SliderValue = number | number[];
-interface RangeProps {
-    className: string;
-    style: CSSProperties;
+type RangeValue = number | number[];
+interface RangeProps extends BasicComponent {
+    value: RangeValue;
+    defaultValue: RangeValue;
     range: boolean;
     disabled: boolean;
-    activeColor: string;
-    inactiveColor: string;
-    buttonColor: string;
-    hiddenRange: boolean;
-    hiddenTag: boolean;
-    min: number | string;
-    max: number | string;
-    minDesc: number | string;
-    maxDesc: number | string;
-    curValueDesc: number | string;
-    step: number | string;
-    modelValue: SliderValue;
-    button: React__default.ReactNode;
+    min: number;
+    max: number;
+    step: number;
+    minDescription: ReactNode;
+    maxDescription: ReactNode;
+    button: ReactNode;
     vertical: boolean;
     marks: Record<string, unknown>;
-    dragStart?: () => void;
-    dragEnd?: () => void;
-    onChange?: (value: number) => void;
-    onDragStart?: () => void;
-    onDragEnd?: () => void;
+    currentDescription: ((value: RangeValue) => ReactNode) | null;
+    onChange: (value: RangeValue) => void;
+    onStart: () => void;
+    onEnd: (value: RangeValue) => void;
 }
-declare const Range: FunctionComponent<Partial<RangeProps> & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onChange'>>;
+declare const Range: FunctionComponent<Partial<RangeProps> & Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onChange' | 'defaultValue'>>;
 
 interface RateProps extends BasicComponent {
     count: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react-taro",
-  "version": "2.0.0-alpha.7",
+  "version": "2.0.0-alpha.8",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/esm/nutui-react.es.js",

package/dist/esm/range.taro-52cda918.js

@@ -1,325 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from "react";
-import { u as useTouch } from "./use-touch-ff43512c.js";
-import { g as getRectByTaro } from "./use-client-rect-f317804e.js";
-import { T as Toast } from "./toast.taro-92c10e1d.js";
-import { u as useConfig } from "./configprovider.taro-25758d9f.js";
-const defaultProps = {
-  range: false,
-  hiddenRange: false,
-  hiddenTag: false,
-  min: 0,
-  max: 100,
-  step: 1,
-  modelValue: 0,
-  vertical: false,
-  marks: {}
-};
-let startValue;
-let currentValue;
-const Range = (props) => {
-  const { locale } = useConfig();
-  const { className, range, disabled, activeColor, inactiveColor, buttonColor, hiddenRange, hiddenTag, modelValue, button, vertical, marks, dragStart, dragEnd, onChange, onDragStart, onDragEnd, minDesc, maxDesc, curValueDesc } = { ...defaultProps, ...props };
-  let { min, max, step } = { ...defaultProps, ...props };
-  min = Number(min);
-  max = Number(max);
-  step = Number(step);
-  const [buttonIndex, SetButtonIndex] = useState(0);
-  const [initValue, SetInitValue] = useState();
-  const [dragStatus, SetDragStatus] = useState("start");
-  const touch = useTouch();
-  const root = useRef(null);
-  const [marksList, SetMarksList] = useState([]);
-  const [show, SetShow] = useState(false);
-  const [toastMsg, SetToastMsg] = useState("");
-  const toastShow = (msg) => {
-    SetToastMsg(msg);
-    SetShow(true);
-  };
-  useEffect(() => {
-    if (typeof modelValue === "number") {
-      if (!range && (modelValue < min || modelValue > max)) {
-        SetInitValue(0);
-        toastShow(`${modelValue} ${locale.range.rangeText}`);
-        return;
-      }
-      SetInitValue(modelValue);
-    }
-  }, [modelValue]);
-  useEffect(() => {
-    if (marks) {
-      const marksKeys = Object.keys(marks);
-      const list = marksKeys.map(parseFloat).sort((a, b) => a - b).filter((point) => point >= min && point <= max);
-      SetMarksList(list);
-    }
-  }, [marks]);
-  const scope = () => {
-    return Number(max) - Number(min);
-  };
-  const classes = useCallback(() => {
-    const prefixCls = "nut-range";
-    return [
-      prefixCls,
-      `${disabled ? `${prefixCls}-disabled` : ""}`,
-      `${vertical ? `${prefixCls}-vertical` : ""}`,
-      `${!hiddenRange ? `${prefixCls}-show-number` : ""}`
-    ].filter(Boolean).join(" ");
-  }, [disabled, vertical, hiddenRange]);
-  const containerClasses = useCallback(() => {
-    const prefixCls = "nut-range-container";
-    return [prefixCls, `${vertical ? `${prefixCls}-vertical` : ""}`, className].filter(Boolean).join(" ");
-  }, [vertical, className]);
-  const markClassName = useCallback((mark) => {
-    const classPrefix = "nut-range-mark";
-    let lowerBound = Number(min);
-    let upperBound = Number(max);
-    if (range) {
-      const [left, right] = modelValue;
-      lowerBound = left;
-      upperBound = right;
-    } else {
-      upperBound = modelValue;
-    }
-    const isActive = mark <= upperBound && mark >= lowerBound;
-    return [
-      `${classPrefix}-text`,
-      `${isActive ? `${classPrefix}-text-active` : ""}`
-    ].filter(Boolean).join(" ");
-  }, [range, modelValue, min, max]);
-  const [rangeName, setRangeName] = useState(classes());
-  const [containerName, setContainerName] = useState(containerClasses());
-  useEffect(() => {
-    setRangeName(classes());
-    setContainerName(containerClasses());
-  }, [classes, containerClasses]);
-  const wrapperStyle = () => {
-    return {
-      background: inactiveColor
-    };
-  };
-  const buttonStyle = () => {
-    return {
-      borderColor: buttonColor
-    };
-  };
-  const isRange = (val) => {
-    return !!range && Array.isArray(val);
-  };
-  const calcMainAxis = () => {
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(modelVal)) {
-      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
-    }
-    return `${(modelVal - Number(min)) * 100 / scope()}%`;
-  };
-  const calcOffset = () => {
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(modelVal)) {
-      return `${(modelVal[0] - Number(min)) * 100 / scope()}%`;
-    }
-    return `0%`;
-  };
-  const barStyle = () => {
-    if (vertical) {
-      return {
-        height: calcMainAxis(),
-        top: calcOffset(),
-        background: activeColor,
-        transition: dragStatus ? "none" : void 0
-      };
-    }
-    return {
-      width: calcMainAxis(),
-      left: calcOffset(),
-      background: activeColor,
-      transition: dragStatus ? "none" : void 0
-    };
-  };
-  const marksStyle = (mark) => {
-    let style = {
-      left: `${(mark - Number(min)) / scope() * 100}%`
-    };
-    if (vertical) {
-      style = {
-        top: `${(mark - Number(min)) / scope() * 100}%`
-      };
-    }
-    return style;
-  };
-  const tickStyle = (mark) => {
-    let lowerBound = Number(min);
-    let upperBound = Number(max);
-    if (range) {
-      const [left, right] = modelValue;
-      lowerBound = left;
-      upperBound = right;
-    }
-    const isActive = mark <= upperBound && mark >= lowerBound;
-    const style = {
-      background: !isActive ? inactiveColor : activeColor
-    };
-    return style;
-  };
-  const format = (value) => {
-    value = Math.max(+min, Math.min(value, +max));
-    return Math.round(value / +step) * +step;
-  };
-  const isSameValue = (newValue, oldValue) => {
-    return JSON.stringify(newValue) === JSON.stringify(oldValue);
-  };
-  const handleOverlap = (value) => {
-    if (value[0] > value[1]) {
-      return value.slice(0).reverse();
-    }
-    return value;
-  };
-  const updateValue = (value, end) => {
-    if (isRange(value)) {
-      value = handleOverlap(value).map(format);
-    } else {
-      value = format(value);
-    }
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    if (!isSameValue(value, modelVal)) {
-      SetInitValue(value);
-    }
-    if ((marks || end) && !isSameValue(value, startValue)) {
-      onChange && onChange(value);
-    }
-  };
-  const click = async (event) => {
-    if (disabled || !root.current) {
-      return;
-    }
-    SetDragStatus("");
-    const rect = await getRectByTaro(root.current);
-    let delta = (event.detail.x ? event.detail.x : event.clientX) - rect.left;
-    let total = rect.width;
-    if (vertical) {
-      delta = (event.detail.y ? event.detail.y : event.clientY) - rect.top;
-      total = rect.height;
-    }
-    const value = Number(min) + delta / total * scope();
-    currentValue = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(currentValue)) {
-      const [left, right] = currentValue;
-      const middle = (left + right) / 2;
-      if (value <= middle) {
-        updateValue([value, right], true);
-      } else {
-        updateValue([left, value], true);
-      }
-    } else {
-      updateValue(value, true);
-    }
-  };
-  const onTouchStart = (event) => {
-    if (disabled) {
-      return;
-    }
-    touch.start(event);
-    currentValue = initValue || initValue === 0 ? initValue : modelValue;
-    if (isRange(currentValue)) {
-      startValue = currentValue.map(format);
-    } else {
-      startValue = format(currentValue);
-    }
-    SetDragStatus("start");
-  };
-  const onTouchMove = async (event) => {
-    if (disabled || !root.current) {
-      return;
-    }
-    if (dragStatus === "start") {
-      dragStart && dragStart();
-      onDragStart && onDragStart();
-    }
-    touch.move(event);
-    SetDragStatus("draging");
-    const rect = await getRectByTaro(root.current);
-    let delta = touch.deltaX;
-    let total = rect.width;
-    let diff = delta / total * scope();
-    if (vertical) {
-      delta = touch.deltaY;
-      total = rect.height;
-      diff = delta / total * scope();
-    }
-    if (isRange(startValue)) {
-      currentValue[buttonIndex] = startValue[buttonIndex] + diff;
-    } else {
-      currentValue = startValue + diff;
-    }
-    updateValue(currentValue);
-  };
-  const onTouchEnd = (event) => {
-    if (disabled) {
-      return;
-    }
-    if (dragStatus === "draging") {
-      updateValue(currentValue, true);
-      dragEnd && dragEnd();
-      onDragEnd && onDragEnd();
-    }
-    SetDragStatus("");
-  };
-  const curValue = (idx) => {
-    const modelVal = initValue || initValue === 0 ? initValue : modelValue;
-    const value = typeof idx === "number" ? modelVal[idx] : modelVal;
-    return value;
-  };
-  return React.createElement(
-    "div",
-    { className: `${containerName}` },
-    !hiddenRange ? React.createElement("div", { className: "min" }, minDesc || +min) : null,
-    React.createElement(
-      "div",
-      { ref: root, style: wrapperStyle(), className: `${rangeName}`, onClick: (e) => {
-        click(e);
-      } },
-      marksList.length > 0 ? React.createElement("div", { className: "nut-range-mark" }, marksList.map((marks2) => {
-        return React.createElement(
-          "span",
-          { key: marks2, className: markClassName(marks2), style: marksStyle(marks2) },
-          marks2,
-          React.createElement("span", { className: "nut-range-tick", style: tickStyle(marks2) })
-        );
-      })) : null,
-      React.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? [0, 1].map((item, index) => {
-        return React.createElement("div", { role: "slider", key: index, className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
-                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`, tabIndex: disabled ? -1 : 0, "aria-valuemin": +min, "aria-valuenow": curValue(index), "aria-valuemax": +max, "aria-orientation": vertical ? "vertical" : "horizontal", onTouchStart: (e) => {
-          if (typeof index === "number") {
-            SetButtonIndex(index);
-          }
-          onTouchStart(e);
-        }, onTouchMove: (e) => {
-          onTouchMove(e);
-        }, onTouchEnd: (e) => {
-          onTouchEnd();
-        }, onTouchCancel: (e) => {
-          onTouchEnd();
-        }, onClick: (e) => {
-          e.stopPropagation();
-        } }, button || React.createElement("div", { className: "nut-range-button", style: buttonStyle() }, !hiddenTag ? React.createElement("div", { className: "number" }, curValueDesc || curValue(index)) : null));
-      }) : React.createElement("div", { role: "slider", className: "nut-range-button-wrapper", tabIndex: disabled ? -1 : 0, "aria-valuemin": +min, "aria-valuenow": curValue(), "aria-valuemax": +max, "aria-orientation": vertical ? "vertical" : "horizontal", onTouchStart: (e) => {
-        onTouchStart(e);
-      }, onTouchMove: (e) => {
-        onTouchMove(e);
-      }, onTouchEnd: (e) => {
-        onTouchEnd();
-      }, onTouchCancel: (e) => {
-        onTouchEnd();
-      }, onClick: (e) => {
-        e.stopPropagation();
-      } }, button || React.createElement("div", { className: "nut-range-button", style: buttonStyle() }, !hiddenTag ? React.createElement("div", { className: "number" }, curValueDesc || curValue()) : null)))
-    ),
-    !hiddenRange ? React.createElement("div", { className: "max" }, maxDesc || +max) : null,
-    React.createElement(Toast, { type: "text", visible: show, msg: toastMsg, onClose: () => {
-      SetShow(false);
-    } })
-  );
-};
-Range.defaultProps = defaultProps;
-Range.displayName = "NutRange";
-export {
-  Range as R
-};