antd-mobile 5.0.0-rc.6 → 5.0.0

package/2x/es/components/form/form.js

@@ -1,55 +1,65 @@
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
+import { __rest } from "tslib";
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import List from '../list';
 import RcForm from 'rc-field-form';
 import { FormContext } from './context';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = 'adm-form';
-var defaultProps = {
+import { Header } from './header';
+const classPrefix = 'adm-form';
+const defaultProps = {
   hasFeedback: true,
   layout: 'vertical'
 };
-export var Form = /*#__PURE__*/forwardRef(function (p, ref) {
-  var props = mergeProps(defaultProps, p);
+export const Form = forwardRef((p, ref) => {
+  const props = mergeProps(defaultProps, p);
 
-  var className = props.className,
-      style = props.style,
-      hasFeedback = props.hasFeedback,
-      children = props.children,
-      layout = props.layout,
-      footer = props.footer,
-      mode = props.mode,
-      formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
+  const {
+    className,
+    style,
+    hasFeedback,
+    children,
+    layout,
+    footer,
+    mode
+  } = props,
+        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
 
-  return /*#__PURE__*/React.createElement(RcForm, Object.assign({
-    className: classNames(classPrefix, classPrefix + "-" + layout, className),
+  const lists = [];
+  let currentHeader = null;
+  let items = [];
+  let count = 0;
+
+  function collect() {
+    if (items.length === 0) return;
+    count += 1;
+    lists.push(React.createElement(List, {
+      header: currentHeader,
+      key: count,
+      mode: mode
+    }, items));
+    items = [];
+  }
+
+  React.Children.forEach(props.children, (child, index) => {
+    if (React.isValidElement(child) && child.type === Header) {
+      collect();
+      currentHeader = child.props.children;
+    } else {
+      items.push(child);
+    }
+  });
+  collect();
+  return React.createElement(RcForm, Object.assign({
+    className: classNames(classPrefix, className),
     style: style,
     ref: ref
-  }, formProps), /*#__PURE__*/React.createElement(List, {
-    mode: mode,
-    style: {
-      '--prefix-width': '6em',
-      '--align-items': 'stretch'
-    }
-  }, /*#__PURE__*/React.createElement(FormContext.Provider, {
+  }, formProps), React.createElement(FormContext.Provider, {
     value: {
       hasFeedback: hasFeedback,
-      layout: layout
+      layout
     }
-  }, children)), footer && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-footer"
+  }, lists), footer && React.createElement("div", {
+    className: `${classPrefix}-footer`
   }, footer));
 });

package/2x/es/components/form/header.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const Header: FC;

package/2x/es/components/form/header.js

@@ -0,0 +1 @@
+export const Header = () => null;

package/2x/es/components/form/index.css

@@ -1,9 +1,10 @@
-.adm-form .adm-list {
-  --padding-left: 40px;
+.adm-form .adm-list.adm-list {
+  --padding-left: 32px;
+  --padding-right: 24px;
 }
 
 .adm-form .adm-form-footer {
-  padding: 24px;
+  padding: 40px 24px;
 }
 
 .adm-form-item + .adm-form-item {
@@ -13,31 +14,49 @@
 .adm-form-item-label {
   display: block;
   height: 100%;
+  line-height: 1.5;
   box-sizing: border-box;
-  color: #666;
   position: relative;
+  color: #666666;
 }
 
 .adm-form-item-label-required {
   position: absolute;
   left: -0.6em;
-  top: 0.2em;
+  top: 0;
+  font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
   user-select: none;
 }
 
+.adm-form-item-label-help {
+  margin-left: 8px;
+}
+
 .adm-form-item-footer {
   color: var(--adm-color-danger);
+  margin-top: 8px;
 }
 
-.adm-form-item-hidden {
+.adm-form-item.adm-form-item-hidden {
   display: none;
 }
 
-.adm-form-vertical .adm-form-item-label {
-  margin-bottom: 8px;
+.adm-form-item.adm-form-item-horizontal.adm-list-item {
+  --align-items: stretch;
+  --prefix-width: 6em;
 }
 
-.adm-form-vertical .adm-form-item-footer {
-  margin-top: 8px;
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {
+  align-self: center;
+}
+
+.adm-form-item.adm-form-item-vertical .adm-form-item-label {
+  font-size: 30px;
+  margin-bottom: 8px;
 }

package/2x/es/components/form/index.d.ts

@@ -2,14 +2,16 @@
 import './index.less';
 import { useForm } from 'rc-field-form';
 export declare type FormLayout = 'vertical' | 'horizontal';
-export type { FormProps } from './form';
-export type { FormInstance } from 'rc-field-form';
-declare const _default: import("react").ForwardRefExoticComponent<import("rc-field-form").FormProps<any> & import("../../utils/native-props").NativeProps<never> & Partial<import("./context").FormContextType> & {
+export type { FormProps, FormInstance } from './form';
+export type { FormItemProps } from './form-item';
+export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<never> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     layout?: "horizontal" | "vertical" | undefined;
     mode?: "default" | "card" | undefined;
-} & import("react").RefAttributes<import("rc-field-form").FormInstance<any>>> & {
+} & import("react").RefAttributes<Pick<import("rc-field-form").FormInstance<any>, "submit" | "getFieldValue" | "getFieldsValue" | "getFieldError" | "getFieldsError" | "isFieldTouched" | "isFieldsTouched" | "resetFields" | "setFields" | "setFieldsValue" | "validateFields">>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
+    Header: import("react").FC<{}>;
     useForm: typeof useForm;
 };
 export default _default;

package/2x/es/components/form/index.js

@@ -2,8 +2,10 @@ import "./index.css";
 import { Form } from './form';
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
 import { FormItem } from './form-item';
+import { Header } from './header';
 import { useForm } from 'rc-field-form';
 export default attachPropertiesToComponent(Form, {
   Item: FormItem,
-  useForm: useForm
+  Header,
+  useForm
 });

package/2x/es/components/grid/grid.js

@@ -2,12 +2,14 @@ import { mergeProps } from '../../utils/with-default-props';
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { toCSSLength } from '../../utils/to-css-length';
-var classPrefix = "adm-grid";
-export var Grid = function Grid(props) {
-  var style = {
+const classPrefix = `adm-grid`;
+export const Grid = props => {
+  const style = {
     '--columns': props.columns.toString()
   };
-  var gap = props.gap;
+  const {
+    gap
+  } = props;
 
   if (gap !== undefined) {
     if (Array.isArray(gap)) {
@@ -18,20 +20,20 @@ export var Grid = function Grid(props) {
     }
   }
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  return withNativeProps(props, React.createElement("div", {
     className: classPrefix,
     style: style
   }, props.children));
 };
-export var GridItem = function GridItem(p) {
-  var props = mergeProps({
+export const GridItem = p => {
+  const props = mergeProps({
     span: 1
   }, p);
-  var itemStyle = {
+  const itemStyle = {
     '--item-span': props.span
   };
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-item",
+  return withNativeProps(props, React.createElement("div", {
+    className: `${classPrefix}-item`,
     style: itemStyle,
     onClick: props.onClick
   }, props.children));

package/2x/es/components/image/image.css

@@ -3,7 +3,7 @@
   --height: var(--adm-image-height, auto);
   width: var(--width);
   height: var(--height);
-  display: inline-block;
+  display: block;
   overflow: hidden;
 }
 

package/2x/es/components/image/image.d.ts

@@ -11,5 +11,6 @@ export declare type ImageProps = {
     lazy?: boolean;
     onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 } & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
 export declare const Image: React.FC<ImageProps>;

package/2x/es/components/image/image.js

@@ -6,57 +6,49 @@ import { staged } from 'staged-components';
 import { toCSSLength } from '../../utils/to-css-length';
 import { LazyDetector } from './lazy-detector';
 import { useUpdateLayoutEffect } from 'ahooks';
-var classPrefix = "adm-image";
-var defaultProps = {
+const classPrefix = `adm-image`;
+const defaultProps = {
   fit: 'fill',
-  placeholder: /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-tip"
-  }, /*#__PURE__*/React.createElement(PictureOutline, null)),
-  fallback: /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-tip"
-  }, /*#__PURE__*/React.createElement(PictureWrongOutline, null)),
+  placeholder: React.createElement("div", {
+    className: `${classPrefix}-tip`
+  }, React.createElement(PictureOutline, null)),
+  fallback: React.createElement("div", {
+    className: `${classPrefix}-tip`
+  }, React.createElement(PictureWrongOutline, null)),
   lazy: false
 };
-export var Image = staged(function (p) {
-  var props = mergeProps(defaultProps, p);
-
-  var _useState = useState(false),
-      loaded = _useState[0],
-      setLoaded = _useState[1];
-
-  var _useState2 = useState(false),
-      failed = _useState2[0],
-      setFailed = _useState2[1];
-
-  var ref = useRef(null);
-  var src = props.src;
-  var srcSet = props.srcSet;
-
-  var _useState3 = useState(!props.lazy),
-      initialized = _useState3[0],
-      setInitialized = _useState3[1];
-
+export const Image = staged(p => {
+  const props = mergeProps(defaultProps, p);
+  const [loaded, setLoaded] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const ref = useRef(null);
+  let src = props.src;
+  let srcSet = props.srcSet;
+  const [initialized, setInitialized] = useState(!props.lazy);
   src = initialized ? props.src : undefined;
   srcSet = initialized ? props.srcSet : undefined;
-  useUpdateLayoutEffect(function () {
+  useUpdateLayoutEffect(() => {
     setLoaded(false);
     setFailed(false);
   }, [src]);
 
   function renderInner() {
     if (failed) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, props.fallback);
+      return React.createElement(React.Fragment, null, props.fallback);
     }
 
-    var img = /*#__PURE__*/React.createElement("img", {
-      className: classPrefix + "-img",
+    const img = React.createElement("img", {
+      className: `${classPrefix}-img`,
       src: src,
       alt: props.alt,
       onClick: props.onClick,
-      onLoad: function onLoad() {
+      onLoad: e => {
+        var _a;
+
         setLoaded(true);
+        (_a = props.onLoad) === null || _a === void 0 ? void 0 : _a.call(props, e);
       },
-      onError: function onError(e) {
+      onError: e => {
         var _a;
 
         setFailed(true);
@@ -74,10 +66,10 @@ export var Image = staged(function (p) {
       srcSet: srcSet,
       useMap: props.useMap
     });
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !loaded && props.placeholder, img);
+    return React.createElement(React.Fragment, null, !loaded && props.placeholder, img);
   }
 
-  var style = {};
+  const style = {};
 
   if (props.width) {
     style['--width'] = toCSSLength(props.width);
@@ -87,12 +79,12 @@ export var Image = staged(function (p) {
     style['--height'] = toCSSLength(props.height);
   }
 
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  return withNativeProps(props, React.createElement("div", {
     ref: ref,
     className: classPrefix,
     style: style
-  }, props.lazy && !initialized && /*#__PURE__*/React.createElement(LazyDetector, {
-    onActive: function onActive() {
+  }, props.lazy && !initialized && React.createElement(LazyDetector, {
+    onActive: () => {
       setInitialized(true);
     }
   }), renderInner()));

package/2x/es/components/image/lazy-detector.js

@@ -1,14 +1,14 @@
 import React, { useEffect, useRef } from 'react';
 import { useInViewport } from 'ahooks';
-export var LazyDetector = function LazyDetector(props) {
-  var ref = useRef(null);
-  var inViewport = useInViewport(ref);
-  useEffect(function () {
+export const LazyDetector = props => {
+  const ref = useRef(null);
+  const [inViewport] = useInViewport(ref);
+  useEffect(() => {
     if (inViewport) {
       props.onActive();
     }
   }, [inViewport]);
-  return /*#__PURE__*/React.createElement("div", {
+  return React.createElement("div", {
     ref: ref
   });
 };

package/2x/es/components/image-uploader/image-uploader.css

@@ -54,7 +54,8 @@
   align-items: center;
   justify-content: center;
   height: 100%;
-  font-size: 32px;
+  box-sizing: border-box;
+  padding-top: 16px;
 }
 
 .adm-image-uploader-cell-mask-message {

package/2x/es/components/image-uploader/image-uploader.d.ts

@@ -19,9 +19,10 @@ export declare type ImageUploaderProps = {
     showUpload?: boolean;
     deletable?: boolean;
     capture?: InputHTMLAttributes<unknown>['capture'];
-    onPreview?: (index: number) => void;
+    onPreview?: (index: number, item: ImageUploadItem) => void;
     beforeUpload?: (file: File[]) => Promise<File[]> | File[];
     upload: (file: File) => Promise<ImageUploadItem>;
     onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;
+    preview?: boolean;
 } & NativeProps<'--cell-size'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;