react-vant-nova 1.0.0-test

package/es/calendar/Calendar.js

@@ -0,0 +1,488 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import cls from 'clsx';
+import { createNamespace, getScrollTop, pick } from '../utils';
+import { calcDateNum, cloneDate, cloneDates, compareDay, compareMonth, getDayByOffset, getNextDay, getPrevDay, getToday } from './utils';
+import useRefs from '../hooks/use-refs';
+import { raf } from '../utils/raf';
+import { getRect } from '../hooks/use-rect';
+import Toast from '../toast';
+import CalendarMonth from './CalendarMonth';
+import Button from '../button';
+import CalendarHeader from './CalendarHeader';
+import Popup from '../popup';
+import useSetState from '../hooks/use-set-state';
+import useUpdateEffect from '../hooks/use-update-effect';
+import ConfigProviderContext from '../config-provider/ConfigProviderContext';
+import { usePropsValue } from '../hooks';
+import Swiper from '../swiper';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('calendar');
+const defaultMinDate = getToday();
+const defaultMaxDate = (() => {
+  const now = getToday();
+  return new Date(now.getFullYear(), now.getMonth() + 6, now.getDate());
+})();
+const Calendar = forwardRef((_a, ref) => {
+  var _b;
+  var {
+      className,
+      style
+    } = _a,
+    p = __rest(_a, ["className", "style"]);
+  const props = mergeProps(p, {
+    round: true,
+    poppable: true,
+    showMark: true,
+    showTitle: true,
+    showConfirm: true,
+    showSubtitle: true,
+    closeOnPopstate: true,
+    closeOnClickOverlay: true,
+    safeAreaInsetBottom: true,
+    defaultValue: null,
+    type: 'single',
+    position: 'bottom',
+    maxRange: null,
+    minDate: defaultMinDate,
+    maxDate: defaultMaxDate,
+    firstDayOfWeek: 0,
+    showRangePrompt: true
+  });
+  const {
+    locale
+  } = useContext(ConfigProviderContext);
+  const [visible, setVisible] = usePropsValue({
+    value: props.visible,
+    defaultValue: false,
+    onChange: v => {
+      var _a;
+      if (v === false) {
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+  });
+  const limitDateRange = (date, minDate = props.minDate, maxDate = props.maxDate) => {
+    if (compareDay(date, minDate) === -1) {
+      return minDate;
+    }
+    if (compareDay(date, maxDate) === 1) {
+      return maxDate;
+    }
+    return date;
+  };
+  const getInitialDate = (defaultDate = props.defaultValue) => {
+    const {
+      type,
+      minDate,
+      maxDate
+    } = props;
+    if (defaultDate === null) {
+      return defaultDate;
+    }
+    const now = getToday();
+    if (type === 'range') {
+      if (!Array.isArray(defaultDate)) {
+        defaultDate = [];
+      }
+      const start = limitDateRange(defaultDate[0] || now, minDate, getPrevDay(maxDate));
+      const end = limitDateRange(defaultDate[1] || now, getNextDay(minDate));
+      return [start, end];
+    }
+    if (type === 'multiple') {
+      if (Array.isArray(defaultDate)) {
+        return defaultDate.map(date => limitDateRange(date));
+      }
+      return [limitDateRange(now)];
+    }
+    if (!defaultDate || Array.isArray(defaultDate)) {
+      defaultDate = now;
+    }
+    return limitDateRange(defaultDate);
+  };
+  const bodyRef = useRef();
+  const bodyHeightRef = useRef(0);
+  const [value, setValue] = React.useState(getInitialDate(props.value === undefined ? props.defaultValue : props.value));
+  const [state, updateState] = useSetState({
+    subtitle: '',
+    currentDate: value
+  });
+  // sync props.value to inner value
+  useUpdateEffect(() => {
+    if (props.value === undefined) return; // uncontroll mode
+    if (JSON.stringify(value) !== JSON.stringify(props.value)) {
+      setValue(props.value);
+    }
+  }, [props.value]);
+  // sync value to cascader value
+  useEffect(() => {
+    if (JSON.stringify(state.currentDate) !== JSON.stringify(value)) {
+      updateState({
+        currentDate: value
+      });
+    }
+  }, [value]);
+  const [monthRefs, setMonthRefs] = useRefs();
+  const dayOffset = useMemo(() => props.firstDayOfWeek ? +props.firstDayOfWeek % 7 : 0, [props.firstDayOfWeek, props.firstDayOfWeek]);
+  const months = useMemo(() => {
+    const internalMonths = [];
+    const cursor = new Date(props.minDate);
+    cursor.setDate(1);
+    do {
+      internalMonths.push(new Date(cursor));
+      cursor.setMonth(cursor.getMonth() + 1);
+    } while (compareMonth(cursor, props.maxDate) !== 1);
+    return internalMonths;
+  }, [props.minDate, props.maxDate]);
+  const buttonDisabled = useMemo(() => {
+    const {
+      currentDate
+    } = state;
+    if (currentDate) {
+      if (props.type === 'range') {
+        return !currentDate[0] || !currentDate[1];
+      }
+      if (props.type === 'multiple') {
+        return !currentDate.length;
+      }
+    }
+    return !currentDate;
+  }, [props.type, state.currentDate]);
+  // calculate the position of the elements
+  // and find the elements that needs to be rendered
+  const onScroll = () => {
+    var _a;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const top = getScrollTop(bodyRef.current);
+    const bottom = top + bodyHeightRef.current;
+    const heights = months.map((item, index) => monthRefs[index].getHeight());
+    const heightSum = heights.reduce((a, b) => a + b, 0);
+    // iOS scroll bounce may exceed the range
+    if (bottom > heightSum && top > 0) {
+      return;
+    }
+    let height = 0;
+    let currentMonth;
+    const visibleRange = [-1, -1];
+    for (let i = 0; i < months.length; i++) {
+      const month = monthRefs[i];
+      const visible = height <= bottom && height + heights[i] >= top;
+      if (visible) {
+        visibleRange[1] = i;
+        if (!currentMonth) {
+          currentMonth = month;
+          visibleRange[0] = i;
+        }
+        if (!monthRefs[i].showed) {
+          monthRefs[i].showed = true;
+          (_a = props.onMonthShow) === null || _a === void 0 ? void 0 : _a.call(props, {
+            date: month.date,
+            title: month.getTitle()
+          });
+        }
+      }
+      height += heights[i];
+    }
+    months.forEach((_, index) => {
+      const visible = index >= visibleRange[0] - 1 && index <= visibleRange[1] + 1;
+      monthRefs[index].setVisible(visible);
+    });
+    /* istanbul ignore else */
+    if (currentMonth && currentMonth.getTitle() !== state.subtitle && !props.horizontal) {
+      updateState({
+        subtitle: currentMonth.getTitle()
+      });
+    }
+  };
+  const scrollToDate = targetDate => {
+    raf(() => {
+      months.some((month, index) => {
+        if (compareMonth(month, targetDate) === 0) {
+          if (bodyRef.current) {
+            monthRefs[index].scrollIntoView(bodyRef.current);
+          }
+          return true;
+        }
+        return false;
+      });
+      onScroll();
+    });
+  };
+  // scroll to current month
+  const scrollIntoView = () => {
+    if (props.poppable && !visible) {
+      return;
+    }
+    const {
+      currentDate
+    } = state;
+    if (currentDate) {
+      const targetDate = props.type === 'single' ? currentDate : currentDate[0];
+      scrollToDate(targetDate);
+    } else {
+      raf(onScroll);
+    }
+  };
+  const init = () => {
+    raf(() => {
+      // add Math.floor to avoid decimal height issues
+      // https://github.com/youzan/vant/issues/5640
+      bodyHeightRef.current = Math.floor(getRect(bodyRef.current).height);
+      scrollIntoView();
+    });
+  };
+  const reset = (date = getInitialDate()) => {
+    updateState({
+      currentDate: date
+    });
+    scrollIntoView();
+  };
+  const checkRange = date => {
+    var _a;
+    const {
+      maxRange,
+      rangePrompt,
+      showRangePrompt
+    } = props;
+    if (maxRange && calcDateNum(date) > maxRange) {
+      if (showRangePrompt) {
+        Toast.info(rangePrompt || locale.vanCalendar.rangePrompt(+maxRange));
+      }
+      (_a = props.onOverRange) === null || _a === void 0 ? void 0 : _a.call(props);
+      return false;
+    }
+    return true;
+  };
+  const onConfirm = () => {
+    var _a;
+    const nextCurrentDate = cloneDates(state.currentDate);
+    if (props.poppable) {
+      setValue(nextCurrentDate);
+    }
+    (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, nextCurrentDate);
+    actions.close();
+  };
+  const select = (date, complete) => {
+    const setCurrentDate = current => {
+      var _a;
+      state.currentDate = current;
+      updateState({
+        currentDate: current
+      });
+      (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, cloneDates(state.currentDate));
+    };
+    if (complete && props.type === 'range') {
+      const valid = checkRange(date);
+      if (!valid) {
+        // auto selected to max range if showConfirm
+        if (props.showConfirm) {
+          setCurrentDate([date[0], getDayByOffset(date[0], +props.maxRange - 1)]);
+        } else {
+          setCurrentDate(date);
+        }
+        return;
+      }
+    }
+    setCurrentDate(date);
+    if (complete && !props.showConfirm) {
+      onConfirm();
+    }
+  };
+  const onClickDay = item => {
+    var _a;
+    if (props.readOnly || !item.date) {
+      return;
+    }
+    const {
+      date
+    } = item;
+    const {
+      type
+    } = props;
+    const {
+      currentDate
+    } = state;
+    if (type === 'range') {
+      if (!currentDate) {
+        select([date]);
+        return;
+      }
+      const [startDay, endDay] = currentDate;
+      if (startDay && !endDay) {
+        const compareToStart = compareDay(date, startDay);
+        if (compareToStart === 1) {
+          select([startDay, date], true);
+        } else if (compareToStart === -1) {
+          select([date]);
+        } else if (props.allowSameDay) {
+          select([date, date], true);
+        }
+      } else {
+        select([date]);
+      }
+    } else if (type === 'multiple') {
+      if (!currentDate) {
+        select([date]);
+        return;
+      }
+      let selectedIndex;
+      const selected = state.currentDate.some((dateItem, index) => {
+        const equal = compareDay(dateItem, date) === 0;
+        if (equal) {
+          selectedIndex = index;
+        }
+        return equal;
+      });
+      if (selected) {
+        const [unselectedDate] = currentDate.splice(selectedIndex, 1);
+        (_a = props.onUnselect) === null || _a === void 0 ? void 0 : _a.call(props, cloneDate(unselectedDate));
+        select([...currentDate]);
+      } else if (props.maxRange && currentDate.length >= props.maxRange) {
+        Toast(props.rangePrompt || `选择天数不能超过 ${props.maxRange} 天`);
+      } else {
+        select([...currentDate, date]);
+      }
+    } else {
+      select(date, true);
+    }
+  };
+  const renderMonth = (date, index) => {
+    const showMonthTitle = !props.horizontal && (index !== 0 || !props.showSubtitle);
+    return _jsx(CalendarMonth, Object.assign({
+      ref: setMonthRefs(index),
+      date: date,
+      currentDate: state.currentDate,
+      showMonthTitle: showMonthTitle,
+      firstDayOfWeek: dayOffset
+    }, pick(props, ['type', 'color', 'minDate', 'maxDate', 'showMark', 'formatter', 'rowHeight', 'showSubtitle', 'lazyRender', 'allowSameDay', 'topInfoRender', 'bottomInfoRender', 'formatMonthTitle']), {
+      onClick: onClickDay
+    }), index);
+  };
+  const renderFooterButton = () => {
+    if (props.footer) {
+      return props.footer;
+    }
+    if (props.showConfirm) {
+      const text = buttonDisabled ? props.confirmDisabledText : props.confirmText;
+      return _jsx(Button, Object.assign({
+        round: true,
+        block: true,
+        type: 'danger',
+        color: props.color,
+        className: cls(bem('confirm')),
+        disabled: buttonDisabled,
+        nativeType: 'button',
+        onClick: onConfirm
+      }, {
+        children: text || locale.vanCalendar.confirm
+      }));
+    }
+    return null;
+  };
+  const renderFooter = () => _jsx("div", Object.assign({
+    className: cls(bem('footer'), {
+      'rv-safe-area-bottom': props.safeAreaInsetBottom
+    })
+  }, {
+    children: renderFooterButton()
+  }));
+  const renderCalendar = () => _jsxs("div", Object.assign({
+    className: cls(className, bem()),
+    style: style
+  }, {
+    children: [_jsx(CalendarHeader, {
+      weekdays: props.weekdays,
+      title: props.title,
+      subtitle: props.subtitle || state.subtitle,
+      showTitle: props.showTitle,
+      showSubtitle: props.showSubtitle,
+      firstDayOfWeek: dayOffset,
+      onClickSubtitle: event => {
+        var _a;
+        (_a = props.onClickSubtitle) === null || _a === void 0 ? void 0 : _a.call(props, event);
+      }
+    }), props.horizontal ? _jsx("div", Object.assign({
+      ref: bodyRef,
+      className: cls(bem('horizontal-body'))
+    }, {
+      children: _jsx(Swiper, Object.assign({
+        indicator: () => null,
+        onChange: index => {
+          updateState({
+            subtitle: monthRefs[index].getTitle()
+          });
+        }
+      }, {
+        children: months.map((month, index) => _jsx(Swiper.Item, {
+          children: renderMonth(month, index)
+        }, month))
+      }))
+    })) : _jsx("div", Object.assign({
+      ref: bodyRef,
+      className: cls(bem('body')),
+      onScroll: onScroll
+    }, {
+      children: months.map(renderMonth)
+    })), renderFooter()]
+  }));
+  const actions = {
+    toggle: () => {
+      if (props.poppable) setVisible(v => !v);
+    },
+    open: () => {
+      if (props.poppable) {
+        setVisible(true);
+      }
+    },
+    close: () => {
+      if (props.poppable) {
+        setVisible(false);
+      }
+    }
+  };
+  useEffect(() => {
+    if (!props.poppable) {
+      init();
+    }
+  }, []);
+  useEffect(() => {
+    if (props.poppable && visible) {
+      init();
+    }
+  }, [visible]);
+  useUpdateEffect(() => {
+    reset(getInitialDate(state.currentDate));
+  }, [props.type, props.minDate, props.maxDate]);
+  useImperativeHandle(ref, () => Object.assign({
+    reset,
+    scrollToDate
+  }, actions));
+  if (props.poppable) {
+    return _jsxs(_Fragment, {
+      children: [_jsx(Popup, Object.assign({
+        visible: visible,
+        className: cls(bem('popup')),
+        round: props.round,
+        position: props.position,
+        closeable: props.showTitle || props.showSubtitle,
+        closeOnPopstate: props.closeOnPopstate,
+        closeOnClickOverlay: props.closeOnClickOverlay,
+        onClose: actions.close,
+        onClosed: () => {
+          var _a;
+          if (props.poppable && JSON.stringify(state.currentDate) !== JSON.stringify(value)) {
+            updateState({
+              currentDate: value
+            });
+          }
+          (_a = props.onClosed) === null || _a === void 0 ? void 0 : _a.call(props);
+        }
+      }, {
+        children: renderCalendar()
+      })), (_b = props.children) === null || _b === void 0 ? void 0 : _b.call(props, value, actions)]
+    });
+  }
+  return renderCalendar();
+});
+export default Calendar;

package/es/calendar/CalendarDay.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CalendarDayProps } from './PropsType';
+declare const CalenderDay: React.FC<CalendarDayProps>;
+export default CalenderDay;

package/es/calendar/CalendarDay.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import cls from 'clsx';
+import { createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('calendar');
+const CalenderDay = p => {
+  const props = mergeProps(p, {
+    offset: 0
+  });
+  const style = useMemo(() => {
+    const {
+      item,
+      index,
+      color,
+      offset,
+      rowHeight
+    } = props;
+    const iternalStyle = {
+      height: rowHeight
+    };
+    if (item.type === 'placeholder') {
+      iternalStyle.width = '100%';
+      return iternalStyle;
+    }
+    if (index === 0) {
+      iternalStyle.marginLeft = `${100 * offset / 7}%`;
+    }
+    if (color) {
+      switch (item.type) {
+        case 'end':
+        case 'start':
+        case 'start-end':
+        case 'multiple-middle':
+        case 'multiple-selected':
+          iternalStyle.background = color;
+          break;
+        case 'middle':
+          iternalStyle.color = color;
+          break;
+        default:
+          break;
+      }
+    }
+    return iternalStyle;
+  }, [props.item, props.index, props.color, props.offset, props.rowHeight]);
+  const onClick = () => {
+    var _a;
+    if (props.item.type !== 'disabled') {
+      (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, props.item);
+    }
+  };
+  const renderTopInfo = () => {
+    const {
+      topInfo
+    } = props.item;
+    if (topInfo || props.topInfoRender) {
+      return _jsx("div", Object.assign({
+        className: cls(bem('top-info'))
+      }, {
+        children: props.topInfoRender ? props.topInfoRender(props.item) : topInfo
+      }));
+    }
+    return null;
+  };
+  const renderBottomInfo = () => {
+    const {
+      bottomInfo
+    } = props.item;
+    if (bottomInfo || props.bottomInfoRender) {
+      return _jsx("div", Object.assign({
+        className: cls(bem('bottom-info'))
+      }, {
+        children: props.bottomInfoRender ? props.bottomInfoRender(props.item) : bottomInfo
+      }));
+    }
+    return null;
+  };
+  const renderContent = () => {
+    const {
+      item,
+      color,
+      rowHeight
+    } = props;
+    const {
+      type,
+      text
+    } = item;
+    const Nodes = _jsxs(_Fragment, {
+      children: [renderTopInfo(), text, renderBottomInfo()]
+    });
+    if (type === 'selected') {
+      return _jsx("div", Object.assign({
+        className: cls(bem('selected-day')),
+        style: {
+          width: rowHeight,
+          height: rowHeight,
+          background: color
+        }
+      }, {
+        children: Nodes
+      }));
+    }
+    return Nodes;
+  };
+  const {
+    type,
+    className
+  } = props.item;
+  if (type === 'placeholder') {
+    return _jsx("div", {
+      className: cls(bem('day')),
+      style: style
+    });
+  }
+  return _jsx("div", Object.assign({
+    role: 'gridcell',
+    style: style,
+    className: cls(bem('day', type), className),
+    tabIndex: type === 'disabled' ? undefined : -1,
+    onClick: onClick
+  }, {
+    children: renderContent()
+  }));
+};
+export default CalenderDay;

package/es/calendar/CalendarHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CalendarHeaderProps } from './PropsType';
+declare const CalenderHeader: React.FC<CalendarHeaderProps>;
+export default CalenderHeader;

package/es/calendar/CalendarHeader.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import cls from 'clsx';
+import ConfigProviderContext from '../config-provider/ConfigProviderContext';
+import { createNamespace } from '../utils';
+const [bem] = createNamespace('calendar');
+const CalenderHeader = props => {
+  const {
+    locale
+  } = useContext(ConfigProviderContext);
+  const renderTitle = () => {
+    if (props.showTitle) {
+      const text = props.title || locale.vanCalendar.title;
+      return _jsx("div", Object.assign({
+        className: cls(bem('header-title'))
+      }, {
+        children: text
+      }));
+    }
+    return null;
+  };
+  const onClickSubtitle = event => {
+    var _a;
+    (_a = props.onClickSubtitle) === null || _a === void 0 ? void 0 : _a.call(props, event);
+  };
+  const renderSubtitle = () => {
+    if (props.showSubtitle) {
+      return _jsx("div", Object.assign({
+        className: cls(bem('header-subtitle')),
+        onClick: onClickSubtitle
+      }, {
+        children: props.subtitle
+      }));
+    }
+    return null;
+  };
+  const renderWeekDays = () => {
+    const {
+      weekdays: customWeekdays,
+      firstDayOfWeek
+    } = props;
+    const defaultWeekdays = locale.vanCalendar.weekdays;
+    const weekdays = customWeekdays ? defaultWeekdays.map((wk, i) => customWeekdays[i] || wk) : defaultWeekdays;
+    const renderWeekDaysContent = [...weekdays.slice(firstDayOfWeek, 7), ...weekdays.slice(0, firstDayOfWeek)];
+    return _jsx("div", Object.assign({
+      className: cls(bem('weekdays'))
+    }, {
+      children: renderWeekDaysContent.map((text, i) =>
+      // eslint-disable-next-line react/no-array-index-key
+      _jsx("span", Object.assign({
+        className: cls(bem('weekday'))
+      }, {
+        children: text
+      }), i))
+    }));
+  };
+  return _jsxs("div", Object.assign({
+    className: cls(bem('header'))
+  }, {
+    children: [renderTitle(), renderSubtitle(), renderWeekDays()]
+  }));
+};
+export default CalenderHeader;

package/es/calendar/CalendarMonth.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CalendarMonthProps } from './PropsType';
+declare const CalenderMonth: React.ForwardRefExoticComponent<CalendarMonthProps & React.RefAttributes<unknown>>;
+export default CalenderMonth;