@nutui/nutui-react-taro 1.5.2 → 1.5.3-beta.1

package/dist/esm/noticebar.taro-4a23cdee.js

@@ -0,0 +1,448 @@
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import classNames from 'classnames';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { c as cn } from './bem-350c1702.js';
+import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    // 滚动方向  across 横向 vertical 纵向
+    direction: 'across',
+    list: [],
+    standTime: 1000,
+    complexAm: false,
+    height: 40,
+    text: '',
+    closeMode: false,
+    wrapable: false,
+    leftIcon: '',
+    color: '',
+    background: '',
+    delay: 1,
+    scrollable: null,
+    speed: 50,
+};
+const NoticeBar = (props) => {
+    const { children, className, style, direction, list, standTime, complexAm, height, text, closeMode, wrapable, leftIcon, color, background, delay, scrollable, speed, rightIcon, close, click, onClose, onClick, onClickItem, iconClassPrefix, iconFontClassName, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const wrap = useRef(null);
+    const content = useRef(null);
+    const [showNoticeBar, SetShowNoticeBar] = useState(true);
+    const scrollList = useRef([]);
+    const [wrapWidth, SetWrapWidth] = useState(0);
+    const [firstRound, SetFirstRound] = useState(true);
+    const [duration, SetDuration] = useState(0);
+    const [offsetWidth, SetOffsetW] = useState(0);
+    const [animationClass, SetAnimationClass] = useState('');
+    const [animate, SetAnimate] = useState(false);
+    const [distance, SetDistance] = useState(0);
+    const [timer, SetTimer] = useState(0);
+    const [isCanScroll, SetIsCanScroll] = useState(null);
+    const isVertical = direction === 'vertical';
+    const [rect, setRect] = useState(null);
+    let active = 0;
+    const [vLeftIcon, setLeftIcon] = useState('');
+    const [ready, setReady] = useState(false);
+    const container = useRef(null);
+    const innerRef = useRef(null);
+    const _swiper = 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 childCount = 0;
+        const childs = React__default.Children.map(children, (child) => {
+            if (!React__default.isValidElement(child))
+                return null;
+            childCount++;
+            return child;
+        });
+        return {
+            childs,
+            childCount,
+        };
+    }, [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) {
+            // 兼容老版本无左侧Icon问题
+            if (leftIcon !== '') {
+                setLeftIcon(leftIcon);
+            }
+            else {
+                setLeftIcon('close');
+            }
+            if (children) {
+                scrollList.current = [].concat(childs);
+            }
+            else {
+                scrollList.current = [].concat(list);
+                // startRollEasy()
+                setTimeout(() => {
+                    startRollEasy();
+                }, Number(standTime));
+            }
+            setTimeout(() => {
+                complexAm && startRoll();
+            }, Number(standTime));
+        }
+        else {
+            initScrollWrap();
+        }
+        return () => {
+            // 销毁事件
+            clearInterval(timer);
+        };
+    }, []);
+    useEffect(() => {
+        initScrollWrap();
+    }, [text]);
+    useEffect(() => {
+        if (list && list.length) {
+            scrollList.current = [].concat(list);
+        }
+    }, [list]);
+    const initScrollWrap = (value) => {
+        if (showNoticeBar === false) {
+            return;
+        }
+        setTimeout(async () => {
+            if (!wrap.current || !content.current) {
+                return;
+            }
+            const warpRes = await getRectByTaro(wrap.current);
+            const contentRes = await getRectByTaro(content.current);
+            const wrapW = warpRes.width;
+            const offsetW = contentRes.width;
+            const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
+            SetIsCanScroll(canScroll);
+            if (canScroll) {
+                SetWrapWidth(wrapW);
+                SetOffsetW(offsetW);
+                SetDuration(offsetW / speed);
+                SetAnimationClass('play');
+            }
+            else {
+                SetAnimationClass('');
+            }
+        }, 0);
+    };
+    const handleClick = (event) => {
+        click && click(event);
+        onClick && onClick(event);
+    };
+    const onClickIcon = (event) => {
+        event.stopPropagation();
+        SetShowNoticeBar(!closeMode);
+        close && close(event);
+        onClose && onClose(event);
+    };
+    const onAnimationEnd = () => {
+        SetFirstRound(false);
+        setTimeout(() => {
+            SetDuration((offsetWidth + wrapWidth) / speed);
+            SetAnimationClass('play-infinite');
+        }, 0);
+    };
+    /**
+     * 滚动方式一
+     */
+    const startRollEasy = () => {
+        showhorseLamp();
+        const time = height / speed / 4 < 1
+            ? Number((height / speed / 4).toFixed(1)) * 1000
+            : ~~(height / speed / 4) * 1000;
+        const timerCurr = window.setInterval(showhorseLamp, time + Number(standTime));
+        SetTimer(timerCurr);
+    };
+    const showhorseLamp = () => {
+        SetAnimate(true);
+        const time = height / speed / 4 < 1
+            ? Number((height / speed / 4).toFixed(1)) * 1000
+            : ~~(height / speed / 4) * 1000;
+        setTimeout(() => {
+            scrollList.current.push(scrollList.current[0]);
+            scrollList.current.shift();
+            SetAnimate(false);
+        }, time);
+    };
+    const startRoll = () => {
+        const timerCurr = window.setInterval(() => {
+            const chunk = 100;
+            for (let i = 0; i < chunk; i++) {
+                scroll(i, !(i < chunk - 1));
+            }
+        }, Number(standTime) + 100 * speed);
+        SetTimer(timerCurr);
+    };
+    const scroll = (n, last) => {
+        SetAnimate(true);
+        setTimeout(() => {
+            let long = distance;
+            long -= height / 100;
+            SetDistance(long);
+            if (last) {
+                scrollList.current.push(scrollList.current[0]);
+                scrollList.current.shift();
+                SetDistance(0);
+                SetAnimate(false);
+            }
+        }, n * speed);
+    };
+    /**
+     * 点击滚动单元
+     */
+    const handleClickIcon = (event) => {
+        event.stopPropagation();
+        SetShowNoticeBar(!closeMode);
+        close && close(event);
+        onClose && onClose(event);
+    };
+    const iconShow = () => {
+        if (leftIcon === 'close' || vLeftIcon === 'close') {
+            return false;
+        }
+        return true;
+    };
+    const iconBg = () => {
+        let iconBg = '';
+        if (leftIcon) {
+            iconBg = leftIcon;
+        }
+        return iconBg;
+    };
+    const isEllipsis = () => {
+        if (isCanScroll == null) {
+            return wrapable;
+        }
+        return !isCanScroll && !wrapable;
+    };
+    const contentStyle = {
+        animationDelay: `${firstRound ? delay : 0}s`,
+        animationDuration: `${duration}s`,
+        transform: `translateX(${firstRound ? 0 : `${wrapWidth}px`})`,
+    };
+    const barStyle = {
+        color,
+        background,
+        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 = {
+        transform: complexAm ? `translateY(${distance}px)` : '',
+        transition: animate
+            ? `all ${duringTime === 0 ? noDuring : duringTime}s`
+            : '',
+        marginTop: animate ? `-${height}px` : '',
+    };
+    const b = cn('noticebar');
+    const noticebarClass = classNames({
+        'nut-noticebar-page': true,
+        withicon: closeMode,
+        close: closeMode,
+        wrapable,
+    });
+    /**
+     * 垂直自定义滚动方式
+     */
+    const init = (active = +0) => {
+        if (!container?.current)
+            return;
+        setTimeout(async () => {
+            const rects = await getRectByTaro(container?.current);
+            const _active = Math.max(Math.min(childCount - 1, active), 0);
+            const _height = rects.height;
+            trackSize = childCount * Number(_height);
+            const targetOffset = getOffset(_active);
+            _swiper.current.moving = true;
+            if (ready) {
+                _swiper.current.moving = false;
+            }
+            active = _active;
+            setRect(rects);
+            setOffset(targetOffset);
+            setReady(true);
+        }, 0);
+    };
+    useEffect(() => {
+        if (ready) {
+            stopAutoPlay();
+            autoplay();
+        }
+        return () => {
+            setReady(false);
+        };
+    }, [ready]);
+    useEffect(() => {
+        if (isVertical && children) {
+            setTimeout(() => {
+                init();
+                stopAutoPlay();
+                autoplay();
+            }, 300);
+        }
+    }, [children, container?.current]);
+    // 清除定时器
+    const stopAutoPlay = () => {
+        clearTimeout(_swiper.current.autoplayTimer);
+        _swiper.current.autoplayTimer = null;
+    };
+    // 定时轮播
+    const autoplay = () => {
+        if (childCount <= 1)
+            return;
+        stopAutoPlay();
+        _swiper.current.autoplayTimer = setTimeout(() => {
+            next();
+            autoplay();
+        }, Number(standTime) + 100 * speed);
+    };
+    // 切换方法
+    const move = ({ pace = 0, offset = 0 }) => {
+        if (childCount <= 1)
+            return;
+        const targetActive = getActive(pace);
+        // 父级容器偏移量
+        const targetOffset = getOffset(targetActive, offset);
+        // 如果循环，调整开头结尾图片位置
+        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(() => {
+                _swiper.current.moving = false;
+                move({
+                    pace: 1,
+                });
+            });
+        });
+    };
+    const handleItemClick = (event, value) => {
+        onClickItem && onClickItem(event, value);
+    };
+    const getStyle = (moveOffset = offset) => {
+        const target = innerRef.current;
+        let _offset = 0;
+        // 容器高度-元素高度
+        const val = rect.height - height;
+        _offset = moveOffset + Number(active === childCount - 1 && val / 2);
+        target.style.transitionDuration = `${_swiper.current.moving ? 0 : standTime}ms`;
+        target.style.height = `${Number(height) * childCount}px`;
+        target.style.transform = `translate3D(0,${_offset}px,0)`;
+    };
+    // 无缝滚动第一个元素位移控制
+    const itemStyle = (index) => {
+        const style = {};
+        if (height) {
+            style.height = `${height}px`;
+            style.lineHeight = `${height}px`;
+        }
+        const offset = childOffset[index];
+        if (offset) {
+            style.transform = `translate3D(0,${offset}px,0)`;
+        }
+        return style;
+    };
+    // 确定当前active 元素
+    const getActive = (pace) => {
+        if (pace) {
+            const _active = active + pace;
+            return range(_active, -1, childCount);
+        }
+        return active;
+    };
+    // 计算位移
+    const getOffset = (active, offset = 0) => {
+        const currentPosition = active * Number(height);
+        const targetOffset = offset - 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 = () => {
+        _swiper.current.moving = true;
+        if (active <= -1) {
+            move({ pace: childCount });
+        }
+        if (active >= childCount) {
+            move({ pace: -childCount });
+        }
+    };
+    useEffect(() => {
+        return () => {
+            stopAutoPlay();
+        };
+    }, []);
+    return (React__default.createElement("div", { className: `${b()} ${className || ''}`, style: style },
+        showNoticeBar && direction === 'across' ? (React__default.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick },
+            iconShow() ? (React__default.createElement("div", { className: "left-icon", style: { backgroundImage: `url(${iconBg() || ''})` } }, !iconBg() ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "notice", size: "16", color: color })) : null)) : null,
+            React__default.createElement("div", { ref: wrap, className: "wrap" },
+                React__default.createElement("div", { ref: content, className: `content ${animationClass} ${isEllipsis() ? 'nut-ellipsis' : ''}`, style: contentStyle, onAnimationEnd: onAnimationEnd },
+                    children,
+                    text)),
+            closeMode || rightIcon ? (React__default.createElement("div", { className: "right-icon", onClick: onClickIcon },
+                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: rightIcon || 'close', color: color }))) : null)) : null,
+        showNoticeBar && scrollList.current.length > 0 && isVertical ? (React__default.createElement("div", { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
+            iconShow() ? (React__default.createElement("div", { className: "left-icon", style: { backgroundImage: `url(${iconBg() || ''})` } }, !iconBg() ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "notice", size: "16", color: color })) : null)) : null,
+            children ? (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
+                    return (React__default.createElement("div", { className: "scroll-inner ", style: itemStyle(index), key: index, onClick: (e) => {
+                            handleItemClick(e, item);
+                        } }, item));
+                })))) : (React__default.createElement("div", { className: "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: "horseLamp_list_item", style: { height }, key: index, onClick: (e) => {
+                        handleItemClick(e, item);
+                    } }, item));
+            }))),
+            React__default.createElement("div", { className: "go", onClick: (e) => {
+                    handleClickIcon(e);
+                } }, rightIcon ||
+                (closeMode ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: rightIcon || 'close', color: color, size: "11px" })) : null)))) : null));
+};
+NoticeBar.defaultProps = defaultProps;
+NoticeBar.displayName = 'NutNoticeBar';
+
+export { NoticeBar as N };

package/dist/esm/notify.taro-e17c6f82.js

@@ -0,0 +1,75 @@
+import React__default, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    id: '',
+    msg: '',
+    color: '',
+    duration: 3000,
+    type: 'danger',
+    className: '',
+    background: '',
+    position: 'top',
+    isWrapTeleport: true,
+    visible: false,
+    onClosed: () => { },
+    onClick: () => { },
+};
+const Notify = (props) => {
+    const { id, children, style, msg, color, background, type, className, position, isWrapTeleport, visible, duration, onClosed, onClick, ...rest } = { ...defaultProps, ...props };
+    let timer;
+    const [showNotify, SetShow] = useState(false);
+    useEffect(() => {
+        if (visible) {
+            SetShow(true);
+            show();
+        }
+        else {
+            hide();
+        }
+    }, [visible]);
+    const clickHandle = () => {
+        onClick();
+    };
+    const show = () => {
+        clearTimer();
+        if (duration) {
+            timer = window.setTimeout(() => {
+                hide();
+            }, duration);
+        }
+    };
+    const clearTimer = () => {
+        if (timer) {
+            clearTimeout(timer);
+            timer = null;
+        }
+    };
+    const hide = () => {
+        SetShow(false);
+        if (id) {
+            const element = document.getElementById(id);
+            element && element.parentNode && element.parentNode.removeChild(element);
+        }
+        onClosed();
+    };
+    cn('notify');
+    const classes = classNames({
+        'nut-notify--popup-top': position === 'top',
+        'nut-notify--popup-bottom': position === 'bottom',
+        'nut-notify': true,
+        [`nut-notify--${type}`]: true,
+    });
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(CSSTransition, { in: showNotify, timeout: 300, classNames: "fade", unmountOnExit: true, appear: true, position: position, id: id },
+            React__default.createElement("div", { className: `${classes} ${className}`, style: {
+                    color: `${color || ''}`,
+                    background: `${background || ''}`,
+                }, onClick: clickHandle }, children || msg))));
+};
+Notify.defaultProps = defaultProps;
+Notify.displayName = 'NutNotify';
+
+export { Notify as N };

package/dist/esm/numberkeyboard.taro-1bc24744.js

@@ -0,0 +1,159 @@
+import React__default, { useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-350c1702.js';
+import { P as Popup } from './popup.taro-01676bff.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+
+const defaultProps = {
+    confirmText: '',
+    title: '',
+    visible: false,
+    overlay: false,
+    type: 'default',
+    customKey: [],
+    className: '',
+    randomKeys: false,
+    popClass: '',
+    onClose: () => { },
+};
+const NumberKeyboard = (props) => {
+    const { locale } = useConfig();
+    const { title, confirmText, visible, overlay, type, customKey, randomKeys, popClass, style, className, onChange, onDelete, onClose, } = props;
+    const b = cn('numberkeyboard');
+    const [show, setShow] = useState(visible);
+    const [clickKeyIndex, setClickKeyIndex] = useState(undefined);
+    const [keysList, setKeysList] = useState([]);
+    useEffect(() => {
+        setShow(visible);
+    }, [visible]);
+    const defaultKey = () => {
+        let leftBottomKey = {
+            id: 'lock',
+            type: 'lock',
+        };
+        if (customKey) {
+            const customKeys = Array.isArray(customKey)
+                ? customKey
+                : [customKey];
+            if (customKeys.length > 0) {
+                const newCustomKey = customKeys[0];
+                leftBottomKey = {
+                    id: newCustomKey,
+                    type: 'custom',
+                };
+            }
+        }
+        return [
+            ...getBasicKeys(),
+            leftBottomKey,
+            { id: 0, type: 'number' },
+            { id: 'delete', type: 'delete' },
+        ];
+    };
+    const getBasicKeys = () => {
+        const keys = [];
+        for (let i = 1; i <= 9; i++) {
+            keys.push({ id: i, type: 'number' });
+        }
+        if (randomKeys) {
+            return keys.sort(() => (Math.random() > 0.5 ? 1 : -1));
+        }
+        return keys;
+    };
+    const genCustomKeys = () => {
+        const keys = getBasicKeys();
+        if (!customKey)
+            return [];
+        let customKeys = Array.isArray(customKey) ? customKey : [customKey];
+        if (customKeys.length > 2) {
+            customKeys = [customKeys[0], customKeys[1]];
+        }
+        if (customKeys.length === 2 &&
+            props.title &&
+            props.type !== 'rightColumn') {
+            customKeys = [customKeys[0]];
+        }
+        if (customKeys.length === 1) {
+            if (props.title && props.type !== 'rightColumn') {
+                keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' });
+            }
+            else {
+                keys.push({ id: 0, type: 'number' }, { id: customKeys[0], type: 'custom' });
+            }
+        }
+        else if (customKeys.length === 2) {
+            keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: customKeys[1], type: 'custom' });
+        }
+        return keys;
+    };
+    useEffect(() => {
+        if (props.type === 'rightColumn' || props.title !== '') {
+            setKeysList(genCustomKeys());
+        }
+        else {
+            setKeysList(defaultKey());
+        }
+    }, []);
+    const onTouchstart = (item, event) => {
+        event.stopPropagation();
+        setClickKeyIndex(item.id);
+        if (item.type === 'number' || item.type === 'custom') {
+            onChange && onChange(item.id);
+        }
+        if (item.type === 'lock') {
+            onClose && onClose();
+        }
+        if (item.type === 'delete') {
+            onDelete && onDelete();
+        }
+    };
+    const onTouchMove = (event) => {
+        event.stopPropagation();
+    };
+    const onTouchEnd = (event) => {
+        event.preventDefault();
+        setClickKeyIndex(undefined);
+    };
+    return (React__default.createElement("div", null,
+        React__default.createElement(Popup, { visible: show, overlay: overlay, position: "bottom", popClass: popClass, onClickOverlay: onClose, onClickCloseIcon: onClose, overlayStyle: { backgroundColor: 'rgba(0, 0, 0, 0)' } },
+            React__default.createElement("div", { className: `${b()} ${className}`, style: { ...style } },
+                title ? (React__default.createElement("div", { className: b('header') },
+                    React__default.createElement("h3", { className: b('header__tit') }, title),
+                    type === 'default' ? (React__default.createElement("span", { className: b('header__close'), onClick: onClose }, locale.done)) : null)) : null,
+                React__default.createElement("div", { className: b('body') },
+                    React__default.createElement("div", { className: b('body__keys') }, keysList?.map((item, index) => {
+                        return (React__default.createElement("div", { key: index, className: classNames({
+                                'key-board-wrapper': true,
+                                'key-board-wrapper-large': item.id === 0 &&
+                                    type === 'rightColumn' &&
+                                    Array.isArray(customKey) &&
+                                    customKey.length === 1,
+                            }) },
+                            React__default.createElement("div", { className: classNames({
+                                    key: true,
+                                    active: item.id === clickKeyIndex,
+                                    lock: item.type === 'lock',
+                                    delete: item.type === 'delete',
+                                }), onTouchStart: (event) => onTouchstart(item, event), onTouchMove: onTouchMove, onTouchEnd: onTouchEnd },
+                                item.type === 'number' || item.type === 'custom' ? (React__default.createElement("div", null, item.id)) : null,
+                                item.type === 'lock' ? (React__default.createElement("img", { src: "https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png", alt: "" })) : null,
+                                item.type === 'delete' ? (React__default.createElement("img", { src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png", alt: "" })) : null)));
+                    })),
+                    type === 'rightColumn' ? (React__default.createElement("div", { className: b('sidebar') },
+                        React__default.createElement("div", { className: "key-board-wrapper" },
+                            React__default.createElement("div", { className: classNames({
+                                    key: true,
+                                    active: clickKeyIndex === 'delete',
+                                }), onTouchStart: (event) => onTouchstart({ id: 'delete', type: 'delete' }, event), onTouchMove: onTouchMove, onTouchEnd: onTouchEnd },
+                                React__default.createElement("img", { src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png", alt: "" }))),
+                        React__default.createElement("div", { className: "key-board-wrapper key-board-finish", onClick: onClose },
+                            React__default.createElement("div", { className: classNames({
+                                    key: true,
+                                    finish: true,
+                                    activeFinsh: clickKeyIndex === 'finish',
+                                }) }, confirmText || locale.done)))) : null)))));
+};
+NumberKeyboard.defaultProps = defaultProps;
+NumberKeyboard.displayName = 'NutNumberKeyboard';
+
+export { NumberKeyboard as N };