@astral/ui 4.78.0 → 4.80.0
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/components/DataGridInfinite/DataGridInfinite.js +11 -3
- package/components/DataGridInfinite/Row/Row.js +1 -1
- package/components/DataGridInfinite/index.d.ts +1 -1
- package/components/DataGridInfinite/public.d.ts +1 -1
- package/components/DataGridInfinite/styles.d.ts +4 -0
- package/components/DataGridInfinite/styles.js +8 -0
- package/components/DataGridInfinite/types.d.ts +20 -0
- package/components/DataGridInfinite/useLogic/useLogic.d.ts +10 -4
- package/components/DataGridInfinite/useLogic/useLogic.js +52 -3
- package/components/ToggleButton/ToggleButton.js +2 -2
- package/components/ToggleButton/useLogic/useLogic.d.ts +1 -0
- package/components/ToggleButton/useLogic/useLogic.js +3 -1
- package/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -23
- package/components/ToggleButtonGroup/ToggleButtonGroup.js +5 -4
- package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.d.ts +1 -0
- package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.js +1 -0
- package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.d.ts +1 -1
- package/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.js +2 -2
- package/components/ToggleButtonGroup/index.d.ts +1 -0
- package/components/ToggleButtonGroup/public.d.ts +1 -0
- package/components/ToggleButtonGroup/styles.d.ts +5 -0
- package/components/ToggleButtonGroup/styles.js +17 -0
- package/components/ToggleButtonGroup/types.d.ts +23 -0
- package/components/ToggleButtonGroup/types.js +1 -0
- package/components/ToggleButtonGroup/useLogic/index.d.ts +1 -0
- package/components/ToggleButtonGroup/useLogic/index.js +1 -0
- package/components/ToggleButtonGroup/useLogic/useLogic.d.ts +300 -0
- package/components/ToggleButtonGroup/useLogic/useLogic.js +16 -0
- package/node/components/DataGridInfinite/DataGridInfinite.js +10 -2
- package/node/components/DataGridInfinite/Row/Row.js +1 -1
- package/node/components/DataGridInfinite/index.d.ts +1 -1
- package/node/components/DataGridInfinite/public.d.ts +1 -1
- package/node/components/DataGridInfinite/styles.d.ts +4 -0
- package/node/components/DataGridInfinite/styles.js +9 -1
- package/node/components/DataGridInfinite/types.d.ts +20 -0
- package/node/components/DataGridInfinite/useLogic/useLogic.d.ts +10 -4
- package/node/components/DataGridInfinite/useLogic/useLogic.js +52 -3
- package/node/components/ToggleButton/ToggleButton.js +2 -2
- package/node/components/ToggleButton/useLogic/useLogic.d.ts +1 -0
- package/node/components/ToggleButton/useLogic/useLogic.js +3 -1
- package/node/components/ToggleButtonGroup/ToggleButtonGroup.d.ts +2 -23
- package/node/components/ToggleButtonGroup/ToggleButtonGroup.js +4 -3
- package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.d.ts +1 -0
- package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContext.js +1 -0
- package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.d.ts +1 -1
- package/node/components/ToggleButtonGroup/ToggleButtonGroupContext/ToggleButtonGroupContextProvider/ToggleButtonGroupContextProvider.js +2 -2
- package/node/components/ToggleButtonGroup/index.d.ts +1 -0
- package/node/components/ToggleButtonGroup/public.d.ts +1 -0
- package/node/components/ToggleButtonGroup/styles.d.ts +5 -0
- package/node/components/ToggleButtonGroup/styles.js +18 -1
- package/node/components/ToggleButtonGroup/types.d.ts +23 -0
- package/node/components/ToggleButtonGroup/types.js +2 -0
- package/node/components/ToggleButtonGroup/useLogic/index.d.ts +1 -0
- package/node/components/ToggleButtonGroup/useLogic/index.js +17 -0
- package/node/components/ToggleButtonGroup/useLogic/useLogic.d.ts +300 -0
- package/node/components/ToggleButtonGroup/useLogic/useLogic.js +20 -0
- package/package.json +1 -1
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
import { type Ref } from 'react';
|
|
2
|
+
import type { ToggleButtonGroupProps } from '../types';
|
|
3
|
+
type UseLogicParams = ToggleButtonGroupProps;
|
|
4
|
+
export declare const useLogic: ({ size, isError, errorText, variant, ...restProps }: UseLogicParams, forwardedRef: Ref<HTMLDivElement>) => {
|
|
5
|
+
size: import("@mui/types").OverridableStringUnion<"large" | "medium" | "small", import("@mui/material").ToggleButtonGroupPropsSizeOverrides>;
|
|
6
|
+
isError: boolean | undefined;
|
|
7
|
+
errorText: import("react").ReactNode;
|
|
8
|
+
variant: "transparent" | "plain";
|
|
9
|
+
restProps: {
|
|
10
|
+
classes?: Partial<import("@mui/material").ToggleButtonGroupClasses> | undefined;
|
|
11
|
+
defaultChecked?: boolean | undefined;
|
|
12
|
+
defaultValue?: string | number | readonly string[] | undefined;
|
|
13
|
+
suppressContentEditableWarning?: boolean | undefined;
|
|
14
|
+
suppressHydrationWarning?: boolean | undefined;
|
|
15
|
+
accessKey?: string | undefined;
|
|
16
|
+
autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
|
|
17
|
+
autoFocus?: boolean | undefined;
|
|
18
|
+
className?: string | undefined;
|
|
19
|
+
contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
|
|
20
|
+
contextMenu?: string | undefined;
|
|
21
|
+
dir?: string | undefined;
|
|
22
|
+
draggable?: (boolean | "true" | "false") | undefined;
|
|
23
|
+
enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "previous" | "send" | undefined;
|
|
24
|
+
hidden?: boolean | undefined;
|
|
25
|
+
id?: string | undefined;
|
|
26
|
+
lang?: string | undefined;
|
|
27
|
+
nonce?: string | undefined;
|
|
28
|
+
slot?: string | undefined;
|
|
29
|
+
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
30
|
+
style?: import("react").CSSProperties | undefined;
|
|
31
|
+
tabIndex?: number | undefined;
|
|
32
|
+
title?: string | undefined;
|
|
33
|
+
translate?: "yes" | "no" | undefined;
|
|
34
|
+
radioGroup?: string | undefined;
|
|
35
|
+
role?: import("react").AriaRole | undefined;
|
|
36
|
+
about?: string | undefined;
|
|
37
|
+
content?: string | undefined;
|
|
38
|
+
datatype?: string | undefined;
|
|
39
|
+
inlist?: any;
|
|
40
|
+
prefix?: string | undefined;
|
|
41
|
+
property?: string | undefined;
|
|
42
|
+
rel?: string | undefined;
|
|
43
|
+
resource?: string | undefined;
|
|
44
|
+
rev?: string | undefined;
|
|
45
|
+
typeof?: string | undefined;
|
|
46
|
+
vocab?: string | undefined;
|
|
47
|
+
autoCorrect?: string | undefined;
|
|
48
|
+
autoSave?: string | undefined;
|
|
49
|
+
color?: import("@mui/types").OverridableStringUnion<"primary" | "secondary" | "success" | "warning" | "error" | "info" | "standard", import("@mui/material").ToggleButtonGroupPropsColorOverrides> | undefined;
|
|
50
|
+
itemProp?: string | undefined;
|
|
51
|
+
itemScope?: boolean | undefined;
|
|
52
|
+
itemType?: string | undefined;
|
|
53
|
+
itemID?: string | undefined;
|
|
54
|
+
itemRef?: string | undefined;
|
|
55
|
+
results?: number | undefined;
|
|
56
|
+
security?: string | undefined;
|
|
57
|
+
unselectable?: "off" | "on" | undefined;
|
|
58
|
+
popover?: "" | "auto" | "manual" | "hint" | undefined;
|
|
59
|
+
popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
|
|
60
|
+
popoverTarget?: string | undefined;
|
|
61
|
+
inert?: boolean | undefined;
|
|
62
|
+
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
|
|
63
|
+
is?: string | undefined;
|
|
64
|
+
exportparts?: string | undefined;
|
|
65
|
+
part?: string | undefined;
|
|
66
|
+
"aria-activedescendant"?: string | undefined;
|
|
67
|
+
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
68
|
+
"aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
|
|
69
|
+
"aria-braillelabel"?: string | undefined;
|
|
70
|
+
"aria-brailleroledescription"?: string | undefined;
|
|
71
|
+
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
72
|
+
"aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
73
|
+
"aria-colcount"?: number | undefined;
|
|
74
|
+
"aria-colindex"?: number | undefined;
|
|
75
|
+
"aria-colindextext"?: string | undefined;
|
|
76
|
+
"aria-colspan"?: number | undefined;
|
|
77
|
+
"aria-controls"?: string | undefined;
|
|
78
|
+
"aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
|
|
79
|
+
"aria-describedby"?: string | undefined;
|
|
80
|
+
"aria-description"?: string | undefined;
|
|
81
|
+
"aria-details"?: string | undefined;
|
|
82
|
+
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
83
|
+
"aria-dropeffect"?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
|
|
84
|
+
"aria-errormessage"?: string | undefined;
|
|
85
|
+
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
86
|
+
"aria-flowto"?: string | undefined;
|
|
87
|
+
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
88
|
+
"aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false" | undefined;
|
|
89
|
+
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
90
|
+
"aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
|
|
91
|
+
"aria-keyshortcuts"?: string | undefined;
|
|
92
|
+
"aria-label"?: string | undefined;
|
|
93
|
+
"aria-labelledby"?: string | undefined;
|
|
94
|
+
"aria-level"?: number | undefined;
|
|
95
|
+
"aria-live"?: "off" | "assertive" | "polite" | undefined;
|
|
96
|
+
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
97
|
+
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
98
|
+
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
99
|
+
"aria-orientation"?: "horizontal" | "vertical" | undefined;
|
|
100
|
+
"aria-owns"?: string | undefined;
|
|
101
|
+
"aria-placeholder"?: string | undefined;
|
|
102
|
+
"aria-posinset"?: number | undefined;
|
|
103
|
+
"aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
|
|
104
|
+
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
105
|
+
"aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
|
|
106
|
+
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
107
|
+
"aria-roledescription"?: string | undefined;
|
|
108
|
+
"aria-rowcount"?: number | undefined;
|
|
109
|
+
"aria-rowindex"?: number | undefined;
|
|
110
|
+
"aria-rowindextext"?: string | undefined;
|
|
111
|
+
"aria-rowspan"?: number | undefined;
|
|
112
|
+
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
113
|
+
"aria-setsize"?: number | undefined;
|
|
114
|
+
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
115
|
+
"aria-valuemax"?: number | undefined;
|
|
116
|
+
"aria-valuemin"?: number | undefined;
|
|
117
|
+
"aria-valuenow"?: number | undefined;
|
|
118
|
+
"aria-valuetext"?: string | undefined;
|
|
119
|
+
children?: import("react").ReactNode;
|
|
120
|
+
dangerouslySetInnerHTML?: {
|
|
121
|
+
__html: string | TrustedHTML;
|
|
122
|
+
} | undefined;
|
|
123
|
+
onCopy?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
124
|
+
onCopyCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
125
|
+
onCut?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
126
|
+
onCutCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
127
|
+
onPaste?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
128
|
+
onPasteCapture?: import("react").ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
129
|
+
onCompositionEnd?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
130
|
+
onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
131
|
+
onCompositionStart?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
132
|
+
onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
133
|
+
onCompositionUpdate?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
134
|
+
onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLDivElement> | undefined;
|
|
135
|
+
onFocus?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
136
|
+
onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
137
|
+
onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
138
|
+
onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
139
|
+
onChange?: ((event: import("react").MouseEvent<HTMLElement, MouseEvent>, value: any) => void) | undefined;
|
|
140
|
+
onChangeCapture?: import("react").ChangeEventHandler<HTMLDivElement, Element> | undefined;
|
|
141
|
+
onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
|
|
142
|
+
onBeforeInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
|
|
143
|
+
onInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
|
|
144
|
+
onInputCapture?: import("react").InputEventHandler<HTMLDivElement> | undefined;
|
|
145
|
+
onReset?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
146
|
+
onResetCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
147
|
+
onSubmit?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
|
|
148
|
+
onSubmitCapture?: import("react").SubmitEventHandler<HTMLDivElement> | undefined;
|
|
149
|
+
onInvalid?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
150
|
+
onInvalidCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
151
|
+
onLoad?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
152
|
+
onLoadCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
153
|
+
onError?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
154
|
+
onErrorCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
155
|
+
onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
156
|
+
onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
157
|
+
onKeyPress?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
158
|
+
onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
159
|
+
onKeyUp?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
160
|
+
onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
161
|
+
onAbort?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
162
|
+
onAbortCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
163
|
+
onCanPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
164
|
+
onCanPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
165
|
+
onCanPlayThrough?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
166
|
+
onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
167
|
+
onDurationChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
168
|
+
onDurationChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
169
|
+
onEmptied?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
170
|
+
onEmptiedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
171
|
+
onEncrypted?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
172
|
+
onEncryptedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
173
|
+
onEnded?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
174
|
+
onEndedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
175
|
+
onLoadedData?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
176
|
+
onLoadedDataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
177
|
+
onLoadedMetadata?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
178
|
+
onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
179
|
+
onLoadStart?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
180
|
+
onLoadStartCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
181
|
+
onPause?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
182
|
+
onPauseCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
183
|
+
onPlay?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
184
|
+
onPlayCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
185
|
+
onPlaying?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
186
|
+
onPlayingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
187
|
+
onProgress?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
188
|
+
onProgressCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
189
|
+
onRateChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
190
|
+
onRateChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
191
|
+
onSeeked?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
192
|
+
onSeekedCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
193
|
+
onSeeking?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
194
|
+
onSeekingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
195
|
+
onStalled?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
196
|
+
onStalledCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
197
|
+
onSuspend?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
198
|
+
onSuspendCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
199
|
+
onTimeUpdate?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
200
|
+
onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
201
|
+
onVolumeChange?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
202
|
+
onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
203
|
+
onWaiting?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
204
|
+
onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
205
|
+
onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
206
|
+
onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
207
|
+
onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
208
|
+
onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
209
|
+
onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
210
|
+
onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
211
|
+
onDoubleClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
212
|
+
onDoubleClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
213
|
+
onDrag?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
214
|
+
onDragCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
215
|
+
onDragEnd?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
216
|
+
onDragEndCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
217
|
+
onDragEnter?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
218
|
+
onDragEnterCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
219
|
+
onDragExit?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
220
|
+
onDragExitCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
221
|
+
onDragLeave?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
222
|
+
onDragLeaveCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
223
|
+
onDragOver?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
224
|
+
onDragOverCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
225
|
+
onDragStart?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
226
|
+
onDragStartCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
227
|
+
onDrop?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
228
|
+
onDropCapture?: import("react").DragEventHandler<HTMLDivElement> | undefined;
|
|
229
|
+
onMouseDown?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
230
|
+
onMouseDownCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
231
|
+
onMouseEnter?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
232
|
+
onMouseLeave?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
233
|
+
onMouseMove?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
234
|
+
onMouseMoveCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
235
|
+
onMouseOut?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
236
|
+
onMouseOutCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
237
|
+
onMouseOver?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
238
|
+
onMouseOverCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
239
|
+
onMouseUp?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
240
|
+
onMouseUpCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
241
|
+
onSelect?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
242
|
+
onSelectCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
243
|
+
onTouchCancel?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
244
|
+
onTouchCancelCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
245
|
+
onTouchEnd?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
246
|
+
onTouchEndCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
247
|
+
onTouchMove?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
248
|
+
onTouchMoveCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
249
|
+
onTouchStart?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
250
|
+
onTouchStartCapture?: import("react").TouchEventHandler<HTMLDivElement> | undefined;
|
|
251
|
+
onPointerDown?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
252
|
+
onPointerDownCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
253
|
+
onPointerMove?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
254
|
+
onPointerMoveCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
255
|
+
onPointerUp?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
256
|
+
onPointerUpCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
257
|
+
onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
258
|
+
onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
259
|
+
onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
260
|
+
onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
261
|
+
onPointerOver?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
262
|
+
onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
263
|
+
onPointerOut?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
264
|
+
onPointerOutCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
265
|
+
onGotPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
266
|
+
onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
267
|
+
onLostPointerCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
268
|
+
onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLDivElement> | undefined;
|
|
269
|
+
onScroll?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
270
|
+
onScrollCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
271
|
+
onScrollEnd?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
272
|
+
onScrollEndCapture?: import("react").UIEventHandler<HTMLDivElement> | undefined;
|
|
273
|
+
onWheel?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
274
|
+
onWheelCapture?: import("react").WheelEventHandler<HTMLDivElement> | undefined;
|
|
275
|
+
onAnimationStart?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
276
|
+
onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
277
|
+
onAnimationEnd?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
278
|
+
onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
279
|
+
onAnimationIteration?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
280
|
+
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
281
|
+
onToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
|
|
282
|
+
onBeforeToggle?: import("react").ToggleEventHandler<HTMLDivElement> | undefined;
|
|
283
|
+
onTransitionCancel?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
284
|
+
onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
285
|
+
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
286
|
+
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
287
|
+
onTransitionRun?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
288
|
+
onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
289
|
+
onTransitionStart?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
290
|
+
onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
291
|
+
ref?: Ref<unknown> | undefined;
|
|
292
|
+
disabled?: boolean | undefined;
|
|
293
|
+
fullWidth?: boolean | undefined;
|
|
294
|
+
value?: any;
|
|
295
|
+
exclusive?: boolean | undefined;
|
|
296
|
+
};
|
|
297
|
+
title: import("react").ReactNode;
|
|
298
|
+
containerRef: import("react").RefObject<HTMLDivElement | null>;
|
|
299
|
+
};
|
|
300
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { useImperativeHandle } from 'react';
|
|
2
|
+
import { useScrollToActiveElement } from '../../useScrollToActiveElement';
|
|
3
|
+
export const useLogic = ({ size = 'medium', isError, errorText, variant = 'transparent', ...restProps }, forwardedRef) => {
|
|
4
|
+
const title = isError && errorText;
|
|
5
|
+
const { containerRef } = useScrollToActiveElement();
|
|
6
|
+
useImperativeHandle(forwardedRef, () => containerRef.current, [forwardedRef]);
|
|
7
|
+
return {
|
|
8
|
+
size,
|
|
9
|
+
isError,
|
|
10
|
+
errorText,
|
|
11
|
+
variant,
|
|
12
|
+
restProps,
|
|
13
|
+
title,
|
|
14
|
+
containerRef,
|
|
15
|
+
};
|
|
16
|
+
};
|
|
@@ -45,7 +45,7 @@ const dataGridInfiniteCva = (0, cva_1.cva)(constants_2.dataGridClassnames.root,
|
|
|
45
45
|
});
|
|
46
46
|
const DataGridInfinite = (props) => {
|
|
47
47
|
const { imagesMap, emptySymbol } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
|
|
48
|
-
const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, hasGroupedColumns, gridViewMode, gridColumns, handleSelectRow, mobileDisplayVariant, isSelfContained, } = (0, useLogic_1.useLogic)(props);
|
|
48
|
+
const { isNoData, isDataGridDisabled, treeRenderConfig, virtuosoProps, headProps, rowProps, scrollToTopButtonProps, isEndReached, isHideHead, containerCssVars, isMobile, mobileSkeletonProps, hasGroupedColumns, gridViewMode, gridColumns, handleSelectRow, mobileDisplayVariant, isSelfContained, isNotRenderHeader, initialTopMostItemIndex, } = (0, useLogic_1.useLogic)(props);
|
|
49
49
|
const { columns, rows = [], selectedRows = [], sorting, isLoading, isDisabled, keyId, emptyCellValue = emptySymbol, variant = enums_1.Variant.Tree, subrows, className, isError, endOfScrollMsg, errorMsg, noDataPlaceholder, onRowClick, onSort, onRetry, headPreAddon, activeRowId, isTabularNums, renderRow, } = props;
|
|
50
50
|
const { moreButtonColumnPosition = 1, isVisibleCollapseButton = true } = subrows || {};
|
|
51
51
|
const { isInitialExpanded = false, expandedLevel = constants_2.EXPANDED_LEVEL_BY_DEFAULT, initialVisibleChildrenCount = constants_2.INITIAL_OPENED_NESTED_CHILDREN_COUNT_BY_DEFAULT, } = treeRenderConfig || {};
|
|
@@ -61,7 +61,9 @@ const DataGridInfinite = (props) => {
|
|
|
61
61
|
errorList: [errorMsg || ''],
|
|
62
62
|
imgSrc: imagesMap.defaultErrorImgSrc,
|
|
63
63
|
onRetry,
|
|
64
|
-
}, children: (0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps,
|
|
64
|
+
}, children: (0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { ...virtuosoProps, ...(initialTopMostItemIndex && {
|
|
65
|
+
initialTopMostItemIndex,
|
|
66
|
+
}), style: { height: '100%' }, overscan: constants_3.OVERSCAN_COUNT, data: rows, components: {
|
|
65
67
|
// biome-ignore lint/suspicious/noTsIgnore: Требует HTMLDivElement, а для элемента списка используем HTMLUListElement (https://github.com/petyosi/react-virtuoso/issues/864)
|
|
66
68
|
// @ts-ignore
|
|
67
69
|
List: List_1.List,
|
|
@@ -73,6 +75,12 @@ const DataGridInfinite = (props) => {
|
|
|
73
75
|
}
|
|
74
76
|
return ((0, jsx_runtime_1.jsxs)(styles_1.FooterRow, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isError && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry }), isEndReached && ((0, jsx_runtime_1.jsx)(EndData_1.EndData, { endOfScrollMsg: endOfScrollMsg }))] }));
|
|
75
77
|
},
|
|
78
|
+
Header: () => {
|
|
79
|
+
if (isNotRenderHeader) {
|
|
80
|
+
return null;
|
|
81
|
+
}
|
|
82
|
+
return ((0, jsx_runtime_1.jsxs)(styles_1.HeaderRow, { children: [isLoading && (0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), isError && (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { onRetry: onRetry })] }));
|
|
83
|
+
},
|
|
76
84
|
} }) }), (0, jsx_runtime_1.jsx)(styles_1.StyledScrollToTopButton, { ...scrollToTopButtonProps, className: constants_3.dataGridInfiniteClassnames.scrollToTopButton }), isDisabled && (0, jsx_runtime_1.jsx)(styles_1.Backdrop, {})] })] }) }) }));
|
|
77
85
|
};
|
|
78
86
|
exports.DataGridInfinite = DataGridInfinite;
|
|
@@ -9,6 +9,6 @@ const useLogic_1 = require("./useLogic");
|
|
|
9
9
|
const INITIAL_LEVEL = 0;
|
|
10
10
|
const Row = ({ children, ...props }) => {
|
|
11
11
|
const { item, memoizedItemProps, onSelectRow, renderRow, flattenColumns, gridColumns, options, keyId, variant, isSelectable, isSelected, nestedChildren, isInitialExpanded, expandedLevel, initialVisibleChildrenCount, moreButtonColumnPosition, isVisibleCollapseButton, emptyCellValue, activeRowId, onRowClick, } = (0, useLogic_1.useLogic)(props);
|
|
12
|
-
return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { row: item, itemProps: memoizedItemProps, onSelectRow: onSelectRow, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? ((0, jsx_runtime_1.jsx)(CustomRowWrapper_1.CustomRowWrapper, { index: memoizedItemProps['data-
|
|
12
|
+
return ((0, jsx_runtime_1.jsx)(RowContext_1.RowContextProvider, { row: item, itemProps: memoizedItemProps, onSelectRow: onSelectRow, isSelectable: isSelectable, isSelected: isSelected, children: renderRow ? ((0, jsx_runtime_1.jsx)(CustomRowWrapper_1.CustomRowWrapper, { index: memoizedItemProps['data-index'], renderRow: renderRow, row: item })) : ((0, jsx_runtime_1.jsx)(Row_1.Row, { ...memoizedItemProps, row: item, columns: flattenColumns, gridColumns: gridColumns, options: options, keyId: keyId, variant: variant, isSelectable: isSelectable, isSelected: isSelected, level: INITIAL_LEVEL, nestedChildren: nestedChildren, isInitialExpanded: isInitialExpanded || false, expandedLevel: expandedLevel || 1, initialVisibleChildrenCount: initialVisibleChildrenCount || 2, activeRowId: activeRowId, moreButtonColumnPosition: moreButtonColumnPosition || 1, isVisibleCollapseButton: isVisibleCollapseButton || true, emptyCellValue: emptyCellValue, onRowClick: onRowClick, onSelectRow: onSelectRow })) }));
|
|
13
13
|
};
|
|
14
14
|
exports.Row = Row;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { DataGridInfinite } from './DataGridInfinite';
|
|
2
|
-
export type { DataGridInfiniteProps } from './types';
|
|
2
|
+
export type { DataGridInfiniteProps, DataGridInfiniteVirtuosoHandle, DataGridInfiniteVirtuosoRef, } from './types';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { DataGridInfinite } from './DataGridInfinite';
|
|
2
|
-
export type { DataGridInfiniteProps } from './types';
|
|
2
|
+
export type { DataGridInfiniteProps, DataGridInfiniteVirtuosoHandle, DataGridInfiniteVirtuosoRef, } from './types';
|
|
@@ -13,6 +13,10 @@ export declare const FooterRow: import("@emotion/styled/dist/declarations/src/ty
|
|
|
13
13
|
theme?: import("@emotion/react").Theme | undefined;
|
|
14
14
|
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
15
15
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
|
|
16
|
+
export declare const HeaderRow: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
|
|
17
|
+
theme?: import("@emotion/react").Theme | undefined;
|
|
18
|
+
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
19
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
|
|
16
20
|
export declare const Backdrop: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
|
|
17
21
|
theme?: import("@emotion/react").Theme | undefined;
|
|
18
22
|
as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.StyledContainer = exports.StyledScrollToTopButton = exports.Backdrop = exports.FooterRow = exports.DisabledDataGridWrapper = exports.DataGridWrapper = void 0;
|
|
3
|
+
exports.StyledContainer = exports.StyledScrollToTopButton = exports.Backdrop = exports.HeaderRow = exports.FooterRow = exports.DisabledDataGridWrapper = exports.DataGridWrapper = void 0;
|
|
4
4
|
const styles_1 = require("../DataGrid/styles");
|
|
5
5
|
const ScrollToTopButton_1 = require("../ScrollToTopButton");
|
|
6
6
|
const styled_1 = require("../styled");
|
|
@@ -29,6 +29,14 @@ exports.FooterRow = styled_1.styled.footer `
|
|
|
29
29
|
|
|
30
30
|
min-height: 68px;
|
|
31
31
|
`;
|
|
32
|
+
exports.HeaderRow = styled_1.styled.header `
|
|
33
|
+
display: flex;
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
|
|
38
|
+
min-height: 68px;
|
|
39
|
+
`;
|
|
32
40
|
exports.Backdrop = styled_1.styled.div `
|
|
33
41
|
position: absolute;
|
|
34
42
|
top: 0;
|
|
@@ -1,6 +1,14 @@
|
|
|
1
|
+
import { type Ref, type RefObject } from 'react';
|
|
2
|
+
import { type VirtuosoHandle } from 'react-virtuoso';
|
|
1
3
|
import type { DataGridProps, DataGridRow } from '../DataGrid';
|
|
2
4
|
import { type CellValue } from '../DataGrid/types';
|
|
5
|
+
export type DataGridInfiniteVirtuosoHandle = VirtuosoHandle;
|
|
6
|
+
export type DataGridInfiniteVirtuosoRef = RefObject<DataGridInfiniteVirtuosoHandle | null>;
|
|
3
7
|
export type DataGridInfiniteProps<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = Omit<DataGridProps<TData, TSortField>, 'footer' | 'minDisplayRows'> & {
|
|
8
|
+
/**
|
|
9
|
+
* Ref для доступа к методам Virtuoso
|
|
10
|
+
*/
|
|
11
|
+
virtuosoRef?: Ref<DataGridInfiniteVirtuosoHandle>;
|
|
4
12
|
/**
|
|
5
13
|
* Флаг достижения конца списка
|
|
6
14
|
*/
|
|
@@ -17,4 +25,16 @@ export type DataGridInfiniteProps<TData extends Record<string, CellValue> = Data
|
|
|
17
25
|
* Убирает шапку таблицы, когда нет данных
|
|
18
26
|
*/
|
|
19
27
|
isHideHeaderIfNoData?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Обработчик подгрузки данных при скроле до начала списка
|
|
30
|
+
*/
|
|
31
|
+
onStartReached?: () => void;
|
|
32
|
+
/**
|
|
33
|
+
* Флаг достижения начала списка
|
|
34
|
+
*/
|
|
35
|
+
isStartReached?: boolean;
|
|
36
|
+
/**
|
|
37
|
+
* Индекс первого видимого элемента
|
|
38
|
+
*/
|
|
39
|
+
initialVisibleItemIndex?: number;
|
|
20
40
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { type ChangeEvent } from 'react';
|
|
2
|
-
import type { ListRange
|
|
2
|
+
import type { ListRange } from 'react-virtuoso';
|
|
3
3
|
import { type DataGridRow } from '../../DataGrid';
|
|
4
4
|
import { type CellValue } from '../../DataGrid/types';
|
|
5
|
-
import { type DataGridInfiniteProps } from '../types';
|
|
5
|
+
import { type DataGridInfiniteProps, type DataGridInfiniteVirtuosoHandle } from '../types';
|
|
6
6
|
type UseLogicParams<TData extends Record<string, CellValue> = DataGridRow, TSortField extends keyof TData = keyof TData> = DataGridInfiniteProps<TData, TSortField>;
|
|
7
|
-
export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, mobileDisplayVariant, }: UseLogicParams<TData, TSortField>) => {
|
|
7
|
+
export declare const useLogic: <TData extends Record<string, unknown> = DataGridRow, TSortField extends keyof TData = keyof TData>({ keyId, columns, rows, variant, tree, subrows, selectedRows, maxHeight, isLoading, isError, isDisabled, isEndReached, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData, gridViewMode: gridViewModeProp, mobileDisplayVariant, virtuosoRef, }: UseLogicParams<TData, TSortField>) => {
|
|
8
8
|
containerCssVars: import("react").CSSProperties;
|
|
9
9
|
mobileSkeletonProps: {
|
|
10
10
|
cellsCount: number;
|
|
@@ -24,12 +24,17 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
|
|
|
24
24
|
hasGroupedColumns: boolean;
|
|
25
25
|
gridViewMode: "standard" | "full";
|
|
26
26
|
gridColumns: string;
|
|
27
|
+
isStartReached: boolean | undefined;
|
|
28
|
+
isNotRenderHeader: boolean | undefined;
|
|
29
|
+
initialTopMostItemIndex: number | undefined;
|
|
27
30
|
virtuosoProps: {
|
|
28
31
|
id: string;
|
|
29
|
-
ref:
|
|
32
|
+
ref: (node: DataGridInfiniteVirtuosoHandle | null) => void;
|
|
30
33
|
endReached: () => void;
|
|
31
34
|
rangeChanged: (range: ListRange) => void;
|
|
32
35
|
totalListHeightChanged: () => void;
|
|
36
|
+
startReached: () => void;
|
|
37
|
+
firstItemIndex: number;
|
|
33
38
|
};
|
|
34
39
|
headProps: {
|
|
35
40
|
rowsCount: number;
|
|
@@ -50,5 +55,6 @@ export declare const useLogic: <TData extends Record<string, unknown> = DataGrid
|
|
|
50
55
|
handleSelectRow: (row: TData) => (event: ChangeEvent<HTMLInputElement>) => void;
|
|
51
56
|
mobileDisplayVariant: "list" | "cards";
|
|
52
57
|
isSelfContained: boolean;
|
|
58
|
+
firstItemIndex: number;
|
|
53
59
|
};
|
|
54
60
|
export {};
|
|
@@ -10,12 +10,45 @@ const useViewportType_1 = require("../../useViewportType");
|
|
|
10
10
|
const prop_1 = require("../../utils/prop");
|
|
11
11
|
const uniqueBy_1 = require("../../utils/uniqueBy");
|
|
12
12
|
const constants_2 = require("../constants");
|
|
13
|
-
const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isDisabled, isEndReached, onEndReached, onSelectRow, isHideSelectAll, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', }) => {
|
|
13
|
+
const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows = [], maxHeight, isLoading, isError, isDisabled, isEndReached, onEndReached, onStartReached, isStartReached, onSelectRow, isHideSelectAll, initialVisibleItemIndex, isHideHeaderIfNoData = false, gridViewMode: gridViewModeProp = 'standard', mobileDisplayVariant = variant === 'subrows' ? 'cards' : 'list', virtuosoRef, }) => {
|
|
14
14
|
const virtuoso = (0, react_1.useRef)(null);
|
|
15
|
+
const handleVirtuosoRef = (0, react_1.useCallback)((node) => {
|
|
16
|
+
virtuoso.current = node;
|
|
17
|
+
if (virtuosoRef) {
|
|
18
|
+
virtuosoRef.current = node;
|
|
19
|
+
}
|
|
20
|
+
}, [virtuosoRef]);
|
|
15
21
|
const scrollToTopButtonRef = (0, react_1.useRef)(null);
|
|
16
22
|
const { isMobile } = (0, useViewportType_1.useViewportType)();
|
|
17
23
|
// Реф добавлен для избежания замыкания selectedRows в handleSelectRow (иначе в handleSelectRow приходят некорректные значения selectedRows).
|
|
18
24
|
const selectedRowsRef = (0, react_1.useRef)(selectedRows);
|
|
25
|
+
// Рефы для вычисления firstItemIndex
|
|
26
|
+
// baseIndex - базовый индекс для вычисления firstItemIndex. Делаем очень большим, что бы при подгрузке данных вверх(начало списка) virtuoso ставил им индексы меньше чем этот.
|
|
27
|
+
const baseIndex = (0, react_1.useRef)(10000);
|
|
28
|
+
const initialLength = (0, react_1.useRef)(rows.length);
|
|
29
|
+
const firstRowId = (0, react_1.useRef)(rows[0]?.[keyId]);
|
|
30
|
+
// Вычисляем firstItemIndex для динамической подгрузки данных вверх. Что бы virtuoso понимал что данные сверху еще есть и не надо скролить до верха списка.
|
|
31
|
+
const firstItemIndex = (0, react_1.useMemo)(() => {
|
|
32
|
+
const currentLength = rows.length;
|
|
33
|
+
const currentFirstId = rows[0]?.[keyId];
|
|
34
|
+
if (currentLength !== initialLength.current) {
|
|
35
|
+
// Если первый элемент изменился и длина увеличилась → подгрузка вверх
|
|
36
|
+
if (currentFirstId !== firstRowId.current &&
|
|
37
|
+
currentLength > initialLength.current) {
|
|
38
|
+
const addedCount = currentLength - initialLength.current;
|
|
39
|
+
baseIndex.current -= addedCount;
|
|
40
|
+
firstRowId.current = currentFirstId;
|
|
41
|
+
}
|
|
42
|
+
else if (currentLength < initialLength.current) {
|
|
43
|
+
baseIndex.current = 10000;
|
|
44
|
+
firstRowId.current = currentFirstId;
|
|
45
|
+
}
|
|
46
|
+
// Если длина увеличилась, но первый элемент не изменился → подгрузка вниз
|
|
47
|
+
// baseIndex не меняем
|
|
48
|
+
initialLength.current = currentLength;
|
|
49
|
+
}
|
|
50
|
+
return baseIndex.current;
|
|
51
|
+
}, [rows.length]);
|
|
19
52
|
(0, react_1.useEffect)(() => {
|
|
20
53
|
selectedRowsRef.current = selectedRows;
|
|
21
54
|
}, [selectedRows]);
|
|
@@ -46,12 +79,17 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
|
|
|
46
79
|
onEndReached();
|
|
47
80
|
}
|
|
48
81
|
}, [isEndReached, onEndReached]);
|
|
82
|
+
const handleStartReach = (0, react_1.useCallback)(() => {
|
|
83
|
+
if (!isStartReached && onStartReached) {
|
|
84
|
+
onStartReached();
|
|
85
|
+
}
|
|
86
|
+
}, [isStartReached, onStartReached]);
|
|
49
87
|
const uncheckedRowsCount = (0, react_1.useMemo)(() => {
|
|
50
88
|
return availableRows.filter((row) => !selectedRows.find((selectedRow) => selectedRow[keyId] === row[keyId])).length;
|
|
51
89
|
}, [availableRows, selectedRows, keyId]);
|
|
52
90
|
const handleRangeChanged = (0, react_1.useCallback)((range) => {
|
|
53
91
|
if (scrollToTopButtonRef.current) {
|
|
54
|
-
scrollToTopButtonRef.current.classList.toggle(constants_2.dataGridInfiniteClassnames.visibleScrollToTopButton, range.startIndex > 2);
|
|
92
|
+
scrollToTopButtonRef.current.classList.toggle(constants_2.dataGridInfiniteClassnames.visibleScrollToTopButton, range.startIndex > baseIndex.current + 2);
|
|
55
93
|
}
|
|
56
94
|
}, []);
|
|
57
95
|
const handleSelectAllRows = (event) => {
|
|
@@ -90,6 +128,11 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
|
|
|
90
128
|
mobileDisplayVariant,
|
|
91
129
|
});
|
|
92
130
|
const containerCssVars = (0, utils_1.getDataGridCssVars)(maxHeight);
|
|
131
|
+
const foundIndex = rows.findIndex((row) => String(row[keyId]) === String(initialVisibleItemIndex));
|
|
132
|
+
const initialTopMostItemIndex = foundIndex === -1 ? undefined : foundIndex;
|
|
133
|
+
const isNotRenderHeader = (!isLoading && !isError && !isStartReached) ||
|
|
134
|
+
!onStartReached ||
|
|
135
|
+
isStartReached;
|
|
93
136
|
return {
|
|
94
137
|
containerCssVars,
|
|
95
138
|
mobileSkeletonProps,
|
|
@@ -102,12 +145,17 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
|
|
|
102
145
|
hasGroupedColumns,
|
|
103
146
|
gridViewMode,
|
|
104
147
|
gridColumns,
|
|
148
|
+
isStartReached,
|
|
149
|
+
isNotRenderHeader,
|
|
150
|
+
initialTopMostItemIndex,
|
|
105
151
|
virtuosoProps: {
|
|
106
152
|
id: constants_2.VIRTUOSO_CONTAINER_ID,
|
|
107
|
-
ref:
|
|
153
|
+
ref: handleVirtuosoRef,
|
|
108
154
|
endReached: handleEndReach,
|
|
109
155
|
rangeChanged: handleRangeChanged,
|
|
110
156
|
totalListHeightChanged: recalculateVerticalScroll,
|
|
157
|
+
startReached: handleStartReach,
|
|
158
|
+
firstItemIndex,
|
|
111
159
|
},
|
|
112
160
|
headProps: {
|
|
113
161
|
rowsCount: availableRows.length,
|
|
@@ -128,6 +176,7 @@ const useLogic = ({ keyId, columns, rows, variant, tree, subrows, selectedRows =
|
|
|
128
176
|
handleSelectRow,
|
|
129
177
|
mobileDisplayVariant,
|
|
130
178
|
isSelfContained: mobileDisplayVariant === 'cards',
|
|
179
|
+
firstItemIndex,
|
|
131
180
|
};
|
|
132
181
|
};
|
|
133
182
|
exports.useLogic = useLogic;
|
|
@@ -6,6 +6,6 @@ const react_1 = require("react");
|
|
|
6
6
|
const styles_1 = require("./styles");
|
|
7
7
|
const useLogic_1 = require("./useLogic");
|
|
8
8
|
exports.ToggleButton = (0, react_1.forwardRef)((props, ref) => {
|
|
9
|
-
const { isVisibleCounter, children, disabled, counterLabel, color, selected, restProps, variant, } = (0, useLogic_1.useLogic)(props);
|
|
10
|
-
return ((0, jsx_runtime_1.jsxs)(styles_1.StyledToggleButton, { ref: ref, disabled: disabled, selected: selected, ...restProps, "$color": color, "$variant": variant, children: [children, isVisibleCounter && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", counterLabel] })] }));
|
|
9
|
+
const { isVisibleCounter, children, disabled, counterLabel, color, selected, isSelected, restProps, variant, } = (0, useLogic_1.useLogic)(props);
|
|
10
|
+
return ((0, jsx_runtime_1.jsxs)(styles_1.StyledToggleButton, { ref: ref, disabled: disabled, selected: selected, ...restProps, "$color": color, "$variant": variant, "aria-selected": isSelected, children: [children, isVisibleCounter && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" \u00B7 ", counterLabel] })] }));
|
|
11
11
|
});
|
|
@@ -8,6 +8,7 @@ export declare const useLogic: ({ selected, color, counter, children, disabled,
|
|
|
8
8
|
disabled: boolean | undefined;
|
|
9
9
|
color: "primary" | "success" | "warning" | "error" | "grey";
|
|
10
10
|
selected: boolean | undefined;
|
|
11
|
+
isSelected: boolean;
|
|
11
12
|
counterLabel: string | number | undefined;
|
|
12
13
|
restProps: {
|
|
13
14
|
classes?: (Partial<import("@mui/material").ToggleButtonClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
|