antd-mobile 5.0.0-rc.2 → 5.0.0-rc.23

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

@@ -4,52 +4,48 @@ import { useDrag } from '@use-gesture/react';
 import { useSpring, animated } from '@react-spring/web';
 import { supportsPassive } from '../../utils/supports-passive';
 import { nearest } from '../../utils/nearest';
-export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
+export const FloatingPanel = forwardRef((props, ref) => {
   var _a;
 
-  var anchors = props.anchors;
-  var maxHeight = (_a = anchors[anchors.length - 1]) !== null && _a !== void 0 ? _a : window.innerHeight;
-  var possibles = anchors.map(function (x) {
-    return -x;
-  });
-  var elementRef = useRef(null);
-  var headerRef = useRef(null);
-  var contentRef = useRef(null);
-
-  var _useState = useState(false),
-      pulling = _useState[0],
-      setPulling = _useState[1];
-
-  var pullingRef = useRef(false);
-  var bounds = {
+  const {
+    anchors
+  } = props;
+  const maxHeight = (_a = anchors[anchors.length - 1]) !== null && _a !== void 0 ? _a : window.innerHeight;
+  const possibles = anchors.map(x => -x);
+  const elementRef = useRef(null);
+  const headerRef = useRef(null);
+  const contentRef = useRef(null);
+  const [pulling, setPulling] = useState(false);
+  const pullingRef = useRef(false);
+  const bounds = {
     top: possibles[possibles.length - 1],
     bottom: possibles[0]
   };
+  const [{
+    y
+  }, api] = useSpring(() => ({
+    y: bounds.bottom,
+    config: {
+      tension: 300
+    },
+    onChange: result => {
+      var _a;
 
-  var _useSpring = useSpring(function () {
-    return {
-      y: bounds.bottom,
-      config: {
-        tension: 300
-      }
-    };
-  }),
-      y = _useSpring[0].y,
-      api = _useSpring[1];
-
-  useDrag(function (state) {
-    var _state$offset = state.offset,
-        offsetY = _state$offset[1];
+      (_a = props.onHeightChange) === null || _a === void 0 ? void 0 : _a.call(props, result.value.y, y.isAnimating);
+    }
+  }));
+  useDrag(state => {
+    const [, offsetY] = state.offset;
 
     if (state.first) {
-      var target = state.event.target;
-      var header = headerRef.current;
+      const target = state.event.target;
+      const header = headerRef.current;
 
       if (header === target || (header === null || header === void 0 ? void 0 : header.contains(target))) {
         pullingRef.current = true;
       } else {
-        var reachedTop = y.goal <= bounds.top;
-        var content = contentRef.current;
+        const reachedTop = y.goal <= bounds.top;
+        const content = contentRef.current;
         if (!content) return;
 
         if (reachedTop) {
@@ -64,14 +60,16 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
 
     setPulling(pullingRef.current);
     if (!pullingRef.current) return;
-    var event = state.event;
+    const {
+      event
+    } = state;
 
     if (event.cancelable) {
       event.preventDefault();
     }
 
     event.stopPropagation();
-    var nextY = offsetY;
+    let nextY = offsetY;
 
     if (state.last) {
       pullingRef.current = false;
@@ -84,11 +82,9 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   }, {
     axis: 'y',
-    bounds: bounds,
+    bounds,
     rubberband: true,
-    from: function from() {
-      return [0, y.get()];
-    },
+    from: () => [0, y.get()],
     pointer: {
       touch: true
     },
@@ -97,34 +93,32 @@ export var FloatingPanel = /*#__PURE__*/forwardRef(function (props, ref) {
       passive: false
     } : false
   });
-  useImperativeHandle(ref, function () {
-    return {
-      setHeight: function setHeight(height, options) {
-        api.start({
-          y: -height,
-          immediate: options === null || options === void 0 ? void 0 : options.immediate
-        });
-      }
-    };
-  }, [api]);
-  return withNativeProps(props, /*#__PURE__*/React.createElement(animated.div, {
+  useImperativeHandle(ref, () => ({
+    setHeight: (height, options) => {
+      api.start({
+        y: -height,
+        immediate: options === null || options === void 0 ? void 0 : options.immediate
+      });
+    }
+  }), [api]);
+  return withNativeProps(props, React.createElement(animated.div, {
     ref: elementRef,
     className: 'adm-floating-panel',
     style: {
       height: maxHeight,
-      y: y
+      y
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, React.createElement("div", {
     className: 'adm-floating-panel-mask',
     style: {
       display: pulling ? 'block' : 'none'
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), React.createElement("div", {
     className: 'adm-floating-panel-header',
     ref: headerRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }, React.createElement("div", {
     className: 'adm-floating-panel-bar'
-  })), /*#__PURE__*/React.createElement("div", {
+  })), React.createElement("div", {
     className: 'adm-floating-panel-content',
     ref: contentRef
   }, props.children)));

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

@@ -1,7 +1,7 @@
 import React from 'react';
-export var DEFAULT_FORM_CONTEXT = {
+export const DEFAULT_FORM_CONTEXT = {
   hasFeedback: true,
   layout: 'vertical'
 };
-export var FormContext = /*#__PURE__*/React.createContext(DEFAULT_FORM_CONTEXT);
-export var NoStyleItemContext = /*#__PURE__*/React.createContext(null);
+export const FormContext = React.createContext(DEFAULT_FORM_CONTEXT);
+export const NoStyleItemContext = React.createContext(null);

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

@@ -1,98 +1,37 @@
-var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
+import { __awaiter, __rest } from "tslib";
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { FormItem } from './form-item';
 import DatePicker from '../date-picker';
-var Inner = /*#__PURE__*/forwardRef(function (props, ref) {
-  useImperativeHandle(ref, function () {
-    return {
-      trigger: function trigger() {
-        return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-          var _a, v;
-
-          return regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) {
-              switch (_context.prev = _context.next) {
-                case 0:
-                  _context.next = 2;
-                  return DatePicker.prompt({
-                    defaultValue: props.value
-                  });
-
-                case 2:
-                  v = _context.sent;
+const Inner = forwardRef((props, ref) => {
+  useImperativeHandle(ref, () => ({
+    trigger: () => __awaiter(void 0, void 0, void 0, function* () {
+      var _a;
 
-                  if (v !== null) {
-                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
-                  }
+      const v = yield DatePicker.prompt({
+        defaultValue: props.value
+      });
 
-                case 4:
-                case "end":
-                  return _context.stop();
-              }
-            }
-          }, _callee);
-        }));
+      if (v !== null) {
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
       }
-    };
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.renderValue(props.value));
+    })
+  }));
+  return React.createElement(React.Fragment, null, props.renderValue(props.value));
 });
-export var FormImperativeItem = function FormImperativeItem(props) {
-  var renderValue = props.renderValue,
-      formItemProps = __rest(props, ["renderValue"]);
-
-  var ref = useRef(null);
-  return /*#__PURE__*/React.createElement(FormItem, Object.assign({}, formItemProps, {
-    onClick: function onClick() {
+export const FormImperativeItem = props => {
+  const {
+    renderValue
+  } = props,
+        formItemProps = __rest(props, ["renderValue"]);
+
+  const ref = useRef(null);
+  return React.createElement(FormItem, Object.assign({}, formItemProps, {
+    onClick: () => {
       var _a;
 
       (_a = ref.current) === null || _a === void 0 ? void 0 : _a.trigger();
     }
-  }), /*#__PURE__*/React.createElement(Inner, {
+  }), React.createElement(Inner, {
     ref: ref,
     renderValue: renderValue
   }));

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

@@ -5,8 +5,8 @@
 .adm-form-item-label {
   display: block;
   height: 100%;
+  line-height: 1.5;
   box-sizing: border-box;
-  color: #666;
   position: relative;
 }
 
@@ -22,14 +22,24 @@
   color: var(--adm-color-danger);
 }
 
-.adm-form-item-hidden {
+.adm-form-item.adm-form-item-hidden {
   display: none;
 }
 
 .adm-form-vertical .adm-form-item-label {
   margin-bottom: 8px;
+  font-size: 30px;
 }
 
 .adm-form-vertical .adm-form-item-footer {
   margin-top: 8px;
+}
+
+.adm-form-horizontal .adm-list-item-content-prefix {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.adm-form-item-label {
+  color: #666666;
 }

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

@@ -1,16 +1,4 @@
-var __rest = this && this.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
-
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
+import { __rest } from "tslib";
 import React, { useContext, useCallback, useState } from 'react';
 import classNames from 'classnames';
 import { Field } from 'rc-field-form';
@@ -19,95 +7,94 @@ import { devWarning } from '../../utils/dev-log';
 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;
-  return children;
-}, function (prev, next) {
-  return prev.value === next.value && prev.update === next.update;
-});
-
-var FormItemLayout = function FormItemLayout(props) {
-  var _classNames;
-
-  var className = props.className,
-      style = props.style,
-      extra = props.extra,
-      label = props.label,
-      help = props.help,
-      required = props.required,
-      disabled = props.disabled,
-      children = props.children,
-      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 feedback = hasFeedback && errors && errors.length > 0 ? errors[0] : null;
-  var labelElement = label ? /*#__PURE__*/React.createElement("label", {
-    className: classPrefix + "-label",
+const NAME_SPLIT = '__SPLIT__';
+const classPrefix = `adm-form-item`;
+const MemoInput = React.memo(({
+  children
+}) => children, (prev, next) => prev.value === next.value && prev.update === next.update);
+
+const FormItemLayout = props => {
+  const {
+    className,
+    style,
+    extra,
+    label,
+    help,
+    required,
+    disabled,
+    children,
+    htmlFor,
+    hidden,
+    errors
+  } = props;
+  const context = useContext(FormContext);
+  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 labelElement = label ? React.createElement("label", {
+    className: `${classPrefix}-label`,
     htmlFor: htmlFor
-  }, label, required && /*#__PURE__*/React.createElement("span", {
-    className: classPrefix + "-label-required"
-  }, "*"), help && /*#__PURE__*/React.createElement("span", {
-    className: classPrefix + "-label-help"
+  }, label, required && React.createElement("span", {
+    className: `${classPrefix}-label-required`
+  }, "*"), help && React.createElement("span", {
+    className: `${classPrefix}-label-help`
   }, help)) : null;
-  var descriptionElement = feedback && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-footer"
+  const descriptionElement = feedback && React.createElement("div", {
+    className: `${classPrefix}-footer`
   }, feedback);
-  return /*#__PURE__*/React.createElement(List.Item, {
+  return React.createElement(List.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
     extra: extra,
     description: descriptionElement,
-    className: classNames(classPrefix, className, (_classNames = {}, _classNames[classPrefix + "-hidden"] = hidden, _classNames)),
+    className: classNames(classPrefix, className, {
+      [`${classPrefix}-hidden`]: hidden
+    }),
     disabled: disabled,
     onClick: props.onClick
   }, children);
 };
 
-export var FormItem = function FormItem(props) {
-  var className = props.className,
-      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,
-      messageVariables = props.messageVariables,
-      _props$trigger = props.trigger,
-      trigger = _props$trigger === void 0 ? 'onChange' : _props$trigger,
-      validateTrigger = props.validateTrigger,
-      onClick = props.onClick,
-      shouldUpdate = props.shouldUpdate,
-      dependencies = props.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;
-
-  var mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
-  var updateRef = React.useRef(0);
+export const FormItem = props => {
+  const {
+    // 样式相关
+    className,
+    style,
+    // FormItem 相关
+    label,
+    help,
+    extra,
+    hasFeedback,
+    name,
+    required,
+    noStyle,
+    hidden,
+    layout,
+    // Field 相关
+    disabled,
+    rules,
+    children,
+    messageVariables,
+    trigger = 'onChange',
+    validateTrigger,
+    onClick,
+    shouldUpdate,
+    dependencies
+  } = props,
+        fieldProps = __rest(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies"]);
+
+  const {
+    validateTrigger: contextValidateTrigger
+  } = React.useContext(FieldContext);
+  const mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
+  const 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);
+  const [subMetas, setSubMetas] = useState({});
+  const onSubMetaChange = useCallback((subMeta, namePath) => {
+    setSubMetas(prevSubMetas => {
+      const nextSubMetas = Object.assign({}, prevSubMetas);
+      const nameKey = namePath.join(NAME_SPLIT);
 
       if (subMeta.destroy) {
         delete nextSubMetas[nameKey];
@@ -126,19 +113,19 @@ export var FormItem = function FormItem(props) {
       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) {
+    const curErrors = (_a = meta === null || meta === void 0 ? void 0 : meta.errors) !== null && _a !== void 0 ? _a : [];
+    const errors = Object.keys(subMetas).reduce((subErrors, key) => {
       var _a, _b;
 
-      var errors = (_b = (_a = subMetas[key]) === null || _a === void 0 ? void 0 : _a.errors) !== null && _b !== void 0 ? _b : [];
+      const 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);
+        subErrors = [...subErrors, ...errors];
       }
 
       return subErrors;
     }, curErrors);
-    return /*#__PURE__*/React.createElement(FormItemLayout, {
+    return React.createElement(FormItemLayout, {
       className: className,
       style: style,
       label: label,
@@ -152,18 +139,18 @@ export var FormItem = function FormItem(props) {
       onClick: onClick,
       hidden: hidden,
       layout: layout
-    }, /*#__PURE__*/React.createElement(NoStyleItemContext.Provider, {
+    }, React.createElement(NoStyleItemContext.Provider, {
       value: onSubMetaChange
     }, baseChildren));
   }
 
-  var isRenderProps = typeof children === 'function';
+  const isRenderProps = typeof children === 'function';
 
   if (!name && !isRenderProps && !props.dependencies) {
     return renderLayout(children);
   }
 
-  var Variables = {};
+  let Variables = {};
 
   if (typeof label === 'string') {
     Variables.label = label;
@@ -173,33 +160,34 @@ export var FormItem = function FormItem(props) {
     Variables = Object.assign(Object.assign({}, Variables), messageVariables);
   }
 
-  var notifyParentMetaChange = useContext(NoStyleItemContext);
+  const notifyParentMetaChange = useContext(NoStyleItemContext);
 
-  var onMetaChange = function onMetaChange(meta) {
+  const onMetaChange = meta => {
     if (noStyle && notifyParentMetaChange) {
-      var namePath = meta.name;
+      const namePath = meta.name;
       notifyParentMetaChange(meta, namePath);
     }
   };
 
-  return /*#__PURE__*/React.createElement(Field, Object.assign({}, fieldProps, {
+  return React.createElement(Field, Object.assign({}, fieldProps, {
     name: name,
     shouldUpdate: shouldUpdate,
     dependencies: dependencies,
     rules: rules,
     trigger: trigger,
     validateTrigger: mergedValidateTrigger,
-    onMetaChange: onMetaChange
-  }), function (control, meta, context) {
-    var childNode = null;
-    var isRequired = required !== undefined ? required : !!(rules && rules.some(function (rule) {
+    onMetaChange: onMetaChange,
+    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;
     }));
-    var fieldId = (toArray(name).length && meta ? meta.name : []).join('_');
+    const fieldId = (toArray(name).length && meta ? meta.name : []).join('_');
 
     if (shouldUpdate && dependencies) {
       devWarning('Form.Item', "`shouldUpdate` and `dependencies` shouldn't be used together.");
@@ -220,37 +208,31 @@ export var FormItem = function FormItem(props) {
 
     } else if (dependencies && !name) {
       devWarning('Form.Item', 'Must set `name` or use render props when `dependencies` is set.');
-    } else if ( /*#__PURE__*/React.isValidElement(children)) {
+    } else if (React.isValidElement(children)) {
       if (children.props.defaultValue) {
         devWarning('Form.Item', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.');
       }
 
-      var childProps = Object.assign(Object.assign({}, children.props), control);
+      const childProps = Object.assign(Object.assign({}, children.props), control);
 
       if (!childProps.id) {
         childProps.id = fieldId;
       } // We should keep user origin event handler
 
 
-      var triggers = new Set([].concat(toArray(trigger), toArray(mergedValidateTrigger)));
-      triggers.forEach(function (eventName) {
-        childProps[eventName] = function () {
-          var _a2, _c2;
-
+      const triggers = new Set([...toArray(trigger), ...toArray(mergedValidateTrigger)]);
+      triggers.forEach(eventName => {
+        childProps[eventName] = (...args) => {
           var _a, _b, _c;
 
-          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-          }
-
-          (_a = control[eventName]) === null || _a === void 0 ? void 0 : (_a2 = _a).call.apply(_a2, [control].concat(args));
-          (_c = (_b = children.props)[eventName]) === null || _c === void 0 ? void 0 : (_c2 = _c).call.apply(_c2, [_b].concat(args));
+          (_a = control[eventName]) === null || _a === void 0 ? void 0 : _a.call(control, ...args);
+          (_c = (_b = children.props)[eventName]) === null || _c === void 0 ? void 0 : _c.call(_b, ...args);
         };
       });
-      childNode = /*#__PURE__*/React.createElement(MemoInput, {
+      childNode = React.createElement(MemoInput, {
         value: control[props.valuePropName || 'value'],
         update: updateRef.current
-      }, /*#__PURE__*/React.cloneElement(children, childProps));
+      }, React.cloneElement(children, childProps));
     } else {
       if (name) {
         devWarning('Form.Item', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.');