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

package/cjs/components/toast/toast.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _icons = require("@ant-design/icons");
+var _antdMobileIcons = require("antd-mobile-icons");
 
 var _loading = _interopRequireDefault(require("../loading"));
 
@@ -17,6 +17,8 @@ var _mask = _interopRequireDefault(require("../mask"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
+var _autoCenter = _interopRequireDefault(require("../auto-center"));
+
 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 _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -25,7 +27,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var classPrefix = "adm-toast";
 var defaultProps = {
-  maskClickable: true
+  maskClickable: true,
+  stopPropagation: ['click']
 };
 
 var InternalToast = function InternalToast(p) {
@@ -39,14 +42,15 @@ var InternalToast = function InternalToast(p) {
 
     switch (icon) {
       case 'success':
-        return /*#__PURE__*/_react["default"].createElement(_icons.CheckOutlined, null);
+        return /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.CheckOutline, null);
 
       case 'fail':
-        return /*#__PURE__*/_react["default"].createElement(_icons.CloseOutlined, null);
+        return /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.CloseOutline, null);
 
       case 'loading':
         return /*#__PURE__*/_react["default"].createElement(_loading["default"], {
-          color: 'white'
+          color: 'white',
+          className: classPrefix + "-loading"
         });
 
       default:
@@ -73,9 +77,10 @@ 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: (0, _classnames["default"])(classPrefix + "-mask", props.maskClassName)
+    className: (0, _classnames["default"])(classPrefix + "-mask", props.maskClassName),
+    stopPropagation: props.stopPropagation
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       top: top
@@ -83,7 +88,7 @@ var InternalToast = function InternalToast(p) {
     className: (0, _classnames["default"])(classPrefix + "-wrap", icon ? classPrefix + "-wrap-icon" : classPrefix + "-wrap-text")
   }, iconElement && /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-icon"
-  }, iconElement), content));
+  }, iconElement), /*#__PURE__*/_react["default"].createElement(_autoCenter["default"], null, content)));
 };
 
 exports.InternalToast = InternalToast;

package/cjs/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/cjs/components/tree-select/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("./tree-select.css");
+
+var _treeSelect2 = require("./tree-select");
+
+var _attachPropertiesToComponent = require("../../utils/attach-properties-to-component");
+
+var _multiple = require("./multiple");
+
+var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_treeSelect2.TreeSelect, {
+  Multiple: _multiple.Multiple
+});
+
+exports["default"] = _default;

package/{es/components/cascader → cjs/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/cjs/components/{cascader → tree-select}/multiple.js

@@ -17,7 +17,9 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _checkbox = _interopRequireDefault(require("../checkbox"));
 
-var _useControllableValue = require("../../utils/use-controllable-value");
+var _usePropsValue3 = require("../../utils/use-props-value");
+
+var _devLog = require("../../utils/dev-log");
 
 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); }
 
@@ -25,32 +27,37 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var classPrefix = "adm-cascader-multiple";
-var Multiple = (0, _withDefaultProps.withDefaultProps)({
-  options: [],
-  fieldNames: {},
-  allSelectText: [],
-  defaultExpandKeys: [],
-  defaultValue: []
-})(function (props) {
+var classPrefix = "adm-tree-select-multiple";
+
+var Multiple = function Multiple(p) {
+  var props = (0, _withDefaultProps.mergeProps)({
+    options: [],
+    fieldNames: {},
+    allSelectText: [],
+    defaultExpandKeys: [],
+    defaultValue: []
+  }, p);
+  (0, _react.useEffect)(function () {
+    (0, _devLog.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 = (0, _useControllableValue.useNewControllableValue)({
+  var _usePropsValue = (0, _usePropsValue3.usePropsValue)({
     value: props.expandKeys,
     defaultValue: props.defaultExpandKeys
   }),
-      expandKeys = _useNewControllableVa[0],
-      setExpandKeys = _useNewControllableVa[1]; // 选中的 value（聚合后）
+      expandKeys = _usePropsValue[0],
+      setExpandKeys = _usePropsValue[1]; // 选中的 value（聚合后）
 
 
-  var _useNewControllableVa2 = (0, _useControllableValue.useNewControllableValue)({
+  var _usePropsValue2 = (0, _usePropsValue3.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) {
@@ -359,5 +366,6 @@ var Multiple = (0, _withDefaultProps.withDefaultProps)({
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix
   }, renderColumns()));
-});
+};
+
 exports.Multiple = Multiple;

package/cjs/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/cjs/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/cjs/components/tree-select/tree-select.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeSelect = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _tree = require("../../utils/tree");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _usePropsValue2 = require("../../utils/use-props-value");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var classPrefix = "adm-tree-select";
+var defaultProps = {
+  options: [],
+  fieldNames: {},
+  defaultValue: []
+};
+
+var TreeSelect = function TreeSelect(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var labelName = props.fieldNames.label || 'label';
+  var valueName = props.fieldNames.value || 'value';
+  var childrenName = props.fieldNames.children || 'children';
+
+  var _usePropsValue = (0, _usePropsValue2.usePropsValue)({
+    value: props.value,
+    defaultValue: props.defaultValue
+  }),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var deep = (0, _tree.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["default"].createElement("div", {
+        key: item[valueName],
+        className: (0, _classnames["default"])(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["default"].createElement("div", {
+        key: i,
+        className: (0, _classnames["default"])(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 (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix
+  }, renderColumns()));
+};
+
+exports.TreeSelect = TreeSelect;

package/cjs/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/cjs/components/virtual-input/index.js

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

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