antd-mobile 0.0.0-dev-626cbf51f

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,117 @@
+.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: 36px;
+  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-top {
+  flex: none;
+  font-size: 36px;
+}
+
+.adm-calendar-cell .adm-calendar-cell-bottom {
+  flex: none;
+  font-size: 24px;
+  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-border-color);
+  height: 90px;
+  box-sizing: border-box;
+  font-size: 30px;
+  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,39 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+declare type Page = {
+    month: number;
+    year: number;
+};
+export declare type CalenderRef = {
+    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;
+} & ({
+    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<CalenderRef>>;
+export {};

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 = !inThisMonth || maxDay && d.isAfter(maxDay, 'day') || minDay && d.isBefore(minDay, 'day');
+      cells.push(React.createElement("div", {
+        key: d.valueOf(),
+        className: classNames(`${classPrefix}-cell`, disabled && `${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 => React.createElement("div", {
+    key: item,
+    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, CalenderRef } 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,75 @@
+.adm-capsule-tabs {
+  position: relative;
+  min-width: 0;
+}
+
+.adm-capsule-tabs-header {
+  position: relative;
+  padding: 24px 12px;
+  border-bottom: solid 2px var(--adm-border-color);
+}
+
+.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: 30px;
+  text-align: center;
+  white-space: nowrap;
+  background-color: #f5f5f5;
+}
+
+.adm-capsule-tabs-tab-active {
+  color: #fff;
+  background-color: var(--adm-color-primary);
+}
+
+.adm-capsule-tabs-tab-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.adm-capsule-tabs-content {
+  padding: 24px;
+}
+
+.adm-capsule-tabs-header-mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  width: 60px;
+  height: 100%;
+  pointer-events: none;
+}
+
+.adm-capsule-tabs-header-mask-left {
+  left: 0;
+  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+}
+
+.adm-capsule-tabs-header-mask-right {
+  right: 0;
+  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
+}

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: #ffffff;
+  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-border-color);
+}
+
+.adm-card-header-title {
+  font-size: 30px;
+  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>;