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

package/2x/cjs/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/cjs/components/ellipsis/ellipsis.js

@@ -11,6 +11,8 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _nativeProps = require("../../utils/native-props");
 
+var _useResizeEffect = require("../../utils/use-resize-effect");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
@@ -18,19 +20,31 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var classPrefix = "adm-ellipsis";
 var defaultProps = {
   direction: 'end',
-  rows: 1
+  rows: 1,
+  expandText: '',
+  collapseText: ''
 };
-var Ellipsis = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (props) {
-  var originRef = (0, _react.useRef)(null);
 
-  var _useState = (0, _react.useState)(''),
+var Ellipsis = function Ellipsis(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var rootRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)({}),
       ellipsised = _useState[0],
       setEllipsised = _useState[1];
 
-  (0, _react.useLayoutEffect)(function () {
-    var origin = originRef.current;
-    if (!origin) return;
-    var originStyle = window.getComputedStyle(origin);
+  var _useState2 = (0, _react.useState)(false),
+      expanded = _useState2[0],
+      setExpanded = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      exceeded = _useState3[0],
+      setExceeded = _useState3[1];
+
+  (0, _useResizeEffect.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) {
@@ -49,28 +63,32 @@ var Ellipsis = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (p
     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) {
@@ -88,17 +106,66 @@ var Ellipsis = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (p
         }
       };
 
+      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["default"].createElement("a", {
+    onClick: function onClick() {
+      setExpanded(true);
+    }
+  }, props.expandText) : null;
+  var collapseActionElement = exceeded && props.expandText ? /*#__PURE__*/_react["default"].createElement("a", {
+    onClick: function onClick() {
+      setExpanded(false);
+    }
+  }, props.collapseText) : null;
+
+  var renderContent = function renderContent() {
+    if (!exceeded) {
+      return props.content;
+    }
+
+    if (expanded) {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.content, collapseActionElement);
+    } else {
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
+    }
+  };
+
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
-    ref: originRef,
+    ref: rootRef,
     className: classPrefix
-  }, ellipsised));
-});
+  }, renderContent()));
+};
+
 exports.Ellipsis = Ellipsis;
 
 function pxToNumber(value) {

package/2x/cjs/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/cjs/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/cjs/components/error-block/error-block.js

@@ -15,21 +15,30 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _nativeProps = require("../../utils/native-props");
 
+var _configProvider = require("../config-provider");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var classPrefix = "adm-error-block";
 var defaultProps = {
   status: 'default'
 };
-var ErrorBlock = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (props) {
+
+var ErrorBlock = function ErrorBlock(p) {
   var _classNames;
 
-  var config = _error.errorConfigRecord[props.status];
-  var des = 'description' in props ? props.description : config.description;
-  var title = 'title' in props ? props.title : config.title;
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var icon = _error.iconRecord[props.status];
+
+  var _useConfig = (0, _configProvider.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["default"].createElement("img", {
-    src: config.icon
+    src: icon
   });
 
   if (props.image) {
@@ -48,12 +57,13 @@ var ErrorBlock = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function
     className: classPrefix + "-image"
   }, imageNode), /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-description"
-  }, title && /*#__PURE__*/_react["default"].createElement("span", {
+  }, title && /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-description-title"
-  }, title), des && /*#__PURE__*/_react["default"].createElement("span", {
+  }, title), des && /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-description-subtitle"
   }, des)), props.children && /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-content"
   }, props.children)));
-});
+};
+
 exports.ErrorBlock = ErrorBlock;

package/2x/cjs/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/cjs/components/error-block/error.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.errorConfigRecord = void 0;
+exports.iconRecord = void 0;
 
 var _default = _interopRequireDefault(require("../../assets/default.svg"));
 
@@ -15,26 +15,10 @@ var _empty = _interopRequireDefault(require("../../assets/empty.svg"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var errorConfigRecord = {
-  "default": {
-    icon: _default["default"],
-    title: '页面遇到一些小问题',
-    description: '待会来试试'
-  },
-  busy: {
-    icon: _busy["default"],
-    title: '前方拥堵',
-    description: '刷新试试'
-  },
-  disconnected: {
-    icon: _disconnected["default"],
-    title: '网络有点忙',
-    description: '动动手指帮忙修复'
-  },
-  empty: {
-    icon: _empty["default"],
-    title: '没有找到你需要的东西',
-    description: '找找其他的吧'
-  }
+var iconRecord = {
+  "default": _default["default"],
+  busy: _busy["default"],
+  disconnected: _disconnected["default"],
+  empty: _empty["default"]
 };
-exports.errorConfigRecord = errorConfigRecord;
+exports.iconRecord = iconRecord;

package/2x/cjs/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/cjs/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>;

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingBubble = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _web = require("@react-spring/web");
+
+var _react2 = require("@use-gesture/react");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _nativeProps = require("../../utils/native-props");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+
+var classPrefix = "adm-floating-bubble";
+var defaultProps = {};
+
+var FloatingBubble = function FloatingBubble(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var boundaryRef = (0, _react.useRef)(null);
+  /**
+   * memoize the `to` function
+   * inside a component that renders frequently
+   * to prevent an unintended restart
+   */
+
+  var _useSpring = (0, _web.useSpring)(function () {
+    return {
+      y: 0,
+      scale: 1,
+      opacity: 1
+    };
+  }),
+      animationStyles = _useSpring[0],
+      animation = _useSpring[1];
+
+  var bind = (0, _react2.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 (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-boundary-outer"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-boundary",
+    ref: boundaryRef
+  })), /*#__PURE__*/_react["default"].createElement(_web.animated.div, Object.assign({}, bind(), {
+    style: Object.assign({}, animationStyles),
+    onClick: props.onClick,
+    className: classPrefix + "-button"
+  }), props.children)));
+};
+
+exports.FloatingBubble = FloatingBubble;

package/2x/cjs/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/cjs/components/floating-bubble/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("./floating-bubble.css");
+
+var _floatingBubble2 = require("./floating-bubble");
+
+var _default = _floatingBubble2.FloatingBubble;
+exports["default"] = _default;

package/2x/cjs/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/cjs/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>>;