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

package/dist/esm/Audio.js

@@ -1,184 +0,0 @@
-import { _ as __rest } from "./tslib.es6.js";
-import React__default, { useState, useRef, useEffect } from "react";
-import { Service } from "@nutui/icons-react";
-import classNames from "classnames";
-import Range__default from "./Range.js";
-import Button__default from "./Button.js";
-import { useConfig } from "./ConfigProvider.js";
-import { C as ComponentDefaults } from "./typings.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { src: "", muted: false, autoPlay: false, loop: false, preload: "auto", type: "progress", onBack: (e) => {
-}, onForward: (e) => {
-}, onPause: (e) => {
-}, onEnd: (e) => {
-}, onMute: (e) => {
-}, onCanPlay: (e) => {
-} });
-const Audio = (props) => {
-  const { locale } = useConfig();
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { className, src, style, muted, autoPlay, loop, preload, type, onBack, onForward, onPause, onEnd, onMute, onCanPlay, children } = _a, rest = __rest(_a, ["className", "src", "style", "muted", "autoPlay", "loop", "preload", "type", "onBack", "onForward", "onPause", "onEnd", "onMute", "onCanPlay", "children"]);
-  const [playing, setPlaying] = useState(false);
-  const [percent, setPercent] = useState(0);
-  const [isCanPlay, setIsCanPlay] = useState(false);
-  const [currentDuration, setCurrentDuration] = useState("00:00:00");
-  const AudioRef = useRef(null);
-  const statusRef = useRef({
-    currentTime: 0,
-    currentDuration: "00:00:00",
-    percent: 0,
-    duration: "00:00:00",
-    second: 0,
-    hanMuted: muted,
-    playing: autoPlay,
-    handPlaying: false
-  });
-  const classPrefix = "nut-audio";
-  const handleEnded = (e) => {
-    if (loop) {
-      console.warn(locale.audio.tips || "onPlayEnd事件在loop=false时才会触发");
-    } else {
-      onEnd === null || onEnd === void 0 ? void 0 : onEnd(e);
-    }
-  };
-  function watch() {
-    if (AudioRef && AudioRef.current) {
-      const current = AudioRef.current;
-      current.addEventListener("play", () => {
-        setPlaying(true);
-      });
-    }
-  }
-  useEffect(() => {
-    watch();
-  }, []);
-  useEffect(() => {
-  }, [currentDuration]);
-  const handleStatusChange = () => {
-    setPlaying(!playing);
-    if (playing) {
-      AudioRef && AudioRef.current && AudioRef.current.pause();
-    } else {
-      AudioRef && AudioRef.current && AudioRef.current.play();
-    }
-  };
-  const renderIcon = () => {
-    return React__default.createElement(
-      "div",
-      { className: `${classPrefix}-icon` },
-      React__default.createElement(
-        "div",
-        { className: classNames(`${classPrefix}-icon-box`, playing ? `${classPrefix}-icon-play` : `${classPrefix}-icon-stop`), onClick: handleStatusChange },
-        React__default.createElement(Service, { className: playing ? "nut-icon-loading" : "" })
-      )
-    );
-  };
-  const handleBack = () => {
-    if (statusRef.current.currentTime > 0 && AudioRef.current) {
-      statusRef.current.currentTime--;
-      AudioRef.current.currentTime = statusRef.current.currentTime;
-      onBack === null || onBack === void 0 ? void 0 : onBack(AudioRef.current);
-    }
-  };
-  const handleForward = () => {
-    if (AudioRef.current) {
-      statusRef.current.currentTime++;
-      AudioRef.current.currentTime = statusRef.current.currentTime;
-      onForward === null || onForward === void 0 ? void 0 : onForward(AudioRef.current);
-    }
-  };
-  const handleMute = () => {
-    if (AudioRef.current) {
-      AudioRef.current.muted = !AudioRef.current.muted;
-      onMute === null || onMute === void 0 ? void 0 : onMute(AudioRef.current);
-    }
-  };
-  const handlePause = (e) => {
-    setPlaying(false);
-    onPause === null || onPause === void 0 ? void 0 : onPause(e);
-  };
-  const formatSeconds = (value) => {
-    if (!value) {
-      return "00:00:00";
-    }
-    const time = parseInt(value);
-    const hours = Math.floor(time / 3600);
-    const minutes = Math.floor((time - hours * 3600) / 60);
-    const seconds = time - hours * 3600 - minutes * 60;
-    let result = "";
-    result += `${`0${hours.toString()}`.slice(-2)}:`;
-    result += `${`0${minutes.toString()}`.slice(-2)}:`;
-    result += `0${seconds.toString()}`.slice(-2);
-    return result;
-  };
-  const renderProgerss = () => {
-    return React__default.createElement(
-      React__default.Fragment,
-      null,
-      React__default.createElement(
-        "div",
-        { className: `${classPrefix}-progress` },
-        React__default.createElement("div", { className: "time" }, currentDuration),
-        React__default.createElement(
-          "div",
-          { className: `${classPrefix}-progress-bar-wrapper` },
-          React__default.createElement(Range__default, { value: percent, onChange: (val) => setPercent(val), currentDescription: null, maxDescription: null, minDescription: null, "inactive-color": "#cccccc", "active-color": "#fa2c19" })
-        ),
-        React__default.createElement("div", { className: "time" }, AudioRef.current ? formatSeconds(`${statusRef.current.second}`) : "00:00:00")
-      ),
-      React__default.createElement(
-        "div",
-        { className: isCanPlay ? "custom-button-group" : "custom-button-group-disable" },
-        React__default.createElement(Button__default, { type: "primary", size: "small", className: "back", onClick: handleBack }, locale.audio.back || "快退"),
-        React__default.createElement(Button__default, { type: "primary", size: "small", className: "start", onClick: handleStatusChange }, playing ? `${locale.audio.pause || "暂停"}` : `${locale.audio.start || "开始"}`),
-        React__default.createElement(Button__default, { type: "primary", size: "small", onClick: handleForward }, locale.audio.forward || "快进"),
-        React__default.createElement(Button__default, { type: AudioRef.current && AudioRef.current.muted ? "default" : "primary", size: "small", onClick: handleMute }, locale.audio.mute || "静音")
-      )
-    );
-  };
-  const renderNone = () => {
-    return React__default.createElement("div", { className: `${classPrefix}-none-container`, onClick: handleStatusChange }, children);
-  };
-  const renderAudio = () => {
-    switch (type) {
-      case "icon":
-        return renderIcon();
-      case "progress":
-        return renderProgerss();
-      case "none":
-        return renderNone();
-      default:
-        return null;
-    }
-  };
-  const handleCanplay = (e) => {
-    setIsCanPlay(true);
-    if (autoPlay && !playing) {
-      AudioRef && AudioRef.current && AudioRef.current.play();
-    }
-    if (AudioRef.current) {
-      statusRef.current.second = AudioRef.current.duration || 0;
-      onCanPlay === null || onCanPlay === void 0 ? void 0 : onCanPlay(e);
-    }
-  };
-  const onTimeupdate = (e) => {
-    const time = parseInt(String(e.target.currentTime));
-    const formated = formatSeconds(`${time}`);
-    statusRef.current.currentDuration = formated;
-    setPercent(time / statusRef.current.second * 100);
-    setCurrentDuration(formated);
-    statusRef.current.currentTime = time;
-  };
-  return React__default.createElement(
-    "div",
-    Object.assign({ className: classNames(classPrefix, className), style }, rest),
-    renderAudio(),
-    React__default.createElement(
-      "audio",
-      { className: "audioMain", controls: type === "controls", ref: AudioRef, src, muted, preload, loop, onPause: (e) => handlePause(e), onEnded: (e) => handleEnded(e), onCanPlay: (e) => handleCanplay(e), onTimeUpdate: (e) => onTimeupdate(e) },
-      React__default.createElement("track", { kind: "captions" })
-    )
-  );
-};
-Audio.displayName = "NutAudio";
-export {
-  Audio as default
-};

package/dist/esm/Avatar/style/index.js

@@ -1,3 +0,0 @@
-import '../../AvatarGroup/style'
-import '../../Image/style'
-import '../../../packages/avatar/avatar.scss'

package/dist/esm/Avatar/style/style.css

@@ -1 +0,0 @@
-.nut-avatar-group{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto}.nut-avatar-group .nut-avatar{border:1px solid #fff}.nut-avatar-group .nut-avatar:not(:first-of-type){margin-left:-8px}[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type){margin-left:0;margin-right:-8px}.nut-image{display:block;position:relative}.nut-image .nut-img{display:block;width:100%;height:100%}.nut-image.nut-image-round{border-radius:50%;overflow:hidden}.nut-image .nut-img-loading,.nut-image .nut-img-error{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--nutui-gray-3, #f6f6f6);background-size:100% 100%}[dir=rtl] .nut-image .nut-img-loading,.nut-rtl .nut-image .nut-img-loading,[dir=rtl] .nut-image .nut-img-error,.nut-rtl .nut-image .nut-img-error{left:auto;right:0}.nut-avatar{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto;text-align:center}.nut-avatar .avatar-img{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);flex-shrink:0}.nut-avatar .icon{background-size:100% 100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nut-avatar .nut-icon-img{width:100%;height:100%}.nut-avatar .text{display:inline-block;width:100%;height:100%;text-align:center;overflow:hidden}[dir=rtl] .nut-avatar .avatar-img,.nut-rtl .nut-avatar .avatar-img,[dir=rtl] .nut-avatar .icon,.nut-rtl .nut-avatar .icon{left:auto;right:50%;transform:translate(50%,-50%)}.nut-avatar-large{width:var(--nutui-avatar-large-width, 60px);height:var(--nutui-avatar-large-height, 60px);line-height:var(--nutui-avatar-large-height, 60px)}.nut-avatar-small{width:var(--nutui-avatar-small-width, 32px);height:var(--nutui-avatar-small-height, 32px);line-height:var(--nutui-avatar-small-height, 32px)}.nut-avatar-normal{width:var(--nutui-avatar-normal-width, 40px);height:var(--nutui-avatar-normal-height, 40px);line-height:var(--nutui-avatar-normal-height, 40px)}.nut-avatar-round{border-radius:50%;overflow:hidden}.nut-avatar-square{border-radius:var(--nutui-avatar-square, 5px)}

package/dist/esm/Avatar.js

@@ -1,75 +0,0 @@
-import { _ as __rest } from "./tslib.es6.js";
-import React__default, { useState, useRef, useContext, useCallback, useEffect } from "react";
-import classNames from "classnames";
-import { User } from "@nutui/icons-react";
-import { A as AvatarContext } from "./context2.js";
-import Image__default from "./Image.js";
-import { C as ComponentDefaults } from "./typings.js";
-import AvatarGroup__default from "./AvatarGroup.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { size: "", shape: "round", icon: "", background: "#eee", color: "#666", fit: "cover", src: "", alt: "" });
-const classPrefix = `nut-avatar`;
-const Avatar = (props) => {
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, size, shape, background, color, src, alt, icon, fit, className, style, onClick, onError } = _a, rest = __rest(_a, ["children", "size", "shape", "background", "color", "src", "alt", "icon", "fit", "className", "style", "onClick", "onError"]);
-  const [maxSum, setMaxSum] = useState(0);
-  const [showMax, setShowMax] = useState(false);
-  const [avatarIndex, setAvatarIndex] = useState(1);
-  const avatarRef = useRef(null);
-  const parent = useContext(AvatarContext);
-  const sizeValue = ["large", "normal", "small"];
-  const { propAvatarGroup, avatarGroupRef } = parent;
-  const classes = classNames({
-    [`nut-avatar-${(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.size) || size || "normal"}`]: true,
-    [`nut-avatar-${(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.shape) || shape}`]: true
-  });
-  const cls = classNames(classPrefix, classes, className);
-  const styles = Object.assign({ width: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, height: sizeValue.indexOf(size) > -1 ? "" : `${size}px`, backgroundColor: `${background}`, color, marginLeft: avatarIndex !== 1 && (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap) ? `${propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.gap}px` : "", zIndex: (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.level) === "right" ? `${Math.abs(maxSum - avatarIndex)}` : "" }, style);
-  const maxStyles = {
-    backgroundColor: `${propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxBackground}`,
-    color: `${propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxColor}`
-  };
-  const avatarLength = useCallback((children2) => {
-    var _a2, _b;
-    for (let i = 0; i < children2.length; i++) {
-      if (children2[i] && children2[i].classList && children2[i].classList[0] === "nut-avatar") {
-        children2[i].setAttribute("data-index", i + 1);
-      }
-    }
-    const index = Number((_b = (_a2 = avatarRef.current) === null || _a2 === void 0 ? void 0 : _a2.dataset) === null || _b === void 0 ? void 0 : _b.index);
-    const maxCount = propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max;
-    setMaxSum(children2.length);
-    setAvatarIndex(index);
-    if (index === children2.length && index !== maxCount && children2.length > maxCount) {
-      setShowMax(true);
-    }
-  }, [propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max]);
-  useEffect(() => {
-    const avatarChildren = avatarGroupRef === null || avatarGroupRef === void 0 ? void 0 : avatarGroupRef.current.children;
-    if (avatarChildren) {
-      avatarLength(avatarChildren);
-    }
-  }, [avatarLength, avatarGroupRef]);
-  const errorEvent = () => {
-    onError && onError();
-  };
-  const clickAvatar = (e) => {
-    onClick && onClick(e);
-  };
-  return React__default.createElement(React__default.Fragment, null, (showMax || !(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && React__default.createElement(
-    "div",
-    Object.assign({ className: cls }, rest, { style: !showMax ? styles : maxStyles, onClick: clickAvatar, ref: avatarRef }),
-    (!(propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || avatarIndex <= (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max)) && React__default.createElement(
-      React__default.Fragment,
-      null,
-      src && React__default.createElement(Image__default, { className: "avatar-img", src, alt, style: { objectFit: fit }, onError: errorEvent }),
-      React__default.isValidElement(icon) ? React__default.cloneElement(icon, Object.assign(Object.assign({}, icon.props), { className: `${icon.props.className || ""} icon` })) : null,
-      children && React__default.createElement("span", { className: "text" }, children),
-      !src && !icon && !children && React__default.createElement(User, { className: "icon" })
-    ),
-    showMax && React__default.createElement("div", { className: "text" }, (propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent) ? propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.maxContent : `+ ${avatarIndex - Number((propAvatarGroup === null || propAvatarGroup === void 0 ? void 0 : propAvatarGroup.max) || 0)}`)
-  ));
-};
-Avatar.displayName = "NutAvatar";
-Avatar.Group = AvatarGroup__default;
-export {
-  Avatar as default
-};

package/dist/esm/AvatarCropper/style/index.js

@@ -1,2 +0,0 @@
-
-import '../../../packages/avatarcropper/avatarcropper.scss'

package/dist/esm/AvatarCropper/style/style.css

@@ -1 +0,0 @@
-.nut-avatar-cropper{position:relative;display:flex}.nut-avatar-cropper-edit-text{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000004d;z-index:1;color:#fff;display:flex;justify-content:center;align-items:center}.nut-avatar-cropper-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.nut-avatar-cropper-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nut-overlay-bg-color, rgba(0, 0, 0, .7));z-index:1000}.nut-avatar-cropper-popup-canvas,.nut-avatar-cropper-popup-cut-canvas{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:1}.nut-avatar-cropper-popup-cut-canvas{z-index:0}.nut-avatar-cropper-popup-toolbar{position:absolute;bottom:0;left:0;width:100%;z-index:2}.nut-avatar-cropper-popup-toolbar.top{top:0;bottom:inherit}.nut-avatar-cropper-popup-toolbar-flex{width:100%;display:flex;justify-content:space-between}.nut-avatar-cropper-popup-toolbar-item{color:#fff;padding:15px;cursor:pointer;display:flex;align-items:center}.nut-avatar-cropper-popup-toolbar-item .nut-button{color:#fff}.nut-avatar-cropper-popup-highlight{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background-color:transparent}.nut-avatar-cropper-popup-highlight .highlight{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:transparent;box-shadow:0 0 1000px 1000px #0009}.nut-avatar-cropper.round .nut-avatar-cropper-edit-text{border-radius:50%}[dir=rtl] .nut-avatar-cropper-edit-text,.nut-rtl .nut-avatar-cropper-edit-text,[dir=rtl] .nut-avatar-cropper-input,.nut-rtl .nut-avatar-cropper-input,[dir=rtl] .nut-avatar-cropper-popup,.nut-rtl .nut-avatar-cropper-popup,[dir=rtl] .nut-avatar-cropper-popup-canvas,[dir=rtl] .nut-avatar-cropper-popup-cut-canvas,.nut-rtl .nut-avatar-cropper-popup-canvas,.nut-rtl .nut-avatar-cropper-popup-cut-canvas,[dir=rtl] .nut-avatar-cropper-popup-toolbar,.nut-rtl .nut-avatar-cropper-popup-toolbar,[dir=rtl] .nut-avatar-cropper-popup-highlight,.nut-rtl .nut-avatar-cropper-popup-highlight{left:auto;right:0}[dir=rtl] .nut-avatar-cropper-popup-highlight .highlight,.nut-rtl .nut-avatar-cropper-popup-highlight .highlight{left:auto;right:50%;transform:translate(50%,-50%)}

package/dist/esm/AvatarCropper.js

@@ -1,305 +0,0 @@
-import { _ as __rest, a as __awaiter } from "./tslib.es6.js";
-import React__default, { useRef, useState, useMemo, useCallback, useEffect } from "react";
-import classNames from "classnames";
-import Button__default from "./Button.js";
-import { C as ComponentDefaults } from "./typings.js";
-import { u as useTouch } from "./use-touch.js";
-import { p as preventDefault, c as clamp } from "./index.js";
-import { g as getRect } from "./use-client-rect.js";
-import { useConfig } from "./ConfigProvider.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { maxZoom: 3, space: 10, toolbar: [
-  React__default.createElement(Button__default, { type: "danger", key: "cancel" }, "Cancel"),
-  React__default.createElement(Button__default, { key: "reset" }, "Reset"),
-  React__default.createElement(Button__default, { key: "rotate" }, "Rotate"),
-  React__default.createElement(Button__default, { type: "success", key: "confirm" }, "Confirm")
-], toolbarPosition: "bottom", editText: "Edit", shape: "square" });
-const classPrefix = `nut-avatar-cropper`;
-const AvatarCropper = (props) => {
-  const { locale } = useConfig();
-  defaultProps.toolbar = [
-    React__default.createElement(Button__default, { type: "danger", key: "cancel" }, locale.cancel),
-    React__default.createElement(Button__default, { key: "reset" }, locale.reset),
-    React__default.createElement(Button__default, { key: "rotate" }, locale.avatarCropper.rotate),
-    React__default.createElement(Button__default, { type: "success", key: "confirm" }, locale.confirm)
-  ];
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, maxZoom, space, toolbar, toolbarPosition, editText, shape, className, style, onConfirm, onCancel } = _a, rest = __rest(_a, ["children", "maxZoom", "space", "toolbar", "toolbarPosition", "editText", "shape", "className", "style", "onConfirm", "onCancel"]);
-  const cls = classNames(classPrefix, className, shape === "round" && "round");
-  const toolbarPositionCls = classNames(`${classPrefix}-popup-toolbar`, toolbarPosition);
-  const inputImageRef = useRef(null);
-  const cropperPopupRef = useRef(null);
-  const canvasRef = useRef(null);
-  const [visible, setVisible] = useState(false);
-  const [moving, setMoving] = useState(false);
-  const [zooming, setZooming] = useState(false);
-  const [state, setState] = useState({
-    defScale: 1,
-    scale: 1,
-    angle: 0,
-    moveX: 0,
-    moveY: 0,
-    displayWidth: 0,
-    displayHeight: 0
-  });
-  const defDrawImage = {
-    img: new Image(),
-    // 规定要使用的图像
-    sx: 0,
-    // 开始剪切的 x 坐标位置
-    sy: 0,
-    // 开始剪切的 y 坐标位置
-    swidth: 0,
-    // 被剪切区域的宽度
-    sheight: 0,
-    // 被剪切区域的高度
-    x: 0,
-    // 在画布上x的坐标位置
-    y: 0,
-    // 在画布上y的坐标位置
-    width: 0,
-    // 要使用的图像的宽度
-    height: 0
-    // 要使用的图像的高度
-  };
-  const [drawImage, setDrawImg] = useState(Object.assign({}, defDrawImage));
-  const devicePixelRatio = window.devicePixelRatio || 1;
-  const touch = useTouch();
-  const highlightStyle = useMemo(() => {
-    const width = `${drawImage.swidth / devicePixelRatio}px`;
-    const height = width;
-    return {
-      width,
-      height,
-      borderRadius: shape === "round" ? "50%" : ""
-    };
-  }, [devicePixelRatio, drawImage.swidth]);
-  const isAngle = useMemo(() => {
-    return state.angle === 90 || state.angle === 270;
-  }, [state.angle]);
-  const maxMoveX = useMemo(() => {
-    const { swidth, height } = drawImage;
-    if (isAngle) {
-      return Math.max(0, (height * state.scale - swidth) / 2);
-    }
-    return Math.max(0, (state.displayWidth * state.scale - swidth) / 2);
-  }, [state.scale, state.displayWidth, drawImage, isAngle]);
-  const maxMoveY = useMemo(() => {
-    const { swidth, height } = drawImage;
-    if (isAngle) {
-      return Math.max(0, (state.displayWidth * state.scale - swidth) / 2);
-    }
-    return Math.max(0, (height * state.scale - swidth) / 2);
-  }, [state.scale, state.displayWidth, drawImage, isAngle]);
-  const fileToDataURL = (file) => {
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.onloadend = (e) => resolve(e.target.result);
-      reader.readAsDataURL(file);
-    });
-  };
-  const dataURLToImage = (dataURL) => {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.onload = () => resolve(img);
-      img.src = dataURL;
-    });
-  };
-  const draw = useCallback(() => {
-    const { img, width, height, x, y, swidth } = drawImage;
-    const { moveX, moveY, scale, angle, displayWidth, displayHeight } = state;
-    const canvas = canvasRef.current;
-    if (!canvas)
-      return;
-    const ctx = canvas.getContext("2d");
-    canvas.width = displayWidth;
-    canvas.height = displayHeight;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "#666";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "#000";
-    ctx.fillRect(space * devicePixelRatio, (canvas.height - swidth) / 2, swidth, swidth);
-    ctx.translate(canvas.width / 2 + moveX, canvas.height / 2 + moveY);
-    ctx.rotate(Math.PI / 180 * angle);
-    ctx.scale(scale, scale);
-    ctx.drawImage(img, x, y, width, height);
-  }, [drawImage, state, devicePixelRatio, space]);
-  useEffect(() => {
-    if (Math.abs(state.moveX) > maxMoveX) {
-      setState(Object.assign(Object.assign({}, state), { moveX: maxMoveX }));
-    }
-    if (Math.abs(state.moveY) > maxMoveY) {
-      setState(Object.assign(Object.assign({}, state), { moveY: maxMoveY }));
-    }
-    draw();
-  }, [state, maxMoveX, maxMoveY, draw]);
-  const setDrawImgs = (image) => {
-    const rect = getRect(cropperPopupRef.current);
-    if (!rect)
-      return;
-    const { width: clientWidth, height: clientHeight } = rect;
-    const canvasWidth = state.displayWidth = clientWidth * devicePixelRatio;
-    const canvasHeight = state.displayHeight = clientHeight * devicePixelRatio;
-    const copyDrawImg = Object.assign({}, defDrawImage);
-    const { width: imgWidth, height: imgHeight } = image;
-    copyDrawImg.img = image;
-    const isPortrait = imgHeight > imgWidth;
-    const rate = isPortrait ? imgWidth / imgHeight : imgHeight / imgWidth;
-    copyDrawImg.width = canvasWidth;
-    copyDrawImg.height = isPortrait ? canvasWidth / rate : canvasWidth * rate;
-    copyDrawImg.x = -copyDrawImg.width / 2;
-    copyDrawImg.y = -copyDrawImg.height / 2;
-    copyDrawImg.swidth = canvasWidth - space * 2 * devicePixelRatio;
-    copyDrawImg.sheight = isPortrait ? copyDrawImg.swidth / rate : copyDrawImg.swidth * rate;
-    copyDrawImg.sx = space * devicePixelRatio;
-    copyDrawImg.sy = (canvasHeight - copyDrawImg.swidth) / 2;
-    setDrawImg(copyDrawImg);
-    const scale = copyDrawImg.swidth / (isPortrait ? copyDrawImg.width : copyDrawImg.height);
-    setState(Object.assign(Object.assign({}, state), { defScale: scale }));
-    resetScale(scale);
-  };
-  const inputImageChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
-    setVisible(true);
-    const $el = event.target;
-    const { files } = $el;
-    if (!(files === null || files === void 0 ? void 0 : files.length))
-      return;
-    const base64 = yield fileToDataURL(files[0]);
-    const image = yield dataURLToImage(base64);
-    setDrawImgs(image);
-  });
-  const resetScale = (scale) => {
-    setState(Object.assign(Object.assign({}, state), { moveX: 0, moveY: 0, angle: 0, scale: scale || state.defScale, defScale: scale || state.defScale }));
-  };
-  const setScale = (scale) => {
-    scale = clamp(scale, 0.3, +maxZoom + 1);
-    if (scale !== state.scale) {
-      setState(Object.assign(Object.assign({}, state), { scale }));
-    }
-  };
-  const getDistance = (touches) => Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2));
-  const [startMove, setStartMove] = useState({
-    startMoveX: 0,
-    startMoveY: 0,
-    startScale: 0,
-    startDistance: 0
-  });
-  const { startMoveX, startMoveY, startScale, startDistance } = startMove;
-  const onTouchStart = (event) => {
-    const { touches } = event;
-    const { offsetX } = touch;
-    touch.start(event);
-    const fingerNum = touches === null || touches === void 0 ? void 0 : touches.length;
-    setStartMove(Object.assign(Object.assign({}, startMove), { startMoveX: state.moveX, startMoveY: state.moveY }));
-    setMoving(fingerNum === 1);
-    setZooming(fingerNum === 2 && !offsetX.current);
-    if (fingerNum === 2 && !offsetX.current) {
-      setStartMove(Object.assign(Object.assign({}, startMove), { startScale: state.scale, startDistance: getDistance(event.touches) }));
-    }
-  };
-  const onTouchMove = (event) => {
-    const { touches } = event;
-    touch.move(event);
-    if (moving || zooming) {
-      preventDefault(event, true);
-    }
-    if (moving) {
-      const { deltaX, deltaY } = touch;
-      const moveX = deltaX.current * state.scale + startMoveX;
-      const moveY = deltaY.current * state.scale + startMoveY;
-      setState(Object.assign(Object.assign({}, state), { moveX: clamp(moveX, -maxMoveX, maxMoveX), moveY: clamp(moveY, -maxMoveY, maxMoveY) }));
-    }
-    if (zooming && touches.length === 2) {
-      const distance = getDistance(touches);
-      const scale = startScale * distance / startDistance;
-      setScale(scale);
-    }
-  };
-  const onTouchEnd = (event) => {
-    let stopPropagation = false;
-    if (moving || zooming) {
-      stopPropagation = !(moving && startMoveX === state.moveX && startMoveY === state.moveY);
-      if (!event.touches.length) {
-        if (zooming) {
-          setState(Object.assign(Object.assign({}, state), { moveX: clamp(state.moveX, -maxMoveX, maxMoveX), moveY: clamp(state.moveY, -maxMoveY, maxMoveY) }));
-          setZooming(false);
-        }
-        setMoving(false);
-        setStartMove(Object.assign(Object.assign({}, startMove), { startMoveX: 0, startMoveY: 0, startScale: state.defScale }));
-        if (state.scale < state.defScale) {
-          resetScale();
-        }
-        if (state.scale > maxZoom) {
-          setState(Object.assign(Object.assign({}, state), { scale: +maxZoom }));
-        }
-      }
-    }
-    preventDefault(event, stopPropagation);
-    touch.reset();
-  };
-  const reset = () => {
-    setState(Object.assign(Object.assign({}, state), { angle: 0 }));
-  };
-  const rotate = () => {
-    if (state.angle === 270) {
-      setState(Object.assign(Object.assign({}, state), { angle: 0 }));
-      return;
-    }
-    setState(Object.assign(Object.assign({}, state), { angle: state.angle + 90 }));
-  };
-  const cancel = (isEmit = true) => {
-    setVisible(false);
-    resetScale();
-    inputImageRef.current && (inputImageRef.current.value = "");
-    isEmit && onCancel && onCancel();
-  };
-  const confirm = () => {
-    const canvas = canvasRef.current;
-    const { sx, sy, swidth } = drawImage;
-    const width = swidth;
-    const height = swidth;
-    const croppedCanvas = document.createElement("canvas");
-    const croppedCtx = croppedCanvas.getContext("2d");
-    croppedCanvas.width = width;
-    croppedCanvas.height = height;
-    canvas && croppedCtx.drawImage(canvas, sx, sy, width, height, 0, 0, width, height);
-    const imageDataURL = croppedCanvas.toDataURL("image/png");
-    onConfirm && onConfirm(imageDataURL);
-    cancel(false);
-  };
-  const ToolBar = () => {
-    const actions = [cancel, reset, rotate, confirm];
-    return React__default.createElement("div", { className: `${classPrefix}-popup-toolbar-flex` }, actions.map((action, index) => React__default.createElement("div", { key: index, className: `${classPrefix}-popup-toolbar-item`, onClick: (_e) => action() }, toolbar[index])));
-  };
-  const CropperPopup = () => {
-    return React__default.createElement(
-      "div",
-      { ref: cropperPopupRef, className: `${classPrefix}-popup`, style: { display: visible ? "block" : "none" } },
-      React__default.createElement("canvas", { ref: canvasRef, className: `${classPrefix}-popup-canvas` }),
-      React__default.createElement(
-        "div",
-        { className: `${classPrefix}-popup-highlight`, onTouchStart, onTouchMove, onTouchEnd },
-        React__default.createElement("div", { className: "highlight", style: highlightStyle })
-      ),
-      React__default.createElement(
-        "div",
-        { className: toolbarPositionCls },
-        React__default.createElement(ToolBar, null)
-      )
-    );
-  };
-  return React__default.createElement(
-    React__default.Fragment,
-    null,
-    React__default.createElement(
-      "div",
-      Object.assign({ className: cls }, rest, { style }),
-      children,
-      React__default.createElement("input", { ref: inputImageRef, type: "file", accept: "image/*", className: `${classPrefix}-input`, onChange: (e) => inputImageChange(e), "aria-label": locale.avatarCropper.selectImage }),
-      React__default.createElement("div", { className: "nut-avatar-cropper-edit-text" }, editText)
-    ),
-    CropperPopup()
-  );
-};
-AvatarCropper.displayName = "NutAvatarCropper";
-export {
-  AvatarCropper as default
-};

package/dist/esm/AvatarGroup/style/index.js

@@ -1,2 +0,0 @@
-
-import '../../../packages/avatargroup/avatargroup.scss'

package/dist/esm/AvatarGroup/style/style.css

@@ -1 +0,0 @@
-.nut-avatar-group{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto}.nut-avatar-group .nut-avatar{border:1px solid #fff}.nut-avatar-group .nut-avatar:not(:first-of-type){margin-left:-8px}[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type){margin-left:0;margin-right:-8px}

package/dist/esm/AvatarGroup.js

@@ -1,25 +0,0 @@
-import React__default, { useRef } from "react";
-import classNames from "classnames";
-import { A as AvatarContext } from "./context2.js";
-import { C as ComponentDefaults } from "./typings.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { maxContent: "", max: "", maxBackground: "#eee", maxColor: "#666", gap: "-8", level: "left" });
-const classPrefix = `nut-avatar-group`;
-const AvatarGroup = (props) => {
-  const propAvatarGroup = Object.assign(Object.assign({}, defaultProps), props);
-  const { className, style, children } = propAvatarGroup;
-  const avatarGroupRef = useRef(null);
-  const cls = classNames(classPrefix, className);
-  const parentAvatar = {
-    propAvatarGroup,
-    avatarGroupRef
-  };
-  return React__default.createElement(
-    AvatarContext.Provider,
-    { value: parentAvatar },
-    React__default.createElement("div", { className: cls, style, ref: avatarGroupRef }, children)
-  );
-};
-AvatarGroup.displayName = "NutAvatarGroup";
-export {
-  AvatarGroup as default
-};

package/dist/esm/BackTop/style/index.js

@@ -1,2 +0,0 @@
-
-import '../../../packages/backtop/backtop.scss'

package/dist/esm/BackTop/style/style.css

@@ -1 +0,0 @@
-.nut-backtop{display:none;position:fixed}.nut-backtop.show{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--nutui-gray-1, #ffffff);color:var(--nutui-gray-7, #1a1a1a);border:1px solid var(--nutui-backtop-border-color, var(--nutui-black-3, rgba(0, 0, 0, .06)));border-radius:50%}.nut-backtop.show:active{background:var(--nutui-gray-3, #f6f6f6)}.nut-backtop-main{transition:all .2s ease-in-out;color:var(--nutui-gray-7, #1a1a1a)}