@power-xa/m-ui 0.0.6 → 0.0.8

package/dist/Calendar/Month/index.js

@@ -0,0 +1,199 @@
+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 React, { useCallback, useEffect, useState } from "react";
+import { createSelectorQuery } from "@tarojs/taro";
+import { Text, View } from "@tarojs/components";
+import dayjs from "dayjs";
+import "./index.less";
+var CalendarMonth = function CalendarMonth(_ref) {
+  var onChange = _ref.onChange;
+  var today = dayjs();
+  var _useState = useState(dayjs()),
+    _useState2 = _slicedToArray(_useState, 2),
+    current = _useState2[0],
+    setCurrent = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    monthList = _useState4[0],
+    setMonthList = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    rect = _useState6[0],
+    setRect = _useState6[1];
+  var _useState7 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState8 = _slicedToArray(_useState7, 2),
+    position = _useState8[0],
+    setPosition = _useState8[1];
+  var _useState9 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    startPosition = _useState10[0],
+    setStartPosition = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    touching = _useState12[0],
+    setTouching = _useState12[1];
+  var _useState13 = useState(0),
+    _useState14 = _slicedToArray(_useState13, 2),
+    index = _useState14[0],
+    setIndex = _useState14[1];
+  useEffect(function () {
+    setMonthList(formatMonthList(current));
+    var query = createSelectorQuery();
+    query.select("#p-calendar-month-content").boundingClientRect(function (rect) {
+      if (!(rect instanceof Array)) {
+        setRect(rect);
+      }
+    }).exec();
+  }, []);
+  useEffect(function () {
+    if (current) onChange === null || onChange === void 0 || onChange(current.startOf("month").format("YYYY-MM-DD"), current.endOf("month").format("YYYY-MM-DD"));
+  }, [current]);
+  var returnToday = useCallback(function () {
+    setCurrent(today);
+    setIndex(0);
+    setMonthList(formatMonthList(today));
+  }, []);
+  var _onTouchStart = useCallback(function (e) {
+    e.stopPropagation();
+    var x = e.touches[0].clientX;
+    var y = e.touches[0].clientY;
+    /* 判断是左右滑动还是上下滑动 */
+    setStartPosition({
+      x: x,
+      y: y
+    });
+    setTouching(true);
+  }, []);
+  var _onTouchMove = useCallback(function (e) {
+    e.stopPropagation();
+    var x = e.touches[0].clientX - startPosition.x;
+    var y = e.touches[0].clientY - startPosition.y;
+    /* 判断是左右滑动还是上下滑动 */
+    if (Math.abs(x) > Math.abs(y)) {
+      setPosition({
+        x: x / rect.width,
+        y: 0
+      });
+    }
+  }, [startPosition, rect]);
+  var _onTouchEnd = useCallback(function (e) {
+    e.stopPropagation();
+    setTouching(false);
+    var x = Math.abs(position.x);
+    var y = Math.abs(position.y);
+    if (x > y) {
+      var currentIndex = position.x > 0 ? index + 1 : index - 1;
+      setIndex(currentIndex);
+      var currentMonth = current[position.x > 0 ? "subtract" : "add"](6, "month");
+      setMonthList(formatMonthList(currentMonth));
+      setCurrent(currentMonth.month() + 1 < 7 ? currentMonth.month(0) : currentMonth.month(6));
+    }
+    setPosition({
+      x: 0,
+      y: 0
+    });
+  }, [position, index, current]);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-month-container"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-month-header"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "current-month"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "sub-text"
+  }, current.format("YYYY年")), /*#__PURE__*/React.createElement(Text, {
+    className: "text"
+  }, current.format("MM月"))), !current.isSame(today, 'month') && /*#__PURE__*/React.createElement(View, {
+    className: "button",
+    onTap: returnToday
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "text"
+  }, "\u56DE\u5230\u672C\u6708"))), /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-month-content",
+    id: "p-calendar-month-content",
+    onTouchStart: function onTouchStart(e) {
+      return _onTouchStart(e);
+    },
+    onTouchMove: function onTouchMove(e) {
+      return _onTouchMove(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      return _onTouchEnd(e);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-month-content-body",
+    style: {
+      transform: "translateX(".concat(-index * 100, "%)")
+    }
+  }, monthList.map(function (list, i) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "p-calendar-month-cell",
+      key: 'calendar-cell-' + i,
+      style: {
+        transform: "translateX(".concat((i - 1 + index + (touching ? position.x : 0)) * 100, "%)"),
+        transitionDuration: "".concat(touching ? 0 : .3, "s")
+      }
+    }, list.map(function (m, mi) {
+      var selected = m.isSame(current, "month");
+      var isToday = m.isSame(today, "month");
+      return /*#__PURE__*/React.createElement(View, {
+        className: "p-calendar-month-view ".concat(isToday ? 'today' : '', " ").concat(selected ? 'selected' : ''),
+        key: 'calendar-view-' + mi,
+        onTap: function onTap() {
+          return setCurrent(m);
+        }
+      }, /*#__PURE__*/React.createElement(Text, {
+        className: "p-calendar-month-view-text"
+      }, m.format("MM月")));
+    }));
+  }))));
+};
+export default CalendarMonth;
+var formatMonthList = function formatMonthList(date) {
+  /* 获取当前月 */
+  var month = date.month() + 1;
+  var monthList = [];
+  var prev = date.startOf("year").subtract(1, "year");
+  var next = date.startOf("year").add(1, "year");
+  var current = date.startOf("year");
+  if (month < 7) {
+    monthList = [Array.from({
+      length: 6
+    }, function (_, i) {
+      return prev.month(i + 6);
+    }), Array.from({
+      length: 6
+    }, function (_, i) {
+      return current.month(i);
+    }), Array.from({
+      length: 6
+    }, function (_, i) {
+      return current.month(i + 6);
+    })];
+  } else {
+    monthList = [Array.from({
+      length: 6
+    }, function (_, i) {
+      return current.month(i);
+    }), Array.from({
+      length: 6
+    }, function (_, i) {
+      return current.month(i + 6);
+    }), Array.from({
+      length: 6
+    }, function (_, i) {
+      return next.month(i);
+    })];
+  }
+  return monthList;
+};

package/dist/Calendar/Month/index.less

@@ -0,0 +1,96 @@
+@import "@power-xa/m-ui/dist/assets/less/mixins.less";
+
+.p-calendar-month-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .p-calendar-month-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .current-month {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+
+            .sub-text {
+                .font(28, #999);
+                position: relative;
+
+                &::after {
+                    position: absolute;
+                    content: "";
+                    width: 1px;
+                    height: 20px;
+                    background: #999;
+                    top: 50%;
+                    margin-top: -10px;
+                    right: -12px;
+                }
+            }
+
+            .text {
+                .font(28)
+            }
+        }
+
+        .button {
+            display: flex;
+            align-items: center;
+
+            .text {
+                .font(28, #999)
+            }
+        }
+    }
+
+    .p-calendar-month-content {
+        overflow: hidden;
+
+        .p-calendar-month-content-body {
+            display: flex;
+            align-items: center;
+            flex-wrap: nowrap;
+            height: 50px;
+
+            .p-calendar-month-cell {
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                gap: 24px;
+                width: 100%;
+                flex-shrink: 0;
+                will-change: transform;
+                position: absolute;
+
+                .p-calendar-month-view {
+                    flex: 1;
+                    flex-shrink: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 25px;
+                    padding: 8px 0;
+
+                    .p-calendar-month-view-text {
+                        .font(24);
+                    }
+
+                    &.today {
+                        background: #F6F7F9;
+                    }
+
+                    &.selected {
+                        background: #333437;
+
+                        .p-calendar-month-view-text {
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/dist/Calendar/Week/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+import "./index.less";
+type CalendarWeekProps = {
+    onChange?: (start: string, end: string) => void;
+};
+declare const CalendarWeek: FC<CalendarWeekProps>;
+export default CalendarWeek;

package/dist/Calendar/Week/index.js

@@ -0,0 +1,200 @@
+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 React, { useCallback, useEffect, useState } from "react";
+import { createSelectorQuery } from "@tarojs/taro";
+import { Text, View } from "@tarojs/components";
+import dayjs from "dayjs";
+import "./index.less";
+var updateLocale = require("dayjs/plugin/updateLocale");
+var isBetween = require("dayjs/plugin/isBetween");
+dayjs.extend(isBetween);
+dayjs.extend(updateLocale);
+dayjs.updateLocale("en", {
+  weekStart: 1
+});
+var CalendarWeek = function CalendarWeek(_ref) {
+  var onChange = _ref.onChange;
+  var today = dayjs();
+  var _useState = useState(today),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentMonth = _useState2[0],
+    setCurrentMonth = _useState2[1];
+  var _useState3 = useState(dayjs()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    current = _useState4[0],
+    setCurrent = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    weekList = _useState6[0],
+    setWeekList = _useState6[1];
+  var _useState7 = useState({}),
+    _useState8 = _slicedToArray(_useState7, 2),
+    rect = _useState8[0],
+    setRect = _useState8[1];
+  var _useState9 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState10 = _slicedToArray(_useState9, 2),
+    position = _useState10[0],
+    setPosition = _useState10[1];
+  var _useState11 = useState({
+      x: 0,
+      y: 0
+    }),
+    _useState12 = _slicedToArray(_useState11, 2),
+    startPosition = _useState12[0],
+    setStartPosition = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    touching = _useState14[0],
+    setTouching = _useState14[1];
+  var _useState15 = useState(0),
+    _useState16 = _slicedToArray(_useState15, 2),
+    index = _useState16[0],
+    setIndex = _useState16[1];
+  useEffect(function () {
+    var result = formatMonthList(current);
+    setWeekList(result.weekList);
+    var query = createSelectorQuery();
+    query.select("#p-calendar-week-content").boundingClientRect(function (rect) {
+      if (!(rect instanceof Array)) {
+        setRect(rect);
+      }
+    }).exec();
+  }, []);
+  useEffect(function () {
+    if (current) onChange === null || onChange === void 0 || onChange(current.startOf("week").format("YYYY-MM-DD"), current.endOf("week").format("YYYY-MM-DD"));
+  }, [current]);
+  var returnToday = useCallback(function () {
+    setCurrent(today);
+    setIndex(0);
+    var result = formatMonthList(today);
+    setCurrentMonth(today);
+    setWeekList(result.weekList);
+  }, []);
+  var _onTouchStart = useCallback(function (e) {
+    e.stopPropagation();
+    var x = e.touches[0].clientX;
+    var y = e.touches[0].clientY;
+    /* 判断是左右滑动还是上下滑动 */
+    setStartPosition({
+      x: x,
+      y: y
+    });
+    setTouching(true);
+  }, []);
+  var _onTouchMove = useCallback(function (e) {
+    e.stopPropagation();
+    var x = e.touches[0].clientX - startPosition.x;
+    var y = e.touches[0].clientY - startPosition.y;
+    /* 判断是左右滑动还是上下滑动 */
+    if (Math.abs(x) > Math.abs(y)) {
+      setPosition({
+        x: x / rect.width,
+        y: 0
+      });
+    }
+  }, [startPosition, rect]);
+  var _onTouchEnd = useCallback(function (e) {
+    e.stopPropagation();
+    setTouching(false);
+    var x = Math.abs(position.x);
+    var y = Math.abs(position.y);
+    if (x > y) {
+      var currentIndex = position.x > 0 ? index + 1 : index - 1;
+      setIndex(currentIndex);
+      var month = currentMonth[position.x > 0 ? "subtract" : "add"](1, "month");
+      var result = formatMonthList(month.startOf("month"));
+      setCurrentMonth(month);
+      setWeekList(result.weekList);
+      setCurrent(month.startOf("month").startOf("week").add(1, "day"));
+    }
+    setPosition({
+      x: 0,
+      y: 0
+    });
+  }, [position, index, current, currentMonth]);
+  return /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-week-container"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-week-header"
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "current-week"
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "sub-text"
+  }, current.format("YYYY年")), /*#__PURE__*/React.createElement(Text, {
+    className: "text"
+  }, current.startOf("week").format("MM月DD日"), " - ", current.endOf("week").format("MM月DD日"))), !current.isSame(today, 'day') && /*#__PURE__*/React.createElement(View, {
+    className: "button",
+    onTap: returnToday
+  }, /*#__PURE__*/React.createElement(Text, {
+    className: "text"
+  }, "\u56DE\u5230\u672C\u5468"))), /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-week-content",
+    id: "p-calendar-week-content",
+    onTouchStart: function onTouchStart(e) {
+      return _onTouchStart(e);
+    },
+    onTouchMove: function onTouchMove(e) {
+      return _onTouchMove(e);
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      return _onTouchEnd(e);
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    className: "p-calendar-week-content-body",
+    style: {
+      transform: "translateX(".concat(-index * 100, "%)")
+    }
+  }, weekList.map(function (list, i) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: "p-calendar-week-cell",
+      key: 'calendar-cell-' + i,
+      style: {
+        transform: "translateX(".concat((i - 1 + index + (touching ? position.x : 0)) * 100, "%)"),
+        transitionDuration: "".concat(touching ? 0 : .3, "s")
+      }
+    }, list.map(function (w, wi) {
+      var selected = current.isBetween(w.start, w.end);
+      var isToday = today.isBetween(w.start, w.end);
+      return /*#__PURE__*/React.createElement(View, {
+        className: "p-calendar-week-view ".concat(isToday ? 'today' : '', " ").concat(selected ? 'selected' : ''),
+        key: 'calendar-view-' + wi,
+        onTap: function onTap() {
+          return setCurrent(w.start.add(1, "day"));
+        }
+      }, /*#__PURE__*/React.createElement(Text, {
+        className: "p-calendar-week-view-text"
+      }, "\u7B2C", wi + 1, "\u5468"));
+    }));
+  }))));
+};
+export default CalendarWeek;
+var formatWeekList = function formatWeekList(date) {
+  var start = date.startOf("month");
+  var end = date.endOf("month");
+
+  // 一个月多少天
+  var length = Number(end.format("DD"));
+  var count = Math.floor(length / 7) + (start.day() === 1 ? 0 : 1);
+  return Array.from({
+    length: count
+  }).map(function (_, i) {
+    var date = start.add(i * 7, "day");
+    return {
+      start: date.startOf("week"),
+      end: date.endOf("week")
+    };
+  });
+};
+var formatMonthList = function formatMonthList(date) {
+  return {
+    month: date.month() + 1,
+    weekList: [formatWeekList(date.subtract(1, "month")), formatWeekList(date), formatWeekList(date.add(1, "month"))]
+  };
+};

package/dist/Calendar/Week/index.less

@@ -0,0 +1,96 @@
+@import "@power-xa/m-ui/dist/assets/less/mixins.less";
+
+.p-calendar-week-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    .p-calendar-week-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .current-week {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+
+            .sub-text {
+                .font(28, #999);
+                position: relative;
+
+                &::after {
+                    position: absolute;
+                    content: "";
+                    width: 1px;
+                    height: 20px;
+                    background: #999;
+                    top: 50%;
+                    margin-top: -10px;
+                    right: -12px;
+                }
+            }
+
+            .text {
+                .font(28)
+            }
+        }
+
+        .button {
+            display: flex;
+            align-items: center;
+
+            .text {
+                .font(28, #999)
+            }
+        }
+    }
+
+    .p-calendar-week-content {
+        overflow: hidden;
+
+        .p-calendar-week-content-body {
+            display: flex;
+            align-items: center;
+            flex-wrap: nowrap;
+            height: 50px;
+
+            .p-calendar-week-cell {
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                gap: 24px;
+                width: 100%;
+                flex-shrink: 0;
+                will-change: transform;
+                position: absolute;
+
+                .p-calendar-week-view {
+                    flex: 1;
+                    flex-shrink: 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 25px;
+                    padding: 8px 0;
+
+                    .p-calendar-week-view-text {
+                        .font(24);
+                    }
+
+                    &.today {
+                        background: #F6F7F9;
+                    }
+
+                    &.selected {
+                        background: #333437;
+
+                        .p-calendar-week-view-text {
+                            color: #fff;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/dist/Calendar/index.d.ts

@@ -0,0 +1,10 @@
+import Date from "./Date";
+import Week from "./Week";
+import Month from "./Month";
+type CalendarType = {
+    Date: typeof Date;
+    Week: typeof Week;
+    Month: typeof Month;
+};
+declare const Calendar: CalendarType;
+export default Calendar;

package/dist/Calendar/index.js

@@ -0,0 +1,9 @@
+import Date from "./Date";
+import Week from "./Week";
+import Month from "./Month";
+var Calendar = {
+  Date: Date,
+  Week: Week,
+  Month: Month
+};
+export default Calendar;

package/dist/ConfigProvider/index.d.ts

@@ -10,6 +10,7 @@ export interface ConfigProviderType {
         resource?: string;
         oss?: string;
     };
+    env?: "WEAPP" | "SWAN" | "ALIPAY" | "TT" | "QQ" | "JD" | "WEB" | "RN" | "HARMONY" | "QUICKAPP" | "HARMONYHYBRID" | "QYWX" | "DD";
     basename?: string;
     token?: string;
     extra?: ExtraType;

package/dist/Drawer/index.d.ts

@@ -7,6 +7,7 @@ type DrawerProps = {
     header?: ReactNode;
     content?: ReactNode;
     footer?: ReactNode;
+    width?: number;
 };
 declare const Drawer: FC<DrawerProps>;
 export default Drawer;