@nutui/nutui-react 2.7.0 → 3.0.0-beta.1

package/dist/es/packages/calendarcard/calendarcard.d.ts

@@ -0,0 +1,71 @@
+import React, { ReactNode } from 'react';
+import { BasicComponent } from "../../utils/typings";
+import type { CalendarCardDay, CalendarCardMonth, CalendarCardRef, CalendarCardValue } from './types';
+export interface CalendarCardProps extends BasicComponent {
+    /**
+    * 类型，单个日期 single，多个日期 multiple，日期范围 range，周选择 week
+    * @default single
+    */
+    type: 'single' | 'multiple' | 'range' | 'week'
+    /**
+    * 受控模式下的值，与 onChange 搭配使用
+    * @default -
+    */
+    value?: CalendarCardValue
+    /**
+    * 默认值，单个日期 Date 格式，多个日期/范围选择 Date[] 格式
+    * @default -
+    */
+    defaultValue?: CalendarCardValue
+    /**
+    * 设置周起始日，0 为周日，1 为周一
+    * @default 1
+    */
+    firstDayOfWeek?: number
+    /**
+    * 限制范围开始日期
+    * @default -
+    */
+    startDate?: Date
+    /**
+    * 限制范围结束日期
+    * @default -
+    */
+    endDate?: Date
+    /**
+    * 设置不可选日期
+    * @default -
+    */
+    disableDay?: (day: CalendarCardDay) => boolean
+    /**
+    * 日期信息
+    * @default -
+    */
+    renderDay?: (day: CalendarCardDay) => ReactNode
+    /**
+    * 日期顶部信息
+    * @default -
+    */
+    renderDayTop?: (day: CalendarCardDay) => ReactNode
+    /**
+    * 日期底部信息
+    * @default -
+    */
+    renderDayBottom?: (day: CalendarCardDay) => ReactNode
+    /**
+    * 点击后触发
+    * @default -
+    */
+    onDayClick?: (day: CalendarCardDay) => void
+    /**
+    * 切换月份时触发
+    * @default -
+    */
+    onPageChange: (data: CalendarCardMonth) => void
+    /**
+    * 选择值发生变化时触发
+    * @default -
+    */
+    onChange: (value: CalendarCardValue) => void
+}
+export declare const CalendarCard: React.ForwardRefExoticComponent<Partial<CalendarCardProps> & React.RefAttributes<CalendarCardRef>>;

package/dist/es/packages/calendarcard/calendarcard.js

@@ -0,0 +1,403 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import React, { useState, useEffect } from "react";
+import classNames from "classnames";
+import { ArrowLeft, ArrowRight, DoubleLeft, DoubleRight } from "./icon";
+import { ComponentDefaults } from "../../utils/typings";
+import { convertDateToDay, convertDayToDate, getCurrentMonthDays, getCurrentWeekDays, getPrevMonthDays } from "./utils";
+import { useConfig } from "../configprovider";
+import { usePropsValue } from "../../utils/use-props-value";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    type: 'single',
+    firstDayOfWeek: 0
+});
+var prefixCls = 'nut-calendarcard';
+export var CalendarCard = /*#__PURE__*/ React.forwardRef(function(props, ref) {
+    var locale = useConfig().locale;
+    var _$_object_spread = _object_spread({}, defaultProps, props), style = _$_object_spread.style, className = _$_object_spread.className, type = _$_object_spread.type, value = _$_object_spread.value, defaultValue = _$_object_spread.defaultValue, firstDayOfWeek = _$_object_spread.firstDayOfWeek, startDate = _$_object_spread.startDate, endDate = _$_object_spread.endDate, disableDay = _$_object_spread.disableDay, renderDay = _$_object_spread.renderDay, renderDayTop = _$_object_spread.renderDayTop, renderDayBottom = _$_object_spread.renderDayBottom, onDayClick = _$_object_spread.onDayClick, onPageChange = _$_object_spread.onPageChange, onChange = _$_object_spread.onChange;
+    // 当前月份信息
+    var _useState = _sliced_to_array(useState(function() {
+        var date = new Date(Date.now());
+        var val = value || defaultValue;
+        if (Array.isArray(val)) {
+            if (val.length) {
+                date = val[0];
+            }
+        } else if (val) {
+            date = val;
+        }
+        return {
+            year: date.getFullYear(),
+            month: date.getMonth() + 1
+        };
+    }), 2), month = _useState[0], setMonth = _useState[1];
+    // 当前月份对应的日期(6 * 7 视图)
+    var _useState1 = _sliced_to_array(useState([]), 2), days = _useState1[0], setDays = _useState1[1];
+    var valueToRange = function(val) {
+        if (Array.isArray(val)) {
+            return val.map(function(date) {
+                return convertDateToDay(date);
+            });
+        }
+        return val ? [
+            convertDateToDay(val)
+        ] : [];
+    };
+    var rangeTovalue = function(range) {
+        if (Array.isArray(range)) {
+            return range.map(function(day) {
+                return convertDayToDate(day);
+            });
+        }
+        return range ? [
+            convertDayToDate(range)
+        ] : [];
+    };
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+        value: value ? valueToRange(value) : undefined,
+        defaultValue: defaultValue ? valueToRange(defaultValue) : undefined,
+        finalValue: []
+    }), 2), innerValue = _usePropsValue[0], setInnerValue = _usePropsValue[1];
+    var change = function(v) {
+        setInnerValue(v);
+        if (type === 'single') {
+            var date = convertDayToDate(v[0]);
+            onChange === null || onChange === void 0 ? void 0 : onChange(date);
+        } else if (type === 'multiple' || type === 'range' || type === 'week') {
+            var val = rangeTovalue(v);
+            onChange === null || onChange === void 0 ? void 0 : onChange(val);
+        }
+    };
+    var getDays = function(month) {
+        var y = month.year;
+        var m = month.month;
+        var days = _to_consumable_array(getPrevMonthDays(y, m, firstDayOfWeek)).concat(_to_consumable_array(getCurrentMonthDays(y, m)));
+        var size = days.length;
+        var yearOfNextMonth = month.month === 12 ? month.year + 1 : month.year;
+        var monthOfNextMonth = month.month === 12 ? 1 : month.month + 1;
+        // 补全 6 行 7 列视图
+        for(var i = 1; i <= 42 - size; i++){
+            days.push({
+                type: 'next',
+                year: yearOfNextMonth,
+                month: monthOfNextMonth,
+                date: i
+            });
+        }
+        return days;
+    };
+    useEffect(function() {
+        var newDays = getDays(month);
+        setDays(newDays);
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(month);
+    }, [
+        month
+    ]);
+    var isSameDay = function(day1, day2) {
+        return (day1 === null || day1 === void 0 ? void 0 : day1.year) === (day2 === null || day2 === void 0 ? void 0 : day2.year) && (day1 === null || day1 === void 0 ? void 0 : day1.month) === (day2 === null || day2 === void 0 ? void 0 : day2.month) && (day1 === null || day1 === void 0 ? void 0 : day1.date) === (day2 === null || day2 === void 0 ? void 0 : day2.date);
+    };
+    var compareDay = function(day1, day2) {
+        if (day1 && day2) {
+            if (day1.year === day2.year) {
+                if (day1.month === day2.month) {
+                    return day1.date - day2.date;
+                }
+                return day1.month - day2.month;
+            }
+            return day1.year - day2.year;
+        }
+    };
+    var isDisable = function(day) {
+        if (disableDay && disableDay(day)) {
+            return true;
+        }
+        if (startDate && Number(compareDay(day, convertDateToDay(startDate))) < 0) {
+            return true;
+        }
+        if (endDate && Number(compareDay(day, convertDateToDay(endDate))) > 0) {
+            return true;
+        }
+        return false;
+    };
+    var isActive = function(day) {
+        if (type === 'single' || type === 'multiple') {
+            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+            try {
+                for(var _iterator = innerValue[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+                    var val = _step.value;
+                    if (isSameDay(day, val)) {
+                        return true;
+                    }
+                }
+            } catch (err) {
+                _didIteratorError = true;
+                _iteratorError = err;
+            } finally{
+                try {
+                    if (!_iteratorNormalCompletion && _iterator.return != null) {
+                        _iterator.return();
+                    }
+                } finally{
+                    if (_didIteratorError) {
+                        throw _iteratorError;
+                    }
+                }
+            }
+        } else if (type === 'range' && innerValue.length === 1 && isSameDay(innerValue[0], day)) {
+            return true;
+        }
+        return false;
+    };
+    var isStart = function(day) {
+        return (type === 'range' || type === 'week') && innerValue.length === 2 && isSameDay(day, innerValue[0]);
+    };
+    var isEnd = function(day) {
+        return (type === 'range' || type === 'week') && innerValue.length === 2 && isSameDay(day, innerValue[1]);
+    };
+    var isMid = function(day) {
+        if (type === 'range' || type === 'week') {
+            if (innerValue.length === 2) {
+                var c1 = compareDay(innerValue[0], day);
+                var c2 = compareDay(day, innerValue[1]);
+                if (c1 && c1 < 0 && c2 && c2 < 0) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    var isWeekend = function(day) {
+        var d = new Date(day.year, day.month - 1, day.date).getDay();
+        return d === 0 || d === 6;
+    };
+    var getClasses = function(day) {
+        /**
+     * active: single、multiple 激活日期
+     * start: 范围开始日期
+     * end: 范围结束日期
+     * mid: 范围中间日期
+     */ if (isDisable(day)) {
+            return [
+                'disabled'
+            ];
+        }
+        var res = [];
+        if (day.type === 'current') {
+            if (isActive(day)) {
+                res.push('active');
+            }
+            if (isStart(day)) {
+                res.push('start');
+            }
+            if (isEnd(day)) {
+                res.push('end');
+            }
+            if (isMid(day)) {
+                res.push('mid');
+            }
+            if (isWeekend(day)) {
+                res.push('weekend');
+            }
+        }
+        return res;
+    };
+    var jumpTo = function(year, month) {
+        if (startDate) {
+            var c = compareDay({
+                year: year,
+                month: month,
+                date: 31
+            }, convertDateToDay(startDate));
+            if (c && c < 0) {
+                return;
+            }
+        }
+        if (endDate) {
+            var c1 = compareDay({
+                year: year,
+                month: month,
+                date: 1
+            }, convertDateToDay(endDate));
+            if (c1 && c1 > 0) {
+                return;
+            }
+        }
+        setMonth({
+            year: year,
+            month: month
+        });
+    };
+    var jump = function() {
+        var step = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : 1;
+        var current = month.year * 12 + month.month;
+        var newMonth = (current + step) % 12;
+        if (newMonth === 0) {
+            newMonth = 12;
+        }
+        var newYear = Math.floor((current + step - newMonth) / 12);
+        jumpTo(newYear, newMonth);
+    };
+    React.useImperativeHandle(ref, function() {
+        return {
+            jump: jump,
+            jumpTo: jumpTo
+        };
+    });
+    var handleDayClick = function(day) {
+        onDayClick === null || onDayClick === void 0 ? void 0 : onDayClick(day);
+        if (day.type === 'prev' || day.type === 'next' || isDisable(day)) {
+            return;
+        }
+        switch(type){
+            case 'single':
+                {
+                    if (innerValue[0] && isSameDay(innerValue[0], day)) {
+                        change([]);
+                    } else {
+                        change([
+                            day
+                        ]);
+                    }
+                    break;
+                }
+            case 'multiple':
+                {
+                    var t = innerValue.find(function(i) {
+                        return isSameDay(i, day);
+                    });
+                    if (t) {
+                        change(innerValue.filter(function(i) {
+                            return i !== t;
+                        }));
+                    } else {
+                        change(_to_consumable_array(innerValue).concat([
+                            day
+                        ]));
+                    }
+                    break;
+                }
+            case 'range':
+                {
+                    var len = innerValue.length;
+                    if (len === 0 || len === 2) {
+                        change([
+                            day
+                        ]);
+                    } else if (len === 1) {
+                        var t1 = compareDay(innerValue[0], day);
+                        if (t1 === null || t1 === undefined) {
+                            change([]);
+                        } else if (t1 < 0) {
+                            change([
+                                innerValue[0],
+                                day
+                            ]);
+                        } else {
+                            change([
+                                day,
+                                innerValue[0]
+                            ]);
+                        }
+                    } else {
+                        console.warn('[NutUI] Calendar range error');
+                    }
+                    break;
+                }
+            case 'week':
+                {
+                    if (innerValue.length === 2 || innerValue.length === 0) {
+                        var _getCurrentWeekDays = _sliced_to_array(getCurrentWeekDays(day, firstDayOfWeek), 2), left = _getCurrentWeekDays[0], right = _getCurrentWeekDays[1];
+                        change([
+                            left,
+                            right
+                        ]);
+                    } else {
+                        console.warn('[NutUI] Calendar week error');
+                    }
+                    break;
+                }
+            default:
+                {
+                    console.warn('[NutUI] Calendar type error');
+                }
+        }
+    };
+    var monthTitle = locale.calendaritem.monthTitle;
+    var renderHeader = function() {
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(prefixCls, "-header")
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(prefixCls, "-header-left")
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: "double-left",
+            onClick: function() {
+                return jump(-12);
+            }
+        }, /*#__PURE__*/ React.createElement(DoubleLeft, null)), /*#__PURE__*/ React.createElement("div", {
+            className: "left",
+            onClick: function() {
+                return jump(-1);
+            }
+        }, /*#__PURE__*/ React.createElement(ArrowLeft, null))), /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(prefixCls, "-header-title")
+        }, monthTitle(month.year, month.month)), /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(prefixCls, "-header-right")
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: "right",
+            onClick: function() {
+                return jump(1);
+            }
+        }, /*#__PURE__*/ React.createElement(ArrowRight, null)), /*#__PURE__*/ React.createElement("div", {
+            className: "double-right",
+            onClick: function() {
+                return jump(12);
+            }
+        }, /*#__PURE__*/ React.createElement(DoubleRight, null))));
+    };
+    var _useState2 = _sliced_to_array(useState(function() {
+        var weekdays = locale.calendaritem.weekdays.map(function(day, index) {
+            return {
+                name: day,
+                key: index
+            };
+        });
+        return _to_consumable_array(weekdays.slice(firstDayOfWeek, 7)).concat(_to_consumable_array(weekdays.slice(0, firstDayOfWeek)));
+    }), 1), weekHeader = _useState2[0];
+    var renderContent = function() {
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(prefixCls, "-content")
+        }, /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(prefixCls, "-days")
+        }, weekHeader.map(function(day) {
+            return /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-day"), 'header', {
+                    weekend: day.key === 0 || day.key === 6
+                }),
+                key: day.key
+            }, day.name);
+        })), /*#__PURE__*/ React.createElement("div", {
+            className: "".concat(prefixCls, "-days")
+        }, days.map(function(day) {
+            return /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-day"), day.type, getClasses(day)),
+                key: "".concat(day.year, "-").concat(day.month, "-").concat(day.date),
+                onClick: function() {
+                    return handleDayClick(day);
+                }
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: "".concat(prefixCls, "-day-top")
+            }, renderDayTop ? renderDayTop(day) : ''), /*#__PURE__*/ React.createElement("div", {
+                className: "".concat(prefixCls, "-day-inner")
+            }, renderDay ? renderDay(day) : day.date), /*#__PURE__*/ React.createElement("div", {
+                className: "".concat(prefixCls, "-day-bottom")
+            }, renderDayBottom ? renderDayBottom(day) : ''));
+        })));
+    };
+    return days.length > 0 ? /*#__PURE__*/ React.createElement("div", {
+        className: classNames(prefixCls, className),
+        style: style
+    }, renderHeader(), renderContent()) : null;
+});
+CalendarCard.displayName = 'NutCalendarCard';

package/dist/es/packages/calendarcard/icon.js

@@ -0,0 +1,41 @@
+import React from "react";
+export var ArrowLeft = function() {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M6.605 9.49a.771.771 0 0 1 0-.98l3.6-4.372a.771.771 0 0 1 1.19.981L8.2 9l3.197 3.881a.771.771 0 1 1-1.191.98l-3.6-4.37Z"
+    }));
+};
+export var ArrowRight = function() {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M11.396 9.49a.771.771 0 0 0 0-.98l-3.6-4.372a.771.771 0 0 0-1.191.981L9.8 9l-3.196 3.881a.771.771 0 0 0 1.19.98l3.6-4.37Z"
+    }));
+};
+export var DoubleLeft = function() {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M13.853 4.026a.771.771 0 0 1 .12 1.085L10.864 9l3.11 3.889a.771.771 0 1 1-1.204.963L9.272 9.482a.771.771 0 0 1 0-.964l3.497-4.371a.771.771 0 0 1 1.084-.12Zm-5.245 0a.771.771 0 0 1 .12 1.085L5.617 9l3.111 3.889a.771.771 0 0 1-1.205.963L4.026 9.482a.771.771 0 0 1 0-.964l3.497-4.371a.771.771 0 0 1 1.085-.12Z"
+    }));
+};
+export var DoubleRight = function() {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M4.147 13.974a.771.771 0 0 1-.12-1.085L7.136 9 4.028 5.11a.771.771 0 1 1 1.204-.963l3.497 4.371a.771.771 0 0 1 0 .964l-3.497 4.371a.771.771 0 0 1-1.084.12Zm5.245 0a.771.771 0 0 1-.12-1.085L12.383 9 9.272 5.11a.771.771 0 1 1 1.205-.963l3.497 4.371a.771.771 0 0 1 0 .964l-3.497 4.371a.771.771 0 0 1-1.085.12Z"
+    }));
+};

package/dist/es/packages/calendarcard/index.d.ts

@@ -0,0 +1,3 @@
+import { CalendarCard } from './calendarcard';
+export type { CalendarCardDay, CalendarCardMonth, CalendarCardValue, CalendarCardRef, } from './types';
+export default CalendarCard;

package/dist/es/packages/calendarcard/index.js

@@ -0,0 +1,2 @@
+import { CalendarCard } from "./calendarcard";
+export default CalendarCard;

package/dist/es/packages/calendarcard/style/calendarcard.scss

@@ -0,0 +1,146 @@
+.nut-calendarcard {
+  background: $color-background-overlay;
+  border-radius: 12px;
+  overflow: hidden;
+  font-size: $calendar-base-font-size;
+  color: $color-title;
+
+  &-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: normal;
+
+    &-left,
+    &-right {
+      display: flex;
+      flex-direction: row;
+      cursor: pointer;
+      margin: 16px;
+      line-height: 1;
+
+      .left {
+        margin-left: 8px;
+      }
+
+      .right {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  &-days {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  &-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    position: relative;
+    width: $calendar-day-width;
+    height: 48px;
+    cursor: pointer;
+    margin-bottom: 4px;
+    text-align: center;
+
+    &.header {
+      cursor: auto;
+    }
+
+    &-top,
+    &-bottom {
+      width: 100%;
+      height: 12px;
+      font-size: 12px;
+      line-height: 12px;
+    }
+
+    &.weekend {
+      color: $calendar-choose-color;
+    }
+
+    &.active {
+      background-color: $calendar-active-background-color;
+      color: $color-primary-text;
+      border-radius: $calendar-day-active-border-radius;
+    }
+
+    &.start,
+    &.end {
+      background-color: $calendar-active-background-color;
+      color: $color-primary-text;
+    }
+
+    &.start {
+      border-top-left-radius: $calendar-day-active-border-radius;
+      border-bottom-left-radius: $calendar-day-active-border-radius;
+    }
+
+    &.end {
+      border-top-right-radius: $calendar-day-active-border-radius;
+      border-bottom-right-radius: $calendar-day-active-border-radius;
+    }
+
+    &.mid {
+      background-color: $calendar-choose-background-color;
+      color: $calendar-choose-color;
+    }
+
+    .nut-calendar-day-info {
+      color: $color-primary-text;
+    }
+
+    // 上个月、下个月
+    &.prev,
+    &.next,
+    &.disabled {
+      color: $calendar-disable-color;
+      cursor: not-allowed;
+    }
+  }
+}
+
+[dir='rtl'] .nut-calendarcard,
+.nut-rtl .nut-calendarcard {
+  &-header {
+    &-left,
+    &-right {
+      .left {
+        margin-left: 0;
+        margin-right: 8px;
+      }
+
+      .right {
+        margin-right: 0;
+        margin-left: 8px;
+      }
+
+      .nut-icon-ArrowLeft,
+      .nut-icon-ArrowRight,
+      svg {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  &-day {
+    &.start,
+    &.end {
+      border-radius: 0;
+    }
+    &.start {
+      border-top-right-radius: $calendar-day-active-border-radius;
+      border-bottom-right-radius: $calendar-day-active-border-radius;
+    }
+
+    &.end {
+      border-top-left-radius: $calendar-day-active-border-radius;
+      border-bottom-left-radius: $calendar-day-active-border-radius;
+    }
+  }
+}

package/dist/es/packages/calendarcard/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/calendarcard/style/index.js

@@ -0,0 +1 @@
+import './calendarcard.scss';