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

package/dist/esm/inputnumber.taro-91f65d17.js

@@ -0,0 +1,130 @@
+import React__default, { useState, 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 { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    disabled: false,
+    buttonSize: '',
+    min: 1,
+    max: 9999,
+    inputWidth: '',
+    readonly: false,
+    modelValue: 0,
+    step: 1,
+    decimalPlaces: 0,
+    isAsync: false,
+};
+function pxCheck(value) {
+    return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+}
+const InputNumber = (props) => {
+    const { children, disabled, buttonSize, min, max, inputWidth, readonly, modelValue, decimalPlaces, step, isAsync, className, style, add, reduce, change, overlimit, blur, focus, onAdd, onReduce, onOverlimit, onBlurFuc, onFocus, onChangeFuc, iconClassPrefix, iconFontClassName, ...restProps } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [inputValue, setInputValue] = useState(modelValue);
+    useEffect(() => {
+        setInputValue(modelValue);
+    }, [modelValue]);
+    const b = cn('inputnumber');
+    const classes = classNames({
+        [`${b('')}--disabled`]: disabled,
+    }, className, b(''));
+    const styles = {
+        height: pxCheck(buttonSize),
+        ...style,
+    };
+    const addAllow = (value = Number(inputValue)) => {
+        return value < Number(max) && !disabled;
+    };
+    const reduceAllow = (value = Number(inputValue)) => {
+        return value > Number(min) && !disabled;
+    };
+    const iconMinusClasses = classNames('nut-inputnumber__icon', {
+        'nut-inputnumber__icon--disabled': !reduceAllow(),
+    });
+    const iconAddClasses = classNames('nut-inputnumber__icon', {
+        'nut-inputnumber__icon--disabled': !addAllow(),
+    });
+    const fixedDecimalPlaces = (v) => {
+        return Number(v).toFixed(Number(decimalPlaces));
+    };
+    const emitChange = (value, e) => {
+        const outputValue = fixedDecimalPlaces(value);
+        onChangeFuc && onChangeFuc(outputValue, e);
+        change && change(outputValue, e);
+        if (!isAsync) {
+            setInputValue(outputValue);
+        }
+    };
+    const reduceNumber = (e) => {
+        onReduce && onReduce(e);
+        reduce && reduce(e);
+        if (reduceAllow()) {
+            const outputValue = Number(inputValue) - Number(step);
+            emitChange(outputValue, e);
+        }
+        else {
+            onOverlimit && onOverlimit(e);
+            overlimit && overlimit(e);
+        }
+    };
+    const addNumber = (e) => {
+        onAdd && onAdd(e);
+        add && add(e);
+        if (addAllow()) {
+            const outputValue = Number(inputValue) + Number(step);
+            emitChange(outputValue, e);
+        }
+        else {
+            onOverlimit && onOverlimit(e);
+            overlimit && overlimit(e);
+        }
+    };
+    const changeValue = (e) => {
+        const input = e.target;
+        change && change(input.value, e);
+        onChangeFuc && onChangeFuc(input.value, e);
+        if (!isAsync) {
+            setInputValue(input.value);
+        }
+    };
+    const focusValue = (e) => {
+        if (disabled)
+            return;
+        if (readonly)
+            return;
+        onFocus && onFocus(e);
+        focus && focus(e);
+    };
+    const burValue = (e) => {
+        if (disabled)
+            return;
+        if (readonly)
+            return;
+        const input = e.target;
+        let value = +input.value;
+        if (value < Number(min)) {
+            value = Number(min);
+        }
+        else if (value > Number(max)) {
+            value = Number(max);
+        }
+        emitChange(value, e);
+        onBlurFuc && onBlurFuc(e);
+        blur && blur(e);
+    };
+    return (React__default.createElement("div", { className: classes, style: styles, ...restProps },
+        React__default.createElement("div", { className: "nut-input-minus" },
+            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: iconMinusClasses, size: buttonSize, name: "minus", onClick: reduceNumber })),
+        React__default.createElement("input", { className: "nut-number-input", type: "digit", min: min, max: max, style: { width: pxCheck(inputWidth) }, disabled: disabled, readOnly: readonly, value: inputValue, onInput: changeValue, onBlur: burValue, onFocus: focusValue }),
+        React__default.createElement("div", { className: "nut-input-add" },
+            React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: iconAddClasses, size: buttonSize, name: "plus", onClick: addNumber }))));
+};
+InputNumber.defaultProps = defaultProps;
+InputNumber.displayName = 'NutInputNumber';
+
+export { InputNumber as I };

package/dist/esm/layout.taro-9046d093.js

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+const defaultProps = {};
+const Layout = (props) => {
+    ({ ...defaultProps, ...props });
+    return React__default.createElement("div", { className: "nut-layout" }, "Layout");
+};
+Layout.defaultProps = defaultProps;
+Layout.displayName = 'NutLayout';
+
+export { Layout as L };

package/dist/esm/menu.taro-7e4038a1.js

@@ -0,0 +1,99 @@
+import React__default, { useRef, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    className: '',
+    style: {},
+    activeColor: '#F2270C',
+    closeOnClickOverlay: true,
+    scrollFixed: false,
+    lockScroll: true,
+    titleIcon: '',
+};
+const Menu = (props) => {
+    const { className, titleIcon, scrollFixed, lockScroll, closeOnClickOverlay, children, activeColor, iconClassPrefix, iconFontClassName, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const parentRef = useRef(null);
+    const onScroll = () => { };
+    useEffect(() => {
+        if (scrollFixed) {
+            window.addEventListener('scroll', onScroll);
+        }
+        return () => window.removeEventListener('scroll', onScroll);
+    }, []);
+    const [itemShow, setItemShow] = useState([]);
+    const [itemTitle, setItemTitle] = useState([]);
+    const toggleItemShow = (index) => {
+        itemShow[index] = !itemShow[index];
+        const temp = itemShow.map((i, idx) => (idx === index ? i : false));
+        setItemShow([...temp]);
+    };
+    const hideItemShow = (index) => {
+        itemShow[index] = false;
+        setItemShow([...itemShow]);
+    };
+    const updateTitle = (text, index) => {
+        itemTitle[index] = text;
+        setItemTitle([...itemTitle]);
+    };
+    const parent = () => {
+        return parentRef;
+    };
+    const cloneChildren = () => {
+        return React__default.Children.map(children, (child, index) => {
+            return React__default.cloneElement(child, {
+                showPopup: itemShow[index],
+                orderKey: index,
+                activeColor,
+                parent: {
+                    closeOnClickOverlay,
+                    lockScroll,
+                    toggleItemShow,
+                    updateTitle,
+                    hideItemShow,
+                    parent,
+                },
+            });
+        });
+    };
+    return (React__default.createElement("div", { className: `nut-menu ${className}`, ...rest, ref: parentRef },
+        React__default.createElement("div", { className: "nut-menu-relative" },
+            React__default.createElement("div", { className: `nut-menu__bar ${itemShow.includes(true) ? 'opened' : ''} ${className}` }, React__default.Children.toArray(children).map((child, index) => {
+                if (!child)
+                    return null;
+                const { disabled, title, value, direction, options, className } = child.props;
+                const currentTitle = options?.filter((option) => option.value === value);
+                function finallyTitle() {
+                    if (title)
+                        return title;
+                    if (itemTitle && itemTitle[index])
+                        return itemTitle[index];
+                    if (currentTitle && currentTitle[0] && currentTitle[0].text)
+                        return currentTitle[0].text;
+                    return '';
+                }
+                return (React__default.createElement("div", { className: `nut-menu__item ${classNames({
+                        active: itemShow[index],
+                        disabled,
+                    })} ${className}`, style: { color: itemShow[index] ? activeColor : '' }, key: index, onClick: () => {
+                        !disabled && toggleItemShow(index);
+                    } },
+                    React__default.createElement("div", { className: `nut-menu__title ${classNames({
+                            active: itemShow[index],
+                            disabled,
+                        })}` },
+                        React__default.createElement("div", { className: "nut-menu__title-text" }, finallyTitle()),
+                        React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: "nut-menu__title-icon", size: "10", name: titleIcon ||
+                                (direction === 'up' ? 'arrow-up' : 'down-arrow') }))));
+            })),
+            cloneChildren())));
+};
+Menu.defaultProps = defaultProps;
+Menu.displayName = 'NutMenu';
+
+export { Menu as M };

package/dist/esm/menuitem.taro-96cc4f15.js

@@ -0,0 +1,130 @@
+import React__default, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import { CSSTransition } from 'react-transition-group';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { O as Overlay } from './overlay.taro-21e87fb1.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    className: '',
+    style: {},
+    columns: 1,
+    direction: 'down',
+    optionsIcon: 'Check',
+    activeTitleClass: '',
+    inactiveTitleClass: '',
+    iconClassPrefix: 'nut-icon',
+    fontClassName: 'nutui-iconfont',
+    onChange: (value) => undefined,
+};
+const MenuItem = forwardRef((props, ref) => {
+    useConfig();
+    const mergedProps = { ...defaultProps, ...props };
+    const { style, options, value, columns, title, optionsIcon, direction, onChange, activeTitleClass, inactiveTitleClass, children, iconClassPrefix, iconFontClassName, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const { activeColor, showPopup, parent, orderKey } = mergedProps;
+    const [_showPopup, setShowPopup] = useState(showPopup);
+    const [_value, setValue] = useState(value);
+    useEffect(() => {
+        setShowPopup(showPopup);
+    }, [showPopup]);
+    useEffect(() => {
+        getParentOffset();
+    }, [_showPopup]);
+    useImperativeHandle(ref, () => ({
+        toggle: parent.toggleItemShow,
+    }));
+    const getIconCName = (optionVal, value) => {
+        return classNames({
+            [activeTitleClass]: optionVal === value,
+            [inactiveTitleClass]: optionVal !== value,
+        });
+    };
+    const setTitle = (text) => {
+        if (!title) {
+            parent.updateTitle(text, orderKey);
+        }
+    };
+    const handleClick = (item) => {
+        parent.toggleItemShow(orderKey);
+        setTitle(item.text);
+        setValue(item.value);
+        onChange && onChange(item);
+    };
+    const [position, setPosition] = useState({
+        top: 0,
+        height: 0,
+    });
+    const getParentOffset = () => {
+        setTimeout(async () => {
+            const p = parent.parent().current;
+            const rect = await p.getBoundingClientRect();
+            setPosition({
+                height: rect.height,
+                top: rect.top,
+            });
+        });
+    };
+    const isShow = () => {
+        if (_showPopup)
+            return {};
+        return { display: 'none' };
+    };
+    const getPosition = () => {
+        return direction === 'down'
+            ? { top: `${position.top + position.height}px` }
+            : { bottom: `${window.innerHeight - position.top}px`, top: 'auto' };
+    };
+    const placeholderStyle = () => {
+        if (direction === 'down') {
+            return {
+                height: `${position.top + position.height}px`,
+                ...isShow(),
+                ...style,
+            };
+        }
+        return {
+            height: `${window.innerHeight - position.top}px`,
+            top: 'auto',
+            ...isShow(),
+            ...style,
+        };
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: `placeholder-element ${classNames({
+                up: direction === 'up',
+            })}`, style: placeholderStyle(), onClick: () => parent.toggleItemShow(orderKey) }),
+        React__default.createElement(Overlay, { overlayClass: "nut-menu__overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: _showPopup, closeOnClickOverlay: parent.closeOnClickOverlay, onClick: () => {
+                parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+            } }),
+        React__default.createElement("div", { className: direction === 'down'
+                ? 'nut-menu-item__wrap'
+                : 'nut-menu-item__wrap-up', style: {
+                // ...getPosition(),
+                ...isShow(),
+            } },
+            React__default.createElement(CSSTransition, { in: _showPopup, timeout: 100, classNames: direction === 'down' ? 'menu-item' : 'menu-item-up' },
+                React__default.createElement("div", { className: "nut-menu-item__content" },
+                    options?.map((item, index) => {
+                        return (React__default.createElement("div", { className: `nut-menu-item__option ${classNames({
+                                active: item.value === _value,
+                            })}`, key: item.text, style: {
+                                flexBasis: `${100 / columns}%`,
+                            }, onClick: () => {
+                                handleClick(item);
+                            } },
+                            item.value === _value ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, className: getIconCName(item.value, value), name: optionsIcon, color: activeColor })) : null,
+                            React__default.createElement("div", { className: getIconCName(item.value, value), style: {
+                                    color: `${item.value === _value ? activeColor : ''}`,
+                                } }, item.text)));
+                    }),
+                    children)))));
+});
+MenuItem.defaultProps = defaultProps;
+MenuItem.displayName = 'NutMenuItem';
+
+export { MenuItem as M };

package/dist/esm/navbar.taro-777c4705.js

@@ -0,0 +1,79 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { c as cn } from './bem-350c1702.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    title: '',
+    desc: '',
+    leftShow: true,
+    titIcon: '',
+    className: '',
+    leftText: '',
+    fixed: false,
+    safeAreaInsetTop: false,
+    border: false,
+    placeholder: false,
+    zIndex: 10,
+    style: {},
+};
+const NavBar = (props) => {
+    const { desc, title, titIcon, leftShow, className, style, leftText, fixed, safeAreaInsetTop, border, placeholder, zIndex, onClickTitle, onClickIcon, onClickBack, onClickRight, iconClassPrefix, iconFontClassName, } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('navbar');
+    const children = Array.isArray(props.children)
+        ? props.children
+        : [props.children];
+    const slot = children.reduce((slot, item) => {
+        const data = slot;
+        if (item && item.props) {
+            data[item.props.slot] = item;
+        }
+        return data;
+    }, {});
+    const styles = () => {
+        return {
+            ...style,
+            zIndex,
+        };
+    };
+    const renderLeft = () => {
+        return (React__default.createElement("div", { className: `${b('left')}`, onClick: (e) => onClickBack(e) },
+            leftShow && (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "left", color: "#979797" })),
+            leftText && React__default.createElement("div", { className: `${b('text')}` }, leftText),
+            slot.left));
+    };
+    const renderContent = () => {
+        return (React__default.createElement("div", { className: `${b('title')}` },
+            title && (React__default.createElement("div", { className: "title", onClick: (e) => onClickTitle(e) }, title)),
+            titIcon && (React__default.createElement("div", { onClick: (e) => onClickIcon(e) },
+                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: titIcon }))),
+            slot.content));
+    };
+    const renderRight = () => {
+        return (React__default.createElement("div", { className: `${b('right')}`, onClick: (e) => onClickRight(e) },
+            desc && React__default.createElement("div", { className: `${b('text')}` }, desc),
+            slot.right));
+    };
+    const renderWrapper = () => {
+        return (React__default.createElement("div", { className: cls, style: styles() },
+            renderLeft(),
+            renderContent(),
+            renderRight()));
+    };
+    const classes = classNames({
+        [`nut-navbar--border`]: border,
+        [`nut-navbar--fixed`]: fixed,
+        [`nut-navbar--safe-area-inset-top`]: safeAreaInsetTop,
+    });
+    const cls = classNames(b(''), classes, className);
+    return (React__default.createElement(React__default.Fragment, null, fixed && placeholder ? (React__default.createElement("div", { className: `${b('')}--placeholder` }, renderWrapper())) : (renderWrapper())));
+};
+NavBar.defaultProps = defaultProps;
+NavBar.displayName = 'NutNavBar';
+
+export { NavBar as N };