@crossed/ui/lib/module/forms/Select/List.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { memo, useCallback, useMemo } from "react";
import { MenuList } from "../../display";
import { composeStyles, inlineStyle } from "@crossed/styled";
import { XBox } from "../../layout";
import { Checkbox } from "../Checkbox";
import { useSelectConfig, useSelectValue } from "./context";
import { Sheet, useFloatingContext } from "../../overlay";
import { gapStyles } from "../../styles";
import {
  FlatList,
  SectionList
} from "react-native";
const isChecked = (value, valueGlobal) => {
  return value === valueGlobal || Array.isArray(valueGlobal) && valueGlobal.includes(value);
};
const List = memo(({ data }) => {
  const { onClose } = useFloatingContext();
  const { setValue, value: valueGlobal } = useSelectValue();
  const { multiple, section, showSheet } = useSelectConfig();
  const dataTransformed = useMemo(() => {
    if (section) {
      return data.map((d) => ({
        ...d,
        data: (d.data || []).map((item) => ({
          ...item,
          checked: isChecked(item.value, valueGlobal)
        }))
      }));
    }
    return data.map((item) => ({
      ...item,
      checked: isChecked(item.value, valueGlobal)
    }));
  }, [data, valueGlobal, section]);
  const onPress = useCallback(
    (item) => () => {
      if (!multiple)
        onClose();
      if (multiple) {
        if (!valueGlobal || !Array.isArray(valueGlobal)) {
          setValue([item.value]);
        } else {
          const toto = valueGlobal;
          setValue(
            toto.includes(item.value) ? toto.filter((t) => t !== item.value) : [...toto, item.value]
          );
        }
        return;
      }
      setValue(item.value);
    },
    [onClose, setValue, valueGlobal, multiple]
  );
  const RenderItem = useCallback(
    ({ item }) => {
      const checked = item.checked;
      return /* @__PURE__ */ jsx(
        MenuList.Item,
        {
          onPress: onPress(item),
          style: checked && inlineStyle(({ colors }) => ({
            "base": { backgroundColor: colors.background.active },
            ":hover": { backgroundColor: colors.background.active }
          })),
          children: /* @__PURE__ */ jsxs(XBox, { space: "xs", children: [
            multiple && /* @__PURE__ */ jsx(Checkbox, { checked, onChecked: onPress(item) }),
            /* @__PURE__ */ jsx(MenuList.Title, { children: item.label })
          ] })
        }
      );
    },
    [onPress, multiple]
  );
  const RenderLabel = useCallback(
    ({ section: section2 }) => {
      return /* @__PURE__ */ jsx(
        MenuList.Label,
        {
          style: inlineStyle(({ colors }) => ({
            base: { backgroundColor: colors.background.primary }
          })),
          children: section2.title
        }
      );
    },
    []
  );
  return showSheet ? section ? /* @__PURE__ */ jsx(
    Sheet.SectionList,
    {
      scrollEnabled: true,
      sections: dataTransformed,
      renderItem: RenderItem,
      renderSectionHeader: RenderLabel,
      stickySectionHeadersEnabled: true
    }
  ) : /* @__PURE__ */ jsx(
    Sheet.FlatList,
    {
      scrollEnabled: true,
      data: dataTransformed,
      renderItem: RenderItem
    }
  ) : section ? /* @__PURE__ */ jsx(
    SectionList,
    {
      sections: dataTransformed,
      renderItem: RenderItem,
      renderSectionHeader: RenderLabel,
      stickySectionHeadersEnabled: true
    }
  ) : /* @__PURE__ */ jsx(
    FlatList,
    {
      contentContainerStyle: composeStyles(
        gapStyles.xs,
        inlineStyle(({ space }) => ({
          base: {
            paddingVertical: space.md,
            paddingHorizontal: space.md
          }
        }))
      ).style().style,
      style: { flex: 1 },
      data: dataTransformed,
      renderItem: RenderItem
    }
  );
});
export {
  List
};
//# sourceMappingURL=List.js.map