panelui-native 0.28.1 → 0.32.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/README.md +22 -3
- package/lib/module/components/calendar/index.js +450 -132
- package/lib/module/components/calendar/index.js.map +1 -1
- package/lib/module/components/code-block/highlight.js +363 -0
- package/lib/module/components/code-block/highlight.js.map +1 -0
- package/lib/module/components/code-block/index.js +313 -0
- package/lib/module/components/code-block/index.js.map +1 -0
- package/lib/module/components/date-picker/index.js +8 -1
- package/lib/module/components/date-picker/index.js.map +1 -1
- package/lib/module/components/heatmap-chart/index.js +9 -8
- package/lib/module/components/heatmap-chart/index.js.map +1 -1
- package/lib/module/components/map/index.js +50 -4
- package/lib/module/components/map/index.js.map +1 -1
- package/lib/module/components/menu/index.js +714 -0
- package/lib/module/components/menu/index.js.map +1 -0
- package/lib/module/components/plan/index.js +582 -0
- package/lib/module/components/plan/index.js.map +1 -0
- package/lib/module/components/popover/index.js +35 -4
- package/lib/module/components/popover/index.js.map +1 -1
- package/lib/module/components/post/index.js +992 -0
- package/lib/module/components/post/index.js.map +1 -0
- package/lib/module/components/radio-group/index.js +13 -8
- package/lib/module/components/radio-group/index.js.map +1 -1
- package/lib/module/components/reasoning/index.js +244 -0
- package/lib/module/components/reasoning/index.js.map +1 -0
- package/lib/module/components/response/index.js +296 -0
- package/lib/module/components/response/index.js.map +1 -0
- package/lib/module/components/response/markdown.js +463 -0
- package/lib/module/components/response/markdown.js.map +1 -0
- package/lib/module/components/select/index.js +97 -15
- package/lib/module/components/select/index.js.map +1 -1
- package/lib/module/components/sources/index.js +221 -0
- package/lib/module/components/sources/index.js.map +1 -0
- package/lib/module/components/table/index.js +632 -0
- package/lib/module/components/table/index.js.map +1 -0
- package/lib/module/components/task/index.js +300 -0
- package/lib/module/components/task/index.js.map +1 -0
- package/lib/module/components/textarea/index.js +295 -0
- package/lib/module/components/textarea/index.js.map +1 -0
- package/lib/module/components/tooltip/index.js +179 -23
- package/lib/module/components/tooltip/index.js.map +1 -1
- package/lib/module/icons/index.js +339 -0
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/index.js +12 -1
- package/lib/module/index.js.map +1 -1
- package/lib/module/primitives/collapse.js +112 -0
- package/lib/module/primitives/collapse.js.map +1 -0
- package/lib/module/utils/date.js +129 -22
- package/lib/module/utils/date.js.map +1 -1
- package/lib/typescript/src/components/calendar/index.d.ts +79 -5
- package/lib/typescript/src/components/calendar/index.d.ts.map +1 -1
- package/lib/typescript/src/components/code-block/highlight.d.ts +39 -0
- package/lib/typescript/src/components/code-block/highlight.d.ts.map +1 -0
- package/lib/typescript/src/components/code-block/index.d.ts +113 -0
- package/lib/typescript/src/components/code-block/index.d.ts.map +1 -0
- package/lib/typescript/src/components/date-picker/index.d.ts +7 -1
- package/lib/typescript/src/components/date-picker/index.d.ts.map +1 -1
- package/lib/typescript/src/components/heatmap-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/map/index.d.ts +8 -1
- package/lib/typescript/src/components/map/index.d.ts.map +1 -1
- package/lib/typescript/src/components/menu/index.d.ts +261 -0
- package/lib/typescript/src/components/menu/index.d.ts.map +1 -0
- package/lib/typescript/src/components/plan/index.d.ts +238 -0
- package/lib/typescript/src/components/plan/index.d.ts.map +1 -0
- package/lib/typescript/src/components/popover/index.d.ts +35 -1
- package/lib/typescript/src/components/popover/index.d.ts.map +1 -1
- package/lib/typescript/src/components/post/index.d.ts +358 -0
- package/lib/typescript/src/components/post/index.d.ts.map +1 -0
- package/lib/typescript/src/components/radio-group/index.d.ts.map +1 -1
- package/lib/typescript/src/components/reasoning/index.d.ts +97 -0
- package/lib/typescript/src/components/reasoning/index.d.ts.map +1 -0
- package/lib/typescript/src/components/response/index.d.ts +91 -0
- package/lib/typescript/src/components/response/index.d.ts.map +1 -0
- package/lib/typescript/src/components/response/markdown.d.ts +88 -0
- package/lib/typescript/src/components/response/markdown.d.ts.map +1 -0
- package/lib/typescript/src/components/select/index.d.ts +27 -2
- package/lib/typescript/src/components/select/index.d.ts.map +1 -1
- package/lib/typescript/src/components/sources/index.d.ts +85 -0
- package/lib/typescript/src/components/sources/index.d.ts.map +1 -0
- package/lib/typescript/src/components/table/index.d.ts +274 -0
- package/lib/typescript/src/components/table/index.d.ts.map +1 -0
- package/lib/typescript/src/components/task/index.d.ts +103 -0
- package/lib/typescript/src/components/task/index.d.ts.map +1 -0
- package/lib/typescript/src/components/textarea/index.d.ts +175 -0
- package/lib/typescript/src/components/textarea/index.d.ts.map +1 -0
- package/lib/typescript/src/components/tooltip/index.d.ts +63 -8
- package/lib/typescript/src/components/tooltip/index.d.ts.map +1 -1
- package/lib/typescript/src/icons/index.d.ts +54 -1
- package/lib/typescript/src/icons/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +14 -3
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/primitives/collapse.d.ts +42 -0
- package/lib/typescript/src/primitives/collapse.d.ts.map +1 -0
- package/lib/typescript/src/utils/date.d.ts +49 -5
- package/lib/typescript/src/utils/date.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/calendar/index.tsx +519 -139
- package/src/components/code-block/highlight.ts +278 -0
- package/src/components/code-block/index.tsx +341 -0
- package/src/components/date-picker/index.tsx +19 -1
- package/src/components/heatmap-chart/index.tsx +9 -9
- package/src/components/map/index.tsx +53 -4
- package/src/components/menu/index.tsx +812 -0
- package/src/components/plan/index.tsx +648 -0
- package/src/components/popover/index.tsx +69 -2
- package/src/components/post/index.tsx +1116 -0
- package/src/components/radio-group/index.tsx +11 -2
- package/src/components/reasoning/index.tsx +297 -0
- package/src/components/response/index.tsx +390 -0
- package/src/components/response/markdown.ts +489 -0
- package/src/components/select/index.tsx +132 -12
- package/src/components/sources/index.tsx +278 -0
- package/src/components/table/index.tsx +747 -0
- package/src/components/task/index.tsx +329 -0
- package/src/components/textarea/index.tsx +381 -0
- package/src/components/tooltip/index.tsx +203 -20
- package/src/icons/index.tsx +264 -1
- package/src/index.ts +131 -0
- package/src/primitives/collapse.tsx +128 -0
- package/src/utils/date.ts +146 -22
- package/theme.css +112 -0
|
@@ -0,0 +1,300 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Task — one step an agent took, and what it did while it was there.
|
|
5
|
+
*
|
|
6
|
+
* The header is the step; the body is the detail nobody reads unless something
|
|
7
|
+
* went wrong. Open by default, because a task that is running is the thing the
|
|
8
|
+
* reader is watching — and it stays open afterwards rather than folding itself
|
|
9
|
+
* away, because unlike a reasoning trace the steps are the record of what
|
|
10
|
+
* happened and are worth scrolling back through.
|
|
11
|
+
*
|
|
12
|
+
* ```tsx
|
|
13
|
+
* <Task status="running">
|
|
14
|
+
* <Task.Trigger title="Searching the codebase" />
|
|
15
|
+
* <Task.Content>
|
|
16
|
+
* <Task.Item>
|
|
17
|
+
* Read <Task.File>calendar/index.tsx</Task.File>
|
|
18
|
+
* </Task.Item>
|
|
19
|
+
* </Task.Content>
|
|
20
|
+
* </Task>
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* ## Where the props come from
|
|
24
|
+
*
|
|
25
|
+
* With the AI SDK a task is a tool-call part: `part.type` is `tool-<name>` and
|
|
26
|
+
* `part.state` runs `input-streaming` → `input-available` → `output-available`
|
|
27
|
+
* or `output-error`. Those map onto `status` as pending, running, complete and
|
|
28
|
+
* error; `part.input` is usually what the body should say.
|
|
29
|
+
*/
|
|
30
|
+
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
|
|
31
|
+
import { Pressable, View } from 'react-native';
|
|
32
|
+
import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
33
|
+
import { tv } from 'tailwind-variants';
|
|
34
|
+
import { useCSSVariable } from 'uniwind';
|
|
35
|
+
import { AlertTriangleIcon, CheckCircleIcon, ChevronDownIcon, CircleIcon, SearchIcon } from "../../icons/index.js";
|
|
36
|
+
import { Collapse } from "../../primitives/collapse.js";
|
|
37
|
+
import { Text, textChildren } from "../../primitives/text.js";
|
|
38
|
+
import { cn } from "../../utils/cn.js";
|
|
39
|
+
import { Shimmer } from "../shimmer/index.js";
|
|
40
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
41
|
+
const taskVariants = tv({
|
|
42
|
+
slots: {
|
|
43
|
+
root: 'w-full gap-2',
|
|
44
|
+
trigger: 'flex-row items-center gap-2 py-0.5',
|
|
45
|
+
title: 'flex-1 text-sm text-muted-foreground',
|
|
46
|
+
/*
|
|
47
|
+
* Indented behind a rule rather than merely padded. The rule is what says
|
|
48
|
+
* these lines belong to the step above them instead of being the next few
|
|
49
|
+
* steps, which matters as soon as there is more than one task in a row.
|
|
50
|
+
*/
|
|
51
|
+
content: 'ms-2 gap-1.5 border-s border-border ps-4',
|
|
52
|
+
item: 'text-sm leading-relaxed text-muted-foreground',
|
|
53
|
+
file: 'flex-row items-center gap-1 self-start rounded-md border border-border bg-muted px-1.5 py-0.5',
|
|
54
|
+
fileLabel: 'font-mono text-xs text-foreground'
|
|
55
|
+
},
|
|
56
|
+
variants: {
|
|
57
|
+
status: {
|
|
58
|
+
pending: {
|
|
59
|
+
title: 'text-muted-foreground/60'
|
|
60
|
+
},
|
|
61
|
+
running: {},
|
|
62
|
+
complete: {},
|
|
63
|
+
error: {
|
|
64
|
+
title: 'text-destructive'
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
defaultVariants: {
|
|
69
|
+
status: 'complete'
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
const TaskContext = /*#__PURE__*/createContext(null);
|
|
73
|
+
function useTask(component) {
|
|
74
|
+
const context = useContext(TaskContext);
|
|
75
|
+
if (!context) {
|
|
76
|
+
throw new Error(`${component} must be used within a <Task>`);
|
|
77
|
+
}
|
|
78
|
+
return context;
|
|
79
|
+
}
|
|
80
|
+
function TaskRoot({
|
|
81
|
+
className,
|
|
82
|
+
status = 'complete',
|
|
83
|
+
open: openProp,
|
|
84
|
+
defaultOpen = true,
|
|
85
|
+
onOpenChange,
|
|
86
|
+
children,
|
|
87
|
+
...props
|
|
88
|
+
}) {
|
|
89
|
+
const {
|
|
90
|
+
root
|
|
91
|
+
} = taskVariants({
|
|
92
|
+
status
|
|
93
|
+
});
|
|
94
|
+
const [internalOpen, setInternalOpen] = useState(defaultOpen);
|
|
95
|
+
const isControlled = openProp !== undefined;
|
|
96
|
+
const open = isControlled ? openProp : internalOpen;
|
|
97
|
+
const setOpen = useCallback(next => {
|
|
98
|
+
if (!isControlled) setInternalOpen(next);
|
|
99
|
+
onOpenChange?.(next);
|
|
100
|
+
}, [isControlled, onOpenChange]);
|
|
101
|
+
const context = useMemo(() => ({
|
|
102
|
+
status,
|
|
103
|
+
open,
|
|
104
|
+
setOpen
|
|
105
|
+
}), [status, open, setOpen]);
|
|
106
|
+
return /*#__PURE__*/_jsx(TaskContext.Provider, {
|
|
107
|
+
value: context,
|
|
108
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
109
|
+
...props,
|
|
110
|
+
className: cn(root(), className),
|
|
111
|
+
children: children
|
|
112
|
+
})
|
|
113
|
+
});
|
|
114
|
+
}
|
|
115
|
+
TaskRoot.displayName = 'Task';
|
|
116
|
+
function TaskTrigger({
|
|
117
|
+
className,
|
|
118
|
+
title,
|
|
119
|
+
icon,
|
|
120
|
+
children,
|
|
121
|
+
onPress,
|
|
122
|
+
...props
|
|
123
|
+
}) {
|
|
124
|
+
const {
|
|
125
|
+
status,
|
|
126
|
+
open,
|
|
127
|
+
setOpen
|
|
128
|
+
} = useTask('Task.Trigger');
|
|
129
|
+
const slots = taskVariants({
|
|
130
|
+
status
|
|
131
|
+
});
|
|
132
|
+
const reducedMotion = useReducedMotion();
|
|
133
|
+
const progress = useSharedValue(open ? 1 : 0);
|
|
134
|
+
useEffect(() => {
|
|
135
|
+
progress.value = reducedMotion ? open ? 1 : 0 : withTiming(open ? 1 : 0, {
|
|
136
|
+
duration: 180
|
|
137
|
+
});
|
|
138
|
+
}, [open, reducedMotion, progress]);
|
|
139
|
+
const chevronStyle = useAnimatedStyle(() => ({
|
|
140
|
+
transform: [{
|
|
141
|
+
rotate: `${progress.value * 180}deg`
|
|
142
|
+
}]
|
|
143
|
+
}));
|
|
144
|
+
return /*#__PURE__*/_jsx(Pressable, {
|
|
145
|
+
accessibilityRole: "button",
|
|
146
|
+
accessibilityState: {
|
|
147
|
+
expanded: open
|
|
148
|
+
},
|
|
149
|
+
onPress: event => {
|
|
150
|
+
onPress?.(event);
|
|
151
|
+
setOpen(!open);
|
|
152
|
+
},
|
|
153
|
+
className: cn(slots.trigger(), className),
|
|
154
|
+
...props,
|
|
155
|
+
children: children ?? /*#__PURE__*/_jsxs(_Fragment, {
|
|
156
|
+
children: [icon ?? /*#__PURE__*/_jsx(TaskStatusIcon, {
|
|
157
|
+
status: status
|
|
158
|
+
}), status === 'running' && title ? /*#__PURE__*/_jsx(View, {
|
|
159
|
+
className: "flex-1",
|
|
160
|
+
children: /*#__PURE__*/_jsx(Shimmer, {
|
|
161
|
+
textClassName: slots.title(),
|
|
162
|
+
children: title
|
|
163
|
+
})
|
|
164
|
+
}) : /*#__PURE__*/_jsx(Text, {
|
|
165
|
+
numberOfLines: 1,
|
|
166
|
+
className: slots.title(),
|
|
167
|
+
children: title
|
|
168
|
+
}), /*#__PURE__*/_jsx(Animated.View, {
|
|
169
|
+
style: chevronStyle,
|
|
170
|
+
children: /*#__PURE__*/_jsx(ChevronDownIcon, {
|
|
171
|
+
size: 16
|
|
172
|
+
})
|
|
173
|
+
})]
|
|
174
|
+
})
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* The glyph for each status. A magnifier while running: a step is a search.
|
|
180
|
+
*
|
|
181
|
+
* Every one is given an explicit colour. The filled status icons fall back to
|
|
182
|
+
* `currentColor`, which React Native's SVG does not resolve — it paints black,
|
|
183
|
+
* which on a dark theme is a black disc floating in the row. They are built to
|
|
184
|
+
* take their colour from an enclosing `IconColorProvider`, and a task row is
|
|
185
|
+
* not one, so the tint is resolved here.
|
|
186
|
+
*/
|
|
187
|
+
function TaskStatusIcon({
|
|
188
|
+
status
|
|
189
|
+
}) {
|
|
190
|
+
const muted = useTint('--color-muted-foreground');
|
|
191
|
+
const success = useTint('--color-success');
|
|
192
|
+
const destructive = useTint('--color-destructive');
|
|
193
|
+
switch (status) {
|
|
194
|
+
case 'pending':
|
|
195
|
+
return /*#__PURE__*/_jsx(CircleIcon, {
|
|
196
|
+
size: 16,
|
|
197
|
+
color: muted
|
|
198
|
+
});
|
|
199
|
+
case 'error':
|
|
200
|
+
return /*#__PURE__*/_jsx(AlertTriangleIcon, {
|
|
201
|
+
size: 16,
|
|
202
|
+
color: destructive
|
|
203
|
+
});
|
|
204
|
+
case 'complete':
|
|
205
|
+
return /*#__PURE__*/_jsx(CheckCircleIcon, {
|
|
206
|
+
size: 16,
|
|
207
|
+
color: success
|
|
208
|
+
});
|
|
209
|
+
default:
|
|
210
|
+
return /*#__PURE__*/_jsx(SearchIcon, {
|
|
211
|
+
size: 16,
|
|
212
|
+
color: muted
|
|
213
|
+
});
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* A theme token as a colour an icon will accept.
|
|
219
|
+
*
|
|
220
|
+
* `useCSSVariable` answers with whatever the token holds, which for a length or
|
|
221
|
+
* a number is not a colour at all — so anything that is not a string is dropped
|
|
222
|
+
* and the icon falls back to what it would have used anyway.
|
|
223
|
+
*/
|
|
224
|
+
function useTint(variable) {
|
|
225
|
+
const raw = useCSSVariable(variable);
|
|
226
|
+
return typeof raw === 'string' ? raw : undefined;
|
|
227
|
+
}
|
|
228
|
+
function TaskContent({
|
|
229
|
+
className,
|
|
230
|
+
children,
|
|
231
|
+
...props
|
|
232
|
+
}) {
|
|
233
|
+
const {
|
|
234
|
+
open
|
|
235
|
+
} = useTask('Task.Content');
|
|
236
|
+
const {
|
|
237
|
+
content
|
|
238
|
+
} = taskVariants();
|
|
239
|
+
return /*#__PURE__*/_jsx(Collapse, {
|
|
240
|
+
open: open,
|
|
241
|
+
className: cn(content(), className),
|
|
242
|
+
...props,
|
|
243
|
+
children: children
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
/** One line of what the step did. */
|
|
247
|
+
function TaskItem({
|
|
248
|
+
className,
|
|
249
|
+
children,
|
|
250
|
+
...props
|
|
251
|
+
}) {
|
|
252
|
+
const {
|
|
253
|
+
item
|
|
254
|
+
} = taskVariants();
|
|
255
|
+
return /*#__PURE__*/_jsx(View, {
|
|
256
|
+
...props,
|
|
257
|
+
className: cn('flex-row flex-wrap items-center gap-1', className),
|
|
258
|
+
children: textChildren(children, text => /*#__PURE__*/_jsx(Text, {
|
|
259
|
+
className: item(),
|
|
260
|
+
children: text
|
|
261
|
+
}))
|
|
262
|
+
});
|
|
263
|
+
}
|
|
264
|
+
/**
|
|
265
|
+
* A filename inside a line, drawn as a chip.
|
|
266
|
+
*
|
|
267
|
+
* Bordered rather than merely monospaced, because a path in the middle of a
|
|
268
|
+
* sentence is otherwise indistinguishable from the sentence — and the paths
|
|
269
|
+
* are the part of a task line anyone actually scans for.
|
|
270
|
+
*/
|
|
271
|
+
function TaskFile({
|
|
272
|
+
className,
|
|
273
|
+
icon,
|
|
274
|
+
children,
|
|
275
|
+
...props
|
|
276
|
+
}) {
|
|
277
|
+
const {
|
|
278
|
+
file,
|
|
279
|
+
fileLabel
|
|
280
|
+
} = taskVariants();
|
|
281
|
+
return /*#__PURE__*/_jsxs(View, {
|
|
282
|
+
...props,
|
|
283
|
+
className: cn(file(), className),
|
|
284
|
+
children: [icon, textChildren(children, text => /*#__PURE__*/_jsx(Text, {
|
|
285
|
+
className: fileLabel(),
|
|
286
|
+
children: text
|
|
287
|
+
}))]
|
|
288
|
+
});
|
|
289
|
+
}
|
|
290
|
+
TaskTrigger.displayName = 'Task.Trigger';
|
|
291
|
+
TaskContent.displayName = 'Task.Content';
|
|
292
|
+
TaskItem.displayName = 'Task.Item';
|
|
293
|
+
TaskFile.displayName = 'Task.File';
|
|
294
|
+
export const Task = Object.assign(TaskRoot, {
|
|
295
|
+
Trigger: TaskTrigger,
|
|
296
|
+
Content: TaskContent,
|
|
297
|
+
Item: TaskItem,
|
|
298
|
+
File: TaskFile
|
|
299
|
+
});
|
|
300
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["createContext","useCallback","useContext","useEffect","useMemo","useState","Pressable","View","Animated","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","tv","useCSSVariable","AlertTriangleIcon","CheckCircleIcon","ChevronDownIcon","CircleIcon","SearchIcon","Collapse","Text","textChildren","cn","Shimmer","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","taskVariants","slots","root","trigger","title","content","item","file","fileLabel","variants","status","pending","running","complete","error","defaultVariants","TaskContext","useTask","component","context","Error","TaskRoot","className","open","openProp","defaultOpen","onOpenChange","children","props","internalOpen","setInternalOpen","isControlled","undefined","setOpen","next","Provider","value","displayName","TaskTrigger","icon","onPress","reducedMotion","progress","duration","chevronStyle","transform","rotate","accessibilityRole","accessibilityState","expanded","event","TaskStatusIcon","textClassName","numberOfLines","style","size","muted","useTint","success","destructive","color","variable","raw","TaskContent","TaskItem","text","TaskFile","Task","Object","assign","Trigger","Content","Item","File"],"sourceRoot":"../../../../src","sources":["components/task/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Textarea — a field for text that runs to several lines.
|
|
5
|
+
*
|
|
6
|
+
* It shares Input's focus treatment: the border crosses between two colours on
|
|
7
|
+
* the UI thread over 150ms rather than snapping, because a border that switches
|
|
8
|
+
* wholesale reads as a redraw instead of as the field answering you.
|
|
9
|
+
*
|
|
10
|
+
* Height comes from `rows` rather than from a class, so it composes with `size`
|
|
11
|
+
* instead of fighting it — three rows of 14px text and three rows of 16px text
|
|
12
|
+
* are different heights, and both are three rows. `autoGrow` then lets the
|
|
13
|
+
* field follow its content up to `maxRows`, after which it scrolls, which is
|
|
14
|
+
* the behaviour a composer wants: it starts small, opens up as you write, and
|
|
15
|
+
* stops before it eats the screen.
|
|
16
|
+
*
|
|
17
|
+
* ```tsx
|
|
18
|
+
* <Textarea label="Notes" placeholder="Anything we should know?" />
|
|
19
|
+
* <Textarea autoGrow rows={2} maxRows={8} showCount maxLength={280} />
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* For a single line, reach for `Input`.
|
|
23
|
+
*/
|
|
24
|
+
import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
|
|
25
|
+
import { TextInput, View } from 'react-native';
|
|
26
|
+
import Animated, { interpolateColor, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
27
|
+
import { tv } from 'tailwind-variants';
|
|
28
|
+
import { useCSSVariable } from 'uniwind';
|
|
29
|
+
import { KeyboardAvoider } from "../../primitives/keyboard-avoider.js";
|
|
30
|
+
import { Text } from "../../primitives/text.js";
|
|
31
|
+
import { Label } from "../label/index.js";
|
|
32
|
+
|
|
33
|
+
/** Long enough to read as a transition, short enough not to lag a fast tab. */
|
|
34
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
35
|
+
const FOCUS_DURATION = 150;
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* Type size and the leading it is given, per `size`.
|
|
39
|
+
*
|
|
40
|
+
* The height of the box is derived from these rather than set as a class,
|
|
41
|
+
* because `rows` is a count and a count only becomes a height once you know how
|
|
42
|
+
* tall a line is. They are the same numbers the classes below carry; keeping
|
|
43
|
+
* them here as well is what lets `rows` and `size` compose.
|
|
44
|
+
*/
|
|
45
|
+
const METRICS = {
|
|
46
|
+
sm: {
|
|
47
|
+
fontSize: 14,
|
|
48
|
+
lineHeight: 20,
|
|
49
|
+
padding: 10
|
|
50
|
+
},
|
|
51
|
+
md: {
|
|
52
|
+
fontSize: 16,
|
|
53
|
+
lineHeight: 22,
|
|
54
|
+
padding: 12
|
|
55
|
+
},
|
|
56
|
+
lg: {
|
|
57
|
+
fontSize: 16,
|
|
58
|
+
lineHeight: 24,
|
|
59
|
+
padding: 14
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
const textareaVariants = tv({
|
|
63
|
+
slots: {
|
|
64
|
+
container: 'w-full gap-1.5',
|
|
65
|
+
/*
|
|
66
|
+
* No height here: it is computed from `rows` and applied as a style. Text
|
|
67
|
+
* starts at the top rather than floating in the middle of an empty box, and
|
|
68
|
+
* the leading is wanted — between several lines it separates them, where in
|
|
69
|
+
* a one-line field it would push the text off centre.
|
|
70
|
+
*/
|
|
71
|
+
field: 'w-full rounded-lg border text-foreground',
|
|
72
|
+
footer: 'w-full flex-row items-start justify-between gap-3',
|
|
73
|
+
description: 'text-sm text-muted-foreground',
|
|
74
|
+
error: 'text-sm text-destructive',
|
|
75
|
+
count: 'shrink-0 text-sm tabular-nums text-muted-foreground'
|
|
76
|
+
},
|
|
77
|
+
variants: {
|
|
78
|
+
variant: {
|
|
79
|
+
// The border colour is animated, so it is deliberately not set here —
|
|
80
|
+
// only the background belongs to the class.
|
|
81
|
+
outline: {
|
|
82
|
+
field: 'bg-background'
|
|
83
|
+
},
|
|
84
|
+
filled: {
|
|
85
|
+
field: 'bg-muted'
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
size: {
|
|
89
|
+
sm: {
|
|
90
|
+
field: 'px-3 text-[14px]'
|
|
91
|
+
},
|
|
92
|
+
md: {
|
|
93
|
+
field: 'px-3.5 text-[16px]'
|
|
94
|
+
},
|
|
95
|
+
lg: {
|
|
96
|
+
field: 'px-4 text-[16px]'
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
disabled: {
|
|
100
|
+
true: {
|
|
101
|
+
field: 'opacity-[0.64]'
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
/** Past the limit the counter is the error, so it is tinted like one. */
|
|
105
|
+
over: {
|
|
106
|
+
true: {
|
|
107
|
+
count: 'text-destructive'
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
defaultVariants: {
|
|
112
|
+
variant: 'outline',
|
|
113
|
+
size: 'md'
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
|
|
117
|
+
export const Textarea = /*#__PURE__*/forwardRef(({
|
|
118
|
+
className,
|
|
119
|
+
containerClassName,
|
|
120
|
+
label,
|
|
121
|
+
description,
|
|
122
|
+
errorMessage,
|
|
123
|
+
isRequired,
|
|
124
|
+
disabled,
|
|
125
|
+
variant,
|
|
126
|
+
size = 'md',
|
|
127
|
+
rows = 4,
|
|
128
|
+
autoGrow = false,
|
|
129
|
+
maxRows = 10,
|
|
130
|
+
showCount = false,
|
|
131
|
+
avoidKeyboard = false,
|
|
132
|
+
keyboardMode = 'lift',
|
|
133
|
+
keyboardOffset = 16,
|
|
134
|
+
keyboardBottomInset = 0,
|
|
135
|
+
onFocus,
|
|
136
|
+
onBlur,
|
|
137
|
+
onContentSizeChange,
|
|
138
|
+
style,
|
|
139
|
+
...props
|
|
140
|
+
}, ref) => {
|
|
141
|
+
const [focused, setFocused] = useState(false);
|
|
142
|
+
const invalid = !!errorMessage;
|
|
143
|
+
const metrics = METRICS[size];
|
|
144
|
+
/* Both paddings plus the lines themselves — the box a row count asks for. */
|
|
145
|
+
const heightFor = useCallback(lines => lines * metrics.lineHeight + metrics.padding * 2, [metrics]);
|
|
146
|
+
const minHeight = heightFor(rows);
|
|
147
|
+
const maxHeight = autoGrow ? heightFor(Math.max(rows, maxRows)) : undefined;
|
|
148
|
+
|
|
149
|
+
/*
|
|
150
|
+
* What the text actually measures, once it has been laid out. It only ever
|
|
151
|
+
* raises the floor — the field never shrinks below `rows`, and never grows
|
|
152
|
+
* past `maxRows`, so the clamping happens here rather than in the style.
|
|
153
|
+
*/
|
|
154
|
+
const [contentHeight, setContentHeight] = useState(0);
|
|
155
|
+
const grownHeight = autoGrow ? Math.min(Math.max(minHeight, contentHeight + metrics.padding * 2), maxHeight ?? Number.POSITIVE_INFINITY) : minHeight;
|
|
156
|
+
const length = props.value?.length ?? props.defaultValue?.length ?? 0;
|
|
157
|
+
const over = !!props.maxLength && length >= props.maxLength;
|
|
158
|
+
const placeholderColor = useCSSVariable('--color-muted-foreground');
|
|
159
|
+
const restColor = useCSSVariable('--color-input');
|
|
160
|
+
const focusColor = useCSSVariable('--color-ring');
|
|
161
|
+
const errorColor = useCSSVariable('--color-destructive');
|
|
162
|
+
const slots = textareaVariants({
|
|
163
|
+
variant,
|
|
164
|
+
size,
|
|
165
|
+
disabled: !!disabled,
|
|
166
|
+
over
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
/*
|
|
170
|
+
* Border colour is driven by one 0..1 value rather than by a class per
|
|
171
|
+
* state. Uniwind can only swap a class wholesale, which is the snap this
|
|
172
|
+
* is here to avoid, and a shared value crosses between the two colours on
|
|
173
|
+
* the UI thread without a re-render.
|
|
174
|
+
*/
|
|
175
|
+
const focus = useSharedValue(0);
|
|
176
|
+
useEffect(() => {
|
|
177
|
+
focus.value = withTiming(focused ? 1 : 0, {
|
|
178
|
+
duration: FOCUS_DURATION
|
|
179
|
+
});
|
|
180
|
+
}, [focused, focus]);
|
|
181
|
+
const resting = typeof restColor === 'string' ? restColor : '#e5e5e5';
|
|
182
|
+
const active = invalid ? typeof errorColor === 'string' ? errorColor : '#ef4444' : typeof focusColor === 'string' ? focusColor : '#a3a3a3';
|
|
183
|
+
// An invalid field is tinted even at rest — the error is a fact about the
|
|
184
|
+
// value, not about whether the field happens to be focused.
|
|
185
|
+
const idle = invalid ? active : resting;
|
|
186
|
+
const borderStyle = useAnimatedStyle(() => ({
|
|
187
|
+
borderColor: interpolateColor(focus.value, [0, 1], [idle, active])
|
|
188
|
+
}));
|
|
189
|
+
const handleFocus = useCallback(event => {
|
|
190
|
+
setFocused(true);
|
|
191
|
+
onFocus?.(event);
|
|
192
|
+
}, [onFocus]);
|
|
193
|
+
const handleBlur = useCallback(event => {
|
|
194
|
+
setFocused(false);
|
|
195
|
+
onBlur?.(event);
|
|
196
|
+
}, [onBlur]);
|
|
197
|
+
const handleContentSizeChange = useCallback(event => {
|
|
198
|
+
if (autoGrow) {
|
|
199
|
+
setContentHeight(event.nativeEvent.contentSize.height);
|
|
200
|
+
}
|
|
201
|
+
onContentSizeChange?.(event);
|
|
202
|
+
}, [autoGrow, onContentSizeChange]);
|
|
203
|
+
|
|
204
|
+
/*
|
|
205
|
+
* Type metrics go through `style` rather than through classes because the
|
|
206
|
+
* height is computed from them, and a line height set in two places is a
|
|
207
|
+
* line height that will disagree with itself.
|
|
208
|
+
*/
|
|
209
|
+
const boxStyle = useMemo(() => ({
|
|
210
|
+
height: grownHeight,
|
|
211
|
+
lineHeight: metrics.lineHeight,
|
|
212
|
+
paddingTop: metrics.padding,
|
|
213
|
+
paddingBottom: metrics.padding,
|
|
214
|
+
// Android starts the caret in the middle of the box without it.
|
|
215
|
+
textAlignVertical: 'top'
|
|
216
|
+
}), [grownHeight, metrics]);
|
|
217
|
+
const footer = errorMessage || description || showCount && props.maxLength ? /*#__PURE__*/_jsxs(View, {
|
|
218
|
+
className: slots.footer(),
|
|
219
|
+
children: [errorMessage ? /*#__PURE__*/_jsx(Text, {
|
|
220
|
+
className: slots.error(),
|
|
221
|
+
children: errorMessage
|
|
222
|
+
}) : description ? /*#__PURE__*/_jsx(Text, {
|
|
223
|
+
className: slots.description(),
|
|
224
|
+
children: description
|
|
225
|
+
}) : /*#__PURE__*/_jsx(View, {
|
|
226
|
+
className: "flex-1"
|
|
227
|
+
}), showCount && props.maxLength ? /*#__PURE__*/_jsxs(Text, {
|
|
228
|
+
className: slots.count(),
|
|
229
|
+
children: [length, "/", props.maxLength]
|
|
230
|
+
}) : null]
|
|
231
|
+
}) : null;
|
|
232
|
+
const body = /*#__PURE__*/_jsxs(_Fragment, {
|
|
233
|
+
children: [label ? /*#__PURE__*/_jsx(Label, {
|
|
234
|
+
isRequired: isRequired,
|
|
235
|
+
isInvalid: invalid,
|
|
236
|
+
isDisabled: !!disabled,
|
|
237
|
+
children: label
|
|
238
|
+
}) : null, /*#__PURE__*/_jsx(AnimatedTextInput, {
|
|
239
|
+
ref: ref,
|
|
240
|
+
multiline: true,
|
|
241
|
+
editable: !disabled,
|
|
242
|
+
onFocus: handleFocus,
|
|
243
|
+
onBlur: handleBlur,
|
|
244
|
+
onContentSizeChange: handleContentSizeChange,
|
|
245
|
+
accessibilityLabel: label,
|
|
246
|
+
accessibilityState: {
|
|
247
|
+
disabled: !!disabled
|
|
248
|
+
},
|
|
249
|
+
"aria-required": isRequired,
|
|
250
|
+
"aria-invalid": invalid,
|
|
251
|
+
className: slots.field({
|
|
252
|
+
className
|
|
253
|
+
})
|
|
254
|
+
// Caller styles come last, but never last enough to drop the
|
|
255
|
+
// animated border or the height the row count asked for.
|
|
256
|
+
,
|
|
257
|
+
style: [boxStyle, borderStyle, style],
|
|
258
|
+
placeholderTextColor: typeof placeholderColor === 'string' ? placeholderColor : undefined,
|
|
259
|
+
...props
|
|
260
|
+
}), footer]
|
|
261
|
+
});
|
|
262
|
+
const containerClasses = slots.container({
|
|
263
|
+
className: containerClassName
|
|
264
|
+
});
|
|
265
|
+
|
|
266
|
+
/*
|
|
267
|
+
* The keyboard hook is deliberately behind a component boundary rather
|
|
268
|
+
* than an `enabled` flag. Calling it at all has global consequences —
|
|
269
|
+
* without the keyboard controller installed it falls back to Reanimated's
|
|
270
|
+
* useAnimatedKeyboard, which switches Android out of adjustResize for the
|
|
271
|
+
* whole app. A field that never asked to avoid the keyboard must not do
|
|
272
|
+
* that to every other screen.
|
|
273
|
+
*/
|
|
274
|
+
if (avoidKeyboard) {
|
|
275
|
+
return /*#__PURE__*/_jsx(KeyboardAvoider
|
|
276
|
+
// Only while *this* field is the one being typed into. Without it
|
|
277
|
+
// every avoiding field on the screen lifts the moment any field
|
|
278
|
+
// anywhere is tapped, and since they all aim at the same gap above
|
|
279
|
+
// the keyboard, they arrive stacked on top of one another.
|
|
280
|
+
, {
|
|
281
|
+
active: focused,
|
|
282
|
+
mode: keyboardMode,
|
|
283
|
+
offset: keyboardOffset,
|
|
284
|
+
bottomInset: keyboardBottomInset,
|
|
285
|
+
className: containerClasses,
|
|
286
|
+
children: body
|
|
287
|
+
});
|
|
288
|
+
}
|
|
289
|
+
return /*#__PURE__*/_jsx(View, {
|
|
290
|
+
className: containerClasses,
|
|
291
|
+
children: body
|
|
292
|
+
});
|
|
293
|
+
});
|
|
294
|
+
Textarea.displayName = 'Textarea';
|
|
295
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["forwardRef","useCallback","useEffect","useMemo","useState","TextInput","View","Animated","interpolateColor","useAnimatedStyle","useSharedValue","withTiming","tv","useCSSVariable","KeyboardAvoider","Text","Label","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","FOCUS_DURATION","METRICS","sm","fontSize","lineHeight","padding","md","lg","textareaVariants","slots","container","field","footer","description","error","count","variants","variant","outline","filled","size","disabled","true","over","defaultVariants","AnimatedTextInput","createAnimatedComponent","Textarea","className","containerClassName","label","errorMessage","isRequired","rows","autoGrow","maxRows","showCount","avoidKeyboard","keyboardMode","keyboardOffset","keyboardBottomInset","onFocus","onBlur","onContentSizeChange","style","props","ref","focused","setFocused","invalid","metrics","heightFor","lines","minHeight","maxHeight","Math","max","undefined","contentHeight","setContentHeight","grownHeight","min","Number","POSITIVE_INFINITY","length","value","defaultValue","maxLength","placeholderColor","restColor","focusColor","errorColor","focus","duration","resting","active","idle","borderStyle","borderColor","handleFocus","event","handleBlur","handleContentSizeChange","nativeEvent","contentSize","height","boxStyle","paddingTop","paddingBottom","textAlignVertical","children","body","isInvalid","isDisabled","multiline","editable","accessibilityLabel","accessibilityState","placeholderTextColor","containerClasses","mode","offset","bottomInset","displayName"],"sourceRoot":"../../../../src","sources":["components/textarea/index.tsx"],"mappings":"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","ignoreList":[]}
|