@canlooks/can-ui 0.0.88 → 0.0.90

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.
Files changed (92) hide show
  1. package/dist/cjs/components/calendar/calendar.d.ts +5 -2
  2. package/dist/cjs/components/calendar/calendar.js +3 -1
  3. package/dist/cjs/components/calendar/calendar.style.js +124 -124
  4. package/dist/cjs/components/calendar/panelDates.d.ts +1 -1
  5. package/dist/cjs/components/calendar/panelDates.js +5 -2
  6. package/dist/cjs/components/clickAway/clickAway.d.ts +1 -1
  7. package/dist/cjs/components/curd/curd.js +14 -14
  8. package/dist/cjs/components/curd/curd.style.js +1 -1
  9. package/dist/cjs/components/dataGrid/dataGrid.style.js +1 -0
  10. package/dist/cjs/components/dateTimePicker/dateTimePicker.js +2 -2
  11. package/dist/cjs/components/dateTimePicker/timer.d.ts +1 -1
  12. package/dist/cjs/components/dateTimePicker/timer.js +16 -8
  13. package/dist/cjs/components/popper/popperContext.d.ts +1 -1
  14. package/dist/cjs/components/popper/popperContext.js +11 -9
  15. package/dist/cjs/components/status/status.d.ts +6 -6
  16. package/dist/cjs/extensions/reactiveForm/reactiveFormItem.js +1 -0
  17. package/dist/esm/components/calendar/calendar.d.ts +5 -2
  18. package/dist/esm/components/calendar/calendar.js +3 -1
  19. package/dist/esm/components/calendar/calendar.style.js +124 -124
  20. package/dist/esm/components/calendar/panelDates.d.ts +1 -1
  21. package/dist/esm/components/calendar/panelDates.js +5 -2
  22. package/dist/esm/components/clickAway/clickAway.d.ts +1 -1
  23. package/dist/esm/components/curd/curd.js +14 -14
  24. package/dist/esm/components/curd/curd.style.js +1 -1
  25. package/dist/esm/components/dataGrid/dataGrid.style.js +1 -0
  26. package/dist/esm/components/dateTimePicker/dateTimePicker.js +2 -2
  27. package/dist/esm/components/dateTimePicker/timer.d.ts +1 -1
  28. package/dist/esm/components/dateTimePicker/timer.js +15 -8
  29. package/dist/esm/components/popper/popperContext.d.ts +1 -1
  30. package/dist/esm/components/popper/popperContext.js +12 -10
  31. package/dist/esm/components/status/status.d.ts +6 -6
  32. package/dist/esm/extensions/reactiveForm/reactiveFormItem.js +1 -0
  33. package/extensions/curd.cjs +5 -5
  34. package/extensions/documentViewer.cjs +5 -5
  35. package/extensions/textFormatter.cjs +5 -5
  36. package/package.json +1 -1
  37. package/documentation/dist/assets/index-DvrKS6Tv.js +0 -7747
  38. package/documentation/dist/atom-one-dark.min.css +0 -1
  39. package/documentation/dist/components/accordion.md +0 -38
  40. package/documentation/dist/components/actionSheet.md +0 -49
  41. package/documentation/dist/components/alert.md +0 -38
  42. package/documentation/dist/components/anchorList.md +0 -36
  43. package/documentation/dist/components/autocomplete.md +0 -68
  44. package/documentation/dist/components/avatar.md +0 -79
  45. package/documentation/dist/components/badge.md +0 -33
  46. package/documentation/dist/components/bottomNavigation.md +0 -39
  47. package/documentation/dist/components/breadcrumb.md +0 -28
  48. package/documentation/dist/components/bubbleConfirm.md +0 -34
  49. package/documentation/dist/components/button.md +0 -62
  50. package/documentation/dist/components/card.md +0 -30
  51. package/documentation/dist/components/cascade.md +0 -48
  52. package/documentation/dist/components/checkbox.md +0 -36
  53. package/documentation/dist/components/colorPicker.md +0 -27
  54. package/documentation/dist/components/contextMenu.md +0 -27
  55. package/documentation/dist/components/counter.md +0 -29
  56. package/documentation/dist/components/dataGrid.md +0 -112
  57. package/documentation/dist/components/dateTimePicker.md +0 -35
  58. package/documentation/dist/components/dateTimeRangePicker.md +0 -36
  59. package/documentation/dist/components/descriptions.md +0 -35
  60. package/documentation/dist/components/dialog.md +0 -56
  61. package/documentation/dist/components/divider.md +0 -26
  62. package/documentation/dist/components/drawer.md +0 -40
  63. package/documentation/dist/components/flex.md +0 -20
  64. package/documentation/dist/components/form.md +0 -131
  65. package/documentation/dist/components/formDialog.md +0 -36
  66. package/documentation/dist/components/grid.md +0 -34
  67. package/documentation/dist/components/highlight.md +0 -26
  68. package/documentation/dist/components/image.md +0 -90
  69. package/documentation/dist/components/input.md +0 -39
  70. package/documentation/dist/components/loading.md +0 -46
  71. package/documentation/dist/components/menu.md +0 -85
  72. package/documentation/dist/components/pagination.md +0 -38
  73. package/documentation/dist/components/pickerDialog.md +0 -56
  74. package/documentation/dist/components/placeholder.md +0 -30
  75. package/documentation/dist/components/progress.md +0 -43
  76. package/documentation/dist/components/radio.md +0 -37
  77. package/documentation/dist/components/rating.md +0 -35
  78. package/documentation/dist/components/resizable.md +0 -41
  79. package/documentation/dist/components/scrollbar.md +0 -31
  80. package/documentation/dist/components/segmented.md +0 -57
  81. package/documentation/dist/components/select.md +0 -30
  82. package/documentation/dist/components/skeleton.md +0 -26
  83. package/documentation/dist/components/slidableActions.md +0 -53
  84. package/documentation/dist/guide/appComponent.md +0 -30
  85. package/documentation/dist/guide/globalMethods.md +0 -238
  86. package/documentation/dist/guide/icon.md +0 -57
  87. package/documentation/dist/guide/introduction.md +0 -2
  88. package/documentation/dist/guide/overrideProps.md +0 -0
  89. package/documentation/dist/guide/startup.md +0 -23
  90. package/documentation/dist/guide/theme.md +0 -249
  91. package/documentation/dist/index.html +0 -13
  92. package/documentation/dist/logo.png +0 -0
@@ -13,128 +13,128 @@ export const classes = defineInnerClasses('calendar', [
13
13
  'yearItem',
14
14
  'foot'
15
15
  ]);
16
- export const style = defineCss(({ divider, text, spacing }) => css `
17
- .${classes.head} {
18
- height: 40px;
19
- display: flex;
20
- align-items: center;
21
- justify-content: space-between;
22
- border-bottom: 1px solid ${divider};
23
- padding: 0 ${menuListPadding}px;
24
- position: relative;
25
-
26
- .${classes.headSide} {
27
- z-index: 1;
28
- }
29
-
30
- .${classes.headControl} {
31
- color: ${text.placeholder};
32
- }
33
-
34
- .${classes.headCenter} {
35
- display: flex;
36
- align-items: center;
37
- justify-content: center;
38
- position: absolute;
39
- inset: 0;
40
-
41
- .${classes.headButton} {
42
- font-weight: bold;
43
- color: ${text.primary};
44
- }
45
- }
46
- }
47
-
48
- .${classes.body} {
49
- padding: ${spacing[3]}px ${spacing[4]}px;
50
- display: grid;
51
- place-items: center;
52
-
53
- &[data-view-type=date] {
54
- font-size: ${13 / 14}em;
55
- grid-template-columns: repeat(7, 36px);
56
- grid-template-rows: repeat(7, 36px);
57
-
58
- .${classes.dateItem} {
59
- width: 24px;
60
- height: 24px;
61
-
62
- &:not([data-variant=filled]) {
63
- color: ${text.primary};
64
- border-color: ${text.disabled};
65
-
66
- &[data-other-month=true] {
67
- color: ${text.placeholder};
68
- }
69
- }
70
-
71
- &:disabled {
72
- width: 100%;
73
- border-radius: 0;
74
- }
75
- }
76
- }
77
-
78
- &[data-view-type=month], &[data-view-type=year] {
79
- grid-template-columns: repeat(3, 84px);
80
- grid-template-rows: repeat(4, 63px);
81
-
82
- .${classes.monthItem},
83
- .${classes.yearItem} {
84
- width: 72px;
85
- padding-inline: 0;
86
-
87
- &:not([data-variant=filled]) {
88
- color: ${text.primary};
89
- }
90
- }
91
- }
92
- }
93
-
94
- &[data-size=small] {
95
- .${classes.body} {
96
- &[data-view-type=date] {
97
- grid-template-columns: repeat(7, 30px);
98
- grid-template-rows: repeat(7, 30px);
99
- }
100
-
101
- &[data-view-type=month], &[data-view-type=year] {
102
- grid-template-columns: repeat(3, 70px);
103
- grid-template-rows: repeat(4, 52.5px);
104
-
105
- .${classes.monthItem},
106
- .${classes.yearItem} {
107
- width: 60px;
108
- }
109
- }
110
- }
111
- }
112
-
113
- &[data-size=large] {
114
- .${classes.body} {
115
- &[data-view-type=date] {
116
- font-size: 1em;
117
- grid-template-columns: repeat(7, 42px);
118
- grid-template-rows: repeat(7, 42px);
119
-
120
- .${classes.dateItem} {
121
- width: 32px;
122
- height: 32px;
123
- }
124
- }
125
-
126
- &[data-view-type=month], &[data-view-type=year] {
127
- grid-template-columns: repeat(3, 98px);
128
- grid-template-rows: repeat(4, 73.5px);
129
- }
130
- }
131
- }
132
-
133
- .${classes.foot} {
134
- height: 41px;
135
- display: flex;
136
- align-items: center;
137
- justify-content: center;
138
- border-top: 1px solid ${divider};
139
- }
16
+ export const style = defineCss(({ divider, text, spacing }) => css `
17
+ .${classes.head} {
18
+ height: 40px;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: space-between;
22
+ border-bottom: 1px solid ${divider};
23
+ padding: 0 ${menuListPadding}px;
24
+ position: relative;
25
+
26
+ .${classes.headSide} {
27
+ z-index: 1;
28
+ }
29
+
30
+ .${classes.headControl} {
31
+ color: ${text.placeholder};
32
+ }
33
+
34
+ .${classes.headCenter} {
35
+ display: flex;
36
+ align-items: center;
37
+ justify-content: center;
38
+ position: absolute;
39
+ inset: 0;
40
+
41
+ .${classes.headButton} {
42
+ font-weight: bold;
43
+ color: ${text.primary};
44
+ }
45
+ }
46
+ }
47
+
48
+ .${classes.body} {
49
+ padding: ${spacing[3]}px ${spacing[4]}px;
50
+ display: grid;
51
+ place-items: center;
52
+
53
+ &[data-view-type=date] {
54
+ font-size: ${13 / 14}em;
55
+ grid-template-columns: repeat(7, 36px);
56
+ grid-template-rows: repeat(7, 36px);
57
+
58
+ .${classes.dateItem} {
59
+ width: 24px;
60
+ height: 24px;
61
+
62
+ &:not([data-variant=filled]) {
63
+ color: ${text.primary};
64
+ border-color: ${text.disabled};
65
+
66
+ &[data-other-month=true] {
67
+ color: ${text.placeholder};
68
+ }
69
+ }
70
+
71
+ &:disabled {
72
+ width: 100%;
73
+ border-radius: 0;
74
+ }
75
+ }
76
+ }
77
+
78
+ &[data-view-type=month], &[data-view-type=year] {
79
+ grid-template-columns: repeat(3, 84px);
80
+ grid-template-rows: repeat(4, 63px);
81
+
82
+ .${classes.monthItem},
83
+ .${classes.yearItem} {
84
+ width: 72px;
85
+ padding-inline: 0;
86
+
87
+ &:not([data-variant=filled]) {
88
+ color: ${text.primary};
89
+ }
90
+ }
91
+ }
92
+ }
93
+
94
+ &[data-size=small] {
95
+ .${classes.body} {
96
+ &[data-view-type=date] {
97
+ grid-template-columns: repeat(7, 30px);
98
+ grid-template-rows: repeat(7, 30px);
99
+ }
100
+
101
+ &[data-view-type=month], &[data-view-type=year] {
102
+ grid-template-columns: repeat(3, 70px);
103
+ grid-template-rows: repeat(4, 52.5px);
104
+
105
+ .${classes.monthItem},
106
+ .${classes.yearItem} {
107
+ width: 60px;
108
+ }
109
+ }
110
+ }
111
+ }
112
+
113
+ &[data-size=large] {
114
+ .${classes.body} {
115
+ &[data-view-type=date] {
116
+ font-size: 1em;
117
+ grid-template-columns: repeat(7, 42px);
118
+ grid-template-rows: repeat(7, 42px);
119
+
120
+ .${classes.dateItem} {
121
+ width: 32px;
122
+ height: 32px;
123
+ }
124
+ }
125
+
126
+ &[data-view-type=month], &[data-view-type=year] {
127
+ grid-template-columns: repeat(3, 98px);
128
+ grid-template-rows: repeat(4, 73.5px);
129
+ }
130
+ }
131
+ }
132
+
133
+ .${classes.foot} {
134
+ height: 41px;
135
+ display: flex;
136
+ align-items: center;
137
+ justify-content: center;
138
+ border-top: 1px solid ${divider};
139
+ }
140
140
  `);
@@ -1,2 +1,2 @@
1
1
  import { PanelProps } from './calendar';
2
- export declare const PanelDates: import("react").MemoExoticComponent<({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, _defaultNull }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
2
+ export declare const PanelDates: import("react").MemoExoticComponent<({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, todayButtonText, todayButtonProps, _defaultNull }: PanelProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
@@ -22,7 +22,7 @@ const commonButtonProps = {
22
22
  size: 'small',
23
23
  color: 'text'
24
24
  };
25
- export const PanelDates = memo(({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, _defaultNull }) => {
25
+ export const PanelDates = memo(({ value, setValue, innerD, setInnerD, setViewType, min, max, disabledDates, showToday, todayButtonText = '回今天', todayButtonProps, _defaultNull }) => {
26
26
  const today = dayjs();
27
27
  const prevMonth = () => {
28
28
  setInnerD(d => d.subtract(1, 'month'));
@@ -66,5 +66,8 @@ export const PanelDates = memo(({ value, setValue, innerD, setInnerD, setViewTyp
66
66
  return ret;
67
67
  };
68
68
  return (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.head, children: [_jsxs("div", { className: classes.headSide, children: [renderHeadControl(_jsx(Icon, { icon: faAnglesLeft }), '上一年', prevYear), renderHeadControl(_jsx(Icon, { icon: faAngleLeft }), '上一月', prevMonth)] }), _jsxs("div", { className: classes.headSide, children: [renderHeadControl(_jsx(Icon, { icon: faAngleRight }), '下一月', nextMonth), renderHeadControl(_jsx(Icon, { icon: faAnglesRight }), '下一年', nextYear)] }), _jsxs("div", { className: classes.headCenter, children: [_jsxs(Button, { ...commonButtonProps, className: classes.headButton, onClick: () => setViewType('year'), children: [innerD.year(), "\u5E74"] }), _jsxs(Button, { ...commonButtonProps, className: classes.headButton, onClick: () => setViewType('month'), children: [(innerD.month() + 1).toString().padStart(2, '0'), "\u6708"] })] })] }), _jsxs("div", { className: classes.body, "data-view-type": "date", children: [renderedDaysList, renderDates()] }), showToday &&
69
- _jsx("div", { className: classes.foot, children: _jsx(Button, { variant: "text", onClick: () => setValue(dayjs()), children: "\u56DE\u4ECA\u5929" }) })] }));
69
+ _jsx("div", { className: classes.foot, children: _jsx(Button, { variant: "text", ...todayButtonProps, onClick: e => {
70
+ todayButtonProps?.onClick?.(e);
71
+ setValue(dayjs());
72
+ }, children: todayButtonText }) })] }));
70
73
  });
@@ -60,7 +60,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
60
60
  results: number;
61
61
  security: string;
62
62
  unselectable: "off" | "on";
63
- popover: "" | "auto" | "manual";
63
+ popover: "" | "auto" | "manual" | "hint";
64
64
  popoverTargetAction: "toggle" | "hide" | "show";
65
65
  popoverTarget: string;
66
66
  inert: boolean;
@@ -120,7 +120,7 @@ export const Curd = memo((props) => {
120
120
  const res = await loadRows(props.paginatable !== false
121
121
  ? {
122
122
  page: innerPage.current,
123
- pageSize: innerPageSize.current,
123
+ pageSize: innerPageSize.current
124
124
  }
125
125
  : void 0, innerFilterRef.current.getFormValue(), innerOrderColumn.current
126
126
  ? {
@@ -184,24 +184,24 @@ export const Curd = memo((props) => {
184
184
  innerLoadRows().then();
185
185
  message.success(deleteName + '成功').then();
186
186
  };
187
- return (_jsxs("div", { ...wrapperProps, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: [_jsxs(Form, { ...mergeComponentProps({
187
+ return (_jsxs("div", { ...wrapperProps, css: style, className: clsx(classes.root, wrapperProps?.className), "data-variant": variant, children: [_jsx(Form, { ...mergeComponentProps({
188
188
  variant: 'plain',
189
189
  initialValue: initialFilterValue
190
190
  }, filterProps, {
191
191
  ref: innerFilterRef,
192
192
  onFinish: filterHandler
193
- }), children: [renderFilterableFn(), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
194
- _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
195
- _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
196
- _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
197
- _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
198
- _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
199
- _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
200
- ...props.tableProps,
201
- ...resizable && { size: innerSize.current }
202
- }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
203
- ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
204
- : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) })] }), (creatable || updatable) &&
193
+ }), children: renderFilterableFn() }), (creatable || toolbarLeft || toolbarRight || reloadable || resizable || columnConfigurable) &&
194
+ _jsxs("div", { className: classes.toolbar, children: [_jsxs("div", { className: classes.toolbarLeft, children: [creatable &&
195
+ _jsxs(Button, { prefix: _jsx(Icon, { icon: faPlus }), ...createButtonProps, onClick: createHandler, children: [createName, dataName] }), toolbarLeft] }), _jsxs("div", { className: classes.toolbarRight, children: [!!toolbarRight &&
196
+ _jsxs(_Fragment, { children: [toolbarRight, _jsx(Divider, { className: classes.divider, orientation: "vertical" })] }), reloadable &&
197
+ _jsx(Tooltip, { title: "\u5237\u65B0", children: _jsx(Button, { shape: "circular", variant: "text", color: "text.secondary", prefix: _jsx(Icon, { icon: faRotateRight }), loading: innerLoading.current, onClick: reloadHandler }) }), resizable &&
198
+ _jsx(CurdResizable, { innerSize: innerSize.current, setInnerSize: setInnerSize }), columnConfigurable &&
199
+ _jsx(CurdColumnConfig, { columns: orderedColumns, innerVisible: innerVisible.current, setInnerVisible: setInnerVisible, setInnerOrder: setInnerOrder })] })] }), _jsx("div", { className: classes.card, children: _jsx(DataGrid, { ...dataGridProps, columns: actualColumns, tableProps: {
200
+ ...props.tableProps,
201
+ ...resizable && { size: innerSize.current }
202
+ }, loading: innerLoading.current, rows: innerRows.current, paginatable: !loadRows && props.paginatable, renderPagination: loadRows && props.paginatable !== false
203
+ ? () => _jsx(Pagination, { ...props.paginationProps, total: innerTotal.current, page: innerPage.current, onPageChange: setInnerPage, pageSize: innerPageSize.current, onPageSizeChange: setInnerPageSize })
204
+ : props.renderPagination, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler }) }), (creatable || updatable) &&
205
205
  _jsx(CurdDialog, { ...dialogProps, ref: curdDialogRef, onFinish: finishHandler, curdProps: props })] }));
206
206
  });
207
207
  Curd.Filter = CurdFilterable;
@@ -85,7 +85,7 @@ export const style = defineCss(({ spacing, text, background, borderRadius }) =>
85
85
  min-height: 0;
86
86
  border-radius: ${borderRadius}px;
87
87
 
88
- .${loadingClasses.container} {
88
+ .${loadingClasses.root} {
89
89
  height: 100%;
90
90
  }
91
91
  }
@@ -136,6 +136,7 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
136
136
  }
137
137
 
138
138
  .${classes.empty} {
139
+ height: auto;
139
140
  position: sticky;
140
141
  left: 0;
141
142
  }
@@ -44,8 +44,8 @@ export const DateTimePicker = memo(({ inputProps, popperProps, min, max, disable
44
44
  content: (_jsxs(_Fragment, { children: [showCalendar &&
45
45
  _jsx(Calendar, { viewLevel: format.includes('D') ? 'date'
46
46
  : format.includes('M') ? 'month'
47
- : 'year', _defaultNull: !dateValue.current, value: innerValue, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
48
- _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: innerValue, onChange: setDateValue }) })] }))
47
+ : 'year', _defaultNull: !dateValue.current, value: innerValue, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates, todayButtonText: showTimer ? '现在' : void 0 }), showTimer &&
48
+ _jsx(DateTimePickerContext, { value: contextValue, children: _jsx(Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: dateValue.current, onChange: setDateValue }) })] }))
49
49
  }, popperProps, {
50
50
  onOpenChange: setInnerOpen,
51
51
  onPointerDown: e => e.preventDefault()
@@ -3,6 +3,6 @@ export declare const Timer: import("react").MemoExoticComponent<({ showHours, sh
3
3
  showHours: boolean;
4
4
  showMinutes: boolean;
5
5
  showSeconds: boolean;
6
- value: Dayjs;
6
+ value: Dayjs | null;
7
7
  onChange(value: Dayjs): void;
8
8
  }) => import("@emotion/react/jsx-runtime").JSX.Element>;
@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
2
2
  import { memo, useRef } from 'react';
3
3
  import { classes, style } from './timer.style';
4
4
  import { MenuItem } from '../menuItem';
5
+ import dayjs from 'dayjs';
5
6
  import { useDateTimePickerContext } from './dateTimePicker';
6
7
  import { useScrollToTarget } from '../popper';
7
8
  export const Timer = memo(({ showHours, showMinutes, showSeconds, value, onChange }) => {
@@ -9,10 +10,14 @@ export const Timer = memo(({ showHours, showMinutes, showSeconds, value, onChang
9
10
  });
10
11
  function TimerItem({ type, value, onChange }) {
11
12
  const { min, max, disabledHours, disabledMinutes, disabledSeconds } = useDateTimePickerContext();
12
- const currentNum = type === 'hour' ? value.hour()
13
- : type === 'minute' ? value.minute()
14
- : value.second();
13
+ const currentNum = !value ? -1
14
+ : type === 'hour' ? value.hour()
15
+ : type === 'minute' ? value.minute()
16
+ : value.second();
15
17
  const isDisabled = (num) => {
18
+ if (!value) {
19
+ return false;
20
+ }
16
21
  if (type === 'hour') {
17
22
  if (disabledHours && !disabledHours(value, num)) {
18
23
  return true;
@@ -31,17 +36,19 @@ function TimerItem({ type, value, onChange }) {
31
36
  if (min && min.isSame(value, 'date') && min.get(type) > num) {
32
37
  return true;
33
38
  }
34
- if (max && max.isSame(value, 'date') && max.get(type) < num) {
35
- return true;
36
- }
37
- return false;
39
+ return !!(max && max.isSame(value, 'date') && max.get(type) < num);
38
40
  };
39
41
  const scrollerRef = useRef(null);
40
42
  const selectedItemRef = useScrollToTarget(scrollerRef);
41
43
  const renderItems = (count) => {
42
44
  const ret = [];
43
45
  for (let i = 0; i < count; i++) {
44
- ret.push(_jsx(MenuItem, { ref: i === currentNum ? selectedItemRef : void 0, className: classes.timerItem, label: i.toString().padStart(2, '0'), selected: i === currentNum, onClick: () => i !== currentNum && onChange(value.set(type, i)), disabled: isDisabled(i) }, i));
46
+ ret.push(_jsx(MenuItem, { ref: i === currentNum ? selectedItemRef : void 0, className: classes.timerItem, label: i.toString().padStart(2, '0'), selected: i === currentNum, onClick: () => {
47
+ if (i !== currentNum) {
48
+ value ||= dayjs();
49
+ onChange(value.set(type, i));
50
+ }
51
+ }, disabled: isDisabled(i) }, i));
45
52
  }
46
53
  return ret;
47
54
  };
@@ -17,4 +17,4 @@ export declare function usePopperContext(): {
17
17
  * 当弹框打开时,滚动至已选项
18
18
  * @returns {RefObject} ref
19
19
  */
20
- export declare function useScrollToTarget<T extends HTMLElement>(scrollerRef: RefObject<Element | null>): RefObject<T | null>;
20
+ export declare function useScrollToTarget<T extends HTMLElement>(scrollerRef: RefObject<HTMLElement | null>): RefObject<T | null>;
@@ -1,4 +1,4 @@
1
- import { createContext, useContext, useRef, useEffect } from 'react';
1
+ import { createContext, useContext, useRef, useEffect, useMemo, useCallback } from 'react';
2
2
  export const PopperContext = createContext({
3
3
  autoClose: false,
4
4
  open: false,
@@ -18,16 +18,18 @@ export function usePopperContext() {
18
18
  export function useScrollToTarget(scrollerRef) {
19
19
  const ref = useRef(null);
20
20
  const { beforeOpenCallbacks } = usePopperContext();
21
- useEffect(() => {
22
- const beforeOpen = () => {
23
- if (ref.current && scrollerRef.current && scrollerRef.current.scrollHeight > scrollerRef.current.clientHeight) {
24
- scrollerRef.current.scrollTop = ref.current.offsetTop + ref.current.clientHeight / 2 - scrollerRef.current.clientHeight / 2;
25
- }
26
- };
21
+ const beforeOpen = useCallback(() => {
22
+ const targetEl = ref.current;
23
+ const scrollerEl = scrollerRef.current;
24
+ if (targetEl && scrollerEl && scrollerEl.scrollHeight > scrollerEl.clientHeight) {
25
+ scrollerEl.scrollTop = targetEl.offsetTop + targetEl.clientHeight / 2 - scrollerEl.clientHeight / 2;
26
+ }
27
+ }, []);
28
+ useMemo(() => {
27
29
  beforeOpenCallbacks.add(beforeOpen);
28
- return () => {
29
- beforeOpenCallbacks.delete(beforeOpen);
30
- };
30
+ }, []);
31
+ useEffect(() => () => {
32
+ beforeOpenCallbacks.delete(beforeOpen);
31
33
  }, []);
32
34
  return ref;
33
35
  }
@@ -3,12 +3,12 @@ import { DivProps, Status as IStatus } from '../../types';
3
3
  import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
4
4
  export type StatusType = IStatus | 'confirm' | 'unknown';
5
5
  export declare const statusMapToIconDefinition: {
6
- info: import("@fortawesome/fontawesome-common-types").IconDefinition;
7
- success: import("@fortawesome/fontawesome-common-types").IconDefinition;
8
- warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
9
- error: import("@fortawesome/fontawesome-common-types").IconDefinition;
10
- confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
11
- unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
6
+ info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
7
+ success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
8
+ warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
9
+ error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
10
+ confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
11
+ unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
12
12
  };
13
13
  export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
14
14
  status?: StatusType;
@@ -20,6 +20,7 @@ function InnerFormItem({ dependencies, checked, value, onChange, ...props }) {
20
20
  checked,
21
21
  value,
22
22
  onChange(e) {
23
+ props.children.props?.onChange?.(e);
23
24
  onChange?.(e);
24
25
  context.onChange?.();
25
26
  }
@@ -1,5 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- // @ts-nocheck
5
- tslib_1.__exportStar(require("../dist/cjs/extensions/curd"), exports);
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ // @ts-nocheck
5
+ tslib_1.__exportStar(require("../dist/cjs/extensions/curd"), exports);
@@ -1,5 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- // @ts-nocheck
5
- tslib_1.__exportStar(require("../dist/cjs/extensions/documentViewer"), exports);
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ // @ts-nocheck
5
+ tslib_1.__exportStar(require("../dist/cjs/extensions/documentViewer"), exports);
@@ -1,5 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- // @ts-nocheck
5
- tslib_1.__exportStar(require("../dist/cjs/extensions/textFormatter"), exports);
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ // @ts-nocheck
5
+ tslib_1.__exportStar(require("../dist/cjs/extensions/textFormatter"), exports);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canlooks/can-ui",
3
- "version": "0.0.88",
3
+ "version": "0.0.90",
4
4
  "author": "C.CanLiang <canlooks@gmail.com>",
5
5
  "description": "My ui framework",
6
6
  "license": "MIT",