antd-mobile 5.0.0-rc.9 → 5.2.0

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

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

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

@@ -4,20 +4,26 @@
 }
 
 .adm-badge {
-  display: inline-block;
-  color: #fff;
-  font-weight: normal;
-  text-align: center;
+  display: inline-flex;
   vertical-align: middle;
-  box-sizing: border-box;
-  min-width: 32px;
+  box-sizing: content-box;
   border-radius: 200px;
-  padding: 0 8px;
-  font-size: 18px;
-  line-height: 1.2;
-  white-space: nowrap;
+  background-color: var(--color);
   --right: 0;
   --top: 0;
+  --color: var(--adm-badge-color, #ff411c);
+}
+
+.adm-badge-content {
+  color: #fff;
+  box-sizing: border-box;
+  min-width: 16px;
+  padding: 2px 8px;
+  font-size: 18px;
+  line-height: 24px;
+  white-space: nowrap;
+  font-weight: normal;
+  text-align: center;
 }
 
 .adm-badge-fixed {
@@ -32,4 +38,8 @@
   width: 20px;
   height: 20px;
   border-radius: 10px;
+}
+
+.adm-badge-bordered {
+  border: solid 2px var(--adm-color-white);
 }

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

@@ -4,5 +4,6 @@ export declare const dot: unique symbol;
 export declare type BadgeProps = {
     content?: React.ReactNode | typeof dot;
     color?: string;
-} & NativeProps<'--right' | '--top'>;
+    bordered?: boolean;
+} & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

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

@@ -1,27 +1,25 @@
 import classNames from 'classnames';
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-badge";
-export var dot = Symbol();
-export var Badge = function Badge(p) {
-  var _classNames;
-
-  var props = mergeProps({
-    color: '#FF411C'
-  }, p);
-  var content = props.content,
-      color = props.color,
-      children = props.children;
-  var isDot = content === dot;
-  var badgeCls = classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-fixed"] = !!children, _classNames[classPrefix + "-dot"] = isDot, _classNames));
-  var element = content ? withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+const classPrefix = `adm-badge`;
+export const dot = Symbol();
+export const Badge = props => {
+  const {
+    content,
+    color,
+    children
+  } = props;
+  const isDot = content === dot;
+  const badgeCls = classNames(classPrefix, !!children && `${classPrefix}-fixed`, isDot && `${classPrefix}-dot`, props.bordered && `${classPrefix}-bordered`);
+  const element = content ? withNativeProps(props, React.createElement("div", {
     className: badgeCls,
     style: {
-      backgroundColor: color
+      '--color': color
     }
-  }, !isDot && content)) : null;
-  return children ? /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-wrap"
+  }, !isDot && React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, content))) : null;
+  return children ? React.createElement("div", {
+    className: `${classPrefix}-wrap`
   }, children, element) : element;
 };

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

@@ -2,5 +2,5 @@ import "./badge.css";
 import { Badge, dot } from './badge';
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
 export default attachPropertiesToComponent(Badge, {
-  dot: dot
+  dot
 });

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

@@ -12,9 +12,9 @@
   display: inline-block;
   box-sizing: border-box;
   height: auto;
-  padding: 14px 32px;
+  padding: 14px 24px;
   margin: 0;
-  font-size: 30px;
+  font-size: 34px;
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);
@@ -30,22 +30,21 @@
 
 .adm-button::before {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: 0;
+  left: 0;
+  transform: translate(calc(var(--border-width) * -1), calc(var(--border-width) * -1));
   width: 100%;
   height: 100%;
   background-color: #000;
-  border: inherit;
-  border-color: #000;
-  border-radius: inherit;
-  transform: translate(-50%, -50%);
+  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.1;
+  opacity: 0.08;
 }
 
 .adm-button-default.adm-button-fill-outline {
@@ -55,7 +54,7 @@
 
 .adm-button-default.adm-button-fill-none {
   --background-color: transparent;
-  --border-color: transparent;
+  --border-width: 0;
 }
 
 .adm-button:not(.adm-button-default) {
@@ -72,7 +71,7 @@
 .adm-button:not(.adm-button-default).adm-button-fill-none {
   --text-color: var(--color);
   --background-color: transparent;
-  --border-color: transparent;
+  --border-width: 0;
 }
 
 .adm-button-primary {
@@ -106,7 +105,8 @@
 }
 
 .adm-button.adm-button-mini {
-  padding: 6px 14px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   font-size: 26px;
 }
 
@@ -116,12 +116,14 @@
 }
 
 .adm-button.adm-button-small {
-  padding: 6px 22px;
+  padding-top: 6px;
+  padding-bottom: 6px;
   font-size: 30px;
 }
 
 .adm-button.adm-button-large {
-  padding: 22px 44px;
+  padding-top: 22px;
+  padding-bottom: 22px;
   font-size: 36px;
 }
 

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import classNames from 'classnames';
-import Loading from '../loading';
+import DotLoading from '../dot-loading';
 import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
-var classPrefix = "adm-button";
-var defaultProps = {
+const classPrefix = `adm-button`;
+const defaultProps = {
   color: 'default',
   fill: 'solid',
   block: false,
@@ -13,19 +13,26 @@ var defaultProps = {
   shape: 'default',
   size: 'middle'
 };
-export var Button = function Button(p) {
-  var _classNames;
-
-  var props = mergeProps(defaultProps, p);
-  var disabled = props.disabled || props.loading;
-  return withNativeProps(props, /*#__PURE__*/React.createElement("button", {
+export const Button = p => {
+  const props = mergeProps(defaultProps, p);
+  const disabled = props.disabled || props.loading;
+  return withNativeProps(props, React.createElement("button", {
     type: props.type,
     onClick: props.onClick,
-    className: classNames(classPrefix, props.color ? classPrefix + "-" + props.color : null, (_classNames = {}, _classNames[classPrefix + "-block"] = props.block, _classNames[classPrefix + "-disabled"] = disabled, _classNames[classPrefix + "-fill-outline"] = props.fill === 'outline', _classNames[classPrefix + "-fill-none"] = props.fill === 'none', _classNames[classPrefix + "-mini"] = props.size === 'mini', _classNames[classPrefix + "-small"] = props.size === 'small', _classNames[classPrefix + "-large"] = props.size === 'large', _classNames[classPrefix + "-loading"] = props.loading, _classNames), classPrefix + "-shape-" + props.shape),
+    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`]: props.loading
+    }, `${classPrefix}-shape-${props.shape}`),
     disabled: disabled
-  }, props.loading ? /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-loading-wrapper"
-  }, /*#__PURE__*/React.createElement(Loading, {
+  }, props.loading ? React.createElement("div", {
+    className: `${classPrefix}-loading-wrapper`
+  }, React.createElement(DotLoading, {
     color: 'currentColor'
   }), props.loadingText) : props.children));
 };

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,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-out {
+  color: var(--adm-color-light);
+}
+
+.adm-calendar-cell.adm-calendar-cell-out .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,59 @@
+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 = {
+    weekStartsOn?: 'Monday' | 'Sunday';
+    renderLabel?: (date: Date) => string | null | undefined;
+    onPageChange?: (year: number, month: number) => void;
+} & ({
+    selectionMode?: undefined;
+    value?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+} | {
+    selectionMode: 'single';
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (val: Date) => void;
+} | {
+    selectionMode: 'range';
+    value?: [Date, Date] | null;
+    defaultValue?: [Date, Date] | null;
+    onChange?: (val: [Date, Date]) => void;
+}) & NativeProps;
+export declare const Calendar: React.ForwardRefExoticComponent<({
+    weekStartsOn?: "Monday" | "Sunday" | undefined;
+    renderLabel?: ((date: Date) => string | null | undefined) | undefined;
+    onPageChange?: ((year: number, month: number) => void) | undefined;
+} & {
+    selectionMode?: undefined;
+    value?: undefined;
+    defaultValue?: undefined;
+    onChange?: undefined;
+} & NativeProps<never> & React.RefAttributes<CalenderRef>) | ({
+    weekStartsOn?: "Monday" | "Sunday" | undefined;
+    renderLabel?: ((date: Date) => string | null | undefined) | undefined;
+    onPageChange?: ((year: number, month: number) => void) | undefined;
+} & {
+    selectionMode: 'single';
+    value?: Date | null | undefined;
+    defaultValue?: Date | null | undefined;
+    onChange?: ((val: Date) => void) | undefined;
+} & NativeProps<never> & React.RefAttributes<CalenderRef>) | ({
+    weekStartsOn?: "Monday" | "Sunday" | undefined;
+    renderLabel?: ((date: Date) => string | null | undefined) | undefined;
+    onPageChange?: ((year: number, month: number) => void) | undefined;
+} & {
+    selectionMode: 'range';
+    value?: [Date, Date] | null | undefined;
+    defaultValue?: [Date, Date] | null | undefined;
+    onChange?: ((val: [Date, Date]) => void) | undefined;
+} & NativeProps<never> & React.RefAttributes<CalenderRef>)>;
+export {};

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

@@ -0,0 +1,185 @@
+import React, { forwardRef, useMemo, useState, useImperativeHandle } 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 { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
+dayjs.extend(isoWeek);
+const classPrefix = 'adm-calendar';
+const defaultProps = {
+  weekStartsOn: 'Sunday'
+};
+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 [current, setCurrent] = useState(() => dayjs().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));
+    },
+    jumpToToday: () => {
+      setCurrent(dayjs().date(1));
+    }
+  }));
+  const header = React.createElement("div", {
+    className: `${classPrefix}-header`
+  }, React.createElement("a", {
+    className: `${classPrefix}-arrow-button`,
+    onClick: () => {
+      setCurrent(current.subtract(1, 'year'));
+    }
+  }, React.createElement(ArrowLeftDouble, null)), React.createElement("a", {
+    className: `${classPrefix}-arrow-button`,
+    onClick: () => {
+      setCurrent(current.subtract(1, 'month'));
+    }
+  }, React.createElement(ArrowLeft, null)), React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, locale.Calendar.renderYearAndMonth(current.year(), current.month() + 1)), React.createElement("a", {
+    className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-right`,
+    onClick: () => {
+      setCurrent(current.add(1, 'month'));
+    }
+  }, React.createElement(ArrowLeft, null)), React.createElement("a", {
+    className: `${classPrefix}-arrow-button ${classPrefix}-arrow-button-right`,
+    onClick: () => {
+      setCurrent(current.add(1, 'year'));
+    }
+  }, React.createElement(ArrowLeftDouble, null)));
+  const dateRange = useMemo(() => {
+    var _a, _b, _c, _d;
+
+    if (props.selectionMode === 'single') {
+      const value = (_b = (_a = props.value) !== null && _a !== void 0 ? _a : props.defaultValue) !== null && _b !== void 0 ? _b : null;
+      return [value, value];
+    } else if (props.selectionMode === 'range') {
+      return (_d = (_c = props.value) !== null && _c !== void 0 ? _c : props.defaultValue) !== null && _d !== void 0 ? _d : [null, null];
+    } else {
+      return [null, null];
+    }
+  }, [props.selectionMode, props.value, props.defaultValue]);
+  const [begin, setBegin] = useState(null);
+  const [end, setEnd] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    setBegin(dateRange[0] ? dayjs(dateRange[0]) : null);
+    setEnd(dateRange[1] ? dayjs(dateRange[1]) : null);
+  }, [dateRange[0], dateRange[1]]);
+
+  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;
+
+      const isSelect = (() => {
+        if (!begin) return false;
+        if (d.isSame(begin, 'day')) return true;
+        if (!end) return false;
+        if (d.isSame(end, 'day')) return true;
+        return d.isAfter(begin, 'day') && d.isBefore(end, 'day');
+      })();
+
+      const inThisMonth = d.month() === current.month();
+      cells.push(React.createElement("div", {
+        key: d.valueOf(),
+        className: classNames(`${classPrefix}-cell`, inThisMonth ? `${classPrefix}-cell-in` : `${classPrefix}-cell-out`, inThisMonth && {
+          [`${classPrefix}-cell-today`]: d.isSame(today, 'day'),
+          [`${classPrefix}-cell-selected`]: isSelect,
+          [`${classPrefix}-cell-selected-begin`]: isSelect && d.isSame(begin, 'day'),
+          [`${classPrefix}-cell-selected-end`]: isSelect && (!end || d.isSame(end, 'day'))
+        }),
+        onClick: () => {
+          var _a, _b, _c;
+
+          if (!props.selectionMode) return;
+
+          if (props.selectionMode === 'single') {
+            setBegin(d);
+            setEnd(d);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, d.toDate());
+          } else if (props.selectionMode === 'range') {
+            if (begin !== null && end === null) {
+              if (begin.isSame(d.toDate())) {
+                setBegin(null);
+                setEnd(null);
+              } else {
+                if (d.isBefore(begin)) {
+                  setEnd(begin);
+                  setBegin(d);
+                  (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, [d.toDate(), begin.toDate()]);
+                } else {
+                  setEnd(d);
+                  (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, [begin.toDate(), d.toDate()]);
+                }
+              }
+            } else {
+              setBegin(d);
+              setEnd(null);
+            }
+          }
+
+          if (!inThisMonth) {
+            setCurrent(d.clone().date(1));
+          }
+        }
+      }, 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));
+});