@pisell/materials 6.3.25 → 6.3.27

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js

@@ -0,0 +1,240 @@
+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 __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);
+
+// src/components/pisellDateTimeDisplay/PisellDateTimeDisplay.tsx
+var PisellDateTimeDisplay_exports = {};
+__export(PisellDateTimeDisplay_exports, {
+  PisellDateTimeDisplay: () => PisellDateTimeDisplay,
+  default: () => PisellDateTimeDisplay_default
+});
+module.exports = __toCommonJS(PisellDateTimeDisplay_exports);
+var import_react = __toESM(require("react"));
+var import_dayjs = __toESM(require("dayjs"));
+var import_zh_cn = require("dayjs/locale/zh-cn");
+var import_en = require("dayjs/locale/en");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var import_components = require("./components");
+var import_dateTimeDisplayFormats = require("./formats/dateTimeDisplayFormats");
+var import_PisellDateTimeDisplay = require("./PisellDateTimeDisplay.less");
+var PisellDateTimeDisplay = (props) => {
+  const {
+    layout = "horizontal",
+    textAlign = "center",
+    fields,
+    formatByLocale,
+    timeFormat,
+    dateFormat,
+    weekdayFormat,
+    customFormat,
+    inlineSeparator = " · ",
+    containerStyle,
+    timeStyle,
+    dateStyle,
+    weekdayStyle,
+    refreshInterval,
+    disableAutoRefresh = false,
+    locale,
+    onTimeUpdate,
+    onClick,
+    className,
+    style
+  } = props;
+  const localeKey = (0, import_utils.getDayjsLocale)(locale);
+  const baseLocale = localeKey.split("-")[0];
+  const presetSource = formatByLocale ?? import_dateTimeDisplayFormats.DATETIME_DISPLAY_FORMATS;
+  const preset = presetSource[localeKey] ?? presetSource[baseLocale] ?? {};
+  const effectiveFields = { ...preset.fields, ...fields };
+  const effectiveDateFormat = { ...preset.dateFormat, ...dateFormat };
+  const effectiveTimeFormat = { ...preset.timeFormat, ...timeFormat };
+  const effectiveWeekdayFormat = { ...preset.weekdayFormat, ...weekdayFormat };
+  const computedRefreshInterval = refreshInterval ?? (0, import_utils.getRefreshInterval)(effectiveTimeFormat);
+  const currentTime = (0, import_hooks.useCurrentTime)({
+    refreshInterval: computedRefreshInterval,
+    disabled: disableAutoRefresh,
+    locale,
+    onUpdate: onTimeUpdate
+  });
+  if (customFormat) {
+    const formattedTime = currentTime.format(customFormat);
+    const containerInlineStyle2 = {
+      background: containerStyle == null ? void 0 : containerStyle.background,
+      borderRadius: containerStyle == null ? void 0 : containerStyle.borderRadius,
+      border: containerStyle == null ? void 0 : containerStyle.border,
+      boxShadow: containerStyle == null ? void 0 : containerStyle.boxShadow,
+      padding: containerStyle == null ? void 0 : containerStyle.padding,
+      textAlign,
+      ...style
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `pisell-datetime-display pisell-datetime-display-custom ${className || ""}`.trim(),
+        style: containerInlineStyle2,
+        onClick
+      },
+      /* @__PURE__ */ import_react.default.createElement("span", null, formattedTime)
+    );
+  }
+  const {
+    showTime = true,
+    showDate = true,
+    showWeekday = true,
+    fieldOrder = ["time", "date", "weekday"]
+  } = effectiveFields || {};
+  const referenceDate = (0, import_dayjs.default)();
+  const relativeDay = (effectiveDateFormat == null ? void 0 : effectiveDateFormat.showRelativeDay) ? (0, import_utils.getRelativeDay)(currentTime, referenceDate) : null;
+  const hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
+  const containerInlineStyle = {
+    background: containerStyle == null ? void 0 : containerStyle.background,
+    borderRadius: containerStyle == null ? void 0 : containerStyle.borderRadius,
+    border: containerStyle == null ? void 0 : containerStyle.border,
+    boxShadow: containerStyle == null ? void 0 : containerStyle.boxShadow,
+    padding: containerStyle == null ? void 0 : containerStyle.padding,
+    gap: containerStyle == null ? void 0 : containerStyle.gap,
+    textAlign,
+    ...style
+  };
+  const renderField = (fieldType) => {
+    switch (fieldType) {
+      case "time":
+        return showTime ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.TimeDisplay,
+          {
+            key: "time",
+            time: currentTime,
+            format: effectiveTimeFormat,
+            style: timeStyle
+          }
+        ) : null;
+      case "date":
+        return showDate ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.DateDisplay,
+          {
+            key: "date",
+            date: currentTime,
+            format: effectiveDateFormat,
+            referenceDate: (0, import_dayjs.default)(),
+            style: dateStyle
+          }
+        ) : null;
+      case "weekday":
+        return showWeekday && !hideWeekdayWhenDateRelative ? /* @__PURE__ */ import_react.default.createElement(
+          import_components.WeekdayDisplay,
+          {
+            key: "weekday",
+            weekday: currentTime,
+            format: effectiveWeekdayFormat,
+            style: weekdayStyle
+          }
+        ) : null;
+      default:
+        return null;
+    }
+  };
+  if (layout === "inline") {
+    const inlineSeparators = effectiveFields == null ? void 0 : effectiveFields.inlineSeparators;
+    const renderedFields2 = fieldOrder.map(renderField).filter((field) => field !== null);
+    if (renderedFields2.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `pisell-datetime-display pisell-datetime-display-inline ${className || ""}`.trim(),
+        style: containerInlineStyle,
+        onClick
+      },
+      renderedFields2.map((field, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: index }, field, index < renderedFields2.length - 1 && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-datetime-display-separator" }, (inlineSeparators == null ? void 0 : inlineSeparators[index]) ?? inlineSeparator)))
+    );
+  }
+  const renderedFields = fieldOrder.map(renderField).filter((field) => field !== null);
+  if (renderedFields.length === 0) {
+    return null;
+  }
+  if (layout === "horizontal") {
+    const timeField = showTime ? renderField("time") : null;
+    const currentLocale = currentTime.locale();
+    const isChinese = (0, import_utils.isChinese)(currentLocale);
+    if (showDate && showWeekday) {
+      const labels = effectiveDateFormat == null ? void 0 : effectiveDateFormat.relativeDayLabels;
+      const dateStr = relativeDay ? (labels == null ? void 0 : labels[relativeDay]) ?? (0, import_utils.getRelativeDayLabel)(relativeDay, currentTime.locale()) : isChinese ? currentTime.format("M月D日") : currentTime.format("D MMM");
+      const weekdayStr = currentTime.format("ddd");
+      const combinedStr = relativeDay ? dateStr : isChinese ? `${weekdayStr} ${dateStr}` : `${weekdayStr}, ${dateStr}`;
+      const dateInlineStyle = {
+        fontSize: dateStyle == null ? void 0 : dateStyle.fontSize,
+        fontWeight: dateStyle == null ? void 0 : dateStyle.fontWeight,
+        color: dateStyle == null ? void 0 : dateStyle.color,
+        lineHeight: dateStyle == null ? void 0 : dateStyle.lineHeight
+      };
+      return /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: `pisell-datetime-display pisell-datetime-display-${layout} ${className || ""}`.trim(),
+          style: containerInlineStyle,
+          onClick
+        },
+        timeField,
+        /* @__PURE__ */ import_react.default.createElement(
+          "span",
+          {
+            className: "pisell-datetime-display-date pisell-datetime-display-combined",
+            style: dateInlineStyle
+          },
+          combinedStr
+        )
+      );
+    }
+    const dateField = showDate ? renderField("date") : null;
+    const weekdayField = showWeekday ? renderField("weekday") : null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `pisell-datetime-display pisell-datetime-display-${layout} ${className || ""}`.trim(),
+        style: containerInlineStyle,
+        onClick
+      },
+      timeField,
+      (dateField || weekdayField) && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-datetime-display-date-weekday-row" }, dateField, weekdayField)
+    );
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `pisell-datetime-display pisell-datetime-display-${layout} ${className || ""}`.trim(),
+      style: containerInlineStyle,
+      onClick
+    },
+    renderedFields
+  );
+};
+var PisellDateTimeDisplay_default = import_react.default.memo(PisellDateTimeDisplay);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellDateTimeDisplay
+});

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.less

@@ -0,0 +1,96 @@
+.pisell-datetime-display {
+  display: flex;
+  color: #000;
+
+  // 水平布局（默认）
+  &-horizontal {
+    flex-direction: column;
+    gap: 4px;
+
+    .pisell-datetime-display-time {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .pisell-datetime-display-date,
+    .pisell-datetime-display-weekday {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.2;
+    }
+
+    // 合并显示的日期星期（Sat, 21 Mar 或 周五 1月30日）
+    .pisell-datetime-display-combined {
+      font-size: 12px;
+    }
+
+    // 日期和星期同一行的容器
+    .pisell-datetime-display-date-weekday-row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+
+  // 垂直布局
+  &-vertical {
+    flex-direction: column;
+    gap: 8px;
+
+    .pisell-datetime-display-time {
+      font-size: 16px;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .pisell-datetime-display-date,
+    .pisell-datetime-display-weekday {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 1.2;
+    }
+  }
+
+  // 单行布局
+  &-inline {
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.2;
+  }
+
+  // 分隔符
+  &-separator {
+    display: inline-block;
+  }
+
+  // 自定义格式化
+  &-custom {
+    display: inline-block;
+  }
+
+  // 时间
+  &-time {
+    display: inline-block;
+  }
+
+  // 日期
+  &-date {
+    display: inline-block;
+
+    // 英文环境合并格式（Sat, 21 Mar）
+    &.pisell-datetime-display-combined {
+      display: block;
+    }
+  }
+
+  // 星期
+  &-weekday {
+    display: inline-block;
+  }
+}

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.d.ts

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellDateTimeDisplay from './PisellDateTimeDisplay';
+/**
+ * PisellDateTimeDisplay 组件 Storybook
+ */
+declare const meta: Meta<typeof PisellDateTimeDisplay>;
+export default meta;
+declare type Story = StoryObj<typeof PisellDateTimeDisplay>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 水平布局（默认）
+ */
+export declare const HorizontalLayout: Story;
+/**
+ * 垂直布局
+ */
+export declare const VerticalLayout: Story;
+/**
+ * 单行布局
+ */
+export declare const InlineLayout: Story;
+/**
+ * 单行布局 - 自定义分隔符
+ */
+export declare const InlineWithCustomSeparator: Story;
+/**
+ * 中文完整日期格式：2025-12-31 - 2:00 周四
+ * 单行、日期在前、日期与时间之间 " - "、时间与星期之间空格
+ */
+export declare const InlineDateTimeWeekdayZh: Story;
+/**
+ * 12小时制
+ */
+export declare const Time12Hour: Story;
+/**
+ * 显示秒
+ */
+export declare const TimeWithSeconds: Story;
+/**
+ * 12小时制 + 显示秒
+ */
+export declare const Time12HourWithSeconds: Story;
+/**
+ * 小时补零
+ */
+export declare const TimePadHour: Story;
+/**
+ * 只显示小时
+ */
+export declare const TimeOnlyHour: Story;
+/**
+ * 完整日期（Y-M-D）
+ */
+export declare const DateFullYMD: Story;
+/**
+ * 月-日-年 格式
+ */
+export declare const DateMDY: Story;
+/**
+ * 日-月-年 格式
+ */
+export declare const DateDMY: Story;
+/**
+ * 中文日期带单位
+ */
+export declare const DateChinese: Story;
+/**
+ * 相对日：今天/昨天/明天
+ * 与「当前日期」同天显示「今天」，前一天「昨天」，后一天「明天」；其他日期仍按原格式。
+ * 参考日为 dayjs()，随时间变化：例如 2 月 4 日当天，2 月 4 日显示「今天」，2 月 3 日显示「昨天」。
+ */
+export declare const RelativeDay: Story;
+/**
+ * 相对日 - 英文
+ */
+export declare const RelativeDayEn: Story;
+/**
+ * 相对日 - 自定义文案
+ */
+export declare const RelativeDayCustomLabels: Story;
+/**
+ * 英文完整月份
+ */
+export declare const DateFullMonth: Story;
+/**
+ * 自定义分隔符
+ */
+export declare const DateCustomSeparator: Story;
+/**
+ * 星期完整展示（英文）
+ */
+export declare const WeekdayFull: Story;
+/**
+ * 星期完整展示（中文）
+ */
+export declare const WeekdayFullChinese: Story;
+/**
+ * 星期单字母展示
+ */
+export declare const WeekdaySingleLetter: Story;
+/**
+ * 只显示时间
+ */
+export declare const OnlyTime: Story;
+/**
+ * 只显示日期
+ */
+export declare const OnlyDate: Story;
+/**
+ * 自定义字段顺序
+ */
+export declare const CustomFieldOrder: Story;
+/**
+ * 自定义格式化 - ISO 格式
+ */
+export declare const CustomFormatISO: Story;
+/**
+ * 自定义格式化 - 中文格式
+ */
+export declare const CustomFormatChinese: Story;
+/**
+ * 自定义格式化 - 包含星期
+ */
+export declare const CustomFormatWithWeekday: Story;
+/**
+ * 中文环境
+ */
+export declare const LocaleChinese: Story;
+/**
+ * 英文环境
+ */
+export declare const LocaleEnglish: Story;
+/**
+ * 自定义容器样式
+ */
+export declare const CustomContainerStyle: Story;
+/**
+ * 自定义文本样式
+ */
+export declare const CustomTextStyle: Story;
+/**
+ * 居中对齐
+ */
+export declare const CenterAlign: Story;
+/**
+ * 禁用自动刷新
+ */
+export declare const DisableRefresh: Story;
+/**
+ * 自定义刷新间隔（5秒）
+ */
+export declare const CustomRefreshInterval: Story;
+/**
+ * 应用场景 - 后台首页
+ */
+export declare const ScenarioDashboard: Story;
+/**
+ * 应用场景 - 状态栏
+ */
+export declare const ScenarioStatusBar: Story;
+/**
+ * 应用场景 - 欢迎页
+ */
+export declare const ScenarioWelcome: Story;
+/**
+ * 应用场景 - 大屏展示
+ */
+export declare const ScenarioLargeScreen: Story;
+/**
+ * 多语言对比
+ */
+export declare const MultiLanguage: Story;
+/**
+ * 时间格式对比
+ */
+export declare const TimeFormats: Story;
+/**
+ * 日期格式对比
+ */
+export declare const DateFormats: Story;
+/**
+ * 星期格式对比
+ */
+export declare const WeekdayFormats: Story;
+/**
+ * 所有布局对比
+ */
+export declare const AllLayouts: Story;
+/**
+ * 深色主题
+ */
+export declare const DarkTheme: Story;