antd-mobile 5.19.0 → 5.22.0

package/2x/cjs/components/result-page/result-page.css

@@ -0,0 +1,130 @@
+.adm-result-page {
+  --background-color: var(--adm-color-primary);
+  position: relative;
+  background-color: var(--adm-color-box);
+  min-height: 100vh;
+  width: 100%;
+}
+
+.adm-result-page-header {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  background-color: transparent;
+  position: relative;
+  padding: 40px;
+  padding-bottom: 200px;
+  z-index: 1;
+  overflow: hidden;
+}
+
+.adm-result-page-icon {
+  color: var(--adm-color-background);
+  box-sizing: border-box;
+  padding: 4px;
+  margin-bottom: 16px;
+}
+
+.adm-result-page-icon .antd-mobile-icon {
+  font-size: 64px;
+}
+
+.adm-result-page-title {
+  font-size: var(--adm-font-size-10);
+  color: var(--adm-color-background);
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-page-description {
+  margin-top: 16px;
+  margin-bottom: 48px;
+  font-size: var(--adm-font-size-6);
+  color: rgba(255, 255, 255, 0.6);
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-page-details {
+  width: 100%;
+}
+
+.adm-result-page-detail {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-bottom: 10px;
+  color: var(--adm-color-background);
+  font-size: var(--adm-font-size-6);
+}
+
+.adm-result-page-detail-bold {
+  font-weight: 600;
+}
+
+.adm-result-page-collapse {
+  opacity: 0.6;
+  width: 20px;
+  height: 20px;
+  margin: auto;
+  margin-bottom: 10px;
+  border-top: 4px solid var(--adm-color-background);
+  border-right: 4px solid var(--adm-color-background);
+  transform: rotate(135deg);
+}
+
+.adm-result-page-collapse-active {
+  transform: rotate(-45deg);
+}
+
+.adm-result-page-bgWrapper {
+  position: relative;
+  align-self: flex-start;
+  top: 108px;
+}
+
+.adm-result-page-bg {
+  --width: 440vw;
+  position: absolute;
+  height: var(--width);
+  width: var(--width);
+  left: calc((var(--width) - 100vw) * -1 / 2 - 40px);
+  top: calc(var(--width) * -1 + 1vw);
+  border-radius: 50%;
+  background-color: var(--background-color);
+  z-index: -1;
+}
+
+.adm-result-page-content {
+  position: relative;
+  padding: 24px;
+  top: -208px;
+  z-index: 2;
+}
+
+.adm-result-page-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 24px;
+  padding-bottom: 48px;
+  display: flex;
+  justify-content: center;
+  background-color: var(--adm-color-box);
+  z-index: 3;
+}
+
+.adm-result-page-footer-btn {
+  flex: 1;
+  max-width: calc((100vw - 72px) / 2);
+}
+
+.adm-result-page-footer-space {
+  width: 24px;
+}
+
+.adm-result-page-card {
+  border-radius: 16px;
+  background-color: var(--adm-color-background);
+}

package/2x/cjs/components/result-page/result-page.d.ts

@@ -0,0 +1,23 @@
+import React, { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+interface ResultPageDetail {
+    label: ReactNode;
+    value: ReactNode;
+    bold?: boolean;
+}
+declare type ResultPageDetails = ResultPageDetail[];
+declare type OnClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
+export declare type ResultPageProps = {
+    status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    details?: ResultPageDetails;
+    children?: ReactNode;
+    primaryButtonText?: ReactNode;
+    secondaryButtonText?: ReactNode;
+    onPrimaryButtonClick?: OnClick;
+    onSecondaryButtonClick?: OnClick;
+} & NativeProps<'--background-color'>;
+export declare const ResultPage: FC<ResultPageProps>;
+export {};

package/2x/cjs/components/result-page/result-page.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResultPage = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antdMobileIcons = require("antd-mobile-icons");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _isNodeWithContent = require("../../utils/is-node-with-content");
+
+var _button = _interopRequireDefault(require("../button"));
+
+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); }
+
+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 classPrefix = `adm-result-page`;
+const iconRecord = {
+  success: _antdMobileIcons.CheckCircleFill,
+  error: _antdMobileIcons.CloseCircleFill,
+  info: _antdMobileIcons.InformationCircleFill,
+  waiting: _antdMobileIcons.ClockCircleFill,
+  warning: _antdMobileIcons.ExclamationCircleFill
+};
+const defaultProps = {
+  status: 'info',
+  details: []
+};
+
+const ResultPage = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const {
+    status,
+    title,
+    description,
+    details,
+    icon,
+    primaryButtonText,
+    secondaryButtonText,
+    onPrimaryButtonClick,
+    onSecondaryButtonClick
+  } = props;
+
+  const resultIcon = icon || _react.default.createElement(iconRecord[status]);
+
+  const [collapse, setCollapse] = (0, _react.useState)(true);
+  const showSecondaryButton = (0, _isNodeWithContent.isNodeWithContent)(secondaryButtonText);
+  const showPrimaryButton = (0, _isNodeWithContent.isNodeWithContent)(primaryButtonText);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-header`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), _react.default.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), (0, _isNodeWithContent.isNodeWithContent)(description) ? _react.default.createElement("div", {
+    className: `${classPrefix}-description`
+  }, description) : null, details.length ? _react.default.createElement("div", {
+    className: `${classPrefix}-details`
+  }, (collapse ? details.slice(0, 3) : details).map((detail, index) => {
+    return _react.default.createElement("div", {
+      className: (0, _classnames.default)(`${classPrefix}-detail`, detail.bold && `${classPrefix}-detail-bold`),
+      key: index
+    }, _react.default.createElement("span", null, detail.label), _react.default.createElement("span", null, detail.value));
+  }), details.length > 3 && _react.default.createElement("div", {
+    onClick: () => setCollapse(prev => !prev)
+  }, _react.default.createElement("div", {
+    className: (0, _classnames.default)(`${classPrefix}-collapse`, !collapse && `${classPrefix}-collapse-active`)
+  }))) : null, _react.default.createElement("div", {
+    className: `${classPrefix}-bgWrapper`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-bg`
+  }))), _react.default.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.children), _react.default.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, showSecondaryButton && _react.default.createElement(_button.default, {
+    block: true,
+    color: 'default',
+    fill: 'solid',
+    size: 'large',
+    onClick: onSecondaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, secondaryButtonText), showPrimaryButton && showSecondaryButton && _react.default.createElement("div", {
+    className: `${classPrefix}-footer-space`
+  }), showPrimaryButton && _react.default.createElement(_button.default, {
+    block: true,
+    color: 'primary',
+    fill: 'solid',
+    size: 'large',
+    onClick: onPrimaryButtonClick,
+    className: `${classPrefix}-footer-btn`
+  }, primaryButtonText))));
+};
+
+exports.ResultPage = ResultPage;

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

@@ -7,6 +7,10 @@
   --checked-border: none;
   --border-radius: 4px;
   --padding: 16px 32px;
+  --gap: 16px;
+  ---gap: var(--gap);
+  ---gap-horizontal: var(--gap-horizontal, var(--gap));
+  ---gap-vertical: var(--gap-vertical, var(--gap));
   overflow: hidden;
   font-size: var(--adm-font-size-7);
   line-height: 1.4;
@@ -16,6 +20,12 @@
   --gap: 24px;
 }
 
+.adm-selector .adm-grid {
+  --gap: var(---gap);
+  --gap-horizontal: var(---gap-horizontal);
+  --gap-vertical: var(---gap-vertical);
+}
+
 .adm-selector-item {
   padding: var(--padding);
   position: relative;

package/2x/cjs/components/selector/selector.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { GridProps } from '../grid';
 declare type SelectorValue = string | number;
 export interface SelectorOption<V> {
     label: ReactNode;
@@ -9,7 +10,7 @@ export interface SelectorOption<V> {
 }
 export declare type SelectorProps<V> = {
     options: SelectorOption<V>[];
-    columns?: number;
+    columns?: GridProps['columns'];
     multiple?: boolean;
     disabled?: boolean;
     defaultValue?: V[];
@@ -18,6 +19,6 @@ export declare type SelectorProps<V> = {
         items: SelectorOption<V>[];
     }) => void;
     showCheckMark?: boolean;
-} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

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

@@ -17,8 +17,6 @@ var _space = _interopRequireDefault(require("../space"));
 
 var _grid = _interopRequireDefault(require("../grid"));
 
-var _convertPx = require("../../utils/convert-px");
-
 var _usePropsValue = require("../../utils/use-props-value");
 
 var _checkMark = require("./check-mark");
@@ -84,8 +82,7 @@ const Selector = p => {
   }, !props.columns && _react.default.createElement(_space.default, {
     wrap: true
   }, items), props.columns && _react.default.createElement(_grid.default, {
-    columns: props.columns,
-    gap: (0, _convertPx.convertPx)(8)
+    columns: props.columns
   }, items)));
 };
 

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

@@ -20,6 +20,7 @@ export declare type SwipeActionProps = {
     closeOnAction?: boolean;
     children: ReactNode;
     stopPropagation?: PropagationEvent[];
+    onActionsReveal?: (side: 'left' | 'right') => void;
 } & NativeProps<'--background'>;
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
@@ -29,6 +30,7 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     closeOnAction?: boolean | undefined;
     children: ReactNode;
     stopPropagation?: "click"[] | undefined;
+    onActionsReveal?: ((side: 'left' | 'right') => void) | undefined;
 } & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--background", string>>) | undefined;

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

@@ -65,8 +65,26 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
     }
   }), []);
   const draggingRef = (0, _react.useRef)(false);
+  const dragCancelRef = (0, _react.useRef)(null);
+
+  function forceCancelDrag() {
+    var _a;
+
+    (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+    draggingRef.current = false;
+  }
+
   const bind = (0, _react2.useDrag)(state => {
-    draggingRef.current = true;
+    var _a;
+
+    dragCancelRef.current = state.cancel;
+    if (!state.intentional) return;
+
+    if (state.down) {
+      draggingRef.current = true;
+    }
+
+    if (!draggingRef.current) return;
     const [offsetX] = state.offset;
 
     if (state.last) {
@@ -82,9 +100,15 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
         position = 0;
       }
 
+      const targetX = (0, _nearest.nearest)([-rightWidth, 0, leftWidth], position);
       api.start({
-        x: (0, _nearest.nearest)([-rightWidth, 0, leftWidth], position)
+        x: targetX
       });
+
+      if (targetX !== 0) {
+        (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, targetX > 0 ? 'left' : 'right');
+      }
+
       window.setTimeout(() => {
         draggingRef.current = false;
       });
@@ -109,17 +133,21 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
     preventScroll: true,
     pointer: {
       touch: true
-    }
+    },
+    triggerAllEvents: true
   });
 
   function close() {
     api.start({
       x: 0
     });
+    forceCancelDrag();
   }
 
   (0, _react.useImperativeHandle)(ref, () => ({
     show: (side = 'right') => {
+      var _a;
+
       if (side === 'right') {
         api.start({
           x: -getRightWidth()
@@ -129,6 +157,8 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
           x: getLeftWidth()
         });
       }
+
+      (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, side);
     },
     close
   }));
@@ -200,9 +230,7 @@ const SwipeAction = (0, _react.forwardRef)((p, ref) => {
       if (x.goal !== 0) {
         e.preventDefault();
         e.stopPropagation();
-        api.start({
-          x: 0
-        });
+        close();
       }
     }
   }, _react.default.createElement(_web.animated.div, {

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

@@ -141,7 +141,18 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         });
       }
     }), [count]);
+    const dragCancelRef = (0, _react.useRef)(null);
+
+    function forceCancelDrag() {
+      var _a;
+
+      (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+      draggingRef.current = false;
+    }
+
     const bind = (0, _react2.useDrag)(state => {
+      dragCancelRef.current = state.cancel;
+      if (!state.intentional) return;
       const slidePixels = getSlidePixels();
       if (!slidePixels) return;
       const paramIndex = isVertical ? 1 : 0;
@@ -170,6 +181,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         const slidePixels = getSlidePixels();
         return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
       },
+      triggerAllEvents: true,
       bounds: () => {
         if (loop) return {};
         const slidePixels = getSlidePixels();
@@ -233,7 +245,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
       return () => {
         window.clearInterval(interval);
       };
-    }, [autoplay, autoplayInterval, dragging]);
+    }, [autoplay, autoplayInterval, dragging, count]);
 
     function renderTrackInner() {
       if (loop) {
@@ -284,6 +296,8 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
         if (draggingRef.current) {
           e.stopPropagation();
         }
+
+        forceCancelDrag();
       }
     }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? _react.default.createElement("div", {
       className: `${classPrefix}-indicator`

package/2x/cjs/components/tab-bar/tab-bar.css

@@ -9,7 +9,7 @@
 
 .adm-tab-bar-item {
   flex: 1;
-  color: var(--adm-color-weak);
+  color: var(--adm-color-text-secondary);
   white-space: nowrap;
   padding: 8px 16px;
   width: -webkit-min-content;
@@ -29,7 +29,7 @@
 }
 
 .adm-tab-bar-item-title {
-  font-size: var(--adm-font-size-3);
+  font-size: var(--adm-font-size-2);
   line-height: 30px;
 }
 

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

@@ -56,6 +56,7 @@ export { default as PullToRefresh } from './components/pull-to-refresh';
 export { default as Radio } from './components/radio';
 export { default as Rate } from './components/rate';
 export { default as Result } from './components/result';
+export { default as ResultPage } from './components/result-page';
 export { default as SafeArea } from './components/safe-area';
 export { default as ScrollMask } from './components/scroll-mask';
 export { default as SearchBar } from './components/search-bar';

package/2x/cjs/index.js

@@ -339,6 +339,12 @@ Object.defineProperty(exports, "Result", {
     return _result.default;
   }
 });
+Object.defineProperty(exports, "ResultPage", {
+  enumerable: true,
+  get: function () {
+    return _resultPage.default;
+  }
+});
 Object.defineProperty(exports, "SafeArea", {
   enumerable: true,
   get: function () {
@@ -610,6 +616,8 @@ var _rate = _interopRequireDefault(require("./components/rate"));
 
 var _result = _interopRequireDefault(require("./components/result"));
 
+var _resultPage = _interopRequireDefault(require("./components/result-page"));
+
 var _safeArea = _interopRequireDefault(require("./components/safe-area"));
 
 var _scrollMask = _interopRequireDefault(require("./components/scroll-mask"));

package/2x/cjs/locales/id-ID.js

@@ -115,6 +115,19 @@ const idID = (0, _mergeLocale.mergeLocale)(_base.base, {
     pulling: 'Tarik ke bawah untuk menyegarkan',
     canRelease: 'Lepaskan untuk menyegarkan segera',
     complete: 'Segarkan berhasil'
+  },
+  SearchBar: {
+    name: 'Bilah Pencarian'
+  },
+  Slider: {
+    name: 'Penggeser'
+  },
+  Stepper: {
+    decrease: 'mengurangi',
+    increase: 'meningkat'
+  },
+  Switch: {
+    name: 'Mengalihkan'
   }
 });
 var _default = idID;

package/2x/cjs/utils/use-resize-effect.js

@@ -14,11 +14,13 @@ function useResizeEffect(effect, targetRef) {
     if (!target) return;
 
     if (window.ResizeObserver) {
+      let animationFrame;
       const observer = new ResizeObserver(() => {
-        fn(target);
+        animationFrame = window.requestAnimationFrame(() => fn(target));
       });
       observer.observe(target);
       return () => {
+        window.cancelAnimationFrame(animationFrame);
         observer.disconnect();
       };
     } else {

package/2x/es/components/action-sheet/action-sheet.css

@@ -48,15 +48,19 @@
 }
 
 .adm-action-sheet-button-item-description {
-  font-size: var(--adm-font-size-4);
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-weak);
-  padding-top: 4px;
+  padding-top: 8px;
 }
 
 .adm-action-sheet-button-item-danger .adm-action-sheet-button-item-name {
   color: var(--adm-color-danger);
 }
 
+.adm-action-sheet-button-item-bold .adm-action-sheet-button-item-name {
+  font-weight: bold;
+}
+
 .adm-action-sheet-cancel {
   background-color: var(--adm-color-box);
   padding-top: 16px;

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

@@ -7,6 +7,7 @@ export declare type Action = {
     disabled?: boolean;
     description?: ReactNode;
     danger?: boolean;
+    bold?: boolean;
     onClick?: () => void;
 };
 export declare type ActionSheetProps = {

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

@@ -47,7 +47,8 @@ export const ActionSheet = p => {
   }, React.createElement("a", {
     className: classNames('adm-plain-anchor', `${classPrefix}-button-item`, {
       [`${classPrefix}-button-item-danger`]: action.danger,
-      [`${classPrefix}-button-item-disabled`]: action.disabled
+      [`${classPrefix}-button-item-disabled`]: action.disabled,
+      [`${classPrefix}-button-item-bold`]: action.bold
     }),
     onClick: () => {
       var _a, _b, _c;

package/2x/es/components/check-list/check-list.css

@@ -1,5 +1,5 @@
 .adm-check-list-item-extra {
-  font-size: var(--adm-font-size-8);
+  font-size: var(--adm-font-size-10);
   line-height: 1;
   color: var(--adm-color-primary);
 }

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

@@ -23,6 +23,7 @@ export const Ellipsis = p => {
   function calcEllipsised() {
     const root = rootRef.current;
     if (!root) return;
+    if (!root.offsetParent) return;
     const originStyle = window.getComputedStyle(root);
     const container = document.createElement('div');
     const styleNames = Array.prototype.slice.apply(originStyle);

package/2x/es/components/floating-panel/floating-panel.js

@@ -113,8 +113,8 @@ export const FloatingPanel = forwardRef((p, ref) => {
     ref: elementRef,
     className: 'adm-floating-panel',
     style: {
-      height: maxHeight,
-      translateY: y.to(y => `calc(100% + (${y}px))`)
+      height: Math.round(maxHeight),
+      translateY: y.to(y => `calc(100% + (${Math.round(y)}px))`)
     }
   }, React.createElement("div", {
     className: 'adm-floating-panel-mask',

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

@@ -5,7 +5,7 @@ export declare type FormContextType = {
     name?: string;
     hasFeedback: boolean;
     layout: FormLayout;
-    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
+    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional' | 'none';
     disabled: boolean;
 };
 export declare const defaultFormContext: FormContextType;

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

@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue' | 'getValueFromEvent' | 'getValueProps' | 'normalize' | 'preserve' | 'validateFirst'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;

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

@@ -63,6 +63,9 @@ const FormItemLayout = props => {
           className: `${classPrefix}-required-text`
         }, "(", locale.Form.optional, ")");
 
+      case 'none':
+        return null;
+
       default:
         return null;
     }