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

package/dist/esm/form.taro-0b399b30.js

@@ -0,0 +1,178 @@
+import React__default, { useRef } from 'react';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { C as CellGroup } from './cellgroup.taro-abe501bc.js';
+import { a as FormItemContext, F as FormItem } from './formitem.taro-190a3326.js';
+
+/**
+ * 用于存储表单的数据
+ */
+class FormStore {
+    store = {}; // 存放表单中所有的数据 eg. {password: "ddd",username: "123"}
+    fieldEntities = []; // 所有的组件实例
+    // 成功和失败的回调
+    callbacks = {};
+    errList = [];
+    constructor() {
+        this.callbacks = {
+            onFinish: (value) => { },
+            onFinishFailed: () => { },
+        };
+    }
+    /**
+     * 注册组件实例
+     * @param field
+     */
+    registerField = (field) => {
+        this.fieldEntities.push(field);
+        return () => {
+            this.fieldEntities = this.fieldEntities.filter((item) => item != field);
+            delete this.store[field.props.name];
+        };
+    };
+    getFieldValue = (name) => {
+        return this.store[name];
+    };
+    /**
+     * 存储组件数据
+     * @param newStore { [name]: newValue }
+     */
+    setFieldsValue = (newStore) => {
+        this.store = {
+            ...this.store,
+            ...newStore,
+        };
+        this.fieldEntities.forEach((enetity) => {
+            const { name } = enetity.props;
+            Object.keys(newStore).forEach((key) => {
+                if (key === name) {
+                    enetity.onStoreChange();
+                }
+            });
+        });
+    };
+    /**
+     * 表单校验
+     * rules: { required: true, message: '' }
+     * descriptor: {
+     *    username: {
+     *      type: 'string',
+     *      required: true,
+     *      validator: (rule, value) => {
+     *        return /^[a-zA-Z0-9]+$/.test(value)
+     *      },
+     *    },
+     *  }
+     */
+    validate = () => {
+        const err = [];
+        this.errList.length = 0;
+        this.fieldEntities.forEach((entity) => {
+            const { name, rules = [] } = entity.props;
+            const descriptor = {};
+            if (rules.length) {
+                // 多条校验规则
+                if (rules.length > 1) {
+                    descriptor[name] = [];
+                    rules.map((v) => {
+                        descriptor[name].push(v);
+                    });
+                }
+                else {
+                    descriptor[name] = rules[0];
+                }
+            }
+            // const validator = new Schema(descriptor)
+            // validator.validate({ [name]: this.store[name] }, (errors) => {
+            //   if (errors) {
+            //     err.push(...errors)
+            //     this.errList.push(...errors)
+            //     // 表单项更新
+            //   }
+            //   entity.onStoreChange()
+            // })
+        });
+        return err;
+    };
+    setCallback = (callback) => {
+        this.callbacks = {
+            ...this.callbacks,
+            ...callback,
+        };
+    };
+    submit = () => {
+        const err = this.validate();
+        if (err.length === 0) {
+            this.callbacks.onFinish?.(this.store);
+        }
+        else if (err.length > 0) {
+            this.callbacks.onFinishFailed?.(err);
+        }
+    };
+    resetFields = () => { };
+    getForm = () => {
+        return {
+            setCallback: this.setCallback,
+            registerField: this.registerField,
+            getFieldValue: this.getFieldValue,
+            setFieldsValue: this.setFieldsValue,
+            submit: this.submit,
+            store: this.store,
+            errList: this.errList,
+            fieldEntities: this.fieldEntities,
+        };
+    };
+}
+const useForm = (form) => {
+    const formRef = useRef();
+    if (!formRef.current) {
+        if (form) {
+            formRef.current = form;
+        }
+        else {
+            const formStore = new FormStore();
+            formRef.current = formStore.getForm();
+        }
+    }
+    return [formRef.current];
+};
+
+const defaultProps = {
+    ...ComponentDefaults,
+    className: '',
+    style: undefined,
+    form: {},
+    labelPosition: 'Right',
+    formGroupTitle: '',
+    onFinish: (obj) => { },
+    onFinishFailed: (value) => { },
+    starPositon: 'Left',
+};
+const PositionInfo = {
+    Top: 'form-layout-top',
+    Left: 'form-layout-left',
+    Right: 'form-layout-right',
+};
+const Form = (props) => {
+    const { children, onFinish, onFinishFailed, labelPosition, starPositon, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [formInstance] = useForm();
+    formInstance.starPositon = starPositon;
+    const { setCallback, submit } = formInstance;
+    setCallback({
+        onFinish,
+        onFinishFailed,
+    });
+    return (React__default.createElement("form", { className: `nut-form ${PositionInfo[labelPosition]} ${props.className}`, style: props.style, onSubmit: (e) => {
+            e.preventDefault();
+            submit();
+        } },
+        React__default.createElement(CellGroup, null,
+            React__default.createElement(FormItemContext.Provider, { value: formInstance }, children))));
+};
+Form.defaultProps = defaultProps;
+Form.displayName = 'NutForm';
+Form.Item = FormItem;
+
+export { Form as F };

package/dist/esm/formitem.taro-190a3326.js

@@ -0,0 +1,89 @@
+import React__default, { createContext } from 'react';
+import { C as Cell } from './cell.taro-a10a74d3.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+
+const FormItemContext = createContext({});
+
+const defaultProps = {
+    ...ComponentDefaults,
+    name: '',
+    label: '',
+    className: '',
+    rules: [{ required: false, message: '' }],
+    disabled: false,
+    labelWidth: 90,
+    errorMessageAlign: 'left',
+    showErrorLine: true,
+    showErrorMessage: true,
+};
+class FormItem extends React__default.Component {
+    static defaultProps = defaultProps;
+    static contextType = FormItemContext;
+    cancelRegister;
+    componentDidMount() {
+        // 注册组件实例到FormStore
+        this.cancelRegister = this.context.registerField(this);
+    }
+    componentWillUnmount() {
+        if (this.cancelRegister) {
+            this.cancelRegister();
+        }
+    }
+    // children添加value属性和onChange事件
+    getControlled = (children) => {
+        const { getFieldValue, setFieldsValue } = this.context;
+        const { name } = this.props;
+        const type = children.type.NAME;
+        return {
+            value: getFieldValue(name),
+            onChange: (event) => {
+                let newValue = event;
+                switch (type) {
+                    case 'checkbox':
+                        newValue = event.target
+                            .value;
+                        break;
+                }
+                setFieldsValue({ [name]: newValue });
+            },
+        };
+    };
+    onStoreChange = () => {
+        this.forceUpdate();
+    };
+    renderLayout = (childNode) => {
+        const { label, name, rules = [{ required: false, message: '' }], className, labelWidth, errorMessageAlign, showErrorLine, showErrorMessage, } = {
+            ...defaultProps,
+            ...this.props,
+        };
+        const item = this.context.errList?.length > 0 &&
+            this.context.errList?.filter((item) => {
+                return item.field === name;
+            });
+        const { starPositon } = this.context;
+        const renderStar = rules.length > 0 && rules[0].required && (React__default.createElement("i", { className: "required" }));
+        const renderLabel = starPositon === 'Right' ? (React__default.createElement(React__default.Fragment, null,
+            label,
+            renderStar)) : (React__default.createElement(React__default.Fragment, null,
+            renderStar,
+            label));
+        return (React__default.createElement(Cell, { className: `nut-form-item ${className}` },
+            label ? (React__default.createElement("div", { className: "nut-cell__title nut-form-item__label", style: {
+                    width: this.pxCheck(labelWidth),
+                } }, renderLabel)) : null,
+            React__default.createElement("div", { className: "nut-cell__value nut-form-item__body" },
+                React__default.createElement("div", { className: "nut-form-item__body__slots" }, childNode),
+                item.length > 0 && (React__default.createElement("div", { className: "nut-form-item__body__tips", style: { textAlign: errorMessageAlign } }, item[0].message)))));
+    };
+    pxCheck = (value) => {
+        return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+    };
+    render() {
+        const { children } = this.props;
+        const c = Array.isArray(children) ? children[0] : children;
+        const returnChildNode = React__default.cloneElement(c, this.getControlled(c));
+        return this.renderLayout(returnChildNode);
+    }
+}
+
+export { FormItem as F, FormItemContext as a };

package/dist/esm/get-scroll-parent-b4a07e65.js

@@ -0,0 +1,25 @@
+import { c as canUseDom } from './can-use-dom-3eeb5af4.js';
+
+const defaultRoot = canUseDom ? window : undefined;
+const overflowStylePatterns = ['scroll', 'auto', 'overlay'];
+function isElement(node) {
+    const ELEMENT_NODE_TYPE = 1;
+    return node.nodeType === ELEMENT_NODE_TYPE;
+}
+function getScrollParent(el, root = defaultRoot) {
+    let node = el;
+    while (node && node !== root && isElement(node)) {
+        if (node === document.body) {
+            return root;
+        }
+        const { overflowY } = window.getComputedStyle(node);
+        if (overflowStylePatterns.includes(overflowY) &&
+            node.scrollHeight > node.clientHeight) {
+            return node;
+        }
+        node = node.parentNode;
+    }
+    return root;
+}
+
+export { getScrollParent as g };

package/dist/esm/grid.taro-3503b82c.js

@@ -0,0 +1,61 @@
+import React__default from 'react';
+import classNames from 'classnames';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { c as cn } from './bem-350c1702.js';
+import { G as GridContext } from './grid.taro.context-c2bbfb4f.js';
+
+const defaultProps = {
+    columnNum: 4,
+    border: true,
+    gutter: 0,
+    center: true,
+    square: false,
+    reverse: false,
+    direction: 'vertical',
+    iconSize: 28,
+    iconColor: '',
+};
+const Grid = (props) => {
+    useConfig();
+    const { children, columnNum, border, gutter, center, square, reverse, direction, style, iconSize, iconColor, className, onClick, ...rest } = { ...defaultProps, ...props };
+    const childrenDom = React__default.Children.toArray(children);
+    const pxCheck = (value) => {
+        return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+    };
+    const b = cn('grid');
+    const rootClass = () => {
+        const prefixCls = b();
+        return classNames(className, prefixCls, {
+            [b('border')]: border && !gutter,
+        });
+    };
+    const rootStyle = () => {
+        let styleSelf = {};
+        if (style) {
+            styleSelf = style;
+        }
+        if (gutter) {
+            styleSelf.paddingLeft = pxCheck(gutter);
+        }
+        return styleSelf;
+    };
+    return (React__default.createElement("div", { className: rootClass(), style: rootStyle(), ...rest },
+        React__default.createElement(GridContext.Provider, { value: { onClick } }, childrenDom.map((item, idex) => {
+            return React__default.cloneElement(item, {
+                index: idex,
+                columnNum,
+                center,
+                border,
+                gutter,
+                square,
+                reverse,
+                direction,
+                parentIconSize: iconSize,
+                parentIconColor: iconColor,
+            });
+        }))));
+};
+Grid.defaultProps = defaultProps;
+Grid.displayName = 'NutGrid';
+
+export { Grid as G };

package/dist/esm/{grid.context-2ee27d95.js → grid.taro.context-c2bbfb4f.js}

@@ -1,6 +1,8 @@
 import React__default from 'react';
-var gridContext = {
-  onClick: function onClick(item, index) {}
+
+const gridContext = {
+    onClick: (item, index) => { },
 };
 var GridContext = React__default.createContext(gridContext);
+
 export { GridContext as G };

package/dist/esm/griditem.taro-cdb3f119.js

@@ -0,0 +1,98 @@
+import React__default, { useContext } from 'react';
+import classNames from 'classnames';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { c as cn } from './bem-350c1702.js';
+import { I as Icon } from './icon.taro-296a1bec.js';
+import { C as ComponentDefaults } from './typings-b9828dba.js';
+import { G as GridContext } from './grid.taro.context-c2bbfb4f.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    text: '',
+    fontSize: '',
+    color: '',
+    icon: '',
+    iconSize: '',
+    iconColor: '',
+    parentIconSize: '',
+    parentIconColor: '',
+    columnNum: 4,
+    border: true,
+    gutter: 0,
+    center: true,
+    square: false,
+    reverse: false,
+    direction: 'vertical',
+};
+const GridItem = (props) => {
+    useConfig();
+    const { children, columnNum, index, gutter, square, text, fontSize, color, icon, iconColor, iconSize, parentIconSize, parentIconColor, border, center, reverse, direction, iconClassPrefix, iconFontClassName, className, onClick, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const b = cn('grid-item');
+    const classes = classNames(b(), className);
+    const context = useContext(GridContext);
+    const pxCheck = (value) => {
+        return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+    };
+    const rootStyle = () => {
+        const style = {
+            flexBasis: `${100 / +columnNum}%`,
+        };
+        if (square) {
+            style.paddingTop = `${100 / +columnNum}%`;
+        }
+        else if (gutter) {
+            style.paddingRight = pxCheck(gutter);
+            if (index >= columnNum) {
+                style.marginTop = pxCheck(gutter);
+            }
+        }
+        return style;
+    };
+    const contentClass = () => {
+        return classNames(b('content'), {
+            [b('content--border')]: border,
+            [b('content--surround')]: border && gutter,
+            [b('content--center')]: center,
+            [b('content--square')]: square,
+            [b('content--reverse')]: reverse,
+            [b(`content--${direction}`)]: !!direction,
+        });
+    };
+    const isIconName = () => {
+        return typeof icon === 'string';
+    };
+    const handleClick = (e) => {
+        onClick && onClick(e);
+        context.onClick &&
+            context.onClick({
+                text,
+                icon,
+                iconSize,
+                iconColor,
+                parentIconSize,
+                parentIconColor,
+                index,
+                columnNum,
+                border,
+                gutter,
+                center,
+                square,
+                reverse,
+                direction,
+                fontSize,
+                color,
+            }, index);
+    };
+    return (React__default.createElement("div", { className: classes, style: rootStyle(), ...rest, onClick: handleClick },
+        React__default.createElement("div", { className: contentClass() },
+            icon && isIconName() ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: icon, size: iconSize || parentIconSize, color: iconColor || parentIconColor })) : (React__default.createElement(React__default.Fragment, null, icon)),
+            text && (React__default.createElement("div", { className: "nut-grid-item__text", style: { fontSize, color } }, text)),
+            children && React__default.createElement(React__default.Fragment, null, children))));
+};
+GridItem.defaultProps = defaultProps;
+GridItem.displayName = 'NutGridItem';
+
+export { GridItem as G };

package/dist/esm/icon-296a1bec.js

@@ -0,0 +1,63 @@
+import React__default from 'react';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    name: '',
+    size: '',
+    classPrefix: 'nut-icon',
+    fontClassName: 'nutui-iconfont',
+    color: '',
+    tag: 'i',
+    onClick: (e) => { },
+    className: '',
+};
+function pxCheck(value) {
+    if (value === '') {
+        return value;
+    }
+    if (Number.isNaN(Number(value))) {
+        return String(value);
+    }
+    return `${value}px`;
+}
+function Icon(props) {
+    const { name, size, classPrefix, color, tag, children, className, fontClassName, style, onClick, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const isImage = name ? name.indexOf('/') !== -1 : false;
+    const type = isImage ? 'img' : tag;
+    const b = cn('icon');
+    const handleClick = (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    const hasSrc = () => {
+        if (isImage)
+            return { src: name };
+        return {};
+    };
+    const styles = {};
+    const checkedSize = pxCheck(size);
+    if (checkedSize) {
+        styles.width = styles.height = styles.fontSize = checkedSize;
+    }
+    return React__default.createElement(type, {
+        className: isImage
+            ? `${b('img')} ${className || ''} `
+            : `${fontClassName} ${b(null)} ${classPrefix}-${name} ${className || ''}`,
+        style: {
+            color,
+            ...styles,
+            ...style,
+        },
+        ...rest,
+        onClick: handleClick,
+        ...hasSrc(),
+    }, children);
+}
+Icon.defaultProps = defaultProps;
+Icon.displayName = 'NutIcon';
+
+export { Icon as I };

package/dist/esm/icon.taro-296a1bec.js

@@ -0,0 +1,63 @@
+import React__default from 'react';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    name: '',
+    size: '',
+    classPrefix: 'nut-icon',
+    fontClassName: 'nutui-iconfont',
+    color: '',
+    tag: 'i',
+    onClick: (e) => { },
+    className: '',
+};
+function pxCheck(value) {
+    if (value === '') {
+        return value;
+    }
+    if (Number.isNaN(Number(value))) {
+        return String(value);
+    }
+    return `${value}px`;
+}
+function Icon(props) {
+    const { name, size, classPrefix, color, tag, children, className, fontClassName, style, onClick, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const isImage = name ? name.indexOf('/') !== -1 : false;
+    const type = isImage ? 'img' : tag;
+    const b = cn('icon');
+    const handleClick = (e) => {
+        if (onClick) {
+            onClick(e);
+        }
+    };
+    const hasSrc = () => {
+        if (isImage)
+            return { src: name };
+        return {};
+    };
+    const styles = {};
+    const checkedSize = pxCheck(size);
+    if (checkedSize) {
+        styles.width = styles.height = styles.fontSize = checkedSize;
+    }
+    return React__default.createElement(type, {
+        className: isImage
+            ? `${b('img')} ${className || ''} `
+            : `${fontClassName} ${b(null)} ${classPrefix}-${name} ${className || ''}`,
+        style: {
+            color,
+            ...styles,
+            ...style,
+        },
+        ...rest,
+        onClick: handleClick,
+        ...hasSrc(),
+    }, children);
+}
+Icon.defaultProps = defaultProps;
+Icon.displayName = 'NutIcon';
+
+export { Icon as I };

package/dist/esm/image.taro-142cf512.js

@@ -0,0 +1,64 @@
+import React__default, { useState, useEffect } from 'react';
+import { u as useConfig } from './configprovider.taro-8d71eb49.js';
+import { I as Icon } from './icon.taro-296a1bec.js';
+
+const defaultProps = {
+    fit: 'fill',
+    position: 'center',
+    alt: '',
+    width: 'center',
+    height: '',
+    round: false,
+    showError: true,
+    showLoading: true,
+};
+const Image = (props) => {
+    useConfig();
+    const { children, className, style, src, fit, position, alt, width, height, round, radius, showError, showLoading, slotError, slotLoding, onClick, onLoad, onError, } = { ...defaultProps, ...props };
+    const [loading, setLoading] = useState(true);
+    const [isError, setIsError] = useState(false);
+    useEffect(() => {
+        if (src) {
+            setIsError(false);
+            setLoading(true);
+        }
+    }, [src]);
+    // 图片加载
+    const load = () => {
+        setLoading(false);
+        onLoad && onLoad();
+    };
+    // 图片加载失败
+    const error = () => {
+        setIsError(true);
+        setLoading(false);
+        onError && onError();
+    };
+    const pxCheck = (value) => {
+        return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
+    };
+    const stylebox = {
+        height: height ? pxCheck(height) : '',
+        width: width ? pxCheck(width) : '',
+        overflow: radius !== undefined && radius !== null ? 'hidden' : '',
+        borderRadius: radius !== undefined && radius !== null ? pxCheck(radius) : '',
+    };
+    const styles = {
+        objectFit: fit,
+        objectPosition: position,
+        ...style,
+    };
+    const imageClick = (event) => {
+        onClick && onClick(event);
+    };
+    return (React__default.createElement("div", { className: `nut-image ${round ? 'nut-image-round' : ''}`, style: stylebox, onClick: (e) => {
+            imageClick(e);
+        } },
+        React__default.createElement("img", { className: "nut-img", style: styles, src: src, alt: alt, onLoad: load, onError: error }),
+        showLoading && loading ? (React__default.createElement("div", { className: "nut-img-loading" }, slotLoding || children || React__default.createElement(Icon, { name: "image" }))) : null,
+        showError && isError && !loading ? (React__default.createElement("div", { className: "nut-img-error" }, slotError || children || React__default.createElement(Icon, { name: "image-error" }))) : null));
+};
+Image.defaultProps = defaultProps;
+Image.displayName = 'NutImage';
+
+export { Image as I };