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

package/dist/esm/NoticeBar.js

@@ -1,346 +0,0 @@
-import React__default, { useRef, useState, useMemo, useEffect } from "react";
-import { Notice, Close } from "@nutui/icons-react";
-import classNames from "classnames";
-import { g as getRect } from "./use-client-rect.js";
-import { C as ComponentDefaults } from "./typings.js";
-import { useRtl } from "./ConfigProvider.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { align: "left", direction: "horizontal", list: [], duration: 1e3, height: 40, content: "", closeable: false, wrap: false, leftIcon: React__default.createElement(Notice, { width: 16, height: 16 }), rightIcon: null, right: null, delay: 1, scrollable: null, speed: 50 });
-const NoticeBar = (props) => {
-  const rtl = useRtl();
-  const { children, className, style, align, direction, list, duration, height, content, closeable, wrap, leftIcon, rightIcon, right, delay, scrollable, speed, close, click, onClose, onClick, onItemClick } = Object.assign(Object.assign({}, defaultProps), props);
-  const classPrefix = "nut-noticebar";
-  const wrapRef = useRef(null);
-  const contentRef = useRef(null);
-  const [showNoticeBar, SetShowNoticeBar] = useState(true);
-  const scrollList = useRef([]);
-  const [wrapWidth, SetWrapWidth] = useState(0);
-  const [firstRound, SetFirstRound] = useState(true);
-  const [animationDuration, SetAnimationDuration] = useState(0);
-  const [offsetWidth, SetOffsetW] = useState(0);
-  const [animationClass, SetAnimationClass] = useState("");
-  const [animate, SetAnimate] = useState(false);
-  const [timer, SetTimer] = useState(0);
-  const [isCanScroll, SetIsCanScroll] = useState(null);
-  const isVertical = direction === "vertical";
-  const [rect, setRect] = useState(null);
-  let active = 0;
-  const [ready, setReady] = useState(false);
-  const container = useRef(null);
-  const innerRef = useRef(null);
-  const swiperRef = useRef({
-    moving: false,
-    autoplayTimer: null,
-    width: 0,
-    height: 0,
-    offset: 0,
-    size: 0
-  });
-  const [childOffset, setChildOffset] = useState([]);
-  const [offset, setOffset] = useState(0);
-  const { childs, childCount } = useMemo(() => {
-    let childCount2 = 0;
-    const childs2 = React__default.Children.map(children, (child) => {
-      if (!React__default.isValidElement(child))
-        return null;
-      childCount2++;
-      return child;
-    });
-    return {
-      childs: childs2,
-      childCount: childCount2
-    };
-  }, [children]);
-  let trackSize = childCount * Number(height);
-  const minOffset = (() => {
-    if (rect) {
-      const base = isVertical ? rect.height : rect.width;
-      return base - Number(height) * childCount;
-    }
-    return 0;
-  })();
-  useEffect(() => {
-    if (isVertical) {
-      if (children) {
-        scrollList.current = [].concat(childs);
-      } else {
-        scrollList.current = [].concat(list);
-        startRollEasy();
-      }
-    } else {
-      initScrollWrap();
-    }
-    return () => {
-      clearInterval(timer);
-    };
-  }, []);
-  useEffect(() => {
-    initScrollWrap();
-  }, [content]);
-  useEffect(() => {
-    if (list && list.length) {
-      scrollList.current = [].concat(list);
-    }
-  }, [list]);
-  const initScrollWrap = (value) => {
-    if (showNoticeBar === false) {
-      return;
-    }
-    setTimeout(() => {
-      if (!wrapRef.current || !contentRef.current) {
-        return;
-      }
-      const wrapW = getRect(wrapRef.current).width;
-      const offsetW = getRect(contentRef.current).width;
-      const canScroll = align === "left" && scrollable == null ? offsetW > wrapW : scrollable;
-      SetIsCanScroll(canScroll);
-      if (canScroll) {
-        SetWrapWidth(wrapW);
-        SetOffsetW(offsetW);
-        SetAnimationDuration(offsetW / speed);
-        SetAnimationClass("play");
-      } else {
-        SetAnimationClass("");
-      }
-    }, 0);
-  };
-  const handleClick = (event) => {
-    click && click(event);
-    onClick && onClick(event);
-  };
-  const onClickIcon = (event) => {
-    event.stopPropagation();
-    SetShowNoticeBar(!closeable);
-    close && close(event);
-    onClose && onClose(event);
-  };
-  const onAnimationEnd = () => {
-    SetFirstRound(false);
-    setTimeout(() => {
-      SetAnimationDuration((offsetWidth + wrapWidth) / speed);
-      SetAnimationClass("play-infinite");
-    }, 0);
-  };
-  const time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
-  const startRollEasy = () => {
-    showhorseLamp();
-    const timerCurr = window.setInterval(showhorseLamp, time + Number(duration));
-    SetTimer(timerCurr);
-  };
-  const showhorseLamp = () => {
-    SetAnimate(true);
-    setTimeout(() => {
-      scrollList.current.push(scrollList.current[0]);
-      scrollList.current.shift();
-      SetAnimate(false);
-    }, time);
-  };
-  const handleClickIcon = (event) => {
-    event.stopPropagation();
-    SetShowNoticeBar(!closeable);
-    close && close(event);
-    onClose && onClose(event);
-  };
-  const isEllipsis = () => {
-    if (isCanScroll == null && align === "left") {
-      return wrap;
-    }
-    return !isCanScroll && !wrap;
-  };
-  const contentStyle = {
-    animationDelay: `${firstRound ? delay : 0}s`,
-    animationDuration: `${animationDuration}s`,
-    transform: `translateX(${firstRound ? 0 : `${rtl ? -wrapWidth : wrapWidth}px`})`
-  };
-  const barStyle = {
-    height: isVertical ? `${height}px` : ""
-  };
-  const duringTime = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) : ~~(height / speed / 4);
-  const noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
-  const horseLampStyle = {
-    transition: animate ? `all ${duringTime === 0 ? noDuring : duringTime}s` : "",
-    marginTop: animate ? `-${height}px` : ""
-  };
-  const init = (active2 = 0) => {
-    const rects = getRect(container === null || container === void 0 ? void 0 : container.current);
-    const _active = Math.max(Math.min(childCount - 1, active2), 0);
-    const _height = rects.height;
-    trackSize = childCount * Number(_height);
-    const targetOffset = getOffset(_active);
-    swiperRef.current.moving = true;
-    if (ready) {
-      swiperRef.current.moving = false;
-    }
-    active2 = _active;
-    setRect(rects);
-    setOffset(targetOffset);
-    setReady(true);
-  };
-  useEffect(() => {
-    if (ready) {
-      stopAutoPlay();
-      autoplay();
-    }
-    return () => {
-      setReady(false);
-    };
-  }, [ready]);
-  useEffect(() => {
-    if (isVertical && children) {
-      init();
-      stopAutoPlay();
-      autoplay();
-    }
-  }, [children, container === null || container === void 0 ? void 0 : container.current]);
-  const stopAutoPlay = () => {
-    clearTimeout(swiperRef.current.autoplayTimer);
-    swiperRef.current.autoplayTimer = null;
-  };
-  const autoplay = () => {
-    if (childCount <= 1)
-      return;
-    stopAutoPlay();
-    swiperRef.current.autoplayTimer = setTimeout(() => {
-      next();
-      autoplay();
-    }, Number(duration) + 100 * speed);
-  };
-  const move = ({ pace = 0, offset: offset2 = 0 }) => {
-    if (childCount <= 1)
-      return;
-    const targetActive = getActive(pace);
-    const targetOffset = getOffset(targetActive, offset2);
-    if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
-      const rightBound = targetOffset < minOffset;
-      childOffset[0] = rightBound ? trackSize : 0;
-    }
-    if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
-      const leftBound = targetOffset > 0;
-      childOffset[childCount - 1] = leftBound ? -trackSize : 0;
-    }
-    setChildOffset(childOffset);
-    active = targetActive;
-    setOffset(targetOffset);
-    getStyle(targetOffset);
-  };
-  const next = () => {
-    resettPosition();
-    requestFrame(() => {
-      requestFrame(() => {
-        swiperRef.current.moving = false;
-        move({
-          pace: 1
-        });
-      });
-    });
-  };
-  const handleItemClick = (event, value) => {
-    onItemClick && onItemClick(event, value);
-  };
-  const getStyle = (moveOffset = offset) => {
-    const target = innerRef.current;
-    if (!target) {
-      return;
-    }
-    let _offset = 0;
-    const val = rect.height - height;
-    _offset = moveOffset + Number(active === childCount - 1 && val / 2);
-    target.style.transitionDuration = `${swiperRef.current.moving ? 0 : duration}ms`;
-    target.style.height = `${Number(height) * childCount}px`;
-    target.style.transform = `translate3D(0,${_offset}px,0)`;
-  };
-  const itemStyle = (index) => {
-    const style2 = {};
-    if (height) {
-      style2.height = `${height}px`;
-      style2.lineHeight = `${height}px`;
-    }
-    const offset2 = childOffset[index];
-    if (offset2) {
-      style2.transform = `translate3D(0,${offset2}px,0)`;
-    }
-    return style2;
-  };
-  const getActive = (pace) => {
-    if (pace) {
-      const _active = active + pace;
-      return range(_active, -1, childCount);
-    }
-    return active;
-  };
-  const getOffset = (active2, offset2 = 0) => {
-    const currentPosition = active2 * Number(height);
-    const targetOffset = offset2 - currentPosition;
-    return targetOffset;
-  };
-  const requestFrame = (fn) => {
-    window.requestAnimationFrame.call(window, fn);
-  };
-  const range = (num, min, max) => {
-    return Math.min(Math.max(num, min), max);
-  };
-  const resettPosition = () => {
-    swiperRef.current.moving = true;
-    if (active <= -1) {
-      move({ pace: childCount });
-    }
-    if (active >= childCount) {
-      move({ pace: -childCount });
-    }
-  };
-  const noticebarClass = classNames({
-    [`${classPrefix}-box`]: true,
-    [`${classPrefix}-box-wrapable`]: wrap,
-    [`${classPrefix}-box-${align}`]: true
-  });
-  const cls = classNames(classPrefix, className);
-  useEffect(() => {
-    return () => {
-      stopAutoPlay();
-    };
-  }, []);
-  return React__default.createElement(
-    "div",
-    { className: cls, style },
-    showNoticeBar && direction === "horizontal" ? React__default.createElement(
-      "div",
-      { className: noticebarClass, style: barStyle, onClick: handleClick },
-      leftIcon ? React__default.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
-      React__default.createElement(
-        "div",
-        { ref: wrapRef, className: "nut-noticebar-box-wrap" },
-        React__default.createElement(
-          "div",
-          { ref: contentRef, className: `nut-noticebar-box-wrap-content ${animationClass} ${isEllipsis() ? "nut-ellipsis" : ""}`, style: contentStyle, onAnimationEnd },
-          children,
-          content
-        )
-      ),
-      right ? React__default.createElement("div", { className: "nut-noticebar-box-right" }, right) : null,
-      closeable || rightIcon ? React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || React__default.createElement(Close, { width: 12, height: 12 })) : null
-    ) : null,
-    showNoticeBar && scrollList.current.length > 0 && isVertical ? React__default.createElement(
-      "div",
-      { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
-      leftIcon ? React__default.createElement("div", { className: "nut-noticebar-box-left-icon" }, leftIcon) : null,
-      children ? React__default.createElement("div", { className: "nut-noticebar-box-wrap", ref: innerRef }, scrollList.current.map((item, index) => {
-        return React__default.createElement("div", { style: itemStyle(index), key: index, onClick: (e) => {
-          handleItemClick(e, item);
-        } }, item);
-      })) : React__default.createElement("div", { className: "nut-noticebar-box-horseLamp-list", style: horseLampStyle }, scrollList.current.map((item, index) => {
-        return (
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-          React__default.createElement("div", { className: "nut-noticebar-box-horseLamp-list-item", style: { height }, key: index, onClick: (e) => {
-            handleItemClick(e, item);
-          } }, item)
-        );
-      })),
-      React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: (e) => {
-        handleClickIcon(e);
-      } }, rightIcon || (closeable ? React__default.createElement(Close, { width: 12, height: 12 }) : null))
-    ) : null
-  );
-};
-NoticeBar.displayName = "NutNoticeBar";
-export {
-  NoticeBar as default
-};

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

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

package/dist/esm/Notify/style/style.css

@@ -1 +0,0 @@
-.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity 1s}.fade-enter-done,.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity 1s}.fade-exit-done,.fade-appear{opacity:0}.fade-appear-active{opacity:1;transition:opacity 1s}.nut-notify{display:flex;justify-content:center;align-items:center;box-sizing:border-box;padding:var(--nutui-notify-padding, 0px 10px);color:var(--nutui-notify-text-color, #ffffff);font-size:var(--nutui-notify-font-size, var(--nutui-font-size-3, 14px));white-space:pre-wrap;word-wrap:break-word;height:var(--nutui-notify-height, 40px)}.nut-notify-popup-top,.nut-notify-popup-bottom{position:fixed;left:0;width:100%;overflow-y:auto;transition:transform .3s;z-index:9999}.nut-notify-popup-top{top:0}.nut-notify-popup-bottom{bottom:0}.nut-notify-base{background:var(--nutui-notify-base-background-color, linear-gradient(135deg, var(--nutui-color-primary-stop-1, #f53d4d) 0%, var(--nutui-color-primary-stop-2, #fa2c19) 100%))}.nut-notify-primary{background:var(--nutui-notify-primary-background-color, var(--nutui-color-info, #1988fa))}.nut-notify-success{background:var(--nutui-notify-success-background-color, var(--nutui-color-success, #00bc14))}.nut-notify-danger{background:var(--nutui-notify-danger-background-color, var(--nutui-color-primary, #fa2c19))}.nut-notify-warning{background:var(--nutui-notify-warning-background-color, var(--nutui-color-warning, rgb(255, 158, 13)))}[dir=rtl] .nut-notify-popup-top,[dir=rtl] .nut-notify-popup-bottom,.nut-rtl .nut-notify-popup-top,.nut-rtl .nut-notify-popup-bottom{left:auto;right:0}

package/dist/esm/Notify.js

@@ -1,150 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import { CSSTransition } from "react-transition-group";
-import { r as render, u as unmount } from "./render.js";
-import { C as ComponentDefaults } from "./typings.js";
-const classPrefix = "nut-notify";
-class Notification extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.close = this.close.bind(this);
-    this.startCloseTimer = this.startCloseTimer.bind(this);
-    this.clearCloseTimer = this.clearCloseTimer.bind(this);
-    this.clickCover = this.clickCover.bind(this);
-    this.state = {
-      show: true
-    };
-  }
-  close() {
-    this.setState({
-      show: false
-    });
-    this.clearCloseTimer();
-    if (this.props.id) {
-      const element = document.getElementById(this.props.id);
-      element && element.parentNode && element.parentNode.removeChild(element);
-    }
-    this.props.onClose();
-  }
-  startCloseTimer() {
-    const { duration } = this.props;
-    if (duration) {
-      this.closeTimer = window.setTimeout(() => {
-        this.close();
-      }, duration);
-    }
-  }
-  clearCloseTimer() {
-    if (this.closeTimer) {
-      clearTimeout(this.closeTimer);
-      this.closeTimer = -1;
-    }
-  }
-  clickCover() {
-    this.props.onClick();
-  }
-  componentDidMount() {
-    this.startCloseTimer();
-  }
-  componentWillUnmount() {
-    this.clearCloseTimer();
-  }
-  render() {
-    const { style, message, type, className, position } = this.props;
-    const { show } = this.state;
-    const classes = classNames({
-      [`${classPrefix}-popup-top`]: position === "top",
-      [`${classPrefix}-popup-bottom`]: position === "bottom",
-      [`${classPrefix}`]: true,
-      [`${classPrefix}-${type}`]: true
-    });
-    return React.createElement(
-      React.Fragment,
-      null,
-      React.createElement(
-        CSSTransition,
-        { in: show, timeout: 300, classNames: "fade", unmountOnExit: true, appear: true, position },
-        React.createElement("div", { className: `${classes} ${className}`, style, onClick: this.clickCover }, message)
-      )
-    );
-  }
-}
-Notification.newInstance = (properties, callback) => {
-  const element = document.createElement("div");
-  const id = properties.id ? properties.id : `${(/* @__PURE__ */ new Date()).getTime()}`;
-  element.id = id;
-  properties.id = id;
-  document.body.appendChild(element);
-  let called = false;
-  function ref(instance) {
-    if (called) {
-      return;
-    }
-    called = true;
-    callback({
-      component: instance,
-      destroy() {
-        setTimeout(() => {
-          unmount(element);
-          element && element.parentNode && element.parentNode.removeChild(element);
-        }, 300);
-      }
-    });
-  }
-  render(React.createElement(Notification, Object.assign({}, properties, { ref })), element);
-};
-let messageInstance = null;
-const options = Object.assign(Object.assign({}, ComponentDefaults), { id: "", duration: 3e3, type: "danger", position: "top", onClose: () => {
-}, onClick: () => {
-} });
-function getInstance(props, callback) {
-  if (messageInstance) {
-    messageInstance.destroy();
-    messageInstance = null;
-  }
-  Notification.newInstance(props, (notification) => {
-    return callback && callback(notification);
-  });
-}
-function notice(opts) {
-  opts = Object.assign(Object.assign({}, options), opts);
-  getInstance(opts, (notification) => {
-    messageInstance = notification;
-  });
-}
-const errorMsg = (message) => {
-  if (!message) {
-    console.warn("[NutUI Notify]: message不能为空");
-  }
-};
-const Notify = {
-  text(message, option = {}) {
-    errorMsg(message);
-    return notice(Object.assign({ message, type: "base" }, option));
-  },
-  success(message, option = {}) {
-    errorMsg(message);
-    return notice(Object.assign({ message, type: "success" }, option));
-  },
-  primary(message, option = {}) {
-    errorMsg(message);
-    return notice(Object.assign({ message, type: "primary" }, option));
-  },
-  danger(message, option = {}) {
-    errorMsg(message);
-    return notice(Object.assign({ message, type: "danger" }, option));
-  },
-  warn(message, option = {}) {
-    errorMsg(message);
-    return notice(Object.assign({ message, type: "warning" }, option));
-  },
-  hide() {
-    if (messageInstance) {
-      messageInstance.destroy();
-      messageInstance = null;
-    }
-  }
-};
-export {
-  Notify as default
-};

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

@@ -1,2 +0,0 @@
-import '../../Popup/style'
-import '../../../packages/numberkeyboard/numberkeyboard.scss'

package/dist/esm/NumberKeyboard/style/style.css

@@ -1 +0,0 @@
-.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, .7)));z-index:var(--nutui-overlay-zIndex, 1000)}.nut-overlay .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-7, #1a1a1a))}[dir=rtl] .nut-overlay,.nut-rtl .nut-overlay{left:auto;right:0}.nut-overflow-hidden{overflow:hidden!important}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-overlay-slide-enter-active,.nut-overlay-slide-appear-active{animation-fill-mode:both;animation-name:nut-fade-in;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-overlay-slide-exit-active{animation-fill-mode:both;animation-name:nut-fade-out;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-popup{position:fixed;min-height:26%;max-height:100%;overflow-y:auto;background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-gray-7, #1a1a1a);-webkit-overflow-scrolling:touch;font-size:var(--nutui-font-size-3, 14px)}.nut-popup-title{display:flex;align-items:center;justify-content:center;border-bottom:var(--nutui-popup-title-border-bottom, 0);padding:var(--nutui-popup-title-padding, 16px);position:relative}.nut-popup-title-left{position:absolute;left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-title{font-weight:var(--nutui-font-weight-bold, 500);font-size:var(--nutui-popup-title-font-size, var(--nutui-font-size-5, 18px))}.nut-popup-title-description{color:var(--nutui-gray-5, #8c8c8c);font-size:var(--nutui-popup-description-font-size, var(--nutui-font-size-1, 10px));font-weight:var(--nutui-font-weight, 400)}.nut-popup-title-right{position:absolute!important;z-index:1;cursor:pointer;width:var(--nutui-popup-icon-size, var(--nutui-font-size-5, 18px));height:var(--nutui-popup-icon-size, var(--nutui-font-size-5, 18px));display:flex;justify-content:center;align-items:center;top:var(--nutui-popup-title-padding, 16px);right:var(--nutui-popup-title-padding, 16px);color:var(--nutui-gray-5, #8c8c8c)}.nut-popup-title-right:active{opacity:.7}.nut-popup-title-right-top-left{top:var(--nutui-popup-title-padding, 16px);left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-right-bottom-left{bottom:var(--nutui-popup-title-padding, 16px);left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-right-bottom-right{right:var(--nutui-popup-title-padding, 16px);bottom:var(--nutui-popup-title-padding, 16px)}.nut-popup-center{top:50%;left:50%;min-height:10%;transform:translate(-50%,-50%)}.nut-popup-center.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom,.nut-popup-top{max-height:83%}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.nut-popup-round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.nut-popup-round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-default-exit-done.nut-popup,.nut-popup-slide-center-exit-done.nut-popup,.nut-popup-slide-left-exit-done.nut-popup,.nut-popup-slide-right-exit-done.nut-popup,.nut-popup-slide-top-exit-done.nut-popup,.nut-popup-slide-bottom-exit-done.nut-popup{display:none}.nut-popup .nut-overflow-hidden{overflow:hidden!important}[dir=rtl] .nut-popup-title-left,.nut-rtl .nut-popup-title-left{left:auto;right:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right,.nut-rtl .nut-popup-title-right{right:auto;left:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right-top-left,.nut-rtl .nut-popup-title-right-top-left,[dir=rtl] .nut-popup-title-right-bottom-left,.nut-rtl .nut-popup-title-right-bottom-left{left:auto;right:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right-bottom-right,.nut-rtl .nut-popup-title-right-bottom-right{right:auto;left:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,.nut-rtl .nut-popup-title .nut-icon-ArrowLeft{transform:rotate(180deg)}[dir=rtl] .nut-popup-center,.nut-rtl .nut-popup-center{left:auto;right:50%;transform:translate(50%,-50%)}[dir=rtl] .nut-popup-bottom,.nut-rtl .nut-popup-bottom,[dir=rtl] .nut-popup-top,.nut-rtl .nut-popup-top{left:auto;right:0}.nut-numberkeyboard{width:100%;padding:var(--nutui-numberkeyboard-padding, 0 0 22px 0);-webkit-user-select:none;user-select:none;background-color:var(--nutui-numberkeyboard-background-color, var(--nutui-gray-3, #f6f6f6))}.nut-numberkeyboard-header{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:content-box;padding:var(--nutui-popup-title-padding, 16px);color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-popup-title-font-size, var(--nutui-font-size-5, 18px))}.nut-numberkeyboard-header-title{color:var(--nutui-gray-7, #1a1a1a);display:inline-block}.nut-numberkeyboard-header-close{position:absolute;display:block;right:0;padding:var(--nutui-numberkeyboard-header-close-padding, 0 16px);color:var(--nutui-numberkeyboard-header-close-color, var(--nutui-gray-6, #595959));font-size:var(--nutui-numberkeyboard-header-close-font-size, 14px);background-color:var(--nutui-numberkeyboard-header-close-background-color, transparent);border:none;cursor:pointer}.nut-numberkeyboard-body{display:flex;padding:6px 0 0 6px}.nut-numberkeyboard-body-keys{display:flex;flex:3;flex-wrap:wrap}.nut-numberkeyboard-body-wrapper{position:relative;flex:1;flex-basis:33%;box-sizing:border-box;padding:0 6px 6px 0;background-color:var(--nutui-numberkeyboard-wrapper-background-color, var(--nutui-gray-2, #f8f8f8))}.nut-numberkeyboard-body-wrapper .key{display:flex;align-items:center;justify-content:center;height:var(--nutui-numberkeyboard-key-height, 48px);font-size:var(--nutui-numberkeyboard-key-font-size, var(--nutui-font-size-5, 18px));line-height:var(--nutui-numberkeyboard-key-line-height, 1.5);background-color:var(--nutui-numberkeyboard-key-background-color, #fff);color:var(--nutui-numberkeyboard-key-color, var(--nutui-gray-6, #595959));border-radius:var(--nutui-numberkeyboard-key-border-radius, 8px);border:var(--nutui-numberkeyboard-key-border, none);font-weight:var(--nutui-font-weight-bold, 500);cursor:pointer}.nut-numberkeyboard-body-wrapper .key.active{background-color:var(--nutui-numberkeyboard-key-active-background-color, #ebedf0)}.nut-numberkeyboard-sidebar{display:flex;flex:1;flex-direction:column}.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key{position:absolute;top:0;right:6px;bottom:6px;left:0;height:auto}.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm{font-size:var(--nutui-numberkeyboard-key-confirm-font-size, var(--nutui-font-size-4, 16px));color:var(--nutui-numberkeyboard-key-confirm-color, #fff);background-color:var(--nutui-numberkeyboard-key-confirm-background-color, var(--nutui-color-primary, #fa2c19))}.nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .confirm.active{background-color:#ff0000b3}[dir=rtl] .nut-popup .nut-numberkeyboard-header-close,.nut-rtl .nut-popup .nut-numberkeyboard-header-close{right:auto;left:0}[dir=rtl] .nut-popup .nut-numberkeyboard-body,.nut-rtl .nut-popup .nut-numberkeyboard-body{padding:6px 6px 0 0}[dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper,.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper{padding:0 0 6px 6px}[dir=rtl] .nut-popup .nut-numberkeyboard-body-wrapper .delete,.nut-rtl .nut-popup .nut-numberkeyboard-body-wrapper .delete{transform:rotate(-180deg)}[dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key,.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key{left:6px;right:0}[dir=rtl] .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete,.nut-rtl .nut-popup .nut-numberkeyboard-sidebar .nut-numberkeyboard-body-wrapper .key.delete{transform:rotate(-180deg)}

package/dist/esm/NumberKeyboard.js

@@ -1,138 +0,0 @@
-import { _ as __rest } from "./tslib.es6.js";
-import React__default, { useMemo, useState } from "react";
-import classNames from "classnames";
-import { ArrowDown } from "@nutui/icons-react";
-import Popup__default from "./Popup.js";
-import { useConfig } from "./ConfigProvider.js";
-import { C as ComponentDefaults } from "./typings.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { visible: false, rightActions: "", type: "default", custom: [], random: false, onClose: () => {
-} });
-const NumberKeyboard = (props) => {
-  const { locale } = useConfig();
-  const _a = Object.assign(Object.assign({}, defaultProps), props), { title, rightActions, confirmText, visible, type, custom, random, style, className, onChange, onDelete, onClose, onConfirm } = _a, rest = __rest(_a, ["title", "rightActions", "confirmText", "visible", "type", "custom", "random", "style", "className", "onChange", "onDelete", "onClose", "onConfirm"]);
-  const classPrefix = "nut-numberkeyboard";
-  const getBasicKeys = () => {
-    const keys = new Array(9).fill(0).map((_, index) => {
-      return {
-        id: String(index + 1),
-        type: "num"
-      };
-    });
-    return random ? keys.sort(() => Math.random() > 0.5 ? 1 : -1) : keys;
-  };
-  const getCustomKeys = () => {
-    const customKeys = [
-      { id: "close", type: "close" },
-      { id: "0", type: "num" },
-      { id: "delete", type: "delete" }
-    ];
-    if (!custom)
-      return customKeys;
-    if (custom.length > 0) {
-      customKeys[0] = { id: custom[0], type: "custom" };
-    }
-    if (custom.length > 1) {
-      customKeys[2] = { id: custom[1], type: "custom" };
-    }
-    return customKeys;
-  };
-  const keysList = useMemo(() => {
-    return [...getBasicKeys(), ...getCustomKeys()];
-  }, [type, random, custom]);
-  const DeleteIcon = () => {
-    return React__default.createElement(
-      "svg",
-      { viewBox: "0 0 1024 1024", width: "28", height: "28" },
-      React__default.createElement("path", { d: "M875.594 186.122H390.803a51.162 51.162 0 0 0-36.18 14.986L79.91 475.821a51.166 51.166 0 0 0 0 72.358l274.714 274.712a51.164 51.164 0 0 0 36.179 14.986h484.791c46.033 0 83.484-37.45 83.484-83.483V269.606c.001-46.033-37.45-83.484-83.483-83.484zm32.32 568.274c0 17.85-14.473 32.318-32.32 32.318H390.803L116.089 512l274.714-274.714h484.791c17.849 0 32.32 14.47 32.32 32.32v484.789z", fill: "currentColor" }),
-      React__default.createElement("path", { d: "M753.945 360.214l-121.43 121.429-121.43-121.429s-16.062-8.224-30.356 6.072c-14.295 14.295-6.073 30.357-6.073 30.357l121.43 121.428L486.8 627.357s-8.222 16.062 6.072 30.357c14.297 14.296 30.358 6.072 30.358 6.072l109.286-109.285 109.286 109.285s16.062 8.224 30.357-6.072c14.295-14.295 6.07-30.357 6.07-30.357L668.944 518.072l121.431-121.43s8.22-16.061-6.074-30.356c-14.294-14.296-30.356-6.072-30.356-6.072z", fill: "currentColor" })
-    );
-  };
-  const NumberKeyboardKey = (props2) => {
-    const { item } = props2;
-    const [active, setActive] = useState(false);
-    const onTouchStart = () => {
-      setActive(true);
-    };
-    const onTouchEnd = (item2) => {
-      setActive(false);
-      switch (item2.type) {
-        case "num":
-        case "custom":
-          onChange === null || onChange === void 0 ? void 0 : onChange(item2.id);
-          break;
-        case "close":
-          onClose === null || onClose === void 0 ? void 0 : onClose();
-          break;
-        case "delete":
-          onDelete === null || onDelete === void 0 ? void 0 : onDelete();
-          break;
-        case "confirm":
-          onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
-          break;
-      }
-    };
-    const renderContent = (item2) => {
-      switch (item2.type) {
-        case "num":
-        case "custom":
-          return React__default.createElement("div", null, item2.id);
-        case "delete":
-          return React__default.createElement(DeleteIcon, null);
-        case "close":
-          return React__default.createElement(ArrowDown, { width: 18, height: 18 });
-        case "confirm":
-          return React__default.createElement(React__default.Fragment, null, confirmText || locale.done);
-        default:
-          return null;
-      }
-    };
-    return React__default.createElement(
-      "div",
-      { key: item.id, className: `${classPrefix}-body-wrapper` },
-      React__default.createElement("div", { className: classNames({
-        key: true,
-        active,
-        close: item.type === "close",
-        delete: item.type === "delete",
-        confirm: item.type === "confirm"
-      }), onTouchStart: () => onTouchStart(), onTouchEnd: () => onTouchEnd(item), onTouchCancel: () => onTouchEnd(item) }, renderContent(item))
-    );
-  };
-  return React__default.createElement(
-    Popup__default,
-    Object.assign({}, rest, { visible, position: "bottom", onOverlayClick: onClose, onCloseIconClick: onClose, zIndex: 9999, overlayStyle: { backgroundColor: "rgba(0, 0, 0, 0)" } }),
-    React__default.createElement(
-      "div",
-      { className: classNames(classPrefix, className), style },
-      title && React__default.createElement(
-        "div",
-        { className: `${classPrefix}-header` },
-        React__default.createElement("div", { className: `${classPrefix}-header-title` }, title),
-        type === "default" && React__default.createElement("span", { className: `${classPrefix}-header-close`, onClick: onConfirm }, rightActions || locale.done)
-      ),
-      React__default.createElement(
-        "div",
-        { className: `${classPrefix}-body` },
-        React__default.createElement("div", { className: `${classPrefix}-body-keys` }, keysList === null || keysList === void 0 ? void 0 : keysList.map((item) => {
-          return React__default.createElement(NumberKeyboardKey, { key: item.id, item });
-        })),
-        type === "rightColumn" && React__default.createElement(
-          "div",
-          { className: `${classPrefix}-sidebar` },
-          React__default.createElement(NumberKeyboardKey, { key: "delete", item: {
-            id: "delete",
-            type: "delete"
-          } }),
-          React__default.createElement(NumberKeyboardKey, { key: "confirm", item: {
-            id: "confirm",
-            type: "confirm"
-          } })
-        )
-      )
-    )
-  );
-};
-NumberKeyboard.displayName = "NutNumberKeyboard";
-export {
-  NumberKeyboard as default
-};

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

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

package/dist/esm/Overlay/style/style.css

@@ -1 +0,0 @@
-.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, .7)));z-index:var(--nutui-overlay-zIndex, 1000)}.nut-overlay .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-7, #1a1a1a))}[dir=rtl] .nut-overlay,.nut-rtl .nut-overlay{left:auto;right:0}.nut-overflow-hidden{overflow:hidden!important}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-overlay-slide-enter-active,.nut-overlay-slide-appear-active{animation-fill-mode:both;animation-name:nut-fade-in;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-overlay-slide-exit-active{animation-fill-mode:both;animation-name:nut-fade-out;animation-duration:var(--nutui-overlay-animation-duration, .3s)}