web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx - develop - vshmidt/label-studio

web/apps/labelstudio/src/components/Form/Elements/Select/Select.jsx

80 строк2 KB

Yousif Yassi

feat: OPTIC-1733: Standardize Dropdown Components Using LSE selector (#7257)

22 апр 2025, 21:37

22 апр 2025, 21:37ddb598a

import { useEffect, useMemo, useState } from "react";
import { cn } from "../../../../utils/bem";
import { FormField } from "../../FormField";
import { default as Label } from "../Label/Label";
import { Select as SelectUI } from "@humansignal/ui";

const SelectOption = ({ value, label, disabled = false, hidden = false, ...props }) => {
  return (
    <option value={value} disabled={disabled} hidden={hidden} {...props}>
      {label ?? value}
    </option>
  );
};

const Select = ({ label, className, options, validate, required, skip, labelProps, groupProps, ghost, ...props }) => {
  const rootClass = cn("select-ls");
  const initialValue = useMemo(() => props.value ?? "", [props.value]);
  const [value, setValue] = useState(initialValue);

  const grouped = options.reduce((groupedOptions, option) => {
    const key = option.group || "NoGroup"; // fallback group for items without a group property

    (groupedOptions[key] = groupedOptions[key] || []).push(option);
    return groupedOptions;
  }, {});

  const classList = rootClass.mod({ ghost }).mix(className);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const selectOptions = useMemo(() => {
    return Object.keys(grouped).flatMap((group) => {
      return group === "NoGroup"
        ? grouped[group]
        : (grouped[group] = {
            label: group,
            children: grouped[group],
          });
    });
  }, [grouped]);

  const selectWrapper = (
    <FormField
      name={props.name}
      label={label}
      validate={validate}
      required={required}
      skip={skip}
      setValue={(val) => setValue(val)}
      {...props}
    >
      {(ref) => {
        return (
          <SelectUI
            {...props}
            value={value}
            onChange={(val) => {
              setValue(val);
              props.onChange?.(val);
            }}
            ref={ref}
            options={selectOptions}
          />
        );
      }}
    </FormField>
  );

  return label ? (
    <Label {...(labelProps ?? {})} text={label} required={required}>
      {selectWrapper}
    </Label>
  ) : (
    selectWrapper
  );
};

export default Select;