antd-mobile 5.17.0 → 5.18.0

package/2x/es/components/toast/methods.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { InternalToast } from './toast';
+import { mergeProps } from '../../utils/with-default-props';
+import { renderImperatively } from '../../utils/render-imperatively';
+let currentHandler = null;
+let currentTimeout = null;
+const defaultProps = {
+  duration: 2000,
+  position: 'center',
+  maskClickable: true
+};
+
+const ToastInner = props => React.createElement(InternalToast, Object.assign({}, props));
+
+export function show(p) {
+  const props = mergeProps(defaultProps, typeof p === 'string' ? {
+    content: p
+  } : p);
+  const element = React.createElement(ToastInner, Object.assign({}, props, {
+    onClose: () => {
+      currentHandler = null;
+    }
+  }));
+
+  if (currentHandler) {
+    currentHandler.replace(element);
+  } else {
+    currentHandler = renderImperatively(element);
+  }
+
+  if (currentTimeout) {
+    window.clearTimeout(currentTimeout);
+  }
+
+  if (props.duration !== 0) {
+    currentTimeout = window.setTimeout(() => {
+      clear();
+    }, props.duration);
+  }
+
+  return currentHandler;
+}
+export function clear() {
+  currentHandler === null || currentHandler === void 0 ? void 0 : currentHandler.close();
+  currentHandler = null;
+}
+export function config(val) {
+  if (val.duration !== undefined) {
+    defaultProps.duration = val.duration;
+  }
+
+  if (val.position !== undefined) {
+    defaultProps.position = val.position;
+  }
+
+  if (val.maskClickable !== undefined) {
+    defaultProps.maskClickable = val.maskClickable;
+  }
+}

package/2x/es/components/toast/toast.css

@@ -0,0 +1,48 @@
+.adm-toast-mask .adm-toast-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.adm-toast-mask .adm-toast-main {
+  display: inline-block;
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: auto;
+  min-width: 192px;
+  max-width: 400px;
+  max-height: 70%;
+  overflow: auto;
+  color: white;
+  word-break: break-all;
+  background-color: rgba(0, 0, 0, 0.7);
+  border-radius: 16px;
+  pointer-events: all;
+  font-size: var(--adm-font-size-7);
+  line-height: 1.5;
+  box-sizing: border-box;
+}
+
+.adm-toast-mask .adm-toast-main-text {
+  padding: 24px;
+}
+
+.adm-toast-mask .adm-toast-main-icon {
+  padding: 70px 80px;
+}
+
+.adm-toast-mask .adm-toast-main-icon .adm-toast-icon {
+  text-align: center;
+  margin-bottom: 16px;
+  font-size: 72px;
+  line-height: 1;
+}
+
+.adm-toast-loading {
+  --size: 96px;
+  margin: 0 auto 16px;
+}

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

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import type { MaskProps } from '../mask';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { GetContainer } from '../../utils/render-to-container';
+export interface ToastProps {
+    afterClose?: () => void;
+    maskStyle?: MaskProps['style'];
+    maskClassName?: string;
+    maskClickable?: boolean;
+    content?: ReactNode;
+    icon?: 'success' | 'fail' | 'loading' | React.ReactNode;
+    duration?: number;
+    position?: 'top' | 'bottom' | 'center';
+    visible?: boolean;
+    getContainer?: GetContainer;
+    stopPropagation?: PropagationEvent[];
+}
+export declare const InternalToast: React.FC<ToastProps>;

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

@@ -0,0 +1,79 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { CheckOutline, CloseOutline } from 'antd-mobile-icons';
+import Mask from '../mask';
+import { mergeProps } from '../../utils/with-default-props';
+import AutoCenter from '../auto-center';
+import SpinLoading from '../spin-loading';
+const classPrefix = `adm-toast`;
+const defaultProps = {
+  maskClickable: true,
+  stopPropagation: ['click']
+};
+export const InternalToast = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    maskClickable,
+    content,
+    icon,
+    position
+  } = props;
+  const iconElement = useMemo(() => {
+    if (icon === null || icon === undefined) return null;
+
+    switch (icon) {
+      case 'success':
+        return React.createElement(CheckOutline, {
+          className: `${classPrefix}-icon-success`
+        });
+
+      case 'fail':
+        return React.createElement(CloseOutline, {
+          className: `${classPrefix}-icon-fail`
+        });
+
+      case 'loading':
+        return React.createElement(SpinLoading, {
+          color: 'white',
+          className: `${classPrefix}-loading`
+        });
+
+      default:
+        return icon;
+    }
+  }, [icon]);
+  const top = useMemo(() => {
+    switch (position) {
+      case 'top':
+        return '20%';
+
+      case 'bottom':
+        return '80%';
+
+      default:
+        return '50%';
+    }
+  }, [position]);
+  return React.createElement(Mask, {
+    visible: props.visible,
+    destroyOnClose: true,
+    opacity: 0,
+    disableBodyScroll: !maskClickable,
+    getContainer: props.getContainer,
+    afterClose: props.afterClose,
+    style: Object.assign({
+      pointerEvents: maskClickable ? 'none' : 'auto'
+    }, props.maskStyle),
+    className: classNames(`${classPrefix}-mask`, props.maskClassName),
+    stopPropagation: props.stopPropagation
+  }, React.createElement("div", {
+    className: classNames(`${classPrefix}-wrap`)
+  }, React.createElement("div", {
+    style: {
+      top
+    },
+    className: classNames(`${classPrefix}-main`, icon ? `${classPrefix}-main-icon` : `${classPrefix}-main-text`)
+  }, iconElement && React.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, iconElement), React.createElement(AutoCenter, null, content))));
+};

package/2x/es/components/toast/toast.patch.css

@@ -0,0 +1,13 @@
+.adm-toast-mask .adm-toast-main {
+  font-size: 30px;
+}
+
+.adm-toast-loading.adm-toast-loading {
+  width: 96px;
+  height: 96px;
+  margin: 0 auto 16px;
+}
+
+.adm-toast-loading.adm-toast-loading .adm-spin-loading-fill {
+  stroke: #ffffff;
+}

package/2x/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/2x/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
+});

package/2x/es/components/tree-select/multiple.d.ts

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

package/2x/es/components/tree-select/multiple.js

@@ -0,0 +1,307 @@
+import classNames from 'classnames';
+import React, { useEffect, useMemo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { getTreeDeep } from '../../utils/tree';
+import { mergeProps } from '../../utils/with-default-props';
+import Checkbox from '../checkbox';
+import { usePropsValue } from '../../utils/use-props-value';
+import { devWarning } from '../../utils/dev-log';
+const classPrefix = `adm-tree-select-multiple`;
+export const Multiple = p => {
+  const props = mergeProps({
+    options: [],
+    fieldNames: {},
+    allSelectText: [],
+    defaultExpandKeys: [],
+    defaultValue: []
+  }, p);
+  useEffect(() => {
+    devWarning('TreeSelect', 'TreeSelect.Multiple has been deprecated.');
+  }, []);
+  const labelName = props.fieldNames.label || 'label';
+  const valueName = props.fieldNames.value || 'value';
+  const childrenName = props.fieldNames.children || 'children'; // 打开的 keys
+
+  const [expandKeys, setExpandKeys] = usePropsValue({
+    value: props.expandKeys,
+    defaultValue: props.defaultExpandKeys
+  }); // 选中的 value（聚合后）
+
+  const [value, setValue] = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue
+  }); // 获取目标所有叶子节点 key 集合
+
+  const getLeafKeys = option => {
+    const keys = [];
+
+    const walker = op => {
+      var _a;
+
+      if (!op) {
+        return;
+      }
+
+      if ((_a = op[childrenName]) === null || _a === void 0 ? void 0 : _a.length) {
+        op[childrenName].forEach(i => walker(i));
+      } else {
+        keys.push(op[valueName]);
+      }
+    };
+
+    walker(option);
+    return keys;
+  };
+
+  const [deep, optionsMap, optionsParentMap] = useMemo(() => {
+    const deep = getTreeDeep(props.options, childrenName);
+    const optionsMap = new Map();
+    const optionsParentMap = new Map();
+
+    function traverse(current, children) {
+      children.forEach(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]); // 将聚合的 value 拆分开，获得叶子节点的 value 集合
+
+  const allSelectedLeafKeys = useMemo(() => {
+    let leafKeys = [];
+    value.forEach(v => {
+      const option = optionsMap.get(v);
+      leafKeys = leafKeys.concat(getLeafKeys(option));
+    });
+    return leafKeys;
+  }, [value, optionsMap]); // 子级有被选中的节点集合
+
+  const dotMap = useMemo(() => {
+    const map = new Map(); // 遍历 allChildrenValues, 向上递归
+
+    const walker = key => {
+      const parentOption = optionsParentMap.get(key);
+
+      if (!parentOption) {
+        return;
+      }
+
+      map.set(parentOption[valueName], true);
+      walker(parentOption[valueName]);
+    };
+
+    allSelectedLeafKeys.forEach(key => {
+      map.set(key, true);
+      walker(key);
+    });
+    return map;
+  }, [optionsParentMap, value]);
+
+  const onChange = targetKeys => {
+    var _a;
+
+    let groupKeys = [...targetKeys];
+    let unusedKeys = [];
+
+    const walker = keys => {
+      keys.forEach(key => {
+        var _a;
+
+        if (unusedKeys.includes(key)) {
+          return;
+        }
+
+        const parent = optionsParentMap.get(key);
+
+        if (!parent) {
+          return;
+        }
+
+        const childrenKeys = ((_a = parent[childrenName]) === null || _a === void 0 ? void 0 : _a.map(i => i[valueName])) || [];
+
+        if (childrenKeys.every(i => groupKeys.includes(i))) {
+          groupKeys.push(parent[valueName]);
+          unusedKeys = unusedKeys.concat(childrenKeys);
+        }
+      });
+    }; // 遍历 deep 次 groupKeys，每次往上聚合一层
+
+
+    for (let i = 0; i < deep; i++) {
+      walker(groupKeys);
+    }
+
+    groupKeys = groupKeys.filter(i => !unusedKeys.includes(i)); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+    const groupOptions = groupKeys.map(i => optionsMap.get(i));
+    setValue(groupKeys);
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, groupKeys, groupOptions);
+  };
+
+  const onItemSelect = option => {
+    var _a;
+
+    const parentNodes = [];
+    let current = option;
+
+    while (current) {
+      parentNodes.unshift(current);
+      const next = optionsParentMap.get(current[valueName]);
+      current = next;
+    }
+
+    const keys = parentNodes.map(i => i[valueName]);
+    setExpandKeys(keys);
+    (_a = props.onExpand) === null || _a === void 0 ? void 0 : _a.call(props, keys, parentNodes);
+  }; // 渲染全选节点
+
+
+  const renderSelectAllItem = (columnOptions, index) => {
+    var _a;
+
+    const text = (_a = props.selectAllText) === null || _a === void 0 ? void 0 : _a[index];
+
+    if (!text) {
+      return;
+    }
+
+    let currentLeafKeys = [];
+    columnOptions.forEach(option => {
+      currentLeafKeys = currentLeafKeys.concat(getLeafKeys(option));
+    });
+    const allSelected = currentLeafKeys.every(i => allSelectedLeafKeys.includes(i));
+    return React.createElement("div", {
+      onClick: () => {
+        if (allSelected) {
+          onChange(allSelectedLeafKeys.filter(i => !currentLeafKeys.includes(i)));
+        } else {
+          onChange(allSelectedLeafKeys.concat(currentLeafKeys));
+        }
+      },
+      className: `${classPrefix}-item`
+    }, text);
+  }; // 渲染
+
+
+  const renderSelectAllLeafItem = (columnOptions, index) => {
+    var _a;
+
+    const text = (_a = props.selectAllText) === null || _a === void 0 ? void 0 : _a[index];
+
+    if (!text) {
+      return;
+    }
+
+    const currentLeafKeys = columnOptions.map(i => i[valueName]);
+    const allSelected = currentLeafKeys.every(i => allSelectedLeafKeys.includes(i));
+    const halfSelected = allSelected ? false : currentLeafKeys.some(i => allSelectedLeafKeys.includes(i));
+    return React.createElement("div", {
+      onClick: () => {
+        if (allSelected) {
+          onChange(allSelectedLeafKeys.filter(i => !currentLeafKeys.includes(i)));
+        } else {
+          onChange(allSelectedLeafKeys.concat(currentLeafKeys));
+        }
+      },
+      className: classNames(`${classPrefix}-item`, `${classPrefix}-item-leaf`)
+    }, React.createElement(Checkbox, {
+      className: `${classPrefix}-item-checkbox`,
+      checked: allSelected,
+      indeterminate: halfSelected
+    }), text);
+  }; // 渲染节点
+
+
+  const renderItem = option => {
+    const isExpand = expandKeys.includes(option[valueName]);
+    return React.createElement("div", {
+      key: option[valueName],
+      onClick: () => {
+        if (!isExpand) {
+          onItemSelect(option);
+        }
+      },
+      className: classNames(`${classPrefix}-item`, {
+        [`${classPrefix}-item-expand`]: isExpand
+      })
+    }, option[labelName], !!dotMap.get(option[valueName]) && React.createElement("div", {
+      className: `${classPrefix}-dot`
+    }));
+  }; // 渲染叶子节点
+
+
+  const renderLeafItem = option => {
+    const isSelected = allSelectedLeafKeys.includes(option[valueName]);
+    return React.createElement("div", {
+      key: option[valueName],
+      onClick: () => {
+        if (isSelected) {
+          onChange(allSelectedLeafKeys.filter(val => val !== option[valueName]));
+        } else {
+          onChange([...allSelectedLeafKeys, option[valueName]]);
+        }
+      },
+      className: classNames(`${classPrefix}-item`, `${classPrefix}-item-leaf`)
+    }, React.createElement(Checkbox, {
+      className: `${classPrefix}-item-checkbox`,
+      checked: isSelected
+    }), option[labelName]);
+  };
+
+  const renderItems = (columnOptions = [], index) => {
+    if (columnOptions.length === 0) {
+      return;
+    }
+
+    const isLeaf = deep === index + 1;
+
+    if (isLeaf) {
+      return React.createElement(React.Fragment, null, renderSelectAllLeafItem(columnOptions, index), columnOptions.map(option => {
+        return renderLeafItem(option);
+      }));
+    }
+
+    return React.createElement(React.Fragment, null, renderSelectAllItem(columnOptions, index), columnOptions.map(option => {
+      return renderItem(option);
+    }));
+  };
+
+  const renderColumns = () => {
+    var _a;
+
+    const columns = [];
+
+    for (let i = 0; i < deep; i++) {
+      let width = `${100 / deep}%`; // 两列的第一列宽度为 33.33，两列的第二列为 66.67%
+
+      if (deep === 2 && i === 0) {
+        width = `33.33%`;
+      }
+
+      if (deep === 2 && i === 1) {
+        width = `66.67%`;
+      }
+
+      const column = React.createElement("div", {
+        key: i,
+        className: classNames(`${classPrefix}-column`),
+        style: {
+          width
+        }
+      }, renderItems(i === 0 ? props.options : (_a = optionsMap.get(expandKeys[i - 1])) === null || _a === void 0 ? void 0 : _a[childrenName], i));
+      columns.push(column);
+    }
+
+    return columns;
+  };
+
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, renderColumns()));
+};

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

@@ -0,0 +1,61 @@
+.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: var(--adm-color-box);
+}
+
+.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: 100px;
+  box-sizing: border-box;
+  padding: 12px 24px;
+  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: 16px;
+}
+
+.adm-tree-select-multiple-dot {
+  position: absolute;
+  top: 50%;
+  margin-top: -6px;
+  right: 16px;
+  width: 12px;
+  height: 12px;
+  background: var(--adm-color-primary);
+  border-radius: 6px;
+}

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