antd-mobile 5.4.0 → 5.6.0

package/2x/cjs/components/action-sheet/action-sheet.d.ts

@@ -10,7 +10,7 @@ export declare type Action = {
     onClick?: () => void;
 };
 export declare type ActionSheetProps = {
-    visible: boolean;
+    visible?: boolean;
     actions: Action[];
     extra?: React.ReactNode;
     cancelText?: React.ReactNode;
@@ -22,11 +22,11 @@ export declare type ActionSheetProps = {
     closeOnMaskClick?: boolean;
     getContainer?: GetContainer;
     safeArea?: boolean;
+    popupClassName?: string;
+    popupStyle?: React.CSSProperties;
 } & NativeProps;
 export declare const ActionSheet: FC<ActionSheetProps>;
-export declare type ActionSheetRef = {
-    close: () => void;
-};
-export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible'>): {
+export declare type ActionSheetShowHandler = {
     close: () => void;
 };
+export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible'>): ActionSheetShowHandler;

package/2x/cjs/components/action-sheet/action-sheet.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ActionSheet = void 0;
 exports.showActionSheet = showActionSheet;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _nativeProps = require("../../utils/native-props");
 
@@ -18,15 +18,11 @@ var _popup = _interopRequireDefault(require("../popup"));
 
 var _button = _interopRequireDefault(require("../button"));
 
-var _renderToBody = require("../../utils/render-to-body");
-
 var _safeArea = _interopRequireDefault(require("../safe-area"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _renderImperatively = require("../../utils/render-imperatively");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const classPrefix = `adm-action-sheet`;
 const defaultProps = {
@@ -52,7 +48,8 @@ const ActionSheet = p => {
       }
     },
     afterClose: props.afterClose,
-    className: `${classPrefix}-popup`,
+    className: (0, _classnames.default)(`${classPrefix}-popup`, props.popupClassName),
+    style: props.popupStyle,
     getContainer: props.getContainer
   }, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
@@ -109,42 +106,5 @@ const ActionSheet = p => {
 exports.ActionSheet = ActionSheet;
 
 function showActionSheet(props) {
-  const Wrapper = (0, _react.forwardRef)((_, ref) => {
-    const [visible, setVisible] = (0, _react.useState)(false);
-    (0, _react.useEffect)(() => {
-      setVisible(true);
-    }, []);
-
-    function handleClose() {
-      var _a;
-
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      setVisible(false);
-    }
-
-    (0, _react.useImperativeHandle)(ref, () => ({
-      close: handleClose
-    }));
-    return _react.default.createElement(ActionSheet, Object.assign({}, props, {
-      visible: visible,
-      onClose: handleClose,
-      afterClose: () => {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
-    }));
-  });
-  const ref = (0, _react.createRef)();
-  const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, {
-    ref: ref
-  }));
-  return {
-    close: () => {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  };
+  return (0, _renderImperatively.renderImperatively)(_react.default.createElement(ActionSheet, Object.assign({}, props)));
 }

package/2x/cjs/components/action-sheet/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import './action-sheet.less';
 import { showActionSheet } from './action-sheet';
-export type { Action, ActionSheetProps, ActionSheetRef } from './action-sheet';
+export type { Action, ActionSheetProps, ActionSheetShowHandler, } from './action-sheet';
 declare const _default: import("react").FC<import("./action-sheet").ActionSheetProps> & {
     show: typeof showActionSheet;
 };

package/2x/cjs/components/badge/badge.js

@@ -25,7 +25,7 @@ const Badge = props => {
   } = props;
   const isDot = content === dot;
   const badgeCls = (0, _classnames.default)(classPrefix, !!children && `${classPrefix}-fixed`, isDot && `${classPrefix}-dot`, props.bordered && `${classPrefix}-bordered`);
-  const element = content ? (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+  const element = content || content === 0 ? (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: badgeCls,
     style: {
       '--color': color

package/2x/cjs/components/cascader-view/cascader-view.d.ts

@@ -9,6 +9,7 @@ export declare type CascaderOption = {
 };
 export declare type CascaderValueExtend = {
     items: (CascaderOption | null)[];
+    isLeaf: boolean;
 };
 export declare type CascaderViewProps = {
     options: CascaderOption[];

package/2x/cjs/components/cascader-view/cascader-view.js

@@ -86,6 +86,13 @@ const CascaderView = p => {
   (0, _react.useEffect)(() => {
     setTabActiveKey(levels.length - 1);
   }, [value]);
+  (0, _react.useEffect)(() => {
+    const max = levels.length - 1;
+
+    if (tabActiveKey > max) {
+      setTabActiveKey(max);
+    }
+  }, [tabActiveKey, levels]);
 
   const onItemSelect = (selectValue, depth) => {
     const next = value.slice(0, depth);

package/2x/cjs/components/cascader-view/use-cascader-value-extend.js

@@ -32,11 +32,34 @@ function useCascaderValueExtend(options) {
       return ret;
     }, val => JSON.stringify(val));
   }, [options]);
+  const generateIsLeaf = (0, _react.useMemo)(() => {
+    return (0, _memoize.default)(val => {
+      var _a;
+
+      let isLeaf = false;
+
+      for (const v of val) {
+        const target = options.find(option => option.value === v);
+
+        if (!target) {
+          break;
+        }
+
+        isLeaf = ((_a = target.children) === null || _a === void 0 ? void 0 : _a.length) === val.length;
+      }
+
+      return isLeaf;
+    }, val => JSON.stringify(val));
+  }, [options]);
 
   function generateValueExtend(val) {
     return {
       get items() {
         return generateItems(val);
+      },
+
+      get isLeaf() {
+        return generateIsLeaf(val);
       }
 
     };

package/2x/cjs/components/check-list/check-list-item.js

@@ -42,7 +42,7 @@ const CheckListItem = props => {
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_list.default.Item, {
     title: props.title,
-    className: (0, _classnames.default)(classPrefix, readOnly && `${classPrefix}-readonly`),
+    className: (0, _classnames.default)(classPrefix, readOnly && `${classPrefix}-readonly`, active && `${classPrefix}-active`),
     description: props.description,
     prefix: props.prefix,
     onClick: e => {

package/2x/cjs/components/checkbox/checkbox.js

@@ -25,6 +25,8 @@ var _indeterminateIcon = require("./indeterminate-icon");
 
 var _isDev = require("../../utils/is-dev");
 
+var _nativeInput = require("./native-input");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -97,16 +99,10 @@ const Checkbox = p => {
       [`${classPrefix}-disabled`]: disabled,
       [`${classPrefix}-block`]: props.block
     })
-  }, _react.default.createElement("input", {
+  }, _react.default.createElement(_nativeInput.NativeInput, {
     type: 'checkbox',
     checked: checked,
-    onChange: e => {
-      setChecked(e.target.checked);
-    },
-    onClick: e => {
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-    },
+    onChange: setChecked,
     disabled: disabled,
     id: props.id
   }), renderIcon(), props.children && _react.default.createElement("div", {

package/2x/cjs/components/checkbox/native-input.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+interface Props {
+    type: 'checkbox' | 'radio';
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    id?: string;
+}
+export declare const NativeInput: FC<Props>;
+export {};

package/2x/cjs/components/checkbox/native-input.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NativeInput = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const NativeInput = props => {
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (props.disabled) return;
+    if (!inputRef.current) return;
+    const input = inputRef.current;
+
+    function handleClick(e) {
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      props.onChange(input.checked);
+    }
+
+    input.addEventListener('click', handleClick);
+    return () => {
+      input.removeEventListener('click', handleClick);
+    };
+  }, [props.disabled, props.onChange]);
+  return _react.default.createElement("input", {
+    ref: inputRef,
+    type: 'checkbox',
+    checked: props.checked,
+    onChange: () => {},
+    disabled: props.disabled,
+    id: props.id
+  });
+};
+
+exports.NativeInput = NativeInput;

package/2x/cjs/components/dialog/index.d.ts

@@ -6,7 +6,7 @@ import { confirm } from './confirm';
 import { clear } from './clear';
 export type { DialogProps } from './dialog';
 export type { Action } from './dialog-action-button';
-export type { DialogShowProps, DialogShowRef } from './show';
+export type { DialogShowProps, DialogShowHandler } from './show';
 export type { DialogAlertProps } from './alert';
 export type { DialogConfirmProps } from './confirm';
 declare const _default: import("react").FC<import("./dialog").DialogProps> & {

package/2x/cjs/components/dialog/show.d.ts

@@ -1,9 +1,7 @@
 import { DialogProps } from './dialog';
 export declare type DialogShowProps = Omit<DialogProps, 'visible'>;
-export declare type DialogShowRef = {
+export declare type DialogShowHandler = {
     close: () => void;
 };
 export declare const closeFnSet: Set<() => void>;
-export declare function show(props: DialogShowProps): {
-    close: () => void;
-};
+export declare function show(props: DialogShowProps): DialogShowHandler;

package/2x/cjs/components/dialog/show.js

@@ -6,64 +6,26 @@ Object.defineProperty(exports, "__esModule", {
 exports.closeFnSet = void 0;
 exports.show = show;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _renderToBody = require("../../utils/render-to-body");
+var _react = _interopRequireDefault(require("react"));
 
 var _dialog = require("./dialog");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _renderImperatively = require("../../utils/render-imperatively");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const closeFnSet = new Set();
 exports.closeFnSet = closeFnSet;
 
 function show(props) {
-  const Wrapper = (0, _react.forwardRef)((_, ref) => {
-    const [visible, setVisible] = (0, _react.useState)(false);
-    (0, _react.useEffect)(() => {
-      setVisible(true);
-    }, []);
-
-    function handleClose() {
-      var _a;
-
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      setVisible(false);
-    }
-
-    (0, _react.useImperativeHandle)(ref, () => ({
-      close: handleClose
-    }));
-
-    function handleAfterClose() {
+  const handler = (0, _renderImperatively.renderImperatively)(_react.default.createElement(_dialog.Dialog, Object.assign({}, props, {
+    afterClose: () => {
       var _a;
 
+      closeFnSet.delete(handler.close);
       (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-      unmount();
-      closeFnSet.delete(close);
     }
-
-    return _react.default.createElement(_dialog.Dialog, Object.assign({}, props, {
-      visible: visible,
-      onClose: handleClose,
-      afterClose: handleAfterClose
-    }));
-  });
-  const ref = (0, _react.createRef)();
-  const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, {
-    ref: ref
-  }));
-
-  const close = () => {
-    var _a;
-
-    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-  };
-
-  closeFnSet.add(close);
-  return {
-    close
-  };
+  })));
+  closeFnSet.add(handler.close);
+  return handler;
 }

package/2x/cjs/components/dot-loading/dot-loading.js

@@ -70,8 +70,7 @@ const DotLoading = (0, _react.memo)(p => {
     begin: `${i * 0.2}s`,
     repeatCount: 'indefinite',
     values: '16; 6; 26; 16; 16',
-    keyTimes: '0; 0.1; 0.3; 0.4; 1',
-    id: 'circ-anim'
+    keyTimes: '0; 0.1; 0.3; 0.4; 1'
   }))))))))));
 });
 exports.DotLoading = DotLoading;

package/2x/cjs/components/error-block/error-block.js

@@ -35,13 +35,15 @@ const ErrorBlock = p => {
   const title = 'title' in props ? props.title : contentPack.title;
 
   let imageNode = _react.default.createElement("img", {
-    src: icon
+    src: icon,
+    alt: 'error block image'
   });
 
   if (props.image) {
     if (typeof props.image === 'string') {
       imageNode = _react.default.createElement("img", {
-        src: props.image
+        src: props.image,
+        alt: 'error block image'
       });
     } else {
       imageNode = props.image;

package/2x/cjs/components/floating-bubble/floating-bubble.css

@@ -7,6 +7,7 @@
   --edge-distance: 0;
   --size: 96px;
   --border-radius: 50%;
+  --background: var(--adm-color-primary);
 }
 
 .adm-floating-bubble-boundary-outer {
@@ -43,7 +44,7 @@
   transition: opacity ease 0.15s;
   user-select: none;
   touch-action: none;
-  background: var(--adm-color-primary);
+  background: var(--background);
   color: var(--adm-color-white);
   border-radius: var(--border-radius);
   z-index: var(--z-index);

package/2x/cjs/components/floating-bubble/floating-bubble.d.ts

@@ -4,5 +4,5 @@ export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     axis?: 'x' | 'y' | 'xy' | 'lock';
     magnetic?: 'x' | 'y';
-} & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius'>;
+} & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius' | '--background'>;
 export declare const FloatingBubble: FC<FloatingBubbleProps>;

package/2x/cjs/components/floating-bubble/floating-bubble.js

@@ -47,15 +47,15 @@ const FloatingBubble = p => {
     let nextX = state.offset[0];
     let nextY = state.offset[1];
 
-    if (state.last) {
+    if (state.last && props.magnetic) {
       const boundary = boundaryRef.current;
       const button = buttonRef.current;
       if (!boundary || !button) return;
+      const boundaryRect = boundary.getBoundingClientRect();
+      const buttonRect = button.getBoundingClientRect();
 
       if (props.magnetic === 'x') {
         const compensation = x.goal - x.get();
-        const boundaryRect = boundary.getBoundingClientRect();
-        const buttonRect = button.getBoundingClientRect();
         const leftDistance = buttonRect.left + compensation - boundaryRect.left;
         const rightDistance = boundaryRect.right - (buttonRect.right + compensation);
 
@@ -64,13 +64,22 @@ const FloatingBubble = p => {
         } else {
           nextX -= leftDistance;
         }
+      } else if (props.magnetic === 'y') {
+        const compensation = y.goal - y.get();
+        const topDistance = buttonRect.top + compensation - boundaryRect.top;
+        const bottomDistance = boundaryRect.bottom - (buttonRect.bottom + compensation);
+
+        if (bottomDistance <= topDistance) {
+          nextY += bottomDistance;
+        } else {
+          nextY -= topDistance;
+        }
       }
     }
 
     api.start({
       x: nextX,
-      y: nextY // immediate: !state.last,
-
+      y: nextY
     }); // active status
 
     api.start({

package/2x/cjs/components/form/form-array.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactElement, ReactNode } from 'react';
+import type { StoreValue } from 'rc-field-form/es/interface';
+export interface FormArrayField {
+    index: number;
+    key: number;
+}
+export interface FormArrayOperation {
+    add: (defaultValue?: StoreValue, insertIndex?: number) => void;
+    remove: (index: number | number[]) => void;
+    move: (from: number, to: number) => void;
+}
+export interface FormArrayProps {
+    name: string | number | (string | number)[];
+    initialValue?: any[];
+    renderHeader?: (field: FormArrayField, operation: FormArrayOperation) => ReactNode;
+    renderAdd?: () => ReactNode;
+    children: (fields: FormArrayField[], operation: FormArrayOperation) => ReactElement[];
+}
+export declare const FormArray: React.FC<FormArrayProps>;

package/2x/cjs/components/form/form-array.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormArray = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _rcFieldForm = require("rc-field-form");
+
+var _list = _interopRequireDefault(require("../list"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const FormArray = props => {
+  return _react.default.createElement(_rcFieldForm.List, {
+    name: props.name,
+    initialValue: props.initialValue
+  }, (rcFields, operation) => {
+    const fields = rcFields.map(field => ({
+      index: field.name,
+      key: field.key
+    }));
+    const children = props.children(fields, operation).map((child, index) => {
+      var _a;
+
+      return _react.default.createElement(_list.default, {
+        key: fields[index].key,
+        mode: 'card',
+        header: (_a = props.renderHeader) === null || _a === void 0 ? void 0 : _a.call(props, fields[index], operation)
+      }, child);
+    });
+
+    if (props.renderAdd) {
+      children.push(_react.default.createElement(_list.default, {
+        key: 'add',
+        mode: 'card'
+      }, _react.default.createElement(_list.default.Item, {
+        className: 'adm-form-list-operation',
+        onClick: () => {
+          operation.add();
+        },
+        arrow: false
+      }, props.renderAdd())));
+    }
+
+    return _react.default.createElement(_react.default.Fragment, null, children);
+  });
+};
+
+exports.FormArray = FormArray;

package/2x/cjs/components/form/form-item.css

@@ -50,11 +50,16 @@
   flex: none;
 }
 
-.adm-form-item-footer {
+.adm-form-item-feedback-error {
   color: var(--adm-color-danger);
   margin-top: 8px;
 }
 
+.adm-form-item-feedback-warning {
+  color: var(--adm-color-warning);
+  margin-top: 8px;
+}
+
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }

package/2x/cjs/components/form/form-item.js

@@ -54,9 +54,7 @@ const FormItemLayout = props => {
     children,
     htmlFor,
     hidden,
-    errors,
     arrow,
-    description,
     childElementPosition = 'normal'
   } = props;
   const context = (0, _react.useContext)(_context.FormContext);
@@ -65,7 +63,6 @@ const FormItemLayout = props => {
   } = (0, _configProvider.useConfig)();
   const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
   const layout = props.layout || context.layout;
-  const feedback = hasFeedback && errors && errors.length > 0 ? errors[0] : null;
 
   const requiredMark = (() => {
     const {
@@ -103,15 +100,21 @@ const FormItemLayout = props => {
     mode: 'dark',
     trigger: 'click'
   }, _react.default.createElement(_antdMobileIcons.QuestionCircleOutline, null)))) : null;
-  const descriptionElement = feedback || description ? _react.default.createElement(_react.default.Fragment, null, description, _react.default.createElement("div", {
-    className: `${classPrefix}-footer`
-  }, feedback)) : null;
+
+  const description = _react.default.createElement(_react.default.Fragment, null, props.description, hasFeedback && _react.default.createElement(_react.default.Fragment, null, props.errors.map((error, index) => _react.default.createElement("div", {
+    key: `error-${index}`,
+    className: `${classPrefix}-feedback-error`
+  }, error)), props.warnings.map((warning, index) => _react.default.createElement("div", {
+    key: `warning-${index}`,
+    className: `${classPrefix}-feedback-warning`
+  }, warning))));
+
   return _react.default.createElement(_list.default.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
     extra: extra,
-    description: descriptionElement,
+    description: description,
     className: (0, _classnames.default)(classPrefix, className, `${classPrefix}-${layout}`, {
       [`${classPrefix}-hidden`]: hidden
     }),
@@ -182,7 +185,7 @@ const FormItem = props => {
   }, [setSubMetas]);
 
   function renderLayout(baseChildren, fieldId, meta, isRequired) {
-    var _a;
+    var _a, _b;
 
     if (noStyle && !hidden) {
       return baseChildren;
@@ -200,6 +203,18 @@ const FormItem = props => {
 
       return subErrors;
     }, curErrors);
+    const curWarnings = (_b = meta === null || meta === void 0 ? void 0 : meta.warnings) !== null && _b !== void 0 ? _b : [];
+    const warnings = Object.keys(subMetas).reduce((subWarnings, key) => {
+      var _a, _b;
+
+      const warnings = (_b = (_a = subMetas[key]) === null || _a === void 0 ? void 0 : _a.warnings) !== null && _b !== void 0 ? _b : [];
+
+      if (warnings.length) {
+        subWarnings = [...subWarnings, ...warnings];
+      }
+
+      return subWarnings;
+    }, curWarnings);
     return _react.default.createElement(FormItemLayout, {
       className: className,
       style: style,
@@ -212,6 +227,7 @@ const FormItem = props => {
       hasFeedback: hasFeedback,
       htmlFor: fieldId,
       errors: errors,
+      warnings: warnings,
       onClick: onClick,
       hidden: hidden,
       layout: layout,

package/2x/cjs/components/form/form.css

@@ -17,4 +17,9 @@
 
 .adm-form .adm-form-footer {
   padding: 40px 24px;
+}
+
+.adm-form-list-operation {
+  text-align: center;
+  color: #1677ff;
 }