antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

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

@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import { useSpring, animated } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+var classPrefix = "adm-floating-bubble";
+var defaultProps = {};
+export var FloatingBubble = function FloatingBubble(p) {
+  var props = mergeProps(defaultProps, p);
+  var boundaryRef = useRef(null);
+  /**
+   * memoize the `to` function
+   * inside a component that renders frequently
+   * to prevent an unintended restart
+   */
+
+  var _useSpring = useSpring(function () {
+    return {
+      y: 0,
+      scale: 1,
+      opacity: 1
+    };
+  }),
+      animationStyles = _useSpring[0],
+      animation = _useSpring[1];
+
+  var bind = useDrag(function (state) {
+    if (state.down) {
+      // be movable in y axis
+      animation.start({
+        y: state.offset[1]
+      });
+    } // active status
+
+
+    animation.start({
+      scale: state.active ? 1.1 : 1,
+      opacity: state.active ? 0.8 : 1
+    });
+  }, {
+    // only trigger if a movement is detected on the specified axis.
+    axis: 'y',
+    pointer: {
+      touch: true
+    },
+    // the component won't trigger drag logic if the user just clicked on the component.
+    filterTaps: true,
+    // set constraints to the user gesture
+    bounds: boundaryRef
+  });
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-boundary-outer"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-boundary",
+    ref: boundaryRef
+  })), /*#__PURE__*/React.createElement(animated.div, Object.assign({}, bind(), {
+    style: Object.assign({}, animationStyles),
+    onClick: props.onClick,
+    className: classPrefix + "-button"
+  }), props.children)));
+};

package/2x/es/components/floating-bubble/index.d.ts

@@ -0,0 +1,4 @@
+import './floating-bubble.less';
+import { FloatingBubble } from './floating-bubble';
+export type { FloatingBubbleProps } from './floating-bubble';
+export default FloatingBubble;

package/2x/es/components/floating-bubble/index.js

@@ -0,0 +1,3 @@
+import "./floating-bubble.css";
+import { FloatingBubble } from './floating-bubble';
+export default FloatingBubble;

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

@@ -1,11 +1,12 @@
-.adm-drawer {
+.adm-floating-panel {
   --border-radius: 16px;
   --header-height: 56px;
+  --z-index: var(--adm-floating-panel-z-index, 900);
   border-top-left-radius: var(--border-radius);
   border-top-right-radius: var(--border-radius);
   background: var(--adm-color-white);
   position: fixed;
-  z-index: var(--adm-z-index-floating-panel);
+  z-index: var(--z-index);
   top: 100vh;
   left: 0;
   width: 100vw;
@@ -13,7 +14,7 @@
   flex-direction: column;
 }
 
-.adm-drawer-mask {
+.adm-floating-panel-mask {
   display: block;
   width: 100%;
   height: 100vh;
@@ -23,7 +24,7 @@
   background: transparent;
 }
 
-.adm-drawer::after {
+.adm-floating-panel::after {
   content: '';
   display: block;
   position: absolute;
@@ -33,7 +34,7 @@
   background: var(--adm-color-white);
 }
 
-.adm-drawer .adm-drawer-header {
+.adm-floating-panel .adm-floating-panel-header {
   flex: none;
   height: var(--header-height);
   display: flex;
@@ -43,14 +44,14 @@
   user-select: none;
 }
 
-.adm-drawer .adm-drawer-header .adm-drawer-bar {
+.adm-floating-panel .adm-floating-panel-header .adm-floating-panel-bar {
   height: 6px;
   width: 40px;
   border-radius: 20px;
   background: var(--adm-color-light);
 }
 
-.adm-drawer .adm-drawer-content {
+.adm-floating-panel .adm-floating-panel-content {
   flex: 1;
   overflow-y: scroll;
 }

package/2x/es/components/floating-panel/floating-panel.d.ts

@@ -3,7 +3,7 @@ import { NativeProps } from '../../utils/native-props';
 export declare type FloatingPanelProps = {
     anchors: number[];
     children: ReactNode;
-} & NativeProps<'--border-radius'>;
+} & NativeProps<'--border-radius' | '--z-index'>;
 export declare type FloatingPanelRef = {
     setHeight: (height: number, options?: {
         immediate?: boolean;
@@ -12,4 +12,4 @@ export declare type FloatingPanelRef = {
 export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     anchors: number[];
     children: ReactNode;
-} & NativeProps<"--border-radius"> & React.RefAttributes<FloatingPanelRef>>;
+} & NativeProps<"--z-index" | "--border-radius"> & React.RefAttributes<FloatingPanelRef>>;

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

@@ -1,6 +1,6 @@
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { useDrag } from 'react-use-gesture';
+import { useDrag } from '@use-gesture/react';
 import { useSpring, animated } from '@react-spring/web';
 import { supportsPassive } from '../../utils/supports-passive';
 import { nearest } from '../../utils/nearest';
@@ -38,9 +38,8 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
       api = _useSpring[1];
 
   useDrag(function (state) {
-    var _state$movement = state.movement,
-        _ = _state$movement[0],
-        movementY = _state$movement[1];
+    var _state$offset = state.offset,
+        offsetY = _state$offset[1];
 
     if (state.first) {
       var target = state.event.target;
@@ -54,7 +53,7 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
         if (!content) return;
 
         if (reachedTop) {
-          if (content.scrollTop <= 0 && state.vxvy[1] > 0) {
+          if (content.scrollTop <= 0 && state.direction[1] > 0) {
             pullingRef.current = true;
           }
         } else {
@@ -72,12 +71,12 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     event.stopPropagation();
-    var nextY = movementY;
+    var nextY = offsetY;
 
     if (state.last) {
       pullingRef.current = false;
       setPulling(false);
-      nextY = nearest(possibles, movementY);
+      nextY = nearest(possibles, offsetY);
     }
 
     api.start({
@@ -87,11 +86,13 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     axis: 'y',
     bounds: bounds,
     rubberband: true,
-    initial: function initial() {
+    from: function from() {
       return [0, y.get()];
     },
-    useTouch: true,
-    domTarget: elementRef,
+    pointer: {
+      touch: true
+    },
+    target: elementRef,
     eventOptions: supportsPassive ? {
       passive: false
     } : false
@@ -108,23 +109,23 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [api]);
   return withNativeProps(props, /*#__PURE__*/React.createElement(animated.div, {
     ref: elementRef,
-    className: 'adm-drawer',
+    className: 'adm-floating-panel',
     style: {
       height: maxHeight,
       y: y
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'adm-drawer-mask',
+    className: 'adm-floating-panel-mask',
     style: {
       display: pulling ? 'block' : 'none'
     }
   }), /*#__PURE__*/React.createElement("div", {
-    className: 'adm-drawer-header',
+    className: 'adm-floating-panel-header',
     ref: headerRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'adm-drawer-bar'
+    className: 'adm-floating-panel-bar'
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'adm-drawer-content',
+    className: 'adm-floating-panel-content',
     ref: contentRef
   }, props.children)));
 });

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

@@ -1,8 +1,13 @@
 import React from 'react';
 import { FormLayout } from '.';
+import type { Meta, InternalNamePath } from 'rc-field-form/lib/interface';
 export declare type FormContextType = {
     hasFeedback: boolean;
     layout: FormLayout;
 };
 export declare const DEFAULT_FORM_CONTEXT: FormContextType;
 export declare const FormContext: React.Context<FormContextType>;
+export declare type OnSubMetaChange = (meta: Meta & {
+    destroy?: boolean;
+}, namePath: InternalNamePath) => void;
+export declare const NoStyleItemContext: React.Context<OnSubMetaChange | null>;

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

@@ -3,4 +3,5 @@ export var DEFAULT_FORM_CONTEXT = {
   hasFeedback: true,
   layout: 'vertical'
 };
-export var FormContext = /*#__PURE__*/React.createContext(DEFAULT_FORM_CONTEXT);
+export var FormContext = /*#__PURE__*/React.createContext(DEFAULT_FORM_CONTEXT);
+export var NoStyleItemContext = /*#__PURE__*/React.createContext(null);

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

@@ -7,23 +7,25 @@
   height: 100%;
   box-sizing: border-box;
   color: #666;
+  position: relative;
 }
 
 .adm-form-item-label-required {
-  margin-right: 8px;
+  position: absolute;
+  left: -0.6em;
+  top: 0.2em;
   color: var(--adm-color-danger);
   user-select: none;
 }
 
-.adm-form-item-label-disable {
-  color: #666;
-  opacity: 0.4;
-}
-
 .adm-form-item-footer {
   color: var(--adm-color-danger);
 }
 
+.adm-form-item-hidden {
+  display: none;
+}
+
 .adm-form-vertical .adm-form-item-label {
   margin-bottom: 8px;
 }

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

@@ -3,16 +3,19 @@ import { NativeProps } from '../../utils/native-props';
 import { FormInstance } from 'rc-field-form';
 import type { FieldProps } from 'rc-field-form/lib/Field';
 import { ListItemProps } from '../list';
+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 = RcFieldProps & NativeProps & Pick<ListItemProps, 'style' | 'onClick'> & {
-    label?: string;
-    help?: string;
+export declare type FormItemProps = RcFieldProps & NativeProps & Pick<ListItemProps, 'style' | 'onClick' | 'extra'> & {
+    label?: React.ReactNode;
+    help?: React.ReactNode;
     hasFeedback?: boolean;
     required?: boolean;
     noStyle?: boolean;
     disabled?: boolean;
+    hidden?: boolean;
+    layout?: FormLayout;
     children: ChildrenType;
 };
 export declare const FormItem: FC<FormItemProps>;

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

@@ -11,14 +11,15 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React, { useContext } from 'react';
+import React, { useContext, useCallback, useState } from 'react';
 import classNames from 'classnames';
 import { Field } from 'rc-field-form';
 import FieldContext from 'rc-field-form/lib/FieldContext';
 import { devWarning } from '../../utils/dev-log';
-import { FormContext } from './context';
+import { FormContext, NoStyleItemContext } from './context';
 import { toArray } from './utils';
 import List from '../list';
+var NAME_SPLIT = '__SPLIT__';
 var classPrefix = "adm-form-item";
 var MemoInput = /*#__PURE__*/React.memo(function (_ref) {
   var children = _ref.children;
@@ -32,24 +33,25 @@ var FormItemLayout = function FormItemLayout(props) {
 
   var className = props.className,
       style = props.style,
+      extra = props.extra,
       label = props.label,
       help = props.help,
       required = props.required,
       disabled = props.disabled,
-      meta = props.meta,
       children = props.children,
-      htmlFor = props.htmlFor;
+      htmlFor = props.htmlFor,
+      hidden = props.hidden,
+      errors = props.errors;
   var context = useContext(FormContext);
   var hasFeedback = props.hasFeedback || context.hasFeedback;
   var layout = props.layout || context.layout;
-  var formItemLabelClass = classNames(classPrefix + "-label", (_classNames = {}, _classNames[classPrefix + "-label-disable"] = disabled, _classNames));
-  var feedback = hasFeedback && meta && meta.errors.length > 0 ? meta.errors[0] : null;
+  var feedback = hasFeedback && errors && errors.length > 0 ? errors[0] : null;
   var labelElement = label ? /*#__PURE__*/React.createElement("label", {
-    className: formItemLabelClass,
+    className: classPrefix + "-label",
     htmlFor: htmlFor
-  }, required && /*#__PURE__*/React.createElement("span", {
+  }, label, required && /*#__PURE__*/React.createElement("span", {
     className: classPrefix + "-label-required"
-  }, "*"), label, help && /*#__PURE__*/React.createElement("span", {
+  }, "*"), help && /*#__PURE__*/React.createElement("span", {
     className: classPrefix + "-label-help"
   }, help)) : null;
   var descriptionElement = feedback && /*#__PURE__*/React.createElement("div", {
@@ -59,8 +61,10 @@ var FormItemLayout = function FormItemLayout(props) {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
+    extra: extra,
     description: descriptionElement,
-    className: classNames(classPrefix, className),
+    className: classNames(classPrefix, className, (_classNames = {}, _classNames[classPrefix + "-hidden"] = hidden, _classNames)),
+    disabled: disabled,
     onClick: props.onClick
   }, children);
 };
@@ -70,10 +74,13 @@ export var FormItem = function FormItem(props) {
       style = props.style,
       label = props.label,
       help = props.help,
+      extra = props.extra,
       hasFeedback = props.hasFeedback,
       name = props.name,
       required = props.required,
       noStyle = props.noStyle,
+      hidden = props.hidden,
+      layout = props.layout,
       disabled = props.disabled,
       rules = props.rules,
       children = props.children,
@@ -84,7 +91,7 @@ export var FormItem = function FormItem(props) {
       onClick = props.onClick,
       shouldUpdate = props.shouldUpdate,
       dependencies = props.dependencies,
-      fieldProps = __rest(props, ["className", "style", "label", "help", "hasFeedback", "name", "required", "noStyle", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies"]);
+      fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies"]);
 
   var _React$useContext = React.useContext(FieldContext),
       contextValidateTrigger = _React$useContext.validateTrigger;
@@ -93,23 +100,61 @@ export var FormItem = function FormItem(props) {
   var updateRef = React.useRef(0);
   updateRef.current += 1;
 
+  var _useState = useState({}),
+      subMetas = _useState[0],
+      setSubMetas = _useState[1];
+
+  var onSubMetaChange = useCallback(function (subMeta, namePath) {
+    setSubMetas(function (prevSubMetas) {
+      var nextSubMetas = Object.assign({}, prevSubMetas);
+      var nameKey = namePath.join(NAME_SPLIT);
+
+      if (subMeta.destroy) {
+        delete nextSubMetas[nameKey];
+      } else {
+        nextSubMetas[nameKey] = subMeta;
+      }
+
+      return nextSubMetas;
+    });
+  }, [setSubMetas]);
+
   function renderLayout(baseChildren, fieldId, meta, isRequired) {
-    if (noStyle) {
+    var _a;
+
+    if (noStyle && !hidden) {
       return baseChildren;
     }
 
+    var curErrors = (_a = meta === null || meta === void 0 ? void 0 : meta.errors) !== null && _a !== void 0 ? _a : [];
+    var errors = Object.keys(subMetas).reduce(function (subErrors, key) {
+      var _a, _b;
+
+      var errors = (_b = (_a = subMetas[key]) === null || _a === void 0 ? void 0 : _a.errors) !== null && _b !== void 0 ? _b : [];
+
+      if (errors.length) {
+        subErrors = [].concat(subErrors, errors);
+      }
+
+      return subErrors;
+    }, curErrors);
     return /*#__PURE__*/React.createElement(FormItemLayout, {
       className: className,
       style: style,
       label: label,
+      extra: extra,
       help: help,
       required: isRequired,
       disabled: disabled,
       hasFeedback: hasFeedback,
       htmlFor: fieldId,
-      meta: meta,
-      onClick: onClick
-    }, baseChildren);
+      errors: errors,
+      onClick: onClick,
+      hidden: hidden,
+      layout: layout
+    }, /*#__PURE__*/React.createElement(NoStyleItemContext.Provider, {
+      value: onSubMetaChange
+    }, baseChildren));
   }
 
   var isRenderProps = typeof children === 'function';
@@ -118,23 +163,33 @@ export var FormItem = function FormItem(props) {
     return renderLayout(children);
   }
 
-  var variables = {};
+  var Variables = {};
 
   if (typeof label === 'string') {
-    variables.label = label;
+    Variables.label = label;
   }
 
   if (messageVariables) {
-    variables = Object.assign(Object.assign({}, variables), messageVariables);
+    Variables = Object.assign(Object.assign({}, Variables), messageVariables);
   }
 
+  var notifyParentMetaChange = useContext(NoStyleItemContext);
+
+  var onMetaChange = function onMetaChange(meta) {
+    if (noStyle && notifyParentMetaChange) {
+      var namePath = meta.name;
+      notifyParentMetaChange(meta, namePath);
+    }
+  };
+
   return /*#__PURE__*/React.createElement(Field, Object.assign({}, fieldProps, {
     name: name,
     shouldUpdate: shouldUpdate,
     dependencies: dependencies,
     rules: rules,
     trigger: trigger,
-    validateTrigger: mergedValidateTrigger
+    validateTrigger: mergedValidateTrigger,
+    onMetaChange: onMetaChange
   }), function (control, meta, context) {
     var childNode = null;
     var isRequired = required !== undefined ? required : !!(rules && rules.some(function (rule) {
@@ -174,10 +229,6 @@ export var FormItem = function FormItem(props) {
 
       if (!childProps.id) {
         childProps.id = fieldId;
-      }
-
-      if (disabled) {
-        childProps.disabled = disabled;
       } // We should keep user origin event handler
 
 

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

@@ -1,3 +1,7 @@
+.adm-form .adm-list {
+  --padding-left: 40px;
+}
+
 .adm-form .adm-form-footer {
   padding: 24px;
 }

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

@@ -1,10 +1,16 @@
-import { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import type { FormProps as RcFormProps } from 'rc-field-form';
+import { ListProps } from '../list';
+import type { FormProps as RcFormProps, FormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
 import type { FormLayout } from '.';
 export declare type FormProps = RcFormProps & NativeProps & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: FormLayout;
+    mode?: ListProps['mode'];
 };
-export declare const Form: FC<FormProps>;
+export declare const Form: React.ForwardRefExoticComponent<RcFormProps<any> & NativeProps<never> & Partial<FormContextType> & {
+    footer?: ReactNode;
+    layout?: "horizontal" | "vertical" | undefined;
+    mode?: ListProps['mode'];
+} & React.RefAttributes<FormInstance<any>>>;

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

@@ -11,7 +11,7 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import List from '../list';
 import RcForm from 'rc-field-form';
@@ -22,7 +22,7 @@ var defaultProps = {
   hasFeedback: true,
   layout: 'vertical'
 };
-export var Form = function Form(p) {
+export var Form = /*#__PURE__*/forwardRef(function (p, ref) {
   var props = mergeProps(defaultProps, p);
 
   var className = props.className,
@@ -31,12 +31,15 @@ export var Form = function Form(p) {
       children = props.children,
       layout = props.layout,
       footer = props.footer,
-      formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer"]);
+      mode = props.mode,
+      formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
 
   return /*#__PURE__*/React.createElement(RcForm, Object.assign({
     className: classNames(classPrefix, classPrefix + "-" + layout, className),
-    style: style
+    style: style,
+    ref: ref
   }, formProps), /*#__PURE__*/React.createElement(List, {
+    mode: mode,
     style: {
       '--prefix-width': '6em',
       '--align-items': 'stretch'
@@ -49,4 +52,4 @@ export var Form = function Form(p) {
   }, children)), footer && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-footer"
   }, footer));
-};
+});

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

@@ -1,3 +1,7 @@
+.adm-form .adm-list {
+  --padding-left: 40px;
+}
+
 .adm-form .adm-form-footer {
   padding: 24px;
 }
@@ -11,23 +15,25 @@
   height: 100%;
   box-sizing: border-box;
   color: #666;
+  position: relative;
 }
 
 .adm-form-item-label-required {
-  margin-right: 8px;
+  position: absolute;
+  left: -0.6em;
+  top: 0.2em;
   color: var(--adm-color-danger);
   user-select: none;
 }
 
-.adm-form-item-label-disable {
-  color: #666;
-  opacity: 0.4;
-}
-
 .adm-form-item-footer {
   color: var(--adm-color-danger);
 }
 
+.adm-form-item-hidden {
+  display: none;
+}
+
 .adm-form-vertical .adm-form-item-label {
   margin-bottom: 8px;
 }

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

@@ -3,7 +3,12 @@ import './index.less';
 import { useForm } from 'rc-field-form';
 export declare type FormLayout = 'vertical' | 'horizontal';
 export type { FormProps } from './form';
-declare const _default: import("react").FC<import("./form").FormProps> & {
+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> & {
+    footer?: import("react").ReactNode;
+    layout?: "horizontal" | "vertical" | undefined;
+    mode?: "default" | "card" | undefined;
+} & import("react").RefAttributes<import("rc-field-form").FormInstance<any>>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
     useForm: typeof useForm;
 };

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

@@ -1,8 +1,11 @@
 .adm-grid {
+  --gap: 0;
+  --gap-horizontal: var(--gap);
+  --gap-vertical: var(--gap);
   display: grid;
   grid-gap: 20px;
-  column-gap: var(--horizontal-gap);
-  row-gap: var(--vertical-gap);
+  column-gap: var(--gap-horizontal);
+  row-gap: var(--gap-vertical);
   grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
   align-items: stretch;
 }