@bifrostui/react 2.0.0-beta.10 → 2.0.0-beta.12

package/dist/DesktopDatePicker/deskTopPickerContainer.css

@@ -0,0 +1,100 @@
+:root,
+page,
+xhs-page {
+  --bui-calendar-padding: 6px 12px 7px;
+  --bui-d-date-picker-lay-font-family: var(--bui-font-family);
+  --bui-d-date-picker-lay-main-radius: 3px;
+  --bui-d-date-picker-lay-content-padding: 10px 16px;
+  --bui-d-date-picker-lay-content-height: 30px;
+  --bui-d-date-picker-lay-content-line-height: 30px;
+  --bui-d-date-picker-lay-content-width: 60px;
+  --bui-d-date-picker-lay-calendar-padding: 6px 12px 7px;
+  --bui-d-date-picker-lay-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  --bui-d-date-picker-title-size: var(--bui-title-size-3);
+  --bui-d-date-picker-list-padding: 6px 12px 7px;
+  --bui-d-date-picker-col-bg: var(--bui-color-bg-view);
+  --bui-d-date-picker-content-radius: var(--bui-shape-radius-default, 6px);
+  --bui-d-date-picker-col-font-size: var(--bui-title-size-4);
+}
+.bui-d-date-picker-lay-main {
+  height: 308px;
+  font-family: var(--bui-d-date-picker-lay-font-family);
+  border-radius: var(--bui-d-date-picker-lay-main-radius);
+  padding: 3px 0;
+  box-shadow: var(--bui-d-date-picker-lay-shadow);
+  overflow: hidden;
+  flex: 1;
+}
+.bui-d-date-picker-lay-handler {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 7px;
+  margin-top: 8px;
+}
+.bui-d-date-picker-lay-handler-btn {
+  font-size: 16px;
+  height: 100%;
+  width: 46px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bui-d-date-picker-lay-handler-icon {
+  font-size: 28px;
+}
+.bui-d-date-picker-lay-title {
+  display: flex;
+  align-items: center;
+}
+.bui-d-date-picker-lay-title-text {
+  white-space: nowrap;
+  font-size: var(--bui-d-date-picker-title-size);
+  font-weight: var(--bui-font-weight-medium);
+  text-align: center;
+}
+.bui-d-date-picker-lay-title-text:hover {
+  cursor: pointer;
+  color: var(--bui-color-blue);
+}
+.bui-d-date-picker-lay-list {
+  max-height: 262px;
+  overflow: auto;
+  padding: var(--bui-d-date-picker-list-padding);
+}
+.bui-d-date-picker-lay-row {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+.bui-d-date-picker-lay-col {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bui-d-date-picker-col-bg);
+  cursor: pointer;
+}
+.bui-d-date-picker-lay-col-content {
+  margin: 12px 8px;
+  padding: 4px 6px;
+  border-radius: var(--bui-d-date-picker-content-radius);
+  display: inline-block;
+  text-align: center;
+  font-weight: var(--bui-font-weight-medium);
+  color: var(--bui-color-fg-default);
+  font-family: var(--bui-d-date-picker-lay-font-family);
+}
+.bui-d-date-picker-lay-col-text {
+  display: inline-block;
+  width: 36px;
+  font-size: var(--bui-d-date-picker-col-font-size);
+  line-height: 1;
+}
+.bui-d-date-picker-lay-col-active .bui-d-date-picker-lay-col-content {
+  color: #000;
+  background-color: #ffc7da;
+}
+.bui-d-date-picker-lay-col-disabled .bui-d-date-picker-lay-col-content {
+  color: #ccc;
+}

package/dist/DesktopDatePicker/index.css

@@ -0,0 +1,61 @@
+:root,
+page,
+xhs-page {
+  --bui-d-date-picker-height: var(--bui-input-height, 32px);
+  --bui-d-date-picker-min-width: var(--bui-input-min-width, 100px);
+  --bui-d-date-picker-font-size: var(--bui-title-size-3, 16px);
+  --bui-d-date-picker-icon-size: var(--bui-title-size-3, 16px);
+  --bui-d-date-picker-container-padding: var(--bui-spacing-md, 9px);
+  --bui-d-date-picker-bg: var(--bui-color-bg-view);
+  --bui-d-date-picker-font-family: var(--bui-font-family);
+  --bui-d-date-picker-border: 1px solid var(--bui-color-border-default);
+  --bui-d-date-picker-shadow: 0 0 0 2px var(--bui-color-bg-default);
+  --bui-d-date-picker-disabled-color: var(--bui-color-fg-subtle);
+}
+.bui-d-date-picker {
+  position: relative;
+  cursor: pointer;
+  vertical-align: middle;
+  height: var(--bui-d-date-picker-height);
+  min-width: var(--bui-d-date-picker-min-width);
+  font-size: var(--bui-d-date-picker-font-size);
+  border-radius: 5px;
+  background-color: var(--bui-d-date-picker-bg);
+  font-family: var(--bui-d-date-picker-font-family);
+  border: var(--bui-d-date-picker-border);
+}
+.bui-d-date-picker:active,
+.bui-d-date-picker-active {
+  box-shadow: var(--bui-d-date-picker-shadow);
+}
+.bui-d-date-picker-icon {
+  display: flex;
+  align-items: center;
+  font-size: var(--bui-d-date-picker-icon-size);
+  height: 100%;
+  padding-left: 6px;
+}
+.bui-d-date-picker-container {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--bui-d-date-picker-container-padding);
+  height: 100%;
+}
+.bui-d-date-picker-input {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+  background-color: transparent;
+  outline: none;
+  border: 0;
+}
+.bui-d-date-picker.bui-d-date-picker-disabled {
+  pointer-events: none;
+  box-shadow: none;
+  background-color: rgba(188, 188, 188, 0.2);
+}
+.bui-d-date-picker.bui-d-date-picker-disabled input {
+  color: var(--bui-d-date-picker-disabled-color);
+}

package/dist/DesktopDatePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as DesktopDatePicker } from './DesktopDatePicker';
+export * from './DesktopDatePicker.types';

package/dist/DesktopDatePicker/index.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DesktopDatePicker_exports = {};
+__export(DesktopDatePicker_exports, {
+  DesktopDatePicker: () => import_DesktopDatePicker.default,
+  default: () => import_DesktopDatePicker.default
+});
+module.exports = __toCommonJS(DesktopDatePicker_exports);
+var import_DesktopDatePicker = __toESM(require("./DesktopDatePicker"));
+__reExport(DesktopDatePicker_exports, require("./DesktopDatePicker.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DesktopDatePicker,
+  ...require("./DesktopDatePicker.types")
+});

package/dist/DesktopDatePicker/useGetDatePickerContent.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './deskTopPickerContainer.less';
+declare const useGetDatePickerContent: (props: any) => {
+    desktopDatePicker: () => React.JSX.Element;
+};
+export default useGetDatePickerContent;

package/dist/DesktopDatePicker/useGetDatePickerContent.js

@@ -0,0 +1,343 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useGetDatePickerContent_exports = {};
+__export(useGetDatePickerContent_exports, {
+  default: () => useGetDatePickerContent_default
+});
+module.exports = __toCommonJS(useGetDatePickerContent_exports);
+var import_icons = require("@bifrostui/icons");
+var import_clsx = __toESM(require("clsx"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_react = __toESM(require("react"));
+var import_Calendar = __toESM(require("../Calendar"));
+var import_deskTopPickerContainer = require("./deskTopPickerContainer.css");
+var import_locales = require("../locales");
+const prefixCls = "bui-d-date-picker-lay";
+const useGetDatePickerContent = (props) => {
+  const yPatterns = ["YYYY", "YY"];
+  const mPatterns = ["MM", "M", "MMM", "MMMM"];
+  const dPatterns = ["D", "DD"];
+  const { month: monthMap } = (0, import_locales.useLocaleText)("desktopDatePicker");
+  const _a = props, {
+    format,
+    minDate,
+    maxDate,
+    picker,
+    setIsOpen,
+    disabledDate,
+    calendarValue,
+    setSelectType,
+    selectType,
+    headerBarLeftIcon,
+    headerBarRightIcon,
+    closeOnSelect,
+    monthRender,
+    yearRender,
+    onMonthChange,
+    onYearChange,
+    triggerChange,
+    CalendarProps
+  } = _a, others = __objRest(_a, [
+    "format",
+    "minDate",
+    "maxDate",
+    "picker",
+    "setIsOpen",
+    "disabledDate",
+    "calendarValue",
+    "setSelectType",
+    "selectType",
+    "headerBarLeftIcon",
+    "headerBarRightIcon",
+    "closeOnSelect",
+    "monthRender",
+    "yearRender",
+    "onMonthChange",
+    "onYearChange",
+    "triggerChange",
+    "CalendarProps"
+  ]);
+  const isMinMonth = (0, import_dayjs.default)(minDate).isSame(calendarValue, "month");
+  const isMaxMonth = (0, import_dayjs.default)(maxDate).isSame(calendarValue, "month");
+  const yearList = (0, import_react.useMemo)(() => {
+    const maxYear = (0, import_dayjs.default)(maxDate).year();
+    const minYear = (0, import_dayjs.default)(minDate).year();
+    const years = [];
+    for (let i = minYear; i <= maxYear; i += 1) {
+      years.push(i);
+    }
+    const chunkedYears = [];
+    for (let i = 0; i < years.length; i += 3) {
+      chunkedYears.push(years.slice(i, i + 3));
+    }
+    return chunkedYears;
+  }, [maxDate, minDate]);
+  const mouthList = [
+    [1, 2, 3],
+    [4, 5, 6],
+    [7, 8, 9],
+    [10, 11, 12]
+  ];
+  const validateAndAdjustDate = (value) => {
+    const dateValue = (0, import_dayjs.default)(value);
+    const minValue = (0, import_dayjs.default)(minDate);
+    const maxValue = (0, import_dayjs.default)(maxDate);
+    if (dateValue.isBefore(minValue)) {
+      return minValue;
+    }
+    if (dateValue.isAfter(maxValue)) {
+      return maxValue;
+    }
+    return dateValue;
+  };
+  const onClickPrev = (e) => {
+    e.stopPropagation();
+    if (!isMinMonth) {
+      const month = (0, import_dayjs.default)(calendarValue).subtract(1, "month").toDate();
+      triggerChange(e, validateAndAdjustDate(month).toDate());
+    }
+  };
+  const onClickNext = (e) => {
+    e.stopPropagation();
+    if (!isMaxMonth) {
+      const month = (0, import_dayjs.default)(calendarValue).add(1, "month").toDate();
+      triggerChange(e, validateAndAdjustDate(month).toDate());
+    }
+  };
+  const calendarChange = (e, data) => {
+    e.stopPropagation();
+    if (data.value) {
+      const ymd = (0, import_dayjs.default)(data.value);
+      const hms = (0, import_dayjs.default)(calendarValue || /* @__PURE__ */ new Date());
+      const newValue = ymd.hour(hms.hour()).minute(hms.minute()).second(hms.second());
+      triggerChange(e, validateAndAdjustDate(newValue).toDate());
+    }
+    if (closeOnSelect) {
+      setIsOpen(false);
+    }
+  };
+  const handleTdClick = (e, data) => {
+    e.stopPropagation();
+    if (selectType === "year") {
+      triggerChange(
+        e,
+        validateAndAdjustDate(
+          (0, import_dayjs.default)(calendarValue || /* @__PURE__ */ new Date()).year(data)
+        ).toDate()
+      );
+      onYearChange == null ? void 0 : onYearChange(
+        e,
+        validateAndAdjustDate(
+          (0, import_dayjs.default)(calendarValue || /* @__PURE__ */ new Date()).year(data)
+        ).toDate()
+      );
+      if (picker === "year" && closeOnSelect) {
+        setIsOpen(false);
+        return;
+      }
+      setSelectType("month");
+    }
+    if (selectType === "month") {
+      triggerChange(
+        e,
+        validateAndAdjustDate(
+          (0, import_dayjs.default)(calendarValue || /* @__PURE__ */ new Date()).month(data - 1)
+        ).toDate()
+      );
+      onMonthChange == null ? void 0 : onMonthChange(
+        e,
+        validateAndAdjustDate(
+          (0, import_dayjs.default)(calendarValue || /* @__PURE__ */ new Date()).month(data - 1)
+        ).toDate()
+      );
+      if (picker === "day") {
+        setSelectType("day");
+        return;
+      }
+      if (closeOnSelect) {
+        setIsOpen(false);
+      }
+    }
+  };
+  const renderTd = (its, currentData) => {
+    if (yearRender && selectType === "year") {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-col-content`) }, yearRender({ year: its, currentData }));
+    }
+    if (monthRender && selectType === "month") {
+      return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-col-content`) }, monthRender({ month: its, currentData }));
+    }
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-col-content`) }, /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_clsx.default)(`${prefixCls}-col-text`) }, selectType === "month" ? monthMap[its] : its));
+  };
+  const renderTable = () => {
+    const dataList = selectType === "year" ? yearList : mouthList;
+    return dataList.map((item, index) => {
+      return /* @__PURE__ */ import_react.default.createElement("div", { key: index + 1, className: (0, import_clsx.default)(`${prefixCls}-row`) }, item.map((its, idx) => {
+        let disabledClick = false;
+        if (selectType === "year") {
+          const currentData = (0, import_dayjs.default)(calendarValue).set("year", its);
+          if (its < (0, import_dayjs.default)(minDate).year() || its > (0, import_dayjs.default)(maxDate).year() || (disabledDate == null ? void 0 : disabledDate(currentData.toDate()))) {
+            disabledClick = true;
+          }
+        }
+        if (selectType === "month") {
+          const currentData = (0, import_dayjs.default)(calendarValue).set("month", its - 1);
+          disabledClick = currentData.isBefore(minDate, "month") || currentData.isAfter(maxDate, "month");
+          if (disabledDate) {
+            disabledClick = disabledDate == null ? void 0 : disabledDate(currentData.toDate());
+          }
+        }
+        return /* @__PURE__ */ import_react.default.createElement(
+          "div",
+          {
+            key: idx + 1,
+            className: (0, import_clsx.default)(`${prefixCls}-col`, {
+              [`${prefixCls}-col-active`]: (selectType === "year" ? (0, import_dayjs.default)(calendarValue).year() : (0, import_dayjs.default)(calendarValue).month() + 1) === its && !disabledClick,
+              [`${prefixCls}-col-disabled`]: disabledClick
+            }),
+            onClick: (e) => {
+              if (!disabledClick) {
+                handleTdClick(e, its);
+              }
+            }
+          },
+          renderTd(its, calendarValue)
+        );
+      }));
+    });
+  };
+  const handleClickTitle = (e, data) => {
+    e.stopPropagation();
+    if (yPatterns.indexOf(data) > -1) {
+      setSelectType("year");
+    }
+    if (mPatterns.indexOf(data) > -1) {
+      setSelectType("month");
+    }
+    if (dPatterns.indexOf(data) > -1) {
+      setSelectType("day");
+    }
+  };
+  const renderTitle = (formate, value) => {
+    const allType = [...yPatterns, ...mPatterns, ...dPatterns];
+    const formattingTokens = /(\[[^[]*\])|([-_?:/.,()\s{0-9}]+)|(A|a|Q|YYYY|YY?|ww?|MM?M?M?|Do|DD?|hh?|HH?|mm?|ss?|S{1,3}|z|ZZ?)/g;
+    const matchArr = formate.match(formattingTokens);
+    const domArr = [];
+    let str = "";
+    for (let i = 0; i <= matchArr.length; i += 1) {
+      if (allType.indexOf(matchArr[i]) > -1) {
+        if (str !== "") {
+          domArr.push(str);
+          str = "";
+        }
+        domArr.push(
+          /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              className: (0, import_clsx.default)(`${prefixCls}-title-text`),
+              key: i,
+              onClick: (e) => handleClickTitle(e, matchArr[i])
+            },
+            (0, import_dayjs.default)(value).format(matchArr[i])
+          )
+        );
+      } else {
+        str = `${matchArr[i]}${str}`;
+      }
+    }
+    return domArr;
+  };
+  const desktopDatePicker = () => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      __spreadProps(__spreadValues({
+        className: (0, import_clsx.default)(`${prefixCls}-main`)
+      }, others), {
+        onClick: (e) => {
+          e.stopPropagation();
+        }
+      }),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-handler` }, selectType !== "year" && /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickPrev, className: `${prefixCls}-handler-btn` }, headerBarLeftIcon ? headerBarLeftIcon({ isMinMonth }) : /* @__PURE__ */ import_react.default.createElement(
+        import_icons.CaretLeftIcon,
+        {
+          className: `${prefixCls}-handler-icon`,
+          htmlColor: isMinMonth && "var(--bui-color-white)"
+        }
+      )), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title` }, calendarValue ? renderTitle(format, calendarValue) : format), selectType !== "year" && /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickNext, className: `${prefixCls}-handler-btn` }, headerBarRightIcon ? headerBarRightIcon({ isMaxMonth }) : /* @__PURE__ */ import_react.default.createElement(
+        import_icons.CaretRightIcon,
+        {
+          className: `${prefixCls}-handler-icon`,
+          htmlColor: isMaxMonth && "var(--bui-color-white)"
+        }
+      ))),
+      selectType === "day" ? /* @__PURE__ */ import_react.default.createElement(
+        import_Calendar.default,
+        __spreadValues({
+          headerVisible: true,
+          minDate,
+          maxDate,
+          disabledDate,
+          value: calendarValue,
+          onChange: calendarChange
+        }, CalendarProps)
+      ) : /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-list`) }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${prefixCls}-box`) }, renderTable()))
+    );
+  };
+  return {
+    desktopDatePicker
+  };
+};
+var useGetDatePickerContent_default = useGetDatePickerContent;

package/dist/DesktopDateTimePicker/DesktopDateTimePicker.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DateTimePickerProps } from './DesktopDateTimePicker.types';
+import './index.less';
+declare const DesktopDateTimePicker: React.ForwardRefExoticComponent<Omit<DateTimePickerProps<"div", {}>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default DesktopDateTimePicker;