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

package/dist/esm/imagepreview.taro-c50bb0a3.js

@@ -0,0 +1,167 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import { P as Popup } from './popup.taro-01676bff.js';
+import { S as Swiper } from './swiper.taro-7a94e211.js';
+import { S as SwiperItem } from './swiperitem-c9e3d0d5.js';
+
+const defaultProps = {
+    images: [],
+    videos: [],
+    show: false,
+    autoplay: 3000,
+    initNo: 1,
+    contentClose: false,
+    paginationVisible: false,
+    paginationColor: '#fff',
+    onClose: () => { },
+};
+const ImagePreview = (props) => {
+    const { images, videos, show, initNo, paginationColor, paginationVisible, autoplay, contentClose, onClose, } = props;
+    const nutImagePreview = useRef(null);
+    const [showPop, setShowPop] = useState(false);
+    const [active, setActive] = useState(1);
+    const [maxNo, setMaxNo] = useState(1);
+    const [store, setStore] = useState({
+        scale: 1,
+        moveable: false,
+    });
+    const [lastTouchEndTime, setLastTouchEndTime] = useState(0); // 用来辅助监听双击
+    const onTouchStart = (event) => {
+        const touches = event.touches;
+        const events = touches[0];
+        const events2 = touches[1];
+        // 如果已经放大，双击应变回原尺寸；如果是原尺寸，双击应放大
+        const curTouchTime = new Date().getTime();
+        if (curTouchTime - lastTouchEndTime < 300) {
+            const store1 = store;
+            if (store1.scale > 1) {
+                store1.scale = 1;
+            }
+            else if (store1.scale === 1) {
+                store1.scale = 2;
+            }
+            scaleNow();
+        }
+        const store1 = store;
+        store1.moveable = true;
+        if (events2) {
+            // 如果开始两指操作，记录初始时刻两指间的距离
+            store1.oriDistance = getDistance({
+                x: events.pageX,
+                y: events.pageY,
+            }, {
+                x: events2.pageX,
+                y: events2.pageY,
+            });
+        }
+        // 取到开始两指操作时的放大（缩小比例），store.scale 存储的是当前的放缩比（相对于标准大小 scale 为 1 的情况的放大缩小比）
+        store1.originScale = store1.scale || 1;
+    };
+    const onTouchMove = (event) => {
+        const touches = event.touches;
+        const events = touches[0];
+        const events2 = touches[1];
+        if (!store.moveable) {
+            return;
+        }
+        const store1 = store;
+        // 双指移动
+        if (events2) {
+            // 获得当前两点间的距离
+            const curDistance = getDistance({
+                x: events.pageX,
+                y: events.pageY,
+            }, {
+                x: events2.pageX,
+                y: events2.pageY,
+            });
+            /** 此处计算倍数，距离放大（缩小） k 倍则 scale 也 扩大（缩小） k 倍。距离放大（缩小）倍数 = 结束时两点距离 除以 开始时两点距离
+             * 注意此处的 scale 变化是基于 store.scale 的。
+             * store.scale 是一个暂存值，比如第一次放大 2 倍，则 store.scale 为 2。
+             * 再次两指触碰的时候，store.originScale 就为 store.scale 的值，基于此时的 store.scale 继续放大缩小。 * */
+            const curScale = curDistance / store1.oriDistance;
+            store1.scale = store1.originScale * curScale;
+            // 最大放大 3 倍，缩小后松手要弹回原比例
+            if (store1.scale > 3) {
+                store1.scale = 3;
+            }
+            scaleNow();
+        }
+    };
+    const onTouchEnd = () => {
+        setLastTouchEndTime(new Date().getTime());
+        const store1 = store;
+        store1.moveable = false;
+        if ((store1.scale < 1.1 && store1.scale > 1) || store1.scale < 1) {
+            store1.scale = 1;
+            scaleNow();
+        }
+    };
+    const init = () => {
+        document.addEventListener('touchmove', onTouchMove);
+        document.addEventListener('touchend', onTouchEnd);
+        document.addEventListener('touchcancel', onTouchEnd);
+    };
+    useEffect(() => {
+        if (show !== undefined) {
+            setShowPop(show);
+            init();
+        }
+    }, [show]);
+    useEffect(() => {
+        if (initNo !== undefined) {
+            setActive(initNo);
+        }
+        if (show !== undefined) {
+            setShowPop(show);
+        }
+        if (images && videos) {
+            setMaxNo(images.length + videos.length);
+        }
+    }, []);
+    const scaleNow = () => {
+        if (nutImagePreview.current) {
+            nutImagePreview.current.style.transform = `scale(${store.scale})`;
+        }
+    };
+    const onCloseInner = () => {
+        setShowPop(false);
+        setActive(1);
+        scaleNow();
+        onClose && onClose();
+        setStore({
+            ...store,
+            scale: 1,
+        });
+    };
+    // 计算两个点的距离
+    const getDistance = (first, second) => {
+        // 计算两个点起始时刻的距离和终止时刻的距离，终止时刻距离变大了则放大，变小了则缩小
+        // 放大 k 倍则 scale 也 扩大 k 倍
+        return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+    };
+    const slideChangeEnd = (page) => {
+        setActive(page + 1);
+    };
+    const closeOnImg = () => {
+        // 点击内容区域的图片是否可以关闭弹层（视频区域由于nut-video做了限制，无法关闭弹层）
+        if (contentClose) {
+            onCloseInner();
+        }
+    };
+    return (React__default.createElement(Popup, { visible: showPop, popClass: "custom-pop", style: { width: '100%' }, onClick: onCloseInner },
+        React__default.createElement("div", { className: "nut-imagepreview", ref: nutImagePreview, onClick: closeOnImg, onTouchStart: onTouchStart },
+            React__default.createElement(Swiper, { autoPlay: autoplay, className: "nut-imagepreview-swiper", loop: true, isPreventDefault: false, style: { display: showPop ? 'block' : 'none' }, direction: "horizontal", onChange: slideChangeEnd, initPage: initNo && (initNo > maxNo ? maxNo - 1 : initNo - 1), paginationColor: paginationColor, paginationVisible: paginationVisible }, images && images.length > 0
+                ? images.map((item, index) => {
+                    return (React__default.createElement(SwiperItem, { key: index },
+                        React__default.createElement("img", { src: item.src, alt: "", className: "nut-imagepreview-img" })));
+                })
+                : [])),
+        React__default.createElement("div", { className: "nut-imagepreview-index" },
+            active,
+            "/",
+            (images ? images.length : 0) + (videos ? videos.length : 0))));
+};
+ImagePreview.defaultProps = defaultProps;
+ImagePreview.displayName = 'NutImagePreview';
+
+export { ImagePreview as I };

package/dist/esm/index-5bcb0ff8.js

@@ -0,0 +1,7 @@
+const isObject = (val) => val !== null && typeof val === 'object';
+const isFunction = (val) => typeof val === 'function';
+const isPromise = (val) => {
+    return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+};
+
+export { isObject as a, isPromise as i };

package/dist/esm/indicator.taro-cba8b010.js

@@ -0,0 +1,37 @@
+import React__default, { useEffect } from 'react';
+import classNames from 'classnames';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    size: 3,
+    current: 1,
+    block: false,
+    align: 'center',
+    fillZero: true,
+    vertical: false,
+};
+const Indicator = (props) => {
+    const { size, current, block, align, fillZero, children, className, vertical, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('indicator');
+    const classes = classNames({
+        [`${b('block')}`]: block,
+        [`${b('align')}__${align}`]: block && align,
+        [`${b('vertical')}`]: vertical,
+    }, b(''));
+    const renderEles = () => {
+        const childs = [];
+        for (let item = 1; item <= size; item++) {
+            childs.push(item === current ? (React__default.createElement("div", { key: item, className: b('number') }, fillZero && item < 10 ? `0${item}` : item)) : (React__default.createElement("div", { key: item, className: b('dot') })));
+        }
+        return childs;
+    };
+    useEffect(() => { }, []);
+    return (React__default.createElement("div", { className: classNames(classes, className), ...rest }, renderEles()));
+};
+Indicator.defaultProps = defaultProps;
+Indicator.displayName = 'NutIndicator';
+
+export { Indicator as I };

package/dist/esm/infiniteloading.taro-183bccbf.js

@@ -0,0 +1,144 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { ScrollView } from '@tarojs/components';
+import { createSelectorQuery } from '@tarojs/taro';
+import { c as cn } from './bem-350c1702.js';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    hasMore: true,
+    upperThreshold: 40,
+    containerId: '',
+    isOpenRefresh: false,
+    pullIcon: 'https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png',
+    pullTxt: '松开刷新',
+    loadIcon: 'https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png',
+    loadTxt: '加载中···',
+    loadMoreTxt: '哎呀，这里是底部了啦',
+};
+const Infiniteloading = (props) => {
+    const { locale } = useConfig();
+    const { children, hasMore, upperThreshold, containerId, isOpenRefresh, pullIcon, pullTxt, loadIcon, loadTxt, loadMoreTxt, className, onRefresh, onLoadMore, onScrollChange, iconClassPrefix, iconFontClassName, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [isInfiniting, setIsInfiniting] = useState(false);
+    const [topDisScoll, setTopDisScoll] = useState(0);
+    const refreshTop = useRef(null);
+    const scrollHeight = useRef(0);
+    const scrollTop = useRef(0);
+    const direction = useRef('down');
+    const isTouching = useRef(false);
+    const y = useRef(0);
+    const refreshMaxH = useRef(0);
+    const distance = useRef(0);
+    const b = cn('infiniteloading');
+    const classes = classNames(className, b());
+    useEffect(() => {
+        refreshMaxH.current = upperThreshold;
+        setTimeout(() => {
+            getScrollHeight();
+        }, 200);
+    }, [hasMore, isInfiniting]);
+    /** 获取需要滚动的距离 */
+    const getScrollHeight = () => {
+        const parentElement = getParentElement('scroller');
+        parentElement
+            .boundingClientRect((rect) => {
+            scrollHeight.current = Array.isArray(rect)
+                ? rect[0].height
+                : rect.height;
+        })
+            .exec();
+    };
+    const getStyle = () => {
+        return {
+            height: topDisScoll < 0 ? `0px` : `${topDisScoll}px`,
+            transition: `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`,
+        };
+    };
+    const getParentElement = (el) => {
+        return createSelectorQuery().select(containerId ? `#${containerId} #${el}` : `#${el}`);
+    };
+    const infiniteDone = () => {
+        setIsInfiniting(false);
+    };
+    const refreshDone = () => {
+        distance.current = 0;
+        setTopDisScoll(0);
+        isTouching.current = false;
+    };
+    const scrollAction = (e) => {
+        if (e.detail.scrollTop <= 0) {
+            // 滚动到最顶部
+            e.detail.scrollTop = 0;
+        }
+        else if (e.detail.scrollTop >= scrollHeight.current) {
+            // 滚动到最底部
+            e.detail.scrollTop = scrollHeight.current;
+        }
+        if (e.detail.scrollTop > scrollTop.current ||
+            e.detail.scrollTop >= scrollHeight.current) {
+            direction.current = 'down';
+        }
+        else {
+            direction.current = 'up';
+        }
+        scrollTop.current = e.detail.scrollTop;
+        onScrollChange && onScrollChange(e.detail.scrollTop);
+    };
+    const lower = () => {
+        if (direction.current == 'up' || !hasMore || isInfiniting) {
+            return false;
+        }
+        setIsInfiniting(true);
+        onLoadMore && onLoadMore(infiniteDone);
+    };
+    const touchStart = (event) => {
+        if (scrollTop.current == 0 && !isTouching.current && isOpenRefresh) {
+            y.current = event.touches[0].pageY;
+            isTouching.current = true;
+        }
+    };
+    const touchMove = (event) => {
+        distance.current = event.touches[0].pageY - y.current;
+        if (distance.current > 0 && isTouching.current) {
+            event.preventDefault();
+            setTopDisScoll(distance.current);
+            if (distance.current >= refreshMaxH.current) {
+                distance.current = refreshMaxH.current;
+                setTopDisScoll(refreshMaxH.current);
+            }
+        }
+        else {
+            distance.current = 0;
+            setTopDisScoll(0);
+            isTouching.current = false;
+        }
+    };
+    const touchEnd = () => {
+        if (distance.current < refreshMaxH.current) {
+            distance.current = 0;
+            setTopDisScoll(0);
+        }
+        else {
+            onRefresh && onRefresh(refreshDone);
+        }
+    };
+    return (React__default.createElement(ScrollView, { className: classes, scrollY: true, id: "scroller", style: { height: '100%' }, onScroll: scrollAction, onScrollToLower: lower, onTouchStart: touchStart, onTouchMove: touchMove, onTouchEnd: touchEnd },
+        React__default.createElement("div", { className: "nut-infinite-top", ref: refreshTop, style: getStyle() },
+            React__default.createElement("div", { className: "top-box" },
+                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "top-img", name: pullIcon }),
+                React__default.createElement("span", { className: "top-text" }, pullTxt || locale.infiniteloading.pullRefreshText))),
+        React__default.createElement("div", { className: "nut-infinite-container" }, children),
+        React__default.createElement("div", { className: "nut-infinite-bottom" }, isInfiniting ? (React__default.createElement("div", { className: "bottom-box" },
+            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "bottom-img", name: loadIcon }),
+            React__default.createElement("div", { className: "bottom-text" }, loadTxt || locale.infiniteloading.loadText))) : (!hasMore && (React__default.createElement("div", { className: "tips" }, loadMoreTxt || locale.infiniteloading.loadMoreText))))));
+};
+Infiniteloading.defaultProps = defaultProps;
+Infiniteloading.displayName = 'NutInfiniteloading';
+
+export { Infiniteloading as I };

package/dist/esm/input.taro-97af6c96.js

@@ -0,0 +1,240 @@
+import React__default, { forwardRef, useState, useRef, useEffect, useImperativeHandle, useCallback } from 'react';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+function trimExtraChar(value, char, regExp) {
+    const index = value.indexOf(char);
+    if (index === -1) {
+        return value;
+    }
+    if (char === '-' && index !== 0) {
+        return value.slice(0, index);
+    }
+    return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
+}
+function formatNumber(value, allowDot = true, allowMinus = true) {
+    if (allowDot) {
+        value = trimExtraChar(value, '.', /\./g);
+    }
+    else {
+        value = value.split('.')[0];
+    }
+    if (allowMinus) {
+        value = trimExtraChar(value, '-', /-/g);
+    }
+    else {
+        value = value.replace(/-/, '');
+    }
+    const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
+    return value.replace(regExp, '');
+}
+
+const defaultProps = {
+    ...ComponentDefaults,
+    type: 'text',
+    name: '',
+    defaultValue: '',
+    placeholder: '',
+    label: '',
+    labelClass: '',
+    labelWidth: '80',
+    labelAlign: 'left',
+    colon: false,
+    inputAlign: 'left',
+    center: false,
+    required: false,
+    disabled: false,
+    readonly: false,
+    error: false,
+    maxlength: '9999',
+    leftIcon: '',
+    leftIconSize: '',
+    rightIcon: '',
+    rightIconSize: '',
+    clearable: false,
+    clearIcon: 'mask-close',
+    clearSize: '14',
+    border: true,
+    formatTrigger: 'onChange',
+    rules: [],
+    rows: null,
+    errorMessage: '',
+    errorMessageAlign: '',
+    showWordLimit: false,
+    autofocus: false,
+    slotButton: null,
+    slotInput: null,
+};
+const Input = forwardRef((props, ref) => {
+    const { locale } = useConfig();
+    const { children, type, name, defaultValue, placeholder, label, labelClass, labelWidth, labelAlign, colon, inputAlign, center, required, disabled, readonly, error, maxlength, leftIcon, leftIconSize, rightIcon, rightIconSize, clearable, clearIcon, clearSize, border, formatTrigger, rules, errorMessage, errorMessageAlign, showWordLimit, autofocus, style, className, rows, slotButton, slotInput, onChange, onBlur, onFocus, onClear, formatter, keypress, onClickInput, onClickLeftIcon, onClickRightIcon, onClick, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const inputPlaceholder = placeholder || locale.placeholder;
+    const [inputValue, SetInputValue] = useState('');
+    const [active, SetActive] = useState(false);
+    const [classes, setClasses] = useState('');
+    const getModelValue = () => String(inputValue ?? '');
+    const inputRef = useRef(null);
+    useEffect(() => {
+        setClasses(inputClass);
+        SetInputValue(defaultValue);
+    }, [defaultValue]);
+    useEffect(() => {
+        if (inputValue) {
+            updateValue(getModelValue());
+            resetValidation();
+        }
+    }, [inputValue]);
+    useImperativeHandle(ref, () => {
+        return inputRef.current;
+    });
+    const inputClass = useCallback(() => {
+        const prefixCls = 'nut-input';
+        return [
+            prefixCls,
+            `${center ? 'center' : ''}`,
+            `${disabled ? `${prefixCls}-disabled` : ''}`,
+            `${required ? `${prefixCls}-required` : ''}`,
+            `${error ? `${prefixCls}-error` : ''}`,
+            `${border ? `${prefixCls}-border` : ''}`,
+            `${slotButton || rightIcon ? `${prefixCls}-right-mark` : ''}`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }, [disabled, required, error, border, slotButton, rightIcon, center]);
+    // 样式状态重置
+    useEffect(() => {
+        setClasses(inputClass);
+    }, [disabled, required, error, border, slotButton, rightIcon, center]);
+    const updateValue = (value, trigger = 'onChange') => {
+        let val = value;
+        if (type === 'tel') {
+            val = formatNumber(val, false, false);
+        }
+        if (['number', 'digit'].includes(type)) {
+            val = formatNumber(val, true, true);
+        }
+        if (type === 'tel' && !formatter) {
+            const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
+            const regNumber = /[^-0-9]/g;
+            val =
+                !regTel.test(val) && val.length > 11
+                    ? val.substring(0, 11)
+                    : val.replace(regNumber, '');
+        }
+        if (formatter && trigger === formatTrigger) {
+            val = formatter(val);
+        }
+        if (inputRef?.current?.value !== val) {
+            inputRef.current.value = val;
+        }
+        SetInputValue(val);
+    };
+    const handleFocus = (event) => {
+        const val = event.target.value;
+        SetActive(true);
+        onFocus && onFocus(val, event);
+    };
+    const handleInput = (event) => {
+        let val = event.target.value;
+        if (maxlength && val.length > Number(maxlength)) {
+            val = val.slice(0, Number(maxlength));
+        }
+        updateValue(val, 'onChange');
+        onChange && onChange(val, event);
+    };
+    const handleBlur = (event) => {
+        setTimeout(() => {
+            SetActive(false);
+        }, 200);
+        let val = event.target.value;
+        if (maxlength && val.length > Number(maxlength)) {
+            val = val.slice(0, Number(maxlength));
+        }
+        updateValue(val, 'onBlur');
+        onBlur && onBlur(val, event);
+    };
+    const handleClickInput = (event) => {
+        onClickInput && onClickInput(event);
+    };
+    const handleClickLeftIcon = (event) => {
+        onClickLeftIcon && onClickLeftIcon(event);
+    };
+    const handleClickRightIcon = (event) => {
+        onClickRightIcon && onClickRightIcon(event);
+    };
+    const resetValidation = () => {
+    };
+    const inputType = (type) => {
+        if (type === 'tel') {
+            return 'text';
+        }
+        return type;
+    };
+    const handleClear = (event) => {
+        updateValue('');
+        onClear && onClear('', event);
+    };
+    return (React__default.createElement("div", { className: `${classes}  ${className || ''}`, style: style, onClick: (e) => {
+            onClick && onClick(e);
+        } }, slotInput ? (React__default.createElement(React__default.Fragment, null,
+        label ? (React__default.createElement("div", { className: `nut-input-label ${labelClass}`, style: { width: `${labelWidth}px`, textAlign: labelAlign } },
+            React__default.createElement("div", { className: "label-string" },
+                label,
+                colon ? ':' : ''))) : null,
+        React__default.createElement("div", { className: "nut-input-value" },
+            React__default.createElement("div", { className: "nut-input-inner", onClick: (e) => {
+                    handleClickInput(e);
+                } }, slotInput)))) : (React__default.createElement(React__default.Fragment, null,
+        leftIcon && leftIcon.length > 0 ? (React__default.createElement("div", { className: "nut-input-left-icon", onClick: (e) => {
+                handleClickLeftIcon(e);
+            } },
+            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: leftIcon, size: leftIconSize }))) : null,
+        label ? (React__default.createElement("div", { className: `nut-input-label ${labelClass}`, style: { width: `${labelWidth}px`, textAlign: labelAlign } },
+            React__default.createElement("div", { className: "label-string" },
+                label,
+                colon ? ':' : ''))) : null,
+        React__default.createElement("div", { className: "nut-input-value" },
+            React__default.createElement("div", { className: "nut-input-main-con" },
+                React__default.createElement("div", { className: "nut-input-inner", onClick: (e) => {
+                        handleClickInput(e);
+                    } },
+                    type === 'textarea' ? (React__default.createElement("textarea", { name: name, className: "input-text", ref: inputRef, style: {
+                            textAlign: inputAlign,
+                            height: `${Number(rows) * 24}px`,
+                        }, maxLength: maxlength, placeholder: inputPlaceholder, disabled: disabled, readOnly: readonly, value: inputValue, autoFocus: autofocus, onBlur: (e) => {
+                            handleBlur(e);
+                        }, onFocus: (e) => {
+                            handleFocus(e);
+                        }, onInput: (e) => {
+                            handleInput(e);
+                        } })) : (React__default.createElement("input", { ...rest, name: name, className: "input-text", ref: inputRef, style: { textAlign: inputAlign }, type: inputType(type), maxLength: maxlength, placeholder: inputPlaceholder, disabled: disabled, readOnly: readonly, value: inputValue, autoFocus: autofocus, onBlur: (e) => {
+                            handleBlur(e);
+                        }, onFocus: (e) => {
+                            handleFocus(e);
+                        }, onInput: (e) => {
+                            handleInput(e);
+                        } })),
+                    clearable && !readonly && active && inputValue.length > 0 ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "nut-input-clear", name: clearIcon, size: clearSize, onClick: (e) => {
+                            handleClear(e);
+                        } })) : null),
+                rightIcon && rightIcon.length > 0 ? (React__default.createElement("div", { className: "nut-input-right-icon", onClick: (e) => {
+                        handleClickRightIcon(e);
+                    } },
+                    React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: rightIcon, size: rightIconSize }))) : null,
+                slotButton ? (React__default.createElement("div", { className: "nut-input-button" }, slotButton)) : null,
+                showWordLimit && maxlength ? (React__default.createElement("div", { className: "nut-input-word-limit" },
+                    React__default.createElement("span", { className: "nut-input-word-num" }, inputValue ? inputValue.length : 0),
+                    "/",
+                    maxlength)) : null),
+            errorMessage ? (React__default.createElement("div", { className: "nut-input-error-message", style: {
+                    textAlign: errorMessageAlign,
+                } }, errorMessage)) : (React__default.createElement("div", null)))))));
+});
+Input.defaultProps = defaultProps;
+Input.displayName = 'NutInput';
+
+export { Input as I };