@pisell/materials 6.9.3 → 6.9.5

package/es/components/pisellDateTimeDisplay/components/DateDisplay.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+import type { DateFormatConfig, TextStyleConfig } from '../types';
+/**
+ * DateDisplay 组件 Props
+ */
+export interface DateDisplayProps {
+    /**
+     * 日期对象
+     */
+    date: Dayjs;
+    /**
+     * 日期格式配置
+     */
+    format?: DateFormatConfig;
+    /**
+     * 文本样式
+     */
+    style?: TextStyleConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+/**
+ * 日期展示组件
+ *
+ * @description
+ * - 格式化并展示日期
+ * - 支持不同的日期顺序（YMD/MDY/DMY）
+ * - 支持年月日字段显隐
+ * - 支持中文单位（年、月、日）
+ * - 支持英文月份格式（简写/完整/数字）
+ *
+ * @example
+ * <DateDisplay
+ *   date={dayjs()}
+ *   format={{ order: 'YMD', showYear: true, showChineseUnit: true }}
+ *   style={{ fontSize: 18, fontWeight: 400, color: '#666' }}
+ * />
+ */
+export declare const DateDisplay: React.FC<DateDisplayProps>;
+export default DateDisplay;

package/es/components/pisellDateTimeDisplay/components/DateDisplay.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { formatDate } from "../utils";
+
+/**
+ * DateDisplay 组件 Props
+ */
+
+/**
+ * 日期展示组件
+ *
+ * @description
+ * - 格式化并展示日期
+ * - 支持不同的日期顺序（YMD/MDY/DMY）
+ * - 支持年月日字段显隐
+ * - 支持中文单位（年、月、日）
+ * - 支持英文月份格式（简写/完整/数字）
+ *
+ * @example
+ * <DateDisplay
+ *   date={dayjs()}
+ *   format={{ order: 'YMD', showYear: true, showChineseUnit: true }}
+ *   style={{ fontSize: 18, fontWeight: 400, color: '#666' }}
+ * />
+ */
+export var DateDisplay = function DateDisplay(_ref) {
+  var date = _ref.date,
+    format = _ref.format,
+    style = _ref.style,
+    className = _ref.className;
+  // 格式化日期
+  var formattedDate = formatDate(date, format);
+
+  // 如果没有要显示的内容，返回 null
+  if (!formattedDate) {
+    return null;
+  }
+
+  // 构建样式
+  var inlineStyle = {
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+    color: style === null || style === void 0 ? void 0 : style.color,
+    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-datetime-display-date ".concat(className || '').trim(),
+    style: inlineStyle
+  }, formattedDate);
+};
+export default DateDisplay;

package/es/components/pisellDateTimeDisplay/components/TimeDisplay.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+import type { TimeFormatConfig, TextStyleConfig } from '../types';
+/**
+ * TimeDisplay 组件 Props
+ */
+export interface TimeDisplayProps {
+    /**
+     * 时间对象
+     */
+    time: Dayjs;
+    /**
+     * 时间格式配置
+     */
+    format?: TimeFormatConfig;
+    /**
+     * 文本样式
+     */
+    style?: TextStyleConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+/**
+ * 时间展示组件
+ *
+ * @description
+ * - 格式化并展示时间
+ * - 支持 12/24 小时制
+ * - 支持显示秒
+ * - 支持小时补零
+ *
+ * @example
+ * <TimeDisplay
+ *   time={dayjs()}
+ *   format={{ use12Hour: false, showSeconds: true }}
+ *   style={{ fontSize: 24, fontWeight: 600, color: '#000' }}
+ * />
+ */
+export declare const TimeDisplay: React.FC<TimeDisplayProps>;
+export default TimeDisplay;

package/es/components/pisellDateTimeDisplay/components/TimeDisplay.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { formatTime } from "../utils";
+
+/**
+ * TimeDisplay 组件 Props
+ */
+
+/**
+ * 时间展示组件
+ *
+ * @description
+ * - 格式化并展示时间
+ * - 支持 12/24 小时制
+ * - 支持显示秒
+ * - 支持小时补零
+ *
+ * @example
+ * <TimeDisplay
+ *   time={dayjs()}
+ *   format={{ use12Hour: false, showSeconds: true }}
+ *   style={{ fontSize: 24, fontWeight: 600, color: '#000' }}
+ * />
+ */
+export var TimeDisplay = function TimeDisplay(_ref) {
+  var time = _ref.time,
+    format = _ref.format,
+    style = _ref.style,
+    className = _ref.className;
+  // 格式化时间
+  var formattedTime = formatTime(time, format);
+
+  // 构建样式
+  var inlineStyle = {
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+    color: style === null || style === void 0 ? void 0 : style.color,
+    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-datetime-display-time ".concat(className || '').trim(),
+    style: inlineStyle
+  }, formattedTime);
+};
+export default TimeDisplay;

package/es/components/pisellDateTimeDisplay/components/WeekdayDisplay.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+import type { WeekdayFormatConfig, TextStyleConfig } from '../types';
+/**
+ * WeekdayDisplay 组件 Props
+ */
+export interface WeekdayDisplayProps {
+    /**
+     * 日期对象（用于获取星期）
+     */
+    weekday: Dayjs;
+    /**
+     * 星期格式配置
+     */
+    format?: WeekdayFormatConfig;
+    /**
+     * 文本样式
+     */
+    style?: TextStyleConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+/**
+ * 星期展示组件
+ *
+ * @description
+ * - 格式化并展示星期
+ * - 支持完整/缩写/单字母模式
+ * - 自动支持中英文
+ *
+ * @example
+ * // 默认（缩写）
+ * <WeekdayDisplay
+ *   weekday={dayjs()}
+ *   format={{ full: false, singleLetter: false }}
+ *   style={{ fontSize: 18, fontWeight: 400, color: '#666' }}
+ * />
+ * // => "Sat" / "周六"
+ *
+ * // 完整
+ * <WeekdayDisplay
+ *   weekday={dayjs()}
+ *   format={{ full: true }}
+ * />
+ * // => "Saturday" / "星期六"
+ *
+ * // 单字母
+ * <WeekdayDisplay
+ *   weekday={dayjs()}
+ *   format={{ singleLetter: true }}
+ * />
+ * // => "S" / "六"
+ */
+export declare const WeekdayDisplay: React.FC<WeekdayDisplayProps>;
+export default WeekdayDisplay;

package/es/components/pisellDateTimeDisplay/components/WeekdayDisplay.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { formatWeekday } from "../utils";
+
+/**
+ * WeekdayDisplay 组件 Props
+ */
+
+/**
+ * 星期展示组件
+ *
+ * @description
+ * - 格式化并展示星期
+ * - 支持完整/缩写/单字母模式
+ * - 自动支持中英文
+ *
+ * @example
+ * // 默认（缩写）
+ * <WeekdayDisplay
+ *   weekday={dayjs()}
+ *   format={{ full: false, singleLetter: false }}
+ *   style={{ fontSize: 18, fontWeight: 400, color: '#666' }}
+ * />
+ * // => "Sat" / "周六"
+ *
+ * // 完整
+ * <WeekdayDisplay
+ *   weekday={dayjs()}
+ *   format={{ full: true }}
+ * />
+ * // => "Saturday" / "星期六"
+ *
+ * // 单字母
+ * <WeekdayDisplay
+ *   weekday={dayjs()}
+ *   format={{ singleLetter: true }}
+ * />
+ * // => "S" / "六"
+ */
+export var WeekdayDisplay = function WeekdayDisplay(_ref) {
+  var weekday = _ref.weekday,
+    format = _ref.format,
+    style = _ref.style,
+    className = _ref.className;
+  // 格式化星期
+  var formattedWeekday = formatWeekday(weekday, format);
+
+  // 构建样式
+  var inlineStyle = {
+    fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
+    fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
+    color: style === null || style === void 0 ? void 0 : style.color,
+    lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-datetime-display-weekday ".concat(className || '').trim(),
+    style: inlineStyle
+  }, formattedWeekday);
+};
+export default WeekdayDisplay;

package/es/components/pisellDateTimeDisplay/components/index.d.ts

@@ -0,0 +1,6 @@
+export { TimeDisplay } from './TimeDisplay';
+export { DateDisplay } from './DateDisplay';
+export { WeekdayDisplay } from './WeekdayDisplay';
+export type { TimeDisplayProps } from './TimeDisplay';
+export type { DateDisplayProps } from './DateDisplay';
+export type { WeekdayDisplayProps } from './WeekdayDisplay';

package/es/components/pisellDateTimeDisplay/components/index.js

@@ -0,0 +1,3 @@
+export { TimeDisplay } from "./TimeDisplay";
+export { DateDisplay } from "./DateDisplay";
+export { WeekdayDisplay } from "./WeekdayDisplay";

package/es/components/pisellDateTimeDisplay/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useCurrentTime } from './useCurrentTime';
+export type { UseCurrentTimeOptions } from './useCurrentTime';

package/es/components/pisellDateTimeDisplay/hooks/index.js

@@ -0,0 +1 @@
+export { useCurrentTime } from "./useCurrentTime";

package/es/components/pisellDateTimeDisplay/hooks/useCurrentTime.d.ts

@@ -0,0 +1,45 @@
+import { Dayjs } from 'dayjs';
+/**
+ * useCurrentTime Hook 配置项
+ */
+export interface UseCurrentTimeOptions {
+    /**
+     * 刷新间隔（毫秒）
+     * @default 60000
+     */
+    refreshInterval?: number;
+    /**
+     * 是否禁用自动刷新
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * dayjs locale
+     * @example 'zh-cn' | 'en' | 'ja'
+     */
+    locale?: string;
+    /**
+     * 时间更新回调
+     */
+    onUpdate?: (time: Dayjs) => void;
+}
+/**
+ * 管理当前时间状态的自定义 Hook
+ *
+ * @description
+ * - 自动创建定时器刷新时间
+ * - 支持自定义刷新间隔
+ * - 支持国际化（locale）
+ * - 组件卸载时自动清除定时器
+ *
+ * @example
+ * const currentTime = useCurrentTime({
+ *   refreshInterval: 1000,
+ *   locale: 'zh-cn',
+ *   onUpdate: (time) => console.log(time.format())
+ * });
+ *
+ * @param options 配置项
+ * @returns 当前时间（Dayjs 对象）
+ */
+export declare function useCurrentTime(options?: UseCurrentTimeOptions): Dayjs;

package/es/components/pisellDateTimeDisplay/hooks/useCurrentTime.js

@@ -0,0 +1,79 @@
+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 { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+
+/**
+ * useCurrentTime Hook 配置项
+ */
+
+/**
+ * 管理当前时间状态的自定义 Hook
+ *
+ * @description
+ * - 自动创建定时器刷新时间
+ * - 支持自定义刷新间隔
+ * - 支持国际化（locale）
+ * - 组件卸载时自动清除定时器
+ *
+ * @example
+ * const currentTime = useCurrentTime({
+ *   refreshInterval: 1000,
+ *   locale: 'zh-cn',
+ *   onUpdate: (time) => console.log(time.format())
+ * });
+ *
+ * @param options 配置项
+ * @returns 当前时间（Dayjs 对象）
+ */
+export function useCurrentTime(options) {
+  var _ref = options || {},
+    _ref$refreshInterval = _ref.refreshInterval,
+    refreshInterval = _ref$refreshInterval === void 0 ? 60000 : _ref$refreshInterval,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    locale = _ref.locale,
+    onUpdate = _ref.onUpdate;
+
+  // 初始化时间
+  var _useState = useState(function () {
+      var time = dayjs();
+      return locale ? time.locale(locale) : time;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentTime = _useState2[0],
+    setCurrentTime = _useState2[1];
+  useEffect(function () {
+    // 如果禁用自动刷新，只设置一次
+    if (disabled) {
+      return;
+    }
+
+    // 设置定时器
+    var timer = setInterval(function () {
+      var time = dayjs();
+      var localizedTime = locale ? time.locale(locale) : time;
+      setCurrentTime(localizedTime);
+      onUpdate === null || onUpdate === void 0 || onUpdate(localizedTime);
+    }, refreshInterval);
+
+    // 清除定时器
+    return function () {
+      clearInterval(timer);
+    };
+  }, [refreshInterval, disabled, locale, onUpdate]);
+
+  // 当 locale 改变时，立即更新时间的 locale
+  useEffect(function () {
+    if (locale) {
+      setCurrentTime(function (prevTime) {
+        return prevTime.locale(locale);
+      });
+    }
+  }, [locale]);
+  return currentTime;
+}

package/es/components/pisellDateTimeDisplay/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PisellDateTimeDisplay } from './PisellDateTimeDisplay';
+export type { PisellDateTimeDisplayProps, LayoutDirection, DateOrder, TextAlign, FieldType, TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, FieldConfig, TextStyleConfig, ContainerStyleConfig, } from './types';

package/es/components/pisellDateTimeDisplay/index.js

@@ -0,0 +1 @@
+export { default as PisellDateTimeDisplay } from "./PisellDateTimeDisplay";