@nutui/nutui-react 3.0.0-beta.9 → 3.0.1

package/dist/cjs/packages/picker/pickerpanel.js

@@ -1,238 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
-var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _usetouch = require("../../utils/use-touch");
-var _supportspassive = require("../../utils/supports-passive");
-var InternalPickerPanel = function InternalPickerPanel(props, ref) {
-    var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, defaultValue = props.defaultValue, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1000 : _props_duration, chooseItem = props.chooseItem;
-    var touch = (0, _usetouch.useTouch)();
-    var DEFAULT_DURATION = 200;
-    // 触发惯性滑动条件:
-    // 在手指离开屏幕时，如果和上一次 move 时的间隔小于 `MOMENTUM_TIME` 且 move
-    // 距离大于 `MOMENTUM_DISTANCE` 时，执行惯性滑动
-    var INERTIA_TIME = 300;
-    var INERTIA_DISTANCE = 15;
-    var _useState = (0, _sliced_to_array._)((0, _react.useState)(1), 2), currIndex = _useState[0], setCurrIndex = _useState[1];
-    var lineSpacing = 36;
-    var _useState1 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), touchTime = _useState1[0], setTouchTime = _useState1[1];
-    var _useState2 = (0, _sliced_to_array._)((0, _react.useState)('0deg'), 2), touchDeg = _useState2[0], setTouchDeg = _useState2[1];
-    var rotation = 20;
-    var moving = (0, _react.useRef)(false);
-    var timer;
-    var rollerRef = (0, _react.useRef)(null);
-    var PickerPanelRef = (0, _react.useRef)(null);
-    var _useState3 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startTime = _useState3[0], setStartTime = _useState3[1];
-    var _useState4 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), startY = _useState4[0], setStartY = _useState4[1];
-    var transformY = (0, _react.useRef)(0);
-    var _useState5 = (0, _sliced_to_array._)((0, _react.useState)(0), 2), scrollDistance = _useState5[0], setScrollDistance = _useState5[1];
-    var isHidden = function isHidden(index) {
-        if (index >= currIndex + 8 || index <= currIndex - 8) {
-            return true;
-        }
-        return false;
-    };
-    var setTransform = function setTransform(type, deg) {
-        var time = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : DEFAULT_DURATION, translateY = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : 0;
-        var nTime = time;
-        if (type !== 'end') {
-            nTime = 0;
-        }
-        setTouchTime(nTime);
-        setTouchDeg(deg);
-        setScrollDistance(translateY);
-    };
-    var setMove = function setMove(move, type, time) {
-        var updateMove = move + transformY.current;
-        if (type === 'end') {
-            // 限定滚动距离
-            if (updateMove > 0) {
-                updateMove = 0;
-            }
-            if (updateMove < -(options.length - 1) * lineSpacing) {
-                updateMove = -(options.length - 1) * lineSpacing;
-            }
-            // 设置滚动距离为lineSpacing的倍数值
-            var endMove = Math.round(updateMove / lineSpacing) * lineSpacing;
-            var deg = "".concat((Math.abs(Math.round(endMove / lineSpacing)) + 1) * rotation, "deg");
-            setTransform(type, deg, time, endMove);
-            setCurrIndex(Math.abs(Math.round(endMove / lineSpacing)) + 1);
-        } else {
-            var deg1 = 0;
-            var currentDeg = (-updateMove / lineSpacing + 1) * rotation;
-            // picker 滚动的最大角度
-            var maxDeg = (options.length + 1) * rotation;
-            var minDeg = 0;
-            deg1 = Math.min(Math.max(currentDeg, minDeg), maxDeg);
-            if (minDeg < deg1 && deg1 < maxDeg) {
-                setTransform('', "".concat(deg1, "deg"), undefined, updateMove);
-                setCurrIndex(Math.abs(Math.round(updateMove / lineSpacing)) + 1);
-            }
-        }
-    };
-    var setChooseValue = function setChooseValue(move) {
-        chooseItem === null || chooseItem === void 0 ? void 0 : chooseItem(options === null || options === void 0 ? void 0 : options[Math.round(-move / lineSpacing)], keyIndex);
-    };
-    // 开始滚动
-    var touchStart = function touchStart(event) {
-        touch.start(event);
-        setStartY(touch.deltaY.current);
-        setStartTime(Date.now());
-        transformY.current = scrollDistance;
-    };
-    var touchMove = function touchMove(event) {
-        touch.move(event);
-        if (touch.isVertical) {
-            moving.current = true;
-            preventDefault(event, true);
-        }
-        var move = touch.deltaY.current - startY;
-        setMove(move);
-    };
-    var touchEnd = function touchEnd() {
-        if (!moving.current) return;
-        var move = touch.deltaY.current - startY;
-        var moveTime = Date.now() - startTime;
-        // 区分是否为惯性滚动
-        if (moveTime <= INERTIA_TIME && Math.abs(move) > INERTIA_DISTANCE) {
-            // 惯性滚动
-            var distance = momentum(move, moveTime);
-            setMove(distance, 'end', +duration);
-        } else {
-            setMove(move, 'end');
-        }
-        setTimeout(function() {
-            touch.reset();
-        }, 0);
-    };
-    // 惯性滚动 距离
-    var momentum = function momentum(distance, duration) {
-        var nDistance = distance;
-        // 惯性滚动的速度
-        var speed = Math.abs(nDistance / duration);
-        // 惯性滚动的距离
-        nDistance = speed / 0.003 * (nDistance < 0 ? -1 : 1);
-        return nDistance;
-    };
-    var modifyStatus = function modifyStatus(type, val) {
-        var value = val || defaultValue;
-        var index = -1;
-        if (value) {
-            options.some(function(item, idx) {
-                if (item.value === value) {
-                    index = idx;
-                    return true;
-                }
-                return false;
-            });
-        } else {
-            options.forEach(function(item, i) {
-                if (item.value === defaultValue) {
-                    index = i;
-                }
-            });
-        }
-        setCurrIndex(index === -1 ? 1 : index + 1);
-        var move = index === -1 ? 0 : index * lineSpacing;
-        type && setChooseValue(-move);
-        setMove(-move);
-    };
-    // 惯性滚动结束
-    var stopMomentum = function stopMomentum() {
-        moving.current = false;
-        setTouchTime(0);
-        setChooseValue(scrollDistance);
-    };
-    // 阻止默认事件
-    var preventDefault = function preventDefault(event, isStopPropagation) {
-        /* istanbul ignore else */ if (typeof event.cancelable !== 'boolean' || event.cancelable) {
-            event.preventDefault();
-        }
-        if (isStopPropagation) {
-            event.stopPropagation();
-        }
-    };
-    var touchRollerStyle = function touchRollerStyle() {
-        return {
-            transition: "transform ".concat(touchTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)"),
-            transform: "rotate3d(1, 0, 0, ".concat(touchDeg, ")")
-        };
-    };
-    var touchTileStyle = function touchTileStyle() {
-        return {
-            transition: "transform ".concat(touchTime, "ms cubic-bezier(0.17, 0.89, 0.45, 1)"),
-            transform: "translate3d(0, ".concat(scrollDistance, "px, 0)")
-        };
-    };
-    (0, _react.useEffect)(function() {
-        setScrollDistance(0);
-        transformY.current = 0;
-        modifyStatus(false);
-        return function() {
-            clearTimeout(timer);
-        };
-    }, [
-        options
-    ]);
-    (0, _react.useImperativeHandle)(ref, function() {
-        return {
-            stopMomentum: stopMomentum,
-            moving: moving.current
-        };
-    });
-    (0, _react.useEffect)(function() {
-        var _PickerPanelRef_current, _PickerPanelRef_current1, _PickerPanelRef_current2;
-        var options = _supportspassive.passiveSupported ? {
-            passive: false
-        } : false;
-        (_PickerPanelRef_current = PickerPanelRef.current) === null || _PickerPanelRef_current === void 0 ? void 0 : _PickerPanelRef_current.addEventListener('touchstart', touchStart, options);
-        (_PickerPanelRef_current1 = PickerPanelRef.current) === null || _PickerPanelRef_current1 === void 0 ? void 0 : _PickerPanelRef_current1.addEventListener('touchmove', touchMove, options);
-        (_PickerPanelRef_current2 = PickerPanelRef.current) === null || _PickerPanelRef_current2 === void 0 ? void 0 : _PickerPanelRef_current2.addEventListener('touchend', touchEnd, options);
-        return function() {
-            var _PickerPanelRef_current, _PickerPanelRef_current1, _PickerPanelRef_current2;
-            (_PickerPanelRef_current = PickerPanelRef.current) === null || _PickerPanelRef_current === void 0 ? void 0 : _PickerPanelRef_current.removeEventListener('touchstart', touchStart);
-            (_PickerPanelRef_current1 = PickerPanelRef.current) === null || _PickerPanelRef_current1 === void 0 ? void 0 : _PickerPanelRef_current1.removeEventListener('touchmove', touchMove);
-            (_PickerPanelRef_current2 = PickerPanelRef.current) === null || _PickerPanelRef_current2 === void 0 ? void 0 : _PickerPanelRef_current2.removeEventListener('touchend', touchEnd);
-        };
-    });
-    return /*#__PURE__*/ _react.default.createElement("div", {
-        className: "nut-picker-list",
-        ref: PickerPanelRef,
-        onTouchStart: touchStart,
-        onTouchMove: touchMove,
-        onTouchEnd: touchEnd
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "nut-picker-roller",
-        ref: rollerRef,
-        style: threeDimensional ? touchRollerStyle() : touchTileStyle(),
-        onTransitionEnd: stopMomentum
-    }, threeDimensional && options.map(function(item, index) {
-        return /*#__PURE__*/ _react.default.createElement("div", {
-            className: "nut-picker-roller-item ".concat(isHidden(index + 1) && 'nut-picker-roller-item-hidden'),
-            style: {
-                transform: "rotate3d(1, 0, 0, ".concat(-rotation * (index + 1), "deg) translate3d(0px, 0px, 104px)")
-            },
-            key: item.value ? item.value : index
-        }, /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, item.text));
-    }), !threeDimensional && options.map(function(item, index) {
-        return /*#__PURE__*/ _react.default.createElement("div", {
-            className: "nut-picker-roller-item-title",
-            key: item.value ? item.value : index
-        }, /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, item.text));
-    })), /*#__PURE__*/ _react.default.createElement("div", {
-        className: "nut-picker-mask"
-    }), /*#__PURE__*/ _react.default.createElement("div", {
-        className: "nut-picker-indicator"
-    }));
-};
-var PickerPanel = /*#__PURE__*/ _react.default.forwardRef(InternalPickerPanel);
-var _default = PickerPanel;

package/dist/cjs/packages/sidenavbar/context.d.ts

@@ -1 +0,0 @@
-export declare const OffsetContext: import("react").Context<number>;

package/dist/cjs/packages/sidenavbar/context.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "OffsetContext", {
-    enumerable: true,
-    get: function() {
-        return OffsetContext;
-    }
-});
-var _react = require("react");
-var OffsetContext = /*#__PURE__*/ (0, _react.createContext)(20);

package/dist/cjs/packages/sidenavbar/index.d.ts

@@ -1,3 +0,0 @@
-import { SideNavBar } from './sidenavbar';
-export type { SideNavBarProps } from './sidenavbar';
-export default SideNavBar;

package/dist/cjs/packages/sidenavbar/sidenavbar.d.ts

@@ -1,14 +0,0 @@
-import React, { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
-/**
- * @deprecated Use SideBar instead.
- */
-export interface SideNavBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, BasicComponent {
-    title: ReactNode;
-    visible: boolean;
-    width: string;
-    indent: number;
-    position: 'left' | 'right';
-    onClose: () => void;
-}
-export declare const SideNavBar: FunctionComponent<Partial<SideNavBarProps>>;

package/dist/cjs/packages/sidenavbar/sidenavbar.js

@@ -1,70 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "SideNavBar", {
-    enumerable: true,
-    get: function() {
-        return SideNavBar;
-    }
-});
-var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
-var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
-var _popup = /*#__PURE__*/ _interop_require_default._(require("../popup"));
-var _utils = require("./utils");
-var _context = require("./context");
-var _typings = require("../../utils/typings");
-var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
-    position: 'left',
-    width: '80%'
-});
-var SideNavBar = function SideNavBar(props) {
-    (0, _react.useEffect)(function() {
-        console.warn('Warning: SideNavBar is deprecated and will be removed in future versions. Please use NewComponent SideBar instead.');
-    }, []);
-    var classPrefix = 'nut-sidenavbar';
-    var _ref = (0, _object_spread._)({}, defaultProps, props), title = _ref.title, visible = _ref.visible, width = _ref.width, position = _ref.position, children = _ref.children, className = _ref.className, onClose = _ref.onClose, indent = _ref.indent, rest = (0, _object_without_properties._)(_ref, [
-        "title",
-        "visible",
-        "width",
-        "position",
-        "children",
-        "className",
-        "onClose",
-        "indent"
-    ]);
-    var innerIndent = indent ? Number(indent) : 20;
-    return /*#__PURE__*/ _react.default.createElement(_popup.default, {
-        visible: visible,
-        style: {
-            width: width,
-            height: '100%'
-        },
-        position: position,
-        onClose: onClose
-    }, /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread._)({
-        className: (0, _classnames.default)(classPrefix, className)
-    }, rest), /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-content")
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-list sidenavbar-show"),
-        onClick: _utils.handleClick
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-title ").concat(classPrefix, "-border-bt"),
-        style: {
-            paddingLeft: "".concat(innerIndent, "px")
-        }
-    }, title, " ", /*#__PURE__*/ _react.default.createElement("i", {
-        className: "arrow-icon arrow-down"
-    })), /*#__PURE__*/ _react.default.createElement(_context.OffsetContext.Provider, {
-        value: innerIndent
-    }, /*#__PURE__*/ _react.default.createElement("div", {
-        className: "".concat(classPrefix, "-content")
-    }, children))))));
-};
-SideNavBar.displayName = 'NutSideNavBar';

package/dist/cjs/packages/sidenavbar/style/index.js

@@ -1,2 +0,0 @@
-import '../../popup/style';
-import './sidenavbar.scss';

package/dist/cjs/packages/sidenavbar/style/sidenavbar.scss

@@ -1,89 +0,0 @@
-.nut-sidenavbar {
-  color: #1d1d21;
-  font-size: 14px;
-  height: 100%;
-  overflow: auto;
-  display: block;
-  background-color: $sidenavbar-content-bg-color;
-
-  .arrow-icon {
-    position: absolute;
-    width: 0;
-    height: 0;
-    right: 16px;
-    top: 18px;
-    cursor: pointer;
-  }
-
-  .arrow-down {
-    border-top: 4px solid $color-text-help;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-  }
-
-  .arrow-up {
-    border-bottom: 4px solid $color-text-help;
-    border-left: 4px solid transparent;
-    border-right: 4px solid transparent;
-  }
-
-  &-title {
-    height: $sidenavbar-item-height;
-    padding: $sidenavbar-title-padding;
-    background: $sidenavbar-title-background;
-    color: $sidenavbar-title-color;
-    box-sizing: border-box;
-    transition: transform 0.5s;
-  }
-
-  &-content {
-    position: relative;
-    display: block;
-  }
-
-  &-list {
-    &.sidenavbar-show {
-      .nut-sidenavbar-content {
-        height: auto;
-        overflow: inherit;
-      }
-    }
-
-    &.sidenavbar-hide {
-      .nut-sidenavbar-content {
-        height: 0;
-        overflow: hidden;
-      }
-    }
-  }
-
-  .nut-subsidenavbar-border-bt {
-    position: relative;
-
-    &:after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 1px;
-      background: #eeeff2;
-      transform: scale(1, 0.5);
-      left: 0;
-      bottom: 0;
-    }
-  }
-}
-
-[dir='rtl'] .nut-sidenavbar,
-.nut-rtl .nut-sidenavbar {
-  .arrow-icon {
-    right: auto;
-    left: 16px;
-  }
-
-  .nut-subsidenavbar-border-bt {
-    &:after {
-      left: auto;
-      right: 0;
-    }
-  }
-}