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

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

@@ -0,0 +1,102 @@
+.nut-tour {
+  &-mask {
+    position: fixed;
+    box-shadow: 0px 0px 0px 150vh $color-mask;
+    border-radius: $tour-mask-border-radius;
+    z-index: 999;
+
+    &-none {
+      box-shadow: none;
+    }
+
+    &-hidden {
+      opacity: 0;
+    }
+  }
+
+  &-content {
+    display: block;
+    padding: $tour-content-padding;
+    min-width: $tour-content-min-width;
+    box-sizing: content-box;
+
+    &-top {
+      display: block;
+      text-align: end;
+
+      &-close {
+        --nut-icon-width: 10px;
+        --nut-icon-height: 10px;
+      }
+    }
+
+    &-inner {
+      margin: $tour-content-inner-margin;
+      font-size: $tour-content-inner-font-size;
+      white-space: nowrap;
+    }
+
+    &-bottom {
+      margin-top: $tour-content-bottom-margin-top;
+      display: flex;
+      justify-content: space-between;
+
+      &-operate {
+        display: flex;
+        justify-content: flex-end;
+
+        &-btn {
+          display: inline-block;
+          border: 1px solid $color-text-disabled;
+          margin-left: $tour-content-bottom-btn-margin-left;
+          padding: $tour-content-bottom-btn-padding;
+          font-size: $tour-content-bottom-btn-font-size;
+          border-radius: $tour-content-bottom-btn-border-radius;
+          color: $color-text;
+          cursor: pointer;
+
+          &.active {
+            color: #fff;
+            border: 0;
+            background: $color-primary;
+          }
+        }
+      }
+    }
+
+    &-tile {
+      .nut-tour-content-inner {
+        margin: 0;
+      }
+    }
+  }
+
+  &-masked {
+    position: fixed;
+    width: 100vh;
+    height: 100vh;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    background: transparent;
+  }
+}
+
+[dir='rtl'] .nut-tour,
+.nut-rtl .nut-tour {
+  &-content {
+    &-bottom {
+      &-operate {
+        &-btn {
+          margin-left: 0;
+          margin-right: $tour-content-bottom-btn-margin-left;
+        }
+      }
+    }
+  }
+
+  &-masked {
+    left: auto;
+    right: 0;
+  }
+}

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

@@ -0,0 +1,95 @@
+import React, { ReactNode, FunctionComponent } from 'react';
+import type { MouseEvent } from 'react';
+import { PopoverLocation } from "../popover/types";
+import { BasicComponent } from "../../utils/typings";
+export interface TourList {
+    target: Element | string;
+    content?: string;
+    location?: string;
+    popoverOffset?: number[];
+    arrowOffset?: number;
+}
+export type TourType = 'step' | 'tile';
+export interface TourProps extends BasicComponent {
+    /**
+    * 是否展示引导弹出层
+    * @default false
+    */
+    visible: boolean
+    /**
+    * 引导类型
+    * @default step
+    */
+    type: TourType
+    /**
+    * 弹出层位置,同 Popopver 的[location 属性](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover)
+    * @default bottom
+    */
+    location: PopoverLocation | string
+    /**
+    * 是否显示镂空遮罩
+    * @default true
+    */
+    mask: boolean
+    /**
+    * 镂空遮罩层宽度
+    * @default ''
+    */
+    maskWidth: number | string
+    /**
+    * 镂空遮罩层高度
+    * @default ''
+    */
+    maskHeight: number | string
+    /**
+    * 镂空遮罩相对于目标元素的偏移量
+    * @default [8, 10]
+    */
+    offset: number[]
+    /**
+    * 引导步骤内容
+    * @default -
+    */
+    list: TourList[]
+    /**
+    * 是否展示标题栏
+    * @default ''
+    */
+    title: ReactNode
+    /**
+    * 下一步按钮文案
+    * @default ''
+    */
+    next: ReactNode
+    /**
+    * 上一步按钮文案
+    * @default ''
+    */
+    prev: ReactNode
+    /**
+    * 完成按钮文案
+    * @default ''
+    */
+    complete: ReactNode
+    /**
+    * 是否展示上一步按钮
+    * @default true
+    */
+    showPrev: boolean
+    /**
+    * 是否在点击镂空遮罩层后关闭,同 Popopver 的[closeOnClickOverlay 属性](https://nutui.jd.com/h5/react/2x/#/zh-CN/component/popover)
+    * @default true
+    */
+    closeOnOverlayClick: boolean
+    /**
+    * 气泡层关闭时触发
+    * @default -
+    */
+    onClose: (e: MouseEvent<HTMLDivElement>) => void
+    /**
+    * 切换步骤时触发
+    * @default -
+    */
+    onChange: (value: number) => void
+}
+export declare const Tour: FunctionComponent<Partial<TourProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'>>;

package/dist/es/packages/tour/tour.js

@@ -0,0 +1,191 @@
+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, { useState, useEffect } from "react";
+import { Close } from "@nutui/icons-react";
+import classNames from "classnames";
+import Popover from "../popover";
+import { getRect } from "../../utils/use-client-rect";
+import { ComponentDefaults } from "../../utils/typings";
+import { useConfig } from "../configprovider";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    visible: false,
+    type: 'step',
+    location: 'bottom',
+    mask: true,
+    maskWidth: '',
+    maskHeight: '',
+    offset: [
+        8,
+        10
+    ],
+    title: '',
+    next: '',
+    prev: '',
+    complete: '',
+    showPrev: true,
+    closeOnOverlayClick: true
+});
+var classPrefix = 'nut-tour';
+export var Tour = function(props) {
+    var locale = useConfig().locale;
+    var _ref = _object_spread({}, defaultProps, props), children = _ref.children, className = _ref.className, title = _ref.title, closeOnOverlayClick = _ref.closeOnOverlayClick, showPrev = _ref.showPrev, list = _ref.list, type = _ref.type, location = _ref.location, visible = _ref.visible, mask = _ref.mask, maskWidth = _ref.maskWidth, maskHeight = _ref.maskHeight, offset = _ref.offset, next = _ref.next, prev = _ref.prev, complete = _ref.complete, onClose = _ref.onClose, onChange = _ref.onChange, rest = _object_without_properties(_ref, [
+        "children",
+        "className",
+        "title",
+        "closeOnOverlayClick",
+        "showPrev",
+        "list",
+        "type",
+        "location",
+        "visible",
+        "mask",
+        "maskWidth",
+        "maskHeight",
+        "offset",
+        "next",
+        "prev",
+        "complete",
+        "onClose",
+        "onChange"
+    ]);
+    var _useState = _sliced_to_array(useState(false), 2), showTour = _useState[0], setShowTour = _useState[1];
+    var _useState1 = _sliced_to_array(useState(false), 2), showPopup = _useState1[0], setShowPopup = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(0), 2), active = _useState2[0], setActive = _useState2[1];
+    var _useState3 = _sliced_to_array(useState({
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: 0,
+        height: 0
+    }), 2), maskRect = _useState3[0], setMaskRect = _useState3[1];
+    var classes = classNames(classPrefix, className);
+    useEffect(function() {
+        if (visible) {
+            getRootPosition();
+        }
+        setActive(0);
+        setShowTour(visible);
+        setShowPopup(visible);
+    }, [
+        visible
+    ]);
+    useEffect(function() {
+        if (visible) {
+            setShowPopup(true);
+            getRootPosition();
+        }
+    }, [
+        active
+    ]);
+    var getRootPosition = function() {
+        var el = document.querySelector("#".concat(list[active].target));
+        var rect = getRect(el);
+        setMaskRect(rect);
+    };
+    var maskStyle = function() {
+        var width = maskRect.width, height = maskRect.height, left = maskRect.left, top = maskRect.top;
+        var center = [
+            left + width / 2,
+            top + height / 2
+        ] // 中心点 【横，纵】
+        ;
+        var w = Number(maskWidth || width);
+        var h = Number(maskHeight || height);
+        var styles = {
+            width: "".concat(w + +offset[1] * 2, "px"),
+            height: "".concat(h + +offset[0] * 2, "px"),
+            top: "".concat(center[1] - h / 2 - +offset[0], "px"),
+            left: "".concat(center[0] - w / 2 - +offset[1], "px")
+        };
+        return styles;
+    };
+    var maskClose = function(e) {
+        setShowTour(false);
+        setShowPopup(false);
+        onClose && onClose(e);
+    };
+    var handleClickMask = function(e) {
+        closeOnOverlayClick && maskClose(e);
+    };
+    var changeStep = function(type) {
+        if (type === 'next') {
+            setActive(active + 1);
+            onChange && onChange(active + 1);
+        } else {
+            setActive(active - 1);
+            onChange && onChange(active - 1);
+        }
+        setShowPopup(false);
+    };
+    return /*#__PURE__*/ React.createElement("div", _object_spread({
+        className: classes
+    }, rest), /*#__PURE__*/ React.createElement("div", {
+        className: "nut-tour-masked",
+        style: {
+            display: showTour ? 'block' : 'none'
+        },
+        onClick: handleClickMask
+    }), list.map(function(item, index) {
+        return /*#__PURE__*/ React.createElement("div", {
+            key: index,
+            style: {
+                height: 0
+            }
+        }, index === active && /*#__PURE__*/ React.createElement(React.Fragment, null, showTour && /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(mask ? 'nut-tour-mask' : 'nut-tour-mask nut-tour-mask-none'),
+            id: "nut-tour-popid",
+            style: maskStyle()
+        }), /*#__PURE__*/ React.createElement(Popover, {
+            visible: showPopup,
+            location: item.location || location,
+            targetId: "nut-tour-popid",
+            closeOnOutsideClick: false,
+            offset: item.popoverOffset || [
+                0,
+                12
+            ],
+            arrowOffset: item.arrowOffset || 0
+        }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null, children || /*#__PURE__*/ React.createElement(React.Fragment, null, type === 'step' && /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content"
+        }, title && /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content-top"
+        }, /*#__PURE__*/ React.createElement("div", {
+            onClick: function(e) {
+                return maskClose(e);
+            }
+        }, /*#__PURE__*/ React.createElement(Close, {
+            className: "nut-tour-content-top-close"
+        }))), /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content-inner"
+        }, item.content), /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content-bottom"
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content-bottom-init"
+        }, active + 1, "/", list.length), /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content-bottom-operate"
+        }, active !== 0 && showPrev && /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content-bottom-operate-btn",
+            onClick: function() {
+                return changeStep('prev');
+            }
+        }, prev || locale.tour.prevStepText), list.length - 1 === active && /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content-bottom-operate-btn active",
+            onClick: function(e) {
+                return maskClose(e);
+            }
+        }, complete || locale.tour.completeText), list.length - 1 !== active && /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content-bottom-operate-btn active",
+            onClick: function() {
+                return changeStep('next');
+            }
+        }, next || locale.tour.nextStepText)))), type === 'tile' && /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content nut-tour-content-tile"
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: "nut-tour-content-inner"
+        }, item.content)))))));
+    }));
+};
+Tour.displayName = 'NutTour';

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

@@ -0,0 +1,3 @@
+import { TrendArrow } from './trendarrow';
+export type { TrendArrowProps } from './trendarrow';
+export default TrendArrow;

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+.nut-trendarrow {
+  display: inline-flex;
+  align-items: center;
+  color: var(--nutui-color-title, #1a1a1a);
+  font-size: var(--nutui-trendarrow-font-size, 14px);
+}
+.nut-trendarrow-icon-before {
+  margin-right: var(--nutui-trendarrow-icon-margin, 4px);
+}
+.nut-trendarrow-icon-after {
+  margin-left: var(--nutui-trendarrow-icon-margin, 4px);
+}
+.nut-trendarrow-rate {
+  vertical-align: middle;
+  display: inline;
+}
+.nut-trendarrow .nut-icon {
+  vertical-align: middle;
+}
+
+[dir=rtl] .nut-trendarrow-icon-before,
+.nut-rtl .nut-trendarrow-icon-before {
+  margin-right: 0;
+  margin-left: var(--nutui-trendarrow-icon-margin, 4px);
+}
+[dir=rtl] .nut-trendarrow-icon-after,
+.nut-rtl .nut-trendarrow-icon-after {
+  margin-left: 0;
+  margin-right: var(--nutui-trendarrow-icon-margin, 4px);
+}

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

@@ -0,0 +1,35 @@
+.nut-trendarrow {
+  display: inline-flex;
+  align-items: center;
+  color: $color-title;
+  font-size: $trendarrow-font-size;
+
+  &-icon-before {
+    margin-right: $trendarrow-icon-margin;
+  }
+
+  &-icon-after {
+    margin-left: $trendarrow-icon-margin;
+  }
+
+  &-rate {
+    vertical-align: middle;
+    display: inline;
+  }
+
+  .nut-icon {
+    vertical-align: middle;
+  }
+}
+[dir='rtl'] .nut-trendarrow,
+.nut-rtl .nut-trendarrow {
+  &-icon-before {
+    margin-right: 0;
+    margin-left: $trendarrow-icon-margin;
+  }
+
+  &-icon-after {
+    margin-left: 0;
+    margin-right: $trendarrow-icon-margin;
+  }
+}

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

@@ -0,0 +1,60 @@
+import React, { FunctionComponent } from 'react';
+import { BasicComponent } from "../../utils/typings";
+export interface TrendArrowProps extends BasicComponent {
+    /**
+    * 数值，大于0时箭头向上，小于0时箭头向下
+    * @default -
+    */
+    value: number
+    /**
+    * 小数位精度
+    * @default 2
+    */
+    digits: number
+    /**
+    * 是否显示加减号
+    * @default false
+    */
+    symbol: boolean
+    /**
+    * 是否显示 0
+    * @default false
+    */
+    zero: boolean
+    /**
+    * 是否在数字左侧显示箭头
+    * @default false
+    */
+    left: boolean
+    /**
+    * 文字颜色是否与箭头同步
+    * @default true
+    */
+    sync: boolean
+    /**
+    * 文字颜色
+    * @default #333333
+    */
+    color: string
+    /**
+    * 向上箭头颜色
+    * @default #FF0F23
+    */
+    riseColor: string
+    /**
+    * 向下箭头颜色
+    * @default #64b578
+    */
+    dropColor: string
+    /**
+    * 自定义向上箭头icon
+    * @default <TriangleUp/>
+    */
+    riseIcon: React.ReactNode
+    /**
+    * 自定义向下箭头icon
+    * @default <TriangleDown/>
+    */
+    dropIcon: React.ReactNode
+}
+export declare const TrendArrow: FunctionComponent<Partial<TrendArrowProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/es/packages/trendarrow/trendarrow.js

@@ -0,0 +1,89 @@
+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 React, { useRef } from "react";
+import { TriangleDown, TriangleUp } from "@nutui/icons-react";
+import { ComponentDefaults } from "../../utils/typings";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    value: 0,
+    digits: 2,
+    symbol: false,
+    zero: false,
+    left: false,
+    sync: true,
+    color: '',
+    riseColor: 'var(--nutui-brand-6)',
+    dropColor: 'var(--nutui-secondary-1)',
+    riseIcon: null,
+    dropIcon: null
+});
+export var TrendArrow = function(props) {
+    var _ref = _object_spread({}, defaultProps, props), value = _ref.value, digits = _ref.digits, symbol = _ref.symbol, zero = _ref.zero, left = _ref.left, sync = _ref.sync, color = _ref.color, riseColor = _ref.riseColor, dropColor = _ref.dropColor, riseIcon = _ref.riseIcon, dropIcon = _ref.dropIcon, className = _ref.className, style = _ref.style, children = _ref.children, rest = _object_without_properties(_ref, [
+        "value",
+        "digits",
+        "symbol",
+        "zero",
+        "left",
+        "sync",
+        "color",
+        "riseColor",
+        "dropColor",
+        "riseIcon",
+        "dropIcon",
+        "className",
+        "style",
+        "children"
+    ]);
+    var classPrefix = 'nut-trendarrow';
+    var rateTrend = useRef(value > 0);
+    var myFixed = function(num) {
+        var digit = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 2;
+        if (Object.is(parseFloat(num), NaN)) {
+            return console.warn("传入的值：".concat(num, "不是一个数字"));
+        }
+        num = parseFloat(num);
+        // eslint-disable-next-line no-restricted-properties
+        var numPow = Math.pow(10, digit);
+        return (Math.round((num + Number.EPSILON) * numPow) / numPow).toFixed(digit);
+    };
+    var calcStyle = function() {
+        var arrowColor = rateTrend.current ? riseColor : dropColor;
+        var textEquArrowColor = sync ? arrowColor : color;
+        var style = {
+            color: value === 0 ? color : textEquArrowColor
+        };
+        return style;
+    }();
+    var calcRate = function() {
+        rateTrend.current = value > 0;
+        var absRate = Math.abs(value);
+        if (!zero && value === 0) {
+            return '--';
+        }
+        var resultRate = "".concat(// eslint-disable-next-line no-nested-ternary
+        symbol && value !== 0 ? rateTrend.current ? '+' : '-' : '').concat(myFixed(Number(absRate), digits), "%");
+        return resultRate;
+    }();
+    var calcIconProps = function() {
+        var iconProps = {
+            color: rateTrend.current ? riseColor : dropColor
+        };
+        return iconProps;
+    }();
+    var renderContent = function(left) {
+        var classNameSuffix = !left ? 'icon-after' : 'icon-before';
+        return /*#__PURE__*/ React.createElement("span", {
+            className: "".concat(classPrefix, "-").concat(classNameSuffix, " ").concat(classPrefix, "-value"),
+            style: calcStyle
+        }, calcRate);
+    };
+    return /*#__PURE__*/ React.createElement("div", _object_spread({
+        className: "".concat(classPrefix, " ").concat(className),
+        style: style
+    }, rest), !left && renderContent(!left), Number(value) !== 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, rateTrend.current ? /*#__PURE__*/ React.createElement(React.Fragment, null, riseIcon || /*#__PURE__*/ React.createElement(TriangleUp, {
+        color: calcIconProps.color
+    })) : /*#__PURE__*/ React.createElement(React.Fragment, null, dropIcon || /*#__PURE__*/ React.createElement(TriangleDown, {
+        color: calcIconProps.color
+    }))), left && renderContent(!left));
+};
+TrendArrow.displayName = 'NutTrendArrow';

package/dist/es/packages/uploader/file-item.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+export declare class FileItem {
+    status: FileItemStatus;
+    message: string;
+    uid: string;
+    name?: string;
+    url?: string;
+    type?: string;
+    path?: string;
+    percentage?: string | number;
+    formData?: FormData;
+    responseText?: string;
+    loadingIcon?: ReactNode;
+    failIcon?: ReactNode;
+}
+export type FileItemStatus = 'ready' | 'uploading' | 'success' | 'error' | 'removed';
+export type FileType<T> = {
+    [key: string]: T;
+};

package/dist/es/packages/uploader/file-item.js

@@ -0,0 +1,18 @@
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+export var FileItem = function FileItem() {
+    "use strict";
+    _class_call_check(this, FileItem);
+    _define_property(this, "status", 'ready');
+    _define_property(this, "message", '');
+    _define_property(this, "uid", new Date().getTime().toString());
+    _define_property(this, "name", void 0);
+    _define_property(this, "url", void 0);
+    _define_property(this, "type", void 0);
+    _define_property(this, "path", void 0);
+    _define_property(this, "percentage", 0);
+    _define_property(this, "formData", {});
+    _define_property(this, "responseText", void 0);
+    _define_property(this, "loadingIcon", void 0);
+    _define_property(this, "failIcon", void 0);
+};

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

@@ -0,0 +1,4 @@
+import { Uploader } from './uploader';
+export type { UploaderProps } from './uploader';
+export type { FileType, FileItem, FileItemStatus } from './file-item';
+export default Uploader;

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

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

package/dist/es/packages/uploader/preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Preview: React.FunctionComponent<any>;