@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.1

package/es/Countdown/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,68 @@
+import React from "react";
+import Countdown from "../../Countdown";
+const basicCountdownDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Countdown, { remainingTime: 60 * 1e3 }));
+};
+const ariaLabelCountdownDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Countdown, { remainingTime: 120 * 1e3, "aria-label": "\u4FC3\u9500\u6D3B\u52A8\u7ED3\u675F\u5012\u8BA1\u65F6" }));
+};
+const ariaLabelledbyCountdownDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("h3", { id: "flash-sale-title" }, "\u9650\u65F6\u62A2\u8D2D"), /* @__PURE__ */ React.createElement(
+    Countdown,
+    {
+      remainingTime: 180 * 1e3,
+      "aria-labelledby": "flash-sale-title"
+    }
+  ));
+};
+const ariaDescribedbyCountdownDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Countdown,
+    {
+      remainingTime: 240 * 1e3,
+      "aria-describedby": "countdown-description"
+    }
+  ), /* @__PURE__ */ React.createElement("p", { id: "countdown-description" }, "\u5012\u8BA1\u65F6\u7ED3\u675F\u540E\uFF0C\u4F18\u60E0\u4EF7\u683C\u5C06\u6062\u590D\u4E3A\u539F\u4EF7"));
+};
+const customRenderCountdownDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Countdown,
+    {
+      remainingTime: 300 * 1e3,
+      renderContent: ({ hours, minutes, seconds }) => {
+        return /* @__PURE__ */ React.createElement("span", null, "\u8DDD\u79BB\u5012\u8BA1\u65F6\u7ED3\u675F\u8FD8\u5269", hours, "\u5C0F\u65F6", minutes, "\u5206\u949F", seconds, "\u79D2");
+      }
+    }
+  ));
+};
+const endTimestampCountdownDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Countdown, { endTimestamp: Date.now() + 360 * 1e3 }));
+};
+const serverTimestampCountdownDemo = () => {
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+    Countdown,
+    {
+      serverTimestamp: Date.now() - 10 * 1e3,
+      endTimestamp: Date.now() + 420 * 1e3
+    }
+  ));
+};
+var A11yDemos_default = {
+  basicCountdownDemo,
+  ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo,
+  ariaDescribedbyCountdownDemo,
+  customRenderCountdownDemo,
+  endTimestampCountdownDemo,
+  serverTimestampCountdownDemo
+};
+export {
+  ariaDescribedbyCountdownDemo,
+  ariaLabelCountdownDemo,
+  ariaLabelledbyCountdownDemo,
+  basicCountdownDemo,
+  customRenderCountdownDemo,
+  A11yDemos_default as default,
+  endTimestampCountdownDemo,
+  serverTimestampCountdownDemo
+};

package/es/Countdown/index.css

@@ -15,6 +15,17 @@ xhs-page {
   font-weight: var(--bui-countdown-font-weight);
   font-family: var(--bui-font-family);
 }
+.bui-countdown-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 .bui-countdown-slice {
   display: flex;
   flex-direction: row;

package/es/DatePicker/DatePicker.js

@@ -0,0 +1,308 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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;
+};
+import React, { forwardRef, useEffect, useState } from "react";
+import clsx from "clsx";
+import { useValue } from "@bifrostui/utils";
+import Picker from "../Picker";
+import { useLocaleText } from "../locales";
+import { DatePickerType } from "./constants";
+const MIN_DATE = new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1);
+const MAX_DATE = new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11, 31);
+const DEFAULT_PICKER = [
+  DatePickerType.YEAR,
+  DatePickerType.MONTH,
+  DatePickerType.DAY
+];
+function isValidDate(value) {
+  return value instanceof Date && !Number.isNaN(value.getTime());
+}
+const padZero = (num, targetLength = 2) => {
+  let str = `${num}`;
+  while (str.length < targetLength) {
+    str = `0${str}`;
+  }
+  return str;
+};
+const getMaxDay = (year, monthIndex) => {
+  return new Date(year, monthIndex + 1, 0).getDate();
+};
+const getDateTypeValue = (date, type) => {
+  switch (type) {
+    case DatePickerType.YEAR:
+      return date.getFullYear();
+    case DatePickerType.MONTH:
+      return date.getMonth() + 1;
+    case DatePickerType.DAY:
+      return date.getDate();
+    case DatePickerType.HOUR:
+      return date.getHours();
+    case DatePickerType.MINUTE:
+      return date.getMinutes();
+    case DatePickerType.SECOND:
+      return date.getSeconds();
+    default:
+      throw new Error(`\u9519\u8BEF\u7684picker\u7C7B\u578B\uFF1A${type}`);
+  }
+};
+const DatePicker = forwardRef((props, ref) => {
+  const _a = props, {
+    className,
+    value: propValue,
+    defaultValue,
+    views = DEFAULT_PICKER,
+    minDate: propMinDate = MIN_DATE,
+    maxDate: propMaxDate = MAX_DATE,
+    showUnit = false,
+    formatter,
+    filter,
+    disableDateTimeView,
+    dateTimeStep,
+    onConfirm,
+    onClose,
+    onChange
+  } = _a, others = __objRest(_a, [
+    "className",
+    "value",
+    "defaultValue",
+    "views",
+    "minDate",
+    "maxDate",
+    "showUnit",
+    "formatter",
+    "filter",
+    "disableDateTimeView",
+    "dateTimeStep",
+    "onConfirm",
+    "onClose",
+    "onChange"
+  ]);
+  const [options, setOptions] = useState([]);
+  const [pickerValue, setPickerValue] = useState([]);
+  const datePickerText = useLocaleText("datePicker");
+  const formatDate = (date) => {
+    let formattedDate = date;
+    if (!formattedDate || !isValidDate(date) || formattedDate.getTime() < propMinDate.getTime()) {
+      formattedDate = propMinDate;
+    }
+    if (formattedDate.getTime() > propMaxDate.getTime()) {
+      formattedDate = propMaxDate;
+    }
+    return formattedDate;
+  };
+  const [currentDate, triggerChange] = useValue({
+    value: propValue && formatDate(propValue),
+    defaultValue: formatDate(defaultValue)
+  });
+  const handleConfirm = (e) => {
+    onConfirm == null ? void 0 : onConfirm(e, { value: currentDate });
+  };
+  const handleClose = (e) => {
+    onClose == null ? void 0 : onClose(e, { value: currentDate });
+  };
+  const handleChange = (e, { value, columnIndex }) => {
+    if (value[columnIndex] === null)
+      return;
+    const current = new Date(currentDate);
+    switch (views[columnIndex]) {
+      case DatePickerType.YEAR:
+        current.setFullYear(value[columnIndex]);
+        break;
+      case DatePickerType.MONTH: {
+        const selectedMaxDay = getMaxDay(
+          current.getFullYear(),
+          Number(value[columnIndex]) - 1
+        );
+        if (current.getDate() > selectedMaxDay) {
+          current.setDate(selectedMaxDay);
+        }
+        current.setMonth(value[columnIndex] - 1);
+        break;
+      }
+      case DatePickerType.DAY:
+        current.setDate(value[columnIndex]);
+        break;
+      case DatePickerType.HOUR:
+        current.setHours(value[columnIndex]);
+        break;
+      case DatePickerType.MINUTE:
+        current.setMinutes(value[columnIndex]);
+        break;
+      case DatePickerType.SECOND:
+        current.setSeconds(value[columnIndex]);
+        break;
+      default:
+        throw new Error(`\u9519\u8BEF\u7684picker\u7C7B\u578B\uFF1A${views[columnIndex]}`);
+    }
+    triggerChange(e, formatDate(current));
+    onChange == null ? void 0 : onChange(e, { type: views[columnIndex], value: current });
+  };
+  const formatOption = (type, value) => {
+    let label = padZero(value);
+    if (formatter) {
+      return formatter(type, {
+        value,
+        label
+      });
+    }
+    if (showUnit) {
+      label += datePickerText[type];
+    }
+    return { value, label };
+  };
+  const generateOptions = (min, max, type, columnIndex) => {
+    const step = (dateTimeStep == null ? void 0 : dateTimeStep[type]) || 1;
+    let valueIndex = 0;
+    const optionsArray = Array.from(
+      { length: (max - min + 1) / step || 1 },
+      (_, index) => {
+        const value = index * step + min;
+        if (value <= getDateTypeValue(currentDate, type)) {
+          valueIndex = index;
+        }
+        return formatOption(type, value);
+      }
+    );
+    pickerValue[columnIndex] = optionsArray[valueIndex].value;
+    setPickerValue([...pickerValue]);
+    if ((disableDateTimeView == null ? void 0 : disableDateTimeView[type]) && typeof disableDateTimeView[type] === "function") {
+      const disabledOptionsValue = disableDateTimeView[type](
+        optionsArray.map((i) => i.value)
+      );
+      return optionsArray.map((option) => {
+        if (disabledOptionsValue.includes(option.value)) {
+          return __spreadProps(__spreadValues({}, option), {
+            disabled: true
+          });
+        }
+        return option;
+      });
+    }
+    if (filter) {
+      return filter(type, optionsArray);
+    }
+    return optionsArray;
+  };
+  const getBoundary = (type, value) => {
+    const boundary = type === "min" ? propMinDate : propMaxDate;
+    const year = boundary.getFullYear();
+    let month = 1;
+    let date = 1;
+    let hour = 0;
+    let minute = 0;
+    let seconds = 0;
+    if (type === "max") {
+      month = 12;
+      date = getMaxDay(value.getFullYear(), value.getMonth());
+      hour = 23;
+      minute = 59;
+      seconds = 59;
+    }
+    if (value.getFullYear() === year) {
+      month = boundary.getMonth() + 1;
+      if (value.getMonth() + 1 === month) {
+        date = boundary.getDate();
+        if (value.getDate() === date) {
+          hour = boundary.getHours();
+          if (value.getHours() === hour) {
+            minute = boundary.getMinutes();
+            if (value.getMinutes() === minute) {
+              seconds = boundary.getSeconds();
+            }
+          }
+        }
+      }
+    }
+    return {
+      [`${type}Year`]: year,
+      [`${type}Month`]: month,
+      [`${type}Date`]: date,
+      [`${type}Hour`]: hour,
+      [`${type}Minute`]: minute,
+      [`${type}Seconds`]: seconds
+    };
+  };
+  const generateRanges = () => {
+    const ranges = [];
+    const { minYear, minMonth, minDate, minHour, minMinute, minSeconds } = getBoundary("min", currentDate);
+    const { maxYear, maxMonth, maxDate, maxHour, maxMinute, maxSeconds } = getBoundary("max", currentDate);
+    for (let i = 0; i < views.length; i += 1) {
+      const type = views[i];
+      switch (type) {
+        case DatePickerType.YEAR:
+          ranges.push([minYear, maxYear]);
+          break;
+        case DatePickerType.MONTH:
+          ranges.push([minMonth, maxMonth]);
+          break;
+        case DatePickerType.DAY:
+          ranges.push([minDate, maxDate]);
+          break;
+        case DatePickerType.HOUR:
+          ranges.push([minHour, maxHour]);
+          break;
+        case DatePickerType.MINUTE:
+          ranges.push([minMinute, maxMinute]);
+          break;
+        case DatePickerType.SECOND:
+          ranges.push([minSeconds, maxSeconds]);
+          break;
+        default:
+          throw new Error(`\u9519\u8BEF\u7684picker\u7C7B\u578B\uFF1A${type}`);
+      }
+    }
+    return ranges;
+  };
+  const generateRangeOptions = () => generateRanges().map(
+    (range, index) => generateOptions(range[0], range[1], views[index], index)
+  );
+  useEffect(() => {
+    setOptions(generateRangeOptions());
+  }, [currentDate, views, propMinDate, propMaxDate]);
+  return /* @__PURE__ */ React.createElement(
+    Picker,
+    __spreadProps(__spreadValues({}, others), {
+      "data-selected": currentDate ? currentDate.getTime() : "",
+      className: clsx("bui-date-picker", className),
+      ref,
+      options,
+      value: pickerValue,
+      onConfirm: handleConfirm,
+      onClose: handleClose,
+      onOptionChange: handleChange
+    })
+  );
+});
+DatePicker.displayName = "BuiDatePicker";
+var DatePicker_default = DatePicker;
+export {
+  DatePicker_default as default
+};

package/es/DatePicker/DatePicker.types.js

@@ -0,0 +1 @@
+export {};

package/es/DatePicker/constants.js

@@ -0,0 +1,14 @@
+var DatePickerType = /* @__PURE__ */ ((DatePickerType2) => {
+  DatePickerType2["YEAR"] = "year";
+  DatePickerType2["MONTH"] = "month";
+  DatePickerType2["DAY"] = "day";
+  DatePickerType2["HOUR"] = "hour";
+  DatePickerType2["MINUTE"] = "minute";
+  DatePickerType2["SECOND"] = "second";
+  return DatePickerType2;
+})(DatePickerType || {});
+var constants_default = DatePickerType;
+export {
+  DatePickerType,
+  constants_default as default
+};

package/es/DatePicker/index.js

@@ -0,0 +1,8 @@
+import { default as default2, default as default3 } from "./DatePicker";
+export * from "./DatePicker.types";
+import { DatePickerType } from "./constants";
+export {
+  default3 as DatePicker,
+  DatePickerType,
+  default2 as default
+};

package/es/DesktopDatePicker/DesktopDatePicker.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);
+}