@nickeylin/antd-mobile-pro 2.0.2 → 2.1.0

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

@@ -0,0 +1,175 @@
+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/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  HALF_DAY_PERIOD: () => HALF_DAY_PERIOD,
+  HALF_DAY_PERIOD_NAMES: () => HALF_DAY_PERIOD_NAMES,
+  classesForDate: () => classesForDate,
+  computeDays: () => computeDays,
+  formatProCalendarDate: () => formatProCalendarDate,
+  formatProCalendarDateValues: () => formatProCalendarDateValues,
+  mergeDates: () => mergeDates
+});
+module.exports = __toCommonJS(utils_exports);
+var import_dayjs = __toESM(require("dayjs"));
+var HALF_DAY_PERIOD = /* @__PURE__ */ ((HALF_DAY_PERIOD2) => {
+  HALF_DAY_PERIOD2[HALF_DAY_PERIOD2["ALL"] = 0] = "ALL";
+  HALF_DAY_PERIOD2[HALF_DAY_PERIOD2["AM"] = 1] = "AM";
+  HALF_DAY_PERIOD2[HALF_DAY_PERIOD2["PM"] = 2] = "PM";
+  HALF_DAY_PERIOD2[HALF_DAY_PERIOD2["NIGHT"] = 3] = "NIGHT";
+  return HALF_DAY_PERIOD2;
+})(HALF_DAY_PERIOD || {});
+var HALF_DAY_PERIOD_NAMES = {
+  [0 /* ALL */]: "全天",
+  [1 /* AM */]: "上午",
+  [2 /* PM */]: "下午",
+  [3 /* NIGHT */]: "晚上"
+};
+function mergeDates(dates) {
+  const sortedDates = dates.slice().sort((a, b) => {
+    return (0, import_dayjs.default)(a).diff(b, "day");
+  });
+  const [begin, end] = sortedDates;
+  const beginDay = (0, import_dayjs.default)(begin);
+  if (beginDay.isSame(end, "day")) {
+    if (!begin.period || !end.period) {
+      begin.period = void 0;
+      return [end];
+    }
+    if (begin.period === end.period) {
+      return [begin];
+    }
+    if ([begin.period, end.period].includes(1 /* AM */)) {
+      begin.period = void 0;
+      return [begin];
+    }
+    return sortedDates;
+  }
+  if (begin.period === 1 /* AM */) {
+    begin.period = void 0;
+  }
+  if (end.period && end.period >= 2 /* PM */) {
+    end.period = void 0;
+  }
+  return [begin, end];
+}
+function classesForDate(date, rangeValue) {
+  const dd = (0, import_dayjs.default)(date);
+  const [begin, end] = rangeValue;
+  let isAm = false;
+  let isPm = false;
+  let isNight = false;
+  let isAllDay = false;
+  let isCover = false;
+  let isBegin = false;
+  let isEnd = false;
+  if (begin) {
+    if (dd.isSame(begin, "day")) {
+      isAm = begin.period === 1 /* AM */;
+      isPm = begin.period === 2 /* PM */;
+      isNight = begin.period === 3 /* NIGHT */;
+      isAllDay = !begin.period;
+      isBegin = true;
+      if (!end) {
+        isEnd = true;
+      } else if (!begin.period || begin.period === 1 /* AM */) {
+        isCover = true;
+      }
+    } else if (end && dd.isSame(end, "day")) {
+      isAm = end.period === 1 /* AM */;
+      isPm = end.period === 2 /* PM */;
+      isNight = end.period === 3 /* NIGHT */;
+      isAllDay = !end.period;
+      isEnd = true;
+      isCover = !!end.period && end.period >= 2 /* 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
+  };
+}
+function formatProCalendarDate(date) {
+  if (!date) {
+    return "";
+  }
+  const dateStr = (0, import_dayjs.default)(date).format("YYYY-MM-DD");
+  const periodStr = !date.period ? "" : HALF_DAY_PERIOD_NAMES[date.period];
+  return [dateStr, periodStr].filter((v) => !!v).join(" ");
+}
+function formatProCalendarDateValues(dates) {
+  if (!dates) {
+    return "";
+  }
+  const arr = Array.isArray(dates) ? dates : [dates];
+  return arr.map(formatProCalendarDate).join(" ~ ");
+}
+function computeDays(value) {
+  if (!value) {
+    return 0;
+  }
+  const rangeValue = Array.isArray(value) ? value : [value];
+  const [begin, end] = rangeValue;
+  if (!end) {
+    if (!begin.period)
+      return 1;
+    if (begin.period === 3 /* NIGHT */)
+      return 0;
+    return 0.5;
+  }
+  let days = (0, import_dayjs.default)(end).diff((0, import_dayjs.default)(begin), "day") + 1;
+  if (begin.period === 2 /* PM */) {
+    days -= 0.5;
+  } else if (begin.period === 3 /* NIGHT */) {
+    days -= 1;
+  }
+  if (end.period === 1 /* AM */) {
+    days -= 0.5;
+  }
+  return days;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HALF_DAY_PERIOD,
+  HALF_DAY_PERIOD_NAMES,
+  classesForDate,
+  computeDays,
+  formatProCalendarDate,
+  formatProCalendarDateValues,
+  mergeDates
+});

package/dist/cjs/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/cjs/components/pro-calendar-picker/index.js

@@ -32,5 +32,6 @@ __export(pro_calendar_picker_exports, {
   default: () => pro_calendar_picker_default
 });
 module.exports = __toCommonJS(pro_calendar_picker_exports);
-var import_picker = __toESM(require("./picker"));
-var pro_calendar_picker_default = import_picker.default;
+var import_pro_calendar_picker = __toESM(require("./pro-calendar-picker"));
+var import_style = require("./style.less");
+var pro_calendar_picker_default = import_pro_calendar_picker.default;

package/dist/cjs/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/cjs/components/pro-calendar-picker/pro-calendar-picker.js

@@ -0,0 +1,141 @@
+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-picker/pro-calendar-picker.tsx
+var pro_calendar_picker_exports = {};
+__export(pro_calendar_picker_exports, {
+  default: () => pro_calendar_picker_default
+});
+module.exports = __toCommonJS(pro_calendar_picker_exports);
+var import_ahooks = require("ahooks");
+var import_antd_mobile = require("antd-mobile");
+var import_antd_mobile_icons = require("antd-mobile-icons");
+var import_lodash = require("lodash");
+var import_react = require("react");
+var import_bem = require("../../utils/bem");
+var import_pro_calendar = __toESM(require("../pro-calendar"));
+var bem = (0, import_bem.cn)("calendar-picker");
+var ProCalendarPickerRaw = ({
+  children,
+  allowClear = false,
+  selectionMode = "single",
+  value: valueProp,
+  onChange,
+  ...props
+}, ref) => {
+  const [value, setValue] = (0, import_ahooks.useControllableValue)(
+    (0, import_lodash.pickBy)({
+      value: valueProp,
+      onChange
+    })
+  );
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  const [tempValue, setTempValue] = (0, import_react.useState)(valueProp);
+  (0, import_react.useEffect)(() => {
+    if (visible)
+      setTempValue(value ?? null);
+  }, [value, visible]);
+  const calendarRef = (0, import_react.useRef)(null);
+  const action = (0, import_react.useMemo)(() => {
+    return {
+      ...calendarRef.current,
+      open() {
+        setVisible(true);
+      },
+      close() {
+        setVisible(false);
+      },
+      toggle() {
+        setVisible((v) => !v);
+      }
+    };
+  }, []);
+  (0, import_react.useImperativeHandle)(ref, () => action);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children == null ? void 0 : children(value, action), /* @__PURE__ */ React.createElement(
+    import_antd_mobile.Popup,
+    {
+      visible,
+      onClose: () => setVisible(false),
+      className: bem("popup"),
+      destroyOnClose: true
+    },
+    /* @__PURE__ */ React.createElement("div", { className: bem("popup-head") }, allowClear && /* @__PURE__ */ React.createElement(
+      import_antd_mobile.Button,
+      {
+        color: "default",
+        fill: "none",
+        size: "small",
+        className: bem("popup-head__clear"),
+        onClick: () => {
+          setValue(void 0);
+          setVisible(false);
+        }
+      },
+      "清除"
+    ), /* @__PURE__ */ React.createElement("div", { className: bem("popup-head__title") }, "日期选择"), /* @__PURE__ */ React.createElement(
+      import_antd_mobile.Button,
+      {
+        color: "default",
+        fill: "none",
+        size: "small",
+        className: bem("popup-head__close"),
+        onClick: () => {
+          setVisible(false);
+        }
+      },
+      /* @__PURE__ */ React.createElement(import_antd_mobile_icons.CloseOutline, null)
+    )),
+    /* @__PURE__ */ React.createElement(
+      import_pro_calendar.default,
+      {
+        selectionMode,
+        value: tempValue ?? null,
+        onChange: (v) => {
+          setTempValue(v);
+        },
+        ...props,
+        ref: calendarRef
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: bem("popup-footer") }, /* @__PURE__ */ React.createElement(
+      import_antd_mobile.Button,
+      {
+        block: true,
+        color: "primary",
+        onClick: () => {
+          console.log("setValue", tempValue);
+          setValue(tempValue);
+          setVisible(false);
+        }
+      },
+      "确定"
+    ), /* @__PURE__ */ React.createElement(import_antd_mobile.SafeArea, { position: "bottom" }))
+  ));
+};
+var ProCalendarPicker = (0, import_react.forwardRef)(ProCalendarPickerRaw);
+var pro_calendar_picker_default = ProCalendarPicker;

package/dist/cjs/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/cjs/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/cjs/components/pro-form/pro-form-item-calendar-picker.js

@@ -33,6 +33,7 @@ __export(pro_form_item_calendar_picker_exports, {
 });
 module.exports = __toCommonJS(pro_form_item_calendar_picker_exports);
 var import_config_provider = require("../config-provider");
+var import_pro_calendar = __toESM(require("../pro-calendar"));
 var import_pro_calendar_picker = __toESM(require("../pro-calendar-picker"));
 var import_pro_form_item = __toESM(require("./pro-form-item"));
 var import_utils = require("./utils");
@@ -41,20 +42,25 @@ var ProFormCalendarPicker = (p) => {
   const {
     fieldProps,
     placeholder = locale.common.selectPlaceholder,
-    mode,
+    selectionMode,
     min,
     max,
-    format,
+    enableHalfDay,
     onClick,
     ...props
   } = p;
-  const calendarProps = { mode, min, max, format, ...fieldProps };
+  const calendarProps = {
+    selectionMode,
+    min,
+    max,
+    enableHalfDay,
+    ...fieldProps
+  };
   const readonly = (0, import_utils.useReadonly)(props);
   return /* @__PURE__ */ React.createElement(
     import_pro_form_item.default,
     {
       ...props,
-      trigger: "onConfirm",
       onClick: (e, pickerRef) => {
         var _a;
         (_a = pickerRef.current) == null ? void 0 : _a.open();
@@ -62,12 +68,12 @@ var ProFormCalendarPicker = (p) => {
       }
     },
     /* @__PURE__ */ React.createElement(import_pro_calendar_picker.default, { ...calendarProps }, (val) => {
-      const value = Array.isArray(val) ? val.join("~") : val;
+      const value = import_pro_calendar.default.defaultFormat(val);
       return /* @__PURE__ */ React.createElement(
         import_pro_form_item.ProFormItemValue,
         {
           placeholder,
-          value: value ?? void 0,
+          value: value || void 0,
           readonly
         }
       );

package/dist/cjs/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/cjs/components/tree-picker/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import prompt from './prompt';
 import './tree-picker.less';
-declare const TreePicker: (<T extends import("..").TreeDataNode<object> = import("..").TreeDataNode<object>>(props: Omit<import("..").PopupPickerMixinProps<T | T[]>, "fieldNames"> & Pick<import("..").TreeProps<T>, "fieldNames" | "search" | "request" | "params" | "rowKey" | "dataSource"> & {
+declare const TreePicker: (<T extends import("..").TreeDataNode<object> = import("..").TreeDataNode<object>>(props: Omit<import("..").PopupPickerMixinProps<T | T[]>, "fieldNames"> & Pick<import("..").TreeProps<T>, "search" | "fieldNames" | "request" | "params" | "rowKey" | "dataSource"> & {
     treeProps?: Omit<import("..").TreeProps<T>, "rowKey"> | undefined;
     multiple?: boolean | undefined;
 } & {

package/dist/cjs/components/tree-picker/tree-picker.d.ts

@@ -9,7 +9,7 @@ export type TreePickerProps<T extends TreeDataNode<object> = TreeDataNode<object
      */
     multiple?: boolean;
 } & NativeProps;
-declare const TreePicker: <T extends TreeDataNode<object> = TreeDataNode<object>>(props: Omit<PopupPickerMixinProps<T | T[]>, "fieldNames"> & Pick<TreeProps<T>, "fieldNames" | "search" | "request" | "params" | "rowKey" | "dataSource"> & {
+declare const TreePicker: <T extends TreeDataNode<object> = TreeDataNode<object>>(props: Omit<PopupPickerMixinProps<T | T[]>, "fieldNames"> & Pick<TreeProps<T>, "search" | "fieldNames" | "request" | "params" | "rowKey" | "dataSource"> & {
     treeProps?: Omit<TreeProps<T>, "rowKey"> | undefined;
     /**
      * 启用多选时，将启用复选框禁用选择，即点击整行会选中复选框

package/dist/cjs/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/cjs/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;
     };

package/dist/es/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/es/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/es/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/es/components/index.js

@@ -19,6 +19,7 @@ export { default as Money } from "./money";
 export { default as Page } from "./page";
 export { default as PopupPage } from "./popup-page";
 export { createPopupPickerPrompt, usePopupPickerMixin } from "./popup-picker-base";
+export { default as ProCalendar } from "./pro-calendar";
 export { default as ProCalendarPicker } from "./pro-calendar-picker";
 export * from "./pro-form";
 export { default as ProList } from "./pro-list";

package/dist/es/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/es/components/popup-page/popup-page.js

@@ -1,13 +1,14 @@
 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", "className", "visible", "onClose", "pageStyle", "pageClassName", "navbar", "loading", "error", "onBack", "title"];
+var _excluded = ["children", "className", "visible", "onClose", "pageStyle", "pageClassName", "navbar", "loading", "error", "onBack", "title", "closeButtonPosition"];
 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 { useMergedState } from '@nickeylin/rc-utils';
 import { Popup } from 'antd-mobile';
 import { CloseOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
+import { useMemo } from 'react';
 import { cn } from "../../utils/bem";
 import Page from "../page";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,6 +25,8 @@ var PopupPage = function PopupPage(_ref) {
     error = _ref.error,
     _onBack = _ref.onBack,
     title = _ref.title,
+    _ref$closeButtonPosit = _ref.closeButtonPosition,
+    closeButtonPosition = _ref$closeButtonPosit === void 0 ? 'left' : _ref$closeButtonPosit,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useMergedState = useMergedState(false, {
       value: visibleProp,
@@ -34,28 +37,46 @@ var PopupPage = function PopupPage(_ref) {
     _useMergedState2 = _slicedToArray(_useMergedState, 2),
     visible = _useMergedState2[0],
     setVisible = _useMergedState2[1];
+  var pageProps = useMemo(function () {
+    if (closeButtonPosition === 'right') {
+      return {
+        navbar: _objectSpread({
+          right: /*#__PURE__*/_jsx(CloseOutline, {
+            className: bem('close-button'),
+            onClick: function onClick() {
+              setVisible(false);
+              _onBack === null || _onBack === void 0 || _onBack();
+            }
+          })
+        }, navbar)
+      };
+    }
+    return {
+      navbar: _objectSpread({
+        backIcon: /*#__PURE__*/_jsx(CloseOutline, {})
+      }, navbar),
+      onBack: function onBack() {
+        setVisible(false);
+        _onBack === null || _onBack === void 0 || _onBack();
+      }
+    };
+  }, [closeButtonPosition, navbar, _onBack, setVisible]);
   return /*#__PURE__*/_jsx(Popup, _objectSpread(_objectSpread({}, props), {}, {
     visible: visible,
     onClose: function onClose() {
       return setVisible(false);
     },
     className: classNames(bem(), className),
-    children: /*#__PURE__*/_jsx(Page, {
+    children: /*#__PURE__*/_jsx(Page, _objectSpread(_objectSpread({
       style: pageStyle,
-      className: pageClassName,
-      navbar: _objectSpread({
-        backIcon: /*#__PURE__*/_jsx(CloseOutline, {})
-      }, navbar),
+      className: pageClassName
+    }, pageProps), {}, {
       loading: loading,
       error: error,
       title: title,
       showNavBar: true,
-      onBack: function onBack() {
-        setVisible(false);
-        _onBack === null || _onBack === void 0 || _onBack();
-      },
       children: children
-    })
+    }))
   }));
 };
 export default PopupPage;

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

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