@trionesdev/antd-mobile-react 0.0.2-beta.0

package/dist/Calendar/calendar-range.js

@@ -0,0 +1,57 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames';
+import _ from 'lodash';
+import React, { memo, useEffect, useRef, useState } from 'react';
+import { CalendarGrid } from "./calendar-grid";
+import { CalendarHeader } from "./calendar-header";
+import "./style.scss";
+import { TouchableCalendarGrid } from "./touchable-calendar-grid";
+var calendarCls = 'triones-antm-calendar';
+export var CalendarRange = /*#__PURE__*/memo(function (_ref) {
+  var _ref2, _ref3;
+  var _ref$mouth = _ref.mouth,
+    mouth = _ref$mouth === void 0 ? new Date() : _ref$mouth,
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    slideable = _ref.slideable;
+  var _useState = useState(mouth),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentMouth = _useState2[0],
+    setCurrentMouth = _useState2[1];
+  var valueRef = useRef();
+  useEffect(function () {
+    if (value !== undefined) {
+      if (!_.isEqual(value, valueRef.current)) {
+        valueRef.current = value;
+      }
+    }
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("".concat(calendarCls))
+  }, /*#__PURE__*/React.createElement(CalendarHeader, {
+    mouth: currentMouth,
+    onChange: setCurrentMouth
+  }), slideable ? /*#__PURE__*/React.createElement(TouchableCalendarGrid, {
+    mouth: currentMouth,
+    value: (_ref2 = value !== null && value !== void 0 ? value : valueRef.current) !== null && _ref2 !== void 0 ? _ref2 : [],
+    onMouthChange: setCurrentMouth,
+    onChange: function onChange(value) {
+      valueRef.current = value;
+      _onChange === null || _onChange === void 0 || _onChange(value);
+    },
+    range: true
+  }) : /*#__PURE__*/React.createElement(CalendarGrid, {
+    mouth: currentMouth,
+    value: (_ref3 = value !== null && value !== void 0 ? value : valueRef.current) !== null && _ref3 !== void 0 ? _ref3 : [],
+    onChange: function onChange(value) {
+      valueRef.current = value;
+      _onChange === null || _onChange === void 0 || _onChange(value);
+    },
+    range: true
+  }));
+});

package/dist/Calendar/calendar.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './style.scss';
+export type CalendarProps = {
+    mouth?: Date;
+    value?: Date;
+    onChange?: (date: Date) => void;
+    onMouthChange?: (mouth: Date) => void;
+    slideable?: boolean;
+};
+export declare const Calendar: React.MemoExoticComponent<React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>>;

package/dist/Calendar/calendar.js

@@ -0,0 +1,49 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames';
+import React, { forwardRef, memo, useState } from 'react';
+import { CalendarHeader } from "./calendar-header";
+import "./style.scss";
+import { TouchableCalendarGrid } from "./touchable-calendar-grid";
+import { CalendarGrid } from "./calendar-grid";
+var calendarCls = 'triones-antm-calendar';
+export var Calendar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$mouth = _ref.mouth,
+    mouth = _ref$mouth === void 0 ? new Date() : _ref$mouth,
+    value = _ref.value,
+    _onChange = _ref.onChange,
+    _onMouthChange = _ref.onMouthChange,
+    _ref$slideable = _ref.slideable,
+    slideable = _ref$slideable === void 0 ? false : _ref$slideable;
+  var _useState = useState(mouth),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentMouth = _useState2[0],
+    setCurrentMouth = _useState2[1];
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: classNames("".concat(calendarCls))
+  }, /*#__PURE__*/React.createElement(CalendarHeader, {
+    mouth: currentMouth,
+    onChange: setCurrentMouth
+  }), slideable ? /*#__PURE__*/React.createElement(TouchableCalendarGrid, {
+    mouth: currentMouth,
+    value: value ? [value] : [],
+    onMouthChange: function onMouthChange(newMouth) {
+      setCurrentMouth(newMouth);
+      _onMouthChange === null || _onMouthChange === void 0 || _onMouthChange(newMouth);
+    },
+    onChange: function onChange(value) {
+      _onChange === null || _onChange === void 0 || _onChange(value === null || value === void 0 ? void 0 : value[0]);
+    }
+  }) : /*#__PURE__*/React.createElement(CalendarGrid, {
+    mouth: currentMouth,
+    value: value ? [value] : [],
+    onChange: function onChange(value) {
+      _onChange === null || _onChange === void 0 || _onChange(value === null || value === void 0 ? void 0 : value[0]);
+    }
+  }));
+}));

package/dist/Calendar/demo/calendar.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Calendar/demo/calendar.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { DemoBlock } from "../../DemoBlock";
+import Calendar from "../index";
+export default (function () {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u672C\u4F7F\u7528"
+  }, /*#__PURE__*/React.createElement(Calendar, null)), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u57FA\u672C\u4F7F\u7528\uFF08\u533A\u95F4\u8303\u56F4\uFF09"
+  }, /*#__PURE__*/React.createElement(Calendar.Range, null)));
+});

package/dist/Calendar/demo/grid.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Calendar/demo/grid.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CalendarGrid } from "../calendar-grid";
+import { DemoBlock } from "../../DemoBlock";
+export default (function () {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u65E5\u5386\u7F51\u683C"
+  }, /*#__PURE__*/React.createElement(CalendarGrid, null)), /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u65E5\u5386\u7F51\u683C(\u533A\u95F4\u9009\u62E9)"
+  }, /*#__PURE__*/React.createElement(CalendarGrid, {
+    range: true
+  })));
+});

package/dist/Calendar/demo/touch-grid.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/Calendar/demo/touch-grid.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { DemoBlock } from "../../DemoBlock";
+import { TouchableCalendarGrid } from "../touchable-calendar-grid";
+export default (function () {
+  return /*#__PURE__*/React.createElement(DemoBlock, {
+    title: "\u53EF\u624B\u52BF\u4E0A\u4E0B\u6ED1\u52A8\u7684\u65E5\u5386\u7F51\u683C(PC\u7AEF\u9F20\u6807\u6309\u4F4F\u4E0A\u4E0B\u62D6\u62FD)"
+  }, /*#__PURE__*/React.createElement(TouchableCalendarGrid, null));
+});

package/dist/Calendar/index.d.ts

@@ -0,0 +1,11 @@
+import { Calendar as InternalCalendar, CalendarProps } from './calendar';
+import { CalendarGrid, CalendarGridProps } from './calendar-grid';
+import { TouchableCalendarGrid } from './touchable-calendar-grid';
+import { CalendarRange } from './calendar-range';
+export { CalendarGrid, TouchableCalendarGrid };
+type CompoundedComponent = typeof InternalCalendar & {
+    Range: typeof CalendarRange;
+};
+declare const Calendar: CompoundedComponent;
+export type { CalendarProps, CalendarGridProps };
+export default Calendar;

package/dist/Calendar/index.js

@@ -0,0 +1,8 @@
+import { Calendar as InternalCalendar } from "./calendar";
+import { CalendarGrid } from "./calendar-grid";
+import { TouchableCalendarGrid } from "./touchable-calendar-grid";
+import { CalendarRange } from "./calendar-range";
+export { CalendarGrid, TouchableCalendarGrid };
+var Calendar = InternalCalendar;
+Calendar.Range = CalendarRange;
+export default Calendar;

package/dist/Calendar/style.scss

@@ -0,0 +1,85 @@
+@import "@trionesdev/antd-mobile-base-react/dist/style/variable";
+
+$calendarCls: 'triones-antm-calendar';
+
+.#{$calendarCls}-grid {
+  //display: flex;
+  //flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.#{$calendarCls}-cell {
+  aspect-ratio: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: $trionesBorderRadius;
+  cursor: default;
+  flex-direction: column;
+
+  &-date {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-mouth {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    font-size: 8Px;
+  }
+
+  &.#{$calendarCls}-cell {
+    &-disabled {
+      color: #999999;
+    }
+
+    &-selected {
+      background-color: $trionesColorPrimary;
+      color: white;
+    }
+
+    &-selected-range {
+      border-radius: 0;
+      background-color: $trionesColorPrimaryBg;
+      color: black;
+    }
+  }
+}
+
+.#{$calendarCls} {
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &-title {
+      font-size: 16Px;
+      padding: 8Px;
+      text-align: center;
+    }
+
+    &-button {
+      padding-left: 12Px;
+      padding-right: 12Px;
+      cursor: pointer;
+    }
+  }
+
+  &-week {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+
+    &-cell {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 8Px;
+      padding-bottom: 8Px;
+    }
+  }
+}

package/dist/Calendar/touchable-calendar-grid.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+type CalendarPickerViewProps = {
+    mouth?: Date;
+    value?: Date[];
+    defaultValue?: Date[];
+    onChange?: (value: Date[]) => void;
+    onMouthChange?: (mouth: Date) => void;
+    range?: boolean;
+};
+/**
+ * 可以手势滑动的日历组件
+ */
+export declare const TouchableCalendarGrid: FC<CalendarPickerViewProps>;
+export {};