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

package/dist/esm/datepicker.taro-7220e495.js

@@ -0,0 +1,270 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { P as Picker } from './picker.taro-2a8ded7c.js';
+
+const currentYear = new Date().getFullYear();
+const defaultProps = {
+    modelValue: null,
+    visible: false,
+    title: '',
+    type: 'date',
+    isShowChinese: false,
+    threeDimensional: true,
+    minuteStep: 1,
+    minDate: new Date(currentYear - 10, 0, 1),
+    maxDate: new Date(currentYear + 10, 11, 31),
+};
+const DatePicker = (props) => {
+    const { minDate, maxDate, type, isShowChinese, minuteStep, modelValue, visible, title, formatter, onCloseDatePicker, onConfirmDatePicker, filter, onChange, threeDimensional, className, style, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const [show, setShow] = useState(false);
+    const [currentDate, setCurrentDate] = useState(modelValue);
+    const [defaultValue, setDefaultValue] = useState([]);
+    const [listData, setListData] = useState([]);
+    const pickerRef = useRef(null);
+    const isDate = (val) => {
+        return (Object.prototype.toString.call(val) === '[object Date]' &&
+            !Number.isNaN(val.getTime()));
+    };
+    const zhCNType = {
+        day: '日',
+        year: '年',
+        month: '月',
+        hour: '时',
+        minute: '分',
+        seconds: '秒',
+    };
+    const formatValue = (value) => {
+        let cvalue = value;
+        if (!cvalue || (cvalue && !isDate(cvalue))) {
+            cvalue = minDate;
+        }
+        let timestmp = Math.max(cvalue.getTime(), minDate.getTime());
+        timestmp = Math.min(timestmp, maxDate.getTime());
+        return new Date(timestmp);
+    };
+    function getMonthEndDay(year, month) {
+        return new Date(year, month, 0).getDate();
+    }
+    const getBoundary = (type, value) => {
+        const boundary = type === 'min' ? minDate : maxDate;
+        const year = boundary.getFullYear();
+        let month = 1;
+        let date = 1;
+        let hour = 0;
+        let minute = 0;
+        if (type === 'max') {
+            month = 12;
+            date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1);
+            hour = 23;
+            minute = 59;
+        }
+        const seconds = minute;
+        if (value.getFullYear() === year) {
+            month = boundary.getMonth() + 1;
+            if (value.getMonth() + 1 === month) {
+                date = boundary.getDate();
+                if (value.getDate() === date) {
+                    hour = boundary.getHours();
+                    if (value.getHours() === hour) {
+                        minute = boundary.getMinutes();
+                    }
+                }
+            }
+        }
+        return {
+            [`${type}Year`]: year,
+            [`${type}Month`]: month,
+            [`${type}Date`]: date,
+            [`${type}Hour`]: hour,
+            [`${type}Minute`]: minute,
+            [`${type}Seconds`]: seconds,
+        };
+    };
+    const ranges = (date) => {
+        const curDate = date || currentDate;
+        console.log(11, currentDate);
+        if (!curDate)
+            return [];
+        const { maxYear, maxDate, maxMonth, maxHour, maxMinute, maxSeconds } = getBoundary('max', curDate);
+        const { minYear, minDate, minMonth, minHour, minMinute, minSeconds } = getBoundary('min', curDate);
+        let result = [
+            {
+                type: 'year',
+                range: [minYear, maxYear],
+            },
+            {
+                type: 'month',
+                range: [minMonth, maxMonth],
+            },
+            {
+                type: 'day',
+                range: [minDate, maxDate],
+            },
+            {
+                type: 'hour',
+                range: [minHour, maxHour],
+            },
+            {
+                type: 'minute',
+                range: [minMinute, maxMinute],
+            },
+            {
+                type: 'seconds',
+                range: [minSeconds, maxSeconds],
+            },
+        ];
+        switch (type.toLocaleLowerCase()) {
+            case 'date':
+                result = result.slice(0, 3);
+                break;
+            case 'datetime':
+                result = result.slice(0, 5);
+                break;
+            case 'time':
+                result = result.slice(3, 6);
+                break;
+            case 'year-month':
+                result = result.slice(0, 2);
+                break;
+            case 'month-day':
+                result = result.slice(1, 3);
+                break;
+            case 'datehour':
+                result = result.slice(0, 4);
+                break;
+        }
+        return result;
+    };
+    const updateChooseValueCustmer = (index, selectedValue, cacheValueData) => {
+        if (['date', 'datetime', 'datehour', 'month-day', 'year-month'].includes(type.toLocaleLowerCase())) {
+            const formatDate = [];
+            selectedValue.forEach((item) => {
+                formatDate.push(item);
+            });
+            if (type.toLocaleLowerCase() === 'month-day' && formatDate.length < 3) {
+                formatDate.unshift(new Date(modelValue || minDate || maxDate).getFullYear());
+            }
+            if (type.toLocaleLowerCase() === 'year-month' && formatDate.length < 3) {
+                formatDate.push(new Date(modelValue || minDate || maxDate).getDate());
+            }
+            const year = Number(formatDate[0]);
+            const month = Number(formatDate[1]) - 1;
+            const day = Math.min(Number(formatDate[2]), getMonthEndDay(Number(formatDate[0]), Number(formatDate[1])));
+            let date = null;
+            if (type.toLocaleLowerCase() === 'date' ||
+                type.toLocaleLowerCase() === 'month-day' ||
+                type.toLocaleLowerCase() === 'year-month') {
+                date = new Date(year, month, day);
+            }
+            else if (type.toLocaleLowerCase() === 'datetime') {
+                date = new Date(year, month, day, Number(formatDate[3]), Number(formatDate[4]));
+            }
+            else if (type.toLocaleLowerCase() === 'datehour') {
+                date = new Date(year, month, day, Number(formatDate[3]));
+            }
+            const isEqual = currentDate?.getTime() === date?.getTime();
+            date &&
+                isDate(date) &&
+                !isEqual &&
+                setCurrentDate(formatValue(date));
+        }
+        props.onChange && props.onChange(index, selectedValue, cacheValueData);
+    };
+    const padZero = (num, targetLength = 2) => {
+        let str = `${num}`;
+        while (str.length < targetLength) {
+            str = `0${str}`;
+        }
+        return str;
+    };
+    const formatterOption = (type, value) => {
+        let fOption = null;
+        if (formatter) {
+            fOption = formatter(type, {
+                text: padZero(value, 2),
+                value: padZero(value, 2),
+            });
+        }
+        else {
+            const padMin = padZero(value, 2);
+            const fatter = isShowChinese ? zhCNType[type] : '';
+            fOption = { text: padMin + fatter, value: padMin };
+        }
+        return fOption;
+    };
+    const generateValue = (min, max, val, type, columnIndex) => {
+        let cmin = min;
+        const arr = [];
+        let index = 0;
+        while (cmin <= max) {
+            arr.push(formatterOption(type, cmin));
+            if (type === 'minute') {
+                cmin += minuteStep;
+            }
+            else {
+                cmin++;
+            }
+            if (cmin <= val) {
+                index++;
+            }
+        }
+        defaultValue[columnIndex] = arr[index].value;
+        setDefaultValue([...defaultValue]);
+        if (props.filter && props.filter(type, arr)) {
+            return props.filter(type, arr);
+        }
+        return arr;
+    };
+    const getDateIndex = (type) => {
+        if (!currentDate)
+            return 0;
+        let d = 0;
+        if (type === 'year') {
+            d = currentDate.getFullYear();
+        }
+        else if (type === 'month') {
+            d = currentDate.getMonth() + 1;
+        }
+        else if (type === 'day') {
+            d = currentDate.getDate();
+        }
+        else if (type === 'hour') {
+            d = currentDate.getHours();
+        }
+        else if (type === 'minute') {
+            d = currentDate.getMinutes();
+        }
+        else if (type === 'seconds') {
+            d = currentDate.getSeconds();
+        }
+        return d;
+    };
+    const columns = (date) => {
+        const val = ranges(date).map((res, columnIndex) => {
+            return generateValue(res.range[0], res.range[1], getDateIndex(res.type), res.type, columnIndex);
+        });
+        return val || [];
+    };
+    useEffect(() => {
+        setCurrentDate(formatValue(modelValue));
+        // initDefault()
+    }, []);
+    useEffect(() => {
+        setCurrentDate(formatValue(modelValue));
+    }, [modelValue]);
+    useEffect(() => {
+        setShow(visible);
+    }, [visible]);
+    useEffect(() => {
+        if (currentDate) {
+            setListData(columns());
+        }
+    }, [currentDate]);
+    return (React__default.createElement("div", { className: `nut-datepicker ${className || ''}`, style: style, ...rest }, listData.length > 0 && (React__default.createElement(Picker, { isVisible: show, listData: listData, onClose: onCloseDatePicker, defaultValueData: defaultValue, onConfirm: (values, options) => onConfirmDatePicker && onConfirmDatePicker(values, options), onChange: (index, value, list) => updateChooseValueCustmer(index, value, list), threeDimensional: threeDimensional, ref: pickerRef }))));
+};
+DatePicker.defaultProps = defaultProps;
+DatePicker.displayName = 'NutDatePicker';
+
+export { DatePicker as D };

package/dist/esm/dialog.taro-1c03960e.js

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { B as Button } from './button.taro-4ce133b9.js';
+import { CSSTransition } from 'react-transition-group';
+import { u as useConfig } from './configprovider.taro-26882dd2.js';
+
+const Content = (props) => {
+    const { visible, title, footer, textAlign, footerDirection, onClickSelf, children, } = props;
+    let headerNode;
+    if (title) {
+        headerNode = React__default.createElement("div", { className: "nut-dialog__header" }, title);
+    }
+    let footerNode;
+    if (footer) {
+        footerNode = (React__default.createElement("div", { className: classNames('nut-dialog__footer', {
+                [footerDirection]: footerDirection,
+            }) }, footer));
+    }
+    const handleClick = () => {
+        onClickSelf && onClickSelf();
+    };
+    return (React__default.createElement("div", { className: "nut-dialog__outer", onClick: handleClick },
+        React__default.createElement("div", { className: "nut-dialog", style: { display: visible ? 'flex' : 'none' } },
+            headerNode,
+            React__default.createElement("div", { className: "nut-dialog__content", style: { textAlign } },
+                React__default.createElement("div", null, children)),
+            footerNode)));
+};
+Content.displayName = 'NutContent';
+
+function Mask(props) {
+    return React.createElement("div", { className: "nut-dialog__mask" });
+}
+
+const DialogWrap = (props) => {
+    const { className, style, visible, mask, closeOnClickOverlay, lockScroll, onClosed, onCancel, } = props;
+    const handleClick = (e) => {
+        if (closeOnClickOverlay && visible && e.target === e.currentTarget) {
+            onClosed?.();
+            onCancel?.();
+            lockScroll && document.body.classList.remove('nut-overflow-hidden');
+        }
+    };
+    const wrapStyle = {
+        ...style,
+        display: visible ? 'block' : 'none',
+    };
+    if (lockScroll && visible) {
+        document.body.classList.add('nut-overflow-hidden');
+    }
+    return (React__default.createElement(React__default.Fragment, null,
+        mask ? (React__default.createElement(CSSTransition, { in: visible, timeout: 300, classNames: "fadeDialog", unmountOnExit: true, appear: true },
+            React__default.createElement(Mask, null))) : null,
+        React__default.createElement("div", { className: classNames('nut-dialog__wrap', className), onClick: handleClick, style: wrapStyle },
+            React__default.createElement(Content, { ...props, visible: visible }))));
+};
+DialogWrap.displayName = 'NutDialogWrap';
+
+const DialogWrapper = (props) => {
+    const { visible, lockScroll } = props;
+    if (lockScroll &&
+        !visible &&
+        document.body.classList.value.includes('nut-overflow-hidden')) {
+        document.body.classList.remove('nut-overflow-hidden');
+    }
+    return (React__default.createElement("div", { style: { display: visible ? 'block' : 'none' } },
+        React__default.createElement(DialogWrap, { ...props })));
+};
+DialogWrapper.displayName = 'NutDialogWrapper';
+
+const defaultProps = {
+    okText: '',
+    cancelText: '',
+    mask: true,
+    closeOnClickOverlay: true,
+    noFooter: false,
+    noOkBtn: false,
+    noCancelBtn: false,
+    okBtnDisabled: false,
+    cancelAutoClose: true,
+    textAlign: 'center',
+    footerDirection: 'horizontal',
+    lockScroll: false,
+};
+const BaseDialog = (props, ref) => {
+    const { locale } = useConfig();
+    const { visible, footer, noOkBtn, noCancelBtn, lockScroll, okBtnDisabled, cancelAutoClose, okText, cancelText, onClosed, onCancel, onOk, ...restProps } = props;
+    const renderFooter = function () {
+        if (footer === null)
+            return '';
+        const handleCancel = function (e) {
+            e.stopPropagation();
+            if (!cancelAutoClose)
+                return;
+            onClosed?.();
+            onCancel?.();
+            if (lockScroll && visible) {
+                document.body.classList.remove('nut-overflow-hidden');
+            }
+        };
+        const handleOk = function (e) {
+            e.stopPropagation();
+            onClosed?.();
+            onOk?.(e);
+            if (lockScroll && visible) {
+                document.body.classList.remove('nut-overflow-hidden');
+            }
+        };
+        const footerContent = footer || (React__default.createElement(React__default.Fragment, null,
+            !noCancelBtn && (React__default.createElement(Button, { size: "small", plain: true, type: "primary", className: "nut-dialog__footer-cancel", onClick: (e) => handleCancel(e) }, cancelText || locale.cancel)),
+            !noOkBtn && (React__default.createElement(Button, { size: "small", type: "primary", className: classNames('nut-dialog__footer-ok', {
+                    disabled: okBtnDisabled,
+                }), disabled: okBtnDisabled, onClick: (e) => handleOk(e) }, okText || locale.confirm))));
+        return footerContent;
+    };
+    return (React__default.createElement(DialogWrapper, { ...restProps, visible: visible, lockScroll: lockScroll, footer: renderFooter(), onClosed: onClosed, onCancel: onCancel }));
+};
+const Dialog = forwardRef(BaseDialog);
+Dialog.defaultProps = defaultProps;
+Dialog.displayName = 'NutDialog';
+
+export { Dialog as D };

package/dist/esm/divider.taro-5236fe6a.js

@@ -1,35 +1,35 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "contentPosition", "dashed", "hairline", "styles", "className", "direction"];
-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 { c as cn } from './bem-893ad28d.js';
-var defaultProps = {
-  contentPosition: 'center',
-  dashed: false,
-  hairline: true,
-  direction: 'horizontal'
+
+const defaultProps = {
+    contentPosition: 'center',
+    dashed: false,
+    hairline: true,
+    direction: 'horizontal',
 };
-var Divider = function Divider(props) {
-  var _classNames, _classNames2;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    children = _defaultProps$props.children,
-    contentPosition = _defaultProps$props.contentPosition,
-    dashed = _defaultProps$props.dashed,
-    hairline = _defaultProps$props.hairline,
-    styles = _defaultProps$props.styles,
-    className = _defaultProps$props.className,
-    direction = _defaultProps$props.direction,
-    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var dividerBem = cn('divider');
-  var classes = direction === 'horizontal' ? classNames((_classNames = {}, _defineProperty(_classNames, dividerBem(), true), _defineProperty(_classNames, dividerBem('center'), children), _defineProperty(_classNames, dividerBem('left'), contentPosition === 'left'), _defineProperty(_classNames, dividerBem('right'), contentPosition === 'right'), _defineProperty(_classNames, dividerBem('dashed'), dashed), _defineProperty(_classNames, dividerBem('hairline'), hairline), _classNames)) : classNames((_classNames2 = {}, _defineProperty(_classNames2, dividerBem(), true), _defineProperty(_classNames2, dividerBem('vertical'), direction === 'vertical'), _classNames2));
-  return React__default.createElement("div", _objectSpread({
-    className: "".concat(classes, " ").concat(className || ''),
-    style: styles
-  }, rest), children);
+const Divider = (props) => {
+    const { children, contentPosition, dashed, hairline, styles, className, direction, ...rest } = {
+        ...defaultProps,
+        ...props,
+    };
+    const dividerBem = cn('divider');
+    const classes = direction === 'horizontal'
+        ? classNames({
+            [dividerBem()]: true,
+            [dividerBem('center')]: children,
+            [dividerBem('left')]: contentPosition === 'left',
+            [dividerBem('right')]: contentPosition === 'right',
+            [dividerBem('dashed')]: dashed,
+            [dividerBem('hairline')]: hairline,
+        })
+        : classNames({
+            [dividerBem()]: true,
+            [dividerBem('vertical')]: direction === 'vertical',
+        });
+    return (React__default.createElement("div", { className: `${classes} ${className || ''}`, style: styles, ...rest }, children));
 };
 Divider.defaultProps = defaultProps;
 Divider.displayName = 'NutDivider';
+
 export { Divider as D };