@swan-io/lake 13.9.1 → 13.9.2
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,
|
|
@@ -141,6 +143,9 @@ const styles = StyleSheet.create({
|
|
|
141
143
|
position: "absolute",
|
|
142
144
|
left: 14,
|
|
143
145
|
},
|
|
146
|
+
list: {
|
|
147
|
+
maxHeight: ITEM_ELEMENT_HEIGHT * NB_SUGGESTION_DISPLAYED,
|
|
148
|
+
},
|
|
144
149
|
});
|
|
145
150
|
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
151
|
var _a;
|
|
@@ -230,32 +235,32 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
|
|
|
230
235
|
styles.itemText,
|
|
231
236
|
styles.selectPlaceholder,
|
|
232
237
|
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 : " " })),
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
238
|
+
], 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 : " " })), _jsx(Popover, { role: "listbox", matchReferenceWidth: matchReferenceWidth, matchReferenceMinWidth: matchReferenceMinWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: _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) => {
|
|
239
|
+
var _a;
|
|
240
|
+
const { key } = event.nativeEvent;
|
|
241
|
+
if (key === "ArrowDown" || key === "ArrowUp") {
|
|
242
|
+
event.preventDefault();
|
|
243
|
+
if (isNotNullish(event.currentTarget)) {
|
|
244
|
+
const focusableElements = getFocusableElements(event.currentTarget);
|
|
245
|
+
const current = focusableElements.indexOf(event.target);
|
|
246
|
+
const nextIndex = key === "ArrowDown" ? current + 1 : current - 1;
|
|
247
|
+
(_a = focusableElements[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
248
|
+
}
|
|
243
249
|
}
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
} }), typeof PopoverFooter === "function" ? PopoverFooter({ close }) : PopoverFooter] })] }));
|
|
250
|
+
}, keyExtractor: (_, index) => `select-item-${index}`, ListHeaderComponent: hasSearch ? ListHeaderComponent : undefined, renderItem: ({ item, index }) => {
|
|
251
|
+
const isSelected = value === item.value;
|
|
252
|
+
const disablement = disabledItems.find(({ value }) => value === item.value);
|
|
253
|
+
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 })] }));
|
|
254
|
+
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 => {
|
|
255
|
+
listItemRefs.current[index] = element;
|
|
256
|
+
}, onKeyDown: onKeyDown, disabled: isNotNullish(disablement), style: ({ hovered, focused }) => [
|
|
257
|
+
styles.item,
|
|
258
|
+
(hovered || isSelected) && styles.itemHighlighted,
|
|
259
|
+
focused && styles.itemFocused,
|
|
260
|
+
isNotNullish(disablement) && styles.itemDisabled,
|
|
261
|
+
], role: "option", "aria-selected": true, onPress: () => {
|
|
262
|
+
onValueChange(item.value);
|
|
263
|
+
close();
|
|
264
|
+
}, children: [content, _jsx(Fill, { minWidth: 12 }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }) }));
|
|
265
|
+
} }), typeof PopoverFooter === "function" ? PopoverFooter({ close }) : PopoverFooter] }) })] }));
|
|
261
266
|
};
|
|
@@ -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",
|