@nutui/nutui-react-taro 2.3.12 → 2.4.1-beta.0

package/dist/esm/avatarcropper.taro-DiWH95bY.js

@@ -0,0 +1,425 @@
+import { _ as __rest, a as __awaiter } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useState, useMemo, useEffect, useCallback } from "react";
+import Taro, { useReady, createSelectorQuery } from "@tarojs/taro";
+import classNames from "classnames";
+import { Canvas } from "@tarojs/components";
+import { B as Button } from "./button.taro-GziP0wPi.js";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { u as useTouch } from "./use-touch-OfEaR5qi.js";
+import { p as preventDefault, c as clamp } from "./index-DeNfBlua.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { maxZoom: 3, space: 10, toolbar: [
+  React__default.createElement(Button, { type: "danger", key: "cancel" }, "取消"),
+  React__default.createElement(Button, { key: "reset" }, "重置"),
+  React__default.createElement(Button, { key: "rotate" }, "旋转"),
+  React__default.createElement(Button, { type: "success", key: "confirm" }, "确认")
+], toolbarPosition: "bottom", editText: "编辑", sizeType: ["original", "compressed"], sourceType: ["album", "camera"], shape: "square" });
+const classPrefix = `nut-avatar-cropper`;
+const AvatarCropper = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, toolbar, maxZoom, space, toolbarPosition, editText, sizeType, sourceType, shape, className, style, onConfirm, onCancel } = _a, rest = __rest(_a, ["children", "toolbar", "maxZoom", "space", "toolbarPosition", "editText", "sizeType", "sourceType", "shape", "className", "style", "onConfirm", "onCancel"]);
+  const cls = classNames(classPrefix, "taro", className, shape === "round" && "round");
+  const toolbarPositionCls = classNames(`${classPrefix}-popup-toolbar`, toolbarPosition);
+  const [visible, setVisible] = useState(false);
+  const [moving, setMoving] = useState(false);
+  const [zooming, setZooming] = useState(false);
+  const systemInfo = Taro.getSystemInfoSync();
+  const showAlipayCanvas2D = useMemo(() => {
+    return Taro.getEnv() === "ALIPAY" && parseInt(Taro.SDKVersion.replace(/\./g, "")) >= 270;
+  }, []);
+  const showPixelRatio = Taro.getEnv() === "WEB" || showAlipayCanvas2D;
+  const pixelRatio = showPixelRatio ? systemInfo.pixelRatio : 1;
+  const [state, setState] = useState({
+    defScale: 1,
+    scale: 1,
+    angle: 0,
+    moveX: 0,
+    moveY: 0,
+    displayWidth: systemInfo.windowWidth * pixelRatio,
+    displayHeight: systemInfo.windowHeight * pixelRatio,
+    cropperWidth: systemInfo.windowWidth * pixelRatio - space * pixelRatio * 2,
+    cropperHeight: systemInfo.windowWidth * pixelRatio - space * pixelRatio * 2
+  });
+  const defDrawImage = {
+    src: "",
+    // 规定要使用的图像
+    x: 0,
+    // 在画布上x的坐标位置
+    y: 0,
+    // 在画布上y的坐标位置
+    width: 0,
+    // 要使用的图像的宽度
+    height: 0
+    // 要使用的图像的高度
+  };
+  const [drawImage, setDrawImg] = useState(Object.assign({}, defDrawImage));
+  const [canvasAll, setCanvasAll] = useState({
+    canvasId: `canvas-${Date.now()}`,
+    cropperCanvas: null,
+    cropperCanvasContext: null
+  });
+  useReady(() => {
+    if (showAlipayCanvas2D) {
+      const { canvasId } = canvasAll;
+      createSelectorQuery().select(`#${canvasId}`).node(({ node: canvas }) => {
+        canvas.width = state.displayWidth;
+        canvas.height = state.displayHeight;
+        setCanvasAll(Object.assign(Object.assign({}, canvasAll), { cropperCanvas: canvas }));
+      }).exec();
+    }
+  });
+  useEffect(() => {
+    setCanvasAll(Object.assign(Object.assign({}, canvasAll), { cropperCanvasContext: Taro.createCanvasContext(canvasAll.canvasId) }));
+  }, []);
+  const touch = useTouch();
+  const highlightStyle = useMemo(() => {
+    const width = `${state.cropperWidth / pixelRatio}px`;
+    const height = width;
+    return {
+      width,
+      height,
+      borderRadius: shape === "round" ? "50%" : ""
+    };
+  }, [pixelRatio, state.cropperWidth]);
+  const isAngle = useMemo(() => {
+    return state.angle === 90 || state.angle === 270;
+  }, [state.angle]);
+  const canvasStyle = useMemo(() => {
+    return {
+      width: `${state.displayWidth / pixelRatio}px`,
+      height: `${state.displayHeight / pixelRatio}px`
+    };
+  }, [pixelRatio, state.displayHeight, state.displayWidth]);
+  const maxMoveX = useMemo(() => {
+    const { displayWidth, scale, cropperWidth } = state;
+    if (isAngle) {
+      return Math.max(0, (drawImage.height * scale - cropperWidth) / 2);
+    }
+    return Math.max(0, (displayWidth * scale - cropperWidth) / 2);
+  }, [drawImage.height, isAngle, state]);
+  const maxMoveY = useMemo(() => {
+    const { displayWidth, scale, cropperWidth } = state;
+    if (isAngle) {
+      return Math.max(0, (displayWidth * scale - cropperWidth) / 2);
+    }
+    return Math.max(0, (drawImage.height * scale - cropperWidth) / 2);
+  }, [drawImage.height, isAngle, state]);
+  const dataURLToImage = (dataURL) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.src = dataURL;
+    });
+  };
+  const dataURLToCanvasImage = (canvas, dataURL) => {
+    return new Promise((resolve) => {
+      const img = canvas.createImage();
+      img.onload = () => resolve(img);
+      img.src = dataURL;
+    });
+  };
+  const canvas2dDraw = useCallback((ctx) => {
+    const { src, width, height, x, y } = drawImage;
+    if (!ctx || !src)
+      return;
+    const { moveX, moveY, scale, angle, displayWidth, displayHeight, cropperWidth } = state;
+    ctx.clearRect(0, 0, displayWidth, displayHeight);
+    ctx.fillStyle = "#666";
+    ctx.fillRect(0, 0, displayWidth, displayHeight);
+    ctx.fillStyle = "#000";
+    ctx.fillRect(space * pixelRatio, (displayHeight - cropperWidth) / 2, cropperWidth, cropperWidth);
+    ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
+    ctx.rotate(Math.PI / 180 * angle);
+    ctx.scale(scale, scale);
+    ctx.drawImage(src, x, y, width, height);
+  }, [drawImage, state]);
+  const webDraw = useCallback(() => {
+    const canvasDom = document.getElementById(canvasAll.canvasId);
+    let canvas = canvasDom;
+    if ((canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.tagName) !== "CANVAS") {
+      canvas = canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.getElementsByTagName("canvas")[0];
+    }
+    canvas.width = state.displayWidth;
+    canvas.height = state.displayHeight;
+    const ctx = canvas.getContext("2d");
+    canvas2dDraw(ctx);
+  }, [canvas2dDraw]);
+  const alipayDraw = useCallback(() => {
+    const ctx = canvasAll.cropperCanvas.getContext("2d");
+    ctx && ctx.resetTransform();
+    canvas2dDraw(ctx);
+  }, [canvas2dDraw, canvasAll.cropperCanvas]);
+  const draw = useCallback(() => {
+    if (Taro.getEnv() === "WEB") {
+      webDraw();
+      return;
+    }
+    if (showAlipayCanvas2D) {
+      alipayDraw();
+      return;
+    }
+    const { src, width, height, x, y } = drawImage;
+    const { moveX, moveY, scale, angle, displayWidth, displayHeight, cropperWidth } = state;
+    const { cropperCanvasContext } = canvasAll;
+    const ctx = cropperCanvasContext;
+    if (!ctx)
+      return;
+    ctx.clearRect(0, 0, displayWidth, displayHeight);
+    ctx.fillStyle = "#666";
+    ctx.setFillStyle("#666");
+    ctx.fillRect(0, 0, displayWidth, displayHeight);
+    ctx.stroke();
+    ctx.fill();
+    ctx.fillStyle = "#000";
+    ctx.setFillStyle("#000");
+    ctx.fillRect(space, (displayHeight - cropperWidth) / 2, cropperWidth, cropperWidth);
+    ctx.stroke();
+    ctx.fill();
+    ctx.translate(displayWidth / 2 + moveX, displayHeight / 2 + moveY);
+    ctx.rotate(Math.PI / 180 * angle);
+    ctx.scale(scale, scale);
+    ctx.drawImage(src, x, y, width, height);
+    ctx.draw();
+  }, [drawImage, state.scale, state.angle, state.moveX, state.moveY]);
+  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 setDrawImgInfo = (image) => __awaiter(void 0, void 0, void 0, function* () {
+    const { displayWidth, cropperWidth } = state;
+    const copyDrawImg = Object.assign({}, defDrawImage);
+    const { width: imgWidth, height: imgHeight } = image;
+    copyDrawImg.src = image.path;
+    if (Taro.getEnv() === "WEB") {
+      copyDrawImg.src = yield dataURLToImage(image.path);
+    }
+    if (showAlipayCanvas2D) {
+      copyDrawImg.src = yield dataURLToCanvasImage(canvasAll.cropperCanvas, image.path);
+    }
+    const isPortrait = imgHeight > imgWidth;
+    const rate = isPortrait ? imgWidth / imgHeight : imgHeight / imgWidth;
+    copyDrawImg.width = displayWidth;
+    copyDrawImg.height = isPortrait ? displayWidth / rate : displayWidth * rate;
+    copyDrawImg.x = -copyDrawImg.width / 2;
+    copyDrawImg.y = -copyDrawImg.height / 2;
+    setDrawImg(copyDrawImg);
+    const scale = cropperWidth / (isPortrait ? copyDrawImg.width : copyDrawImg.height);
+    setState(Object.assign(Object.assign({}, state), { defScale: scale }));
+    resetScale(scale);
+  });
+  const chooseImage = () => {
+    Taro.chooseImage({
+      count: 1,
+      // 可以指定是原图还是压缩图，默认二者都有
+      sizeType,
+      sourceType,
+      success: (res) => {
+        const { tempFiles } = res;
+        !!tempFiles.length && imageChange(tempFiles[0]);
+      }
+    });
+  };
+  const imageChange = (file) => __awaiter(void 0, void 0, void 0, function* () {
+    Taro.getImageInfo({
+      src: file.path
+    }).then((res) => {
+      setVisible(true);
+      setDrawImgInfo(res);
+    });
+  });
+  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();
+    isEmit && onCancel && onCancel();
+  };
+  const confirmWEB = () => {
+    const { cropperWidth, displayHeight } = state;
+    const canvasDom = document.getElementById(canvasAll.canvasId);
+    let canvas = canvasDom;
+    if ((canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.tagName) !== "CANVAS") {
+      canvas = canvasDom === null || canvasDom === void 0 ? void 0 : canvasDom.getElementsByTagName("canvas")[0];
+    }
+    const width = cropperWidth;
+    const height = cropperWidth;
+    const croppedCanvas = document.createElement("canvas");
+    const croppedCtx = croppedCanvas.getContext("2d");
+    croppedCanvas.width = width;
+    croppedCanvas.height = height;
+    canvas && croppedCtx.drawImage(canvas, space * pixelRatio, (displayHeight - cropperWidth) / 2, width, height, 0, 0, width, height);
+    const imageDataURL = croppedCanvas.toDataURL("image/png");
+    onConfirm && onConfirm(imageDataURL);
+    cancel(false);
+  };
+  const confirmALIPAY = () => {
+    const { cropperWidth, displayHeight } = state;
+    const { cropperCanvas } = canvasAll;
+    Taro.canvasToTempFilePath({
+      canvas: cropperCanvas,
+      x: props.space,
+      y: (displayHeight - cropperWidth) / 2,
+      width: cropperWidth,
+      height: cropperWidth,
+      destWidth: cropperWidth,
+      destHeight: cropperWidth,
+      success: (res) => __awaiter(void 0, void 0, void 0, function* () {
+        const filePath = res.tempFilePath;
+        onConfirm && onConfirm(filePath);
+        cancel(false);
+      })
+    });
+  };
+  const confirm = () => {
+    if (Taro.getEnv() === "WEB") {
+      confirmWEB();
+      return;
+    }
+    if (showAlipayCanvas2D) {
+      confirmALIPAY();
+      return;
+    }
+    const { cropperWidth, displayHeight } = state;
+    const { canvasId } = canvasAll;
+    Taro.canvasToTempFilePath({
+      canvasId,
+      x: props.space,
+      y: (displayHeight - cropperWidth) / 2,
+      width: cropperWidth,
+      height: cropperWidth,
+      destWidth: cropperWidth * systemInfo.pixelRatio,
+      destHeight: cropperWidth * systemInfo.pixelRatio,
+      success: (res) => __awaiter(void 0, void 0, void 0, function* () {
+        const filePath = res.tempFilePath;
+        onConfirm && onConfirm(filePath);
+        cancel(false);
+      })
+    });
+  };
+  const ToolBar = () => {
+    const actions = [cancel, reset, rotate, confirm];
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      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 = () => {
+    const { canvasId } = canvasAll;
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        "div",
+        { className: `${classPrefix}-popup`, style: { display: visible ? "block" : "none" } },
+        React__default.createElement(Canvas, { id: canvasId, "canvas-id": canvasId, type: showAlipayCanvas2D ? "2d" : void 0, style: canvasStyle, 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("div", { className: "nut-avatar-cropper-edit-text", onClick: chooseImage }, editText)
+    ),
+    CropperPopup()
+  );
+};
+AvatarCropper.defaultProps = defaultProps;
+AvatarCropper.displayName = "NutAvatarCropper";
+export {
+  AvatarCropper as A
+};

package/dist/esm/badge.taro-B0spW6jr.js

@@ -0,0 +1,68 @@
+import React__default from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+import { a as useRtl } from "./configprovider.taro-CyU_tvNJ.js";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { value: "", dot: false, max: 99, top: "4", right: "8", color: "", fill: "solid" });
+const Badge = (props) => {
+  var _a;
+  const rtl = useRtl();
+  const { className, style, value, max, children, dot, top, right, color, fill } = Object.assign(Object.assign({}, defaultProps), props);
+  const classPrefix = "nut-badge";
+  const classes = classNames(classPrefix, className, {
+    [`${classPrefix}-${fill}`]: fill === "outline"
+  });
+  function content() {
+    if (dot || typeof value === "object" || value === 0)
+      return null;
+    if (typeof value === "number" && typeof max === "number") {
+      return max < value ? `${max}+` : `${value}`;
+    }
+    return value;
+  }
+  function isIcon() {
+    if (typeof value === "object" && value)
+      return value;
+  }
+  function isNumber() {
+    if (typeof value === "number" && value)
+      return value;
+  }
+  function isString() {
+    if (typeof value === "string" && value)
+      return value;
+  }
+  const contentClasses = classNames({ [`${classPrefix}-dot`]: dot }, `${classPrefix}-content`, { [`${classPrefix}-sup`]: isNumber() || isString() || dot }, {
+    [`${classPrefix}-one`]: typeof content() === "string" && ((_a = `${content()}`) === null || _a === void 0 ? void 0 : _a.length) === 1
+  });
+  const getStyle = () => {
+    const style2 = {};
+    style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
+    const dir = rtl ? "left" : "right";
+    style2[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`;
+    if (color) {
+      if (fill === "outline") {
+        style2.color = color;
+        style2.background = "#fff";
+        if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
+          style2.border = `1px solid ${color}`;
+        }
+      } else {
+        style2.color = "#fff";
+        style2.background = color;
+      }
+    }
+    return style2;
+  };
+  return React__default.createElement(
+    "div",
+    { className: classes, style },
+    isIcon() && React__default.createElement("div", { className: `${classPrefix}-icon` }, value),
+    children,
+    !isIcon() && React__default.createElement("div", { className: contentClasses, style: getStyle() }, content())
+  );
+};
+Badge.defaultProps = defaultProps;
+Badge.displayName = "NutBadge";
+export {
+  Badge as B
+};

package/dist/esm/button.taro-GziP0wPi.js

@@ -0,0 +1,63 @@
+import { _ as __rest } from "./tslib.es6-BZ8i9Q6l.js";
+import React__default, { useCallback } from "react";
+import classNames from "classnames";
+import { Loading } from "@nutui/icons-react-taro";
+import { getEnv } from "@tarojs/taro";
+import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
+const prefixCls = "nut-button";
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { color: "", type: "default", size: "normal", shape: "round", fill: "outline", loading: false, disabled: false, block: false, icon: null, rightIcon: null, onClick: (e) => {
+} });
+const Button = React__default.forwardRef((props, ref) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { color, shape, fill, loading, disabled, type, size, block, icon, rightIcon, children, className, style, onClick } = _a, rest = __rest(_a, ["color", "shape", "fill", "loading", "disabled", "type", "size", "block", "icon", "rightIcon", "children", "className", "style", "onClick"]);
+  const getStyle = useCallback(() => {
+    const style2 = {};
+    if (props.color) {
+      if (props.fill && (props.fill === "outline" || props.fill === "dashed")) {
+        style2.color = color;
+        style2.background = "#fff";
+        if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
+          style2.borderColor = color;
+        }
+      } else {
+        style2.color = "#fff";
+        style2.background = color;
+      }
+    }
+    return style2;
+  }, [color]);
+  const handleClick = (e) => {
+    if (!loading && !disabled && onClick) {
+      onClick(e);
+    }
+  };
+  if (getEnv() === "WEB") {
+    rest.type = rest.formType;
+  }
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    // eslint-disable-next-line react/button-has-type
+    React__default.createElement(
+      "button",
+      Object.assign({}, rest, { ref, className: classNames(prefixCls, `${prefixCls}-${type}`, props.fill ? `${prefixCls}-${fill}` : null, children ? "" : `${prefixCls}-icononly`, {
+        [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-${shape}`]: shape,
+        [`${prefixCls}-block`]: block,
+        [`${prefixCls}-disabled`]: disabled || loading,
+        [`${prefixCls}-loading`]: loading
+      }, className), style: Object.assign(Object.assign({}, getStyle()), style), onClick: (e) => handleClick(e) }),
+      React__default.createElement(
+        "div",
+        { className: "nut-button-wrap" },
+        loading && React__default.createElement(Loading, { className: "nut-icon-loading" }),
+        !loading && icon ? icon : null,
+        children && React__default.createElement("div", { className: `${icon || loading ? "nut-button-text" : ""}${rightIcon ? " nut-button-text right" : ""}` }, children),
+        rightIcon || null
+      )
+    )
+  );
+});
+Button.displayName = "NutButton";
+export {
+  Button as B
+};