antd-mobile 5.17.0 → 5.18.0

package/2x/cjs/components/picker/picker.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Picker = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _popup = _interopRequireDefault(require("../popup"));
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _nativeProps = require("../../utils/native-props");
+
+var _usePropsValue = require("../../utils/use-props-value");
+
+var _pickerView = _interopRequireDefault(require("../picker-view"));
+
+var _columnsExtend = require("../picker-view/columns-extend");
+
+var _configProvider = require("../config-provider");
+
+var _ahooks = require("ahooks");
+
+var _safeArea = _interopRequireDefault(require("../safe-area"));
+
+var _pickerUtils = require("./picker-utils");
+
+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 (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; }
+
+const classPrefix = `adm-picker`;
+const defaultProps = {
+  defaultValue: [],
+  closeOnMaskClick: true,
+  renderLabel: _pickerUtils.defaultRenderLabel,
+  destroyOnClose: false,
+  forceRender: false
+};
+const Picker = (0, _react.memo)((0, _react.forwardRef)((p, ref) => {
+  var _a;
+
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, {
+    confirmText: locale.common.confirm,
+    cancelText: locale.common.cancel
+  }, p);
+  const [visible, setVisible] = (0, _usePropsValue.usePropsValue)({
+    value: props.visible,
+    defaultValue: false,
+    onChange: v => {
+      var _a;
+
+      if (v === false) {
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+  });
+  const actions = {
+    toggle: () => {
+      setVisible(v => !v);
+    },
+    open: () => {
+      setVisible(true);
+    },
+    close: () => {
+      setVisible(false);
+    }
+  };
+  (0, _react.useImperativeHandle)(ref, () => actions);
+  const [value, setValue] = (0, _usePropsValue.usePropsValue)(Object.assign(Object.assign({}, props), {
+    onChange: val => {
+      var _a;
+
+      const extend = (0, _columnsExtend.generateColumnsExtend)(props.columns, val);
+      (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+    }
+  }));
+  const extend = (0, _columnsExtend.useColumnsExtend)(props.columns, value);
+  const [innerValue, setInnerValue] = (0, _react.useState)(value);
+  (0, _react.useEffect)(() => {
+    if (innerValue !== value) {
+      setInnerValue(value);
+    }
+  }, [visible]);
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  const onChange = (0, _ahooks.useMemoizedFn)((val, ext) => {
+    var _a;
+
+    setInnerValue(val);
+
+    if (visible) {
+      (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
+    }
+  });
+  const pickerElement = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-header`
+  }, _react.default.createElement("a", {
+    role: 'button',
+    className: `${classPrefix}-header-button`,
+    onClick: () => {
+      var _a;
+
+      (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    }
+  }, props.cancelText), _react.default.createElement("div", {
+    className: `${classPrefix}-header-title`
+  }, props.title), _react.default.createElement("a", {
+    role: 'button',
+    className: (0, _classnames.default)(`${classPrefix}-header-button`, props.loading && `${classPrefix}-header-button-disabled`),
+    onClick: () => {
+      if (props.loading) return;
+      setValue(innerValue, true);
+      setVisible(false);
+    },
+    "aria-disabled": props.loading
+  }, props.confirmText)), _react.default.createElement("div", {
+    className: `${classPrefix}-body`
+  }, _react.default.createElement(_pickerView.default, {
+    loading: props.loading,
+    loadingContent: props.loadingContent,
+    columns: props.columns,
+    renderLabel: props.renderLabel,
+    value: innerValue,
+    mouseWheel: props.mouseWheel,
+    onChange: onChange
+  }))));
+
+  const popupElement = _react.default.createElement(_popup.default, {
+    style: props.popupStyle,
+    className: (0, _classnames.default)(`${classPrefix}-popup`, props.popupClassName),
+    visible: visible,
+    position: 'bottom',
+    onMaskClick: () => {
+      var _a;
+
+      if (!props.closeOnMaskClick) return;
+      (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    },
+    getContainer: props.getContainer,
+    destroyOnClose: props.destroyOnClose,
+    afterShow: props.afterShow,
+    afterClose: props.afterClose,
+    onClick: props.onClick,
+    forceRender: props.forceRender,
+    stopPropagation: props.stopPropagation
+  }, pickerElement, _react.default.createElement(_safeArea.default, {
+    position: 'bottom'
+  }));
+
+  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, extend.items, actions));
+}));
+exports.Picker = Picker;
+Picker.displayName = 'Picker';

package/2x/cjs/components/picker/prompt.d.ts

@@ -0,0 +1,2 @@
+import type { PickerProps, PickerValue } from './index';
+export declare function prompt(props: Omit<PickerProps, 'value' | 'visible' | 'children'>): Promise<PickerValue[] | null>;

package/2x/cjs/components/picker/prompt.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.prompt = prompt;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _renderToBody = require("../../utils/render-to-body");
+
+var _picker = require("./picker");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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 prompt(props) {
+  return new Promise(resolve => {
+    const Wrapper = () => {
+      const [visible, setVisible] = (0, _react.useState)(false);
+      (0, _react.useEffect)(() => {
+        setVisible(true);
+      }, []);
+      return _react.default.createElement(_picker.Picker, Object.assign({}, props, {
+        visible: visible,
+        onConfirm: (val, extend) => {
+          var _a;
+
+          (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+          resolve(val);
+        },
+        onClose: () => {
+          var _a;
+
+          (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          setVisible(false);
+          resolve(null);
+        },
+        afterClose: () => {
+          var _a;
+
+          (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          unmount();
+        }
+      }));
+    };
+
+    const unmount = (0, _renderToBody.renderToBody)(_react.default.createElement(Wrapper, null));
+  });
+}

package/2x/cjs/components/picker-view/columns-extend.d.ts

@@ -0,0 +1,3 @@
+import type { PickerViewProps, PickerValue, PickerValueExtend } from './picker-view';
+export declare function generateColumnsExtend(rawColumns: PickerViewProps['columns'], val: PickerValue[]): PickerValueExtend;
+export declare function useColumnsExtend(rawColumns: PickerViewProps['columns'], value: PickerValue[]): PickerValueExtend;

package/2x/cjs/components/picker-view/columns-extend.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateColumnsExtend = generateColumnsExtend;
+exports.useColumnsExtend = useColumnsExtend;
+
+var _react = require("react");
+
+var _withCache = require("../../utils/with-cache");
+
+function generateColumnsExtend(rawColumns, val) {
+  const columns = (0, _withCache.withCache)(() => {
+    const c = typeof rawColumns === 'function' ? rawColumns(val) : rawColumns;
+    return c.map(column => column.map(item => typeof item === 'string' ? {
+      label: item,
+      value: item
+    } : item));
+  });
+  const items = (0, _withCache.withCache)(() => {
+    return val.map((v, index) => {
+      var _a;
+
+      const column = columns()[index];
+      if (!column) return null;
+      return (_a = column.find(item => item.value === v)) !== null && _a !== void 0 ? _a : null;
+    });
+  });
+  const extend = {
+    get columns() {
+      return columns();
+    },
+
+    get items() {
+      return items();
+    }
+
+  };
+  return extend;
+}
+
+function useColumnsExtend(rawColumns, value) {
+  return (0, _react.useMemo)(() => generateColumnsExtend(rawColumns, value), [rawColumns, value]);
+}

package/2x/cjs/components/picker-view/index.d.ts

@@ -0,0 +1,4 @@
+import { PickerView } from './picker-view';
+import './picker-view.less';
+export type { PickerViewProps, PickerValue, PickerColumnItem, PickerColumn, PickerValueExtend, } from './picker-view';
+export default PickerView;

package/2x/cjs/components/picker-view/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _pickerView = require("./picker-view");
+
+require("./picker-view.css");
+
+var _default = _pickerView.PickerView;
+exports.default = _default;

package/2x/cjs/components/picker-view/picker-view.css

@@ -0,0 +1,136 @@
+.adm-picker-view {
+  --height: 480px;
+  --item-height: 68px;
+  --item-font-size: var(--adm-font-size-8);
+  height: var(--height);
+  width: 100%;
+  display: flex;
+  position: relative;
+  overflow: hidden;
+  background: var(--adm-color-background);
+}
+
+.adm-picker-view-column {
+  height: 100%;
+  flex: 1;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: none;
+  position: relative;
+  z-index: 0;
+}
+
+.adm-picker-view-column-wheel {
+  width: 100%;
+  cursor: -webkit-grab;
+  cursor: grab;
+  position: absolute;
+  top: calc(50% - var(--item-height) / 2);
+  left: 0;
+}
+
+.adm-picker-view-column-wheel::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  top: -100vh;
+}
+
+.adm-picker-view-column-wheel::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  bottom: -100vh;
+}
+
+.adm-picker-view-column-item {
+  font-size: var(--item-font-size);
+  padding: 0 12px;
+  height: var(--item-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.adm-picker-view-column-item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.adm-picker-view-column-accessible {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 0;
+  padding-bottom: 2px;
+}
+
+.adm-picker-view-column-accessible > * {
+  flex: 1;
+  text-overflow: ellipsis;
+}
+
+.adm-picker-view-column-accessible-current {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+.adm-picker-view-column-accessible-button {
+  width: 100%;
+  height: 100%;
+}
+
+.adm-picker-view-mask {
+  position: absolute;
+  z-index: 10000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+
+.adm-picker-view-mask-top,
+.adm-picker-view-mask-bottom {
+  flex: auto;
+}
+
+.adm-picker-view-mask-middle {
+  height: var(--item-height);
+  box-sizing: border-box;
+  flex: none;
+  border-top: solid 2px var(--adm-color-border);
+  border-bottom: solid 2px var(--adm-color-border);
+}
+
+.adm-picker-view-mask-top {
+  background: var(--adm-color-background);
+  -webkit-mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+  mask: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+}
+
+.adm-picker-view-mask-bottom {
+  background: var(--adm-color-background);
+  -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+  mask: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 50%, #000000 100%);
+}
+
+.adm-picker-view-loading-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/2x/cjs/components/picker-view/picker-view.d.ts

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PickerProps } from '../picker';
+export declare type PickerValue = string | null;
+export declare type PickerValueExtend = {
+    columns: PickerColumnItem[][];
+    items: (PickerColumnItem | null)[];
+};
+export declare type PickerColumnItem = {
+    label: ReactNode;
+    value: string;
+    key?: string | number;
+};
+export declare type PickerColumn = (string | PickerColumnItem)[];
+export declare type PickerViewProps = {
+    columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[]);
+    value?: PickerValue[];
+    defaultValue?: PickerValue[];
+    mouseWheel?: boolean;
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
+} & Pick<PickerProps, 'renderLabel'> & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
+export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

package/2x/cjs/components/picker-view/picker-view.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PickerView = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _wheel = require("./wheel");
+
+var _columnsExtend = require("./columns-extend");
+
+var _nativeProps = require("../../utils/native-props");
+
+var _ahooks = require("ahooks");
+
+var _pickerUtils = require("../picker/picker-utils");
+
+var _spinLoading = _interopRequireDefault(require("../spin-loading"));
+
+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 (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; }
+
+const classPrefix = `adm-picker-view`;
+const defaultProps = {
+  defaultValue: [],
+  renderLabel: _pickerUtils.defaultRenderLabel,
+  mouseWheel: false,
+  loadingContent: _react.default.createElement("div", {
+    className: `${classPrefix}-loading-content`
+  }, _react.default.createElement(_spinLoading.default, null))
+};
+const PickerView = (0, _react.memo)(p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [innerValue, setInnerValue] = (0, _react.useState)(props.value === undefined ? props.defaultValue : props.value); // Sync `value` to `innerValue`
+
+  (0, _react.useEffect)(() => {
+    if (props.value === undefined) return; // Uncontrolled mode
+
+    if (props.value === innerValue) return;
+    setInnerValue(props.value);
+  }, [props.value]);
+  (0, _react.useEffect)(() => {
+    if (props.value === innerValue) return;
+    const timeout = window.setTimeout(() => {
+      if (props.value !== undefined && props.value !== innerValue) {
+        setInnerValue(props.value);
+      }
+    }, 1000);
+    return () => {
+      window.clearTimeout(timeout);
+    };
+  }, [props.value, innerValue]);
+  const extend = (0, _columnsExtend.useColumnsExtend)(props.columns, innerValue);
+  const columns = extend.columns;
+  (0, _ahooks.useDebounceEffect)(() => {
+    var _a;
+
+    if (props.value === innerValue) return;
+    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerValue, extend);
+  }, [innerValue], {
+    wait: 0,
+    leading: false,
+    trailing: true
+  });
+  const handleSelect = (0, _react.useCallback)((val, index) => {
+    setInnerValue(prev => {
+      const next = [...prev];
+      next[index] = val;
+      return next;
+    });
+  }, []);
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: `${classPrefix}`
+  }, props.loading ? props.loadingContent : _react.default.createElement(_react.default.Fragment, null, columns.map((column, index) => _react.default.createElement(_wheel.Wheel, {
+    key: index,
+    index: index,
+    column: column,
+    value: innerValue[index],
+    onSelect: handleSelect,
+    renderLabel: props.renderLabel,
+    mouseWheel: props.mouseWheel
+  })), _react.default.createElement("div", {
+    className: `${classPrefix}-mask`
+  }, _react.default.createElement("div", {
+    className: `${classPrefix}-mask-top`
+  }), _react.default.createElement("div", {
+    className: `${classPrefix}-mask-middle`
+  }), _react.default.createElement("div", {
+    className: `${classPrefix}-mask-bottom`
+  })))));
+});
+exports.PickerView = PickerView;
+PickerView.displayName = 'PickerView';

package/2x/cjs/components/picker-view/wheel.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { PickerColumnItem, PickerValue } from './index';
+declare type Props = {
+    index: number;
+    column: PickerColumnItem[];
+    value: PickerValue;
+    onSelect: (value: PickerValue, index: number) => void;
+    renderLabel: (item: PickerColumnItem) => ReactNode;
+    mouseWheel: boolean;
+};
+export declare const Wheel: React.NamedExoticComponent<Props>;
+export {};