antd-mobile 5.17.0 → 5.18.0

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import classNames from 'classnames';
+import { CheckCircleFill, CloseCircleFill, InformationCircleFill, ClockCircleFill, ExclamationCircleFill } from 'antd-mobile-icons';
+import { withNativeProps } from '../../utils/native-props';
+const classPrefix = `adm-result`;
+const iconRecord = {
+  success: CheckCircleFill,
+  error: CloseCircleFill,
+  info: InformationCircleFill,
+  waiting: ClockCircleFill,
+  warning: ExclamationCircleFill
+};
+export const Result = props => {
+  const {
+    status,
+    title,
+    description,
+    icon
+  } = props;
+  if (!status) return null;
+  const resultIcon = icon || React.createElement(iconRecord[status]);
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-${status}`)
+  }, React.createElement("div", {
+    className: `${classPrefix}-icon`
+  }, resultIcon), React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, title), description ? React.createElement("div", {
+    className: `${classPrefix}-description`
+  }, description) : null));
+};

package/2x/es/components/safe-area/index.d.ts

@@ -0,0 +1,4 @@
+import './safe-area.less';
+import { SafeArea } from './safe-area';
+export type { SafeAreaProps } from './safe-area';
+export default SafeArea;

package/2x/es/components/safe-area/index.js

@@ -0,0 +1,3 @@
+import "./safe-area.css";
+import { SafeArea } from './safe-area';
+export default SafeArea;

package/2x/es/components/safe-area/safe-area.css

@@ -0,0 +1,13 @@
+.adm-safe-area {
+  --multiple: var(--adm-safe-area-multiple, 1);
+  display: block;
+  width: 100%;
+}
+
+.adm-safe-area-position-top {
+  padding-top: calc(env(safe-area-inset-top) * var(--multiple));
+}
+
+.adm-safe-area-position-bottom {
+  padding-bottom: calc(env(safe-area-inset-bottom) * var(--multiple));
+}

package/2x/es/components/safe-area/safe-area.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type SafeAreaProps = {
+    position: 'top' | 'bottom';
+} & NativeProps;
+export declare const SafeArea: FC<SafeAreaProps>;

package/2x/es/components/safe-area/safe-area.js

@@ -0,0 +1,9 @@
+import { withNativeProps } from '../../utils/native-props';
+import React from 'react';
+import classNames from 'classnames';
+const classPrefix = 'adm-safe-area';
+export const SafeArea = props => {
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-position-${props.position}`)
+  }));
+};

package/2x/es/components/scroll-mask/index.d.ts

@@ -0,0 +1,4 @@
+import './scroll-mask.less';
+import { ScrollMask } from './scroll-mask';
+export type { ScrollMaskProps } from './scroll-mask';
+export default ScrollMask;

package/2x/es/components/scroll-mask/index.js

@@ -0,0 +1,3 @@
+import "./scroll-mask.css";
+import { ScrollMask } from './scroll-mask';
+export default ScrollMask;

package/2x/es/components/scroll-mask/scroll-mask.css

@@ -0,0 +1,19 @@
+.adm-scroll-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 60px;
+  height: 100%;
+  pointer-events: none;
+}
+
+.adm-scroll-mask-left {
+  left: 0;
+  background: linear-gradient(to right, var(--adm-color-background), rgba(255, 255, 255, 0));
+}
+
+.adm-scroll-mask-right {
+  right: 0;
+  background: linear-gradient(to left, var(--adm-color-background), rgba(255, 255, 255, 0));
+}

package/2x/es/components/scroll-mask/scroll-mask.d.ts

@@ -0,0 +1,5 @@
+import { FC, RefObject } from 'react';
+export declare type ScrollMaskProps = {
+    scrollTrackRef: RefObject<HTMLElement>;
+};
+export declare const ScrollMask: FC<ScrollMaskProps>;

package/2x/es/components/scroll-mask/scroll-mask.js

@@ -0,0 +1,59 @@
+import React, { useRef, useEffect } from 'react';
+import classNames from 'classnames';
+import { animated, useSpring } from '@react-spring/web';
+import { useThrottleFn } from 'ahooks';
+const classPrefix = `adm-scroll-mask`;
+export const ScrollMask = props => {
+  const maskRef = useRef(null);
+  const [{
+    leftMaskOpacity,
+    rightMaskOpacity
+  }, api] = useSpring(() => ({
+    leftMaskOpacity: 0,
+    rightMaskOpacity: 0,
+    config: {
+      clamp: true
+    }
+  }));
+  const {
+    run: updateMask
+  } = useThrottleFn((immediate = false) => {
+    const mask = maskRef.current;
+    if (!mask) return;
+    const scrollEl = props.scrollTrackRef.current;
+    if (!scrollEl) return;
+    const scrollLeft = scrollEl.scrollLeft;
+    const showLeftMask = scrollLeft > 0;
+    const showRightMask = scrollLeft + scrollEl.offsetWidth < scrollEl.scrollWidth;
+    api.start({
+      leftMaskOpacity: showLeftMask ? 1 : 0,
+      rightMaskOpacity: showRightMask ? 1 : 0,
+      immediate
+    });
+  }, {
+    wait: 100,
+    trailing: true,
+    leading: true
+  });
+  useEffect(() => {
+    updateMask(true);
+  }, []);
+  useEffect(() => {
+    const scrollEl = props.scrollTrackRef.current;
+    if (!scrollEl) return;
+    scrollEl.addEventListener('scroll', updateMask);
+    return () => scrollEl.removeEventListener('scroll', updateMask);
+  }, []);
+  return React.createElement(React.Fragment, null, React.createElement(animated.div, {
+    ref: maskRef,
+    className: classNames(classPrefix, `${classPrefix}-left`),
+    style: {
+      opacity: leftMaskOpacity
+    }
+  }), React.createElement(animated.div, {
+    className: classNames(classPrefix, `${classPrefix}-right`),
+    style: {
+      opacity: rightMaskOpacity
+    }
+  }));
+};

package/2x/es/components/scroll-mask/scroll-mask.patch.css

@@ -0,0 +1,7 @@
+.adm-scroll-mask-left {
+  background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
+}
+
+.adm-scroll-mask-right {
+  background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
+}

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

@@ -0,0 +1,4 @@
+import './search-bar.less';
+import { SearchBar } from './search-bar';
+export type { SearchBarProps, SearchBarRef } from './search-bar';
+export default SearchBar;

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

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

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

@@ -0,0 +1,67 @@
+.adm-search-bar {
+  --height: 64px;
+  --padding-left: 16px;
+  --background: var(--adm-color-box);
+  --border-radius: 12px;
+  --placeholder-color: var(--adm-color-weak);
+  ---placeholder-color: var(--placeholder-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--height);
+}
+
+.adm-search-bar .adm-search-bar-input-box {
+  flex: auto;
+  background: var(--background);
+  border-radius: var(--border-radius);
+  border: solid 2px transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-left: var(--padding-left);
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input-box-icon {
+  flex: none;
+  color: var(--adm-color-light);
+  font-size: var(--adm-font-size-8);
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input {
+  flex: auto;
+  padding: 8px 16px 8px 8px;
+  height: calc(var(--height) - 4px);
+  box-sizing: border-box;
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-input {
+  --placeholder-color: var(---placeholder-color);
+  --font-size: var(--adm-font-size-7);
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input .adm-input-element {
+  line-height: 38px;
+}
+
+.adm-search-bar .adm-search-bar-input-box .adm-search-bar-input.adm-search-bar-input-without-icon {
+  padding-left: 16px;
+}
+
+.adm-search-bar .adm-search-bar-suffix {
+  flex: none;
+  margin-left: 8px;
+}
+
+.adm-search-bar .adm-search-bar-cancel-button.adm-button {
+  padding: 6px 24px;
+}
+
+.adm-search-bar-active .adm-input.adm-input.adm-input {
+  --placeholder-color: var(--adm-color-light);
+}
+
+.adm-search-bar-active .adm-search-bar-input-box {
+  border-color: var(--adm-color-primary);
+  background: var(--adm-color-background);
+}

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

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+import { InputRef, InputProps } from '../input';
+import { NativeProps } from '../../utils/native-props';
+export declare type SearchBarRef = InputRef;
+export declare type SearchBarProps = Pick<InputProps, 'onFocus' | 'onBlur' | 'onClear'> & {
+    value?: string;
+    defaultValue?: string;
+    maxLength?: number;
+    placeholder?: string;
+    clearable?: boolean;
+    onlyShowClearWhenFocus?: boolean;
+    showCancelButton?: boolean | ((focus: boolean, value: string) => boolean);
+    cancelText?: string;
+    icon?: ReactNode;
+    clearOnCancel?: boolean;
+    onSearch?: (val: string) => void;
+    onChange?: (val: string) => void;
+    onCancel?: () => void;
+} & NativeProps<'--background' | '--border-radius' | '--placeholder-color' | '--height' | '--padding-left'>;
+export declare const SearchBar: React.ForwardRefExoticComponent<Pick<InputProps, "onFocus" | "onBlur" | "onClear"> & {
+    value?: string | undefined;
+    defaultValue?: string | undefined;
+    maxLength?: number | undefined;
+    placeholder?: string | undefined;
+    clearable?: boolean | undefined;
+    onlyShowClearWhenFocus?: boolean | undefined;
+    showCancelButton?: boolean | ((focus: boolean, value: string) => boolean) | undefined;
+    cancelText?: string | undefined;
+    icon?: ReactNode;
+    clearOnCancel?: boolean | undefined;
+    onSearch?: ((val: string) => void) | undefined;
+    onChange?: ((val: string) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--height" | "--border-radius" | "--padding-left" | "--background" | "--placeholder-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<InputRef>>;

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

@@ -0,0 +1,125 @@
+import React, { useState, useRef, forwardRef, useImperativeHandle } from 'react';
+import classNames from 'classnames';
+import Input from '../input';
+import Button from '../button';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { SearchOutline } from 'antd-mobile-icons';
+import { usePropsValue } from '../../utils/use-props-value';
+import { useConfig } from '../config-provider';
+const classPrefix = `adm-search-bar`;
+const defaultProps = {
+  clearable: true,
+  onlyShowClearWhenFocus: false,
+  showCancelButton: false,
+  defaultValue: '',
+  clearOnCancel: true,
+  icon: React.createElement(SearchOutline, null)
+};
+export const SearchBar = forwardRef((p, ref) => {
+  const {
+    locale
+  } = useConfig();
+  const props = mergeProps(defaultProps, {
+    cancelText: locale.common.cancel
+  }, p);
+  const [value, setValue] = usePropsValue(props);
+  const [hasFocus, setHasFocus] = useState(false);
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    clear: () => {
+      var _a;
+
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+    },
+    focus: () => {
+      var _a;
+
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    blur: () => {
+      var _a;
+
+      return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    },
+
+    get nativeElement() {
+      var _a, _b;
+
+      return (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.nativeElement) !== null && _b !== void 0 ? _b : null;
+    }
+
+  }));
+
+  const renderCancelButton = () => {
+    let isShowCancel;
+
+    if (typeof props.showCancelButton === 'function') {
+      isShowCancel = props.showCancelButton(hasFocus, value);
+    } else {
+      isShowCancel = props.showCancelButton && hasFocus;
+    }
+
+    return isShowCancel && React.createElement("div", {
+      className: `${classPrefix}-suffix`
+    }, React.createElement(Button, {
+      fill: 'none',
+      className: `${classPrefix}-cancel-button`,
+      onClick: () => {
+        var _a, _b, _c;
+
+        if (props.clearOnCancel) {
+          (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+        }
+
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+        (_c = props.onCancel) === null || _c === void 0 ? void 0 : _c.call(props);
+      },
+      onMouseDown: e => {
+        e.preventDefault();
+      }
+    }, props.cancelText));
+  };
+
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, {
+      [`${classPrefix}-active`]: hasFocus
+    })
+  }, React.createElement("div", {
+    className: `${classPrefix}-input-box`
+  }, props.icon && React.createElement("div", {
+    className: `${classPrefix}-input-box-icon`
+  }, props.icon), React.createElement(Input, {
+    ref: inputRef,
+    className: classNames(`${classPrefix}-input`, {
+      [`${classPrefix}-input-without-icon`]: !props.icon
+    }),
+    value: value,
+    onChange: setValue,
+    maxLength: props.maxLength,
+    placeholder: props.placeholder,
+    clearable: props.clearable,
+    onlyShowClearWhenFocus: props.onlyShowClearWhenFocus,
+    onFocus: e => {
+      var _a;
+
+      setHasFocus(true);
+      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    onBlur: e => {
+      var _a;
+
+      setHasFocus(false);
+      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    onClear: props.onClear,
+    type: 'search',
+    enterKeyHint: 'search',
+    onEnterPress: () => {
+      var _a, _b;
+
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      (_b = props.onSearch) === null || _b === void 0 ? void 0 : _b.call(props, value);
+    }
+  })), renderCancelButton()));
+});

package/2x/es/components/selector/check-mark.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CheckMark: React.MemoExoticComponent<() => JSX.Element>;

package/2x/es/components/selector/check-mark.js

@@ -0,0 +1,29 @@
+import React, { memo } from 'react';
+export const CheckMark = memo(() => {
+  return React.createElement("svg", {
+    width: '17px',
+    height: '13px',
+    viewBox: '0 0 17 13',
+    version: '1.1',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, React.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd',
+    strokeLinecap: 'round',
+    strokeLinejoin: 'round'
+  }, React.createElement("g", {
+    transform: 'translate(-2832.000000, -1103.000000)',
+    stroke: '#FFFFFF',
+    strokeWidth: '3'
+  }, React.createElement("g", {
+    transform: 'translate(2610.000000, 955.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(24.000000, 91.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(179.177408, 36.687816)'
+  }, React.createElement("polyline", {
+    points: '34.2767388 22 24.797043 31.4796958 21 27.6826527'
+  })))))));
+});

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

@@ -0,0 +1,4 @@
+import './selector.less';
+import { Selector } from './selector';
+export type { SelectorProps, SelectorOption } from './selector';
+export default Selector;

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

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

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

@@ -0,0 +1,69 @@
+.adm-selector {
+  --color: var(--adm-color-box);
+  --checked-color: #e7f1ff;
+  --text-color: var(--adm-color-text);
+  --checked-text-color: var(--adm-color-primary);
+  --border: none;
+  --checked-border: none;
+  --border-radius: 4px;
+  --padding: 16px 32px;
+  overflow: hidden;
+  font-size: var(--adm-font-size-7);
+  line-height: 1.4;
+}
+
+.adm-selector .adm-space.adm-space {
+  --gap: 24px;
+}
+
+.adm-selector-item {
+  padding: var(--padding);
+  position: relative;
+  background-color: var(--color);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  color: var(--text-color);
+  opacity: 1;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  overflow: hidden;
+  vertical-align: top;
+}
+
+.adm-selector-item-description {
+  font-size: var(--adm-font-size-main);
+  color: var(--adm-color-weak);
+}
+
+.adm-selector-item-active,
+.adm-selector-item-multiple-active {
+  color: var(--checked-text-color);
+  background-color: var(--checked-color);
+  border: var(--checked-border);
+}
+
+.adm-selector-item .adm-selector-check-mark-wrapper {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-top: solid 16px transparent;
+  border-bottom: solid 16px var(--adm-color-primary);
+  border-left: solid 20px transparent;
+  border-right: solid 20px var(--adm-color-primary);
+}
+
+.adm-selector-item .adm-selector-check-mark-wrapper > svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 12px;
+  width: 16px;
+}
+
+.adm-selector-item-disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}

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

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare type SelectorValue = string | number;
+export interface SelectorOption<V> {
+    label: ReactNode;
+    description?: ReactNode;
+    value: V;
+    disabled?: boolean;
+}
+export declare type SelectorProps<V> = {
+    options: SelectorOption<V>[];
+    columns?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?: (v: V[], extend: {
+        items: SelectorOption<V>[];
+    }) => void;
+    showCheckMark?: boolean;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
+export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

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

@@ -0,0 +1,71 @@
+import classNames from 'classnames';
+import React from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import Space from '../space';
+import Grid from '../grid';
+import { convertPx } from '../../utils/convert-px';
+import { usePropsValue } from '../../utils/use-props-value';
+import { CheckMark } from './check-mark';
+const classPrefix = `adm-selector`;
+const defaultProps = {
+  multiple: false,
+  defaultValue: [],
+  showCheckMark: true
+};
+export const Selector = p => {
+  const props = mergeProps(defaultProps, p);
+  const [value, setValue] = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: val => {
+      var _a;
+
+      const extend = {
+        get items() {
+          return props.options.filter(option => val.includes(option.value));
+        }
+
+      };
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+    }
+  });
+  const items = props.options.map(option => {
+    const active = (value || []).includes(option.value);
+    const disabled = option.disabled || props.disabled;
+    const itemCls = classNames(`${classPrefix}-item`, {
+      [`${classPrefix}-item-active`]: active && !props.multiple,
+      [`${classPrefix}-item-multiple-active`]: active && props.multiple,
+      [`${classPrefix}-item-disabled`]: disabled
+    });
+    return React.createElement("div", {
+      key: option.value,
+      className: itemCls,
+      onClick: () => {
+        if (disabled) {
+          return;
+        }
+
+        if (props.multiple) {
+          const val = active ? value.filter(v => v !== option.value) : [...value, option.value];
+          setValue(val);
+        } else {
+          const val = active ? [] : [option.value];
+          setValue(val);
+        }
+      }
+    }, option.label, option.description && React.createElement("div", {
+      className: `${classPrefix}-item-description`
+    }, option.description), active && props.showCheckMark && React.createElement("div", {
+      className: `${classPrefix}-check-mark-wrapper`
+    }, React.createElement(CheckMark, null)));
+  });
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, !props.columns && React.createElement(Space, {
+    wrap: true
+  }, items), props.columns && React.createElement(Grid, {
+    columns: props.columns,
+    gap: convertPx(8)
+  }, items)));
+};

package/2x/es/components/side-bar/corner.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Corner: React.NamedExoticComponent<NativeProps<never>>;

package/2x/es/components/side-bar/corner.js

@@ -0,0 +1,14 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const Corner = memo(props => withNativeProps(props, React.createElement("svg", {
+  viewBox: '0 0 30 30'
+}, React.createElement("g", {
+  stroke: 'none',
+  strokeWidth: '1',
+  fill: 'none',
+  fillRule: 'evenodd'
+}, React.createElement("path", {
+  d: 'M30,0 C13.4314575,3.04359188e-15 -2.02906125e-15,13.4314575 0,30 L0,30 L0,0 Z',
+  fill: 'var(--adm-color-background)',
+  transform: 'translate(15.000000, 15.000000) scale(-1, -1) translate(-15.000000, -15.000000) '
+})))));

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './side-bar.less';
+export type { SideBarProps, SideBarItemProps } from './side-bar';
+declare const _default: import("react").FC<import("./side-bar").SideBarProps> & {
+    Item: import("react").FC<import("./side-bar").SideBarItemProps>;
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+import "./side-bar.css";
+import { SideBar, SideBarItem } from './side-bar';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+export default attachPropertiesToComponent(SideBar, {
+  Item: SideBarItem
+});