antd-mobile 5.4.0 → 5.5.0

package/cjs/components/popover/popover.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Popover = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _tslib = require("tslib");
 
-var _rcTooltip = _interopRequireDefault(require("rc-tooltip"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -15,10 +15,26 @@ var _usePropsValue = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _nativeProps = require("../../utils/native-props");
+
 var _withStopPropagation = require("../../utils/with-stop-propagation");
 
 var _arrow = require("./arrow");
 
+var _renderToContainer = require("../../utils/render-to-container");
+
+var _dom = require("@floating-ui/dom");
+
+var _wrapper = require("./wrapper");
+
+var _shouldRender = require("../../utils/should-render");
+
+var _ahooks = require("ahooks");
+
+var _normalizePlacement = require("./normalize-placement");
+
+var _convertPx = require("../../utils/convert-px");
+
 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); }
@@ -33,12 +49,11 @@ const defaultProps = {
   getContainer: () => document.body
 };
 const Popover = (0, _react.forwardRef)((p, ref) => {
-  var _a;
-
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
     mode = 'light'
   } = props;
+  const placement = (0, _normalizePlacement.normalizePlacement)(props.placement);
   const [visible, setVisible] = (0, _usePropsValue.usePropsValue)({
     value: props.visible,
     defaultValue: props.defaultVisible,
@@ -51,24 +66,113 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
       visible
     };
   }, [visible]);
-  const overlay = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, _react.default.createElement("div", {
+  const targetRef = (0, _react.useRef)(null);
+  const floatingRef = (0, _react.useRef)(null);
+  const arrowRef = (0, _react.useRef)(null);
+  const floating = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${mode}`, !visible && `${classPrefix}-hidden`),
+    ref: floatingRef
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-arrow`,
+    ref: arrowRef
+  }, _react.default.createElement(_arrow.Arrow, {
+    className: `${classPrefix}-arrow-icon`
+  })), _react.default.createElement("div", {
+    className: `${classPrefix}-inner`
+  }, _react.default.createElement("div", {
     className: `${classPrefix}-inner-content`
-  }, props.content));
-  return _react.default.createElement(_rcTooltip.default, Object.assign({}, props, {
-    placement: props.placement,
-    align: props.align,
-    overlayClassName: (0, _classnames.default)(`${classPrefix}-${mode}`, props.className),
-    overlayStyle: props.style,
-    destroyTooltipOnHide: props.destroyOnHide,
-    prefixCls: classPrefix,
-    getTooltipContainer: props.getContainer || (() => document.body),
-    visible: visible,
-    arrowContent: _react.default.createElement(_arrow.Arrow, {
-      className: `${classPrefix}-arrow-icon`
-    }),
-    onVisibleChange: setVisible,
-    trigger: (_a = props.trigger) !== null && _a !== void 0 ? _a : [],
-    overlay: overlay
-  }), props.children);
+  }, props.content)))));
+  const [targetElement, setTargetElement] = (0, _react.useState)(null);
+
+  function update() {
+    var _a, _b, _c;
+
+    return (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
+      const target = (_b = (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : null;
+      const floating = floatingRef.current;
+      const arrowElement = arrowRef.current;
+      setTargetElement(target);
+      if (!target || !floating || !arrowElement) return;
+      const {
+        x,
+        y,
+        placement: realPlacement,
+        middlewareData
+      } = yield (0, _dom.computePosition)(target, floating, {
+        placement,
+        middleware: [(0, _dom.offset)((0, _convertPx.convertPx)(12)), (0, _dom.shift)({
+          padding: (0, _convertPx.convertPx)(4),
+          crossAxis: false,
+          limiter: (0, _dom.limitShift)()
+        }), (0, _dom.flip)(), (0, _dom.hide)(), (0, _dom.arrow)({
+          element: arrowElement,
+          padding: (0, _convertPx.convertPx)(12)
+        })]
+      });
+      Object.assign(floating.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      const side = realPlacement.split('-')[0];
+      const arrowSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[side];
+      const {
+        x: arrowX,
+        y: arrowY
+      } = (_c = middlewareData.arrow) !== null && _c !== void 0 ? _c : {};
+      Object.assign(arrowElement.style, {
+        left: arrowX != null ? `${arrowX}px` : '',
+        top: arrowY != null ? `${arrowY}px` : '',
+        right: '',
+        bottom: '',
+        [arrowSide]: `-${(0, _convertPx.convertPx)(8)}px`
+      });
+      const arrowRotate = {
+        top: '0deg',
+        bottom: '180deg',
+        left: '270deg',
+        right: '90deg'
+      }[side];
+      arrowElement.style.setProperty('--arrow-icon-rotate', arrowRotate);
+    });
+  }
+
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    update();
+  });
+  (0, _react.useEffect)(() => {
+    if (!targetElement) return;
+    if (!props.trigger) return;
+
+    function handleClick() {
+      setVisible(v => !v);
+    }
+
+    targetElement.addEventListener('click', handleClick);
+    return () => {
+      targetElement.removeEventListener('click', handleClick);
+    };
+  }, [targetElement, props.trigger]);
+  (0, _react.useEffect)(() => {
+    const floatingElement = floatingRef.current;
+    if (!targetElement || !floatingElement) return;
+    return (0, _dom.autoUpdate)(targetElement, floatingElement, update);
+  }, [targetElement]);
+  (0, _ahooks.useClickAway)(() => {
+    if (!props.trigger) return;
+    setVisible(false);
+  }, () => {
+    var _a;
+
+    return (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element;
+  });
+  const shouldRender = (0, _shouldRender.useShouldRender)(visible, false, props.destroyOnHide);
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_wrapper.Wrapper, {
+    ref: targetRef
+  }, props.children), shouldRender && (0, _renderToContainer.renderToContainer)(props.getContainer, floating));
 });
 exports.Popover = Popover;

package/cjs/components/popover/wrapper.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare class Wrapper extends React.Component<{}, {}> {
+    element: Element | null;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    render(): React.ReactNode;
+}

package/cjs/components/popover/wrapper.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = require("react-dom");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class Wrapper extends _react.default.Component {
+  constructor() {
+    super(...arguments);
+    this.element = null;
+  }
+
+  componentDidMount() {
+    this.componentDidUpdate();
+  }
+
+  componentDidUpdate() {
+    // eslint-disable-next-line
+    const node = (0, _reactDom.findDOMNode)(this);
+
+    if (node instanceof Element) {
+      this.element = node;
+    } else {
+      this.element = null;
+    }
+  }
+
+  render() {
+    return _react.default.Children.only(this.props.children);
+  }
+
+}
+
+exports.Wrapper = Wrapper;

package/cjs/components/pull-to-refresh/pull-to-refresh.js

@@ -126,15 +126,30 @@ const PullToRefresh = p => {
 
     const [, y] = state.movement;
 
-    if (state.first) {
-      const element = elementRef.current;
-      if (!element) return;
-      const scrollParent = (0, _getScrollParent.getScrollParent)(element);
-      if (!scrollParent) return;
-      const top = 'scrollTop' in scrollParent ? scrollParent.scrollTop : scrollParent.scrollY;
-
-      if (top <= 0 && y > 0) {
-        pullingRef.current = true;
+    if (state.first && y > 0) {
+      const target = state.event.target;
+      if (!target || !(target instanceof Element)) return;
+      let scrollParent = (0, _getScrollParent.getScrollParent)(target);
+
+      while (true) {
+        if (!scrollParent) return;
+        const scrollTop = getScrollTop(scrollParent);
+
+        if (scrollTop > 0) {
+          return;
+        }
+
+        if (scrollParent instanceof Window) {
+          break;
+        }
+
+        scrollParent = (0, _getScrollParent.getScrollParent)(scrollParent.parentNode);
+      }
+
+      pullingRef.current = true;
+
+      function getScrollTop(element) {
+        return 'scrollTop' in element ? element.scrollTop : element.scrollY;
       }
     }
 

package/cjs/components/radio/radio.js

@@ -87,22 +87,34 @@ const Radio = p => {
     }, checked && _react.default.createElement(_checkIcon.CheckIcon, null));
   };
 
+  const inputRef = (0, _react.useRef)(null);
+  const labelRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    var _a;
+
+    (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', e => {
+      if (e.target !== inputRef.current) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+      }
+    }, {
+      capture: false
+    });
+  }, []);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {
+    ref: labelRef,
     className: (0, _classnames.default)(classPrefix, {
       [`${classPrefix}-checked`]: checked,
       [`${classPrefix}-disabled`]: disabled,
       [`${classPrefix}-block`]: props.block
     })
   }, _react.default.createElement("input", {
+    ref: inputRef,
     type: 'radio',
     checked: checked,
     onChange: e => {
       setChecked(e.target.checked);
     },
-    onClick: e => {
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-    },
     disabled: disabled,
     id: props.id
   }), renderIcon(), props.children && _react.default.createElement("div", {

package/cjs/utils/use-props-value.d.ts

@@ -1,7 +1,8 @@
+import { SetStateAction } from 'react';
 declare type Options<T> = {
     value?: T;
     defaultValue: T;
     onChange?: (v: T) => void;
 };
-export declare function usePropsValue<T>(options: Options<T>): readonly [T, (this: unknown, v: T) => void];
+export declare function usePropsValue<T>(options: Options<T>): readonly [T, (this: unknown, v: SetStateAction<T>) => void];
 export {};

package/cjs/utils/use-props-value.js

@@ -23,12 +23,14 @@ function usePropsValue(options) {
   }
 
   const setState = (0, _ahooks.useMemoizedFn)(v => {
+    const nextValue = typeof v === 'function' ? v(stateRef.current) : v;
+
     if (value === undefined) {
-      stateRef.current = v;
+      stateRef.current = nextValue;
       update();
     }
 
-    onChange === null || onChange === void 0 ? void 0 : onChange(v);
+    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
   });
   return [stateRef.current, setState];
 }

package/es/components/cascader-view/cascader-view.d.ts

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

package/es/components/cascader-view/use-cascader-value-extend.js

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

package/es/components/check-list/check-list-item.js

@@ -20,7 +20,7 @@ export const CheckListItem = props => {
   }, active ? context.activeIcon : null);
   return withNativeProps(props, React.createElement(List.Item, {
     title: props.title,
-    className: classNames(classPrefix, readOnly && `${classPrefix}-readonly`),
+    className: classNames(classPrefix, readOnly && `${classPrefix}-readonly`, active && `${classPrefix}-active`),
     description: props.description,
     prefix: props.prefix,
     onClick: e => {

package/es/components/checkbox/checkbox.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import { CheckboxGroupContext } from './group-context';
@@ -66,7 +66,22 @@ export const Checkbox = p => {
     }, props.indeterminate ? React.createElement(IndeterminateIcon, null) : checked && React.createElement(CheckIcon, null));
   };
 
+  const inputRef = useRef(null);
+  const labelRef = useRef(null);
+  useEffect(() => {
+    var _a;
+
+    (_a = labelRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('click', e => {
+      if (e.target !== inputRef.current) {
+        e.stopPropagation();
+        e.stopImmediatePropagation();
+      }
+    }, {
+      capture: false
+    });
+  }, []);
   return withNativeProps(props, React.createElement("label", {
+    ref: labelRef,
     className: classNames(classPrefix, {
       [`${classPrefix}-checked`]: checked && !props.indeterminate,
       [`${classPrefix}-indeterminate`]: props.indeterminate,
@@ -74,15 +89,12 @@ export const Checkbox = p => {
       [`${classPrefix}-block`]: props.block
     })
   }, React.createElement("input", {
+    ref: inputRef,
     type: 'checkbox',
     checked: checked,
     onChange: e => {
       setChecked(e.target.checked);
     },
-    onClick: e => {
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
-    },
     disabled: disabled,
     id: props.id
   }), renderIcon(), props.children && React.createElement("div", {

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

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

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

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

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { List as RCList } from 'rc-field-form';
+import List from '../list';
+export const FormArray = props => {
+  return React.createElement(RCList, {
+    name: props.name,
+    initialValue: props.initialValue
+  }, (rcFields, operation) => {
+    const fields = rcFields.map(field => ({
+      index: field.name,
+      key: field.key
+    }));
+    const children = props.children(fields, operation).map((child, index) => {
+      var _a;
+
+      return React.createElement(List, {
+        key: fields[index].key,
+        mode: 'card',
+        header: (_a = props.renderHeader) === null || _a === void 0 ? void 0 : _a.call(props, fields[index], operation)
+      }, child);
+    });
+
+    if (props.renderAdd) {
+      children.push(React.createElement(List, {
+        key: 'add',
+        mode: 'card'
+      }, React.createElement(List.Item, {
+        className: 'adm-form-list-operation',
+        onClick: () => {
+          operation.add();
+        },
+        arrow: false
+      }, props.renderAdd())));
+    }
+
+    return React.createElement(React.Fragment, null, children);
+  });
+};

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

@@ -40,10 +40,14 @@
 .adm-form-item-child-position-right > * {
   flex: none;
 }
-.adm-form-item-footer {
+.adm-form-item-feedback-error {
   color: var(--adm-color-danger);
   margin-top: 4px;
 }
+.adm-form-item-feedback-warning {
+  color: var(--adm-color-warning);
+  margin-top: 4px;
+}
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }

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

@@ -28,9 +28,7 @@ const FormItemLayout = props => {
     children,
     htmlFor,
     hidden,
-    errors,
     arrow,
-    description,
     childElementPosition = 'normal'
   } = props;
   const context = useContext(FormContext);
@@ -39,7 +37,6 @@ const FormItemLayout = props => {
   } = 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 {
@@ -77,15 +74,19 @@ const FormItemLayout = props => {
     mode: 'dark',
     trigger: 'click'
   }, React.createElement(QuestionCircleOutline, null)))) : null;
-  const descriptionElement = feedback || description ? React.createElement(React.Fragment, null, description, React.createElement("div", {
-    className: `${classPrefix}-footer`
-  }, feedback)) : null;
+  const description = React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
+    key: `error-${index}`,
+    className: `${classPrefix}-feedback-error`
+  }, error)), props.warnings.map((warning, index) => React.createElement("div", {
+    key: `warning-${index}`,
+    className: `${classPrefix}-feedback-warning`
+  }, warning))));
   return React.createElement(List.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
     extra: extra,
-    description: descriptionElement,
+    description: description,
     className: classNames(classPrefix, className, `${classPrefix}-${layout}`, {
       [`${classPrefix}-hidden`]: hidden
     }),
@@ -153,7 +154,7 @@ export const FormItem = props => {
   }, [setSubMetas]);
 
   function renderLayout(baseChildren, fieldId, meta, isRequired) {
-    var _a;
+    var _a, _b;
 
     if (noStyle && !hidden) {
       return baseChildren;
@@ -171,6 +172,18 @@ export const FormItem = props => {
 
       return subErrors;
     }, curErrors);
+    const curWarnings = (_b = meta === null || meta === void 0 ? void 0 : meta.warnings) !== null && _b !== void 0 ? _b : [];
+    const warnings = Object.keys(subMetas).reduce((subWarnings, key) => {
+      var _a, _b;
+
+      const warnings = (_b = (_a = subMetas[key]) === null || _a === void 0 ? void 0 : _a.warnings) !== null && _b !== void 0 ? _b : [];
+
+      if (warnings.length) {
+        subWarnings = [...subWarnings, ...warnings];
+      }
+
+      return subWarnings;
+    }, curWarnings);
     return React.createElement(FormItemLayout, {
       className: className,
       style: style,
@@ -183,6 +196,7 @@ export const FormItem = props => {
       hasFeedback: hasFeedback,
       htmlFor: fieldId,
       errors: errors,
+      warnings: warnings,
       onClick: onClick,
       hidden: hidden,
       layout: layout,

package/es/components/form/form.css

@@ -16,3 +16,7 @@
 .adm-form .adm-form-footer {
   padding: 20px 12px;
 }
+.adm-form-list-operation {
+  text-align: center;
+  color: #1677ff;
+}