feat: remove react-windowed-select

nulogy · May 15, 2024 · e8f2204 · e8f2204
1 parent 750ca4f
commit e8f2204
Show file tree

Hide file tree

Showing 9 changed files with 221 additions and 197 deletions.
diff --git a/package.json b/package.json
@@ -142,6 +142,7 @@
     "@nulogy/tokens": "^5.4.0",
     "@styled-system/prop-types": "^5.1.4",
     "@styled-system/theme-get": "^5.1.2",
+    "@types/styled-system": "5.1.22",
     "body-scroll-lock": "^3.1.5",
     "core-js": "3",
     "create-react-context": "^0.3.0",
@@ -160,11 +161,9 @@
     "react-popper": "1.3.11",
     "react-popper-2": "npm:react-popper@2.2.4",
     "react-resize-detector": "^9.1.0",
-    "react-windowed-select": "^5.2.0",
-    "smoothscroll-polyfill": "^0.4.4",
     "react-select": "^5.8.0",
-    "styled-system": "^5.1.4",
-    "@types/styled-system": "5.1.22"
+    "smoothscroll-polyfill": "^0.4.4",
+    "styled-system": "^5.1.4"
   },
   "husky": {
     "hooks": {

diff --git a/src/AsyncSelect/AsyncSelect.tsx b/src/AsyncSelect/AsyncSelect.tsx
@@ -128,7 +128,6 @@ const AsyncSelect = forwardRef(
             onMenuClose={onMenuClose}
             menuPosition={menuPosition}
             onInputChange={onInputChange}
-            theme={theme as any}
             components={{
               Option: (props) => (
                 <SelectOption size={componentSize} {...props}>

diff --git a/src/AsyncSelect/AsyncSelectComponents.tsx b/src/AsyncSelect/AsyncSelectComponents.tsx
@@ -10,7 +10,7 @@ import {
   MultiValueProps,
 } from "react-select";
 import { components, GroupBase } from "react-select";
-import { OptionProps } from "react-windowed-select";
+import { OptionProps } from "react-select";
 import { ComponentSize, useComponentSize } from "../NDSProvider/ComponentSizeContext";
 import { StyledOption } from "../Select/SelectOption";
 

diff --git a/src/Select/Select.story.tsx b/src/Select/Select.story.tsx
@@ -1,16 +1,17 @@
-import React, { useEffect, useState, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { action } from "@storybook/addon-actions";
 import styled from "styled-components";
-import { text, boolean, select } from "@storybook/addon-knobs";
-import { GroupBase, OptionProps } from "react-windowed-select";
-import { Button, Heading2, Select, SelectOption } from "../index";
+import { boolean, select, text } from "@storybook/addon-knobs";
+import { PropsValue } from "react-select";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
-import { NDSSelectProps } from "./Select";
+import { Button, Heading2, SelectOption } from "../index";
+import Select, { NDSOption, NDSOptionValue, NDSSelectProps } from "./Select";
+import { SelectOptionProps } from "./SelectOption";
 
 const errorList = ["Error message 1", "Error message 2"];
 
-const options = [
+const options: NDSOption[] = [
   { value: "accepted", label: "Accepted" },
   { value: "assigned", label: "Assigned to a line" },
   { value: "hold", label: "On hold" },
@@ -54,17 +55,13 @@ const getPhotos = async () => {
   // returns 5000 items
   const data = await fetch("https://jsonplaceholder.typicode.com/photos");
   const json = await data.json();
-  const results = json.map(({ title, id }) => ({
+  return json.map(({ title, id }) => ({
     label: title,
     value: id,
   }));
-  return results;
 };
 
-const SelectWithManyOptions = <Option, IsMulti extends boolean, Group extends GroupBase<Option>>({
-  multiselect,
-  labelText,
-}: Pick<NDSSelectProps<Option, IsMulti, Group>, "multiselect" | "labelText">) => {
+const SelectWithManyOptions = ({ multiselect, labelText, ...props }: Partial<NDSSelectProps>) => {
   const [photoList, setPhotoList] = useState([]);
 
   const setOptions = async () => {
@@ -76,35 +73,46 @@ const SelectWithManyOptions = <Option, IsMulti extends boolean, Group extends Gr
     setOptions();
   }, []);
 
-  return <Select multiselect={multiselect} options={photoList} labelText={labelText} />;
+  return <Select multiselect={multiselect} options={photoList} labelText={labelText} {...props} />;
 };
 
-function SelectWithState<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
-  props: NDSSelectProps<Option, IsMulti, Group>
-) {
-  const [selectedValue, setSelectedValue] = useState("");
+type SelectWithStateProps = NDSSelectProps & {
+  selectedValue: string;
+};
+
+class SelectWithState extends React.Component<SelectWithStateProps, { selectedValue: PropsValue<NDSOptionValue> }> {
+  constructor(props) {
+    super(props);
 
-  function handleChange(selectedValue) {
-    setSelectedValue(selectedValue);
+    this.state = { selectedValue: "" };
+    this.handleChange = this.handleChange.bind(this);
+    this.clearSelection = this.clearSelection.bind(this);
   }
 
-  function clearSelection() {
-    setSelectedValue("");
+  handleChange(selectedValue: PropsValue<NDSOptionValue>) {
+    this.setState({ selectedValue });
   }
 
-  return (
-    <Flex flexDirection="column" gap="x2" alignItems="flex-start">
-      <Select
-        className="Select"
-        classNamePrefix="SelectTest"
-        onChange={handleChange}
-        value={selectedValue}
-        options={options}
-        {...props}
-      />
-      <Button onClick={clearSelection}>Clear selection</Button>
-    </Flex>
-  );
+  clearSelection() {
+    this.setState({ selectedValue: "" });
+  }
+
+  render() {
+    const { selectedValue } = this.state;
+    return (
+      <Flex flexDirection="column" gap="x2" alignItems="flex-start">
+        <Select
+          className="Select"
+          classNamePrefix="SelectTest"
+          onChange={this.handleChange}
+          value={selectedValue}
+          options={options}
+          {...this.props}
+        />
+        <Button onClick={this.clearSelection}>Clear selection</Button>
+      </Flex>
+    );
+  }
 }
 
 export default {
@@ -120,7 +128,6 @@ export const _Select = () => (
     closeMenuOnSelect={boolean("closeMenuOnSelect", true)}
     disabled={boolean("disabled", false)}
     defaultValue={select("defaultValue", [undefined, ...options.map(({ value }) => value)], undefined)}
-    error={boolean("error", false)}
     errorMessage={text("errorMessage", "")}
     labelText={text("labelText", "Inventory Status")}
     helpText={text("helpText", undefined)}
@@ -149,7 +156,7 @@ export const WithDifferentSizes = () => {
       <Heading2>Standard</Heading2>
       <Flex gap="x2" minHeight="360px">
         <Select
-          initialIsOpen
+          defaultMenuIsOpen
           placeholder="Please select inventory status"
           onChange={action("selection changed")}
           onBlur={action("blurred")}
@@ -159,7 +166,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="medium"
-          initialIsOpen
+          defaultMenuIsOpen
           placeholder="Please select inventory status"
           onChange={action("selection changed")}
           onBlur={action("blurred")}
@@ -169,7 +176,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="large"
-          initialIsOpen
+          defaultMenuIsOpen
           placeholder="Please select inventory status"
           onChange={action("selection changed")}
           onBlur={action("blurred")}
@@ -182,7 +189,7 @@ export const WithDifferentSizes = () => {
       <Heading2>Multi-select</Heading2>
       <Flex gap="x2" alignItems="flex-start">
         <Select
-          initialIsOpen
+          defaultMenuIsOpen
           defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
           noOptionsMessage={() => "No options"}
           placeholder="Please select inventory status"
@@ -192,7 +199,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="medium"
-          initialIsOpen
+          defaultMenuIsOpen
           defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
           noOptionsMessage={() => "No options"}
           placeholder="Please select inventory status"
@@ -202,7 +209,7 @@ export const WithDifferentSizes = () => {
         />
         <Select
           size="large"
-          initialIsOpen
+          defaultMenuIsOpen
           defaultValue={[partnerCompanyName[0].value, partnerCompanyName[2].value]}
           noOptionsMessage={() => "No options"}
           placeholder="Please select inventory status"
@@ -263,7 +270,12 @@ WithAnOptionSelected.story = {
 };
 
 export const WithState = () => (
-  <SelectWithState placeholder="Please select inventory status" options={options} labelText="Inventory status" />
+  <SelectWithState
+    selectedValue="foo"
+    placeholder="Please select inventory status"
+    options={options}
+    labelText="Inventory status"
+  />
 );
 
 WithState.story = {
@@ -557,27 +569,27 @@ export const WithFetchedOptions = () => (
   </Box>
 );
 
-export const WithCustomOptionComponent = () => {
-  const Indicator = styled.span(() => ({
-    borderRadius: "25%",
-    background: "green",
-    lineHeight: "0",
-    display: "inline-block",
-    width: "10px",
-    height: "10px",
-    marginRight: "5px",
-  }));
-
-  const CustomOption = ({ children, ...props }: OptionProps) => {
-    const newChildren = (
-      <>
-        <Indicator />
-        {children}
-      </>
-    );
-    return <SelectOption {...props}>{newChildren}</SelectOption>;
-  };
+const Indicator = styled.span(() => ({
+  borderRadius: "25%",
+  background: "green",
+  lineHeight: "0",
+  display: "inline-block",
+  width: "10px",
+  height: "10px",
+  marginRight: "5px",
+}));
+
+const CustomOption = ({ children, ...props }: SelectOptionProps) => {
+  const newChildren = (
+    <>
+      <Indicator />
+      {children}
+    </>
+  );
+  return <SelectOption {...props}>{newChildren}</SelectOption>;
+};
 
+export const WithCustomOptionComponent = () => {
   return (
     <>
       <Box position="relative" overflow="hidden" width="300px" height="600px">
@@ -636,23 +648,3 @@ export const WithTopMenuPlacement = () => {
 UsingRefToControlFocus.story = {
   name: "using ref to control focus",
 };
-
-const CustomOption = (props) => {
-  return <SelectOption {...props}>{props.selectProps.myCustomProp}</SelectOption>;
-};
-
-const CustomSingleValue = ({ innerProps, ...props }) => {
-  return <div {...innerProps}>{props.selectProps.myCustomProp}</div>;
-};
-
-export const WithCustomProps = () => {
-  return (
-    <>
-      <Select
-        options={[{ value: "accepted", label: "Accepted" }]}
-        myCustomProp="custom prop value"
-        components={{ Option: CustomOption, SingleValue: CustomSingleValue }}
-      />
-    </>
-  );
-};