@nutui/nutui-react 2.6.23 → 3.0.0-beta.0

package/dist/es/packages/steps/style/style.css

@@ -0,0 +1,202 @@
+.nut-step {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex: 1;
+  text-align: center;
+  font-size: 0;
+}
+.nut-step-head {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--nutui-steps-base-icon-margin-bottom, 12px);
+}
+.nut-step-line {
+  position: absolute;
+  top: calc(var(--nutui-steps-base-icon-height, 25px) / 2);
+  left: calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);
+  height: var(--nutui-steps-base-line-height, 1px);
+  width: var(--nutui-steps-base-line-width, 70%);
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-text-help, #888b94));
+}
+.nut-step-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--nutui-steps-base-icon-width, 25px);
+  height: var(--nutui-steps-base-icon-height, 25px);
+  line-height: var(--nutui-steps-base-icon-line-height, 25px);
+  font-size: var(--nutui-steps-base-icon-font-size, var(--nutui-font-size-s, 12px));
+  background-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94));
+  border-color: var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94));
+  color: var(--nutui-steps-wait-icon-color, #ffffff);
+  z-index: 1;
+}
+.nut-step-icon .nut-icon {
+  width: 100%;
+  height: 100%;
+}
+.nut-step-icon.is-text {
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-icon.is-icon {
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+}
+.nut-step-main {
+  padding: 0 10%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.nut-step-title {
+  display: block;
+  margin-bottom: var(--nutui-steps-base-title-margin-bottom, 10px);
+  font-size: var(--nutui-steps-base-title-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-steps-base-title-color, var(--nutui-color-title, #1a1a1a));
+}
+.nut-step-description {
+  display: block;
+  font-size: var(--nutui-steps-base-description-font-size, var(--nutui-font-size-s, 12px));
+  color: var(--nutui-steps-base-description-color, var(--nutui-color-text, #505259));
+}
+.nut-step:last-child .nut-step-line {
+  display: none;
+}
+.nut-step.nut-step-process .nut-step-icon {
+  background-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #ff0f23));
+  border-color: var(--nutui-steps-process-icon-bg-color, var(--nutui-color-primary, #ff0f23));
+  color: var(--nutui-steps-process-icon-color, #ffffff);
+}
+.nut-step.nut-step-process .nut-step-title {
+  color: var(--nutui-steps-process-title-color, var(--nutui-color-primary, #ff0f23));
+  font-size: var(--nutui-steps-process-title-font-size, var(--nutui-font-size-base, 14px));
+  font-weight: var(--nutui-steps-process-title-font-weight, var(--nutui-font-weight-bold, 600));
+}
+.nut-step.nut-step-process .nut-step-description {
+  color: var(--nutui-steps-process-description-color, var(--nutui-color-text, #505259));
+}
+.nut-step.nut-step-wait .nut-step-title {
+  color: var(--nutui-steps-wait-title-color, var(--nutui-color-title, #1a1a1a));
+}
+.nut-step.nut-step-wait .nut-step-description {
+  color: var(--nutui-steps-wait-description-color, var(--nutui-color-text, #505259));
+}
+.nut-step.nut-step-finish .nut-step-icon {
+  background-color: var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));
+  border-color: var(--nutui-steps-finish-icon-border-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23)));
+  color: var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-step.nut-step-finish .nut-step-line {
+  background: var(--nutui-steps-finish-line-background, var(--nutui-color-primary, #ff0f23));
+}
+.nut-step.nut-step-finish .nut-step-title {
+  color: var(--nutui-steps-finish-title-color, var(--nutui-color-primary, #ff0f23));
+}
+.nut-step.nut-step-finish .nut-step-description {
+  color: var(--nutui-steps-finish-description-color, var(--nutui-color-text, #505259));
+}
+
+.nut-steps-dot .nut-step-head {
+  margin: var(--nutui-steps-dot-head-margin, 10px 0);
+}
+.nut-steps-dot .nut-step-line {
+  top: 7px;
+}
+.nut-steps-dot .nut-step-icon {
+  width: var(--nutui-steps-dot-icon-width, 6px);
+  height: var(--nutui-steps-dot-icon-height, 6px);
+  border: var(--nutui-steps-dot-icon-border, 2px solid var(--nutui-color-primary-text, #ffffff));
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+.nut-steps-dot .nut-step-wait .nut-step-icon {
+  background-color: var(--nutui-steps-dot-wait-icon-bg-color, var(--nutui-steps-wait-icon-bg-color, var(--nutui-color-text-help, #888b94)));
+}
+.nut-steps-dot .nut-step-finish .nut-step-icon {
+  background-color: var(--nutui-steps-finish-icon-bg-color, var(--nutui-color-primary-text, #ffffff));
+  border-color: var(--nutui-steps-dot-finish-icon-bg-color, var(--nutui-steps-finish-icon-color, var(--nutui-color-primary, #ff0f23)));
+}
+.nut-steps-dot .nut-step-process .nut-step-icon {
+  position: relative;
+}
+.nut-steps-dot .nut-step-process .nut-step-icon:before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -7px;
+  margin-top: -7px;
+  width: 14px;
+  height: 14px;
+  background-color: var(--nutui-steps-process-icon-before-bg-color, var(--nutui-color-primary-stop-2, #ff0f23));
+  border-radius: 50%;
+  opacity: 0.23;
+}
+
+.nut-steps-horizontal.nut-steps-dot .nut-step-line {
+  top: 50%;
+  bottom: -50%;
+}
+
+.nut-steps-vertical .nut-step {
+  display: flex;
+  height: 33.34%;
+}
+.nut-steps-vertical .nut-step-line {
+  position: absolute;
+  display: inline-block;
+  width: 1px;
+  height: var(--nutui-steps-base-line-width, 70%);
+  background: var(--nutui-steps-base-line-background, var(--nutui-color-text-help, #888b94));
+  top: calc(var(--nutui-steps-base-icon-height, 25px) + (100% - var(--nutui-steps-base-line-width, 70%) - var(--nutui-steps-base-icon-margin-bottom, 12px)) / 2);
+  left: calc(50% - 1px);
+}
+.nut-steps-vertical.nut-steps-dot .nut-step-line {
+  top: calc(var(--nutui-steps-dot-icon-height, 6px) + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);
+}
+.nut-steps-vertical .nut-step-main {
+  display: inline-block;
+  padding-left: 6%;
+  text-align: start;
+}
+
+[dir=rtl] .nut-step-line,
+.nut-rtl .nut-step-line {
+  left: auto;
+  right: calc(50% + (100% - var(--nutui-steps-base-line-width, 70%)) / 2);
+}
+
+[dir=rtl] .nut-steps-dot .nut-step-process .nut-step-icon:before,
+.nut-rtl .nut-steps-dot .nut-step-process .nut-step-icon:before {
+  left: auto;
+  right: 50%;
+  margin-left: 0;
+  margin-right: -7px;
+}
+
+[dir=rtl] .nut-steps-vertical .nut-step-line,
+.nut-rtl .nut-steps-vertical .nut-step-line {
+  left: auto;
+  right: calc(50% - 1px);
+}
+[dir=rtl] .nut-steps-vertical .nut-step-main,
+.nut-rtl .nut-steps-vertical .nut-step-main {
+  padding-left: 0;
+  padding-right: 6%;
+}
+
+.nut-steps {
+  display: flex;
+}
+
+.nut-steps-vertical {
+  height: 100%;
+  flex-flow: column;
+}

package/dist/es/packages/sticky/index.d.ts

@@ -0,0 +1,3 @@
+import { Sticky } from './sticky';
+export type { StickyProps } from './sticky';
+export default Sticky;

package/dist/es/packages/sticky/index.js

@@ -0,0 +1,2 @@
+import { Sticky } from "./sticky";
+export default Sticky;

package/dist/es/packages/sticky/sticky.d.ts

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from 'react';
+import { BasicComponent } from "../../utils/typings";
+export interface StickyProps extends BasicComponent {
+    /**
+    * 容器的 ref
+    * @default -
+    */
+    container: React.RefObject<HTMLElement>
+    /**
+    * 吸附位置
+    * @default top
+    */
+    position: 'top' | 'bottom'
+    /**
+    * 距离，当 position 为 top 时，设置的是 top
+    * @default 0
+    */
+    threshold: number
+    /**
+    * 吸附时的层级
+    * @default 2000
+    */
+    zIndex: number
+    /**
+    * 吸附状态改变时触发
+    * @default -
+    */
+    onChange: (val: boolean) => void
+}
+export declare const Sticky: FunctionComponent<Partial<StickyProps>>;

package/dist/es/packages/sticky/sticky.js

@@ -0,0 +1,153 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { getScrollParent } from "../../utils/get-scroll-parent";
+import { getRect } from "../../utils/use-client-rect";
+import useWatch from "../../utils/use-watch";
+import { ComponentDefaults } from "../../utils/typings";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    position: 'top',
+    threshold: 0,
+    zIndex: 900
+});
+var classPrefix = 'nut-sticky';
+export var Sticky = function(props) {
+    var _ref = _object_spread({}, defaultProps, props), position = _ref.position, zIndex = _ref.zIndex, children = _ref.children, container = _ref.container, style = _ref.style, className = _ref.className, threshold = _ref.threshold, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
+        "position",
+        "zIndex",
+        "children",
+        "container",
+        "style",
+        "className",
+        "threshold",
+        "onChange"
+    ]);
+    var stickyRef = useRef(null);
+    var rootRef = useRef(null);
+    var _useState = _sliced_to_array(useState(false), 2), isFixed = _useState[0], setIsFixed = _useState[1];
+    var _obj;
+    var _useState1 = _sliced_to_array(useState((_obj = {}, _define_property(_obj, position, "".concat(threshold, "px")), _define_property(_obj, "zIndex", zIndex), _obj)), 2), stickyStyle = _useState1[0], setStickyStyle = _useState1[1];
+    useEffect(function() {
+        var _obj;
+        setStickyStyle(_object_spread_props(_object_spread({}, stickyStyle), (_obj = {}, _define_property(_obj, position, "".concat(threshold, "px")), _define_property(_obj, "zIndex", zIndex), _obj)));
+    }, [
+        threshold,
+        position,
+        zIndex
+    ]);
+    var _useState2 = _sliced_to_array(useState({}), 2), rootStyle = _useState2[0], setRootStyle = _useState2[1];
+    var getElement = useCallback(function() {
+        return getScrollParent(rootRef.current);
+    }, []);
+    useEffect(function() {
+        if (position === 'top') return;
+        var containerEle = container && container.current;
+        var rootEle = rootRef.current;
+        var stickyEle = stickyRef.current;
+        if (!rootEle && !containerEle) return;
+        var rootRect = getRect(rootEle);
+        var containerRect = getRect(containerEle);
+        var clientHeight = document.documentElement.clientHeight;
+        var stickyRect = getRect(stickyEle);
+        var fixed = clientHeight - threshold < rootRect.bottom;
+        if (containerEle) {
+            fixed = containerRect.bottom > clientHeight - threshold - stickyRect.height && clientHeight - threshold - stickyRect.height > containerRect.top;
+        }
+        var defaultPostVal = fixed ? 'fixed' : 'inherit';
+        setStickyStyle(function(prev) {
+            return _object_spread_props(_object_spread({}, prev), {
+                position: defaultPostVal
+            });
+        });
+        setIsFixed(fixed);
+    }, [
+        position,
+        container,
+        threshold
+    ]);
+    var handleScroll = useCallback(function() {
+        var containerEle = container && container.current;
+        var rootEle = rootRef.current;
+        var stickyEle = stickyRef.current;
+        if (!rootEle && !containerEle) return;
+        var rootRect = getRect(rootEle);
+        var stickyRect = getRect(stickyEle);
+        var containerRect = getRect(containerEle);
+        if (rootRect.height) {
+            setRootStyle(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), {
+                    height: rootRect.height
+                });
+            });
+        }
+        var getFixed = function() {
+            var fixed = false;
+            if (position === 'top') {
+                fixed = containerEle ? threshold > rootRect.top && containerRect.bottom > 0 : threshold > rootRect.top;
+            } else {
+                var clientHeight = document.documentElement.clientHeight;
+                fixed = containerEle ? containerRect.bottom > 0 && clientHeight - threshold - stickyRect.height > containerRect.top : clientHeight - threshold < rootRect.bottom;
+            }
+            return {
+                position: fixed ? 'fixed' : 'inherit',
+                fixed: fixed
+            };
+        };
+        var getTransform = function() {
+            if (position === 'top' && containerEle) {
+                var diff = containerRect.bottom - threshold - stickyRect.height;
+                var transform = diff < 0 ? diff : 0;
+                return {
+                    transform: "translate3d(0, ".concat(transform, "px, 0)")
+                };
+            }
+            if (position === 'bottom' && containerEle) {
+                var clientHeight = document.documentElement.clientHeight;
+                var diff1 = containerRect.bottom - (clientHeight - threshold);
+                var transform1 = diff1 < 0 ? diff1 : 0;
+                return {
+                    transform: "translate3d(0, ".concat(transform1, "px, 0)")
+                };
+            }
+            return {};
+        };
+        var fixed = getFixed();
+        setStickyStyle(function(prev) {
+            return _object_spread_props(_object_spread({}, prev, getTransform()), {
+                position: fixed.position
+            });
+        });
+        setIsFixed(fixed.fixed);
+    }, [
+        position,
+        threshold,
+        container
+    ]);
+    useWatch(isFixed, function() {
+        onChange && onChange(isFixed);
+    });
+    useEffect(function() {
+        var el = getElement();
+        el === null || el === void 0 ? void 0 : el.addEventListener('scroll', handleScroll, false);
+        return function() {
+            el === null || el === void 0 ? void 0 : el.removeEventListener('scroll', handleScroll);
+        };
+    }, [
+        getElement,
+        handleScroll
+    ]);
+    return /*#__PURE__*/ React.createElement("div", _object_spread({
+        ref: rootRef,
+        style: _object_spread({}, style, rootStyle),
+        className: classNames(classPrefix, className)
+    }, rest), /*#__PURE__*/ React.createElement("div", {
+        className: "nut-sticky-box",
+        ref: stickyRef,
+        style: stickyStyle
+    }, children));
+};
+Sticky.displayName = 'NutSticky';

package/dist/es/packages/sticky/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/sticky/style/index.js

@@ -0,0 +1 @@
+import './sticky.scss';

package/dist/es/packages/sticky/style/sticky.scss

@@ -0,0 +1,3 @@
+.nut-sticky-fixed {
+  position: fixed;
+}

package/dist/es/packages/sticky/style/style.css

@@ -0,0 +1,3 @@
+.nut-sticky-fixed {
+  position: fixed;
+}

package/dist/es/packages/subsidenavbar/index.d.ts

@@ -0,0 +1,3 @@
+import { SubSideNavBar } from './subsidenavbar';
+export type { SubSideNavBarProps } from './subsidenavbar';
+export default SubSideNavBar;

package/dist/es/packages/subsidenavbar/index.js

@@ -0,0 +1,2 @@
+import { SubSideNavBar } from "./subsidenavbar";
+export default SubSideNavBar;

package/dist/es/packages/subsidenavbar/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/subsidenavbar/style/index.js

@@ -0,0 +1 @@
+import './subsidenavbar.scss';

package/dist/es/packages/subsidenavbar/style/style.css

@@ -0,0 +1,16 @@
+.nut-subsidenavbar-title {
+  height: var(--nutui-sidenavbar-item-height, 40px);
+  padding: var(--nutui-sidenavbar-sub-title-padding, 10px 8px 10px 35px);
+  box-sizing: border-box;
+  background-color: var(--nutui-sidenavbar-sub-title-background, var(--nutui-color-background-sunken, #f7f8fc));
+  color: var(--nutui-sidenavbar-sub-title-color, var(--nutui-color-title, #1a1a1a));
+  box-sizing: border-box;
+}
+.nut-subsidenavbar-list.sidenavbar-show .nut-subsidenavbar-content {
+  height: auto;
+  overflow: inherit;
+}
+.nut-subsidenavbar-list.sidenavbar-hide .nut-subsidenavbar-content {
+  height: 0;
+  overflow: hidden;
+}

package/dist/es/packages/subsidenavbar/style/subsidenavbar.scss

@@ -0,0 +1,26 @@
+.nut-subsidenavbar {
+  &-title {
+    height: $sidenavbar-item-height;
+    padding: $sidenavbar-sub-title-padding;
+    box-sizing: border-box;
+    background-color: $sidenavbar-sub-title-background;
+    color: $sidenavbar-sub-title-color;
+    box-sizing: border-box;
+  }
+
+  &-list {
+    &.sidenavbar-show {
+      .nut-subsidenavbar-content {
+        height: auto;
+        overflow: inherit;
+      }
+    }
+
+    &.sidenavbar-hide {
+      .nut-subsidenavbar-content {
+        height: 0;
+        overflow: hidden;
+      }
+    }
+  }
+}

package/dist/es/packages/subsidenavbar/subsidenavbar.d.ts

@@ -0,0 +1,13 @@
+import React, { FunctionComponent } from 'react';
+export type SubSideNavBarProps = {
+    title: string;
+    value: string | number;
+    open?: boolean;
+    children?: React.ReactNode;
+    onClick?: ({ title, value, isShow, }: {
+        title: string;
+        value: string | number;
+        isShow: boolean;
+    }) => void;
+};
+export declare const SubSideNavBar: FunctionComponent<SubSideNavBarProps>;

package/dist/es/packages/subsidenavbar/subsidenavbar.js

@@ -0,0 +1,77 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import React, { useRef, useEffect, useCallback, useContext } from "react";
+import { handleClick } from "../sidenavbar/utils";
+import { OffsetContext } from "../sidenavbar/context";
+var defaultProps = {
+    open: true
+};
+export var SubSideNavBar = function(props) {
+    var classPrefix = 'nut-subsidenavbar';
+    var _ref = _object_spread({}, defaultProps, props), title = _ref.title, value = _ref.value, children = _ref.children, onClick = _ref.onClick, open = _ref.open, rest = _object_without_properties(_ref, [
+        "title",
+        "value",
+        "children",
+        "onClick",
+        "open"
+    ]);
+    var offset = useContext(OffsetContext);
+    var listRef = useRef(null);
+    var setListLevel = useCallback(function(nodeList) {
+        var level = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1;
+        var titleClass = nodeList[0].className;
+        if (titleClass.includes("".concat(classPrefix, "-title"))) {
+            var left = offset * (level + 1);
+            nodeList[0].style.paddingLeft = "".concat(left, "px");
+        }
+        var childNodes = nodeList[1] && nodeList[1].children && Array.from(nodeList[1].children).filter(function(item) {
+            return item.nodeType !== 3 && item.nodeType !== 8;
+        });
+        childNodes.forEach(function(item) {
+            var itemClass = item.className;
+            if (itemClass.includes("".concat(classPrefix, "-item"))) {
+                var left = offset * (level + 2);
+                item.style.paddingLeft = "".concat(left, "px");
+            }
+            if (itemClass.includes("".concat(classPrefix, "-list"))) {
+                var level1 = item.getAttribute('level') ? Number(item.getAttribute('level')) : 1;
+                level1 += 1;
+                item.setAttribute('level', level1.toString());
+                item.children && setListLevel(item.children, level1);
+            }
+        });
+    }, [
+        offset
+    ]);
+    var clickFn = function(e) {
+        handleClick(e);
+        var currentClass = e.currentTarget.className;
+        var isShow = currentClass.includes('sidenavbar-show');
+        onClick && onClick({
+            title: title,
+            value: value,
+            isShow: isShow
+        });
+    };
+    useEffect(function() {
+        var _listRef_current, _listRef_current1;
+        var childNodes = (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.children;
+        (_listRef_current1 = listRef.current) === null || _listRef_current1 === void 0 ? void 0 : _listRef_current1.setAttribute('level', '1');
+        childNodes && setListLevel(childNodes);
+    }, [
+        setListLevel
+    ]);
+    var divClass = open ? "".concat(classPrefix, "-list sidenavbar-show") : "".concat(classPrefix, "-list sidenavbar-hide");
+    var iconClass = open ? 'arrow-icon arrow-down' : 'arrow-icon arrow-up';
+    return /*#__PURE__*/ React.createElement("div", _object_spread({
+        className: divClass,
+        ref: listRef,
+        onClick: clickFn
+    }, rest), /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-title ").concat(classPrefix, "-border-bt")
+    }, title, " ", /*#__PURE__*/ React.createElement("i", {
+        className: iconClass
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: "".concat(classPrefix, "-content")
+    }, children));
+};

package/dist/es/packages/swipe/index.d.ts

@@ -0,0 +1,3 @@
+import { Swipe } from './swipe';
+export type { SwipeProps, SwipeInstance, SwipeSide } from './swipe';
+export default Swipe;

package/dist/es/packages/swipe/index.js

@@ -0,0 +1,2 @@
+import { Swipe } from "./swipe";
+export default Swipe;

package/dist/es/packages/swipe/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/swipe/style/index.js

@@ -0,0 +1 @@
+import './swipe.scss';

package/dist/es/packages/swipe/style/style.css

@@ -0,0 +1,29 @@
+.nut-swipe {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  cursor: grab;
+  background-color: #ffffff;
+}
+.nut-swipe-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-self: stretch;
+  width: 100%;
+  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+  transition-property: transform;
+}
+.nut-swipe-left, .nut-swipe-right {
+  position: absolute;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+}
+.nut-swipe-left {
+  left: 0;
+}
+.nut-swipe-right {
+  left: 100%;
+}

package/dist/es/packages/swipe/style/swipe.scss

@@ -0,0 +1,34 @@
+.nut-swipe {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  overflow: hidden;
+  cursor: grab;
+  background-color: $white;
+
+  &-wrapper {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-self: stretch;
+    width: 100%;
+    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1);
+    transition-property: transform;
+  }
+
+  &-left,
+  &-right {
+    position: absolute;
+    top: 0;
+    display: flex;
+    flex-direction: row;
+  }
+
+  &-left {
+    left: 0;
+  }
+
+  &-right {
+    left: 100%;
+  }
+}

package/dist/es/packages/swipe/swipe.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { TouchEvent, MouseEvent } from 'react';
+import { BasicComponent } from "../../utils/typings";
+export type SwipeSide = 'left' | 'right';
+export interface SwipeInstance {
+    open: (side: SwipeSide) => void;
+    close: () => void;
+}
+export interface SwipeProps extends BasicComponent {
+    name?: string | number;
+    leftAction?: React.ReactNode;
+    rightAction?: React.ReactNode;
+    /** 关闭前的回调函数，返回 false 可阻止关闭，支持返回 Promise */
+    beforeClose?: (position: string) => void;
+    disabled?: boolean;
+    onOpen?: ({ name, position, }: {
+        name: string | number;
+        position: SwipeSide;
+    }) => void;
+    onClose?: ({ name, position, }: {
+        name: string | number;
+        position: SwipeSide;
+    }) => void;
+    onActionClick?: (event: MouseEvent<HTMLDivElement>, position: SwipeSide) => void;
+    onTouchStart?: (event: TouchEvent<HTMLDivElement>) => void;
+    onTouchEnd?: (event: TouchEvent<HTMLDivElement>) => void;
+    onTouchMove?: (event: TouchEvent<HTMLDivElement>) => void;
+}
+export declare const Swipe: React.ForwardRefExoticComponent<Partial<SwipeProps> & Omit<React.HTMLAttributes<HTMLDivElement>, "onTouchStart" | "onTouchMove" | "onTouchEnd"> & React.RefAttributes<SwipeInstance>>;