@nickeylin/antd-mobile-pro 2.0.3 → 2.1.0

package/dist/es/components/pro-calendar/utils.js

@@ -0,0 +1,138 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import dayjs from 'dayjs';
+export var HALF_DAY_PERIOD = /*#__PURE__*/function (HALF_DAY_PERIOD) {
+  HALF_DAY_PERIOD[HALF_DAY_PERIOD["ALL"] = 0] = "ALL";
+  HALF_DAY_PERIOD[HALF_DAY_PERIOD["AM"] = 1] = "AM";
+  HALF_DAY_PERIOD[HALF_DAY_PERIOD["PM"] = 2] = "PM";
+  HALF_DAY_PERIOD[HALF_DAY_PERIOD["NIGHT"] = 3] = "NIGHT";
+  return HALF_DAY_PERIOD;
+}({});
+export var HALF_DAY_PERIOD_NAMES = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, HALF_DAY_PERIOD.ALL, '全天'), HALF_DAY_PERIOD.AM, '上午'), HALF_DAY_PERIOD.PM, '下午'), HALF_DAY_PERIOD.NIGHT, '晚上');
+/**
+ * 将选择的起止日期合并为有效的日期范围
+ */
+export function mergeDates(dates) {
+  var sortedDates = dates.slice().sort(function (a, b) {
+    return dayjs(a).diff(b, 'day');
+  });
+  var _sortedDates = _slicedToArray(sortedDates, 2),
+    begin = _sortedDates[0],
+    end = _sortedDates[1];
+  var beginDay = dayjs(begin);
+  if (beginDay.isSame(end, 'day')) {
+    // 起始和结束在同一天
+
+    if (!begin.period || !end.period) {
+      // 若其中一个为整天，合并为整天
+      begin.period = undefined;
+      return [end];
+    }
+    if (begin.period === end.period) {
+      // 若时段一样，只取其中一个
+      return [begin];
+    }
+    if ([begin.period, end.period].includes(HALF_DAY_PERIOD.AM)) {
+      // 若时段不一样，其中一个为上午，合并为整天(另外一个一定为下午或晚上)
+      begin.period = undefined;
+      return [begin];
+    }
+    return sortedDates;
+  }
+
+  // 不在同一天
+  if (begin.period === HALF_DAY_PERIOD.AM) {
+    begin.period = undefined;
+  }
+  if (end.period && end.period >= HALF_DAY_PERIOD.PM) {
+    end.period = undefined;
+  }
+  return [begin, end];
+}
+export function classesForDate(date, rangeValue) {
+  var dd = dayjs(date);
+  var _rangeValue = _slicedToArray(rangeValue, 2),
+    begin = _rangeValue[0],
+    end = _rangeValue[1];
+  var isAm = false;
+  var isPm = false;
+  var isNight = false;
+  var isAllDay = false;
+  var isCover = false;
+  var isBegin = false;
+  var isEnd = false;
+  if (begin) {
+    if (dd.isSame(begin, 'day')) {
+      isAm = begin.period === HALF_DAY_PERIOD.AM;
+      isPm = begin.period === HALF_DAY_PERIOD.PM;
+      isNight = begin.period === HALF_DAY_PERIOD.NIGHT;
+      isAllDay = !begin.period;
+      isBegin = true;
+      if (!end) {
+        isEnd = true;
+      } else if (!begin.period || begin.period === HALF_DAY_PERIOD.AM) {
+        isCover = true;
+      }
+    } else if (end && dd.isSame(end, 'day')) {
+      isAm = end.period === HALF_DAY_PERIOD.AM;
+      isPm = end.period === HALF_DAY_PERIOD.PM;
+      isNight = end.period === HALF_DAY_PERIOD.NIGHT;
+      isAllDay = !end.period;
+      isEnd = true;
+      isCover = !!end.period && end.period >= HALF_DAY_PERIOD.PM;
+    } else if (end) {
+      isCover = dd.isAfter(begin, 'day') && dd.isBefore(end, 'day');
+    }
+  }
+  return {
+    am: isAm,
+    pm: isPm,
+    night: isNight,
+    allday: isAllDay,
+    begin: isBegin,
+    end: isEnd,
+    cover: isCover,
+    weekend: dd.day() === 0 || dd.day() === 6
+  };
+}
+export function formatProCalendarDate(date) {
+  if (!date) {
+    return '';
+  }
+  var dateStr = dayjs(date).format('YYYY-MM-DD');
+  var periodStr = !date.period ? '' : HALF_DAY_PERIOD_NAMES[date.period];
+  return [dateStr, periodStr].filter(function (v) {
+    return !!v;
+  }).join(' ');
+}
+export function formatProCalendarDateValues(dates) {
+  if (!dates) {
+    return '';
+  }
+  var arr = Array.isArray(dates) ? dates : [dates];
+  return arr.map(formatProCalendarDate).join(' ~ ');
+}
+export function computeDays(value) {
+  if (!value) {
+    return 0;
+  }
+  var rangeValue = Array.isArray(value) ? value : [value];
+  var _rangeValue2 = _slicedToArray(rangeValue, 2),
+    begin = _rangeValue2[0],
+    end = _rangeValue2[1];
+  if (!end) {
+    if (!begin.period) return 1;
+    if (begin.period === HALF_DAY_PERIOD.NIGHT) return 0;
+    return 0.5;
+  }
+  var days = dayjs(end).diff(dayjs(begin), 'day') + 1;
+  if (begin.period === HALF_DAY_PERIOD.PM) {
+    days -= 0.5;
+  } else if (begin.period === HALF_DAY_PERIOD.NIGHT) {
+    days -= 1;
+  }
+  if (end.period === HALF_DAY_PERIOD.AM) {
+    days -= 0.5;
+  }
+  return days;
+}

package/dist/es/components/pro-calendar-picker/index.d.ts

@@ -1,3 +1,4 @@
-import ProCalendarPicker from './picker';
+import ProCalendarPicker from './pro-calendar-picker';
+import './style.less';
 export default ProCalendarPicker;
-export type { ProCalendarPickerActions, ProCalendarPickerProps, } from './picker';
+export type { ProCalendarPickerActions, ProCalendarPickerProps, } from './pro-calendar-picker';

package/dist/es/components/pro-calendar-picker/index.js

@@ -1,2 +1,3 @@
-import ProCalendarPicker from "./picker";
+import ProCalendarPicker from "./pro-calendar-picker";
+import "./style.less";
 export default ProCalendarPicker;

package/dist/es/components/pro-calendar-picker/pro-calendar-picker.d.ts

@@ -0,0 +1,13 @@
+import { CalendarRef } from 'antd-mobile';
+import { PickerActions } from 'antd-mobile/es/components/picker';
+import { ReactNode } from 'react';
+import { ProCalendarDate, ProCalendarProps } from '../pro-calendar';
+export interface ProCalendarPickerActions extends Partial<CalendarRef>, PickerActions {
+}
+export type ProCalendarPickerValue = ProCalendarDate | ProCalendarDate[] | null | undefined;
+export type ProCalendarPickerProps = ProCalendarProps & {
+    allowClear?: boolean;
+    children?: (value: ProCalendarPickerValue, action: ProCalendarPickerActions) => ReactNode;
+};
+declare const ProCalendarPicker: import("react").ForwardRefExoticComponent<ProCalendarPickerProps & import("react").RefAttributes<ProCalendarPickerActions>>;
+export default ProCalendarPicker;

package/dist/es/components/pro-calendar-picker/pro-calendar-picker.js

@@ -0,0 +1,124 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "allowClear", "selectionMode", "value", "onChange"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useControllableValue } from 'ahooks';
+import { Button, Popup, SafeArea } from 'antd-mobile';
+import { CloseOutline } from 'antd-mobile-icons';
+import { pickBy } from 'lodash';
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { cn } from "../../utils/bem";
+import ProCalendar from "../pro-calendar";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var bem = cn('calendar-picker');
+var ProCalendarPickerRaw = function ProCalendarPickerRaw(_ref, ref) {
+  var children = _ref.children,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
+    _ref$selectionMode = _ref.selectionMode,
+    selectionMode = _ref$selectionMode === void 0 ? 'single' : _ref$selectionMode,
+    valueProp = _ref.value,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useControllableValue = useControllableValue(pickBy({
+      value: valueProp,
+      onChange: onChange
+    })),
+    _useControllableValue2 = _slicedToArray(_useControllableValue, 2),
+    value = _useControllableValue2[0],
+    setValue = _useControllableValue2[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(valueProp),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tempValue = _useState4[0],
+    setTempValue = _useState4[1];
+  useEffect(function () {
+    if (visible) setTempValue(value !== null && value !== void 0 ? value : null);
+  }, [value, visible]);
+  var calendarRef = useRef(null);
+  var action = useMemo(function () {
+    return _objectSpread(_objectSpread({}, calendarRef.current), {}, {
+      open: function open() {
+        setVisible(true);
+      },
+      close: function close() {
+        setVisible(false);
+      },
+      toggle: function toggle() {
+        setVisible(function (v) {
+          return !v;
+        });
+      }
+    });
+  }, []);
+  useImperativeHandle(ref, function () {
+    return action;
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [children === null || children === void 0 ? void 0 : children(value, action), /*#__PURE__*/_jsxs(Popup, {
+      visible: visible,
+      onClose: function onClose() {
+        return setVisible(false);
+      },
+      className: bem('popup'),
+      destroyOnClose: true,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: bem('popup-head'),
+        children: [allowClear && /*#__PURE__*/_jsx(Button, {
+          color: "default",
+          fill: "none",
+          size: "small",
+          className: bem('popup-head__clear'),
+          onClick: function onClick() {
+            setValue(undefined);
+            setVisible(false);
+          },
+          children: "\u6E05\u9664"
+        }), /*#__PURE__*/_jsx("div", {
+          className: bem('popup-head__title'),
+          children: "\u65E5\u671F\u9009\u62E9"
+        }), /*#__PURE__*/_jsx(Button, {
+          color: "default",
+          fill: "none",
+          size: "small",
+          className: bem('popup-head__close'),
+          onClick: function onClick() {
+            setVisible(false);
+          },
+          children: /*#__PURE__*/_jsx(CloseOutline, {})
+        })]
+      }), /*#__PURE__*/_jsx(ProCalendar, _objectSpread(_objectSpread({
+        selectionMode: selectionMode,
+        value: tempValue !== null && tempValue !== void 0 ? tempValue : null,
+        onChange: function onChange(v) {
+          setTempValue(v);
+        }
+      }, props), {}, {
+        ref: calendarRef
+      })), /*#__PURE__*/_jsxs("div", {
+        className: bem('popup-footer'),
+        children: [/*#__PURE__*/_jsx(Button, {
+          block: true,
+          color: "primary",
+          onClick: function onClick() {
+            console.log('setValue', tempValue);
+            setValue(tempValue);
+            setVisible(false);
+          },
+          children: "\u786E\u5B9A"
+        }), /*#__PURE__*/_jsx(SafeArea, {
+          position: "bottom"
+        })]
+      })]
+    })]
+  });
+};
+var ProCalendarPicker = /*#__PURE__*/forwardRef(ProCalendarPickerRaw);
+export default ProCalendarPicker;

package/dist/es/components/pro-calendar-picker/style.less

@@ -0,0 +1,38 @@
+@import '../styles/variable.less';
+
+@class-prefix-pro-calendar-picker:~ '@{adm-pro-prefix}-calendar-picker';
+.@{class-prefix-pro-calendar-picker} {
+  &__popup-head {
+    font-size: var(--adm-font-size-9);
+    color: var(--adm-color-text);
+    position: relative;
+    border-bottom: 1px solid var(--adm-color-border);
+    margin-bottom: 10px;
+    & &__clear {
+      position: absolute;
+      left: 6px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      padding: 6px 12px;
+      height: 30px;
+    }
+    &__title {
+      text-align: center;
+      line-height: 45px;
+    }
+    & &__close {
+      position: absolute;
+      right: 6px;
+      top: 0;
+      bottom: 0;
+      margin: auto;
+      padding: 6px 12px;
+      height: 30px;
+    }
+  }
+  &__popup-footer {
+    padding: var(--adm-padding-m) var(--adm-padding-l);
+    border-top: 1px solid var(--adm-color-border);
+  }
+}

package/dist/es/components/pro-form/pro-form-item-calendar-picker.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { ProCalendarPickerProps } from '../pro-calendar-picker';
 import { ProFormItemFieldProps } from './pro-form-item';
-export type ProFormCalendarPickerProps = ProFormItemFieldProps<ProCalendarPickerProps> & Pick<ProCalendarPickerProps, 'mode' | 'min' | 'max' | 'format'>;
+export type ProFormCalendarPickerProps = ProFormItemFieldProps<ProCalendarPickerProps> & Pick<ProCalendarPickerProps, 'selectionMode' | 'min' | 'max' | 'enableHalfDay'>;
 declare const ProFormCalendarPicker: FC<ProFormCalendarPickerProps>;
 export default ProFormCalendarPicker;

package/dist/es/components/pro-form/pro-form-item-calendar-picker.js

@@ -1,9 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["fieldProps", "placeholder", "mode", "min", "max", "format", "onClick"];
+var _excluded = ["fieldProps", "placeholder", "selectionMode", "min", "max", "enableHalfDay", "onClick"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useConfig } from "../config-provider";
+import ProCalendar from "../pro-calendar";
 import ProCalendarPicker from "../pro-calendar-picker";
 import ProFormItem, { ProFormItemValue } from "./pro-form-item";
 import { useReadonly } from "./utils";
@@ -14,21 +15,20 @@ var ProFormCalendarPicker = function ProFormCalendarPicker(p) {
   var fieldProps = p.fieldProps,
     _p$placeholder = p.placeholder,
     placeholder = _p$placeholder === void 0 ? locale.common.selectPlaceholder : _p$placeholder,
-    mode = p.mode,
+    selectionMode = p.selectionMode,
     min = p.min,
     max = p.max,
-    format = p.format,
+    enableHalfDay = p.enableHalfDay,
     _onClick = p.onClick,
     props = _objectWithoutProperties(p, _excluded);
   var calendarProps = _objectSpread({
-    mode: mode,
+    selectionMode: selectionMode,
     min: min,
     max: max,
-    format: format
+    enableHalfDay: enableHalfDay
   }, fieldProps);
   var readonly = useReadonly(props);
   return /*#__PURE__*/_jsx(ProFormItem, _objectSpread(_objectSpread({}, props), {}, {
-    trigger: "onConfirm",
     onClick: function onClick(e, pickerRef) {
       var _pickerRef$current;
       (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || _pickerRef$current.open();
@@ -36,10 +36,10 @@ var ProFormCalendarPicker = function ProFormCalendarPicker(p) {
     },
     children: /*#__PURE__*/_jsx(ProCalendarPicker, _objectSpread(_objectSpread({}, calendarProps), {}, {
       children: function children(val) {
-        var value = Array.isArray(val) ? val.join('~') : val;
+        var value = ProCalendar.defaultFormat(val);
         return /*#__PURE__*/_jsx(ProFormItemValue, {
           placeholder: placeholder,
-          value: value !== null && value !== void 0 ? value : undefined,
+          value: value || undefined,
           readonly: readonly
         });
       }

package/dist/es/components/styles/global.less

@@ -1,3 +1,9 @@
 html[data-prefers-color-scheme='dark'] {
   --adm-tabbar-background-color: var(--adm-color-background);
 }
+
+:root {
+  --adm-padding-s: 4px;
+  --adm-padding-m: 8px;
+  --adm-padding-l: 12px;
+}

package/dist/es/locales/base.d.ts

@@ -12,6 +12,7 @@ declare const base: {
         confirm: string;
         start: string;
         end: string;
+        startAndEnd: string;
         today: string;
         markItems: string[];
         yearAndMonth: string;
@@ -112,6 +113,9 @@ declare const base: {
     Modal: {
         ok: string;
     };
+    NumberKeyboard: {
+        backspace: string;
+    };
     PasscodeInput: {
         name: string;
     };

package/dist/es/locales/en-US.d.ts

@@ -11,6 +11,7 @@ declare const enUS: {
         confirm: string;
         start: string;
         end: string;
+        startAndEnd: string;
         today: string;
         markItems: string[];
         yearAndMonth: string;
@@ -111,6 +112,9 @@ declare const enUS: {
     Modal: {
         ok: string;
     };
+    NumberKeyboard: {
+        backspace: string;
+    };
     PasscodeInput: {
         name: string;
     };