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

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

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { withStaticProperties } from "@crossed/core";
import {
  forwardRef,
  memo,
  useCallback,
  useId
} from "react";
import { composeStyles, inlineStyle, useTheme } from "@crossed/styled";
import { ChevronDown } from "@crossed/unicons";
import { form } from "../../styles/form";
import { VisibilityHidden } from "../../other/VisibilityHidden";
import { CloseButton } from "../../buttons/CloseButton";
import { Button } from "../../buttons/Button";
import { XBox } from "../../layout/XBox";
import { Text } from "../../typography/Text";
import { FormControl } from "../../forms/Form";
import { useSelectConfig, useSelectValue } from "./context";
import { useSelect } from "./styles";
import { TextInput } from "react-native";
import { Floating } from "../../overlay/Floating";
const ClearButton = memo(() => {
  const { value, setValue } = useSelectValue();
  const showClear = !!value;
  const handleClear = useCallback(() => setValue(""), [setValue]);
  return showClear ? /* @__PURE__ */ jsx(
    XBox,
    {
      style: composeStyles(
        form.elementRight,
        inlineStyle(({ space }) => ({
          base: { marginRight: space.md }
        }))
      ),
      children: /* @__PURE__ */ jsx(CloseButton, { onPress: handleClear })
    }
  ) : null;
});
const Value = () => {
  const { value, items, renderValue } = useSelectValue();
  const { multiple } = useSelectConfig();
  const id = useId();
  const tmp = !value ? [] : Array.isArray(value) ? value : [value];
  const toRender = tmp && tmp.length > 3 ? tmp.slice(0, 3) : tmp;
  const labelByValue = items.reduce((acc, i) => {
    if ("title" in i) {
      return {
        ...acc,
        ...i.data.reduce((acc2, d) => ({ ...acc2, [`${d.value}`]: d }), {})
      };
    }
    return { ...acc, [`${i.value}`]: i };
  }, {});
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx(VisibilityHidden, { hide: true, children: /* @__PURE__ */ jsx(
      TextInput,
      {
        focusable: false,
        value: `${Array.isArray(value) ? value.join(", ") : value}`
      }
    ) }),
    /* @__PURE__ */ jsx(XBox, { style: inlineStyle(() => ({ base: { gap: 5, flexShrink: 1 } })), children: renderValue ? renderValue(value) : toRender.map((e, i) => {
      var _a;
      return /* @__PURE__ */ jsx(
        Text,
        {
          ellipsizeMode: "tail",
          numberOfLines: 1,
          style: composeStyles(
            useSelect.value,
            multiple && inlineStyle(({ colors, space }) => ({
              base: {
                backgroundColor: colors.info.light,
                padding: space.xxs,
                borderRadius: 4,
                borderWidth: 1,
                borderColor: colors.info.primary,
                color: colors.info.dark
              }
            }))
            // style
          ),
          children: i === 2 ? `...+${tmp.length - i}` : (_a = labelByValue[`${e}`]) == null ? void 0 : _a.label
        },
        `${id}-${e}`
      );
    }) })
  ] });
};
const SelectTrigger = withStaticProperties(
  memo(
    forwardRef(({ children, ...props }, ref) => {
      const { clearable } = useSelectConfig();
      useTheme();
      return /* @__PURE__ */ jsxs(XBox, { children: [
        /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
          Floating.Trigger,
          {
            ...props,
            style: composeStyles(
              !children && form.input,
              !children && useSelect.trigger,
              props.disabled && form.disabled,
              // error && form.inputError,
              props.style
            ),
            ref,
            children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx(Value, {}),
              /* @__PURE__ */ jsx(
                ChevronDown,
                {
                  ...useSelect.icon.style(),
                  color: form.placeholder.style().style.color
                }
              )
            ] })
          }
        ) }),
        clearable && /* @__PURE__ */ jsx(ClearButton, {})
      ] });
    })
  ),
  { Text: Button.Text }
);
SelectTrigger.displayName = "Select.Trigger";
export {
  SelectTrigger
};
//# sourceMappingURL=Trigger.js.map