@nutui/nutui-react-taro 1.4.4-beta.0 → 1.4.5-beta.0

package/dist/esm/progress.taro-623bc807.js

@@ -1,127 +1,93 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "style", "isShowPercentage", "percentage", "fillColor", "strokeColor", "strokeWidth", "size", "textColor", "textWidth", "showText", "textInside", "textBackground", "textType", "status", "iconName", "iconColor", "iconSize", "rounded", "children", "iconClassPrefix", "iconFontClassName"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React__default from 'react';
 import classNames from 'classnames';
 import { I as Icon } from './icon-8dc4de10.js';
 import { c as cn } from './bem-893ad28d.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: '',
-  style: {},
-  isShowPercentage: true,
-  percentage: 0,
-  fillColor: '#f3f3f3',
-  strokeColor: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
-  strokeWidth: '',
-  textColor: '',
-  textWidth: '',
-  showText: true,
-  textInside: false,
-  textBackground: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
-  textType: 'text',
-  status: false,
-  iconName: 'checked',
-  iconColor: '#439422',
-  iconSize: '16px',
-  rounded: true,
-  children: undefined
-});
-var Progress = function Progress(props) {
-  var _classNames, _classNames2, _classNames4;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    className = _defaultProps$props.className,
-    style = _defaultProps$props.style,
-    isShowPercentage = _defaultProps$props.isShowPercentage,
-    percentage = _defaultProps$props.percentage,
-    fillColor = _defaultProps$props.fillColor,
-    strokeColor = _defaultProps$props.strokeColor,
-    strokeWidth = _defaultProps$props.strokeWidth,
-    size = _defaultProps$props.size,
-    textColor = _defaultProps$props.textColor,
-    textWidth = _defaultProps$props.textWidth,
-    showText = _defaultProps$props.showText,
-    textInside = _defaultProps$props.textInside,
-    textBackground = _defaultProps$props.textBackground,
-    textType = _defaultProps$props.textType,
-    status = _defaultProps$props.status,
-    iconName = _defaultProps$props.iconName,
-    iconColor = _defaultProps$props.iconColor,
-    iconSize = _defaultProps$props.iconSize,
-    rounded = _defaultProps$props.rounded,
-    children = _defaultProps$props.children,
-    iconClassPrefix = _defaultProps$props.iconClassPrefix,
-    iconFontClassName = _defaultProps$props.iconFontClassName,
-    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn('progress');
-  var classes = classNames(b(''));
-  var classesOuter = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(b(''), "-outer"), true), _defineProperty(_classNames, "".concat(b(''), "-").concat(size || 'base'), true), _classNames));
-  var classesInner = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(b(''), "-inner"), true), _defineProperty(_classNames2, "".concat(b(''), "-active"), status), _classNames2));
-  var classesText = classNames(_defineProperty({}, "".concat(b(''), "-text"), true));
-  var classesInsideText = classNames((_classNames4 = {}, _defineProperty(_classNames4, "".concat(b(''), "-text"), true), _defineProperty(_classNames4, "".concat(b(''), "-insidetext"), true), _classNames4));
-  var classesTextInner = classNames(_defineProperty({}, "".concat(b(''), "-text__inner"), true));
-  var stylesOuter = {
-    height: "".concat(strokeWidth, "px"),
-    // eslint-disable-next-line no-nested-ternary
-    borderRadius: "".concat(rounded ? rounded === true ? '12px' : rounded : 0),
-    background: "".concat(fillColor)
-  };
-  var stylesInner = {
-    width: "".concat(percentage, "%"),
-    // eslint-disable-next-line no-nested-ternary
-    borderRadius: "".concat(rounded ? rounded === true ? '12px' : rounded : 0),
-    background: "".concat(strokeColor)
-  };
-  var stylesInsideText = {
-    width: "".concat(textWidth, "px"),
-    left: "".concat(percentage, "%"),
-    background: textBackground || strokeColor
-  };
-  var stylesInsideIcon = {
-    width: "".concat(textWidth, "px"),
-    left: "".concat(percentage, "%")
-  };
-  var stylesText = {
-    width: "".concat(textWidth, "px")
-  };
-  return React__default.createElement("div", _objectSpread({
-    className: "".concat(classes, " ").concat(className),
-    style: style
-  }, rest), React__default.createElement("div", {
-    className: classesOuter,
-    style: stylesOuter
-  }, React__default.createElement("div", {
-    className: classesInner,
-    style: stylesInner
-  }, showText && textInside && React__default.createElement(React__default.Fragment, null, children ? React__default.createElement("div", {
-    className: classesInsideText,
-    style: stylesInsideIcon
-  }, children) : React__default.createElement("div", {
-    className: classesInsideText,
-    style: stylesInsideText
-  }, React__default.createElement("span", {
-    className: classesTextInner,
-    style: {
-      color: textColor || '#fff'
-    }
-  }, percentage, isShowPercentage ? '%' : ''))))), showText && !textInside && React__default.createElement("div", {
-    className: classesText,
-    style: stylesText
-  }, textType === 'text' && React__default.createElement("span", {
-    className: classesTextInner,
-    style: {
-      color: textColor || '#333'
-    }
-  }, percentage, isShowPercentage ? '%' : ''), textType === 'icon' && React__default.createElement(Icon, {
-    classPrefix: iconClassPrefix,
-    fontClassName: iconFontClassName,
-    size: iconSize,
-    name: iconName,
-    color: iconColor
-  })));
+
+const defaultProps = {
+    ...ComponentDefaults,
+    className: '',
+    style: {},
+    isShowPercentage: true,
+    percentage: 0,
+    fillColor: '#f3f3f3',
+    strokeColor: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
+    strokeWidth: '',
+    textColor: '',
+    textWidth: '',
+    showText: true,
+    textInside: false,
+    textBackground: 'linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)',
+    textType: 'text',
+    status: false,
+    iconName: 'checked',
+    iconColor: '#439422',
+    iconSize: '16px',
+    rounded: true,
+    children: undefined,
+};
+const Progress = (props) => {
+    const { className, style, isShowPercentage, percentage, fillColor, strokeColor, strokeWidth, size, textColor, textWidth, showText, textInside, textBackground, textType, status, iconName, iconColor, iconSize, rounded, children, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('progress');
+    const classes = classNames(b(''));
+    const classesOuter = classNames({
+        [`${b('')}-outer`]: true,
+        [`${b('')}-${size || 'base'}`]: true,
+    });
+    const classesInner = classNames({
+        [`${b('')}-inner`]: true,
+        [`${b('')}-active`]: status,
+    });
+    const classesText = classNames({
+        [`${b('')}-text`]: true,
+    });
+    const classesInsideText = classNames({
+        [`${b('')}-text`]: true,
+        [`${b('')}-insidetext`]: true,
+    });
+    const classesTextInner = classNames({
+        [`${b('')}-text__inner`]: true,
+    });
+    const stylesOuter = {
+        height: `${strokeWidth}px`,
+        // eslint-disable-next-line no-nested-ternary
+        borderRadius: `${rounded ? (rounded === true ? '12px' : rounded) : 0}`,
+        background: `${fillColor}`,
+    };
+    const stylesInner = {
+        width: `${percentage}%`,
+        // eslint-disable-next-line no-nested-ternary
+        borderRadius: `${rounded ? (rounded === true ? '12px' : rounded) : 0}`,
+        background: `${strokeColor}`,
+    };
+    const stylesInsideText = {
+        width: `${textWidth}px`,
+        left: `${percentage}%`,
+        background: textBackground || strokeColor,
+    };
+    const stylesInsideIcon = {
+        width: `${textWidth}px`,
+        left: `${percentage}%`,
+    };
+    const stylesText = {
+        width: `${textWidth}px`,
+    };
+    return (React__default.createElement("div", { className: `${classes} ${className}`, style: style, ...rest },
+        React__default.createElement("div", { className: classesOuter, style: stylesOuter },
+            React__default.createElement("div", { className: classesInner, style: stylesInner }, showText && textInside && (React__default.createElement(React__default.Fragment, null, children ? (React__default.createElement("div", { className: classesInsideText, style: stylesInsideIcon }, children)) : (React__default.createElement("div", { className: classesInsideText, style: stylesInsideText },
+                React__default.createElement("span", { className: classesTextInner, style: { color: textColor || '#fff' } },
+                    percentage,
+                    isShowPercentage ? '%' : ''))))))),
+        showText && !textInside && (React__default.createElement("div", { className: classesText, style: stylesText },
+            textType === 'text' && (React__default.createElement("span", { className: classesTextInner, style: { color: textColor || '#333' } },
+                percentage,
+                isShowPercentage ? '%' : '')),
+            textType === 'icon' && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, size: iconSize, name: iconName, color: iconColor }))))));
 };
 Progress.defaultProps = defaultProps;
 Progress.displayName = 'NutProgress';
+
 export { Progress as P };

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

@@ -0,0 +1,221 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { useDrag } from '@use-gesture/react';
+import { useSpring, animated } from '@react-spring/web';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+
+const canUseDom = !!(typeof window !== 'undefined' &&
+    typeof document !== 'undefined' &&
+    window.document &&
+    window.document.createElement);
+
+const defaultRoot = canUseDom ? window : undefined;
+const overflowStylePatterns = ['scroll', 'auto', 'overlay'];
+function isElement(node) {
+    const ELEMENT_NODE_TYPE = 1;
+    return node.nodeType === ELEMENT_NODE_TYPE;
+}
+function getScrollParent(el, root = defaultRoot) {
+    let node = el;
+    while (node && node !== root && isElement(node)) {
+        if (node === document.body) {
+            return root;
+        }
+        const { overflowY } = window.getComputedStyle(node);
+        if (overflowStylePatterns.includes(overflowY) &&
+            node.scrollHeight > node.clientHeight) {
+            return node;
+        }
+        node = node.parentNode;
+    }
+    return root;
+}
+
+function bound(position, min, max) {
+    let ret = position;
+    if (min !== undefined) {
+        ret = Math.max(position, min);
+    }
+    if (max !== undefined) {
+        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));
+
+let passiveSupported = false;
+if (canUseDom) {
+    try {
+        const opts = Object.defineProperty({}, 'passive', {
+            get() {
+                passiveSupported = true;
+            },
+        });
+        window.addEventListener('test-passive-supported', null, opts);
+    }
+    catch (e) {
+        console.log(e);
+    }
+}
+
+const defaultProps = {
+    pullingText: '',
+    canReleaseText: '',
+    refreshingText: '',
+    completeText: '',
+    completeDelay: 500,
+    disabled: false,
+    headHeight: 40,
+    threshold: 60,
+    onRefresh: () => { },
+};
+const PullToRefresh = (p) => {
+    const { locale } = useConfig();
+    const props = {
+        ...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 headHeight = props.headHeight;
+    const threshold = props.threshold;
+    const [status, setStatus] = useState('pulling');
+    const [springStyles, api] = useSpring(() => ({
+        from: { height: 0 },
+        config: {
+            tension: 300,
+            friction: 30,
+            clamp: true,
+        },
+    }));
+    const elementRef = useRef(null);
+    const pullingRef = useRef(false);
+    useEffect(() => {
+        elementRef.current?.addEventListener('touchmove', () => { });
+    }, []);
+    async function doRefresh() {
+        api.start({ height: headHeight });
+        setStatus('refreshing');
+        try {
+            await props.onRefresh();
+            setStatus('complete');
+        }
+        catch (e) {
+            api.start({
+                to: async (next) => {
+                    await next({ height: 0 });
+                    setStatus('pulling');
+                },
+            });
+            throw e;
+        }
+        if (props.completeDelay > 0) {
+            await sleep(props.completeDelay);
+        }
+        api.start({
+            to: async (next) => {
+                await next({ height: 0 });
+                setStatus('pulling');
+            },
+        });
+    }
+    useDrag((state) => {
+        if (status === 'refreshing' || status === 'complete')
+            return;
+        const { event } = state;
+        // 最后一个事件，检查是否可以刷新或是否是开始状态（第一个状态也是最后一个状态）
+        if (state.last) {
+            pullingRef.current = false;
+            if (status === 'canRelease') {
+                doRefresh();
+            }
+            else {
+                api.start({ height: 0 });
+            }
+            return;
+        }
+        function getScrollTop(element) {
+            return 'scrollTop' in element ? element.scrollTop : element.scrollY;
+        }
+        // 手指位置
+        const [, y] = state.movement;
+        // 第一个事件，并且手指位置大于0
+        if (state.first && y > 0) {
+            const target = state.event.target;
+            if (!target || !(target instanceof Element))
+                return;
+            let scrollParent = getScrollParent(target);
+            while (true) {
+                if (!scrollParent)
+                    return;
+                const scrollTop = getScrollTop(scrollParent);
+                if (scrollTop > 0) {
+                    return;
+                }
+                // 查找到 window 说明到顶了
+                if (scrollParent instanceof Window) {
+                    break;
+                }
+                // 递归查找
+                scrollParent = getScrollParent(scrollParent.parentNode);
+            }
+            pullingRef.current = true;
+        }
+        if (!pullingRef.current)
+            return;
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        event.stopPropagation();
+        const height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
+        api.start({ height });
+        setStatus(height > threshold ? 'canRelease' : 'pulling');
+    }, {
+        pointer: { touch: true },
+        axis: 'y',
+        target: elementRef,
+        enabled: !props.disabled,
+        eventOptions: (passiveSupported
+            ? { passive: false }
+            : false),
+    });
+    const renderStatusText = () => {
+        if (props.renderText) {
+            return props.renderText?.(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 '';
+    };
+    return (React__default.createElement(animated.div, { ref: elementRef, className: "nut-pulltorefresh" },
+        React__default.createElement(animated.div, { style: springStyles, className: "nut-pulltorefresh-head" },
+            React__default.createElement("div", { className: "nut-pulltorefresh-head-content", style: { height: headHeight } }, renderStatusText())),
+        React__default.createElement("div", { className: "nut-pulltorefresh-content" }, props.children)));
+};
+PullToRefresh.defaultProps = defaultProps;
+PullToRefresh.displayName = 'NutPullToRefresh';
+
+export { PullToRefresh as P };