antd-mobile 5.16.1 → 5.17.0

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

@@ -1,151 +0,0 @@
-import { __awaiter } from "tslib";
-import React, { forwardRef, useImperativeHandle, useRef, useState, useEffect } from 'react';
-import classNames from 'classnames';
-import { usePropsValue } from '../../utils/use-props-value';
-import { mergeProps } from '../../utils/with-default-props';
-import { withNativeProps } from '../../utils/native-props';
-import { withStopPropagation } from '../../utils/with-stop-propagation';
-import { Arrow } from './arrow';
-import { renderToContainer } from '../../utils/render-to-container';
-import { arrow, computePosition, flip, offset, autoUpdate, hide, shift, limitShift } from '@floating-ui/dom';
-import { Wrapper } from './wrapper';
-import { useShouldRender } from '../../utils/should-render';
-import { useClickAway, useIsomorphicLayoutEffect } from 'ahooks';
-import { normalizePlacement } from './normalize-placement';
-import { convertPx } from '../../utils/convert-px';
-const classPrefix = `adm-popover`;
-const defaultProps = {
-  placement: 'top',
-  defaultVisible: false,
-  stopPropagation: ['click'],
-  getContainer: () => document.body
-};
-export const Popover = forwardRef((p, ref) => {
-  const props = mergeProps(defaultProps, p);
-  const {
-    mode = 'light'
-  } = props;
-  const placement = normalizePlacement(props.placement);
-  const [visible, setVisible] = usePropsValue({
-    value: props.visible,
-    defaultValue: props.defaultVisible,
-    onChange: props.onVisibleChange
-  });
-  useImperativeHandle(ref, () => {
-    return {
-      show: () => setVisible(true),
-      hide: () => setVisible(false),
-      visible
-    };
-  }, [visible]);
-  const targetRef = useRef(null);
-  const floatingRef = useRef(null);
-  const arrowRef = useRef(null);
-  const floating = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, `${classPrefix}-${mode}`, !visible && `${classPrefix}-hidden`),
-    ref: floatingRef
-  }, React.createElement("div", {
-    className: `${classPrefix}-arrow`,
-    ref: arrowRef
-  }, React.createElement(Arrow, {
-    className: `${classPrefix}-arrow-icon`
-  })), React.createElement("div", {
-    className: `${classPrefix}-inner`
-  }, React.createElement("div", {
-    className: `${classPrefix}-inner-content`
-  }, props.content)))));
-  const [targetElement, setTargetElement] = useState(null);
-
-  function update() {
-    var _a, _b, _c;
-
-    return __awaiter(this, void 0, void 0, function* () {
-      const target = (_b = (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element) !== null && _b !== void 0 ? _b : null;
-      const floating = floatingRef.current;
-      const arrowElement = arrowRef.current;
-      setTargetElement(target);
-      if (!target || !floating || !arrowElement) return;
-      const {
-        x,
-        y,
-        placement: realPlacement,
-        middlewareData
-      } = yield computePosition(target, floating, {
-        placement,
-        middleware: [offset(convertPx(12)), shift({
-          padding: convertPx(4),
-          crossAxis: false,
-          limiter: limitShift()
-        }), flip(), hide(), arrow({
-          element: arrowElement,
-          padding: convertPx(12)
-        })]
-      });
-      Object.assign(floating.style, {
-        left: `${x}px`,
-        top: `${y}px`
-      });
-      const side = realPlacement.split('-')[0];
-      const arrowSide = {
-        top: 'bottom',
-        right: 'left',
-        bottom: 'top',
-        left: 'right'
-      }[side];
-      const {
-        x: arrowX,
-        y: arrowY
-      } = (_c = middlewareData.arrow) !== null && _c !== void 0 ? _c : {};
-      Object.assign(arrowElement.style, {
-        left: arrowX != null ? `${arrowX}px` : '',
-        top: arrowY != null ? `${arrowY}px` : '',
-        right: '',
-        bottom: '',
-        [arrowSide]: `-${convertPx(8)}px`
-      });
-      const arrowRotate = {
-        top: '0deg',
-        bottom: '180deg',
-        left: '270deg',
-        right: '90deg'
-      }[side];
-      arrowElement.style.setProperty('--arrow-icon-rotate', arrowRotate);
-    });
-  }
-
-  useIsomorphicLayoutEffect(() => {
-    update();
-  });
-  useEffect(() => {
-    if (!targetElement) return;
-    if (!props.trigger) return;
-
-    function handleClick() {
-      setVisible(v => !v);
-    }
-
-    targetElement.addEventListener('click', handleClick);
-    return () => {
-      targetElement.removeEventListener('click', handleClick);
-    };
-  }, [targetElement, props.trigger]);
-  useEffect(() => {
-    const floatingElement = floatingRef.current;
-    if (!targetElement || !floatingElement) return;
-    return autoUpdate(targetElement, floatingElement, update, {
-      elementResize: typeof ResizeObserver !== 'undefined'
-    });
-  }, [targetElement]);
-  useClickAway(() => {
-    if (!props.trigger) return;
-    setVisible(false);
-  }, () => {
-    var _a;
-
-    return (_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.element;
-  });
-  const shouldRender = useShouldRender(visible, false, props.destroyOnHide);
-  return React.createElement(React.Fragment, null, React.createElement(Wrapper, {
-    ref: targetRef
-  }, props.children), shouldRender && renderToContainer(props.getContainer, floating));
-});

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

@@ -1,24 +0,0 @@
-.adm-popover {
-  z-index: 1030;
-}
-
-.adm-popover.adm-popover-dark {
-  color: #ffffff;
-}
-
-.adm-popover.adm-popover-dark .adm-popover-inner {
-  background-color: rgba(0, 0, 0, 0.75);
-}
-
-.adm-popover-inner {
-  background-color: #ffffff;
-  font-size: 30px;
-}
-
-.adm-popover-inner-content {
-  padding: 16px 24px;
-}
-
-.adm-popover-arrow {
-  display: none !important;
-}

package/2x/es/components/popover/wrapper.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare class Wrapper extends React.Component<{
-    children?: React.ReactNode;
-}, {}> {
-    element: Element | null;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    render(): React.ReactNode;
-}

package/2x/es/components/popover/wrapper.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { findDOMNode } from 'react-dom';
-export class Wrapper extends React.Component {
-  constructor() {
-    super(...arguments);
-    this.element = null;
-  }
-
-  componentDidMount() {
-    this.componentDidUpdate();
-  }
-
-  componentDidUpdate() {
-    // eslint-disable-next-line
-    const node = findDOMNode(this);
-
-    if (node instanceof Element) {
-      this.element = node;
-    } else {
-      this.element = null;
-    }
-  }
-
-  render() {
-    return React.Children.only(this.props.children);
-  }
-
-}

package/2x/es/components/popup/index.d.ts

@@ -1,4 +0,0 @@
-import './popup.less';
-import { Popup } from './popup';
-export type { PopupProps } from './popup';
-export default Popup;

package/2x/es/components/popup/index.js

@@ -1,3 +0,0 @@
-import "./popup.css";
-import { Popup } from './popup';
-export default Popup;

package/2x/es/components/popup/popup-base-props.d.ts

@@ -1,35 +0,0 @@
-import React from 'react';
-import { GetContainer } from '../../utils/render-to-container';
-import { MaskProps } from '../mask';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
-export declare type PopupBaseProps = {
-    afterClose?: () => void;
-    afterShow?: () => void;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
-    closeOnMaskClick?: boolean;
-    destroyOnClose?: boolean;
-    disableBodyScroll?: boolean;
-    forceRender?: boolean;
-    getContainer?: GetContainer;
-    mask?: boolean;
-    maskClassName?: string;
-    maskStyle?: MaskProps['style'];
-    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onClose?: () => void;
-    onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    showCloseButton?: boolean;
-    stopPropagation?: PropagationEvent[];
-    visible?: boolean;
-};
-export declare const defaultPopupBaseProps: {
-    closeOnMaskClick: boolean;
-    destroyOnClose: boolean;
-    disableBodyScroll: boolean;
-    forceRender: boolean;
-    getContainer: () => HTMLElement;
-    mask: boolean;
-    showCloseButton: boolean;
-    stopPropagation: string[];
-    visible: boolean;
-};

package/2x/es/components/popup/popup-base-props.js

@@ -1,11 +0,0 @@
-export const defaultPopupBaseProps = {
-  closeOnMaskClick: false,
-  destroyOnClose: false,
-  disableBodyScroll: true,
-  forceRender: false,
-  getContainer: () => document.body,
-  mask: true,
-  showCloseButton: false,
-  stopPropagation: ['click'],
-  visible: false
-};

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

@@ -1,67 +0,0 @@
-.adm-popup {
-  --z-index: var(--adm-popup-z-index, 1000);
-  position: fixed;
-  z-index: var(--z-index);
-}
-
-.adm-popup-body {
-  position: fixed;
-  background-color: var(--adm-color-background);
-  z-index: calc(var(--z-index) + 10);
-}
-
-.adm-popup-body .adm-popup-close-icon {
-  position: absolute;
-  z-index: 100;
-}
-
-.adm-popup-body-position-bottom {
-  width: 100%;
-  bottom: 0;
-  left: 0;
-}
-
-.adm-popup-body-position-bottom .adm-popup-close-icon {
-  right: 16px;
-  top: 16px;
-}
-
-.adm-popup-body-position-top {
-  width: 100%;
-  top: 0;
-  left: 0;
-}
-
-.adm-popup-body-position-top .adm-popup-close-icon {
-  right: 16px;
-  bottom: 16px;
-}
-
-.adm-popup-body-position-left {
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.adm-popup-body-position-left .adm-popup-close-icon {
-  right: 16px;
-  top: 16px;
-}
-
-.adm-popup-body-position-right {
-  height: 100%;
-  top: 0;
-  right: 0;
-}
-
-.adm-popup-body-position-right .adm-popup-close-icon {
-  left: 16px;
-  top: 16px;
-}
-
-.adm-popup-close-icon {
-  cursor: pointer;
-  padding: 8px;
-  font-size: 36px;
-  color: var(--adm-color-weak);
-}

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

@@ -1,7 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { NativeProps } from '../../utils/native-props';
-import { PopupBaseProps } from './popup-base-props';
-export declare type PopupProps = PopupBaseProps & PropsWithChildren<{
-    position?: 'bottom' | 'top' | 'left' | 'right';
-}> & NativeProps<'--z-index'>;
-export declare const Popup: FC<PopupProps>;

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

@@ -1,115 +0,0 @@
-import classNames from 'classnames';
-import React, { useState, useRef } from 'react';
-import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks';
-import { withNativeProps } from '../../utils/native-props';
-import { mergeProps } from '../../utils/with-default-props';
-import Mask from '../mask';
-import { useLockScroll } from '../../utils/use-lock-scroll';
-import { renderToContainer } from '../../utils/render-to-container';
-import { useSpring, animated } from '@react-spring/web';
-import { withStopPropagation } from '../../utils/with-stop-propagation';
-import { ShouldRender } from '../../utils/should-render';
-import { CloseOutline } from 'antd-mobile-icons';
-import { defaultPopupBaseProps } from './popup-base-props';
-import { useInnerVisible } from '../../utils/use-inner-visible';
-const classPrefix = `adm-popup`;
-const defaultProps = Object.assign(Object.assign({}, defaultPopupBaseProps), {
-  position: 'bottom'
-});
-export const Popup = p => {
-  const props = mergeProps(defaultProps, p);
-  const bodyCls = classNames(`${classPrefix}-body`, props.bodyClassName, `${classPrefix}-body-position-${props.position}`);
-  const [active, setActive] = useState(props.visible);
-  useIsomorphicLayoutEffect(() => {
-    if (props.visible) {
-      setActive(true);
-    }
-  }, [props.visible]);
-  const ref = useRef(null);
-  useLockScroll(ref, props.disableBodyScroll && active);
-  const unmountedRef = useUnmountedRef();
-  const {
-    percent
-  } = useSpring({
-    percent: props.visible ? 0 : 100,
-    config: {
-      precision: 0.1,
-      mass: 0.4,
-      tension: 300,
-      friction: 30
-    },
-    onRest: () => {
-      var _a, _b;
-
-      if (unmountedRef.current) return;
-      setActive(props.visible);
-
-      if (props.visible) {
-        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
-      } else {
-        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
-      }
-    }
-  });
-  const maskVisible = useInnerVisible(active && props.visible);
-  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
-    className: classPrefix,
-    onClick: props.onClick,
-    style: {
-      display: active ? undefined : 'none'
-    }
-  }, props.mask && React.createElement(Mask, {
-    visible: maskVisible,
-    forceRender: props.forceRender,
-    destroyOnClose: props.destroyOnClose,
-    onMaskClick: e => {
-      var _a, _b;
-
-      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
-
-      if (props.closeOnMaskClick) {
-        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
-      }
-    },
-    className: props.maskClassName,
-    style: props.maskStyle,
-    disableBodyScroll: false,
-    stopPropagation: props.stopPropagation
-  }), React.createElement(animated.div, {
-    className: bodyCls,
-    style: Object.assign(Object.assign({}, props.bodyStyle), {
-      transform: percent.to(v => {
-        if (props.position === 'bottom') {
-          return `translate(0, ${v}%)`;
-        }
-
-        if (props.position === 'top') {
-          return `translate(0, -${v}%)`;
-        }
-
-        if (props.position === 'left') {
-          return `translate(-${v}%, 0)`;
-        }
-
-        if (props.position === 'right') {
-          return `translate(${v}%, 0)`;
-        }
-
-        return 'none';
-      })
-    }),
-    ref: ref
-  }, props.showCloseButton && React.createElement("a", {
-    className: classNames(`${classPrefix}-close-icon`, 'adm-plain-anchor'),
-    onClick: () => {
-      var _a;
-
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-    }
-  }, React.createElement(CloseOutline, null)), props.children))));
-  return React.createElement(ShouldRender, {
-    active: active,
-    forceRender: props.forceRender,
-    destroyOnClose: props.destroyOnClose
-  }, renderToContainer(props.getContainer, node));
-};

package/2x/es/components/progress-bar/index.d.ts

@@ -1,4 +0,0 @@
-import './progress-bar.less';
-import { ProgressBar } from './progress-bar';
-export type { ProgressBarProps } from './progress-bar';
-export default ProgressBar;

package/2x/es/components/progress-bar/index.js

@@ -1,3 +0,0 @@
-import "./progress-bar.css";
-import { ProgressBar } from './progress-bar';
-export default ProgressBar;

package/2x/es/components/progress-bar/progress-bar.css

@@ -1,33 +0,0 @@
-.adm-progress-bar {
-  --track-width: var(--adm-progress-bar-track-width, 16px);
-  --track-color: var(--adm-progress-bar-track-color, #e5e5e5);
-  --fill-color: var(--adm-progress-bar-fill-color, var(--adm-color-primary));
-  --text-width: var(--adm-progress-bar-text-width, 80px);
-  display: flex;
-  align-items: center;
-}
-
-.adm-progress-bar-trail {
-  flex: auto;
-  background: var(--track-color);
-  overflow: hidden;
-  height: var(--track-width);
-}
-
-.adm-progress-bar-fill {
-  transition: width 0.3s;
-  background: var(--fill-color);
-  height: var(--track-width);
-}
-
-.adm-progress-bar-text {
-  flex: none;
-  width: calc(var(--text-width) + 16px);
-  padding-left: 16px;
-  color: #999999;
-}
-
-.adm-progress-bar-rounded .adm-progress-bar-trail,
-.adm-progress-bar-rounded .adm-progress-bar-fill {
-  border-radius: var(--track-width);
-}

package/2x/es/components/progress-bar/progress-bar.d.ts

@@ -1,8 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { NativeProps } from '../../utils/native-props';
-export declare type ProgressBarProps = {
-    percent?: number;
-    rounded?: boolean;
-    text?: boolean | ReactNode | ((percent: number) => ReactNode);
-} & NativeProps<'--track-width' | '--track-color' | '--fill-color' | '--text-width'>;
-export declare const ProgressBar: FC<ProgressBarProps>;

package/2x/es/components/progress-bar/progress-bar.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import { withNativeProps } from '../../utils/native-props';
-import { mergeProps } from '../../utils/with-default-props';
-import classNames from 'classnames';
-import { isNodeWithContent } from '../../utils/is-node-with-content';
-const classPrefix = `adm-progress-bar`;
-const defaultProps = {
-  percent: 0,
-  rounded: true,
-  text: false
-};
-export const ProgressBar = p => {
-  const props = mergeProps(defaultProps, p);
-  const fillStyle = {
-    width: `${props.percent}%`
-  };
-
-  const textElement = function () {
-    if (props.text === true) {
-      return `${props.percent}%`;
-    }
-
-    if (typeof props.text === 'function') {
-      return props.text(props.percent);
-    }
-
-    return props.text;
-  }();
-
-  return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, props.rounded && `${classPrefix}-rounded`)
-  }, React.createElement("div", {
-    className: `${classPrefix}-trail`
-  }, React.createElement("div", {
-    className: `${classPrefix}-fill`,
-    style: fillStyle
-  })), isNodeWithContent(textElement) && React.createElement("div", {
-    className: `${classPrefix}-text`
-  }, textElement)));
-};

package/2x/es/components/progress-circle/index.d.ts

@@ -1,4 +0,0 @@
-import './progress-circle.less';
-import { ProgressCircle } from './progress-circle';
-export type { ProgressCircleProps } from './progress-circle';
-export default ProgressCircle;

package/2x/es/components/progress-circle/index.js

@@ -1,3 +0,0 @@
-import "./progress-circle.css";
-import { ProgressCircle } from './progress-circle';
-export default ProgressCircle;

package/2x/es/components/progress-circle/progress-circle.css

@@ -1,58 +0,0 @@
-/*进度圈*/
-
-.adm-progress-circle {
-  --track-width: var(--adm-progress-circle-track-width, 6px);
-  --size: var(--adm-progress-circle-size, 100px);
-  --track-color: var(--adm-progress-circle-track-color, #e5e5e5);
-  --fill-color: var(--adm-progress-circle-fill-color, var(--adm-color-primary));
-  --percent: 0;
-  --pi: 3.14159265;
-  --radius: calc(var(--size) / 2 - var(--track-width) / 2);
-  --circumference: calc(var(--radius) * var(--pi) * 2);
-  display: inline-block;
-  width: var(--size);
-  height: var(--size);
-}
-
-.adm-progress-circle-svg {
-  width: 100%;
-  height: 100%;
-}
-
-.adm-progress-circle-svg > .adm-progress-circle-track,
-.adm-progress-circle-svg .adm-progress-circle-fill {
-  stroke-width: var(--track-width);
-  r: var(--radius);
-  cx: calc(var(--size) / 2);
-  cy: calc(var(--size) / 2);
-  transform: rotate(-90deg);
-  transform-origin: 50% 50%;
-}
-
-.adm-progress-circle-svg > .adm-progress-circle-track {
-  stroke: var(--track-color);
-}
-
-.adm-progress-circle-svg > .adm-progress-circle-fill {
-  transition: stroke-dashoffset 0.35s;
-  stroke: var(--fill-color);
-  stroke-dasharray: var(--circumference);
-  stroke-dashoffset: calc(var(--circumference) * (1 - var(--percent) / 100));
-  stroke-linecap: round;
-}
-
-.adm-progress-circle-content {
-  position: relative;
-  margin: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.adm-progress-circle-info {
-  position: absolute;
-  width: 100%;
-  top: 50%;
-  left: 50%;
-  text-align: center;
-  transform: translate(-50%, -50%);
-}

package/2x/es/components/progress-circle/progress-circle.d.ts

@@ -1,7 +0,0 @@
-import React, { FC } from 'react';
-import { NativeProps } from '../../utils/native-props';
-export declare type ProgressCircleProps = {
-    percent?: number;
-    children?: React.ReactNode;
-} & NativeProps<'--size' | '--track-width' | '--track-color' | '--fill-color'>;
-export declare const ProgressCircle: FC<ProgressCircleProps>;

package/2x/es/components/progress-circle/progress-circle.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import { withNativeProps } from '../../utils/native-props';
-import { mergeProps } from '../../utils/with-default-props';
-const classPrefix = `adm-progress-circle`;
-export const ProgressCircle = p => {
-  const props = mergeProps({
-    percent: 0
-  }, p);
-  const style = {
-    '--percent': props.percent.toString()
-  };
-  return withNativeProps(props, React.createElement("div", {
-    className: `${classPrefix}`,
-    style: style
-  }, React.createElement("div", {
-    className: `${classPrefix}-content`
-  }, React.createElement("svg", {
-    className: `${classPrefix}-svg`
-  }, React.createElement("circle", {
-    className: `${classPrefix}-track`,
-    fill: 'transparent'
-  }), React.createElement("circle", {
-    className: `${classPrefix}-fill`,
-    fill: 'transparent'
-  })), React.createElement("div", {
-    className: `${classPrefix}-info`
-  }, props.children))));
-};

package/2x/es/components/pull-to-refresh/index.d.ts

@@ -1,4 +0,0 @@
-import './pull-to-refresh.less';
-import { PullToRefresh } from './pull-to-refresh';
-export type { PullToRefreshProps, PullStatus } from './pull-to-refresh';
-export default PullToRefresh;

package/2x/es/components/pull-to-refresh/index.js

@@ -1,3 +0,0 @@
-import "./pull-to-refresh.css";
-import { PullToRefresh } from './pull-to-refresh';
-export default PullToRefresh;