@nutui/nutui-react-taro 2.3.12 → 2.4.1-beta.0

package/dist/esm/popover.taro-BsOaXoWp.js

@@ -0,0 +1,224 @@
+import { _ as __rest, a as __awaiter } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useRef, useState, useEffect } from "react";
+import classNames from "classnames";
+import Taro, { createSelectorQuery } from "@tarojs/taro";
+import { P as Popup } from "./popup.taro-Iy_WQZ-m.js";
+import { a as getRect, g as getRectByTaro } from "./get-rect-by-taro-CSN0TGnD.js";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { list: [], theme: "light", location: "bottom", visible: false, offset: [0, 12], arrowOffset: 0, targetId: "", className: "", showArrow: true, closeOnOutsideClick: true, closeOnActionClick: true, overlay: false, onClick: () => {
+}, onOpen: () => {
+}, onClose: () => {
+} });
+const classPrefix = `nut-popover`;
+const Popover = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, list, theme, location, visible, offset, arrowOffset, targetId, overlay, closeOnOutsideClick, closeOnActionClick, className, showArrow, style, onClick, onOpen, onClose, onSelect } = _a, rest = __rest(_a, ["children", "list", "theme", "location", "visible", "offset", "arrowOffset", "targetId", "overlay", "closeOnOutsideClick", "closeOnActionClick", "className", "showArrow", "style", "onClick", "onOpen", "onClose", "onSelect"]);
+  const popoverRef = useRef(null);
+  const popoverContentRef = useRef(null);
+  const [showPopup, setShowPopup] = useState(false);
+  const [elWidth, setElWidth] = useState(0);
+  const [elHeight, setElHeight] = useState(0);
+  const [rootPosition, setRootPosition] = useState();
+  useEffect(() => {
+    setShowPopup(visible);
+    if (visible) {
+      setTimeout(() => {
+        getContentWidth();
+      }, 0);
+    }
+  }, [visible]);
+  const getContentWidth = () => __awaiter(void 0, void 0, void 0, function* () {
+    let rect;
+    createSelectorQuery().selectViewport().scrollOffset((res) => __awaiter(void 0, void 0, void 0, function* () {
+      const distance = res.scrollTop;
+      if (targetId) {
+        if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
+          rect = getRect(document.querySelector(`#${targetId}`));
+        } else {
+          rect = yield getRectTaro(targetId);
+        }
+      } else {
+        rect = yield getRectByTaro(popoverRef.current);
+      }
+      setRootPosition({
+        width: rect.width,
+        height: rect.height,
+        left: rect.left,
+        top: rect.top + distance,
+        right: rect.right
+      });
+    })).exec();
+    setTimeout(() => {
+      getPopoverContentW();
+    }, 300);
+  });
+  const getRectTaro = (targetId2) => __awaiter(void 0, void 0, void 0, function* () {
+    return new Promise((resolve) => {
+      const query = createSelectorQuery();
+      query.select(`#${targetId2}`) && query.select(`#${targetId2}`).boundingClientRect();
+      query.exec((res) => {
+        resolve(res[0]);
+      });
+    });
+  });
+  const getPopoverContentW = () => __awaiter(void 0, void 0, void 0, function* () {
+    const rectContent = yield getRectByTaro(popoverContentRef.current);
+    setElWidth(rectContent.width);
+    setElHeight(rectContent.height);
+  });
+  const clickAway = () => {
+    if (closeOnOutsideClick) {
+      props.onClick && props.onClick();
+      onClose && onClose();
+    }
+  };
+  const classes = classNames({
+    [`${classPrefix}`]: true,
+    [`${classPrefix}-${theme}`]: theme === "dark"
+  }, className);
+  const popoverArrow = () => {
+    const prefixCls = "nut-popover-arrow";
+    const loca = location;
+    const direction = loca.split("-")[0];
+    return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}-${loca}`;
+  };
+  const getRootPosition = () => {
+    const styles = {};
+    if (!rootPosition) {
+      styles.visibility = "hidden";
+      return styles;
+    }
+    const contentWidth = elWidth;
+    const contentHeight = elHeight;
+    const { width, height, left, top, right } = rootPosition;
+    const direction = location.split("-")[0];
+    const skew = location.split("-")[1];
+    let cross = 0;
+    let parallel = 0;
+    if (Array.isArray(offset) && offset.length === 2) {
+      cross += +offset[1];
+      parallel += +offset[0];
+    }
+    if (width) {
+      if (["bottom", "top"].includes(direction)) {
+        const h = direction === "bottom" ? height + cross : -(contentHeight + cross);
+        styles.top = `${top + h}px`;
+        if (!skew) {
+          styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
+        }
+        if (skew === "start") {
+          styles.left = `${left + parallel}px`;
+        }
+        if (skew === "end") {
+          styles.left = `${right + parallel}px`;
+        }
+      }
+      if (["left", "right"].includes(direction)) {
+        const contentW = direction === "left" ? -(contentWidth + cross) : width + cross;
+        styles.left = `${left + contentW}px`;
+        if (!skew) {
+          styles.top = `${top - contentHeight / 2 + height / 2 - 4 + parallel}px`;
+        }
+        if (skew === "start") {
+          styles.top = `${top + parallel}px`;
+        }
+        if (skew === "end") {
+          styles.top = `${top + height + parallel}px`;
+        }
+      }
+    }
+    if (elWidth === 0) {
+      styles.visibility = "hidden";
+    } else {
+      styles.visibility = "initial";
+    }
+    return styles;
+  };
+  const popoverArrowStyle = () => {
+    const styles = {};
+    const direction = location.split("-")[0];
+    const skew = location.split("-")[1];
+    const base = 16;
+    if (props.arrowOffset !== 0) {
+      if (["bottom", "top"].includes(direction)) {
+        if (!skew) {
+          styles.left = `calc(50% + ${arrowOffset}px)`;
+        }
+        if (skew === "start") {
+          styles.left = `${base + arrowOffset}px`;
+        }
+        if (skew === "end") {
+          styles.right = `${base - arrowOffset}px`;
+        }
+      }
+      if (["left", "right"].includes(direction)) {
+        if (!skew) {
+          styles.top = `calc(50% - ${arrowOffset}px)`;
+        }
+        if (skew === "start") {
+          styles.top = `${base - arrowOffset}px`;
+        }
+        if (skew === "end") {
+          styles.bottom = `${base + arrowOffset}px`;
+        }
+      }
+    }
+    return styles;
+  };
+  const handleSelect = (item, index) => {
+    if (!item.disabled) {
+      onSelect && onSelect(item, index);
+    }
+    if (closeOnActionClick) {
+      props.onClick && props.onClick();
+      onClose && onClose();
+    }
+  };
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    !targetId && React__default.createElement("div", { className: "nut-popover-wrapper", ref: popoverRef, onClick: () => {
+      var _a2;
+      (_a2 = props === null || props === void 0 ? void 0 : props.onClick) === null || _a2 === void 0 ? void 0 : _a2.call(props);
+      if (!visible) {
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+      } else {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+      }
+    }, style }, Array.isArray(children) ? children[0] : children),
+    React__default.createElement(
+      "div",
+      { className: classes, style: getRootPosition() },
+      React__default.createElement(
+        Popup,
+        Object.assign({ className: `nut-popover-content nut-popover-content-${location}`, position: "default", overlay, visible: showPopup }, rest),
+        React__default.createElement(
+          "div",
+          { className: "nut-popover-content-group", ref: popoverContentRef },
+          showArrow && React__default.createElement("div", { className: popoverArrow(), style: popoverArrowStyle() }),
+          Array.isArray(children) ? children[1] : "",
+          list.map((item, index) => {
+            return React__default.createElement(
+              "div",
+              { className: classNames({
+                "nut-popover-menu-item": true,
+                "nut-popover-menu-disabled": item.disabled
+              }, item.className), key: item.key || index, onClick: () => handleSelect(item, index) },
+              item.icon ? React__default.createElement("div", { className: "nut-popover-menu-item-icon" }, item.icon) : null,
+              React__default.createElement("div", { className: "nut-popover-menu-item-name" }, item.name),
+              item.action && item.action.icon ? React__default.createElement("div", { className: "nut-popover-menu-item-action-icon", onClick: (e) => {
+                var _a2, _b;
+                return (_b = (_a2 = item.action) === null || _a2 === void 0 ? void 0 : _a2.onClick) === null || _b === void 0 ? void 0 : _b.call(_a2, e);
+              } }, item.action.icon) : null
+            );
+          })
+        )
+      ),
+      showPopup && closeOnOutsideClick && React__default.createElement("div", { className: "nut-popover-content-bg", onClick: clickAway, onTouchMove: clickAway })
+    )
+  );
+};
+Popover.defaultProps = defaultProps;
+Popover.displayName = "NutPopover";
+export {
+  Popover as P
+};

package/dist/esm/pulltorefresh.taro-DfVmOGuo.js

@@ -0,0 +1,147 @@
+import { a as __awaiter } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useRef, useState } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { Loading, More } from "@nutui/icons-react-taro";
+import Taro from "@tarojs/taro";
+import { u as useConfig } from "./configprovider.taro-CyU_tvNJ.js";
+import { u as useTouch } from "./use-touch-OfEaR5qi.js";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+function bound(position, min, max) {
+  let ret = position;
+  if (min !== void 0) {
+    ret = Math.max(position, min);
+  }
+  if (max !== void 0) {
+    ret = Math.min(ret, max);
+  }
+  return ret;
+}
+function rubberband(distance, dimension, constant) {
+  return distance * dimension * constant / (dimension + constant * distance);
+}
+function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15) {
+  if (constant === 0)
+    return bound(position, min, max);
+  if (position < min)
+    return -rubberband(min - position, dimension, constant) + min;
+  if (position > max)
+    return +rubberband(position - max, dimension, constant) + max;
+  return position;
+}
+const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { type: "default", pullingText: "", canReleaseText: "", refreshingText: "", completeText: "", completeDelay: 500, disabled: false, headHeight: 50, threshold: 60, scrollTop: 0, onRefresh: () => {
+} });
+const PullToRefresh = (p) => {
+  const classPrefix = "nut-pulltorefresh";
+  const { locale } = useConfig();
+  const touch = useTouch();
+  const props = Object.assign(Object.assign(Object.assign({}, defaultProps), p), {
+    pullingText: p.pullingText || locale.pullToRefresh.pullingText,
+    canReleaseText: p.canReleaseText || locale.pullToRefresh.canReleaseText,
+    refreshingText: p.refreshingText || locale.pullToRefresh.refreshingText,
+    completeText: p.completeText || locale.pullToRefresh.completeText
+  });
+  const classes = classNames(classPrefix, props.className, `${classPrefix}-${props.type}`);
+  const headHeight = props.headHeight;
+  const threshold = props.threshold;
+  const pullingRef = useRef(false);
+  const [status, setStatus] = useState("pulling");
+  const [height, setHeight] = useState(0);
+  const renderIcons = (status2) => {
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      (status2 === "pulling" || status2 === "complete") && React__default.createElement(Loading, null),
+      (status2 === "canRelease" || status2 === "refreshing") && React__default.createElement(More, null)
+    );
+  };
+  const renderStatusIcon = () => {
+    var _a;
+    if (props.renderIcon) {
+      return (_a = props.renderIcon) === null || _a === void 0 ? void 0 : _a.call(props, status);
+    }
+    return renderIcons(status);
+  };
+  const renderStatusText = () => {
+    var _a;
+    if (props.renderText) {
+      return (_a = props.renderText) === null || _a === void 0 ? void 0 : _a.call(props, status);
+    }
+    if (status === "pulling")
+      return props.pullingText;
+    if (status === "canRelease")
+      return props.canReleaseText;
+    if (status === "refreshing")
+      return props.refreshingText;
+    if (status === "complete")
+      return props.completeText;
+    return "";
+  };
+  const handleTouchStart = (e) => {
+    touch.start(e);
+  };
+  const handleTouchMove = (e) => {
+    if (props.scrollTop > 0) {
+      return;
+    }
+    if (status === "refreshing" || status === "complete")
+      return;
+    touch.move(e);
+    if (touch.isVertical()) {
+      pullingRef.current = true;
+      setHeight(Math.max(rubberbandIfOutOfBounds(touch.deltaY.current, 0, 0, headHeight * 5, 0.5), 0));
+      setStatus(height > threshold ? "canRelease" : "pulling");
+    }
+  };
+  function doRefresh() {
+    return __awaiter(this, void 0, void 0, function* () {
+      setHeight(headHeight);
+      setStatus("refreshing");
+      try {
+        yield props.onRefresh();
+        setStatus("complete");
+      } catch (e) {
+        setHeight(0);
+        setStatus("pulling");
+        throw e;
+      }
+      if (props.completeDelay > 0) {
+        yield sleep(props.completeDelay);
+      }
+      setHeight(0);
+      setStatus("pulling");
+    });
+  }
+  const handleTouchEnd = () => {
+    pullingRef.current = false;
+    if (status === "canRelease") {
+      doRefresh();
+    } else {
+      setHeight(0);
+      setStatus("pulling");
+    }
+  };
+  const isAndroidWeApp = Taro.getSystemInfoSync().platform === "android" && Taro.getEnv() === "WEAPP";
+  const springStyles = Object.assign({ height: `${height}px` }, !pullingRef.current || isAndroidWeApp ? { transition: "height .3s ease" } : {});
+  return React__default.createElement(
+    View,
+    { className: classes, style: props.style, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd },
+    React__default.createElement(
+      View,
+      { style: springStyles, className: `${classPrefix}-head` },
+      React__default.createElement(
+        "div",
+        { className: `${classPrefix}-head-content`, style: { height: headHeight } },
+        React__default.createElement("div", null, renderStatusIcon()),
+        React__default.createElement("div", null, renderStatusText())
+      )
+    ),
+    React__default.createElement("div", { className: `${classPrefix}-content` }, props.children)
+  );
+};
+PullToRefresh.defaultProps = defaultProps;
+PullToRefresh.displayName = "NutPullToRefresh";
+export {
+  PullToRefresh as P
+};

package/dist/esm/range.taro-GsWDprz5.js

@@ -0,0 +1,268 @@
+import { a as __awaiter } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useState, useRef, useEffect, useCallback } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { u as useTouch } from "./use-touch-OfEaR5qi.js";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { u as usePropsValue } from "./use-props-value-SH9krhkx.js";
+import { g as getRectByTaro } from "./get-rect-by-taro-CSN0TGnD.js";
+import { a as useRtl } from "./configprovider.taro-CyU_tvNJ.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { range: false, min: 0, max: 100, step: 1, vertical: false, marks: {} });
+const Range = (props) => {
+  const rtl = useRtl();
+  const { className, range, disabled, button, vertical, marks, onChange, onStart, onEnd, minDescription, maxDescription, currentDescription, min, max, step, value, defaultValue } = Object.assign(Object.assign({}, defaultProps), props);
+  const classPrefix = "nut-range";
+  const [buttonIndex, setButtonIndex] = useState(0);
+  const [dragStatus, setDragStatus] = useState("start");
+  const touch = useTouch();
+  const root = useRef(null);
+  const [marksList, setMarksList] = useState([]);
+  const [startValue, setStartValue] = useState(0);
+  const handleChange = (value2) => {
+    onChange && onChange(value2);
+  };
+  const [current, setCurrent] = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: handleChange
+  });
+  const [exactValue, setEaxctValue] = useState(() => value || defaultValue || 0);
+  const marksRef = useRef({});
+  useEffect(() => {
+    if (marks) {
+      if (Array.isArray(marks)) {
+        const list = marks.sort((a, b) => a.value - b.value).filter((point) => point.value >= min && point.value <= max);
+        setMarksList(list.map((mark) => mark.value));
+        list.forEach((mark) => {
+          marksRef.current[mark.value] = mark.label !== void 0 ? mark.label : mark.value;
+        });
+      } else {
+        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 max - min;
+  };
+  const classes = classNames(classPrefix, {
+    [`${classPrefix}-disabled`]: disabled,
+    [`${classPrefix}-vertical`]: vertical
+  });
+  const containerClasses = classNames(`${classPrefix}-container`, {
+    [`${classPrefix}-container-vertical`]: vertical
+  }, className);
+  const markClassName = useCallback((mark) => {
+    const classPrefix2 = "nut-range-mark";
+    let lowerBound = min;
+    let upperBound = max;
+    if (range && Array.isArray(current)) {
+      lowerBound = current[0];
+      upperBound = current[1];
+    } else {
+      upperBound = current;
+    }
+    const isActive = mark <= upperBound && mark >= lowerBound;
+    return [
+      `${classPrefix2}-text`,
+      `${isActive ? `${classPrefix2}-text-active` : ""}`
+    ].join(" ");
+  }, [range, current, min, max]);
+  const isRange = (val) => {
+    return !!range && Array.isArray(val);
+  };
+  const calcMainAxis = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[1] - modelVal[0]) * 100 / scope()}%`;
+    }
+    return `${(modelVal - min) * 100 / scope()}%`;
+  };
+  const calcOffset = () => {
+    const modelVal = current;
+    if (isRange(modelVal)) {
+      return `${(modelVal[0] - min) * 100 / scope()}%`;
+    }
+    return `0%`;
+  };
+  const barStyle = () => {
+    if (vertical) {
+      return {
+        height: calcMainAxis(),
+        top: calcOffset(),
+        transition: dragStatus ? "none" : void 0
+      };
+    }
+    const dir = rtl ? "right" : "left";
+    return {
+      width: calcMainAxis(),
+      [dir]: calcOffset(),
+      transition: dragStatus ? "none" : void 0
+    };
+  };
+  const marksStyle = (mark) => {
+    const dir = rtl ? "right" : "left";
+    let style = {
+      [dir]: `${(mark - min) / scope() * 100}%`
+    };
+    if (vertical) {
+      style = {
+        top: `${(mark - min) / scope() * 100}%`
+      };
+    }
+    return style;
+  };
+  const tickClass = (mark) => {
+    if (range && Array.isArray(current)) {
+      return mark <= current[1] && mark >= current[0];
+    }
+    return mark <= current;
+  };
+  const format = (value2) => {
+    value2 = Math.max(+min, Math.min(value2, +max));
+    return Math.round(value2 / +step) * +step;
+  };
+  const isSameValue = (newValue, oldValue) => {
+    return JSON.stringify(newValue) === JSON.stringify(oldValue);
+  };
+  const handleOverlap = (value2) => {
+    if (value2[0] > value2[1]) {
+      return value2.slice(0).reverse();
+    }
+    return value2;
+  };
+  const updateValue = (value2, end) => {
+    if (isRange(value2)) {
+      value2 = handleOverlap(value2).map(format);
+    } else {
+      value2 = format(value2);
+    }
+    if (!isSameValue(value2, current)) {
+      setCurrent(value2);
+    }
+    end && onEnd && onEnd(value2);
+  };
+  const click = (event) => __awaiter(void 0, void 0, void 0, function* () {
+    if (disabled || !root.current) {
+      return;
+    }
+    setDragStatus("");
+    const rect = yield 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 value2 = min + delta / total * scope();
+    setEaxctValue(current);
+    if (isRange(current)) {
+      const [left, right] = current;
+      const middle = (left + right) / 2;
+      if (value2 <= middle) {
+        updateValue([value2, right], true);
+      } else {
+        updateValue([left, value2], true);
+      }
+    } else {
+      updateValue(value2, true);
+    }
+  });
+  const onTouchStart = (event) => {
+    if (disabled) {
+      return;
+    }
+    touch.start(event);
+    setEaxctValue(current);
+    if (isRange(current)) {
+      setStartValue(current.map(format));
+    } else {
+      setStartValue(format(current));
+    }
+    setDragStatus("start");
+  };
+  const onTouchMove = (event) => __awaiter(void 0, void 0, void 0, function* () {
+    if (disabled || !root.current) {
+      return;
+    }
+    if (dragStatus === "start") {
+      onStart && onStart();
+    }
+    touch.move(event);
+    setDragStatus("draging");
+    const rect = yield getRectByTaro(root.current);
+    if (!rect)
+      return;
+    let delta = touch.deltaX.current;
+    let total = rect.width;
+    let diff = delta / total * scope();
+    diff = rtl ? -diff : diff;
+    if (vertical) {
+      delta = touch.deltaY.current;
+      total = rect.height;
+      diff = delta / total * scope();
+    }
+    let newValue;
+    if (isRange(startValue)) {
+      newValue = exactValue.slice();
+      newValue[buttonIndex] = startValue[buttonIndex] + diff;
+    } else {
+      newValue = startValue + diff;
+    }
+    setEaxctValue(newValue);
+    updateValue(newValue);
+  });
+  const onTouchEnd = () => {
+    if (disabled) {
+      return;
+    }
+    if (dragStatus === "draging") {
+      updateValue(current, true);
+    }
+    setDragStatus("");
+  };
+  const curValue = (idx) => {
+    const modelVal = current;
+    const value2 = typeof idx === "number" ? modelVal[idx] : modelVal;
+    return value2;
+  };
+  const renderButton = (index) => {
+    return React__default.createElement(React__default.Fragment, null, button || React__default.createElement("div", { className: "nut-range-button" }, currentDescription !== null && React__default.createElement("div", { className: "number" }, currentDescription ? currentDescription(curValue(index)) : curValue(index))));
+  };
+  return React__default.createElement(
+    "div",
+    { className: containerClasses },
+    minDescription !== null && React__default.createElement("div", { className: "min" }, minDescription || min),
+    React__default.createElement(
+      "div",
+      { ref: root, className: classes, onClick: (e) => click(e) },
+      marksList.length > 0 && React__default.createElement("div", { className: "nut-range-mark" }, marksList.map((mark) => {
+        return React__default.createElement(
+          "span",
+          { key: mark, className: markClassName(mark), style: marksStyle(mark) },
+          Array.isArray(marks) ? marksRef.current[mark] : marks[mark],
+          React__default.createElement("span", { className: classNames("nut-range-tick", {
+            active: tickClass(mark)
+          }) })
+        );
+      })),
+      React__default.createElement("div", { className: "nut-range-bar", style: barStyle() }, range ? [0, 1].map((item, index) => {
+        return React__default.createElement("div", { key: index, className: `${index === 0 ? "nut-range-button-wrapper-left" : ""}
+                  ${index === 1 ? "nut-range-button-wrapper-right" : ""}`, onTouchStart: (e) => {
+          if (typeof index === "number") {
+            setButtonIndex(index);
+          }
+          onTouchStart(e);
+        }, onTouchMove: (e) => onTouchMove(e), onTouchEnd, onTouchCancel: onTouchEnd, onClick: (e) => e.stopPropagation() }, renderButton(index));
+      }) : React__default.createElement(View, { catchMove: true, className: "nut-range-button-wrapper", onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd, onTouchCancel: onTouchEnd, onClick: (e) => e.stopPropagation() }, renderButton()))
+    ),
+    maxDescription !== null && React__default.createElement("div", { className: "max" }, maxDescription || max)
+  );
+};
+Range.defaultProps = defaultProps;
+Range.displayName = "NutRange";
+export {
+  Range as R
+};