@swan-io/lake 13.9.1 → 13.9.3
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/package.json
CHANGED
|
@@ -19,6 +19,8 @@ import { Popover } from "./Popover";
|
|
|
19
19
|
import { Pressable } from "./Pressable";
|
|
20
20
|
import { Separator } from "./Separator";
|
|
21
21
|
import { Space } from "./Space";
|
|
22
|
+
const ITEM_ELEMENT_HEIGHT = 40;
|
|
23
|
+
const NB_SUGGESTION_DISPLAYED = 10.5;
|
|
22
24
|
const styles = StyleSheet.create({
|
|
23
25
|
normal: {
|
|
24
26
|
backgroundColor: colors.gray.contrast,
|
|
@@ -117,8 +119,7 @@ const styles = StyleSheet.create({
|
|
|
117
119
|
flexGrow: 1,
|
|
118
120
|
flexShrink: 1,
|
|
119
121
|
marginHorizontal: 16,
|
|
120
|
-
|
|
121
|
-
marginTop: 4,
|
|
122
|
+
marginTop: 16,
|
|
122
123
|
},
|
|
123
124
|
filterInput: {
|
|
124
125
|
...texts.regular,
|
|
@@ -141,6 +142,9 @@ const styles = StyleSheet.create({
|
|
|
141
142
|
position: "absolute",
|
|
142
143
|
left: 14,
|
|
143
144
|
},
|
|
145
|
+
list: {
|
|
146
|
+
maxHeight: ITEM_ELEMENT_HEIGHT * NB_SUGGESTION_DISPLAYED,
|
|
147
|
+
},
|
|
144
148
|
});
|
|
145
149
|
export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceMinWidth = true, matchReferenceWidth = false, value, error, hideErrors = false, icon, onValueChange, disabledItems = [], renderItem, PopoverFooter, style, hasSearch = false, searchPlaceholder, }) => {
|
|
146
150
|
var _a;
|
|
@@ -230,32 +234,32 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
|
|
|
230
234
|
styles.itemText,
|
|
231
235
|
styles.selectPlaceholder,
|
|
232
236
|
isSmall && styles.selectSmallPlaceholder,
|
|
233
|
-
], children: placeholder !== null && placeholder !== void 0 ? placeholder : " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], style: styles.errorText, children: error !== null && error !== void 0 ? error : " " })), _jsxs(Popover, { role: "listbox", matchReferenceWidth: matchReferenceWidth, matchReferenceMinWidth: matchReferenceMinWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { role: "list", data: filteredItems, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
237
|
+
], children: placeholder !== null && placeholder !== void 0 ? placeholder : " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], style: styles.errorText, children: error !== null && error !== void 0 ? error : " " })), _jsxs(Popover, { role: "listbox", matchReferenceWidth: matchReferenceWidth, matchReferenceMinWidth: matchReferenceMinWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [hasSearch ? ListHeaderComponent : undefined, _jsxs(View, { style: styles.list, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { role: "list", data: filteredItems, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
|
|
238
|
+
var _a;
|
|
239
|
+
const { key } = event.nativeEvent;
|
|
240
|
+
if (key === "ArrowDown" || key === "ArrowUp") {
|
|
241
|
+
event.preventDefault();
|
|
242
|
+
if (isNotNullish(event.currentTarget)) {
|
|
243
|
+
const focusableElements = getFocusableElements(event.currentTarget);
|
|
244
|
+
const current = focusableElements.indexOf(event.target);
|
|
245
|
+
const nextIndex = key === "ArrowDown" ? current + 1 : current - 1;
|
|
246
|
+
(_a = focusableElements[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
}, keyExtractor: (_, index) => `select-item-${index}`, renderItem: ({ item, index }) => {
|
|
250
|
+
const isSelected = value === item.value;
|
|
251
|
+
const disablement = disabledItems.find(({ value }) => value === item.value);
|
|
252
|
+
const content = renderItem != null ? (renderItem(item, isSelected)) : (_jsxs(_Fragment, { children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: item.name })] }));
|
|
253
|
+
return (_jsx(LakeTooltip, { placement: "right", content: disablement === null || disablement === void 0 ? void 0 : disablement.message, disabled: isNullishOrEmpty(disablement === null || disablement === void 0 ? void 0 : disablement.message), children: _jsxs(Pressable, { ref: element => {
|
|
254
|
+
listItemRefs.current[index] = element;
|
|
255
|
+
}, onKeyDown: onKeyDown, disabled: isNotNullish(disablement), style: ({ hovered, focused }) => [
|
|
256
|
+
styles.item,
|
|
257
|
+
(hovered || isSelected) && styles.itemHighlighted,
|
|
258
|
+
focused && styles.itemFocused,
|
|
259
|
+
isNotNullish(disablement) && styles.itemDisabled,
|
|
260
|
+
], role: "option", "aria-selected": true, onPress: () => {
|
|
261
|
+
onValueChange(item.value);
|
|
262
|
+
close();
|
|
263
|
+
}, children: [content, _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }) }));
|
|
264
|
+
} }), typeof PopoverFooter === "function" ? PopoverFooter({ close }) : PopoverFooter] })] })] }));
|
|
261
265
|
};
|
|
@@ -31,7 +31,6 @@ const styles = StyleSheet.create({
|
|
|
31
31
|
popoverContainer: {
|
|
32
32
|
position: "absolute",
|
|
33
33
|
display: "flex",
|
|
34
|
-
backgroundColor: backgroundColor.accented,
|
|
35
34
|
},
|
|
36
35
|
popover: {
|
|
37
36
|
pointerEvents: "auto",
|
|
@@ -43,6 +42,7 @@ const styles = StyleSheet.create({
|
|
|
43
42
|
boxShadow: shadows.modal,
|
|
44
43
|
flexGrow: 1,
|
|
45
44
|
alignSelf: "stretch",
|
|
45
|
+
backgroundColor: backgroundColor.accented,
|
|
46
46
|
},
|
|
47
47
|
popoverContents: {
|
|
48
48
|
alignItems: "stretch",
|