@swan-io/lake 8.11.0 → 8.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.11.0",
+  "version": "8.12.0",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/Filters.d.ts

@@ -10,8 +10,11 @@ export type FilterCheckboxDef<T> = {
     label: string;
     items: Item<T>[];
     width?: number;
-    submitText: string;
     checkAllLabel?: string;
+    /**
+     * @deprecated
+     */
+    submitText?: string;
 };
 export type FilterRadioDef<T> = {
     type: "radio";
@@ -32,11 +35,17 @@ export type FilterDateDef<Values = unknown> = {
 export type FilterInputDef = {
     type: "input";
     label: string;
-    submitText: string;
     noValueText: string;
     placeholder?: string;
     validate?: (value: string) => ValidatorResult;
+    /**
+     * @deprecated
+     */
+    submitText?: string;
 };
+/**
+ * @deprecated
+ */
 export type FilterBooleanDef = {
     type: "boolean";
     label: string;

package/src/components/Filters.js

@@ -1,19 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DatePickerModal, } from "@swan-io/shared-business/src/components/DatePicker";
-import { useForm } from "@swan-io/use-form";
 import dayjs from "dayjs";
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import { P, match } from "ts-pattern";
-import { colors, shadows, spacings } from "../constants/design";
+import { colors, shadows } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { usePreviousValue } from "../hooks/usePreviousValue";
-import { isNotNullish } from "../utils/nullish";
+import { isNotNullish, isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { FlatList } from "./FlatList";
 import { Icon } from "./Icon";
-import { LakeButton } from "./LakeButton";
 import { LakeCheckbox } from "./LakeCheckbox";
 import { LakeLabel } from "./LakeLabel";
 import { LakeRadio } from "./LakeRadio";
@@ -51,7 +49,9 @@ const styles = StyleSheet.create({
         paddingVertical: 12,
     },
     inputContent: {
-        padding: 24,
+        paddingHorizontal: 24,
+        paddingTop: 24,
+        paddingBottom: 16,
     },
     radio: {
         display: "flex",
@@ -66,15 +66,12 @@ const styles = StyleSheet.create({
         whiteSpace: "nowrap",
     },
     input: {
-        minWidth: 200,
+        width: 250,
     },
     value: {
         maxWidth: 130,
         whiteSpace: "nowrap",
     },
-    buttonContainer: {
-        paddingHorizontal: spacings[24],
-    },
 });
 const FilterTag = forwardRef(({ onPress, onPressRemove, label, value = "", isActive }, forwardRef) => {
     const ref = useRef(null);
@@ -85,107 +82,95 @@ function FilterRadio({ label, items, width, value, onValueChange, onPressRemove,
     const inputRef = useRef(null);
     const [visible, { close, toggle }] = useDisclosure(autoOpen);
     const currentValue = useMemo(() => items.find(i => i.value === value), [items, value]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.label }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(View, { style: [styles.dropdown, { width }], children: _jsx(FlatList, { role: "list", data: items, contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
-                            const isSelected = value === item.value;
-                            return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: () => {
-                                    onValueChange(item.value);
-                                    close();
-                                }, children: [_jsx(LakeRadio, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
-                        } }) }) })] }));
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.label }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(FlatList, { role: "list", data: items, style: [styles.dropdown, { width }], contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
+                        const isSelected = value === item.value;
+                        return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: () => {
+                                onValueChange(item.value);
+                                close();
+                            }, children: [_jsx(LakeRadio, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
+                    } }) })] }));
 }
-function FilterCheckbox({ label, items, width, checkAllLabel, value, onValueChange, applyButtonLabel, onPressRemove, autoOpen = false, }) {
+function FilterCheckbox({ label, items, width, checkAllLabel, value, onValueChange, onPressRemove, autoOpen = false, }) {
     const inputRef = useRef(null);
     const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const [localValue, setLocalValue] = useState(value);
-    const values = useMemo(() => new Set(localValue), [localValue]);
-    const currentValue = useMemo(() => items.filter(item => values.has(item.value)), [items, values]);
-    const allChecked = checkAllLabel != null && values.size === items.length;
+    const valueSet = useMemo(() => new Set(value), [value]);
+    const currentValue = useMemo(() => items.filter(item => valueSet.has(item.value)), [items, valueSet]);
+    const allChecked = checkAllLabel != null && valueSet.size === items.length;
     const listItems = useMemo(() => {
         if (checkAllLabel == null) {
             return items;
         }
-        const checked = values.size === 0 ? false : values.size === items.length ? true : "mixed";
+        const checked = valueSet.size === 0 ? false : valueSet.size === items.length ? true : "mixed";
         const checkAllItem = {
             label: checkAllLabel,
             checked,
         };
         return [checkAllItem, ...items];
-    }, [items, checkAllLabel, values]);
-    const save = useCallback(() => {
-        onValueChange(localValue);
-        close();
-    }, [onValueChange, localValue, close]);
-    useEffect(() => {
-        if (!visible) {
-            setLocalValue(value);
-        }
-    }, [visible, value]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: allChecked ? checkAllLabel : currentValue.map(item => item.label).join(", ") }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, { width }], children: [_jsx(FlatList, { role: "list", data: listItems, contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
-                                const isSelected = match(item)
-                                    .with({ checked: P.any }, ({ checked }) => checked)
-                                    .with({ value: P.any }, ({ value }) => values.has(value))
-                                    .exhaustive();
-                                const onPress = match(item)
-                                    // Check all item
-                                    .with({ checked: P.any }, ({ checked }) => () => {
-                                    if (checked === true) {
-                                        setLocalValue(undefined);
-                                    }
-                                    else {
-                                        setLocalValue(items.map(item => item.value));
-                                    }
-                                })
-                                    // Regular item
-                                    .with({ value: P.any }, ({ value }) => () => {
-                                    const nextValues = new Set([...values]);
-                                    if (isSelected === true) {
-                                        nextValues.delete(value);
-                                    }
-                                    else {
-                                        nextValues.add(value);
-                                    }
-                                    if (nextValues.size === 0) {
-                                        setLocalValue(undefined);
-                                    }
-                                    else {
-                                        setLocalValue([...nextValues]);
-                                    }
-                                })
-                                    .exhaustive();
-                                return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: onPress, children: [_jsx(LakeCheckbox, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
-                            } }), _jsx(Space, { height: 8 }), _jsx(View, { style: styles.buttonContainer, children: _jsx(LakeButton, { color: "current", onPress: save, children: applyButtonLabel }) }), _jsx(Space, { height: 24 })] }) })] }));
+    }, [items, checkAllLabel, valueSet]);
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: allChecked ? checkAllLabel : currentValue.map(item => item.label).join(", ") }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(FlatList, { role: "list", data: listItems, style: [styles.dropdown, { width }], contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
+                        const isSelected = match(item)
+                            .with({ checked: P.any }, ({ checked }) => checked)
+                            .with({ value: P.any }, ({ value }) => valueSet.has(value))
+                            .exhaustive();
+                        const onPress = match(item)
+                            // Check all item
+                            .with({ checked: P.any }, ({ checked }) => () => {
+                            if (checked === true) {
+                                onValueChange(undefined);
+                            }
+                            else {
+                                onValueChange(items.map(item => item.value));
+                            }
+                        })
+                            // Regular item
+                            .with({ value: P.any }, ({ value }) => () => {
+                            const nextValues = new Set([...valueSet]);
+                            if (isSelected === true) {
+                                nextValues.delete(value);
+                            }
+                            else {
+                                nextValues.add(value);
+                            }
+                            if (nextValues.size === 0) {
+                                onValueChange(undefined);
+                            }
+                            else {
+                                onValueChange([...nextValues]);
+                            }
+                        })
+                            .exhaustive();
+                        return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: onPress, children: [_jsx(LakeCheckbox, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
+                    } }) })] }));
 }
-function FilterDate({ label, initialValue, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, onSave, onPressRemove, autoOpen = false, }) {
+function FilterDate({ label, initialValue, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, onValueChange, onPressRemove, autoOpen = false, }) {
     const inputRef = useRef(null);
     const [visible, { close, toggle }] = useDisclosure(autoOpen);
     const value = useMemo(() => (isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : ""), [initialValue, dateFormat]);
     return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : noValueText }), _jsx(DatePickerModal, { visible: visible, format: dateFormat, firstWeekDay: "monday", label: label, cancelLabel: cancelText, confirmLabel: submitText, value: value, isSelectable: isSelectable, validate: validate, onChange: value => {
                     const formattedValue = dayjs(value, dateFormat, true).toJSON();
-                    onSave(formattedValue);
+                    onValueChange(formattedValue);
                 }, onDismiss: close })] }));
 }
-function FilterInput({ label, initialValue = "", noValueText, submitText, autoOpen = false, placeholder, validate, onSave, onPressRemove, }) {
-    const inputRef = useRef(null);
+function FilterInput({ label, initialValue = "", noValueText, autoOpen = false, placeholder, validate, onValueChange, onPressRemove, }) {
     const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const [value, setValue] = useState(initialValue);
-    const { Field, submitForm } = useForm({
-        input: {
-            initialValue,
-            validate,
-        },
-    });
-    const onSubmit = () => {
-        submitForm({
-            onSuccess: ({ input }) => {
-                if (input.isSome()) {
-                    setValue(input.get());
-                    onSave(input.get());
-                    close();
-                }
-            },
-        });
-    };
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: value === "" ? noValueText : value }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "input", children: ({ error, value, onChange }) => (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, error: error, style: styles.input, placeholder: placeholder, value: value, onChangeText: onChange, onSubmitEditing: onSubmit })) })) }), _jsx(LakeButton, { size: "small", color: "current", onPress: onSubmit, children: submitText })] }) })] }));
+    const tagRef = useRef(null);
+    const getValueState = useCallback((inputValue, isInitialValue) => {
+        var _a;
+        const trimmed = inputValue.trim();
+        const error = (_a = validate === null || validate === void 0 ? void 0 : validate(trimmed)) !== null && _a !== void 0 ? _a : undefined;
+        const validValue = isNullish(error) ? trimmed : undefined;
+        if (!isInitialValue) {
+            onValueChange(validValue);
+        }
+        return {
+            inputValue,
+            validValue,
+            error: isInitialValue ? undefined : error,
+        };
+    }, [validate, onValueChange]);
+    const [{ inputValue, validValue, error }, setState] = useState(() => getValueState(initialValue, true));
+    const onChangeText = useCallback((value) => setState(getValueState(value, false)), [getValueState]);
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: tagRef, onPressRemove: onPressRemove, isActive: visible, value: validValue !== null && validValue !== void 0 ? validValue : noValueText }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: tagRef, returnFocus: false, visible: visible, children: _jsx(View, { style: [styles.dropdown, styles.inputContent], children: _jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, value: inputValue, error: error, style: styles.input, placeholder: placeholder, onChangeText: onChangeText })) }) }) })] }));
 }
 function FilterBooleanTag({ children, onAdd, onPressRemove }) {
     useEffect(onAdd, []); // eslint-disable-line react-hooks/exhaustive-deps
@@ -210,15 +195,15 @@ export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpene
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     }, value: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }) })))
-                    .with({ type: "checkbox" }, ({ type, label, items, width, checkAllLabel, submitText }) => (_jsx(FilterCheckbox, { label: label, items: items, width: width, checkAllLabel: checkAllLabel, autoOpen: lastOpenedFilter === filterName, applyButtonLabel: submitText, value: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
+                    .with({ type: "checkbox" }, ({ type, label, items, width, checkAllLabel }) => (_jsx(FilterCheckbox, { label: label, items: items, width: width, checkAllLabel: checkAllLabel, autoOpen: lastOpenedFilter === filterName, value: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))
-                    .with({ type: "date" }, ({ type, label, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, }) => (_jsx(FilterDate, { label: label, noValueText: noValueText, cancelText: cancelText, submitText: submitText, dateFormat: dateFormat, autoOpen: lastOpenedFilter === filterName, isSelectable: isSelectable ? date => isSelectable(date, filters) : undefined, validate: validate ? value => validate(value, filters) : undefined, initialValue: getFilterValue(type, filters, filterName), onSave: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
+                    .with({ type: "date" }, ({ type, label, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, }) => (_jsx(FilterDate, { label: label, noValueText: noValueText, cancelText: cancelText, submitText: submitText, dateFormat: dateFormat, autoOpen: lastOpenedFilter === filterName, isSelectable: isSelectable ? date => isSelectable(date, filters) : undefined, validate: validate ? value => validate(value, filters) : undefined, initialValue: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))
-                    .with({ type: "input" }, ({ type, label, placeholder, noValueText, submitText, validate }) => (_jsx(FilterInput, { label: label, placeholder: placeholder, noValueText: noValueText, submitText: submitText, autoOpen: lastOpenedFilter === filterName, validate: validate, initialValue: getFilterValue(type, filters, filterName), onSave: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
+                    .with({ type: "input" }, ({ type, label, placeholder, noValueText, submitText, validate }) => (_jsx(FilterInput, { label: label, placeholder: placeholder, noValueText: noValueText, submitText: submitText, autoOpen: lastOpenedFilter === filterName, validate: validate, initialValue: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))