antd-mobile 5.2.0 → 5.3.0

package/es/components/capsule-tabs/capsule-tabs.js

@@ -6,6 +6,7 @@ import { usePropsValue } from '../../utils/use-props-value';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { useTabListScroll } from '../../utils/use-tab-list-scroll';
 import ScrollMask from '../scroll-mask';
+import { ShouldRender } from '../../utils/should-render';
 const classPrefix = `adm-capsule-tabs`;
 export const CapsuleTab = () => {
   return null;
@@ -83,22 +84,17 @@ export const CapsuleTabs = props => {
       return null;
     }
 
-    if (pane.key === activeKey) {
-      return React.createElement("div", {
-        key: pane.key,
-        className: `${classPrefix}-content`
-      }, pane.props.children);
-    }
-
-    if (pane.props.forceRender) {
-      return React.createElement("div", {
-        key: pane.key,
-        style: {
-          display: 'none'
-        }
-      }, pane.props.children);
-    }
-
-    return null;
+    const active = pane.key === activeKey;
+    return React.createElement(ShouldRender, {
+      key: pane.key,
+      active: active,
+      forceRender: pane.props.forceRender,
+      destroyOnClose: pane.props.destroyOnClose
+    }, React.createElement("div", {
+      className: `${classPrefix}-content`,
+      style: {
+        display: active ? 'block' : 'none'
+      }
+    }, pane.props.children));
   })));
 };

package/es/components/cascade-picker/prompt.d.ts

@@ -1,2 +1,3 @@
 import { CascadePickerProps } from './cascade-picker';
-export declare function prompt(props: Omit<CascadePickerProps, 'value' | 'visible' | 'children'>): Promise<(string | null)[] | null>;
+import type { PickerValue } from '../picker';
+export declare function prompt(props: Omit<CascadePickerProps, 'value' | 'visible' | 'children'>): Promise<PickerValue[] | null>;

package/es/components/collapse/collapse.js

@@ -5,8 +5,9 @@ import { DownOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
 import { useSpring, animated } from '@react-spring/web';
 import { usePropsValue } from '../../utils/use-props-value';
-import { useMount, useUpdateLayoutEffect } from 'ahooks';
-import { useShouldRender } from '../../utils/use-should-render';
+import { useMount } from 'ahooks';
+import { useShouldRender } from '../../utils/should-render';
+import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
 const classPrefix = `adm-collapse`;
 export const CollapsePanel = () => {
   return null;
@@ -34,7 +35,7 @@ const CollapsePanelContent = props => {
       immediate: true
     });
   });
-  useUpdateLayoutEffect(() => {
+  useIsomorphicUpdateLayoutEffect(() => {
     const inner = innerRef.current;
     if (!inner) return;
 

package/es/components/date-picker/date-picker.js

@@ -5,6 +5,7 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { convertDateToStringArray, convertStringArrayToDate, generateDatePickerColumns, defaultRenderLabel } from './date-picker-utils';
+import { bound } from '../../utils/bound';
 const thisYear = new Date().getFullYear();
 const defaultProps = {
   min: new Date(new Date().setFullYear(thisYear - 10)),
@@ -26,7 +27,11 @@ export const DatePicker = p => {
     }
   });
   const now = useMemo(() => new Date(), []);
-  const pickerValue = useMemo(() => convertDateToStringArray(value !== null && value !== void 0 ? value : now, props.precision), [value, props.precision]);
+  const pickerValue = useMemo(() => {
+    let date = value !== null && value !== void 0 ? value : now;
+    date = new Date(bound(date.getTime(), props.min.getTime(), props.max.getTime()));
+    return convertDateToStringArray(date, props.precision);
+  }, [value, props.precision, props.min, props.max]);
   const onConfirm = useCallback(val => {
     setValue(convertStringArrayToDate(val, props.precision));
   }, [setValue, props.precision]);

package/es/components/dialog/dialog.css

@@ -15,7 +15,7 @@
   max-width: 500px;
   transform: translate(-50%, -50%);
 }
-.adm-dialog-main {
+.adm-dialog-body {
   width: 100%;
   max-height: 70vh;
   font-size: 14px;
@@ -25,29 +25,33 @@
   display: flex;
   flex-direction: column;
 }
-.adm-dialog-main > * {
+.adm-dialog-body > * {
   flex: none;
 }
-.adm-dialog-main > .adm-dialog-image-container {
+.adm-dialog-body > .adm-dialog-content {
   flex: auto;
 }
-.adm-dialog-main > .adm-dialog-image-container + .adm-dialog-body {
-  padding-top: 12px;
+.adm-dialog-body:not(.adm-dialog-with-image) {
+  padding-top: 20px;
 }
-.adm-dialog-main .adm-dialog-body {
-  padding: 20px 12px;
+.adm-dialog-body .adm-dialog-image-container {
+  margin-bottom: 12px;
+  max-height: 40vh;
 }
-.adm-dialog-main .adm-dialog-body-header-wrapper {
-  display: flex;
-  justify-content: center;
+.adm-dialog-body .adm-dialog-header {
+  margin-bottom: 8px;
+  padding: 0 12px;
 }
-.adm-dialog-main .adm-dialog-body-title {
+.adm-dialog-body .adm-dialog-title {
+  margin-bottom: 8px;
+  padding: 0 12px;
   font-weight: bold;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
 }
-.adm-dialog-main .adm-dialog-body-content {
+.adm-dialog-body .adm-dialog-content {
+  padding: 0 12px 20px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -55,28 +59,32 @@
   line-height: 1.4;
   color: #333;
 }
-.adm-dialog-main .adm-dialog-footer {
+.adm-dialog-body .adm-dialog-content-empty {
+  padding: 0;
+  height: 12px;
+}
+.adm-dialog-body .adm-dialog-footer {
   user-select: none;
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
   border-top: 0.5px solid var(--adm-border-color);
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 10px;
   font-size: 18px;
   line-height: 25px;
   border-radius: 0;
   border-right: solid 0.5px var(--adm-border-color);
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
-.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
+.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
 .adm-dialog-image-container {

package/es/components/dialog/dialog.js

@@ -6,13 +6,11 @@ import { useUnmountedRef } from 'ahooks';
 import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
-import Space from '../space';
 import { renderToContainer } from '../../utils/render-to-container';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
 import AutoCenter from '../auto-center';
 import { useSpring, animated } from '@react-spring/web';
 import { withNativeProps } from '../../utils/native-props';
-const classPrefix = `adm-dialog`;
 const defaultProps = {
   visible: false,
   actions: [],
@@ -50,51 +48,27 @@ export const Dialog = p => {
     }
   });
   const [active, setActive] = useState(props.visible);
-  const node = withNativeProps(props, React.createElement("div", {
-    className: classPrefix,
-    style: {
-      display: active ? 'unset' : 'none'
-    }
-  }, React.createElement(Mask, {
-    visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: classNames(`${classPrefix}-mask`, props.maskClassName)
-  }), React.createElement("div", {
-    className: `${classPrefix}-wrap`,
-    style: {
-      pointerEvents: props.visible ? 'unset' : 'none'
-    }
-  }, React.createElement(animated.div, {
-    style: Object.assign({}, style),
-    onClick: e => e.stopPropagation(),
-    className: `${classPrefix}-main`
+  const body = React.createElement("div", {
+    className: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    style: props.bodyStyle
   }, !!props.image && React.createElement("div", {
-    className: `${classPrefix}-image-container`
+    className: cls('image-container')
   }, React.createElement(Image, {
     src: props.image,
     alt: 'dialog header image',
     width: '100%'
-  })), React.createElement("div", {
-    style: props.bodyStyle,
-    className: classNames(`${classPrefix}-body`, props.bodyClassName)
-  }, React.createElement(Space, {
-    direction: 'vertical',
-    block: true
-  }, !!props.header && React.createElement("div", {
-    className: `${classPrefix}-body-header-wrapper`
-  }, React.createElement("div", {
-    className: `${classPrefix}-body-header`
-  }, props.header)), !!props.title && React.createElement("div", {
-    className: `${classPrefix}-body-title`
-  }, props.title), !!props.content && React.createElement("div", {
-    className: `${classPrefix}-body-content`
-  }, typeof props.content === 'string' ? React.createElement(AutoCenter, null, props.content) : props.content))), React.createElement("div", {
-    className: `${classPrefix}-footer`
+  })), !!props.header && React.createElement("div", {
+    className: cls('header')
+  }, React.createElement(AutoCenter, null, props.header)), !!props.title && React.createElement("div", {
+    className: cls('title')
+  }, props.title), React.createElement("div", {
+    className: classNames(cls('content'), !props.content && cls('content-empty'))
+  }, typeof props.content === 'string' ? React.createElement(AutoCenter, null, props.content) : props.content), React.createElement("div", {
+    className: cls('footer')
   }, props.actions.map((row, index) => {
     const actions = Array.isArray(row) ? row : [row];
     return React.createElement("div", {
-      className: `${classPrefix}-action-row`,
+      className: cls('action-row'),
       key: index
     }, actions.map((action, index) => React.createElement(DialogActionButton, {
       key: action.key,
@@ -109,6 +83,28 @@ export const Dialog = p => {
         }
       })
     })));
-  }))))));
+  })));
+  const node = withNativeProps(props, React.createElement("div", {
+    className: cls(),
+    style: {
+      display: active ? 'unset' : 'none'
+    }
+  }, React.createElement(Mask, {
+    visible: props.visible,
+    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
+    style: props.maskStyle,
+    className: classNames(cls('mask'), props.maskClassName)
+  }), React.createElement("div", {
+    className: cls('wrap'),
+    style: {
+      pointerEvents: props.visible ? 'unset' : 'none'
+    }
+  }, React.createElement(animated.div, {
+    style: style
+  }, body))));
   return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
-};
+};
+
+function cls(name = '') {
+  return 'adm-dialog' + (name && '-') + name;
+}

package/es/components/dropdown/dropdown.css

@@ -3,9 +3,10 @@
 }
 .adm-dropdown .adm-dropdown-nav {
   display: flex;
+  border-bottom: 1px solid transparent;
 }
 .adm-dropdown-open .adm-dropdown-nav {
-  border-bottom: 1px solid var(--adm-border-color);
+  border-bottom-color: var(--adm-border-color);
 }
 .adm-dropdown-item {
   display: flex;

package/es/components/dropdown/item.js

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { useShouldRender } from '../../utils/use-should-render';
+import { useShouldRender } from '../../utils/should-render';
 import { DownFill } from 'antd-mobile-icons';
 const classPrefix = `adm-dropdown-item`;
 

package/es/components/ellipsis/ellipsis.d.ts

@@ -1,10 +1,12 @@
 import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type EllipsisProps = {
     content: string;
     direction?: 'start' | 'end' | 'middle';
     rows?: number;
     expandText?: string;
     collapseText?: string;
+    stopPropagationForActionButtons?: PropagationEvent[];
 } & NativeProps;
 export declare const Ellipsis: FC<EllipsisProps>;

package/es/components/ellipsis/ellipsis.js

@@ -3,12 +3,14 @@ import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { useIsomorphicLayoutEffect } from 'ahooks';
+import { withStopPropagation } from '../../utils/with-stop-propagation';
 const classPrefix = `adm-ellipsis`;
 const defaultProps = {
   direction: 'end',
   rows: 1,
   expandText: '',
-  collapseText: ''
+  collapseText: '',
+  stopPropagationForActionButtons: []
 };
 export const Ellipsis = p => {
   const props = mergeProps(defaultProps, p);
@@ -117,16 +119,16 @@ export const Ellipsis = p => {
   useIsomorphicLayoutEffect(() => {
     calcEllipsised();
   }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
-  const expandActionElement = exceeded && props.expandText ? React.createElement("a", {
+  const expandActionElement = exceeded && props.expandText ? withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
     onClick: () => {
       setExpanded(true);
     }
-  }, props.expandText) : null;
-  const collapseActionElement = exceeded && props.expandText ? React.createElement("a", {
+  }, props.expandText)) : null;
+  const collapseActionElement = exceeded && props.expandText ? withStopPropagation(props.stopPropagationForActionButtons, React.createElement("a", {
     onClick: () => {
       setExpanded(false);
     }
-  }, props.collapseText) : null;
+  }, props.collapseText)) : null;
 
   const renderContent = () => {
     if (!exceeded) {

package/es/components/form/context.d.ts

@@ -4,8 +4,9 @@ import type { Meta, InternalNamePath } from 'rc-field-form/lib/interface';
 export declare type FormContextType = {
     hasFeedback: boolean;
     layout: FormLayout;
+    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
 };
-export declare const DEFAULT_FORM_CONTEXT: FormContextType;
+export declare const defaultFormContext: FormContextType;
 export declare const FormContext: React.Context<FormContextType>;
 export declare type OnSubMetaChange = (meta: Meta & {
     destroy?: boolean;

package/es/components/form/context.js

@@ -1,7 +1,8 @@
 import React from 'react';
-export const DEFAULT_FORM_CONTEXT = {
+export const defaultFormContext = {
   hasFeedback: true,
-  layout: 'vertical'
+  layout: 'vertical',
+  requiredMarkStyle: 'asterisk'
 };
-export const FormContext = React.createContext(DEFAULT_FORM_CONTEXT);
+export const FormContext = React.createContext(defaultFormContext);
 export const NoStyleItemContext = React.createContext(null);

package/es/components/form/form-item.css

@@ -9,7 +9,7 @@
   position: relative;
   color: #666666;
 }
-.adm-form-item-label-required {
+.adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
   left: -0.6em;
   top: 0;
@@ -17,8 +17,28 @@
   color: var(--adm-color-danger);
   user-select: none;
 }
+.adm-form-item-label .adm-form-item-required-text {
+  margin-left: 4px;
+  color: var(--adm-color-weak);
+}
 .adm-form-item-label-help {
   margin-left: 4px;
+  cursor: pointer;
+}
+.adm-form-item-child {
+  display: flex;
+}
+.adm-form-item-child-position-normal {
+  justify-content: normal;
+}
+.adm-form-item-child-position-normal > * {
+  flex: auto;
+}
+.adm-form-item-child-position-right {
+  justify-content: right;
+}
+.adm-form-item-child-position-right > * {
+  flex: none;
 }
 .adm-form-item-footer {
   color: var(--adm-color-danger);

package/es/components/form/form-item.d.ts

@@ -16,6 +16,7 @@ export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePr
     disabled?: boolean;
     hidden?: boolean;
     layout?: FormLayout;
+    childElementPosition?: 'normal' | 'right';
     children: ChildrenType;
 } & NativeProps;
 export declare const FormItem: FC<FormItemProps>;

package/es/components/form/form-item.js

@@ -9,6 +9,7 @@ import { toArray } from './utils';
 import List from '../list';
 import Popover from '../popover';
 import { QuestionCircleOutline } from 'antd-mobile-icons';
+import { useConfig } from '../config-provider';
 const NAME_SPLIT = '__SPLIT__';
 const classPrefix = `adm-form-item`;
 const MemoInput = React.memo(({
@@ -29,18 +30,47 @@ const FormItemLayout = props => {
     hidden,
     errors,
     arrow,
-    description
+    description,
+    childElementPosition = 'normal'
   } = props;
   const context = useContext(FormContext);
+  const {
+    locale
+  } = 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 {
+      requiredMarkStyle
+    } = context;
+
+    switch (requiredMarkStyle) {
+      case 'asterisk':
+        return required && React.createElement("span", {
+          className: `${classPrefix}-required-asterisk`
+        }, "*");
+
+      case 'text-required':
+        return required && React.createElement("span", {
+          className: `${classPrefix}-required-text`
+        }, "(", locale.Form.required, ")");
+
+      case 'text-optional':
+        return !required && React.createElement("span", {
+          className: `${classPrefix}-required-text`
+        }, "(", locale.Form.optional, ")");
+
+      default:
+        return null;
+    }
+  })();
+
   const labelElement = label ? React.createElement("label", {
     className: `${classPrefix}-label`,
     htmlFor: htmlFor
-  }, label, required && React.createElement("span", {
-    className: `${classPrefix}-label-required`
-  }, "*"), help && React.createElement("span", {
+  }, label, requiredMark, help && React.createElement("span", {
     className: `${classPrefix}-label-help`
   }, React.createElement(Popover, {
     content: help,
@@ -62,7 +92,11 @@ const FormItemLayout = props => {
     disabled: disabled,
     onClick: props.onClick,
     arrow: arrow
-  }, children);
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-child-inner`)
+  }, children)));
 };
 
 export const FormItem = props => {
@@ -80,6 +114,7 @@ export const FormItem = props => {
     noStyle,
     hidden,
     layout,
+    childElementPosition,
     description,
     // Field 相关
     disabled,
@@ -93,7 +128,7 @@ export const FormItem = props => {
     dependencies,
     arrow
   } = props,
-        fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
+        fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "childElementPosition", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
 
   const {
     validateTrigger: contextValidateTrigger
@@ -151,6 +186,7 @@ export const FormItem = props => {
       onClick: onClick,
       hidden: hidden,
       layout: layout,
+      childElementPosition: childElementPosition,
       arrow: arrow
     }, React.createElement(NoStyleItemContext.Provider, {
       value: onSubMetaChange
@@ -193,13 +229,7 @@ export const FormItem = props => {
     messageVariables: Variables
   }), (control, meta, context) => {
     let childNode = null;
-    const isRequired = required !== undefined ? required : !!(rules && rules.some(rule => {
-      if (rule && typeof rule === 'object' && rule.required) {
-        return true;
-      }
-
-      return false;
-    }));
+    const isRequired = required !== undefined ? required : rules && rules.some(rule => !!(rule && typeof rule === 'object' && rule.required));
     const fieldId = (toArray(name).length && meta ? meta.name : []).join('_');
 
     if (shouldUpdate && dependencies) {

package/es/components/form/form.d.ts

@@ -12,6 +12,6 @@ export declare type FormProps = Pick<RcFormProps, 'form' | 'initialValues' | 'na
 };
 export declare const Form: React.ForwardRefExoticComponent<Pick<RcFormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & NativeProps<"--border-inner" | "--border-top" | "--border-bottom"> & Partial<FormContextType> & {
     footer?: ReactNode;
-    layout?: "horizontal" | "vertical" | undefined;
+    layout?: FormLayout | undefined;
     mode?: ListProps['mode'];
-} & React.RefAttributes<Pick<RCFormInstance<any>, "submit" | "getFieldValue" | "getFieldsValue" | "getFieldError" | "getFieldsError" | "isFieldTouched" | "isFieldsTouched" | "resetFields" | "setFields" | "setFieldsValue" | "validateFields">>>;
+} & React.RefAttributes<FormInstance>>;

package/es/components/form/form.js

@@ -1,16 +1,15 @@
 import { __rest } from "tslib";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
 import List from '../list';
 import RcForm from 'rc-field-form';
-import { FormContext } from './context';
+import { defaultFormContext, FormContext } from './context';
 import { mergeProps } from '../../utils/with-default-props';
 import { Header } from './header';
+import { useConfig } from '../config-provider';
+import merge from 'lodash/merge';
 const classPrefix = 'adm-form';
-const defaultProps = {
-  hasFeedback: true,
-  layout: 'vertical'
-};
+const defaultProps = defaultFormContext;
 export const Form = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
 
@@ -21,10 +20,15 @@ export const Form = forwardRef((p, ref) => {
     children,
     layout,
     footer,
-    mode
+    mode,
+    requiredMarkStyle
   } = props,
-        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
+        formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode", "requiredMarkStyle"]);
 
+  const {
+    locale
+  } = useConfig();
+  const validateMessages = useMemo(() => merge({}, locale.Form.defaultValidateMessages, formProps.validateMessages), [locale.Form.defaultValidateMessages, formProps.validateMessages]);
   const lists = [];
   let currentHeader = null;
   let items = [];
@@ -54,10 +58,13 @@ export const Form = forwardRef((p, ref) => {
     className: classNames(classPrefix, className),
     style: style,
     ref: ref
-  }, formProps), React.createElement(FormContext.Provider, {
+  }, formProps, {
+    validateMessages: validateMessages
+  }), React.createElement(FormContext.Provider, {
     value: {
-      hasFeedback: hasFeedback,
-      layout
+      hasFeedback,
+      layout,
+      requiredMarkStyle
     }
   }, lists), footer && React.createElement("div", {
     className: `${classPrefix}-footer`

package/es/components/form/index.css

@@ -27,7 +27,7 @@
   position: relative;
   color: #666666;
 }
-.adm-form-item-label-required {
+.adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
   left: -0.6em;
   top: 0;
@@ -35,8 +35,28 @@
   color: var(--adm-color-danger);
   user-select: none;
 }
+.adm-form-item-label .adm-form-item-required-text {
+  margin-left: 4px;
+  color: var(--adm-color-weak);
+}
 .adm-form-item-label-help {
   margin-left: 4px;
+  cursor: pointer;
+}
+.adm-form-item-child {
+  display: flex;
+}
+.adm-form-item-child-position-normal {
+  justify-content: normal;
+}
+.adm-form-item-child-position-normal > * {
+  flex: auto;
+}
+.adm-form-item-child-position-right {
+  justify-content: right;
+}
+.adm-form-item-child-position-right > * {
+  flex: none;
 }
 .adm-form-item-footer {
   color: var(--adm-color-danger);