@nickeylin/antd-mobile-pro 2.0.0

package/dist/es/components/input-password/input-password.js

@@ -0,0 +1,66 @@
+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 = ["className", "style", "placeholder", "inputClassName", "inputStyle", "renderToggle", "visible", "onVisibleChange"];
+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 { Button, Input } from 'antd-mobile';
+import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons';
+import { useMergedState } from '@nickeylin/rc-utils';
+import classNames from 'classnames';
+import { cn } from "../../utils/bem";
+import { useConfig } from "../config-provider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var bem = cn('input-password');
+var InputPassword = function InputPassword(props) {
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var className = props.className,
+    style = props.style,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? locale.InputPassword.defaultPlaceholder : _props$placeholder,
+    inputClassName = props.inputClassName,
+    inputStyle = props.inputStyle,
+    renderToggle = props.renderToggle,
+    visibleProp = props.visible,
+    onVisibleChange = props.onVisibleChange,
+    inputProps = _objectWithoutProperties(props, _excluded);
+  var _useMergedState = useMergedState(false, {
+      value: visibleProp,
+      onChange: onVisibleChange
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    visible = _useMergedState2[0],
+    setVisible = _useMergedState2[1];
+  var renderToggleDom = function renderToggleDom() {
+    if (renderToggle === false) return null;
+    var p = {
+      className: bem('toggle'),
+      fill: 'none',
+      size: 'small',
+      onClick: function onClick() {
+        setVisible(function (v) {
+          return !v;
+        });
+      }
+    };
+    if (renderToggle) {
+      return renderToggle(visible, p);
+    }
+    return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, p), {}, {
+      children: !visible ? /*#__PURE__*/_jsx(EyeInvisibleOutline, {}) : /*#__PURE__*/_jsx(EyeOutline, {})
+    }));
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(bem(), className),
+    style: style,
+    children: [/*#__PURE__*/_jsx(Input, _objectSpread({
+      className: bem('input', inputClassName),
+      style: inputStyle,
+      placeholder: placeholder,
+      type: visible ? 'text' : 'password'
+    }, inputProps)), renderToggleDom()]
+  });
+};
+export default InputPassword;

package/dist/es/components/input-password/style.less

@@ -0,0 +1,13 @@
+@class-prefix-input-password: ~'suid-input-password';
+
+.@{class-prefix-input-password} {
+  display: flex;
+  align-items: center;
+
+  &__input {
+    flex: 1;
+  }
+  &__toggle {
+    padding: 8px;
+  }
+}

package/dist/es/components/money/index.d.ts

@@ -0,0 +1,4 @@
+import { Money } from './money';
+import './money.less';
+export default Money;
+export { type MoneyProps } from './money';

package/dist/es/components/money/index.js

@@ -0,0 +1,3 @@
+import { Money } from "./money";
+import "./money.less";
+export default Money;

package/dist/es/components/money/money.d.ts

@@ -0,0 +1,18 @@
+import { ButtonProps } from 'antd-mobile';
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+import { FunctionComponent, ReactNode } from 'react';
+export interface MoneyProps extends NativeProps<'--font-size-sm' | '--font-size-md' | '--font-size-lg' | '--decimal-font-size' | '--symbol-font-size' | '--symbol-padding'> {
+    value: number | string;
+    symbol?: ReactNode;
+    digits?: number;
+    thousands?: boolean;
+    /**
+     * 符号位置
+     * `before`和`after`已废弃，请使用`start`和`end`代替
+     */
+    symbolPosition?: 'before' | 'after' | 'start' | 'end';
+    size?: 'small' | 'medium' | 'large' | 'default';
+    line?: boolean;
+    color?: ButtonProps['color'];
+}
+export declare const Money: FunctionComponent<Partial<MoneyProps>>;

package/dist/es/components/money/money.js

@@ -0,0 +1,90 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "symbol", "digits", "thousands", "symbolPosition", "size", "color", "line", "className", "style"];
+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 { withNativeProps } from 'antd-mobile/es/utils/native-props';
+import classNames from 'classnames';
+import { cn } from "../../utils/bem";
+import { useConfig } from "../config-provider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var bem = cn('money');
+export var Money = function Money(props) {
+  var _useConfig = useConfig(),
+    money = _useConfig.money;
+  var _money$props = _objectSpread(_objectSpread({}, money), props),
+    _money$props$value = _money$props.value,
+    value = _money$props$value === void 0 ? 0 : _money$props$value,
+    symbol = _money$props.symbol,
+    _money$props$digits = _money$props.digits,
+    digits = _money$props$digits === void 0 ? 2 : _money$props$digits,
+    thousands = _money$props.thousands,
+    _money$props$symbolPo = _money$props.symbolPosition,
+    symbolPosition = _money$props$symbolPo === void 0 ? 'start' : _money$props$symbolPo,
+    _money$props$size = _money$props.size,
+    size = _money$props$size === void 0 ? 'default' : _money$props$size,
+    _money$props$color = _money$props.color,
+    color = _money$props$color === void 0 ? 'default' : _money$props$color,
+    line = _money$props.line,
+    className = _money$props.className,
+    style = _money$props.style,
+    rest = _objectWithoutProperties(_money$props, _excluded);
+  var checkPoint = function checkPoint(price) {
+    return String(price).indexOf('.') > 0;
+  };
+  var formatThousands = function formatThousands(val) {
+    var num = val;
+    if (Number(num) === 0) {
+      num = 0;
+    }
+    if (checkPoint(num)) {
+      num = Number(num).toFixed(digits);
+      num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0];
+    } else {
+      num = num.toString();
+    }
+    if (thousands) {
+      return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
+    }
+    return num;
+  };
+  var formatDecimal = function formatDecimal(val) {
+    var decimalNum = val;
+    if (Number(decimalNum) === 0) {
+      decimalNum = 0;
+    }
+    if (checkPoint(decimalNum)) {
+      decimalNum = Number(decimalNum).toFixed(digits);
+      decimalNum = typeof decimalNum.split('.') === 'string' ? 0 : decimalNum.split('.')[1] || 0;
+    } else {
+      decimalNum = 0;
+    }
+    var result = "0.".concat(decimalNum);
+    var resultFixed = Number(result).toFixed(digits);
+    return String(resultFixed).substring(2, resultFixed.length);
+  };
+  var renderSymbol = function renderSymbol() {
+    return /*#__PURE__*/_jsx("div", {
+      className: bem('symbol', _defineProperty({}, symbolPosition, true)),
+      children: symbol
+    });
+  };
+  return withNativeProps(props, /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(bem({
+      line: line,
+      size: size !== 'default',
+      // 避免重复属性名，仅在 size 不为 'default' 时生效
+      color: color !== 'default' // 避免重复属性名，仅在 color 不为 'default' 时生效
+    }), className),
+    style: style
+  }, rest), {}, {
+    children: [symbol && (symbolPosition === 'before' || symbolPosition === 'start') ? renderSymbol() : null, /*#__PURE__*/_jsx("div", {
+      className: bem('integer'),
+      children: formatThousands(value)
+    }), digits !== 0 ? /*#__PURE__*/_jsxs("div", {
+      className: bem('decimal'),
+      children: [".", formatDecimal(value)]
+    }) : null, symbol && (symbolPosition === 'after' || symbolPosition === 'end') ? renderSymbol() : null]
+  })));
+};

package/dist/es/components/money/money.less

@@ -0,0 +1,64 @@
+@class-prefix-money: ~'suid-money';
+
+.@{class-prefix-money} {
+  display: inline;
+
+  &__decimal {
+    font-size: var(--decimal-font-size);
+  }
+  &__symbol {
+    font-size: var(--symbol-font-size);
+  }
+  // size
+  &--small {
+    font-size: var(--adm-font-size-4);
+  }
+  &--medium {
+    font-size: var(--adm-font-size-7);
+  }
+  &--large {
+    font-size: var(--adm-font-size-10);
+  }
+
+  // color
+  &--primary {
+    color: var(--adm-color-primary);
+  }
+  &--success {
+    color: var(--adm-color-success);
+  }
+  &--warning {
+    color: var(--adm-color-warning);
+  }
+  &--danger {
+    color: var(--adm-color-danger);
+  }
+
+  &--line {
+    div {
+      text-decoration: line-through;
+    }
+  }
+  &__symbol,
+  &__integer,
+  &__decimal {
+    display: inline-block;
+  }
+  &__symbol {
+    &--before {
+      padding-right: var(--symbol-padding);
+    }
+    &--after {
+      padding-left: var(--symbol-padding);
+    }
+  }
+}
+
+.@{class-prefix-money} {
+  --font-size-sm: var(--suid-money-font-size-sm, var(--adm-font-size-4));
+  --font-size-md: var(--suid-money-font-size-md, var(--adm-font-size-7));
+  --font-size-lg: var(--suid-money-font-size-lg, var(--adm-font-size-10));
+  --symbol-font-size: var(--suid-money-symbol-font-size);
+  --decimal-font-size: var(--suid-money-decimal-font-size, 0.8em);
+  --symbol-padding: var(--suid-money-symbol-padding, 2px);
+}

package/dist/es/components/page/body.d.ts

@@ -0,0 +1,19 @@
+import { ErrorBlockProps } from 'antd-mobile';
+import { CSSProperties, FC, ReactNode } from 'react';
+import { PageContextRenderValue } from './page-context';
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+export interface InnerPageBodyProps extends NativeProps {
+    children?: ReactNode | ((ctx: PageContextRenderValue) => ReactNode);
+    /**
+     * 页面错误信息，若传入Error对象、字符串、数字，会显示默认的错误界面，也可传入有效的Element代替默认的错误界面
+     */
+    error?: Error | ReactNode;
+    /**
+     * 默认错误组件属性，支持全局配置
+     */
+    errorProps?: ErrorBlockProps;
+    wrapperClassName?: string;
+    wrapperStyle?: CSSProperties;
+}
+declare const PageBody: FC<InnerPageBodyProps>;
+export default PageBody;

package/dist/es/components/page/body.js

@@ -0,0 +1,64 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "error", "errorProps", "wrapperClassName", "wrapperStyle"];
+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 classNames from 'classnames';
+import { cn } from "../../utils/bem";
+import ErrorBlock from "../error-block";
+import { usePage } from "./page-context";
+import { jsx as _jsx } from "react/jsx-runtime";
+var bem = cn('page');
+function hasError(error) {
+  return error instanceof Error || (typeof error === 'string' || typeof error === 'number') && !!error;
+}
+var PageBody = function PageBody(_ref) {
+  var _headerSize$height2, _footerSize$height2;
+  var children = _ref.children,
+    className = _ref.className,
+    error = _ref.error,
+    errorProps = _ref.errorProps,
+    wrapperClassName = _ref.wrapperClassName,
+    wrapperStyle = _ref.wrapperStyle,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var pageContext = usePage();
+  var headerSize = pageContext.headerSize,
+    footerSize = pageContext.footerSize,
+    footerFixed = pageContext.footerFixed;
+  var renderChildren = function renderChildren() {
+    if (hasError(error)) {
+      var _headerSize$height, _footerSize$height;
+      // 显示默认的错误界面
+      var errorMessage = error instanceof Error ? error.message : "".concat(error);
+      var extraHeight = ((_headerSize$height = headerSize === null || headerSize === void 0 ? void 0 : headerSize.height) !== null && _headerSize$height !== void 0 ? _headerSize$height : 0) + (footerFixed ? (_footerSize$height = footerSize === null || footerSize === void 0 ? void 0 : footerSize.height) !== null && _footerSize$height !== void 0 ? _footerSize$height : 0 : 0);
+      var _ref2 = errorProps !== null && errorProps !== void 0 ? errorProps : {},
+        style = _ref2.style;
+      return /*#__PURE__*/_jsx(ErrorBlock, _objectSpread({
+        status: "default",
+        title: errorMessage,
+        description: "",
+        fullPage: true,
+        style: _objectSpread({
+          paddingTop: "calc(50vh - ".concat(extraHeight, "px - var(--image-height-full-page))")
+        }, style)
+      }, errorProps));
+    }
+    if (error) return error;
+    if (typeof children === 'function') return children(pageContext);
+    return children;
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames(bem('body-wrapper'), wrapperClassName),
+    style: _objectSpread(_objectSpread({
+      paddingTop: (_headerSize$height2 = headerSize === null || headerSize === void 0 ? void 0 : headerSize.height) !== null && _headerSize$height2 !== void 0 ? _headerSize$height2 : 0
+    }, footerFixed ? {
+      paddingBottom: (_footerSize$height2 = footerSize === null || footerSize === void 0 ? void 0 : footerSize.height) !== null && _footerSize$height2 !== void 0 ? _footerSize$height2 : 0
+    } : {}), wrapperStyle),
+    children: /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      className: classNames(bem('body'), className)
+    }, props), {}, {
+      children: renderChildren()
+    }))
+  });
+};
+export default PageBody;

package/dist/es/components/page/footer.d.ts

@@ -0,0 +1,16 @@
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+import { FC, PropsWithChildren, ReactNode } from 'react';
+export interface InnerPageFooterProps extends NativeProps {
+    /** 是否固定页脚，默认不固定 */
+    fixed?: boolean;
+    /** 是否为页脚添加安全区域适配，默认`true` */
+    safearea?: boolean;
+    /** 是否在页面显示错误信息时，依然显示页脚区块，默认不显示 */
+    showOnError?: boolean;
+    /**
+     * 页面错误信息
+     */
+    error?: Error | ReactNode;
+}
+declare const PageFooter: FC<PropsWithChildren<InnerPageFooterProps>>;
+export default PageFooter;

package/dist/es/components/page/footer.js

@@ -0,0 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["fixed", "safearea", "children", "showOnError", "error", "className"];
+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 { SafeArea } from 'antd-mobile';
+import classNames from 'classnames';
+import { useEffect } from 'react';
+import { cn } from "../../utils/bem";
+import { usePage } from "./page-context";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var bem = cn('page');
+var PageFooter = function PageFooter(_ref) {
+  var _ref$fixed = _ref.fixed,
+    fixed = _ref$fixed === void 0 ? false : _ref$fixed,
+    _ref$safearea = _ref.safearea,
+    safearea = _ref$safearea === void 0 ? true : _ref$safearea,
+    children = _ref.children,
+    showOnError = _ref.showOnError,
+    error = _ref.error,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _usePage = usePage(),
+    footerRef = _usePage.footerRef,
+    setFooterFixed = _usePage.setFooterFixed;
+  useEffect(function () {
+    setFooterFixed(fixed);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fixed]);
+  if (error && !showOnError) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: classNames(bem('footer', {
+      fixed: fixed
+    }), className),
+    ref: footerRef
+  }, props), {}, {
+    children: [children, safearea && /*#__PURE__*/_jsx(SafeArea, {
+      position: "bottom"
+    })]
+  }));
+};
+export default PageFooter;

package/dist/es/components/page/index.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { type InnerPageBodyProps } from './body';
+import { type InnerPageFooterProps } from './footer';
+import { type PageProps } from './page';
+import './page.less';
+import { type PageToolbarProps } from './toolbar';
+declare const Page: import("react").FC<PageProps> & {
+    Toolbar: import("react").FC<PageToolbarProps>;
+    Body: import("react").FC<InnerPageBodyProps>;
+    Footer: import("react").FC<import("react").PropsWithChildren<InnerPageFooterProps>>;
+    usePage(): {
+        title: string | undefined;
+        setTitle: (title: string) => void;
+        headerSize: {
+            width: number;
+            height: number;
+        } | undefined;
+        footerSize: {
+            width: number;
+            height: number;
+        } | undefined;
+    };
+};
+export default Page;
+export type PageFooterProps = Omit<InnerPageFooterProps, 'error'>;
+export type PageBodyProps = Omit<InnerPageBodyProps, 'error' | 'errorAction'>;
+export { type PageProps, type PageToolbarProps };

package/dist/es/components/page/index.js

@@ -0,0 +1,26 @@
+import { useContext } from 'react';
+import PageBody from "./body";
+import PageFooter from "./footer";
+import _Page from "./page";
+import { PageContext } from "./page-context";
+import "./page.less";
+import PageToolbar from "./toolbar";
+var Page = Object.assign(_Page, {
+  Toolbar: PageToolbar,
+  Body: PageBody,
+  Footer: PageFooter,
+  usePage: function usePage() {
+    var _useContext = useContext(PageContext),
+      title = _useContext.title,
+      setTitle = _useContext.setTitle,
+      headerSize = _useContext.headerSize,
+      footerSize = _useContext.footerSize;
+    return {
+      title: title,
+      setTitle: setTitle,
+      headerSize: headerSize,
+      footerSize: footerSize
+    };
+  }
+});
+export default Page;

package/dist/es/components/page/page-context.d.ts

@@ -0,0 +1,20 @@
+import { useSize } from 'ahooks';
+import { Dispatch, FC, ReactNode, RefObject, SetStateAction } from 'react';
+export interface PageContextValue {
+    title?: string;
+    setTitle(title: string): void;
+    headerRef: RefObject<HTMLDivElement>;
+    footerRef: RefObject<HTMLDivElement>;
+    headerSize: ReturnType<typeof useSize>;
+    footerSize: ReturnType<typeof useSize>;
+    footerFixed: boolean;
+    setFooterFixed: Dispatch<SetStateAction<boolean>>;
+    inPage: boolean;
+}
+export type PageContextRenderValue = Pick<PageContextValue, 'title' | 'setTitle' | 'headerSize' | 'footerSize' | 'footerFixed'>;
+export declare const PageContext: import("react").Context<PageContextValue>;
+export declare function usePage(): PageContextValue;
+export declare const PageProvider: FC<{
+    title?: string;
+    children?: ReactNode;
+}>;

package/dist/es/components/page/page-context.js

@@ -0,0 +1,53 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useSize } from 'ahooks';
+import { createContext, createRef, useContext, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var PageContext = /*#__PURE__*/createContext({
+  setTitle: function setTitle() {
+    throw new Error('Function not implemented.');
+  },
+  headerRef: /*#__PURE__*/createRef(),
+  footerRef: /*#__PURE__*/createRef(),
+  headerSize: undefined,
+  footerSize: undefined,
+  footerFixed: false,
+  setFooterFixed: function setFooterFixed() {},
+  inPage: false
+});
+export function usePage() {
+  var ctx = useContext(PageContext);
+  return ctx;
+}
+export var PageProvider = function PageProvider(_ref) {
+  var titleProp = _ref.title,
+    children = _ref.children;
+  var _useState = useState(titleProp),
+    _useState2 = _slicedToArray(_useState, 2),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    footerFixed = _useState4[0],
+    setFooterFixed = _useState4[1];
+  var footerRef = useRef(null);
+  var headerRef = useRef(null);
+  var footerSize = useSize(footerRef);
+  var headerSize = useSize(headerRef);
+  useEffect(function () {
+    setTitle(titleProp);
+  }, [titleProp]);
+  return /*#__PURE__*/_jsx(PageContext.Provider, {
+    value: {
+      title: title,
+      setTitle: setTitle,
+      footerRef: footerRef,
+      headerRef: headerRef,
+      footerSize: footerSize,
+      headerSize: headerSize,
+      footerFixed: footerFixed,
+      setFooterFixed: setFooterFixed,
+      inPage: true
+    },
+    children: children
+  });
+};

package/dist/es/components/page/page.d.ts

@@ -0,0 +1,19 @@
+import { NavBarProps } from 'antd-mobile';
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+import { FC, ReactNode } from 'react';
+import { InnerPageBodyProps } from './body';
+import { PageContextRenderValue } from './page-context';
+interface InnerPageProps extends NativeProps<'--fixed-z-index' | '--loading-z-index' | '--navbar-color' | '--navbar-background-color' | '--background-color' | '--fixed-footer-background-color'>, Pick<InnerPageBodyProps, 'error' | 'errorProps'> {
+    /** 导航栏 */
+    navbar?: NavBarProps;
+    /** 是否显示导航栏，默认true */
+    showNavBar?: boolean;
+    children?: ReactNode | ((ctx: PageContextRenderValue) => ReactNode);
+    loading?: boolean;
+    onBack?(): void;
+}
+export interface PageProps extends InnerPageProps {
+    title?: string;
+}
+declare const Page: FC<PageProps>;
+export default Page;