antd-mobile 5.17.0 → 5.18.0

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

@@ -0,0 +1,206 @@
+import React, { forwardRef, useState, useImperativeHandle, useMemo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+import dayjs from 'dayjs';
+import classNames from 'classnames';
+import { mergeProps } from '../../utils/with-default-props';
+import { ArrowLeft } from './arrow-left';
+import { ArrowLeftDouble } from './arrow-left-double';
+import { useConfig } from '../config-provider';
+import isoWeek from 'dayjs/plugin/isoWeek';
+import { useUpdateEffect } from 'ahooks';
+import { usePropsValue } from '../../utils/use-props-value';
+import { convertValueToRange } from './convert';
+dayjs.extend(isoWeek);
+const classPrefix = 'adm-calendar';
+const defaultProps = {
+  weekStartsOn: 'Sunday',
+  defaultValue: null,
+  allowClear: true,
+  prevMonthButton: React.createElement(ArrowLeft, null),
+  prevYearButton: React.createElement(ArrowLeftDouble, null),
+  nextMonthButton: React.createElement(ArrowLeft, null),
+  nextYearButton: React.createElement(ArrowLeftDouble, null)
+};
+export const Calendar = forwardRef((p, ref) => {
+  const today = dayjs();
+  const props = mergeProps(defaultProps, p);
+  const {
+    locale
+  } = useConfig();
+  const markItems = [...locale.Calendar.markItems];
+
+  if (props.weekStartsOn === 'Sunday') {
+    const item = markItems.pop();
+    if (item) markItems.unshift(item);
+  }
+
+  const [dateRange, setDateRange] = usePropsValue({
+    value: props.value === undefined ? undefined : convertValueToRange(props.selectionMode, props.value),
+    defaultValue: convertValueToRange(props.selectionMode, props.defaultValue),
+    onChange: v => {
+      var _a, _b;
+
+      if (props.selectionMode === 'single') {
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v ? v[0] : null);
+      } else if (props.selectionMode === 'range') {
+        (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, v);
+      }
+    }
+  });
+  const [intermediate, setIntermediate] = useState(false);
+  const [current, setCurrent] = useState(() => dayjs(dateRange ? dateRange[0] : today).date(1));
+  useUpdateEffect(() => {
+    var _a;
+
+    (_a = props.onPageChange) === null || _a === void 0 ? void 0 : _a.call(props, current.year(), current.month() + 1);
+  }, [current]);
+  useImperativeHandle(ref, () => ({
+    jumpTo: pageOrPageGenerator => {
+      let page;
+
+      if (typeof pageOrPageGenerator === 'function') {
+        page = pageOrPageGenerator({
+          year: current.year(),
+          month: current.month() + 1
+        });
+      } else {
+        page = pageOrPageGenerator;
+      }
+
+      setCurrent(dayjs().year(page.year).month(page.month - 1).date(1));
+    },
+    jumpToToday: () => {
+      setCurrent(dayjs().date(1));
+    }
+  }));
+  const header = React.createElement("div", {
+    className: `${classPrefix}-header`
+  }, React.createElement("a", {
+    className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-year`,
+    onClick: () => {
+      setCurrent(current.subtract(1, 'year'));
+    }
+  }, props.prevYearButton), React.createElement("a", {
+    className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-month`,
+    onClick: () => {
+      setCurrent(current.subtract(1, 'month'));
+    }
+  }, props.prevMonthButton), React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, locale.Calendar.renderYearAndMonth(current.year(), current.month() + 1)), React.createElement("a", {
+    className: classNames(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-month`),
+    onClick: () => {
+      setCurrent(current.add(1, 'month'));
+    }
+  }, props.nextMonthButton), React.createElement("a", {
+    className: classNames(`${classPrefix}-arrow-button`, `${classPrefix}-arrow-button-right`, `${classPrefix}-arrow-button-right-year`),
+    onClick: () => {
+      setCurrent(current.add(1, 'year'));
+    }
+  }, props.nextYearButton));
+  const maxDay = useMemo(() => props.max && dayjs(props.max), [props.max]);
+  const minDay = useMemo(() => props.min && dayjs(props.min), [props.min]);
+
+  function renderCells() {
+    var _a;
+
+    const cells = [];
+    let iterator = current.subtract(current.isoWeekday(), 'day');
+
+    if (props.weekStartsOn === 'Monday') {
+      iterator = iterator.add(1, 'day');
+    }
+
+    while (cells.length < 6 * 7) {
+      const d = iterator;
+      let isSelect = false;
+      let isBegin = false;
+      let isEnd = false;
+
+      if (dateRange) {
+        const [begin, end] = dateRange;
+        isBegin = d.isSame(begin, 'day');
+        isEnd = d.isSame(end, 'day');
+        isSelect = isBegin || isEnd || d.isAfter(begin, 'day') && d.isBefore(end, 'day');
+      }
+
+      const inThisMonth = d.month() === current.month();
+      const disabled = props.shouldDisableDate ? props.shouldDisableDate(d.toDate()) : maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
+      cells.push(React.createElement("div", {
+        key: d.valueOf(),
+        className: classNames(`${classPrefix}-cell`, (disabled || !inThisMonth) && `${classPrefix}-cell-disabled`, inThisMonth && {
+          [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
+          [`${classPrefix}-cell-selected`]: isSelect,
+          [`${classPrefix}-cell-selected-begin`]: isBegin,
+          [`${classPrefix}-cell-selected-end`]: isEnd
+        }),
+        onClick: () => {
+          if (!props.selectionMode) return;
+          if (disabled) return;
+          const date = d.toDate();
+
+          if (!inThisMonth) {
+            setCurrent(d.clone().date(1));
+          }
+
+          function shouldClear() {
+            if (!props.allowClear) return false;
+            if (!dateRange) return false;
+            const [begin, end] = dateRange;
+            return d.isSame(begin, 'date') && d.isSame(end, 'day');
+          }
+
+          if (props.selectionMode === 'single') {
+            if (props.allowClear && shouldClear()) {
+              setDateRange(null);
+              return;
+            }
+
+            setDateRange([date, date]);
+          } else if (props.selectionMode === 'range') {
+            if (!dateRange) {
+              setDateRange([date, date]);
+              setIntermediate(true);
+              return;
+            }
+
+            if (shouldClear()) {
+              setDateRange(null);
+              setIntermediate(false);
+              return;
+            }
+
+            if (intermediate) {
+              const another = dateRange[0];
+              setDateRange(another > date ? [date, another] : [another, date]);
+              setIntermediate(false);
+            } else {
+              setDateRange([date, date]);
+              setIntermediate(true);
+            }
+          }
+        }
+      }, React.createElement("div", {
+        className: `${classPrefix}-cell-top`
+      }, d.date()), React.createElement("div", {
+        className: `${classPrefix}-cell-bottom`
+      }, (_a = props.renderLabel) === null || _a === void 0 ? void 0 : _a.call(props, d.toDate()))));
+      iterator = iterator.add(1, 'day');
+    }
+
+    return cells;
+  }
+
+  const body = React.createElement("div", {
+    className: `${classPrefix}-cells`
+  }, renderCells());
+  const mark = React.createElement("div", {
+    className: `${classPrefix}-mark`
+  }, markItems.map((item, index) => React.createElement("div", {
+    key: index,
+    className: `${classPrefix}-mark-cell`
+  }, item)));
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix
+  }, header, mark, body));
+});

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

@@ -0,0 +1,2 @@
+export declare type DateRange = [Date, Date] | null;
+export declare function convertValueToRange(selectionMode: 'single' | 'range' | undefined, value: Date | [Date, Date] | null): DateRange;

package/2x/es/components/calendar/convert.js

@@ -0,0 +1,15 @@
+export function convertValueToRange(selectionMode, value) {
+  if (selectionMode === undefined) {
+    return null;
+  }
+
+  if (value === null) {
+    return null;
+  }
+
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  return [value, value];
+}

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

@@ -0,0 +1,4 @@
+import './calendar.less';
+import { Calendar } from './calendar';
+export type { CalendarProps, CalendarRef } from './calendar';
+export default Calendar;

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

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

package/2x/es/components/capsule-tabs/capsule-tabs.css

@@ -0,0 +1,55 @@
+.adm-capsule-tabs {
+  position: relative;
+  min-width: 0;
+}
+
+.adm-capsule-tabs-header {
+  position: relative;
+  padding: 24px 12px;
+  border-bottom: solid 2px var(--adm-color-border);
+}
+
+.adm-capsule-tabs-tab-list {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  overflow-x: scroll;
+  scrollbar-width: none;
+}
+
+.adm-capsule-tabs-tab-list::-webkit-scrollbar {
+  display: none;
+}
+
+.adm-capsule-tabs-tab-wrapper {
+  flex: auto;
+  padding: 0 12px;
+}
+
+.adm-capsule-tabs-tab {
+  position: relative;
+  padding: 16px 40px;
+  margin: 0 auto;
+  border-radius: 40px;
+  cursor: pointer;
+  font-size: var(--adm-font-size-7);
+  text-align: center;
+  white-space: nowrap;
+  background-color: var(--adm-color-box);
+}
+
+.adm-capsule-tabs-tab-active {
+  color: var(--adm-color-white);
+  background-color: var(--adm-color-primary);
+}
+
+.adm-capsule-tabs-tab-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.adm-capsule-tabs-content {
+  padding: 24px;
+}

package/2x/es/components/capsule-tabs/capsule-tabs.d.ts

@@ -0,0 +1,17 @@
+import React, { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type CapsuleTabProps = {
+    title: ReactNode;
+    disabled?: boolean;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
+    children?: ReactNode;
+} & NativeProps;
+export declare const CapsuleTab: FC<CapsuleTabProps>;
+export declare type CapsuleTabsProps = {
+    activeKey?: string | null;
+    defaultActiveKey?: string | null;
+    onChange?: (key: string) => void;
+    children?: React.ReactNode;
+} & NativeProps;
+export declare const CapsuleTabs: FC<CapsuleTabsProps>;

package/2x/es/components/capsule-tabs/capsule-tabs.js

@@ -0,0 +1,101 @@
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import { animated } from '@react-spring/web';
+import { withNativeProps } from '../../utils/native-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { useResizeEffect } from '../../utils/use-resize-effect';
+import { useTabListScroll } from '../../utils/use-tab-list-scroll';
+import ScrollMask from '../scroll-mask';
+import { ShouldRender } from '../../utils/should-render';
+import { traverseReactNode } from '../../utils/traverse-react-node';
+const classPrefix = `adm-capsule-tabs`;
+export const CapsuleTab = () => {
+  return null;
+};
+export const CapsuleTabs = props => {
+  var _a;
+
+  const tabListContainerRef = useRef(null);
+  const rootRef = useRef(null);
+  const keyToIndexRecord = {};
+  let firstActiveKey = null;
+  const panes = [];
+  traverseReactNode(props.children, (child, index) => {
+    if (!React.isValidElement(child)) return;
+    const key = child.key;
+    if (typeof key !== 'string') return;
+
+    if (index === 0) {
+      firstActiveKey = key;
+    }
+
+    const length = panes.push(child);
+    keyToIndexRecord[key] = length - 1;
+  });
+  const [activeKey, setActiveKey] = usePropsValue({
+    value: props.activeKey,
+    defaultValue: (_a = props.defaultActiveKey) !== null && _a !== void 0 ? _a : firstActiveKey,
+    onChange: v => {
+      var _a;
+
+      if (v === null) return;
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v);
+    }
+  });
+  const {
+    scrollLeft,
+    animate
+  } = useTabListScroll(tabListContainerRef, keyToIndexRecord[activeKey]);
+  useResizeEffect(() => {
+    animate(true);
+  }, rootRef);
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    ref: rootRef
+  }, React.createElement("div", {
+    className: `${classPrefix}-header`
+  }, React.createElement(ScrollMask, {
+    scrollTrackRef: tabListContainerRef
+  }), React.createElement(animated.div, {
+    className: `${classPrefix}-tab-list`,
+    ref: tabListContainerRef,
+    scrollLeft: scrollLeft
+  }, panes.map(pane => withNativeProps(pane.props, React.createElement("div", {
+    key: pane.key,
+    className: `${classPrefix}-tab-wrapper`
+  }, React.createElement("div", {
+    onClick: () => {
+      const {
+        key
+      } = pane;
+      if (pane.props.disabled) return;
+
+      if (key === undefined || key === null) {
+        return;
+      }
+
+      setActiveKey(key.toString());
+    },
+    className: classNames(`${classPrefix}-tab`, {
+      [`${classPrefix}-tab-active`]: pane.key === activeKey,
+      [`${classPrefix}-tab-disabled`]: pane.props.disabled
+    })
+  }, pane.props.title)))))), panes.map(pane => {
+    if (pane.props.children === undefined) {
+      return null;
+    }
+
+    const active = pane.key === activeKey;
+    return React.createElement(ShouldRender, {
+      key: pane.key,
+      active: active,
+      forceRender: pane.props.forceRender,
+      destroyOnClose: pane.props.destroyOnClose
+    }, React.createElement("div", {
+      className: `${classPrefix}-content`,
+      style: {
+        display: active ? 'block' : 'none'
+      }
+    }, pane.props.children));
+  })));
+};

package/2x/es/components/capsule-tabs/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import './capsule-tabs.less';
+export type { CapsuleTabsProps, CapsuleTabProps } from './capsule-tabs';
+declare const _default: import("react").FC<import("./capsule-tabs").CapsuleTabsProps> & {
+    Tab: import("react").FC<import("./capsule-tabs").CapsuleTabProps>;
+};
+export default _default;

package/2x/es/components/capsule-tabs/index.js

@@ -0,0 +1,6 @@
+import "./capsule-tabs.css";
+import { CapsuleTab, CapsuleTabs } from './capsule-tabs';
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+export default attachPropertiesToComponent(CapsuleTabs, {
+  Tab: CapsuleTab
+});

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

@@ -0,0 +1,28 @@
+.adm-card {
+  background: var(--adm-color-background);
+  border-radius: 16px;
+  padding: 0 24px;
+}
+
+.adm-card-header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 24px 0;
+}
+
+.adm-card-header:not(:last-child) {
+  border-bottom: solid 1px var(--adm-color-border);
+}
+
+.adm-card-header-title {
+  font-size: var(--adm-font-size-7);
+  line-height: 1.4;
+  font-weight: bold;
+}
+
+.adm-card-body {
+  padding: 24px 0;
+}

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

@@ -0,0 +1,15 @@
+import React, { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type CardProps = {
+    title?: ReactNode;
+    extra?: ReactNode;
+    headerStyle?: React.CSSProperties;
+    headerClassName?: string;
+    bodyStyle?: React.CSSProperties;
+    bodyClassName?: string;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onBodyClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onHeaderClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    children?: React.ReactNode;
+} & NativeProps;
+export declare const Card: FC<CardProps>;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+const classPrefix = `adm-card`;
+export const Card = props => {
+  const renderHeader = () => {
+    if (!(props.title || props.extra)) {
+      return null;
+    }
+
+    return React.createElement("div", {
+      className: classNames(`${classPrefix}-header`, props.headerClassName),
+      style: props.headerStyle,
+      onClick: props.onHeaderClick
+    }, React.createElement("div", {
+      className: `${classPrefix}-header-title`
+    }, props.title), props.extra);
+  };
+
+  const renderBody = () => {
+    if (!props.children) {
+      return null;
+    }
+
+    return React.createElement("div", {
+      className: classNames(`${classPrefix}-body`, props.bodyClassName),
+      style: props.bodyStyle,
+      onClick: props.onBodyClick
+    }, props.children);
+  };
+
+  return withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    onClick: props.onClick
+  }, renderHeader(), renderBody()));
+};

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

@@ -0,0 +1,4 @@
+import './card.less';
+import { Card } from './card';
+export type { CardProps } from './card';
+export default Card;

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

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

package/2x/es/components/cascade-picker/cascade-picker-utils.d.ts

@@ -0,0 +1,3 @@
+import { PickerColumn, PickerValue } from '../picker-view';
+import { CascadePickerOption } from './cascade-picker';
+export declare function useColumnsFn(options: CascadePickerOption[]): (selected: PickerValue[]) => PickerColumn[];

package/2x/es/components/cascade-picker/cascade-picker-utils.js

@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+export function useColumnsFn(options) {
+  const depth = useMemo(() => {
+    let depth = 0;
+
+    function traverse(options, currentDepth) {
+      if (currentDepth > depth) depth = currentDepth;
+      const nextDepth = currentDepth + 1;
+      options.forEach(option => {
+        if (option.children) {
+          traverse(option.children, nextDepth);
+        }
+      });
+    }
+
+    traverse(options, 1);
+    return depth;
+  }, [options]);
+  return selected => {
+    const columns = [];
+    let currentOptions = options;
+    let i = 0;
+
+    while (true) {
+      columns.push(currentOptions.map(option => ({
+        label: option.label,
+        value: option.value
+      })));
+      const x = selected[i];
+      const targetOptions = currentOptions.find(option => option.value === x);
+      if (!targetOptions || !targetOptions.children) break;
+      currentOptions = targetOptions.children;
+      i++;
+    }
+
+    while (i < depth - 1) {
+      columns.push([]);
+      i++;
+    }
+
+    return columns;
+  };
+}

package/2x/es/components/cascade-picker/cascade-picker.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { PickerProps, PickerRef } from '../picker';
+export declare type CascadePickerRef = PickerRef;
+export declare type CascadePickerOption = {
+    label: string;
+    value: string;
+    children?: CascadePickerOption[];
+};
+export declare type CascadePickerProps = Omit<PickerProps, 'columns'> & {
+    options: CascadePickerOption[];
+};
+export declare const CascadePicker: React.ForwardRefExoticComponent<Omit<PickerProps, "columns"> & {
+    options: CascadePickerOption[];
+} & React.RefAttributes<import("../picker").PickerActions>>;

package/2x/es/components/cascade-picker/cascade-picker.js

@@ -0,0 +1,16 @@
+import { __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import Picker from '../picker';
+import { useColumnsFn } from './cascade-picker-utils';
+export const CascadePicker = forwardRef((props, ref) => {
+  const {
+    options
+  } = props,
+        pickerProps = __rest(props, ["options"]);
+
+  const columnsFn = useColumnsFn(options);
+  return React.createElement(Picker, Object.assign({}, pickerProps, {
+    ref: ref,
+    columns: columnsFn
+  }));
+});

package/2x/es/components/cascade-picker/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { prompt } from './prompt';
+export type { CascadePickerProps, CascadePickerRef, CascadePickerOption, } from './cascade-picker';
+declare const _default: import("react").ForwardRefExoticComponent<Omit<import("../picker").PickerProps, "columns"> & {
+    options: import("./cascade-picker").CascadePickerOption[];
+} & import("react").RefAttributes<import("../picker").PickerActions>> & {
+    prompt: typeof prompt;
+};
+export default _default;

package/2x/es/components/cascade-picker/index.js

@@ -0,0 +1,6 @@
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import { prompt } from './prompt';
+import { CascadePicker } from './cascade-picker';
+export default attachPropertiesToComponent(CascadePicker, {
+  prompt
+});

package/2x/es/components/cascade-picker/prompt.d.ts

@@ -0,0 +1,3 @@
+import { CascadePickerProps } from './cascade-picker';
+import type { PickerValue } from '../picker';
+export declare function prompt(props: Omit<CascadePickerProps, 'value' | 'visible' | 'children'>): Promise<PickerValue[] | null>;

package/2x/es/components/cascade-picker/prompt.js

@@ -0,0 +1,37 @@
+import { CascadePicker } from './cascade-picker';
+import React, { useEffect, useState } from 'react';
+import { renderToBody } from '../../utils/render-to-body';
+export function prompt(props) {
+  return new Promise(resolve => {
+    const Wrapper = () => {
+      const [visible, setVisible] = useState(false);
+      useEffect(() => {
+        setVisible(true);
+      }, []);
+      return React.createElement(CascadePicker, Object.assign({}, props, {
+        visible: visible,
+        onConfirm: (val, extend) => {
+          var _a;
+
+          (_a = props.onConfirm) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+          resolve(val);
+        },
+        onClose: () => {
+          var _a;
+
+          (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          setVisible(false);
+          resolve(null);
+        },
+        afterClose: () => {
+          var _a;
+
+          (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+          unmount();
+        }
+      }));
+    };
+
+    const unmount = renderToBody(React.createElement(Wrapper, null));
+  });
+}

package/2x/es/components/cascade-picker-view/cascade-picker-view.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import type { PickerViewProps } from '../picker-view';
+import type { CascadePickerOption } from '../cascade-picker';
+export declare type CascadePickerViewProps = Omit<PickerViewProps, 'columns'> & {
+    options: CascadePickerOption[];
+};
+export declare const CascadePickerView: FC<CascadePickerViewProps>;