Nicepaste.com - Best paste tool since 2023!

New Paste Browse

import isEqual from "lodash/isEqual";
import { useEffect, useRef, useState } from "react";
import ReactSelect, { createFilter } from "react-select";
import CreatableSelect from "react-select/creatable";
import { compressImage } from "../../../../lib/helpers/compress-image";
import { useToast } from "../../../../lib/providers/toast-provider";
import useDebounce from "./../../../../lib/hooks/useDebounce";
const tailwindConfig = require("./../../../../tailwind.config");

const getTailwindColor = (color): { light: string; DEFAULT: string; dark: string } => {
  return tailwindConfig.theme.extend.colors[color];
};

export interface SelectProps extends FormControlProps {
  native?: boolean;
  options?: Option[];
  optionsPromise?: () => Promise<Option[]>;
  autocompletePromise?: ({
    id,
    search,
  }: {
    id?: string | string[];
    search?: string;
  }) => Promise<Option[]>;
  creatablePromise?: (inputValue?: any) => Promise<Option | Option[]>;
  clearable?: boolean;
  searchable?: boolean;
  multi?: boolean;
  hasColor?: boolean;
  hasImage?: boolean;
  isAvatarImage?: boolean;
  dependency?: any;
  autoSize?: boolean;
  menuIsOpen?: boolean;
}
export function Select({
  controlClassName = "form-control",
  className = "",
  native = false,
  multi = false,
  searchable = true,
  clearable = false,
  hasColor = false,
  hasImage = false,
  isAvatarImage = false,
  defaultValue = getDefaultValue({ multi }),
  style = {},
  ...props
}: SelectProps) {
  let [loading, setLoading] = useState(false);
  let [allOptions, setAllOptions] = useState<Option[]>([]);
  let [options, setOptions] = useState<Option[]>(props.options);
  let [value, setValue] = useState<any>(props.value || defaultValue);
  let [search, setSearch] = useState<string>("");
  const debouncedSearch = useDebounce(search, 300);

const toast = useToast();
  const selectRef = useRef();

const [menuIsOpen, setMenuIsOpen] = useState<boolean>();
  const [menuWidth, setMenuWidth] = useState<number>();
  const [isPlaceholderLonger, setIsPlaceholderLonger] = useState(false);
  const [isCalculatingWidth, setIsCalculatingWidth] = useState(false);

useEffect(() => {
    if (!isEqual(props.options, options)) {
      setOptions(props.options || []);
    }
  }, [props.options]);

useEffect(() => {
    if (props.autoSize && options?.length && !menuWidth && !isCalculatingWidth) {
      setTimeout(() => {
        setIsCalculatingWidth(true);
        (selectRef.current as any)?.select.openMenu();
        setMenuIsOpen(true);
      }, 200);
    }
  }, [props.autoSize, options, menuWidth, isCalculatingWidth]);

const onMenuOpen = () => {
    if (props.autoSize && !menuWidth && isCalculatingWidth) {
      setTimeout(() => {
        const width = (selectRef.current as any)?.select.menuListRef?.getBoundingClientRect().width;
        const placeholderWidth = props.placeholder
          ? (selectRef.current as any)?.select.controlRef
            ?.querySelector(".react-select__placeholder")
            .getBoundingClientRect().width + 12
          : 0;
        setIsPlaceholderLonger(placeholderWidth > width);
        setMenuWidth(placeholderWidth > width ? placeholderWidth : width);
        setIsCalculatingWidth(false);

(selectRef.current as any)?.select.onMenuClose();
        setMenuIsOpen(undefined);
      }, 1);
    }
  };

// get initial autocomplete data
  useEffect(() => {
    if (value?.length && props.autocompletePromise) {
      setLoading(true);
      props
        .autocompletePromise({
          id:
            typeof value == "string"
              ? value
              : value.map((v) => (typeof v == "string" ? v : v.value)),
        })
        .then((res) => {
          allOptions = [
            ...allOptions,
            ...res.filter((x) => !allOptions.find((y) => y.value == x.value)),
          ];
          setAllOptions(allOptions);
          if (multi) {
            setValue(allOptions.filter((x) => value?.includes(x.value)));
          } else {
            setValue(allOptions.find((x) => x.value == value));
          }
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, []);

// get autocomplete from search
  useEffect(() => {
    if (props.autocompletePromise) {
      setLoading(true);
      props.autocompletePromise({ search: debouncedSearch }).then((res) => {
        setOptions(res);
        setLoading(false);
      });
    }
  }, [debouncedSearch]);

// get options from promise
  useEffect(() => {
    if (!options && props.optionsPromise) {
      setLoading(true);
      props.optionsPromise().then((res) => {
        setOptions(res);
        setLoading(false);
      });
    }
  }, [props.optionsPromise]);

useEffect(() => {
    if (!options && props.creatablePromise) {
      setLoading(true);
      props
        .creatablePromise()
        .then((res) => {
          setOptions(res as Option[]);
        })
        .finally(() => {
          setLoading(false);
        });
    }
  }, [props.creatablePromise]);

useEffect(() => {
    fetchOptions();
  }, [props.dependency]);

const dot = (color: string = "gray") =>
    hasColor
      ? {
        alignItems: "center",
        display: "flex",

":before": {
          backgroundColor: getTailwindColor(color)?.DEFAULT || color,
          borderRadius: "50%",
          content: '" "',
          display: "block",
          marginRight: 8,
          height: 12,
          width: 12,
        },
      }
      : {};

const image = (image: string = "") =>
    hasImage
      ? {
        alignItems: "center",
        display: "flex",
        ":before": {
          backgroundImage: image
            ? `url(${compressImage(image, 100)})`
            : isAvatarImage
              ? "url(/assets/default/avatar.png)"
              : "url(/assets/default/default.png)",
          backgroundRepeat: "no-repeat",
          backgroundColor: image !== null ? "#eee" : "transparent",
          backgroundPosition: "center center",
          backgroundSize: "cover",
          border: "0.5px solid #eee",
          borderRadius: isAvatarImage ? "50%" : "3px",
          content: '" "',
          display: "block",
          marginRight: "8px",
          transform: "translate(-2px) scale(1.6)",
          height: 20,
          width: 20,
          minWidth: 20,
        },
      }
      : {};

useEffect(() => {
    if (props.value !== undefined) {
      if (native) {
        setValue(props.value || defaultValue);
      } else {
        if (options?.length) {
          if (props.autocompletePromise) {
            let newAllOptions = allOptions.concat([
              ...options.filter((x) => !allOptions.find((y) => y.value == x.value)),
            ]);
            setAllOptions(newAllOptions);
            if (multi) {
              let valueIds = value?.map((x) => x.value) || [];
              setValue(
                newAllOptions.filter(
                  (x) => valueIds.includes(x.value) || props.value?.includes(x.value)
                )
              );
            } else {
              setValue(
                newAllOptions.filter((x) => x.value == value?.value || x.value == props.value)
              );
            }
          } else {
            if (multi) {
              setValue(options.filter((x) => props.value?.includes(x.value)));
            } else {
              setValue(options.filter((x) => x.value == props.value));
            }
          }
        }
      }
    } else {
      setValue(defaultValue);
    }
  }, [props.value, options]);

const onInputChange = (term: string) => {
    if (props.autocompletePromise) {
      setSearch(term);
    }
  };

const SelectComponent: any = props.creatablePromise ? CreatableSelect : ReactSelect;

return (
    <>
      {native ? (
        <select
          tabIndex={props.noFocus && -1}
          disabled={props.readonly}
          className={`${controlClassName} ${props.error ? "error" : ""} ${className}`}
          value={value}
          id={props.id}
          name={props.name}
          style={{ ...style }}
          onChange={(e) => onChange(e.target.value)}
        >
          {props.options.map((option, index) => (
            <option key={index} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      ) : (
        <SelectComponent
          tabIndex={props.noFocus && "-1"}
          ref={selectRef}
          onMenuOpen={onMenuOpen}
          menuIsOpen={menuIsOpen || props.menuIsOpen}
          id={props.id}
          name={props.name}
          options={options}
          value={value}
          onChange={onChange}
          onInputChange={onInputChange}
          className={`${controlClassName} inline-grid px-0 ${props.error ? "error" : ""
            } ${className} ${props.autoSize ? "react-select-autosize" : ""}`}
          style={{ ...style }}
          classNamePrefix="react-select"
          placeholder={
            props.placeholder || (props.autocompletePromise ? "Nhập để tìm kiếm" : "Chưa chọn")
          }
          menuPlacement="auto"
          menuPosition="fixed"
          isLoading={loading}
          isMulti={multi}
          isSearchable={searchable}
          isClearable={!props.readonly && clearable}
          isDisabled={props.readonly}
          instanceId={`${props.id || props.name}`}
          noOptionsMessage={() => "Không có lựa chọn"}
          styles={colourStyles}
          filterOption={props.autocompletePromise ? (option: Option) => true : filterOption}
          formatCreateLabel={(input) => `Tạo mới "${input}"...`}
          onCreateOption={createOption}
        />
      )}
    </>
  );
}

const filterOption = createFilter({
  ignoreCase: true,
  ignoreAccents: true,
  trim: true,
  matchFrom: "any",
  stringify: (option: Option) => `${option.label} ${option.value}`,
});

const getDefaultValue = (props: SelectProps) => {
  return props.multi ? [] : "";
};

Select.getDefaultValue = getDefaultValue;

Paste Settings

Paste Title : [Optional]

Paste Folder : [Optional]

Syntax Highlighting : [Optional]

Paste Expiration : [Optional]

Paste Status : [Optional]

Password : [Optional]

Description: [Optional]

Tags: [Optional]

Encrypt Paste (?)

You are currently not logged in, this means you can not edit or delete anything you paste. Sign Up or Login

Paste Settings

Site Languages