@lotics/ui 12.1.2 → 13.7.1

package/src/inline_tag_select.tsx

@@ -1,140 +0,0 @@
-import { useState } from "react";
-import { View, StyleSheet } from "react-native";
-import { Icon } from "./icon";
-import { Text } from "./text";
-import { colors } from "./colors";
-import { Popover, PopoverTrigger, PopoverContent } from "./popover";
-import { OptionList } from "./option_list";
-import type { PickerOption } from "./picker";
-import { ActivityIndicator } from "./activity_indicator";
-import { Badge } from "./badge";
-import { type InlineEditBackground, InlineEditView } from "./inline_edit";
-import { useLoticsLocale } from "./locale";
-
-export interface InlineTagSelectProps<T extends string> {
-  /** The selected tag values. */
-  value: T[];
-  /** Commits the NEW SET when the picker closes (only if it changed). Throwing
-   *  surfaces the inline error, like every inline editor. */
-  onSave: (next: T[]) => void | Promise<void>;
-  options: PickerOption<T>[];
-  /** The resting render of ONE selected tag (an `OptionBadge` dot, a `Chip`).
-   *  Defaults to a plain zinc `Badge` of the label. */
-  renderTag?: (option: PickerOption<T>) => React.ReactNode;
-  /** Rich row content in the dropdown. Falls back to `renderTag`, then label. */
-  renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
-  placeholder?: string;
-  disabled?: boolean;
-  accessibilityLabel?: string;
-  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
-  /** Show an in-menu search box; default false. */
-  searchable?: boolean;
-}
-
-/**
- * The inline-editable MULTI select — the tag-field member of the `Inline*`
- * family (`InlineSelect` picks one; this holds a set). At rest the selected
- * tags render as badges inside the standard inline chip; clicking floats a
- * multi `OptionList` (checkbox rows) in a popover, toggles edit a local draft,
- * and CLOSING the popover commits the new set in one `onSave` — the blur-commit
- * contract of the inline family, applied to a set.
- */
-export function InlineTagSelect<T extends string>(props: InlineTagSelectProps<T>) {
-  const {
-    value, onSave, options, renderTag, renderOptionContent, placeholder, disabled, accessibilityLabel, background, searchable = false,
-  } = props;
-  const labels = useLoticsLocale().inline;
-  const [open, setOpenState] = useState(false);
-  const [draft, setDraft] = useState<T[]>(value);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const commit = async (next: T[]) => {
-    const changed = next.length !== value.length || next.some((v) => !value.includes(v));
-    if (!changed) return;
-    setSaving(true);
-    setError(null);
-    try {
-      await onSave(next);
-    } catch (e) {
-      setError(e instanceof Error && e.message ? e.message : labels.saveError);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const setOpen = (next: boolean) => {
-    if (next) {
-      setDraft(value);
-      setOpenState(true);
-      return;
-    }
-    setOpenState(false);
-    void commit(draft);
-  };
-
-  const selected = options.filter((o) => value.includes(o.value));
-  const tag = (o: PickerOption<T>) => (renderTag ? renderTag(o) : <Badge label={o.label ?? String(o.value)} color="zinc" />);
-
-  return (
-    <View>
-      <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
-        <PopoverTrigger>
-          <InlineEditView
-            background={background}
-            display={
-              selected.length > 0 ? (
-                <View style={styles.tags}>
-                  {selected.map((o) => (
-                    <View key={o.value}>{tag(o)}</View>
-                  ))}
-                </View>
-              ) : (
-                ""
-              )
-            }
-            placeholder={placeholder}
-            disabled={disabled}
-            active={open && !disabled}
-            accessibilityLabel={accessibilityLabel}
-            trailing={
-              saving ? (
-                <ActivityIndicator size={16} color={colors.zinc[400]} />
-              ) : (
-                <Icon name="chevron-down" size={18} color={colors.zinc[400]} />
-              )
-            }
-          />
-        </PopoverTrigger>
-        <PopoverContent disableBodyScroll>
-          <OptionList<T, true>
-            multi
-            search={{ mode: searchable ? "internal" : "none" }}
-            options={options}
-            value={draft}
-            onValueChange={setDraft}
-            onRequestClose={() => setOpen(false)}
-            renderOptionContent={renderOptionContent ?? renderTag}
-          />
-        </PopoverContent>
-      </Popover>
-      {error ? (
-        <Text size="xs" color="danger" style={styles.error}>
-          {error}
-        </Text>
-      ) : null}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  tags: {
-    flexDirection: "row",
-    alignItems: "center",
-    flexWrap: "wrap",
-    columnGap: 4,
-    rowGap: 2,
-  },
-  error: { marginTop: 4 },
-});