Merge pull request #77 from dolthub/taylor/select-org

components: Move FormSelect components to folder

packages/components/src/FormSelect/Async.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import AsyncSelect from "react-select/async";
+import Wrapper from "./Wrapper";
+import { formatOptionLabel, getComponents } from "./components";
+import customStyles, { mobileStyles } from "./styles";
+import { AsyncProps, Option, OptionTypeBase } from "./types";
+
+export default function FormSelectAsync<
+  T,
+  OptionType extends OptionTypeBase<T> = Option<T>,
+  IsMulti extends boolean = false,
+>({
+  mono = false,
+  light = false,
+  small = false,
+  pill = false,
+  transparentBorder = false,
+  blue = false,
+  rounded = false,
+  forMobile = false,
+  ...props
+}: AsyncProps<T, OptionType, IsMulti>): JSX.Element {
+  const styles = forMobile
+    ? mobileStyles<T, OptionType, IsMulti>(light)
+    : customStyles<T, OptionType, IsMulti>(
+        mono,
+        light,
+        small,
+        pill,
+        transparentBorder,
+        blue,
+        rounded,
+      );
+
+  return (
+    <Wrapper {...props} small={small}>
+      <AsyncSelect
+        {...props}
+        styles={props.customStyles ? props.customStyles(styles) : styles}
+        components={getComponents(props.components, blue, forMobile && !light)}
+        formatOptionLabel={formatOptionLabel}
+      />
+    </Wrapper>
+  );
+}

packages/components/src/FormSelect/components/Clear.tsx

@@ -0,0 +1,22 @@
+import { AiOutlineClose } from "@react-icons/all-files/ai/AiOutlineClose";
+import cx from "classnames";
+import React from "react";
+import { ClearIndicatorProps } from "react-select";
+import { OptionTypeBase } from "../types";
+import css from "./index.module.css";
+
+export default function Clear<
+  T,
+  OptionType extends OptionTypeBase<T>,
+  IsMulti extends boolean,
+>(props: ClearIndicatorProps<OptionType, IsMulti> & { blue?: boolean }) {
+  return (
+    <div {...props.innerProps}>
+      <AiOutlineClose
+        className={cx(css.clearIndicator, {
+          [css.blueIndicator]: !!props.blue,
+        })}
+      />
+    </div>
+  );
+}

packages/components/src/FormSelect/components/Dropdown.tsx

@@ -0,0 +1,28 @@
+import { AiFillCaretDown } from "@react-icons/all-files/ai/AiFillCaretDown";
+import cx from "classnames";
+import React from "react";
+import { DropdownIndicatorProps } from "react-select";
+import { OptionTypeBase } from "../types";
+import css from "./index.module.css";
+
+export default function Dropdown<
+  T,
+  OptionType extends OptionTypeBase<T>,
+  IsMulti extends boolean,
+>(
+  props: DropdownIndicatorProps<OptionType, IsMulti> & {
+    blue?: boolean;
+    light?: boolean;
+  },
+) {
+  return (
+    <div {...props.innerProps}>
+      <AiFillCaretDown
+        className={cx(css.dropdownIndicator, {
+          [css.blueIndicator]: !!props.blue,
+          [css.whiteIndicator]: !!props.light,
+        })}
+      />
+    </div>
+  );
+}

packages/components/src/FormSelect/components/MultiValueRemove.tsx

@@ -0,0 +1,24 @@
+import { AiOutlineClose } from "@react-icons/all-files/ai/AiOutlineClose";
+import cx from "classnames";
+import React from "react";
+import { MultiValueRemoveProps } from "react-select";
+import { OptionTypeBase } from "../types";
+import css from "./index.module.css";
+
+export default function MultiValueRemove<
+  T,
+  OptionType extends OptionTypeBase<T>,
+  IsMulti extends boolean,
+>(props: MultiValueRemoveProps<OptionType, IsMulti> & { blue?: boolean }) {
+  return (
+    <div
+      {...props.innerProps}
+      className={cx(css.multiValueRemove, {
+        [css.blueIndicator]: !!props.blue,
+      })}
+      aria-label={`remove ${props.data.label}`}
+    >
+      <AiOutlineClose />
+    </div>
+  );
+}

packages/components/src/FormSelect/components/index.module.css

@@ -0,0 +1,47 @@
+.dropdownIndicator {
+  @apply mr-3;
+
+  &:hover {
+    @apply text-button-2;
+  }
+}
+
+.clearIndicator {
+  @apply text-ld-darkgrey mr-3;
+
+  &:hover {
+    @apply text-ld-darkergrey;
+  }
+}
+
+.multiValueRemove {
+  @apply flex px-1 items-center rounded-sm text-primary;
+
+  &:hover {
+    @apply text-acc-red;
+  }
+}
+
+.blueIndicator {
+  @apply text-link-1;
+
+  &:hover {
+    @apply text-link-2;
+  }
+}
+
+.whiteIndicator {
+  @apply text-white;
+
+  &:hover {
+    @apply text-white;
+  }
+}
+
+.withIconPath {
+  @apply flex items-center;
+
+  img {
+    @apply h-7 w-7 rounded-full mr-2;
+  }
+}

packages/components/src/FormSelect/components/index.tsx

@@ -0,0 +1,48 @@
+import cx from "classnames";
+import React from "react";
+import { GroupBase, SelectComponentsConfig } from "react-select";
+import { Option, OptionTypeBase } from "../types";
+import Clear from "./Clear";
+import Dropdown from "./Dropdown";
+import MultiValueRemove from "./MultiValueRemove";
+import css from "./index.module.css";
+
+type Components<Option, IsMulti extends boolean> =
+  | Partial<SelectComponentsConfig<Option, IsMulti, GroupBase<Option>>>
+  | undefined;
+
+export function getComponents<
+  T,
+  OptionType extends OptionTypeBase<T>,
+  IsMulti extends boolean,
+>(
+  components?: Components<OptionType, IsMulti>,
+  blue?: boolean,
+  light?: boolean,
+): Components<OptionType, IsMulti> {
+  return {
+    ...components,
+    IndicatorSeparator: () => null,
+    DropdownIndicator: props => (
+      <Dropdown {...props} blue={blue} light={light} />
+    ),
+    ClearIndicator: props => <Clear {...props} blue={blue} />,
+    MultiValueRemove: props => <MultiValueRemove {...props} blue={blue} />,
+  };
+}
+
+export function formatOptionLabel<T>(option: Option<T>): React.ReactNode {
+  if (!option.icon && !option.details && !option.iconPath) {
+    return option.label;
+  }
+  return React.createElement(
+    "div",
+    {},
+    <span className={cx({ [css.withIconPath]: !!option.iconPath })}>
+      {option.iconPath && <img src={option.iconPath} alt={option.label} />}
+      {option.icon}
+      <span>{option.label}</span>
+      {option.details}
+    </span>,
+  );
+}

packages/components/src/FormSelect/index.module.css

@@ -13,51 +13,3 @@
 .smallLabel {
   @apply text-sm;
 }
-
-.dropdownIndicator {
-  @apply mr-3;
-
-  &:hover {
-    @apply text-button-2;
-  }
-}
-
-.clearIndicator {
-  @apply text-ld-darkgrey mr-3;
-
-  &:hover {
-    @apply text-ld-darkergrey;
-  }
-}
-
-.multiValueRemove {
-  @apply flex px-1 items-center rounded-sm text-primary;
-
-  &:hover {
-    @apply text-acc-red;
-  }
-}
-
-.blueIndicator {
-  @apply text-link-1;
-
-  &:hover {
-    @apply text-link-2;
-  }
-}
-
-.whiteIndicator {
-  @apply text-white;
-
-  &:hover {
-    @apply text-white;
-  }
-}
-
-.withIconPath {
-  @apply flex items-center;
-
-  img {
-    @apply h-7 w-7 rounded-full mr-2;
-  }
-}