@nickeylin/antd-mobile-pro 2.0.2 → 2.1.0

package/dist/cjs/components/checkbox/checkbox.d.ts

@@ -17,7 +17,7 @@ declare const Checkbox: import("react").ForwardRefExoticComponent<{
     onClick?: ((event: import("react").MouseEvent<HTMLLabelElement, MouseEvent>) => void) | undefined;
 } & {
     className?: string | undefined;
-    style?: (import("react").CSSProperties & Partial<Record<"--font-size" | "--gap" | "--icon-size", string>>) | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--gap" | "--icon-size" | "--font-size", string>>) | undefined;
     tabIndex?: number | undefined;
 } & import("react").AriaAttributes & {
     shape?: "circle" | "square" | undefined;

package/dist/cjs/components/checkbox/index.d.ts

@@ -14,7 +14,7 @@ declare const Checkbox: import("react").ForwardRefExoticComponent<{
     onClick?: ((event: import("react").MouseEvent<HTMLLabelElement, MouseEvent>) => void) | undefined;
 } & {
     className?: string | undefined;
-    style?: (import("react").CSSProperties & Partial<Record<"--font-size" | "--gap" | "--icon-size", string>>) | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--gap" | "--icon-size" | "--font-size", string>>) | undefined;
     tabIndex?: number | undefined;
 } & import("react").AriaAttributes & {
     shape?: "circle" | "square" | undefined;

package/dist/cjs/components/index.d.ts

@@ -19,6 +19,7 @@ export { default as Money, type MoneyProps } from './money';
 export { default as Page, type PageBodyProps, type PageFooterProps, type PageProps, type PageToolbarProps, } from './page';
 export { default as PopupPage, type PopupPageProps } from './popup-page';
 export { createPopupPickerPrompt, usePopupPickerMixin, type PopupPickerActions, type PopupPickerMixinProps, } from './popup-picker-base';
+export { default as ProCalendar, type ProCalendarDate, type ProCalendarProps, } from './pro-calendar';
 export { default as ProCalendarPicker, type ProCalendarPickerActions, type ProCalendarPickerProps, } from './pro-calendar-picker';
 export * from './pro-form';
 export { default as ProList, type ProListAction, type ProListPaginationProps, type ProListProps, } from './pro-list';

package/dist/cjs/components/index.js

@@ -50,6 +50,7 @@ __export(components_exports, {
   Money: () => import_money.default,
   Page: () => import_page.default,
   PopupPage: () => import_popup_page.default,
+  ProCalendar: () => import_pro_calendar.default,
   ProCalendarPicker: () => import_pro_calendar_picker.default,
   ProList: () => import_pro_list.default,
   ProListPicker: () => import_pro_list_picker.default,
@@ -87,6 +88,7 @@ var import_money = __toESM(require("./money"));
 var import_page = __toESM(require("./page"));
 var import_popup_page = __toESM(require("./popup-page"));
 var import_popup_picker_base = require("./popup-picker-base");
+var import_pro_calendar = __toESM(require("./pro-calendar"));
 var import_pro_calendar_picker = __toESM(require("./pro-calendar-picker"));
 __reExport(components_exports, require("./pro-form"), module.exports);
 var import_pro_list = __toESM(require("./pro-list"));
@@ -121,6 +123,7 @@ var import_tree_picker = __toESM(require("./tree-picker"));
   Money,
   Page,
   PopupPage,
+  ProCalendar,
   ProCalendarPicker,
   ProList,
   ProListPicker,

package/dist/cjs/components/popup-page/popup-page.d.ts

@@ -5,6 +5,7 @@ import { PageProps } from '../page';
 export type PopupPageProps = Omit<PopupProps, 'showCloseButton' | 'children'> & Omit<PageProps, 'style'> & {
     pageStyle?: PageProps['style'];
     pageClassName?: PageProps['className'];
+    closeButtonPosition?: 'left' | 'right';
 } & NativeProps<'--page-height'>;
 declare const PopupPage: FC<PopupPageProps>;
 export default PopupPage;

package/dist/cjs/components/popup-page/popup-page.js

@@ -36,6 +36,7 @@ var import_rc_utils = require("@nickeylin/rc-utils");
 var import_antd_mobile = require("antd-mobile");
 var import_antd_mobile_icons = require("antd-mobile-icons");
 var import_classnames = __toESM(require("classnames"));
+var import_react = require("react");
 var import_bem = require("../../utils/bem");
 var import_page = __toESM(require("../page"));
 var bem = (0, import_bem.cn)("popup-page");
@@ -52,6 +53,7 @@ var PopupPage = ({
   error,
   onBack,
   title,
+  closeButtonPosition = "left",
   // popup prps
   ...props
 }) => {
@@ -62,6 +64,32 @@ var PopupPage = ({
         onClose == null ? void 0 : onClose();
     }
   });
+  const pageProps = (0, import_react.useMemo)(() => {
+    if (closeButtonPosition === "right") {
+      return {
+        navbar: {
+          right: /* @__PURE__ */ React.createElement(
+            import_antd_mobile_icons.CloseOutline,
+            {
+              className: bem("close-button"),
+              onClick: () => {
+                setVisible(false);
+                onBack == null ? void 0 : onBack();
+              }
+            }
+          ),
+          ...navbar
+        }
+      };
+    }
+    return {
+      navbar: { backIcon: /* @__PURE__ */ React.createElement(import_antd_mobile_icons.CloseOutline, null), ...navbar },
+      onBack() {
+        setVisible(false);
+        onBack == null ? void 0 : onBack();
+      }
+    };
+  }, [closeButtonPosition, navbar, onBack, setVisible]);
   return /* @__PURE__ */ React.createElement(
     import_antd_mobile.Popup,
     {
@@ -75,13 +103,9 @@ var PopupPage = ({
       {
         style: pageStyle,
         className: pageClassName,
-        navbar: { backIcon: /* @__PURE__ */ React.createElement(import_antd_mobile_icons.CloseOutline, null), ...navbar },
+        ...pageProps,
         ...{ loading, error, title },
-        showNavBar: true,
-        onBack: () => {
-          setVisible(false);
-          onBack == null ? void 0 : onBack();
-        }
+        showNavBar: true
       },
       children
     )

package/dist/cjs/components/popup-page/style.less

@@ -18,4 +18,8 @@
   &__default-action-footer {
     padding: 8px 14px;
   }
+
+  &__close-button {
+    font-size: 24px;
+  }
 }

package/dist/cjs/components/pro-calendar/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import './style.less';
+import { computeDays, formatProCalendarDateValues } from './utils';
+declare const ProCalendar: import("react").ForwardRefExoticComponent<import("./pro-calendar").ProCalendarProps & import("react").RefAttributes<import("antd-mobile").CalendarRef>> & {
+    defaultFormat: typeof formatProCalendarDateValues;
+    computeDays: typeof computeDays;
+};
+export default ProCalendar;
+export type { ProCalendarProps } from './pro-calendar';
+export type { PickerDate as ProCalendarDate } from './utils';

package/dist/cjs/components/pro-calendar/index.js

@@ -0,0 +1,42 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pro-calendar/index.tsx
+var pro_calendar_exports = {};
+__export(pro_calendar_exports, {
+  default: () => pro_calendar_default
+});
+module.exports = __toCommonJS(pro_calendar_exports);
+var import_pro_calendar = __toESM(require("./pro-calendar"));
+var import_style = require("./style.less");
+var import_utils = require("./utils");
+var ProCalendar = Object.assign(import_pro_calendar.default, {
+  defaultFormat: import_utils.formatProCalendarDateValues,
+  computeDays: import_utils.computeDays
+});
+var pro_calendar_default = ProCalendar;

package/dist/cjs/components/pro-calendar/pro-calendar.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { CalendarProps, CalendarRef } from 'antd-mobile';
+import { PickerDate } from './utils';
+interface ProCalendarPropsInner {
+    /**
+     * 是否开启半日选择
+     * @default false
+     */
+    enableHalfDay?: boolean;
+    /**
+     * 是否开启晚上选择
+     * @default false
+     */
+    enableHalfDayNight?: boolean;
+}
+interface ProCalendarNormalProps {
+    selectionMode?: undefined;
+    value?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+}
+interface ProCalendarSingleProps {
+    selectionMode: 'single';
+    value?: PickerDate | null;
+    defaultValue?: PickerDate | null;
+    onChange?: (value: PickerDate | null) => void;
+}
+interface ProCalendarRangeProps {
+    selectionMode?: 'range';
+    value?: PickerDate[] | null;
+    defaultValue?: PickerDate[] | null;
+    onChange?: (value: PickerDate[] | null) => void;
+}
+export type ProCalendarProps = ProCalendarPropsInner & (ProCalendarNormalProps | ProCalendarSingleProps | ProCalendarRangeProps) & Omit<CalendarProps, 'value' | 'onChange' | 'defaultValue' | 'selectionMode'>;
+export declare function convertValueToRange(value: PickerDate | PickerDate[] | null): PickerDate[] | null;
+declare const ProCalendar: import("react").ForwardRefExoticComponent<ProCalendarProps & import("react").RefAttributes<CalendarRef>>;
+export default ProCalendar;

package/dist/cjs/components/pro-calendar/pro-calendar.js

@@ -0,0 +1,173 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pro-calendar/pro-calendar.tsx
+var pro_calendar_exports = {};
+__export(pro_calendar_exports, {
+  convertValueToRange: () => convertValueToRange,
+  default: () => pro_calendar_default
+});
+module.exports = __toCommonJS(pro_calendar_exports);
+var import_ahooks = require("ahooks");
+var import_antd_mobile = require("antd-mobile");
+var import_classnames = __toESM(require("classnames"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_lodash = require("lodash");
+var import_react = require("react");
+var import_bem = require("../../utils/bem");
+var import_utils = require("./utils");
+var bem = (0, import_bem.cn)("calendar");
+function convertValueToRange(value) {
+  if (!value)
+    return null;
+  if (Array.isArray(value)) {
+    if (value.length <= 1)
+      return value;
+    return value;
+  }
+  return [value];
+}
+var ProCalendarRaw = ({
+  enableHalfDay = false,
+  enableHalfDayNight = false,
+  weekStartsOn = "Monday",
+  value: valueProp,
+  onChange: onChangeProp,
+  defaultValue: defaultValueProp,
+  selectionMode,
+  className,
+  ...props
+}, ref) => {
+  const [value, setValue_] = (0, import_ahooks.useControllableValue)(
+    (0, import_lodash.pickBy)(
+      {
+        value: valueProp,
+        defaultValue: defaultValueProp,
+        onChange: onChangeProp
+      },
+      (v) => v !== void 0
+    )
+  );
+  const rangeValue = (0, import_react.useMemo)(() => convertValueToRange(value) ?? [], [value]);
+  const setValue = (0, import_react.useCallback)(
+    (v) => {
+      if (selectionMode === "range" && enableHalfDay) {
+        setValue_((prev) => {
+          if (!v)
+            return v;
+          if (!prev || !Array.isArray(prev) || !prev[0] || prev.length >= 2) {
+            return [v];
+          }
+          return (0, import_utils.mergeDates)([...prev, v]);
+        });
+        return;
+      }
+      setValue_(v);
+    },
+    [enableHalfDay, selectionMode, setValue_]
+  );
+  return /* @__PURE__ */ React.createElement(
+    import_antd_mobile.Calendar,
+    {
+      ref,
+      className: (0, import_classnames.default)(bem(), className),
+      weekStartsOn,
+      selectionMode: enableHalfDay ? void 0 : selectionMode,
+      value,
+      onChange: (v) => {
+        if (enableHalfDay)
+          return;
+        setValue(v);
+      },
+      cellRender: (oriNode, { date }) => {
+        const dd = (0, import_dayjs.default)(date);
+        const isWeekend = dd.day() === 0 || dd.day() === 6;
+        if (!enableHalfDay) {
+          const node2 = (0, import_react.cloneElement)(oriNode, {
+            className: (0, import_classnames.default)(
+              oriNode.props.className,
+              bem("cell", {
+                weekend: isWeekend
+              })
+            )
+          });
+          return node2;
+        }
+        const nextValue = new Date(date);
+        const classes = (0, import_utils.classesForDate)(date, rangeValue);
+        const node = (0, import_react.cloneElement)(oriNode, {
+          className: (0, import_classnames.default)(oriNode.props.className, bem("cell", classes)),
+          onClick: () => {
+          }
+        });
+        const acts = [import_utils.HALF_DAY_PERIOD.AM, import_utils.HALF_DAY_PERIOD.PM];
+        if (enableHalfDayNight) {
+          acts.push(import_utils.HALF_DAY_PERIOD.NIGHT);
+        }
+        acts.unshift(import_utils.HALF_DAY_PERIOD.ALL);
+        const actions = acts.map((act) => ({
+          key: act,
+          text: import_utils.HALF_DAY_PERIOD_NAMES[act]
+        }));
+        return /* @__PURE__ */ React.createElement(
+          import_antd_mobile.Popover.Menu,
+          {
+            actions,
+            placement: "top",
+            className: bem("period-menu"),
+            onAction: (node2) => {
+              switch (node2.key) {
+                case import_utils.HALF_DAY_PERIOD.AM:
+                  nextValue.period = import_utils.HALF_DAY_PERIOD.AM;
+                  break;
+                case import_utils.HALF_DAY_PERIOD.PM:
+                  nextValue.period = import_utils.HALF_DAY_PERIOD.PM;
+                  break;
+                case import_utils.HALF_DAY_PERIOD.NIGHT:
+                  nextValue.period = import_utils.HALF_DAY_PERIOD.NIGHT;
+                  break;
+                default:
+                  break;
+              }
+              setValue(nextValue);
+            },
+            trigger: "click"
+          },
+          node
+        );
+      },
+      ...props
+    }
+  );
+};
+var ProCalendar = (0, import_react.forwardRef)(ProCalendarRaw);
+var pro_calendar_default = ProCalendar;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  convertValueToRange
+});

package/dist/cjs/components/pro-calendar/style.less

@@ -0,0 +1,105 @@
+@import '../styles/variable.less';
+
+@class-prefix-pro-calendar:~ '@{adm-pro-prefix}-calendar';
+
+.@{class-prefix-pro-calendar} {
+  .adm-calendar-cell {
+    &-selected:not(&-selected-begin):not(&-selected-end) {
+      background-color: rgba(22, 119, 255, 0.1);
+      color: var(--adm-color-text);
+    }
+  }
+  .adm-calendar-cell.adm-calendar-cell-disabled {
+    color: var(--adm-color-border);
+  }
+  .adm-calendar-cell.adm-calendar-cell-today {
+    color: var(--adm-color-text);
+    border: 1px solid var(--adm-color-primary);
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
+
+  &__cell {
+    position: relative;
+    overflow: hidden;
+    & > div {
+      position: relative;
+    }
+    // &&--weekend {
+    //   color: var(--adm-color-weak);
+    // }
+    &&--allday,
+    &&--allday.adm-calendar-cell-today {
+      background-color: var(--adm-color-primary);
+      color: var(--adm-color-white);
+    }
+    &--begin {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+    }
+    &--end {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+    }
+    &--am::before,
+    &--pm::before,
+    &--night::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      background-color: var(--adm-color-primary);
+    }
+
+    &--am {
+      &::before {
+        top: 0;
+        height: 50%;
+        // border-top-left-radius: 4px;
+        // border-top-right-radius: 4px;
+      }
+    }
+    &--pm {
+      &::before {
+        bottom: 0;
+        height: 50%;
+        // border-bottom-left-radius: 4px;
+        // border-bottom-right-radius: 4px;
+      }
+    }
+    &--night {
+      &::before {
+        bottom: 0;
+        height: 6px;
+        // border-bottom-left-radius: 4px;
+        // border-bottom-right-radius: 4px;
+      }
+    }
+    &--cover {
+      background-color: rgba(22, 119, 255, 0.1);
+    }
+  }
+
+  &__period-menu {
+    .adm-popover-menu-list {
+      min-width: 80px;
+    }
+    .adm-popover-menu-item {
+      padding: 0;
+    }
+    .adm-popover-menu-item-text {
+      padding: 10px 20px 10px 20px;
+      text-align: center;
+    }
+  }
+}
+
+html[data-prefers-color-scheme='dark'] {
+  .@{class-prefix-pro-calendar} {
+    &__period-menu {
+      --background: rgba(0, 0, 0, 0.75);
+      --adm-color-text: #ffffff;
+      backdrop-filter: blur(10px);
+    }
+  }
+}

package/dist/cjs/components/pro-calendar/utils.d.ts

@@ -0,0 +1,32 @@
+export declare enum HALF_DAY_PERIOD {
+    ALL = 0,
+    AM = 1,
+    PM = 2,
+    NIGHT = 3
+}
+export declare const HALF_DAY_PERIOD_NAMES: {
+    readonly 0: "全天";
+    readonly 1: "上午";
+    readonly 2: "下午";
+    readonly 3: "晚上";
+};
+export type PickerDate = Date & {
+    period?: HALF_DAY_PERIOD;
+};
+/**
+ * 将选择的起止日期合并为有效的日期范围
+ */
+export declare function mergeDates(dates: PickerDate[]): PickerDate[];
+export declare function classesForDate(date: Date, rangeValue: PickerDate[]): {
+    am: boolean;
+    pm: boolean;
+    night: boolean;
+    allday: boolean;
+    begin: boolean;
+    end: boolean;
+    cover: boolean;
+    weekend: boolean;
+};
+export declare function formatProCalendarDate(date?: PickerDate): string;
+export declare function formatProCalendarDateValues(dates?: PickerDate | PickerDate[] | null): string;
+export declare function computeDays(value: PickerDate | PickerDate[] | null | undefined): number;