antd-mobile 5.17.0 → 5.18.0

package/2x/es/components/pull-to-refresh/pull-to-refresh.css

@@ -0,0 +1,15 @@
+.adm-pull-to-refresh-head {
+  overflow: hidden;
+  position: relative;
+}
+
+.adm-pull-to-refresh-head-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  color: var(--adm-color-weak);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,25 @@
+import React, { FC, ReactNode } from 'react';
+export declare type PullStatus = 'pulling' | 'canRelease' | 'refreshing' | 'complete';
+export declare type PullToRefreshProps = {
+    onRefresh?: () => Promise<any>;
+    pullingText?: ReactNode;
+    canReleaseText?: ReactNode;
+    refreshingText?: ReactNode;
+    completeText?: ReactNode;
+    completeDelay?: number;
+    headHeight?: number;
+    threshold?: number;
+    disabled?: boolean;
+    renderText?: (status: PullStatus) => ReactNode;
+    children?: React.ReactNode;
+};
+export declare const defaultProps: {
+    pullingText: string;
+    canReleaseText: string;
+    refreshingText: string;
+    completeText: string;
+    completeDelay: number;
+    disabled: boolean;
+    onRefresh: () => void;
+};
+export declare const PullToRefresh: FC<PullToRefreshProps>;

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

@@ -0,0 +1,193 @@
+import { __awaiter } from "tslib";
+import { mergeProps } from '../../utils/with-default-props';
+import { animated, useSpring } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import { getScrollParent } from '../../utils/get-scroll-parent';
+import React, { useEffect, useRef, useState } from 'react';
+import { supportsPassive } from '../../utils/supports-passive';
+import { convertPx } from '../../utils/convert-px';
+import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
+import { useConfig } from '../config-provider';
+import { sleep } from '../../utils/sleep';
+const classPrefix = `adm-pull-to-refresh`;
+export const defaultProps = {
+  pullingText: '下拉刷新',
+  canReleaseText: '释放立即刷新',
+  refreshingText: '加载中...',
+  completeText: '刷新成功',
+  completeDelay: 500,
+  disabled: false,
+  onRefresh: () => {}
+};
+export const PullToRefresh = p => {
+  var _a, _b;
+
+  const {
+    locale
+  } = useConfig();
+  const props = mergeProps(defaultProps, {
+    refreshingText: `${locale.common.loading}...`,
+    pullingText: locale.PullToRefresh.pulling,
+    canReleaseText: locale.PullToRefresh.canRelease,
+    completeText: locale.PullToRefresh.complete
+  }, p);
+  const headHeight = (_a = props.headHeight) !== null && _a !== void 0 ? _a : convertPx(40);
+  const threshold = (_b = props.threshold) !== null && _b !== void 0 ? _b : convertPx(60);
+  const [status, setStatus] = useState('pulling');
+  const [springStyles, api] = useSpring(() => ({
+    from: {
+      height: 0
+    },
+    config: {
+      tension: 300,
+      friction: 30,
+      clamp: true
+    }
+  }));
+  const elementRef = useRef(null);
+  const pullingRef = useRef(false); //防止下拉时抖动
+
+  useEffect(() => {
+    var _a;
+
+    (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('touchmove', () => {});
+  }, []);
+
+  function doRefresh() {
+    return __awaiter(this, void 0, void 0, function* () {
+      api.start({
+        height: headHeight
+      });
+      setStatus('refreshing');
+
+      try {
+        yield props.onRefresh();
+        setStatus('complete');
+      } catch (e) {
+        api.start({
+          to: next => __awaiter(this, void 0, void 0, function* () {
+            yield next({
+              height: 0
+            });
+            setStatus('pulling');
+          })
+        });
+        throw e;
+      }
+
+      if (props.completeDelay > 0) {
+        yield sleep(props.completeDelay);
+      }
+
+      api.start({
+        to: next => __awaiter(this, void 0, void 0, function* () {
+          yield next({
+            height: 0
+          });
+          setStatus('pulling');
+        })
+      });
+    });
+  }
+
+  useDrag(state => {
+    if (status === 'refreshing' || status === 'complete') return;
+    const {
+      event
+    } = state;
+
+    if (state.last) {
+      pullingRef.current = false;
+
+      if (status === 'canRelease') {
+        doRefresh();
+      } else {
+        api.start({
+          height: 0
+        });
+      }
+
+      return;
+    }
+
+    const [, y] = state.movement;
+
+    if (state.first && y > 0) {
+      const target = state.event.target;
+      if (!target || !(target instanceof Element)) return;
+      let scrollParent = getScrollParent(target);
+
+      while (true) {
+        if (!scrollParent) return;
+        const scrollTop = getScrollTop(scrollParent);
+
+        if (scrollTop > 0) {
+          return;
+        }
+
+        if (scrollParent instanceof Window) {
+          break;
+        }
+
+        scrollParent = getScrollParent(scrollParent.parentNode);
+      }
+
+      pullingRef.current = true;
+
+      function getScrollTop(element) {
+        return 'scrollTop' in element ? element.scrollTop : element.scrollY;
+      }
+    }
+
+    if (!pullingRef.current) return;
+
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+
+    event.stopPropagation();
+    const height = Math.max(rubberbandIfOutOfBounds(y, 0, 0, headHeight * 5, 0.5), 0);
+    api.start({
+      height
+    });
+    setStatus(height > threshold ? 'canRelease' : 'pulling');
+  }, {
+    pointer: {
+      touch: true
+    },
+    axis: 'y',
+    target: elementRef,
+    enabled: !props.disabled,
+    eventOptions: supportsPassive ? {
+      passive: false
+    } : false
+  });
+
+  const renderStatusText = () => {
+    var _a;
+
+    if (props.renderText) {
+      return (_a = props.renderText) === null || _a === void 0 ? void 0 : _a.call(props, status);
+    }
+
+    if (status === 'pulling') return props.pullingText;
+    if (status === 'canRelease') return props.canReleaseText;
+    if (status === 'refreshing') return props.refreshingText;
+    if (status === 'complete') return props.completeText;
+  };
+
+  return React.createElement(animated.div, {
+    ref: elementRef,
+    className: classPrefix
+  }, React.createElement(animated.div, {
+    style: springStyles,
+    className: `${classPrefix}-head`
+  }, React.createElement("div", {
+    className: `${classPrefix}-head-content`,
+    style: {
+      height: headHeight
+    }
+  }, renderStatusText())), React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.children));
+};

package/2x/es/components/radio/group-context.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { RadioValue } from '.';
+export declare const RadioGroupContext: import("react").Context<{
+    value: RadioValue[];
+    disabled: boolean;
+    check: (val: RadioValue) => void;
+    uncheck: (val: RadioValue) => void;
+} | null>;

package/2x/es/components/radio/group-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const RadioGroupContext = createContext(null);

package/2x/es/components/radio/group.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { RadioValue } from '.';
+export interface RadioGroupProps {
+    value?: RadioValue | null;
+    onChange?: (val: RadioValue) => void;
+    defaultValue?: RadioValue | null;
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+export declare const Group: FC<RadioGroupProps>;

package/2x/es/components/radio/group.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { RadioGroupContext } from './group-context';
+import { usePropsValue } from '../../utils/use-props-value';
+const defaultProps = {
+  disabled: false,
+  defaultValue: null
+};
+export const Group = p => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: v => {
+      var _a;
+
+      if (v === null) return;
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+    }
+  });
+  return React.createElement(RadioGroupContext.Provider // TODO: 性能优化
+  , {
+    // TODO: 性能优化
+    value: {
+      value: value === null ? [] : [value],
+      check: v => {
+        setValue(v);
+      },
+      uncheck: () => {},
+      disabled: props.disabled
+    }
+  }, props.children);
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './radio.less';
+export type { RadioProps, RadioValue } from './radio';
+export type { RadioGroupProps } from './group';
+declare const _default: import("react").FC<import("./radio").RadioProps> & {
+    Group: import("react").FC<import("./group").RadioGroupProps>;
+};
+export default _default;

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

@@ -0,0 +1,7 @@
+import "./radio.css";
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { Group } from './group';
+import { Radio } from './radio';
+export default attachPropertiesToComponent(Radio, {
+  Group
+});

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

@@ -0,0 +1,63 @@
+.adm-radio {
+  --icon-size: 44px;
+  --font-size: var(--adm-font-size-9);
+  --gap: 16px;
+  display: inline-flex;
+  vertical-align: text-bottom;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+}
+
+.adm-radio input {
+  display: none;
+}
+
+.adm-radio .adm-radio-icon {
+  flex: none;
+  border: 2px solid var(--adm-color-light);
+  border-radius: var(--icon-size);
+  box-sizing: border-box;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  color: var(--adm-color-white);
+}
+
+.adm-radio .adm-radio-icon > svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.adm-radio.adm-radio-block {
+  display: flex;
+}
+
+.adm-radio.adm-radio-checked .adm-radio-icon {
+  border-color: var(--adm-color-primary);
+  background-color: var(--adm-color-primary);
+}
+
+.adm-radio.adm-radio-disabled {
+  cursor: not-allowed;
+}
+
+.adm-radio.adm-radio-disabled .adm-radio-content {
+  opacity: 0.4;
+}
+
+.adm-radio.adm-radio-disabled .adm-radio-icon {
+  color: #b7b7b7;
+  border-color: var(--adm-color-light);
+  background-color: var(--adm-color-box);
+}
+
+.adm-radio .adm-radio-custom-icon {
+  font-size: var(--icon-size);
+}
+
+.adm-radio-content {
+  flex: 0 1 auto;
+  font-size: var(--font-size);
+  padding-left: var(--gap);
+}

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

@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type RadioValue = string | number;
+export declare type RadioProps = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    value?: RadioValue;
+    block?: boolean;
+    id?: string;
+    icon?: (checked: boolean) => React.ReactNode;
+    children?: React.ReactNode;
+} & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
+export declare const Radio: FC<RadioProps>;

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

@@ -0,0 +1,83 @@
+import React, { useContext } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import classNames from 'classnames';
+import { RadioGroupContext } from './group-context';
+import { usePropsValue } from '../../utils/use-props-value';
+import { mergeProps } from '../../utils/with-default-props';
+import { CheckIcon } from '../checkbox/check-icon';
+import { devWarning } from '../../utils/dev-log';
+import { isDev } from '../../utils/is-dev';
+import { NativeInput } from '../checkbox/native-input';
+const classPrefix = `adm-radio`;
+const defaultProps = {
+  defaultChecked: false
+};
+export const Radio = p => {
+  const props = mergeProps(defaultProps, p);
+  const groupContext = useContext(RadioGroupContext);
+  let [checked, setChecked] = usePropsValue({
+    value: props.checked,
+    defaultValue: props.defaultChecked,
+    onChange: props.onChange
+  });
+  let disabled = props.disabled;
+  const {
+    value
+  } = props;
+
+  if (groupContext && value !== undefined) {
+    if (isDev) {
+      if (p.checked !== undefined) {
+        devWarning('Radio', 'When used within `Radio.Group`, the `checked` prop of `Radio` will not work.');
+      }
+
+      if (p.defaultChecked !== undefined) {
+        devWarning('Radio', 'When used within `Radio.Group`, the `defaultChecked` prop of `Radio` will not work.');
+      }
+    }
+
+    checked = groupContext.value.includes(value);
+
+    setChecked = innerChecked => {
+      var _a;
+
+      if (innerChecked) {
+        groupContext.check(value);
+      } else {
+        groupContext.uncheck(value);
+      }
+
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, innerChecked);
+    };
+
+    disabled = disabled || groupContext.disabled;
+  }
+
+  const renderIcon = () => {
+    if (props.icon) {
+      return React.createElement("div", {
+        className: `${classPrefix}-custom-icon`
+      }, props.icon(checked));
+    }
+
+    return React.createElement("div", {
+      className: `${classPrefix}-icon`
+    }, checked && React.createElement(CheckIcon, null));
+  };
+
+  return withNativeProps(props, React.createElement("label", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-checked`]: checked,
+      [`${classPrefix}-disabled`]: disabled,
+      [`${classPrefix}-block`]: props.block
+    })
+  }, React.createElement(NativeInput, {
+    type: 'radio',
+    checked: checked,
+    onChange: setChecked,
+    disabled: disabled,
+    id: props.id
+  }), renderIcon(), props.children && React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.children)));
+};

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

@@ -0,0 +1,4 @@
+import './rate.less';
+import { Rate } from './rate';
+export type { RateProps } from './rate';
+export default Rate;

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

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

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

@@ -0,0 +1,37 @@
+.adm-rate {
+  --star-size: 48px;
+  --active-color: #ffd21e;
+  --inactive-color: var(--adm-color-border);
+  display: inline-flex;
+}
+
+.adm-rate-box {
+  position: relative;
+}
+
+.adm-rate-star {
+  padding: 0.125em;
+  line-height: var(--star-size);
+  font-size: var(--star-size);
+  color: var(--inactive-color);
+  text-align: center;
+  overflow: hidden;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.adm-rate-star-half {
+  padding-right: 0;
+  width: 50%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.adm-rate-star-active {
+  color: var(--active-color);
+}
+
+.adm-rate-star-readonly {
+  cursor: unset;
+}

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

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type RateProps = {
+    allowClear?: boolean;
+    allowHalf?: boolean;
+    character?: React.ReactNode;
+    count?: number;
+    defaultValue?: number;
+    readOnly?: boolean;
+    value?: number;
+    onChange?: (value: number) => void;
+} & NativeProps<'--star-size' | '--active-color' | '--inactive-color'>;
+export declare const Rate: FC<RateProps>;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { Star } from './star';
+const classPrefix = `adm-rate`;
+const defaultProps = {
+  count: 5,
+  allowHalf: false,
+  character: React.createElement(Star, null),
+  defaultValue: 0,
+  readOnly: false,
+  allowClear: true
+};
+export const Rate = p => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue(props);
+  const starList = Array(props.count).fill(null);
+
+  function renderStar(v, half) {
+    return React.createElement("div", {
+      className: classNames(`${classPrefix}-star`, {
+        [`${classPrefix}-star-active`]: value >= v,
+        [`${classPrefix}-star-half`]: half,
+        [`${classPrefix}-star-readonly`]: props.readOnly
+      }),
+      onClick: () => {
+        if (props.readOnly) return;
+
+        if (props.allowClear && value === v) {
+          setValue(0);
+        } else {
+          setValue(v);
+        }
+      },
+      role: 'radio',
+      "aria-checked": value >= v,
+      "aria-label": '' + v
+    }, props.character);
+  }
+
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    role: 'radiogroup',
+    "aria-readonly": props.readOnly
+  }, starList.map((_, i) => React.createElement("div", {
+    key: i,
+    className: classNames(`${classPrefix}-box`)
+  }, props.allowHalf && renderStar(i + 0.5, true), renderStar(i + 1, false)))));
+};

package/2x/es/components/rate/star.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const Star: FC;

package/2x/es/components/rate/star.js

@@ -0,0 +1,15 @@
+import React from 'react';
+export const Star = () => {
+  return React.createElement("svg", {
+    viewBox: '0 0 42 40',
+    height: '1em',
+    xmlns: 'http://www.w3.org/2000/svg',
+    style: {
+      verticalAlign: '-0.125em'
+    }
+  }, React.createElement("path", {
+    d: 'm21 34-10.52 5.53a2 2 0 0 1-2.902-2.108l2.01-11.714-8.511-8.296a2 2 0 0 1 1.108-3.411l11.762-1.71 5.26-10.657a2 2 0 0 1 3.586 0l5.26 10.658L39.815 14a2 2 0 0 1 1.108 3.411l-8.51 8.296 2.009 11.714a2 2 0 0 1-2.902 2.109L21 34Z',
+    fill: 'currentColor',
+    fillRule: 'evenodd'
+  }));
+};

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

@@ -0,0 +1,4 @@
+import './result.less';
+import { Result } from './result';
+export type { ResultProps } from './result';
+export default Result;

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

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

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

@@ -0,0 +1,51 @@
+.adm-result {
+  padding: 64px 24px;
+  background-color: var(--adm-color-background);
+}
+
+.adm-result-icon {
+  box-sizing: border-box;
+  width: 128px;
+  height: 128px;
+  margin: 0 auto 40px auto;
+  padding: 12px;
+}
+
+.adm-result-icon .antd-mobile-icon {
+  font-size: 104px;
+}
+
+.adm-result-title {
+  color: var(--adm-color-text);
+  font-size: var(--adm-font-size-10);
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-description {
+  margin-top: 16px;
+  color: var(--adm-color-weak);
+  font-size: var(--adm-font-size-main);
+  line-height: 1.4;
+  text-align: center;
+}
+
+.adm-result-success .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-primary);
+}
+
+.adm-result-error .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-danger);
+}
+
+.adm-result-info .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-primary);
+}
+
+.adm-result-waiting .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-success);
+}
+
+.adm-result-warning .adm-result-icon .antd-mobile-icon {
+  color: var(--adm-color-warning);
+}

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

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type ResultProps = {
+    status: 'success' | 'error' | 'info' | 'waiting' | 'warning';
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+} & NativeProps;
+export declare const Result: FC<ResultProps>;