@nutui/nutui-react-taro 1.4.4-beta.0 → 1.4.5-beta.0

package/dist/esm/searchbar.taro-839dd622.js

@@ -0,0 +1,148 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import Taro from '@tarojs/taro';
+import { c as cn } from './bem-893ad28d.js';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+import { I as Icon } from './icon.taro-1d0d4fb7.js';
+import { C as ComponentDefaults } from './typings-1c5f2628.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    placeholder: '',
+    shape: 'square',
+    disabled: false,
+    maxLength: 9999,
+    clearable: true,
+    align: 'left',
+    readonly: true,
+    autoFocus: false,
+    label: '',
+    leftinIcon: React__default.createElement(Icon, { name: "search", size: "12" }),
+};
+const SearchBar = (props) => {
+    const searchbarBem = cn('searchbar');
+    const { locale } = useConfig();
+    const searchRef = useRef(null);
+    const [value, setValue] = useState(() => props.value);
+    const { placeholder, shape, className, disabled, maxLength, clearable, align, readOnly, autoFocus, label, actionText, leftinIcon, rightinIcon, leftoutIcon, rightoutIcon, onChange, onFocus, onBlur, onClear, onCancel, onSearch, onClickInput, onClickLeftinIcon, onClickLeftoutIcon, onClickRightinIcon, onClickRightoutIcon, iconClassPrefix, iconFontClassName, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const alignClass = `${align}`;
+    const change = (event) => {
+        const { value } = event.target;
+        onChange && onChange?.(value, event);
+        setValue(value);
+    };
+    const focus = (event) => {
+        const { value } = event.target;
+        onFocus && onFocus?.(value, event);
+    };
+    const blur = (event) => {
+        const searchSelf = searchRef.current;
+        searchSelf && searchSelf.blur();
+        const { value } = event.target;
+        onBlur && onBlur?.(value, event);
+    };
+    useEffect(() => {
+        setValue(props.value);
+    }, [props.value]);
+    useEffect(() => {
+        if (autoFocus) {
+            const searchSelf = searchRef.current;
+            searchSelf && searchSelf.focus();
+        }
+    }, [autoFocus]);
+    const renderField = () => {
+        return (React__default.createElement("input", { className: `${searchbarBem('input')}  ${searchbarBem(alignClass)} ${shape === 'round' ? searchbarBem('round') : ''} ${clearable ? searchbarBem('input-clear') : ''}`, ref: searchRef, style: { ...props.style, background: props.inputBackground }, value: value || '', placeholder: placeholder || locale.placeholder, disabled: disabled, readOnly: readOnly, maxLength: maxLength, onKeyPress: onKeypress, onChange: (e) => change(e), onFocus: (e) => focus(e), onBlur: (e) => blur(e), onClick: (e) => clickInput(e) }));
+    };
+    const clickInput = (e) => {
+        onClickInput && onClickInput(e);
+    };
+    const renderLeftinIcon = () => {
+        if (!leftinIcon)
+            return null;
+        return (React__default.createElement("div", { className: `${searchbarBem('leftin-icon')} ${searchbarBem('icon')}`, onClick: (e) => clickLeftIcon('in-left', e) }, leftinIcon));
+    };
+    const renderLeftoutIcon = () => {
+        if (!leftoutIcon)
+            return null;
+        return (React__default.createElement("div", { className: `${searchbarBem('leftout-icon')}`, onClick: (e) => clickLeftIcon('out-left', e) }, leftoutIcon));
+    };
+    const clickLeftIcon = (flag, event) => {
+        if (flag === 'in-left') {
+            onClickLeftinIcon && onClickLeftinIcon(value, event);
+        }
+        else {
+            onClickLeftoutIcon && onClickLeftoutIcon(value, event);
+        }
+    };
+    const renderRightinIcon = () => {
+        if (!rightinIcon)
+            return null;
+        return (React__default.createElement("div", { className: `${searchbarBem('rightin-icon')} ${searchbarBem('icon')}`, onClick: (e) => clickRightIcon('in-right', e) }, rightinIcon));
+    };
+    const renderRightoutIcon = () => {
+        if (!rightoutIcon)
+            return null;
+        return (React__default.createElement("div", { className: `${searchbarBem('rightout-icon')}`, onClick: (e) => clickRightIcon('out-right', e) }, rightoutIcon));
+    };
+    const clickRightIcon = (flag, event) => {
+        if (flag === 'in-left') {
+            onClickRightinIcon && onClickRightinIcon(value, event);
+        }
+        else {
+            onClickRightoutIcon && onClickRightoutIcon(value, event);
+        }
+    };
+    const handleClear = () => {
+        return (React__default.createElement("div", { className: `${searchbarBem('clear')} ${rightinIcon ? 'pos-right' : ''}`, onClick: (e) => clearaVal(e) },
+            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "circle-close", size: "12", color: "#555" })));
+    };
+    const clearaVal = (event) => {
+        if (disabled || readOnly) {
+            return;
+        }
+        setValue('');
+        onClear && onClear(event);
+    };
+    const renderRightLabel = () => {
+        if (actionText) {
+            return (React__default.createElement("div", { className: searchbarBem('action-text'), onClick: search }, actionText));
+        }
+        return null;
+    };
+    const onKeypress = (e) => {
+        if (e.keyCode === 13) {
+            if (typeof e.cancelable !== 'boolean' || e.cancelable) {
+                e.preventDefault();
+            }
+            onSearch && onSearch(value);
+        }
+    };
+    const search = () => {
+        onSearch && onSearch(value);
+    };
+    const renderLabel = () => {
+        if (label) {
+            return React__default.createElement("div", { className: searchbarBem('label') }, label);
+        }
+        return null;
+    };
+    const envClass = () => {
+        return Taro.getEnv() === 'WEB' ? 'nut-searchbar-taro' : '';
+    };
+    return (React__default.createElement("div", { className: `${searchbarBem()} ${envClass()} ${disabled ? searchbarBem('disabled') : ''}  ${className || ''}`, style: { ...props.style, background: props.background } },
+        renderLeftoutIcon(),
+        renderLabel(),
+        React__default.createElement("div", { className: `${searchbarBem('content')}` },
+            renderLeftinIcon(),
+            React__default.createElement("div", { className: "nut-searchbar__input-box" }, renderField()),
+            renderRightinIcon(),
+            clearable && value && handleClear()),
+        renderRightoutIcon(),
+        renderRightLabel()));
+};
+SearchBar.defaultProps = defaultProps;
+SearchBar.displayName = 'NutSearchBar';
+
+export { SearchBar as S };

package/dist/esm/shortpassword.taro-182d46f7.js

@@ -0,0 +1,111 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import { c as cn } from './bem-893ad28d.js';
+import { P as Popup } from './popup.taro-cb777e09.js';
+import { I as Icon } from './icon.taro-1d0d4fb7.js';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+import { C as ComponentDefaults } from './typings-1c5f2628.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    title: '',
+    desc: '',
+    tips: '',
+    visible: false,
+    modelValue: '',
+    errorMsg: '',
+    noButton: true,
+    closeOnClickOverlay: true,
+    length: 6,
+    className: '',
+    onChange: (value) => { },
+    onOk: (value) => { },
+    onCancel: () => { },
+    onClose: () => { },
+    onTips: () => { },
+    onComplete: (value) => { },
+};
+const ShortPassword = (props) => {
+    const { locale } = useConfig();
+    const { title, desc, tips, visible, modelValue, errorMsg, noButton, closeOnClickOverlay, length, style, className, onChange, onOk, onTips, onCancel, onClose, onComplete, iconClassPrefix, iconFontClassName, ...reset } = props;
+    const b = cn('shortpassword');
+    const textInput = useRef(null);
+    const range = (val) => {
+        return Math.min(Math.max(4, val), 6);
+    };
+    const [innerVisible, setInnerVisible] = useState(visible);
+    const [comLen, setComLen] = useState(range(Number(length)));
+    const [inputValue, setInputValue] = useState('');
+    useEffect(() => {
+        setInnerVisible(visible);
+    }, [visible]);
+    useEffect(() => {
+        if (typeof modelValue !== 'undefined') {
+            setInputValue(modelValue);
+        }
+    }, [modelValue]);
+    const changeValue = (e) => {
+        let inputValue = e.target.value;
+        if (String(inputValue).length > comLen) {
+            inputValue = inputValue.slice(0, comLen);
+        }
+        setInputValue(inputValue);
+        if (String(inputValue).length === comLen) {
+            onComplete && onComplete(inputValue);
+        }
+        onChange && onChange(inputValue);
+    };
+    const systemStyle = () => {
+        const u = navigator.userAgent;
+        const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // g
+        const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
+        let style = {};
+        console.log(isIOS, isAndroid);
+        if (isIOS) {
+            style = {
+                paddingRight: '1200px',
+            };
+        }
+        if (isAndroid) {
+            style = {
+                opacity: 0,
+                zIndex: 10,
+            };
+        }
+        return style;
+    };
+    const focus = () => {
+        if (textInput.current) {
+            textInput.current.focus();
+        }
+    };
+    const sure = () => {
+        onOk && onOk(inputValue);
+    };
+    return (React__default.createElement("div", null,
+        React__default.createElement(Popup, { style: {
+                padding: '32px 24px 28px 24px',
+                borderRadius: '12px',
+                textAlign: 'center',
+            }, visible: innerVisible, closeable: true, "close-on-click-overlay": closeOnClickOverlay, onClickOverlay: onClose, onClickCloseIcon: onClose },
+            React__default.createElement("div", { className: `${b()} ${className}`, style: { ...style }, ...reset },
+                React__default.createElement("div", { className: b('title') }, title || locale.shortpassword.title),
+                React__default.createElement("div", { className: b('subtitle') }, desc || locale.shortpassword.desc),
+                React__default.createElement("div", { className: b('input') },
+                    React__default.createElement("input", { ref: textInput, className: b('input-real'), type: "number", style: systemStyle(), maxLength: 6, value: inputValue, onChange: (e) => changeValue(e) }),
+                    React__default.createElement("div", { className: b('input-site') }),
+                    React__default.createElement("div", { className: b('input-fake'), onClick: () => focus() }, [...new Array(comLen).keys()].map((item, index) => {
+                        return (React__default.createElement("div", { className: b('input-fake__li'), key: index }, String(inputValue).length > index ? (React__default.createElement("div", { className: b('input-fake__li__icon') })) : null));
+                    }))),
+                React__default.createElement("div", { className: b('message') },
+                    React__default.createElement("div", { className: b('message__error') }, errorMsg),
+                    tips || locale.shortpassword.tips ? (React__default.createElement("div", { className: b('message__forget') },
+                        React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "icon", size: "11px", name: "tips" }),
+                        React__default.createElement("div", { onClick: onTips }, tips || locale.shortpassword.tips))) : null),
+                !noButton ? (React__default.createElement("div", { className: b('footer') },
+                    React__default.createElement("div", { className: b('footer__cancel'), onClick: onCancel }, locale.cancel),
+                    React__default.createElement("div", { className: b('footer__sure'), onClick: () => sure() }, locale.confirm))) : null))));
+};
+ShortPassword.defaultProps = defaultProps;
+ShortPassword.displayName = 'NutShortPassword';
+
+export { ShortPassword as S };

package/dist/esm/sidenavbar.taro-006cf38b.js

@@ -0,0 +1,35 @@
+import React__default, { useState } from 'react';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+import { P as Popup } from './popup.taro-cb777e09.js';
+import { O as OffsetContext } from './offsetContext-bfb02c25.js';
+
+const defaultProps = {
+    showhead: false,
+    position: 'left',
+    width: '80%',
+};
+const SideNavBar = (props) => {
+    useConfig();
+    const { title, visible, width, position, children, className, showhead, onClose, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const offset = props.offset ? Number(props.offset) : 20;
+    const [sidenavbarShow, setSidenavbarShow] = useState(true);
+    const handleClick = () => {
+        setSidenavbarShow(!sidenavbarShow);
+    };
+    return (React__default.createElement(Popup, { visible: visible, style: { width, height: '100%' }, position: position, onClose: onClose },
+        React__default.createElement("div", { className: className ? `${className} nut-sidenavbar` : 'nut-sidenavbar', ...rest },
+            React__default.createElement("div", { className: "nut-sidenavbar__content" },
+                React__default.createElement("div", { className: `nut-sidenavbar__list ${sidenavbarShow ? 'nutShow' : 'nutHide'}`, onClick: handleClick },
+                    React__default.createElement("div", { className: "nut-sidenavbar__title border-bt ", style: { paddingLeft: `${offset}px` } },
+                        title,
+                        React__default.createElement("i", { className: `arrow-icon ${sidenavbarShow ? 'arrow-up' : 'arrow-down'}` })),
+                    React__default.createElement(OffsetContext.Provider, { value: offset },
+                        React__default.createElement("div", { className: "nut-sidenavbar__content" }, children)))))));
+};
+SideNavBar.defaultProps = defaultProps;
+SideNavBar.displayName = 'NutSideNavBar';
+
+export { SideNavBar as S };

package/dist/esm/sidenavbaritem.taro-fee11d26.js

@@ -1,25 +1,12 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "ikey", "children", "onClick"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React__default from 'react';
-var SideNavBarItem = function SideNavBarItem(props) {
-  var title = props.title,
-    ikey = props.ikey,
-    children = props.children,
-    onClick = props.onClick,
-    rest = _objectWithoutProperties(props, _excluded);
-  var clickFn = function clickFn(e) {
-    e.stopPropagation();
-    onClick && onClick({
-      title: title,
-      ikey: ikey
-    });
-  };
-  return React__default.createElement("div", _objectSpread({
-    className: "nut-subsidenavbar__item border-bt",
-    onClick: clickFn
-  }, rest), title);
+
+const SideNavBarItem = (props) => {
+    const { title, ikey, children, onClick, ...rest } = props;
+    const clickFn = (e) => {
+        e.stopPropagation();
+        onClick && onClick({ title, ikey });
+    };
+    return (React__default.createElement("div", { className: "nut-subsidenavbar__item border-bt", onClick: clickFn, ...rest }, title));
 };
+
 export { SideNavBarItem as S };

package/dist/esm/signature.taro-33632585.js

@@ -0,0 +1,143 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import Taro from '@tarojs/taro';
+import { B as Button } from './button.taro-4ce133b9.js';
+import { c as cn } from './bem-893ad28d.js';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+
+/* eslint-disable react/no-unknown-property */
+const defaultProps = {
+    canvasId: 'spcanvas',
+    type: 'png',
+    lineWidth: 2,
+    strokeStyle: '#000',
+    className: '',
+};
+const Signature = (props) => {
+    const { locale } = useConfig();
+    const { canvasId, type, lineWidth, strokeStyle, unSupportTpl, className, confirm, clear, onConfirm, onClear, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('signature');
+    const canvasRef = useRef(null);
+    const wrapRef = useRef(null);
+    const [canvasHeight, setCanvasHeight] = useState(0);
+    const [canvasWidth, setCanvasWidth] = useState(0);
+    const ctx = useRef(null);
+    const [disalbeScroll] = useState('true');
+    const startEventHandler = (event) => {
+        if (ctx.current) {
+            ctx.current.beginPath();
+            ctx.current.lineWidth = lineWidth;
+            ctx.current.strokeStyle = strokeStyle;
+        }
+    };
+    const moveEventHandler = (event) => {
+        if (ctx.current) {
+            const evt = event.changedTouches[0];
+            let mouseX = evt.x || evt.clientX;
+            let mouseY = evt.y || evt.clientY;
+            if (Taro.getEnv() === 'WEB' && canvasRef.current) {
+                const coverPos = canvasRef.current.getBoundingClientRect();
+                mouseX = evt.clientX - coverPos.left;
+                mouseY = evt.clientY - coverPos.top;
+            }
+            Taro.nextTick(() => {
+                // ctx.current.lineCap = 'round'
+                // ctx.current.lineJoin = 'round'
+                ctx.current?.lineTo(mouseX, mouseY);
+                ctx.current?.stroke();
+            });
+        }
+    };
+    const endEventHandler = (event) => { };
+    const handleClearBtn = () => {
+        if (ctx.current) {
+            ctx.current.clearRect(0, 0, canvasWidth, canvasHeight);
+            ctx.current.closePath();
+        }
+        clear && clear();
+        onClear && onClear();
+    };
+    const handleConfirmBtn = () => {
+        onSave();
+    };
+    const onSave = () => {
+        Taro.createSelectorQuery()
+            .select(`#${canvasId}`)
+            .fields({
+            node: true,
+            size: true,
+        })
+            .exec((res) => {
+            Taro.canvasToTempFilePath({
+                canvas: res[0].node,
+                fileType: props.type,
+                canvasId: `${canvasId}`,
+                success: (res) => {
+                    handleClearBtn();
+                    confirm && confirm(res.tempFilePath);
+                    onConfirm && onConfirm(res.tempFilePath);
+                },
+                fail: (res) => {
+                    console.log('保存失败');
+                },
+            });
+        });
+    };
+    const canvasSetting = (canvasDom, width, height) => {
+        const canvas = canvasDom;
+        canvas.current = canvas;
+        ctx.current = canvas.getContext('2d');
+        setCanvasWidth(width);
+        setCanvasHeight(height);
+        canvas.width = width;
+        canvas.height = height;
+        if (ctx.current) {
+            ctx.current.clearRect(0, 0, width, height);
+            ctx.current.beginPath();
+            ctx.current.lineWidth = lineWidth;
+            ctx.current.strokeStyle = strokeStyle;
+        }
+    };
+    const initCanvas = () => {
+        Taro.nextTick(() => {
+            setTimeout(() => {
+                if (Taro.getEnv() === 'WEAPP' || Taro.getEnv() === 'JD') {
+                    Taro.createSelectorQuery()
+                        .select(`#${canvasId}`)
+                        .fields({
+                        node: true,
+                        size: true,
+                    }, (res) => {
+                        const { node, width, height } = res;
+                        canvasSetting(node, width, height);
+                    })
+                        .exec();
+                }
+                else {
+                    const canvasDom = document.getElementById(`${canvasId}`);
+                    let canvas = canvasDom;
+                    if (canvasDom?.tagName !== 'CANVAS') {
+                        canvas = canvasDom?.getElementsByTagName('canvas')[0];
+                    }
+                    canvasSetting(canvas, canvasDom?.offsetWidth, canvasDom?.offsetHeight);
+                }
+            }, 1000);
+        });
+    };
+    useEffect(() => {
+        initCanvas();
+    }, []);
+    return (React__default.createElement("div", { className: `${b()} ${className}`, ...rest },
+        React__default.createElement("div", { className: `${b('inner')} spcanvas_WEAPP`, ref: wrapRef }, Taro.getEnv() === 'WEAPP' || Taro.getEnv() === 'JD' ? (React__default.createElement("canvas", { id: canvasId, ref: canvasRef, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            canvasId: canvasId, disalbeScroll: true, type: "2d", onTouchStart: startEventHandler, onTouchMove: moveEventHandler, onTouchEnd: endEventHandler })) : (React__default.createElement("canvas", { id: canvasId, ref: canvasRef, "canvas-id": canvasId, "disalbe-scroll": disalbeScroll, onTouchStart: startEventHandler, onTouchMove: moveEventHandler, onTouchEnd: endEventHandler, onTouchCancel: endEventHandler }))),
+        React__default.createElement(Button, { className: `${b('btn')}`, type: "default", onClick: () => handleClearBtn() }, locale.signature.reSign),
+        React__default.createElement(Button, { className: `${b('btn')}`, type: "primary", onClick: () => handleConfirmBtn() }, locale.confirm)));
+};
+Signature.defaultProps = defaultProps;
+Signature.displayName = 'NutSignature';
+
+export { Signature as S };

package/dist/esm/skeleton.taro-853ce460.js

@@ -1,99 +1,62 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "width", "height", "animated", "row", "title", "avatar", "avatarSize", "round", "loading", "children", "avatarShape"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React__default from 'react';
 import classNames from 'classnames';
 import { A as Avatar } from './avatar.taro-85ced995.js';
 import { c as cn } from './bem-893ad28d.js';
-var defaultProps = {
-  width: '100px',
-  height: '100px',
-  row: 1,
-  animated: false,
-  title: false,
-  avatar: false,
-  round: false,
-  avatarSize: '50px',
-  loading: false,
-  avatarShape: 'round'
+
+const defaultProps = {
+    width: '100px',
+    height: '100px',
+    row: 1,
+    animated: false,
+    title: false,
+    avatar: false,
+    round: false,
+    avatarSize: '50px',
+    loading: false,
+    avatarShape: 'round',
 };
-var Skeleton = function Skeleton(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    className = _defaultProps$props.className,
-    width = _defaultProps$props.width,
-    height = _defaultProps$props.height,
-    animated = _defaultProps$props.animated,
-    row = _defaultProps$props.row,
-    title = _defaultProps$props.title,
-    avatar = _defaultProps$props.avatar,
-    avatarSize = _defaultProps$props.avatarSize,
-    round = _defaultProps$props.round,
-    loading = _defaultProps$props.loading,
-    children = _defaultProps$props.children,
-    avatarShape = _defaultProps$props.avatarShape,
-    restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var b = cn('skeleton');
-  var classes = classNames(className, b());
-  var blockClass = classNames({
-    blockClass: true,
-    'blockClass--round': round
-  });
-  var avatarClass = classNames(_defineProperty({
-    avatarClass: true
-  }, "avatarClass--".concat(avatarShape), avatarShape));
-  var repeatLines = function repeatLines(num) {
-    return Array.from({
-      length: num
-    }, function (v, i) {
-      return i;
-    });
-  };
-  var getStyle = function getStyle() {
-    if (avatarSize) {
-      return {
-        width: avatarSize,
-        height: avatarSize
-      };
-    }
-    return {
-      width: '50px',
-      height: '50px'
+const Skeleton = (props) => {
+    const { className, width, height, animated, row, title, avatar, avatarSize, round, loading, children, avatarShape, ...restProps } = {
+        ...defaultProps,
+        ...props,
     };
-  };
-  return React__default.createElement(React__default.Fragment, null, loading ? React__default.createElement("div", null, children) : React__default.createElement("div", _objectSpread({
-    className: classes
-  }, restProps), animated && React__default.createElement("div", {
-    className: "skeleton-animation"
-  }), React__default.createElement("div", {
-    className: "nut-skeleton-content"
-  }, avatar && React__default.createElement(Avatar, {
-    className: avatarClass,
-    bgColor: "rgb(239, 239, 239)",
-    shape: avatarShape,
-    style: getStyle()
-  }), row === 1 && React__default.createElement("div", {
-    className: blockClass,
-    style: {
-      width: width,
-      height: height
-    }
-  }), React__default.createElement("div", {
-    className: "skeleton-content-line"
-  }, title && React__default.createElement("div", {
-    className: "skeleton-title"
-  }), repeatLines(row).map(function (item, index) {
-    return React__default.createElement("div", {
-      className: blockClass,
-      key: index,
-      style: {
-        width: width,
-        height: height
-      }
+    const b = cn('skeleton');
+    const classes = classNames(className, b());
+    const blockClass = classNames({
+        blockClass: true,
+        'blockClass--round': round,
+    });
+    const avatarClass = classNames({
+        avatarClass: true,
+        [`avatarClass--${avatarShape}`]: avatarShape,
     });
-  })))));
+    const repeatLines = (num) => {
+        return Array.from({ length: num }, (v, i) => i);
+    };
+    const getStyle = () => {
+        if (avatarSize) {
+            return {
+                width: avatarSize,
+                height: avatarSize,
+            };
+        }
+        return {
+            width: '50px',
+            height: '50px',
+        };
+    };
+    return (React__default.createElement(React__default.Fragment, null, loading ? (React__default.createElement("div", null, children)) : (React__default.createElement("div", { className: classes, ...restProps },
+        animated && React__default.createElement("div", { className: "skeleton-animation" }),
+        React__default.createElement("div", { className: "nut-skeleton-content" },
+            avatar && (React__default.createElement(Avatar, { className: avatarClass, bgColor: "rgb(239, 239, 239)", shape: avatarShape, style: getStyle() })),
+            row === 1 && (React__default.createElement("div", { className: blockClass, style: { width, height } })),
+            React__default.createElement("div", { className: "skeleton-content-line" },
+                title && React__default.createElement("div", { className: "skeleton-title" }),
+                repeatLines(row).map((item, index) => {
+                    return (React__default.createElement("div", { className: blockClass, key: index, style: { width, height } }));
+                })))))));
 };
 Skeleton.defaultProps = defaultProps;
 Skeleton.displayName = 'NutSkeleton';
+
 export { Skeleton as S };