antd-mobile 5.17.0 → 5.18.0

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

@@ -0,0 +1,151 @@
+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

@@ -0,0 +1,24 @@
+.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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,28 @@
+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

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

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

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

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

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,67 @@
+.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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,4 @@
+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

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

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

@@ -0,0 +1,33 @@
+.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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,4 @@
+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

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

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

@@ -0,0 +1,58 @@
+/*进度圈*/
+
+.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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,4 @@
+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

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