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

package/es/components/toast/toast.d.ts

@@ -1,24 +1,17 @@
 import React, { ReactNode } from 'react';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { GetContainer } from '../../utils/render-to-container';
 export interface ToastProps {
-    /** Toast 完全关闭后的回调 */
     afterClose?: () => void;
-    /** Toast 遮罩样式 */
     maskStyle?: React.CSSProperties;
-    /** Toast 遮罩类名 */
     maskClassName?: string;
-    /** 是否允许背景点击 */
     maskClickable?: boolean;
-    /** toast 文本内容 */
     content?: ReactNode;
-    /** toast 图标 */
     icon?: 'success' | 'fail' | 'loading' | React.ReactNode;
-    /** 提示持续时间，若为 0 则不会自动关闭 */
     duration?: number;
-    /** 垂直方向显示位置，默认为 center */
     position?: 'top' | 'bottom' | 'center';
-    /** 是否显示 */
     visible?: boolean;
-    /** 轻提示弹出时的的父容器 */
-    getContainer?: HTMLElement | (() => HTMLElement);
+    getContainer?: GetContainer;
+    stopPropagation?: PropagationEvent[];
 }
 export declare const InternalToast: React.FC<ToastProps>;

package/es/components/toast/toast.js

@@ -1,12 +1,14 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { CheckOutline, CloseOutline } from 'antd-mobile-icons';
 import Loading from '../loading';
 import Mask from '../mask';
 import { mergeProps } from '../../utils/with-default-props';
+import AutoCenter from '../auto-center';
 var classPrefix = "adm-toast";
 var defaultProps = {
-  maskClickable: true
+  maskClickable: true,
+  stopPropagation: ['click']
 };
 export var InternalToast = function InternalToast(p) {
   var props = mergeProps(defaultProps, p);
@@ -19,14 +21,15 @@ export var InternalToast = function InternalToast(p) {
 
     switch (icon) {
       case 'success':
-        return /*#__PURE__*/React.createElement(CheckOutlined, null);
+        return /*#__PURE__*/React.createElement(CheckOutline, null);
 
       case 'fail':
-        return /*#__PURE__*/React.createElement(CloseOutlined, null);
+        return /*#__PURE__*/React.createElement(CloseOutline, null);
 
       case 'loading':
         return /*#__PURE__*/React.createElement(Loading, {
-          color: 'white'
+          color: 'white',
+          className: classPrefix + "-loading"
         });
 
       default:
@@ -53,9 +56,10 @@ export var InternalToast = function InternalToast(p) {
     getContainer: props.getContainer,
     afterClose: props.afterClose,
     style: Object.assign({
-      pointerEvents: maskClickable ? 'none' : 'all'
+      pointerEvents: maskClickable ? 'none' : 'auto'
     }, props.maskStyle),
-    className: classNames(classPrefix + "-mask", props.maskClassName)
+    className: classNames(classPrefix + "-mask", props.maskClassName),
+    stopPropagation: props.stopPropagation
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       top: top
@@ -63,5 +67,5 @@ export var InternalToast = function InternalToast(p) {
     className: classNames(classPrefix + "-wrap", icon ? classPrefix + "-wrap-icon" : classPrefix + "-wrap-text")
   }, iconElement && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-icon"
-  }, iconElement), content));
+  }, iconElement), /*#__PURE__*/React.createElement(AutoCenter, null, content)));
 };

package/es/components/tree-select/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './tree-select.less';
+export type { TreeSelectProps, TreeSelectOption } from './tree-select';
+export type { MultipleProps } from './multiple';
+declare const _default: import("react").FC<import("./tree-select").TreeSelectProps> & {
+    Multiple: import("react").FC<import("./multiple").MultipleProps>;
+};
+export default _default;

package/es/components/tree-select/index.js

@@ -0,0 +1,7 @@
+import "./tree-select.css";
+import { TreeSelect } from './tree-select';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Multiple } from './multiple';
+export default attachPropertiesToComponent(TreeSelect, {
+  Multiple: Multiple
+});

package/{2x/es/components/cascader → es/components/tree-select}/multiple.d.ts

@@ -1,11 +1,11 @@
-import React from 'react';
+import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
-import { CascaderOption } from '.';
+import { TreeSelectOption } from '.';
 export declare type MultipleProps = {
-    options: CascaderOption[];
+    options: TreeSelectOption[];
     defaultValue?: string[];
     value?: string[];
-    onChange?: (value: string[], nodes: CascaderOption[]) => void;
+    onChange?: (value: string[], nodes: TreeSelectOption[]) => void;
     selectAllText?: string[];
     fieldNames?: {
         label: string;
@@ -14,6 +14,6 @@ export declare type MultipleProps = {
     };
     expandKeys?: string[];
     defaultExpandKeys?: string[];
-    onExpand?: (expandedKeys: string[], nodes: CascaderOption[]) => void;
+    onExpand?: (expandedKeys: string[], nodes: TreeSelectOption[]) => void;
 } & NativeProps;
-export declare const Multiple: React.FC<MultipleProps>;
+export declare const Multiple: FC<MultipleProps>;

package/{2x/es/components/cascader → es/components/tree-select}/multiple.js

@@ -1,36 +1,41 @@
 import classNames from 'classnames';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { getTreeDeep } from '../../utils/tree';
-import { withDefaultProps } from '../../utils/with-default-props';
+import { mergeProps } from '../../utils/with-default-props';
 import Checkbox from '../checkbox';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
-var classPrefix = "adm-cascader-multiple";
-export var Multiple = withDefaultProps({
-  options: [],
-  fieldNames: {},
-  allSelectText: [],
-  defaultExpandKeys: [],
-  defaultValue: []
-})(function (props) {
+import { usePropsValue } from '../../utils/use-props-value';
+import { devWarning } from '../../utils/dev-log';
+var classPrefix = "adm-tree-select-multiple";
+export var Multiple = function Multiple(p) {
+  var props = mergeProps({
+    options: [],
+    fieldNames: {},
+    allSelectText: [],
+    defaultExpandKeys: [],
+    defaultValue: []
+  }, p);
+  useEffect(function () {
+    devWarning('TreeSelect', 'TreeSelect.Multiple has been deprecated.');
+  }, []);
   var labelName = props.fieldNames.label || 'label';
   var valueName = props.fieldNames.value || 'value';
   var childrenName = props.fieldNames.children || 'children'; // 打开的 keys
 
-  var _useNewControllableVa = useNewControllableValue({
+  var _usePropsValue = usePropsValue({
     value: props.expandKeys,
     defaultValue: props.defaultExpandKeys
   }),
-      expandKeys = _useNewControllableVa[0],
-      setExpandKeys = _useNewControllableVa[1]; // 选中的 value（聚合后）
+      expandKeys = _usePropsValue[0],
+      setExpandKeys = _usePropsValue[1]; // 选中的 value（聚合后）
 
 
-  var _useNewControllableVa2 = useNewControllableValue({
+  var _usePropsValue2 = usePropsValue({
     value: props.value,
     defaultValue: props.defaultValue
   }),
-      value = _useNewControllableVa2[0],
-      setValue = _useNewControllableVa2[1]; // 获取目标所有叶子节点 key 集合
+      value = _usePropsValue2[0],
+      setValue = _usePropsValue2[1]; // 获取目标所有叶子节点 key 集合
 
 
   var getLeafKeys = function getLeafKeys(option) {
@@ -338,4 +343,4 @@ export var Multiple = withDefaultProps({
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classPrefix
   }, renderColumns()));
-});
+};

package/es/components/tree-select/tree-select.css

@@ -0,0 +1,52 @@
+.adm-tree-select,
+.adm-tree-select-multiple {
+  display: flex;
+  height: 100%;
+  font-size: var(--adm-font-size-main);
+  background-color: var(--adm-color-white);
+}
+.adm-tree-select-column,
+.adm-tree-select-multiple-column {
+  overflow-y: auto;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+.adm-tree-select-column:first-child,
+.adm-tree-select-multiple-column:first-child {
+  background-color: #f5f5f5;
+}
+.adm-tree-select-column:nth-child(2),
+.adm-tree-select-multiple-column:nth-child(2) {
+  background-color: #fafafa;
+}
+.adm-tree-select-item,
+.adm-tree-select-multiple-item {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 6px 12px;
+  position: relative;
+}
+.adm-tree-select-item-active {
+  color: var(--adm-color-primary);
+  font-weight: bold;
+  background-color: white;
+}
+.adm-tree-select-multiple-item-expand {
+  color: var(--adm-color-primary);
+  font-weight: bold;
+  background-color: white;
+}
+.adm-tree-select-multiple-item-checkbox {
+  margin-right: 8px;
+}
+.adm-tree-select-multiple-dot {
+  position: absolute;
+  top: 50%;
+  margin-top: -3px;
+  right: 8px;
+  width: 6px;
+  height: 6px;
+  background: var(--adm-color-primary);
+  border-radius: 3px;
+}

package/es/components/tree-select/tree-select.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export interface TreeSelectOption {
+    [key: string]: any;
+}
+export declare type TreeSelectProps = {
+    options: TreeSelectOption[];
+    defaultValue?: string[];
+    value?: string[];
+    onChange?: (value: string[], extend: {
+        options: TreeSelectOption[];
+    }) => void;
+    fieldNames?: {
+        label: string;
+        value: string;
+        children: string;
+    };
+} & NativeProps;
+export declare const TreeSelect: FC<TreeSelectProps>;

package/es/components/tree-select/tree-select.js

@@ -0,0 +1,124 @@
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { getTreeDeep } from '../../utils/tree';
+import { mergeProps } from '../../utils/with-default-props';
+import { usePropsValue } from '../../utils/use-props-value';
+var classPrefix = "adm-tree-select";
+var defaultProps = {
+  options: [],
+  fieldNames: {},
+  defaultValue: []
+};
+export var TreeSelect = function TreeSelect(p) {
+  var props = mergeProps(defaultProps, p);
+  var labelName = props.fieldNames.label || 'label';
+  var valueName = props.fieldNames.value || 'value';
+  var childrenName = props.fieldNames.children || 'children';
+
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue
+  }),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
+
+  var _useMemo = useMemo(function () {
+    var deep = getTreeDeep(props.options, childrenName);
+    var optionsMap = new Map();
+    var optionsParentMap = new Map();
+
+    function traverse(current, children) {
+      children.forEach(function (item) {
+        optionsParentMap.set(item[valueName], current);
+        optionsMap.set(item[valueName], item);
+
+        if (item[childrenName]) {
+          traverse(item, item[childrenName]);
+        }
+      });
+    }
+
+    traverse(undefined, props.options);
+    return [deep, optionsMap, optionsParentMap];
+  }, [props.options]),
+      deep = _useMemo[0],
+      optionsMap = _useMemo[1],
+      optionsParentMap = _useMemo[2];
+
+  var onItemSelect = function onItemSelect(node) {
+    var _a; // 找到父级节点
+
+
+    var parentNodes = [];
+    var current = node;
+
+    while (current) {
+      parentNodes.unshift(current);
+      var next = optionsParentMap.get(current[valueName]);
+      current = next;
+    }
+
+    var values = parentNodes.map(function (i) {
+      return i[valueName];
+    });
+    setValue(values);
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, values, {
+      options: parentNodes
+    });
+  };
+
+  var renderItems = function renderItems(columnOptions, index) {
+    if (columnOptions === void 0) {
+      columnOptions = [];
+    }
+
+    return columnOptions.map(function (item) {
+      var _classNames;
+
+      var isActive = item[valueName] === value[index];
+      return /*#__PURE__*/React.createElement("div", {
+        key: item[valueName],
+        className: classNames(classPrefix + "-item", (_classNames = {}, _classNames[classPrefix + "-item-active"] = isActive, _classNames)),
+        onClick: function onClick() {
+          if (!isActive) {
+            onItemSelect(item);
+          }
+        }
+      }, item[labelName]);
+    });
+  };
+
+  var renderColumns = function renderColumns() {
+    var _a;
+
+    var columns = [];
+
+    for (var i = 0; i < deep; i++) {
+      var width = 100 / deep + "%"; // 两列的第一列宽度为 33.33，两列的第二列为 66.67%
+
+      if (deep === 2 && i === 0) {
+        width = "33.33%";
+      }
+
+      if (deep === 2 && i === 1) {
+        width = "66.67%";
+      }
+
+      var column = /*#__PURE__*/React.createElement("div", {
+        key: i,
+        className: classNames(classPrefix + "-column"),
+        style: {
+          width: width
+        }
+      }, renderItems(i === 0 ? props.options : (_a = optionsMap.get(value[i - 1])) === null || _a === void 0 ? void 0 : _a[childrenName], i));
+      columns.push(column);
+    }
+
+    return columns;
+  };
+
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix
+  }, renderColumns()));
+};

package/es/components/virtual-input/index.d.ts

@@ -0,0 +1,4 @@
+import './virtual-input.less';
+import { VirtualInput } from './virtual-input';
+export type { VirtualInputProps, VirtualInputRef } from './virtual-input';
+export default VirtualInput;

package/es/components/virtual-input/index.js

@@ -0,0 +1,3 @@
+import "./virtual-input.css";
+import { VirtualInput } from './virtual-input';
+export default VirtualInput;

package/es/components/virtual-input/virtual-input.css

@@ -0,0 +1,98 @@
+.adm-virtual-input {
+  --font-size: 17px;
+  --color: var(--adm-color-text);
+  --placeholder-color: var(--adm-color-light);
+  --disabled-color: var(--adm-color-weak);
+  --text-align: left;
+  --caret-width: var(--adm-virtual-input-caret-width, 2px);
+  --caret-color: var(--adm-virtual-input-caret-color, var(--adm-color-primary));
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  text-align: var(--text-align);
+  font-size: var(--font-size);
+  line-height: 1.5;
+  white-space: nowrap;
+  color: var(--color);
+}
+.adm-virtual-input > * {
+  vertical-align: top;
+}
+.adm-virtual-input-content {
+  flex: auto;
+  display: inline-block;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 100%;
+  overflow-y: hidden;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+.adm-virtual-input-content::-webkit-scrollbar {
+  display: none;
+}
+.adm-virtual-input-placeholder {
+  display: block;
+  position: absolute;
+  z-index: 0;
+  left: 0;
+  top: 0;
+  width: 100%;
+  overflow: hidden;
+  text-align: var(--text-align);
+  color: var(--placeholder-color);
+}
+.adm-virtual-input-caret-container {
+  display: inline-block;
+  width: var(--caret-width);
+  height: 1.3em;
+  vertical-align: top;
+  margin-right: 1px;
+}
+.adm-virtual-input-caret {
+  width: 100%;
+  height: 100%;
+  background-color: var(--caret-color);
+  position: relative;
+  top: 5%;
+}
+.adm-virtual-input:focus {
+  outline: none;
+}
+.adm-virtual-input:focus .adm-virtual-input-caret {
+  display: block;
+  animation-name: adm-caret-blink;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.adm-virtual-input-disabled {
+  color: var(--disabled-color);
+}
+@keyframes adm-caret-blink {
+  from {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 0;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.adm-virtual-input-clear {
+  flex: none;
+  margin-left: 8px;
+  color: var(--placeholder-color);
+  padding: 3px;
+  cursor: pointer;
+}
+.adm-virtual-input-clear .antd-mobile-icon {
+  display: block;
+  font-size: 14px;
+}

package/es/components/virtual-input/virtual-input.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactElement } from 'react';
+import type { InputProps } from '../input';
+import { NativeProps } from '../../utils/native-props';
+import { NumberKeyboardProps } from '../number-keyboard';
+export declare type VirtualInputProps = {
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    keyboard?: ReactElement<NumberKeyboardProps>;
+    clearable?: boolean;
+    onClear?: () => void;
+} & Pick<InputProps, 'value' | 'onChange' | 'placeholder' | 'disabled'> & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--disabled-color' | '--text-align' | '--caret-width' | '--caret-color'>;
+export declare type VirtualInputRef = {
+    focus: () => void;
+    blur: () => void;
+};
+export declare const VirtualInput: React.ForwardRefExoticComponent<{
+    onFocus?: (() => void) | undefined;
+    onBlur?: (() => void) | undefined;
+    onClick?: ((e: React.MouseEvent<HTMLDivElement>) => void) | undefined;
+    keyboard?: React.ReactElement<NumberKeyboardProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
+    clearable?: boolean | undefined;
+    onClear?: (() => void) | undefined;
+} & Pick<InputProps, "value" | "disabled" | "onChange" | "placeholder"> & NativeProps<"--font-size" | "--color" | "--placeholder-color" | "--disabled-color" | "--text-align" | "--caret-width" | "--caret-color"> & React.RefAttributes<VirtualInputRef>>;

package/es/components/virtual-input/virtual-input.js

@@ -0,0 +1,117 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import classNames from 'classnames';
+import { CloseCircleFill } from 'antd-mobile-icons';
+var classPrefix = 'adm-virtual-input';
+var defaultProps = {
+  defaultValue: ''
+};
+export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
+  var _classNames;
+
+  var props = mergeProps(defaultProps, p);
+
+  var _usePropsValue = usePropsValue(props),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
+
+  var rootRef = useRef(null);
+  var contentRef = useRef(null);
+
+  var _useState = useState(false),
+      hasFocus = _useState[0],
+      setHasFocus = _useState[1];
+
+  function scrollToEnd() {
+    var root = rootRef.current;
+    if (!root) return;
+
+    if (document.activeElement !== root) {
+      return;
+    }
+
+    var content = contentRef.current;
+    if (!content) return;
+    content.scrollTo({
+      left: content.clientWidth
+    });
+  }
+
+  useLayoutEffect(function () {
+    scrollToEnd();
+  }, [value]);
+  useEffect(function () {
+    if (hasFocus) {
+      scrollToEnd();
+    }
+  }, [hasFocus]);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var _a;
+
+        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      blur: function blur() {
+        var _a;
+
+        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    };
+  });
+
+  function onFocus() {
+    var _a;
+
+    setHasFocus(true);
+    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+  }
+
+  function onBlur() {
+    var _a;
+
+    setHasFocus(false);
+    (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+  }
+
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    ref: rootRef,
+    className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-disabled"] = props.disabled, _classNames)),
+    tabIndex: props.disabled ? undefined : 0,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onClick: props.onClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-content",
+    ref: contentRef
+  }, value, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-caret-container"
+  }, hasFocus && /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-caret"
+  }))), props.clearable && !!value && hasFocus && /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-clear",
+    onClick: function onClick() {
+      var _a;
+
+      setValue('');
+      (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, /*#__PURE__*/React.createElement(CloseCircleFill, null)), !value && /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-placeholder"
+  }, props.placeholder), props.keyboard && /*#__PURE__*/React.cloneElement(props.keyboard, {
+    onInput: function onInput(v) {
+      setValue(value + v);
+    },
+    onDelete: function onDelete() {
+      setValue(value.slice(0, -1));
+    },
+    visible: hasFocus,
+    onClose: function onClose() {
+      var _a;
+
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }
+  })));
+});

package/es/components/water-mark/index.d.ts

@@ -1,3 +1,4 @@
-import { WaterMark } from './water-mask';
-export type { WaterMarkProps } from './water-mask';
+import './water-mark.less';
+import { WaterMark } from './water-mark';
+export type { WaterMarkProps } from './water-mark';
 export default WaterMark;

package/es/components/water-mark/index.js

@@ -1,2 +1,3 @@
-import { WaterMark } from './water-mask';
+import "./water-mark.css";
+import { WaterMark } from './water-mark';
 export default WaterMark;

package/es/components/water-mark/water-mark.css

@@ -0,0 +1,14 @@
+.adm-water-mark {
+  --z-index: var(--adm-water-mark-z-index, 2000);
+  position: absolute;
+  z-index: var(--z-index);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+}
+.adm-water-mark-full-page {
+  position: fixed;
+}