@pisell/materials 6.11.5 → 6.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/lowcode/assets-daily.json +11 -11
- package/build/lowcode/assets-dev.json +2 -2
- package/build/lowcode/assets-prod.json +11 -11
- package/build/lowcode/index.js +1 -1
- package/build/lowcode/meta.js +7 -7
- package/build/lowcode/preview.js +9 -9
- package/build/lowcode/render/default/view.css +1 -1
- package/build/lowcode/render/default/view.js +16 -16
- package/build/lowcode/view.css +1 -1
- package/build/lowcode/view.js +15 -15
- package/es/components/PisellTabbar/PisellTabbar.js +47 -44
- package/es/components/PisellTabbar/template/Template1/PisellTabbar.d.ts +3 -18
- package/es/components/PisellTabbar/template/Template1/PisellTabbar.js +124 -28
- package/es/components/PisellTabbar/template/Template1/constants.js +1 -1
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts +2 -2
- package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +2 -2
- package/es/components/pisellDataSourceContainer/hooks/useDataSourceKey.d.ts +2 -2
- package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js +47 -34
- package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.d.ts +19 -0
- package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.js +74 -0
- package/es/components/pisellDateTimeDisplay/components/DateDisplay.d.ts +6 -1
- package/es/components/pisellDateTimeDisplay/components/DateDisplay.js +10 -3
- package/es/components/pisellDateTimeDisplay/formats/dateTimeDisplayFormats.d.ts +7 -0
- package/es/components/pisellDateTimeDisplay/formats/dateTimeDisplayFormats.js +81 -0
- package/es/components/pisellDateTimeDisplay/formats/index.d.ts +1 -0
- package/es/components/pisellDateTimeDisplay/formats/index.js +1 -0
- package/es/components/pisellDateTimeDisplay/hooks/useCurrentTime.d.ts +2 -2
- package/es/components/pisellDateTimeDisplay/hooks/useCurrentTime.js +2 -2
- package/es/components/pisellDateTimeDisplay/types.d.ts +48 -2
- package/es/components/pisellDateTimeDisplay/utils/formatDate.js +25 -6
- package/es/components/pisellDateTimeDisplay/utils/formatDateOrRelative.d.ts +17 -0
- package/es/components/pisellDateTimeDisplay/utils/formatDateOrRelative.js +38 -0
- package/es/components/pisellDateTimeDisplay/utils/formatWeekday.js +11 -12
- package/es/components/pisellDateTimeDisplay/utils/index.d.ts +3 -1
- package/es/components/pisellDateTimeDisplay/utils/index.js +3 -1
- package/es/components/pisellDateTimeDisplay/utils/localeUtils.d.ts +2 -7
- package/es/components/pisellDateTimeDisplay/utils/localeUtils.js +4 -17
- package/es/components/pisellDateTimeDisplay/utils/relativeDay.d.ts +23 -0
- package/es/components/pisellDateTimeDisplay/utils/relativeDay.js +45 -0
- package/es/components/pisellLookup/components/LookupTrigger.js +66 -6
- package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.d.ts +32 -0
- package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.js +197 -0
- package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.less +49 -0
- package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.d.ts +61 -0
- package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.js +209 -0
- package/es/components/pisellTimeRangeDisplay/components/DateBlock.d.ts +20 -0
- package/es/components/pisellTimeRangeDisplay/components/DateBlock.js +30 -0
- package/es/components/pisellTimeRangeDisplay/components/DurationBlock.d.ts +19 -0
- package/es/components/pisellTimeRangeDisplay/components/DurationBlock.js +25 -0
- package/es/components/pisellTimeRangeDisplay/components/TimeRangeBlock.d.ts +30 -0
- package/es/components/pisellTimeRangeDisplay/components/TimeRangeBlock.js +86 -0
- package/es/components/pisellTimeRangeDisplay/components/WeekdayBlock.d.ts +18 -0
- package/es/components/pisellTimeRangeDisplay/components/WeekdayBlock.js +23 -0
- package/es/components/pisellTimeRangeDisplay/components/index.d.ts +8 -0
- package/es/components/pisellTimeRangeDisplay/components/index.js +4 -0
- package/es/components/pisellTimeRangeDisplay/index.d.ts +3 -0
- package/es/components/pisellTimeRangeDisplay/index.js +1 -0
- package/es/components/pisellTimeRangeDisplay/types.d.ts +137 -0
- package/es/components/pisellTimeRangeDisplay/types.js +1 -0
- package/es/components/pisellTimeRangeDisplay/utils/formatDuration.d.ts +14 -0
- package/es/components/pisellTimeRangeDisplay/utils/formatDuration.js +53 -0
- package/es/components/pisellTimeRangeDisplay/utils/index.d.ts +4 -0
- package/es/components/pisellTimeRangeDisplay/utils/index.js +5 -0
- package/es/components/pisellTimeRangeDisplay/utils/parseTimeRange.d.ts +23 -0
- package/es/components/pisellTimeRangeDisplay/utils/parseTimeRange.js +27 -0
- package/es/components/table/Gallery/components/VirtualGrid/useGapSize.d.ts +2 -2
- package/es/components/table/Table/fields/select/filterUtil/index.d.ts +1 -1
- package/es/components/table/Table/fields/treeSelect/filterUtil/index.d.ts +1 -1
- package/es/index.d.ts +2 -0
- package/es/index.js +7 -0
- package/es/utils/index.d.ts +1 -1
- package/es/utils/platform.d.ts +1 -1
- package/lib/components/PisellTabbar/PisellTabbar.js +64 -57
- package/lib/components/PisellTabbar/template/Template1/PisellTabbar.d.ts +3 -18
- package/lib/components/PisellTabbar/template/Template1/PisellTabbar.js +171 -55
- package/lib/components/PisellTabbar/template/Template1/constants.js +1 -1
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts +2 -2
- package/lib/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts +2 -2
- package/lib/components/pisellDataSourceContainer/hooks/useDataSourceKey.d.ts +2 -2
- package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js +27 -17
- package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.d.ts +19 -0
- package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.js +63 -0
- package/lib/components/pisellDateTimeDisplay/components/DateDisplay.d.ts +6 -1
- package/lib/components/pisellDateTimeDisplay/components/DateDisplay.js +5 -1
- package/lib/components/pisellDateTimeDisplay/formats/dateTimeDisplayFormats.d.ts +7 -0
- package/lib/components/pisellDateTimeDisplay/formats/dateTimeDisplayFormats.js +98 -0
- package/lib/components/pisellDateTimeDisplay/formats/index.d.ts +1 -0
- package/lib/components/pisellDateTimeDisplay/formats/index.js +29 -0
- package/lib/components/pisellDateTimeDisplay/hooks/useCurrentTime.d.ts +2 -2
- package/lib/components/pisellDateTimeDisplay/types.d.ts +48 -2
- package/lib/components/pisellDateTimeDisplay/utils/formatDate.js +14 -1
- package/lib/components/pisellDateTimeDisplay/utils/formatDateOrRelative.d.ts +17 -0
- package/lib/components/pisellDateTimeDisplay/utils/formatDateOrRelative.js +54 -0
- package/lib/components/pisellDateTimeDisplay/utils/formatWeekday.js +6 -6
- package/lib/components/pisellDateTimeDisplay/utils/index.d.ts +3 -1
- package/lib/components/pisellDateTimeDisplay/utils/index.js +8 -2
- package/lib/components/pisellDateTimeDisplay/utils/localeUtils.d.ts +2 -7
- package/lib/components/pisellDateTimeDisplay/utils/localeUtils.js +2 -11
- package/lib/components/pisellDateTimeDisplay/utils/relativeDay.d.ts +23 -0
- package/lib/components/pisellDateTimeDisplay/utils/relativeDay.js +54 -0
- package/lib/components/pisellLookup/components/LookupTrigger.js +45 -7
- package/lib/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.d.ts +32 -0
- package/lib/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.js +193 -0
- package/lib/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.less +49 -0
- package/lib/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.d.ts +61 -0
- package/lib/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.stories.js +187 -0
- package/lib/components/pisellTimeRangeDisplay/components/DateBlock.d.ts +20 -0
- package/lib/components/pisellTimeRangeDisplay/components/DateBlock.js +69 -0
- package/lib/components/pisellTimeRangeDisplay/components/DurationBlock.d.ts +19 -0
- package/lib/components/pisellTimeRangeDisplay/components/DurationBlock.js +65 -0
- package/lib/components/pisellTimeRangeDisplay/components/TimeRangeBlock.d.ts +30 -0
- package/lib/components/pisellTimeRangeDisplay/components/TimeRangeBlock.js +120 -0
- package/lib/components/pisellTimeRangeDisplay/components/WeekdayBlock.d.ts +18 -0
- package/lib/components/pisellTimeRangeDisplay/components/WeekdayBlock.js +64 -0
- package/lib/components/pisellTimeRangeDisplay/components/index.d.ts +8 -0
- package/lib/components/pisellTimeRangeDisplay/components/index.js +38 -0
- package/lib/components/pisellTimeRangeDisplay/index.d.ts +3 -0
- package/lib/components/pisellTimeRangeDisplay/index.js +40 -0
- package/lib/components/pisellTimeRangeDisplay/types.d.ts +137 -0
- package/lib/components/pisellTimeRangeDisplay/types.js +17 -0
- package/lib/components/pisellTimeRangeDisplay/utils/formatDuration.d.ts +14 -0
- package/lib/components/pisellTimeRangeDisplay/utils/formatDuration.js +52 -0
- package/lib/components/pisellTimeRangeDisplay/utils/index.d.ts +4 -0
- package/lib/components/pisellTimeRangeDisplay/utils/index.js +47 -0
- package/lib/components/pisellTimeRangeDisplay/utils/parseTimeRange.d.ts +23 -0
- package/lib/components/pisellTimeRangeDisplay/utils/parseTimeRange.js +49 -0
- package/lib/components/table/Gallery/components/VirtualGrid/useGapSize.d.ts +2 -2
- package/lib/components/table/Table/fields/select/filterUtil/index.d.ts +1 -1
- package/lib/components/table/Table/fields/treeSelect/filterUtil/index.d.ts +1 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +3 -0
- package/lib/utils/index.d.ts +1 -1
- package/lib/utils/platform.d.ts +1 -1
- package/lowcode/pisell-time-range-display/index.ts +3 -0
- package/lowcode/pisell-time-range-display/meta.ts +375 -0
- package/lowcode/pisell-time-range-display/snippets.ts +1 -0
- package/package.json +3 -3
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type Dayjs } from 'dayjs';
|
|
3
|
+
import type { DateFormatConfig, TextStyleConfig } from '../types';
|
|
4
|
+
export interface DateBlockProps {
|
|
5
|
+
/** 日期对象 */
|
|
6
|
+
date: Dayjs;
|
|
7
|
+
/** 日期格式配置(含 showRelativeDay:今天/昨天/明天) */
|
|
8
|
+
format?: DateFormatConfig;
|
|
9
|
+
/** 参考日期,用于相对日判定,默认 dayjs() */
|
|
10
|
+
referenceDate?: Dayjs;
|
|
11
|
+
/** 文本样式 */
|
|
12
|
+
style?: TextStyleConfig;
|
|
13
|
+
/** 自定义类名 */
|
|
14
|
+
className?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* 日期展示块(复用 PisellDateTimeDisplay 的 formatDate 与相对日逻辑)
|
|
18
|
+
*/
|
|
19
|
+
export declare const DateBlock: React.FC<DateBlockProps>;
|
|
20
|
+
export default DateBlock;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import dayjs from 'dayjs';
|
|
3
|
+
import { formatDate, getRelativeDay, getRelativeDayLabel } from "../utils";
|
|
4
|
+
/**
|
|
5
|
+
* 日期展示块(复用 PisellDateTimeDisplay 的 formatDate 与相对日逻辑)
|
|
6
|
+
*/
|
|
7
|
+
export var DateBlock = function DateBlock(_ref) {
|
|
8
|
+
var _labels$relativeDay;
|
|
9
|
+
var date = _ref.date,
|
|
10
|
+
format = _ref.format,
|
|
11
|
+
_ref$referenceDate = _ref.referenceDate,
|
|
12
|
+
referenceDate = _ref$referenceDate === void 0 ? dayjs() : _ref$referenceDate,
|
|
13
|
+
style = _ref.style,
|
|
14
|
+
className = _ref.className;
|
|
15
|
+
var labels = format === null || format === void 0 ? void 0 : format.relativeDayLabels;
|
|
16
|
+
var relativeDay = format !== null && format !== void 0 && format.showRelativeDay ? getRelativeDay(date, referenceDate) : null;
|
|
17
|
+
var formattedDate = relativeDay ? (_labels$relativeDay = labels === null || labels === void 0 ? void 0 : labels[relativeDay]) !== null && _labels$relativeDay !== void 0 ? _labels$relativeDay : getRelativeDayLabel(relativeDay, date.locale()) : formatDate(date, format);
|
|
18
|
+
if (!formattedDate) return null;
|
|
19
|
+
var inlineStyle = {
|
|
20
|
+
fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
|
|
21
|
+
fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
|
|
22
|
+
color: style === null || style === void 0 ? void 0 : style.color,
|
|
23
|
+
lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
|
|
24
|
+
};
|
|
25
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
26
|
+
className: "pisell-time-range-display-date ".concat(className || '').trim(),
|
|
27
|
+
style: inlineStyle
|
|
28
|
+
}, formattedDate);
|
|
29
|
+
};
|
|
30
|
+
export default DateBlock;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TextStyleConfig } from '../types';
|
|
3
|
+
export interface DurationBlockProps {
|
|
4
|
+
/** 持续时间(毫秒) */
|
|
5
|
+
durationMs: number;
|
|
6
|
+
/** 是否显示秒 */
|
|
7
|
+
showSeconds?: boolean;
|
|
8
|
+
/** 语言代码,zh 时使用「天/时/分/秒」 */
|
|
9
|
+
locale?: string;
|
|
10
|
+
/** 文本样式 */
|
|
11
|
+
style?: TextStyleConfig;
|
|
12
|
+
/** 自定义类名 */
|
|
13
|
+
className?: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* 持续时长展示块(d h m s 或 天/时/分/秒,按 locale i18n)
|
|
17
|
+
*/
|
|
18
|
+
export declare const DurationBlock: React.FC<DurationBlockProps>;
|
|
19
|
+
export default DurationBlock;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { formatDuration } from "../utils";
|
|
3
|
+
/**
|
|
4
|
+
* 持续时长展示块(d h m s 或 天/时/分/秒,按 locale i18n)
|
|
5
|
+
*/
|
|
6
|
+
export var DurationBlock = function DurationBlock(_ref) {
|
|
7
|
+
var durationMs = _ref.durationMs,
|
|
8
|
+
_ref$showSeconds = _ref.showSeconds,
|
|
9
|
+
showSeconds = _ref$showSeconds === void 0 ? false : _ref$showSeconds,
|
|
10
|
+
locale = _ref.locale,
|
|
11
|
+
style = _ref.style,
|
|
12
|
+
className = _ref.className;
|
|
13
|
+
var formatted = formatDuration(durationMs, showSeconds, locale);
|
|
14
|
+
var inlineStyle = {
|
|
15
|
+
fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
|
|
16
|
+
fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
|
|
17
|
+
color: style === null || style === void 0 ? void 0 : style.color,
|
|
18
|
+
lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
|
|
19
|
+
};
|
|
20
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
21
|
+
className: "pisell-time-range-display-duration ".concat(className || '').trim(),
|
|
22
|
+
style: inlineStyle
|
|
23
|
+
}, formatted);
|
|
24
|
+
};
|
|
25
|
+
export default DurationBlock;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type Dayjs } from 'dayjs';
|
|
3
|
+
import type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, TextStyleConfig } from '../types';
|
|
4
|
+
export interface TimeRangeBlockProps {
|
|
5
|
+
/** 开始时间 */
|
|
6
|
+
start: Dayjs;
|
|
7
|
+
/** 结束时间 */
|
|
8
|
+
end: Dayjs;
|
|
9
|
+
/** 是否同一天 */
|
|
10
|
+
isSameDay: boolean;
|
|
11
|
+
/** 时间格式配置 */
|
|
12
|
+
timeFormat?: TimeFormatConfig;
|
|
13
|
+
/** 日期格式配置(跨天时用于起止日期,含 showRelativeDay) */
|
|
14
|
+
dateFormat?: DateFormatConfig;
|
|
15
|
+
/** 星期格式配置(跨天时用于「Sat, 22 Jan」) */
|
|
16
|
+
weekdayFormat?: WeekdayFormatConfig;
|
|
17
|
+
/** 参考日期,用于相对日判定,默认 dayjs() */
|
|
18
|
+
referenceDate?: Dayjs;
|
|
19
|
+
/** 文本样式 */
|
|
20
|
+
style?: TextStyleConfig;
|
|
21
|
+
/** 自定义类名 */
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* 时间区间展示块
|
|
26
|
+
* - 同一天:HH:mm-HH:mm
|
|
27
|
+
* - 跨天:起止完整日期时间;若某端为相对日(今天/昨天/明天)则只显示「时间 相对日」,不显示星期+日期
|
|
28
|
+
*/
|
|
29
|
+
export declare const TimeRangeBlock: React.FC<TimeRangeBlockProps>;
|
|
30
|
+
export default TimeRangeBlock;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import dayjs from 'dayjs';
|
|
3
|
+
import { formatTime, getDatePartDisplay } from "../utils";
|
|
4
|
+
/**
|
|
5
|
+
* 时间区间展示块
|
|
6
|
+
* - 同一天:HH:mm-HH:mm
|
|
7
|
+
* - 跨天:起止完整日期时间;若某端为相对日(今天/昨天/明天)则只显示「时间 相对日」,不显示星期+日期
|
|
8
|
+
*/
|
|
9
|
+
export var TimeRangeBlock = function TimeRangeBlock(_ref) {
|
|
10
|
+
var start = _ref.start,
|
|
11
|
+
end = _ref.end,
|
|
12
|
+
isSameDay = _ref.isSameDay,
|
|
13
|
+
timeFormat = _ref.timeFormat,
|
|
14
|
+
dateFormat = _ref.dateFormat,
|
|
15
|
+
weekdayFormat = _ref.weekdayFormat,
|
|
16
|
+
_ref$referenceDate = _ref.referenceDate,
|
|
17
|
+
referenceDate = _ref$referenceDate === void 0 ? dayjs() : _ref$referenceDate,
|
|
18
|
+
style = _ref.style,
|
|
19
|
+
className = _ref.className;
|
|
20
|
+
var inlineStyle = {
|
|
21
|
+
fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
|
|
22
|
+
fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
|
|
23
|
+
color: style === null || style === void 0 ? void 0 : style.color,
|
|
24
|
+
lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
|
|
25
|
+
};
|
|
26
|
+
if (isSameDay) {
|
|
27
|
+
var startStr = formatTime(start, timeFormat);
|
|
28
|
+
var endStr = formatTime(end, timeFormat);
|
|
29
|
+
// 小宽度支持:开始时间可单独一行,「 - 结束时间」整段折行
|
|
30
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
31
|
+
className: "pisell-time-range-display-time ".concat(className || '').trim(),
|
|
32
|
+
style: inlineStyle
|
|
33
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
34
|
+
className: "pisell-time-range-display-time-start"
|
|
35
|
+
}, startStr), /*#__PURE__*/React.createElement("span", {
|
|
36
|
+
className: "pisell-time-range-display-time-end-wrap"
|
|
37
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
38
|
+
className: "pisell-time-range-display-time-sep",
|
|
39
|
+
"aria-hidden": true
|
|
40
|
+
}, " - "), /*#__PURE__*/React.createElement("span", {
|
|
41
|
+
className: "pisell-time-range-display-time-end"
|
|
42
|
+
}, endStr)));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// 跨天:时间 + 日期部分;日期部分由 datetime 内置 getDatePartDisplay 统一处理(相对日 or 星期+日期)
|
|
46
|
+
var isCrossYear = start.year() !== end.year();
|
|
47
|
+
var dateFormatOverride = {
|
|
48
|
+
order: 'DMY',
|
|
49
|
+
shortMonth: true,
|
|
50
|
+
showYear: isCrossYear,
|
|
51
|
+
showMonth: true,
|
|
52
|
+
showDay: true,
|
|
53
|
+
useCommaBeforeYear: false
|
|
54
|
+
};
|
|
55
|
+
var startTimeStr = formatTime(start, timeFormat);
|
|
56
|
+
var endTimeStr = formatTime(end, timeFormat);
|
|
57
|
+
var startDatePart = getDatePartDisplay({
|
|
58
|
+
date: start,
|
|
59
|
+
dateFormat: dateFormat,
|
|
60
|
+
weekdayFormat: weekdayFormat,
|
|
61
|
+
referenceDate: referenceDate,
|
|
62
|
+
dateFormatOverride: dateFormatOverride
|
|
63
|
+
});
|
|
64
|
+
var endDatePart = getDatePartDisplay({
|
|
65
|
+
date: end,
|
|
66
|
+
dateFormat: dateFormat,
|
|
67
|
+
weekdayFormat: weekdayFormat,
|
|
68
|
+
referenceDate: referenceDate,
|
|
69
|
+
dateFormatOverride: dateFormatOverride
|
|
70
|
+
});
|
|
71
|
+
var startPart = "".concat(startTimeStr, " ").concat(startDatePart);
|
|
72
|
+
var endPart = "".concat(endTimeStr, " ").concat(endDatePart);
|
|
73
|
+
|
|
74
|
+
// 跨天拆成 2 个块,便于按块换行:块1 起止时间+日期,块2 「 - 」+ 结束时间+日期
|
|
75
|
+
var timeClass = 'pisell-time-range-display-time pisell-time-range-display-time-cross';
|
|
76
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
77
|
+
key: "time-start",
|
|
78
|
+
className: "".concat(timeClass, " ").concat(className || '').trim(),
|
|
79
|
+
style: inlineStyle
|
|
80
|
+
}, startPart), /*#__PURE__*/React.createElement("span", {
|
|
81
|
+
key: "time-end",
|
|
82
|
+
className: "".concat(timeClass, " ").concat(className || '').trim(),
|
|
83
|
+
style: inlineStyle
|
|
84
|
+
}, ' - ', endPart));
|
|
85
|
+
};
|
|
86
|
+
export default TimeRangeBlock;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { Dayjs } from 'dayjs';
|
|
3
|
+
import type { WeekdayFormatConfig, TextStyleConfig } from '../types';
|
|
4
|
+
export interface WeekdayBlockProps {
|
|
5
|
+
/** 日期对象(用于获取星期) */
|
|
6
|
+
weekday: Dayjs;
|
|
7
|
+
/** 星期格式配置 */
|
|
8
|
+
format?: WeekdayFormatConfig;
|
|
9
|
+
/** 文本样式 */
|
|
10
|
+
style?: TextStyleConfig;
|
|
11
|
+
/** 自定义类名 */
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* 星期展示块(复用 PisellDateTimeDisplay 的 formatWeekday)
|
|
16
|
+
*/
|
|
17
|
+
export declare const WeekdayBlock: React.FC<WeekdayBlockProps>;
|
|
18
|
+
export default WeekdayBlock;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { formatWeekday } from "../utils";
|
|
3
|
+
/**
|
|
4
|
+
* 星期展示块(复用 PisellDateTimeDisplay 的 formatWeekday)
|
|
5
|
+
*/
|
|
6
|
+
export var WeekdayBlock = function WeekdayBlock(_ref) {
|
|
7
|
+
var weekday = _ref.weekday,
|
|
8
|
+
format = _ref.format,
|
|
9
|
+
style = _ref.style,
|
|
10
|
+
className = _ref.className;
|
|
11
|
+
var formattedWeekday = formatWeekday(weekday, format);
|
|
12
|
+
var inlineStyle = {
|
|
13
|
+
fontSize: style === null || style === void 0 ? void 0 : style.fontSize,
|
|
14
|
+
fontWeight: style === null || style === void 0 ? void 0 : style.fontWeight,
|
|
15
|
+
color: style === null || style === void 0 ? void 0 : style.color,
|
|
16
|
+
lineHeight: style === null || style === void 0 ? void 0 : style.lineHeight
|
|
17
|
+
};
|
|
18
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
19
|
+
className: "pisell-time-range-display-weekday ".concat(className || '').trim(),
|
|
20
|
+
style: inlineStyle
|
|
21
|
+
}, formattedWeekday);
|
|
22
|
+
};
|
|
23
|
+
export default WeekdayBlock;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { TimeRangeBlock } from './TimeRangeBlock';
|
|
2
|
+
export { DateBlock } from './DateBlock';
|
|
3
|
+
export { WeekdayBlock } from './WeekdayBlock';
|
|
4
|
+
export { DurationBlock } from './DurationBlock';
|
|
5
|
+
export type { TimeRangeBlockProps } from './TimeRangeBlock';
|
|
6
|
+
export type { DateBlockProps } from './DateBlock';
|
|
7
|
+
export type { WeekdayBlockProps } from './WeekdayBlock';
|
|
8
|
+
export type { DurationBlockProps } from './DurationBlock';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export { PisellTimeRangeDisplay, default } from './PisellTimeRangeDisplay';
|
|
2
|
+
export type { PisellTimeRangeDisplayProps, LayoutDirection, TimeRangeFieldType, TimeRangeFieldConfig, DurationFormatConfig, DayjsLike, } from './types';
|
|
3
|
+
export type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, ContainerStyleConfig, TextStyleConfig, TextAlign, } from './types';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PisellTimeRangeDisplay, default } from "./PisellTimeRangeDisplay";
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import type { CSSProperties } from 'react';
|
|
2
|
+
import type { Dayjs } from 'dayjs';
|
|
3
|
+
import type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, ContainerStyleConfig, TextStyleConfig, TextAlign } from '../pisellDateTimeDisplay/types';
|
|
4
|
+
export type { TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, ContainerStyleConfig, TextStyleConfig, TextAlign, };
|
|
5
|
+
/**
|
|
6
|
+
* 字段类型(时间区间、日期、星期、持续时长)
|
|
7
|
+
* - time: 时间区间块(HH:mm-HH:mm 或跨天起止)
|
|
8
|
+
* - date: 日期块
|
|
9
|
+
* - weekday: 星期块
|
|
10
|
+
* - duration: 持续时长块
|
|
11
|
+
*/
|
|
12
|
+
export declare type TimeRangeFieldType = 'time' | 'date' | 'weekday' | 'duration';
|
|
13
|
+
/**
|
|
14
|
+
* 持续时长格式配置
|
|
15
|
+
*/
|
|
16
|
+
export interface DurationFormatConfig {
|
|
17
|
+
/**
|
|
18
|
+
* 是否显示秒
|
|
19
|
+
* @default false
|
|
20
|
+
* @example true -> "2h30m23s" | false -> "2h30m"
|
|
21
|
+
*/
|
|
22
|
+
showSeconds?: boolean;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* 字段配置
|
|
26
|
+
*/
|
|
27
|
+
export interface TimeRangeFieldConfig {
|
|
28
|
+
/**
|
|
29
|
+
* 是否显示时间区间块
|
|
30
|
+
* @default true
|
|
31
|
+
*/
|
|
32
|
+
showTimeRange?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* 是否显示日期块
|
|
35
|
+
* @default true
|
|
36
|
+
*/
|
|
37
|
+
showDate?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* 是否显示星期块
|
|
40
|
+
* @default true
|
|
41
|
+
*/
|
|
42
|
+
showWeekday?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* 是否显示持续时长块
|
|
45
|
+
* @default true
|
|
46
|
+
*/
|
|
47
|
+
showDuration?: boolean;
|
|
48
|
+
/**
|
|
49
|
+
* 字段顺序(四类块可任意排序;默认 时间 日期 星期 持续时长,可实现「持续时间在前」等)
|
|
50
|
+
* @default ['weekday', 'date', 'time', 'duration'] 换行顺序:先持续时间 → 结束时间(跨天)→ 开始/结束时间与日期 → 星期
|
|
51
|
+
*/
|
|
52
|
+
fieldOrder?: TimeRangeFieldType[];
|
|
53
|
+
}
|
|
54
|
+
/**
|
|
55
|
+
* startAt / endAt 的 dayjs 兼容值
|
|
56
|
+
*/
|
|
57
|
+
export declare type DayjsLike = Dayjs | string | number;
|
|
58
|
+
/**
|
|
59
|
+
* PisellTimeRangeDisplay 组件 Props
|
|
60
|
+
*/
|
|
61
|
+
export interface PisellTimeRangeDisplayProps {
|
|
62
|
+
/**
|
|
63
|
+
* 开始时间(dayjs 兼容值)
|
|
64
|
+
*/
|
|
65
|
+
startAt: DayjsLike;
|
|
66
|
+
/**
|
|
67
|
+
* 结束时间(dayjs 兼容值)
|
|
68
|
+
*/
|
|
69
|
+
endAt: DayjsLike;
|
|
70
|
+
/**
|
|
71
|
+
* 文本对齐方式(单行/多行均生效)
|
|
72
|
+
* @default 'center'
|
|
73
|
+
*/
|
|
74
|
+
textAlign?: TextAlign;
|
|
75
|
+
/**
|
|
76
|
+
* 字段显示与排序配置
|
|
77
|
+
*/
|
|
78
|
+
fields?: TimeRangeFieldConfig;
|
|
79
|
+
/**
|
|
80
|
+
* 同一天时是否显示具体日期
|
|
81
|
+
* @default true
|
|
82
|
+
*/
|
|
83
|
+
showDateForSameDay?: boolean;
|
|
84
|
+
/**
|
|
85
|
+
* 时间格式配置(复用 PisellDateTimeDisplay)
|
|
86
|
+
*/
|
|
87
|
+
timeFormat?: TimeFormatConfig;
|
|
88
|
+
/**
|
|
89
|
+
* 日期格式配置(复用 PisellDateTimeDisplay)
|
|
90
|
+
*/
|
|
91
|
+
dateFormat?: DateFormatConfig;
|
|
92
|
+
/**
|
|
93
|
+
* 星期格式配置(复用 PisellDateTimeDisplay)
|
|
94
|
+
*/
|
|
95
|
+
weekdayFormat?: WeekdayFormatConfig;
|
|
96
|
+
/**
|
|
97
|
+
* 持续时长格式配置
|
|
98
|
+
*/
|
|
99
|
+
durationFormat?: DurationFormatConfig;
|
|
100
|
+
/**
|
|
101
|
+
* 容器样式
|
|
102
|
+
*/
|
|
103
|
+
containerStyle?: ContainerStyleConfig;
|
|
104
|
+
/**
|
|
105
|
+
* 时间区间文本样式
|
|
106
|
+
*/
|
|
107
|
+
timeStyle?: TextStyleConfig;
|
|
108
|
+
/**
|
|
109
|
+
* 日期文本样式
|
|
110
|
+
*/
|
|
111
|
+
dateStyle?: TextStyleConfig;
|
|
112
|
+
/**
|
|
113
|
+
* 星期文本样式
|
|
114
|
+
*/
|
|
115
|
+
weekdayStyle?: TextStyleConfig;
|
|
116
|
+
/**
|
|
117
|
+
* 持续时长文本样式
|
|
118
|
+
*/
|
|
119
|
+
durationStyle?: TextStyleConfig;
|
|
120
|
+
/**
|
|
121
|
+
* dayjs locale(语言代码)
|
|
122
|
+
* @default 优先使用全局配置,其次浏览器语言
|
|
123
|
+
*/
|
|
124
|
+
locale?: string;
|
|
125
|
+
/**
|
|
126
|
+
* 自定义类名
|
|
127
|
+
*/
|
|
128
|
+
className?: string;
|
|
129
|
+
/**
|
|
130
|
+
* 自定义样式
|
|
131
|
+
*/
|
|
132
|
+
style?: CSSProperties;
|
|
133
|
+
/**
|
|
134
|
+
* 点击回调
|
|
135
|
+
*/
|
|
136
|
+
onClick?: () => void;
|
|
137
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 将毫秒数格式化为持续时间字符串(d h m s 或 天/时/分/秒)
|
|
3
|
+
*
|
|
4
|
+
* @param ms 持续时间(毫秒)
|
|
5
|
+
* @param showSeconds 是否显示秒,默认 false
|
|
6
|
+
* @param locale 语言代码,zh 时使用「天/时/分/秒」,否则使用 d/h/m/s
|
|
7
|
+
* @returns 如 "2h30m"、"1d2h30m23s" 或 "2时30分"、"1天2时30分23秒"
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* formatDuration(9000000, false) // => "2h30m"
|
|
11
|
+
* formatDuration(9000000, false, 'zh-cn') // => "2时30分"
|
|
12
|
+
* formatDuration(86400000, false) // => "1d"
|
|
13
|
+
*/
|
|
14
|
+
export declare function formatDuration(ms: number, showSeconds?: boolean, locale?: string): string;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* 判断 locale 是否为中文(用于持续时长单位 i18n)
|
|
3
|
+
*/
|
|
4
|
+
function isChineseLocale(locale) {
|
|
5
|
+
if (!locale) return false;
|
|
6
|
+
var n = locale.toLowerCase();
|
|
7
|
+
return n.startsWith('zh');
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* 将毫秒数格式化为持续时间字符串(d h m s 或 天/时/分/秒)
|
|
12
|
+
*
|
|
13
|
+
* @param ms 持续时间(毫秒)
|
|
14
|
+
* @param showSeconds 是否显示秒,默认 false
|
|
15
|
+
* @param locale 语言代码,zh 时使用「天/时/分/秒」,否则使用 d/h/m/s
|
|
16
|
+
* @returns 如 "2h30m"、"1d2h30m23s" 或 "2时30分"、"1天2时30分23秒"
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* formatDuration(9000000, false) // => "2h30m"
|
|
20
|
+
* formatDuration(9000000, false, 'zh-cn') // => "2时30分"
|
|
21
|
+
* formatDuration(86400000, false) // => "1d"
|
|
22
|
+
*/
|
|
23
|
+
export function formatDuration(ms) {
|
|
24
|
+
var showSeconds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
25
|
+
var locale = arguments.length > 2 ? arguments[2] : undefined;
|
|
26
|
+
if (!Number.isFinite(ms) || ms < 0) {
|
|
27
|
+
return isChineseLocale(locale) ? '0分钟' : '0m';
|
|
28
|
+
}
|
|
29
|
+
var d = Math.floor(ms / 86400000);
|
|
30
|
+
var h = Math.floor(ms % 86400000 / 3600000);
|
|
31
|
+
var m = Math.floor(ms % 3600000 / 60000);
|
|
32
|
+
var s = Math.floor(ms % 60000 / 1000);
|
|
33
|
+
var useZh = isChineseLocale(locale);
|
|
34
|
+
var units = useZh ? {
|
|
35
|
+
d: '天',
|
|
36
|
+
h: '时',
|
|
37
|
+
m: '分钟',
|
|
38
|
+
s: '秒'
|
|
39
|
+
} : {
|
|
40
|
+
d: 'd',
|
|
41
|
+
h: 'h',
|
|
42
|
+
m: 'm',
|
|
43
|
+
s: 's'
|
|
44
|
+
};
|
|
45
|
+
var parts = [];
|
|
46
|
+
if (d > 0) parts.push("".concat(d).concat(units.d));
|
|
47
|
+
if (h > 0) parts.push("".concat(h).concat(units.h));
|
|
48
|
+
if (m > 0) parts.push("".concat(m).concat(units.m));
|
|
49
|
+
if (showSeconds || parts.length === 0 && s >= 0) {
|
|
50
|
+
parts.push("".concat(s).concat(units.s));
|
|
51
|
+
}
|
|
52
|
+
return parts.length > 0 ? parts.join('') : useZh ? '0分钟' : '0m';
|
|
53
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { parseTimeRange } from './parseTimeRange';
|
|
2
|
+
export type { ParseTimeRangeResult } from './parseTimeRange';
|
|
3
|
+
export { formatDuration } from './formatDuration';
|
|
4
|
+
export { formatTime, formatDate, formatWeekday, getDayjsLocale, getRelativeDay, getRelativeDayLabel, getDatePartDisplay, } from '../../pisellDateTimeDisplay/utils';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { parseTimeRange } from "./parseTimeRange";
|
|
2
|
+
export { formatDuration } from "./formatDuration";
|
|
3
|
+
|
|
4
|
+
// 复用 pisellDateTimeDisplay 的格式化、相对日与 locale 工具
|
|
5
|
+
export { formatTime, formatDate, formatWeekday, getDayjsLocale, getRelativeDay, getRelativeDayLabel, getDatePartDisplay } from "../../pisellDateTimeDisplay/utils";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { type Dayjs } from 'dayjs';
|
|
2
|
+
import type { DayjsLike } from '../types';
|
|
3
|
+
export interface ParseTimeRangeResult {
|
|
4
|
+
/** 开始时间(已应用 locale) */
|
|
5
|
+
start: Dayjs;
|
|
6
|
+
/** 结束时间(已应用 locale) */
|
|
7
|
+
end: Dayjs;
|
|
8
|
+
/** 是否同一天(按本地时区自然日判定) */
|
|
9
|
+
isSameDay: boolean;
|
|
10
|
+
}
|
|
11
|
+
/**
|
|
12
|
+
* 解析 startAt / endAt 为 Dayjs,并判定是否同一天
|
|
13
|
+
*
|
|
14
|
+
* @param startAt 开始时间(dayjs 兼容值)
|
|
15
|
+
* @param endAt 结束时间(dayjs 兼容值)
|
|
16
|
+
* @param locale dayjs locale,可选
|
|
17
|
+
* @returns { start, end, isSameDay }
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* parseTimeRange('2026-02-04 09:00', '2026-02-04 18:00', 'zh-cn')
|
|
21
|
+
* // => { start: Dayjs, end: Dayjs, isSameDay: true }
|
|
22
|
+
*/
|
|
23
|
+
export declare function parseTimeRange(startAt: DayjsLike, endAt: DayjsLike, locale?: string): ParseTimeRangeResult;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import dayjs from 'dayjs';
|
|
2
|
+
/**
|
|
3
|
+
* 解析 startAt / endAt 为 Dayjs,并判定是否同一天
|
|
4
|
+
*
|
|
5
|
+
* @param startAt 开始时间(dayjs 兼容值)
|
|
6
|
+
* @param endAt 结束时间(dayjs 兼容值)
|
|
7
|
+
* @param locale dayjs locale,可选
|
|
8
|
+
* @returns { start, end, isSameDay }
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* parseTimeRange('2026-02-04 09:00', '2026-02-04 18:00', 'zh-cn')
|
|
12
|
+
* // => { start: Dayjs, end: Dayjs, isSameDay: true }
|
|
13
|
+
*/
|
|
14
|
+
export function parseTimeRange(startAt, endAt, locale) {
|
|
15
|
+
var start = dayjs(startAt);
|
|
16
|
+
var end = dayjs(endAt);
|
|
17
|
+
if (locale) {
|
|
18
|
+
start = start.locale(locale);
|
|
19
|
+
end = end.locale(locale);
|
|
20
|
+
}
|
|
21
|
+
var isSameDay = start.isSame(end, 'day');
|
|
22
|
+
return {
|
|
23
|
+
start: start,
|
|
24
|
+
end: end,
|
|
25
|
+
isSameDay: isSameDay
|
|
26
|
+
};
|
|
27
|
+
}
|
package/es/index.d.ts
CHANGED
|
@@ -61,6 +61,8 @@ export type { PisellStatisticProps as CardMetricItemProps } from './components/c
|
|
|
61
61
|
export { default as CardPro } from './components/cardPro';
|
|
62
62
|
export { default as Cascader } from './components/cascader';
|
|
63
63
|
export { default as Checkbox } from './components/checkbox';
|
|
64
|
+
export { PisellTimeRangeDisplay } from './components/pisellTimeRangeDisplay';
|
|
65
|
+
export type { PisellTimeRangeDisplayProps } from './components/pisellTimeRangeDisplay';
|
|
64
66
|
export { default as ClassicLayout } from './components/classicLayout';
|
|
65
67
|
export { default as Collapse } from './components/collapse';
|
|
66
68
|
export { default as Component } from './components/component';
|
package/es/index.js
CHANGED
|
@@ -62,6 +62,13 @@ export { default as CardMetricItem } from "./components/cardMetricItem";
|
|
|
62
62
|
export { default as CardPro } from "./components/cardPro";
|
|
63
63
|
export { default as Cascader } from "./components/cascader";
|
|
64
64
|
export { default as Checkbox } from "./components/checkbox";
|
|
65
|
+
|
|
66
|
+
// ==================== 数据展示组件 (Data Display) ====================
|
|
67
|
+
// 用于展示各类数据指标、统计信息
|
|
68
|
+
// 类型已在 PisellMetrics 命名空间中导出
|
|
69
|
+
export { PisellTimeRangeDisplay } from "./components/pisellTimeRangeDisplay";
|
|
70
|
+
// ==================== 布局组件 (Layout) ====================
|
|
71
|
+
// 页面布局和容器组件
|
|
65
72
|
export { default as ClassicLayout } from "./components/classicLayout";
|
|
66
73
|
export { default as Collapse } from "./components/collapse";
|
|
67
74
|
// ==================== 其他组件 ====================
|
package/es/utils/index.d.ts
CHANGED
package/es/utils/platform.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const isMobile: () =>
|
|
1
|
+
export declare const isMobile: () => any;
|