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

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

@@ -1,24 +1,34 @@
-import { useClickAway, useControllableValue } from 'ahooks';
+import { useClickAway } from 'ahooks';
 import classNames from 'classnames';
-import React, { cloneElement, useEffect, useRef, useState } from 'react';
+import React, { cloneElement, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import Popup from '../popup';
-import Item from './item';
+import { ItemChildrenWrap } from './item';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { usePropsValue } from '../../utils/use-props-value';
 var classPrefix = "adm-dropdown";
-
-var Dropdown = function Dropdown(props) {
+var defaultProps = {
+  defaultActiveKey: null,
+  closeOnMaskClick: true
+};
+var Dropdown = /*#__PURE__*/forwardRef(function (p, ref) {
   var _classNames;
 
-  var _useControllableValue = useControllableValue(props, {
-    valuePropName: 'activeKey'
+  var props = mergeProps(defaultProps, p);
+
+  var _usePropsValue = usePropsValue({
+    value: props.activeKey,
+    defaultValue: props.defaultActiveKey,
+    onChange: props.onChange
   }),
-      value = _useControllableValue[0],
-      onChange = _useControllableValue[1];
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var navRef = useRef(null);
   var contentRef = useRef(null); // 点击外部区域，关闭
 
   useClickAway(function () {
-    onChange(undefined);
+    setValue(null);
   }, [navRef, contentRef]); // 计算 navs 的 top 值
 
   var _useState = useState(),
@@ -27,21 +37,25 @@ var Dropdown = function Dropdown(props) {
 
   var containerRef = useRef(null);
   useEffect(function () {
+    var container = containerRef.current;
+    if (!container) return;
+
     if (value) {
-      var rect = containerRef.current.getBoundingClientRect();
+      var rect = container.getBoundingClientRect();
       setTop(rect.bottom);
     }
   }, [value]);
 
   var changeActive = function changeActive(key) {
     if (value === key) {
-      onChange(undefined);
+      setValue(null);
     } else {
-      onChange(key);
+      setValue(key);
     }
   };
 
-  var contents = {};
+  var popupForceRender = false;
+  var items = [];
   var navs = React.Children.map(props.children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       var childProps = Object.assign(Object.assign({}, child.props), {
@@ -50,15 +64,22 @@ var Dropdown = function Dropdown(props) {
         },
         active: child.key === value
       });
-      contents[child.key] = child.props.children;
+      items.push(child);
+      if (child.props.forceRender) popupForceRender = true;
       return /*#__PURE__*/cloneElement(child, childProps);
     } else {
       return child;
     }
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, props.className, (_classNames = {}, _classNames[classPrefix + "-open"] = !!value, _classNames)),
-    style: props.style,
+  useImperativeHandle(ref, function () {
+    return {
+      close: function close() {
+        setValue(null);
+      }
+    };
+  }, [setValue]);
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-open"] = !!value, _classNames)),
     ref: containerRef
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-nav",
@@ -72,25 +93,20 @@ var Dropdown = function Dropdown(props) {
     style: {
       top: top
     },
-    forceRender: props.forceRender
+    forceRender: popupForceRender,
+    onMaskClick: props.closeOnMaskClick ? function () {
+      changeActive(null);
+    } : undefined
   }, /*#__PURE__*/React.createElement("div", {
     ref: contentRef
-  }, Object.keys(contents).map(function (key) {
-    var _classNames2;
-
-    var isActive = key === value;
-    var cls = classNames(classPrefix + "-content", (_classNames2 = {}, _classNames2[classPrefix + "-content-hidden"] = !isActive, _classNames2));
-
-    if (!props.forceRender && !isActive) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: cls,
-      key: key
-    }, contents[key]);
-  }))));
-};
-
-Dropdown.Item = Item;
+  }, items.map(function (item) {
+    var isActive = item.key === value;
+    return /*#__PURE__*/React.createElement(ItemChildrenWrap, {
+      key: item.key,
+      active: isActive,
+      forceRender: item.props.forceRender,
+      destroyOnClose: item.props.destroyOnClose
+    }, item.props.children);
+  })))));
+});
 export default Dropdown;

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

@@ -1,5 +1,15 @@
+/// <reference types="react" />
 import './dropdown.less';
-import Dropdown from './dropdown';
-export type { DropdownProps } from './dropdown';
+export type { DropdownProps, DropdownRef } from './dropdown';
 export type { DropdownItemProps } from './item';
-export default Dropdown;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    activeKey?: string | null | undefined;
+    defaultActiveKey?: string | null | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    onChange?: ((key: string | null) => void) | undefined;
+} & import("../../utils/native-props").NativeProps<never> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("./dropdown").DropdownRef>> & {
+    Item: import("react").FC<import("./item").DropdownItemProps>;
+};
+export default _default;

package/2x/es/components/dropdown/index.js

@@ -1,3 +1,7 @@
 import "./dropdown.css";
 import Dropdown from './dropdown';
-export default Dropdown;
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import Item from './item';
+export default attachPropertiesToComponent(Dropdown, {
+  Item: Item
+});

package/2x/es/components/dropdown/item.d.ts

@@ -1,12 +1,17 @@
 import React, { FC } from 'react';
-export interface DropdownItemProps {
+import { NativeProps } from '../../utils/native-props';
+export declare type DropdownItemProps = {
     key: string;
     title: React.ReactNode;
     active?: boolean;
     highlight?: boolean;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    className?: string;
-    style?: React.CSSProperties;
-}
+} & NativeProps;
 declare const Item: FC<DropdownItemProps>;
 export default Item;
+declare type DropdownItemChildrenWrapProps = {
+    onClick?: () => void;
+} & Pick<DropdownItemProps, 'active' | 'forceRender' | 'destroyOnClose'>;
+export declare const ItemChildrenWrap: FC<DropdownItemChildrenWrapProps>;

package/2x/es/components/dropdown/item.js

@@ -1,18 +1,31 @@
 import classNames from 'classnames';
 import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { useShouldRender } from '../../utils/use-should-render';
 var classPrefix = "adm-dropdown-item";
 
 var Item = function Item(props) {
   var _classNames;
 
-  var cls = classNames(classPrefix, props.className, (_classNames = {}, _classNames[classPrefix + "-active"] = props.active, _classNames[classPrefix + "-highlight"] = props.highlight, _classNames));
-  return /*#__PURE__*/React.createElement("div", {
+  var cls = classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = props.active, _classNames[classPrefix + "-highlight"] = props.highlight, _classNames));
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: cls,
-    style: props.style,
     onClick: props.onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-title"
-  }, /*#__PURE__*/React.createElement("span", null, props.title)));
+  }, /*#__PURE__*/React.createElement("span", null, props.title))));
 };
 
-export default Item;
+export default Item;
+export var ItemChildrenWrap = function ItemChildrenWrap(props) {
+  var _classNames2;
+
+  var _props$active = props.active,
+      active = _props$active === void 0 ? false : _props$active;
+  var shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
+  var cls = classNames(classPrefix + "-content", (_classNames2 = {}, _classNames2[classPrefix + "-content-hidden"] = !active, _classNames2));
+  return shouldRender ? /*#__PURE__*/React.createElement("div", {
+    className: cls,
+    onClick: props.onClick
+  }, props.children) : null;
+};

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

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

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

@@ -1,22 +1,34 @@
-import React, { useRef, useState, useLayoutEffect } from 'react';
-import { withDefaultProps } from '../../utils/with-default-props';
+import React, { useRef, useState } from 'react';
+import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
+import { useResizeEffect } from '../../utils/use-resize-effect';
 var classPrefix = "adm-ellipsis";
 var defaultProps = {
   direction: 'end',
-  rows: 1
+  rows: 1,
+  expandText: '',
+  collapseText: ''
 };
-export var Ellipsis = withDefaultProps(defaultProps)(function (props) {
-  var originRef = useRef(null);
+export var Ellipsis = function Ellipsis(p) {
+  var props = mergeProps(defaultProps, p);
+  var rootRef = useRef(null);
 
-  var _useState = useState(''),
+  var _useState = useState({}),
       ellipsised = _useState[0],
       setEllipsised = _useState[1];
 
-  useLayoutEffect(function () {
-    var origin = originRef.current;
-    if (!origin) return;
-    var originStyle = window.getComputedStyle(origin);
+  var _useState2 = useState(false),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var _useState3 = useState(false),
+      exceeded = _useState3[0],
+      setExceeded = _useState3[1];
+
+  useResizeEffect(function () {
+    var root = rootRef.current;
+    if (!root) return;
+    var originStyle = window.getComputedStyle(root);
     var container = document.createElement('div');
     var styleNames = Array.prototype.slice.apply(originStyle);
     styleNames.forEach(function (name) {
@@ -35,28 +47,32 @@ export var Ellipsis = withDefaultProps(defaultProps)(function (props) {
     container.style.webkitBoxOrient = 'unset';
     container.style.display = 'block';
     var lineHeight = pxToNumber(originStyle.lineHeight);
-    var maxHeight = Math.floor(lineHeight) * props.rows + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom);
+    var maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
     container.innerText = props.content;
     document.body.appendChild(container);
 
     if (container.offsetHeight <= maxHeight) {
-      setEllipsised(props.content);
+      setExceeded(false);
     } else {
       var check = function check(left, right) {
         if (right - left <= 1) {
           if (props.direction === 'end') {
-            return props.content.slice(0, left) + '...';
+            return {
+              leading: props.content.slice(0, left) + '...'
+            };
           } else {
-            return '...' + props.content.slice(right, end);
+            return {
+              tailing: '...' + props.content.slice(right, end)
+            };
           }
         }
 
         var middle = Math.round((left + right) / 2);
 
         if (props.direction === 'end') {
-          container.innerText = props.content.slice(0, middle) + '...';
+          container.innerText = props.content.slice(0, middle) + '...' + actionText;
         } else {
-          container.innerText = '...' + props.content.slice(middle, end);
+          container.innerText = actionText + '...' + props.content.slice(middle, end);
         }
 
         if (container.offsetHeight <= maxHeight) {
@@ -74,17 +90,65 @@ export var Ellipsis = withDefaultProps(defaultProps)(function (props) {
         }
       };
 
+      var checkMiddle = function checkMiddle(leftPart, rightPart) {
+        if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
+          return {
+            leading: props.content.slice(0, leftPart[0]) + '...',
+            tailing: '...' + props.content.slice(rightPart[1], end)
+          };
+        }
+
+        var leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
+        var rightPartMiddle = Math.floor((rightPart[0] + rightPart[1]) / 2);
+        container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
+
+        if (container.offsetHeight <= maxHeight) {
+          return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
+        } else {
+          return checkMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
+        }
+      };
+
+      setExceeded(true);
       var end = props.content.length;
-      setEllipsised(check(0, props.content.length));
+      var actionText = expanded ? props.collapseText : props.expandText;
+      var middle = Math.floor((0 + end) / 2);
+
+      var _ellipsised = props.direction === 'middle' ? checkMiddle([0, middle], [middle, end]) : check(0, end);
+
+      setEllipsised(_ellipsised);
     }
 
     document.body.removeChild(container);
-  }, [props.content, props.rows, props.direction]);
+  }, rootRef);
+  var expandActionElement = exceeded && props.expandText ? /*#__PURE__*/React.createElement("a", {
+    onClick: function onClick() {
+      setExpanded(true);
+    }
+  }, props.expandText) : null;
+  var collapseActionElement = exceeded && props.expandText ? /*#__PURE__*/React.createElement("a", {
+    onClick: function onClick() {
+      setExpanded(false);
+    }
+  }, props.collapseText) : null;
+
+  var renderContent = function renderContent() {
+    if (!exceeded) {
+      return props.content;
+    }
+
+    if (expanded) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, props.content, collapseActionElement);
+    } else {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
+    }
+  };
+
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    ref: originRef,
+    ref: rootRef,
     className: classPrefix
-  }, ellipsised));
-});
+  }, renderContent()));
+};
 
 function pxToNumber(value) {
   if (!value) return 0;

package/2x/es/components/error-block/error-block.css

@@ -1,21 +1,17 @@
 .adm-error-block {
   --color: var(--adm-color-text);
-  position: relative;
-  top: 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  --image-height: var(--adm-error-block-image-height, 200px);
+  --image-height-full-page: var(--adm-error-block-image-height-full-page, 400px);
+  --image-width: var(--adm-error-block-image-width, auto);
+  --image-width-full-page: var(--adm-error-block-image-width-full-page, auto);
   box-sizing: border-box;
+  text-align: center;
 }
 
 .adm-error-block-image {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 200px;
-  margin-bottom: 40px;
-  overflow: hidden;
+  height: var(--image-height);
+  width: var(--image-width);
+  max-width: 100%;
 }
 
 .adm-error-block-image img {
@@ -23,13 +19,10 @@
 }
 
 .adm-error-block-description {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
   font-size: 24px;
   color: #999;
   line-height: 1.4;
+  margin-top: 24px;
 }
 
 .adm-error-block-description-title {
@@ -41,18 +34,20 @@
 }
 
 .adm-error-block-content {
-  margin-top: 40px;
+  margin-top: 24px;
 }
 
 .adm-error-block-full-page {
-  top: 232px;
+  padding-top: calc(50vh - var(--image-height-full-page));
 }
 
 .adm-error-block-full-page .adm-error-block-image {
-  height: 400px;
+  height: var(--image-height-full-page);
+  width: var(--image-width-full-page);
 }
 
 .adm-error-block-full-page .adm-error-block-description {
+  margin-top: 40px;
   font-size: 26px;
 }
 

package/2x/es/components/error-block/error-block.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, ReactElement } from 'react';
+import { FC, ReactElement, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ErrorBlockProps = {
     status?: 'default' | 'disconnected' | 'empty' | 'busy';
@@ -6,5 +6,5 @@ export declare type ErrorBlockProps = {
     image?: string | ReactElement;
     description?: ReactNode;
     fullPage?: boolean;
-} & NativeProps;
-export declare const ErrorBlock: React.FC<ErrorBlockProps>;
+} & NativeProps<'--image-height' | '--image-height-full-page'>;
+export declare const ErrorBlock: FC<ErrorBlockProps>;

package/2x/es/components/error-block/error-block.js

@@ -1,20 +1,27 @@
 import React from 'react';
 import classNames from 'classnames';
-import { errorConfigRecord } from './error';
-import { withDefaultProps } from '../../utils/with-default-props';
+import { iconRecord } from './error';
+import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
+import { useConfig } from '../config-provider';
 var classPrefix = "adm-error-block";
 var defaultProps = {
   status: 'default'
 };
-export var ErrorBlock = withDefaultProps(defaultProps)(function (props) {
+export var ErrorBlock = function ErrorBlock(p) {
   var _classNames;
 
-  var config = errorConfigRecord[props.status];
-  var des = 'description' in props ? props.description : config.description;
-  var title = 'title' in props ? props.title : config.title;
+  var props = mergeProps(defaultProps, p);
+  var icon = iconRecord[props.status];
+
+  var _useConfig = useConfig(),
+      locale = _useConfig.locale;
+
+  var contentPack = locale.ErrorBlock[props.status];
+  var des = 'description' in props ? props.description : contentPack.description;
+  var title = 'title' in props ? props.title : contentPack.title;
   var imageNode = /*#__PURE__*/React.createElement("img", {
-    src: config.icon
+    src: icon
   });
 
   if (props.image) {
@@ -33,11 +40,11 @@ export var ErrorBlock = withDefaultProps(defaultProps)(function (props) {
     className: classPrefix + "-image"
   }, imageNode), /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-description"
-  }, title && /*#__PURE__*/React.createElement("span", {
+  }, title && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-description-title"
-  }, title), des && /*#__PURE__*/React.createElement("span", {
+  }, title), des && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-description-subtitle"
   }, des)), props.children && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-content"
   }, props.children)));
-});
+};

package/2x/es/components/error-block/error.d.ts

@@ -1,7 +1 @@
-interface ErrorConfig {
-    icon: string;
-    title: string;
-    description?: string;
-}
-export declare const errorConfigRecord: Record<'default' | 'disconnected' | 'empty' | 'busy', ErrorConfig>;
-export {};
+export declare const iconRecord: Record<'default' | 'disconnected' | 'empty' | 'busy', string>;

package/2x/es/components/error-block/error.js

@@ -2,25 +2,9 @@ import DefaultErrorIcon from '../../assets/default.svg';
 import Busy from '../../assets/busy.svg';
 import DisconnectedIcon from '../../assets/disconnected.svg';
 import EmptyErrorIcon from '../../assets/empty.svg';
-export var errorConfigRecord = {
-  "default": {
-    icon: DefaultErrorIcon,
-    title: '页面遇到一些小问题',
-    description: '待会来试试'
-  },
-  busy: {
-    icon: Busy,
-    title: '前方拥堵',
-    description: '刷新试试'
-  },
-  disconnected: {
-    icon: DisconnectedIcon,
-    title: '网络有点忙',
-    description: '动动手指帮忙修复'
-  },
-  empty: {
-    icon: EmptyErrorIcon,
-    title: '没有找到你需要的东西',
-    description: '找找其他的吧'
-  }
+export var iconRecord = {
+  "default": DefaultErrorIcon,
+  busy: Busy,
+  disconnected: DisconnectedIcon,
+  empty: EmptyErrorIcon
 };

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

@@ -0,0 +1,49 @@
+.adm-floating-bubble {
+  --initial-position-left: var(--initial-position-left);
+  --initial-position-right: var(--initial-position-right);
+  --initial-position-top: var(--initial-position-top);
+  --initial-position-bottom: var(--initial-position-bottom);
+  --z-index: 1;
+  --edge-distance: 0;
+  --size: 96px;
+  --border-radius: 50%;
+}
+
+.adm-floating-bubble-boundary-outer {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  padding: var(--edge-distance);
+  pointer-events: none;
+}
+
+.adm-floating-bubble-boundary {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.adm-floating-bubble-button {
+  position: fixed;
+  top: var(--initial-position-top);
+  bottom: var(--initial-position-bottom);
+  left: var(--initial-position-left);
+  right: var(--initial-position-right);
+  box-sizing: border-box;
+  width: var(--size);
+  height: var(--size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+  transition: opacity ease 0.15s;
+  user-select: none;
+  touch-action: none;
+  background: var(--adm-color-primary);
+  color: var(--adm-color-white);
+  border-radius: var(--border-radius);
+  z-index: var(--z-index);
+}

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

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type FloatingBubbleProps = {
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+} & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius'>;
+export declare const FloatingBubble: FC<FloatingBubbleProps>;