antd-mobile 5.17.0 → 5.18.0

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

@@ -0,0 +1,152 @@
+.adm-button {
+  --color: var(--adm-color-white);
+  --text-color: var(--adm-button-text-color, var(--adm-color-text));
+  --background-color: var(--adm-button-background-color, var(--adm-color-background));
+  --border-radius: var(--adm-button-border-radius, 8px);
+  --border-width: var(--adm-button-border-width, 2px);
+  --border-style: var(--adm-button-border-style, solid);
+  --border-color: var(--adm-button-border-color, var(--adm-color-border));
+  color: var(--text-color);
+  background-color: var(--background-color);
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  height: auto;
+  padding: 14px 24px;
+  margin: 0;
+  font-size: var(--adm-font-size-9);
+  line-height: 1.4;
+  text-align: center;
+  border: var(--border-width) var(--border-style) var(--border-color);
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  transition: opacity ease 0.15s;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.adm-button:focus {
+  outline: none;
+}
+
+.adm-button::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  border: var(--border-width) var(--border-style) #000;
+  border-radius: var(--border-radius);
+  opacity: 0;
+  content: ' ';
+  box-sizing: content-box;
+}
+
+.adm-button:active::before {
+  opacity: 0.08;
+}
+
+.adm-button-default.adm-button-fill-outline {
+  --background-color: transparent;
+  --border-color: var(--adm-color-text);
+}
+
+.adm-button-default.adm-button-fill-none {
+  --background-color: transparent;
+  --border-width: 0;
+}
+
+.adm-button:not(.adm-button-default) {
+  --text-color: var(--adm-color-white);
+  --background-color: var(--color);
+  --border-color: var(--color);
+}
+
+.adm-button:not(.adm-button-default).adm-button-fill-outline {
+  --text-color: var(--color);
+  --background-color: transparent;
+}
+
+.adm-button:not(.adm-button-default).adm-button-fill-none {
+  --text-color: var(--color);
+  --background-color: transparent;
+  --border-width: 0;
+}
+
+.adm-button-primary {
+  --color: var(--adm-color-primary);
+}
+
+.adm-button-success {
+  --color: var(--adm-color-success);
+}
+
+.adm-button-danger {
+  --color: var(--adm-color-danger);
+}
+
+.adm-button-warning {
+  --color: var(--adm-color-warning);
+}
+
+.adm-button-block {
+  display: block;
+  width: 100%;
+}
+
+.adm-button-disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.adm-button-disabled:active::before {
+  display: none;
+}
+
+.adm-button.adm-button-mini {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: var(--adm-font-size-main);
+}
+
+.adm-button.adm-button-mini.adm-button-shape-rounded {
+  padding-left: 18px;
+  padding-right: 18px;
+}
+
+.adm-button.adm-button-small {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: var(--adm-font-size-7);
+}
+
+.adm-button.adm-button-large {
+  padding-top: 22px;
+  padding-bottom: 22px;
+  font-size: var(--adm-font-size-10);
+}
+
+.adm-button.adm-button-shape-rounded {
+  --border-radius: 2000px;
+}
+
+.adm-button.adm-button-shape-rectangular {
+  --border-radius: 0;
+}
+
+.adm-button-loading {
+  vertical-align: bottom;
+}
+
+.adm-button-loading-wrapper {
+  display: flex;
+  height: 1.4em;
+  align-items: center;
+  justify-content: center;
+}
+
+.adm-button-loading-wrapper > .adm-loading {
+  opacity: 0.6;
+}

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare type NativeButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export declare type ButtonProps = {
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    fill?: 'solid' | 'outline' | 'none';
+    size?: 'mini' | 'small' | 'middle' | 'large';
+    block?: boolean;
+    loading?: boolean | 'auto';
+    loadingText?: string;
+    loadingIcon?: React.ReactNode;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown;
+    type?: 'submit' | 'reset' | 'button';
+    shape?: 'default' | 'rounded' | 'rectangular';
+    children?: React.ReactNode;
+} & Pick<NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd'> & NativeProps<'--text-color' | '--background-color' | '--border-radius' | '--border-width' | '--border-style' | '--border-color'>;
+export declare type ButtonRef = {
+    nativeElement: HTMLButtonElement | null;
+};
+export declare const Button: React.ForwardRefExoticComponent<{
+    color?: "default" | "primary" | "success" | "warning" | "danger" | undefined;
+    fill?: "none" | "solid" | "outline" | undefined;
+    size?: "small" | "large" | "middle" | "mini" | undefined;
+    block?: boolean | undefined;
+    loading?: boolean | "auto" | undefined;
+    loadingText?: string | undefined;
+    loadingIcon?: React.ReactNode;
+    disabled?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | Promise<void> | unknown) | undefined;
+    type?: "reset" | "submit" | "button" | undefined;
+    shape?: "default" | "rounded" | "rectangular" | undefined;
+    children?: React.ReactNode;
+} & Pick<NativeButtonProps, "onMouseDown" | "onMouseUp" | "onTouchEnd" | "onTouchStart"> & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--border-radius" | "--text-color" | "--background-color" | "--border-width" | "--border-style" | "--border-color", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ButtonRef>>;
+export {};

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

@@ -0,0 +1,72 @@
+import { __awaiter } from "tslib";
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import classNames from 'classnames';
+import DotLoading from '../dot-loading';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+import { isPromise } from '../../utils/validate';
+const classPrefix = `adm-button`;
+const defaultProps = {
+  color: 'default',
+  fill: 'solid',
+  block: false,
+  loading: false,
+  loadingIcon: React.createElement(DotLoading, {
+    color: 'currentColor'
+  }),
+  type: 'button',
+  shape: 'default',
+  size: 'middle'
+};
+export const Button = forwardRef((p, ref) => {
+  const props = mergeProps(defaultProps, p);
+  const [innerLoading, setInnerLoading] = useState(false);
+  const nativeButtonRef = useRef(null);
+  const loading = props.loading === 'auto' ? innerLoading : props.loading;
+  const disabled = props.disabled || loading;
+  useImperativeHandle(ref, () => ({
+    get nativeElement() {
+      return nativeButtonRef.current;
+    }
+
+  }));
+
+  const handleClick = e => __awaiter(void 0, void 0, void 0, function* () {
+    if (!props.onClick) return;
+    const promise = props.onClick(e);
+
+    if (isPromise(promise)) {
+      try {
+        setInnerLoading(true);
+        yield promise;
+        setInnerLoading(false);
+      } catch (e) {
+        setInnerLoading(false);
+        throw e;
+      }
+    }
+  });
+
+  return withNativeProps(props, React.createElement("button", {
+    ref: nativeButtonRef,
+    type: props.type,
+    onClick: handleClick,
+    className: classNames(classPrefix, props.color ? `${classPrefix}-${props.color}` : null, {
+      [`${classPrefix}-block`]: props.block,
+      [`${classPrefix}-disabled`]: disabled,
+      [`${classPrefix}-fill-outline`]: props.fill === 'outline',
+      [`${classPrefix}-fill-none`]: props.fill === 'none',
+      [`${classPrefix}-mini`]: props.size === 'mini',
+      [`${classPrefix}-small`]: props.size === 'small',
+      [`${classPrefix}-large`]: props.size === 'large',
+      [`${classPrefix}-loading`]: loading
+    }, `${classPrefix}-shape-${props.shape}`),
+    disabled: disabled,
+    onMouseDown: props.onMouseDown,
+    onMouseUp: props.onMouseUp,
+    onTouchStart: props.onTouchStart,
+    onTouchEnd: props.onTouchEnd
+  }, loading ? React.createElement("div", {
+    className: `${classPrefix}-loading-wrapper`
+  }, props.loadingIcon, props.loadingText) : props.children));
+});

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

@@ -0,0 +1,106 @@
+.adm-button {
+  color: #333333;
+  background-color: #ffffff;
+  font-size: 34px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #eeeeee;
+  border-radius: 8px;
+}
+
+.adm-button::before {
+  transform: translate(-2px, -2px);
+  border: 2px solid #000;
+  border-radius: 8px;
+}
+
+.adm-button-default.adm-button-fill-outline {
+  background-color: transparent;
+  border-color: #333333;
+}
+
+.adm-button-default.adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+
+.adm-button:not(.adm-button-default) {
+  color: #ffffff;
+}
+
+.adm-button:not(.adm-button-default).adm-button-fill-outline {
+  background-color: transparent;
+}
+
+.adm-button:not(.adm-button-default).adm-button-fill-none {
+  background-color: transparent;
+  border-width: 0;
+}
+
+.adm-button-primary {
+  background-color: #1677ff;
+  border-color: #1677ff;
+}
+
+.adm-button-primary.adm-button-fill-outline,
+.adm-button-primary.adm-button-fill-none {
+  color: #1677ff;
+}
+
+.adm-button-success {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+
+.adm-button-success.adm-button-fill-outline,
+.adm-button-success.adm-button-fill-none {
+  color: #00b578;
+}
+
+.adm-button-danger {
+  background-color: #00b578;
+  border-color: #00b578;
+}
+
+.adm-button-danger.adm-button-fill-outline,
+.adm-button-danger.adm-button-fill-none {
+  color: #00b578;
+}
+
+.adm-button-warning {
+  background-color: #ff8f1f;
+  border-color: #ff8f1f;
+}
+
+.adm-button-warning.adm-button-fill-outline,
+.adm-button-warning.adm-button-fill-none {
+  color: #ff8f1f;
+}
+
+.adm-button.adm-button-mini {
+  font-size: 26px;
+}
+
+.adm-button.adm-button-small {
+  padding-top: 6px;
+  padding-bottom: 6px;
+  font-size: 30px;
+}
+
+.adm-button.adm-button-large {
+  padding-top: 22px;
+  padding-bottom: 22px;
+  font-size: 36px;
+}
+
+.adm-button.adm-button-shape-rounded {
+  border-radius: 2000px;
+}
+
+.adm-button.adm-button-shape-rounded::before {
+  border-radius: 2000px;
+}
+
+.adm-button.adm-button-shape-rectangular {
+  border-radius: 0;
+}

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

@@ -0,0 +1,4 @@
+import './button.less';
+import { Button } from './button';
+export type { ButtonProps, ButtonRef } from './button';
+export default Button;

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

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

package/2x/es/components/calendar/arrow-left-double.d.ts

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

package/2x/es/components/calendar/arrow-left-double.js

@@ -0,0 +1,29 @@
+import React from 'react';
+export const ArrowLeftDouble = () => {
+  return React.createElement("svg", {
+    height: '1em',
+    viewBox: '0 0 44 44'
+  }, React.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, React.createElement("g", {
+    transform: 'translate(-24.000000, -22.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(24.000000, 22.000000)'
+  }, React.createElement("rect", {
+    x: '0',
+    y: '0',
+    width: '44',
+    height: '44'
+  }), React.createElement("g", {
+    transform: 'translate(7.000000, 4.000000)',
+    fill: 'currentColor',
+    fillRule: 'nonzero'
+  }, React.createElement("path", {
+    d: 'M19.4833058,2.71985611 L3.53051139,17.0699744 C3.0173831,17.5315665 2.97522952,18.3220903 3.43630803,18.8357433 L3.43630796,18.8357432 C3.46601289,18.8688164 3.49745845,18.9002801 3.53051133,18.9300007 L19.4833057,33.2801611 C20.1234001,33.8559077 20.1759552,34.8420707 19.6007967,35.4827774 C19.0256382,36.1235263 18.0404824,36.1761351 17.400388,35.6003885 L1.44759367,21.2502703 L1.4475933,21.25027 C1.33208743,21.1463692 1.22220259,21.036372 1.11840792,20.920748 C-0.49302969,19.1256817 -0.345639536,16.3628317 1.4475933,14.7497465 L17.4003877,0.399628282 C18.0404821,-0.176160428 19.0256378,-0.123509422 19.6007963,0.517239417 C20.1759548,1.1579461 20.1233997,2.14410915 19.4833053,2.7198557 L19.4833058,2.71985611 Z'
+  }), React.createElement("path", {
+    d: 'M19.5305114,17.0699744 C19.0173831,17.5315665 18.9752295,18.3220903 19.436308,18.8357433 C19.4660129,18.8688164 19.4974585,18.9002801 19.5305113,18.9300007 L29.4833057,27.2801611 C30.1234001,27.8559077 30.1759552,28.8420707 29.6007967,29.4827774 C29.0256382,30.1235263 28.0404824,30.1761351 27.400388,29.6003885 L17.4475937,21.2502703 C17.3320874,21.1463692 17.2222026,21.036372 17.1184079,20.920748 C15.5069703,19.1256817 15.6543605,16.3628317 17.4475933,14.7497465 L27.4003877,6.39962828 C28.0404821,5.82383957 29.0256378,5.87649058 29.6007963,6.51723942 C30.1759548,7.1579461 30.1233997,8.14410915 29.4833053,8.7198557 L19.5305114,17.0699744 Z'
+  }))))));
+};

package/2x/es/components/calendar/arrow-left.d.ts

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

package/2x/es/components/calendar/arrow-left.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export const ArrowLeft = () => {
+  return React.createElement("svg", {
+    height: '1em',
+    viewBox: '0 0 44 44'
+  }, React.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, React.createElement("g", {
+    transform: 'translate(-100.000000, -22.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(100.000000, 22.000000)'
+  }, React.createElement("rect", {
+    x: '0',
+    y: '0',
+    width: '44',
+    height: '44'
+  }), React.createElement("g", {
+    transform: 'translate(12.000000, 4.000000)',
+    fill: 'currentColor',
+    fillRule: 'nonzero'
+  }, React.createElement("path", {
+    d: 'M19.4833058,2.71985611 L3.53051139,17.0699744 C3.0173831,17.5315665 2.97522952,18.3220903 3.43630803,18.8357433 L3.43630796,18.8357432 C3.46601289,18.8688164 3.49745845,18.9002801 3.53051133,18.9300007 L19.4833057,33.2801611 C20.1234001,33.8559077 20.1759552,34.8420707 19.6007967,35.4827774 C19.0256382,36.1235263 18.0404824,36.1761351 17.400388,35.6003885 L1.44759367,21.2502703 L1.4475933,21.25027 C1.33208743,21.1463692 1.22220259,21.036372 1.11840792,20.920748 C-0.49302969,19.1256817 -0.345639536,16.3628317 1.4475933,14.7497465 L17.4003877,0.399628282 C18.0404821,-0.176160428 19.0256378,-0.123509422 19.6007963,0.517239417 C20.1759548,1.1579461 20.1233997,2.14410915 19.4833053,2.7198557 L19.4833058,2.71985611 Z'
+  }))))));
+};

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

@@ -0,0 +1,121 @@
+.adm-calendar .adm-calendar-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 8px;
+}
+
+.adm-calendar .adm-calendar-header a.adm-calendar-arrow-button {
+  padding: 8px 16px;
+  display: block;
+  flex: none;
+}
+
+.adm-calendar .adm-calendar-header a.adm-calendar-arrow-button svg {
+  height: 44px;
+}
+
+.adm-calendar .adm-calendar-header a.adm-calendar-arrow-button.adm-calendar-arrow-button-right svg {
+  transform: rotate(180deg);
+}
+
+.adm-calendar .adm-calendar-header .adm-calendar-title {
+  font-size: var(--adm-font-size-10);
+  flex: auto;
+  text-align: center;
+}
+
+.adm-calendar .adm-calendar-body {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.adm-calendar-cells {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  padding: 16px 16px 8px;
+}
+
+.adm-calendar-cell {
+  flex: none;
+  box-sizing: border-box;
+  width: calc(100% / 7);
+  height: 96px;
+  margin-bottom: 8px;
+  padding: 4px;
+  color: var(--adm-color-text);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.adm-calendar-cell.adm-calendar-cell-today {
+  color: var(--adm-color-primary);
+}
+
+.adm-calendar-cell.adm-calendar-cell-disabled {
+  color: var(--adm-color-light);
+}
+
+.adm-calendar-cell.adm-calendar-cell-disabled .adm-calendar-cell-bottom {
+  color: var(--adm-color-light);
+}
+
+.adm-calendar-cell.adm-calendar-cell-selected.adm-calendar-cell.adm-calendar-cell-selected {
+  background: var(--adm-color-primary);
+  color: var(--adm-color-white);
+}
+
+.adm-calendar-cell.adm-calendar-cell-selected .adm-calendar-cell-bottom {
+  color: var(--adm-color-white);
+}
+
+.adm-calendar-cell.adm-calendar-cell-selected.adm-calendar-cell.adm-calendar-cell-selected-begin {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.adm-calendar-cell.adm-calendar-cell-selected.adm-calendar-cell.adm-calendar-cell-selected-end {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.adm-calendar-cell.adm-calendar-cell-disabled.adm-calendar-cell.adm-calendar-cell-selected {
+  color: var(--adm-color-light);
+}
+
+.adm-calendar-cell .adm-calendar-cell-top {
+  flex: none;
+  font-size: var(--adm-font-size-10);
+}
+
+.adm-calendar-cell .adm-calendar-cell-bottom {
+  flex: none;
+  font-size: var(--adm-font-size-4);
+  height: 24px;
+  line-height: 24px;
+  color: var(--adm-color-weak);
+}
+
+.adm-calendar-mark {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  border-bottom: solid 2px var(--adm-color-border);
+  height: 90px;
+  box-sizing: border-box;
+  font-size: var(--adm-font-size-7);
+  padding: 0 16px;
+}
+
+.adm-calendar-mark .adm-calendar-mark-cell {
+  flex: 1;
+  text-align: center;
+}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare type Page = {
+    month: number;
+    year: number;
+};
+export declare type CalendarRef = {
+    jumpTo: (page: Page | ((page: Page) => Page)) => void;
+    jumpToToday: () => void;
+};
+export declare type CalendarProps = {
+    prevMonthButton?: React.ReactNode;
+    prevYearButton?: React.ReactNode;
+    nextMonthButton?: React.ReactNode;
+    nextYearButton?: React.ReactNode;
+    onPageChange?: (year: number, month: number) => void;
+    weekStartsOn?: 'Monday' | 'Sunday';
+    renderLabel?: (date: Date) => string | null | undefined;
+    allowClear?: boolean;
+    max?: Date;
+    min?: Date;
+    shouldDisableDate?: (date: Date) => boolean;
+} & ({
+    selectionMode?: undefined;
+    value?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+} | {
+    selectionMode: 'single';
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (val: Date | null) => void;
+} | {
+    selectionMode: 'range';
+    value?: [Date, Date] | null;
+    defaultValue?: [Date, Date] | null;
+    onChange?: (val: [Date, Date] | null) => void;
+}) & NativeProps;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
+export {};