wip

openfun · Oct 6, 2023 · 1144775 · 1144775
1 parent 01aaed9
commit 1144775
Show file tree

Hide file tree

Showing 11 changed files with 290 additions and 98 deletions.
diff --git a/packages/react/src/components/Forms/Select/index.scss b/packages/react/src/components/Forms/Select/index.scss
@@ -274,7 +274,6 @@
 
         &__input {
           display: inline-grid;
-          border: 1px red solid;
 
           &::after,
           input {

diff --git a/packages/react/src/components/Forms/Select/index.tsx b/packages/react/src/components/Forms/Select/index.tsx
@@ -1,11 +1,27 @@
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { forwardRef, PropsWithChildren, ReactNode } from "react";
 import { SelectMulti } from ":/components/Forms/Select/multi";
-import { Option, SelectMono } from ":/components/Forms/Select/mono";
+import { SelectMono } from ":/components/Forms/Select/mono";
 import { FieldProps } from ":/components/Forms/Field";
 
 export * from ":/components/Forms/Select/mono";
 export * from ":/components/Forms/Select/multi";
 
+export type OptionWithRender = {
+  disabled?: boolean;
+  value: string;
+  label: string;
+  render: () => ReactNode;
+};
+
+export type Option =
+  | {
+      disabled?: boolean;
+      value?: string;
+      label: string;
+      render?: undefined;
+    }
+  | OptionWithRender;
+
 export interface SelectHandle {
   blur: () => void;
 }

diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -5,8 +5,8 @@ import { useCunningham } from ":/components/Provider";
 import { Field } from ":/components/Forms/Field";
 import { LabelledBox } from ":/components/Forms/LabelledBox";
 import { Button } from ":/components/Button";
-import { isOptionWithRender, Option } from ":/components/Forms/Select/mono";
-import { SelectProps } from ":/components/Forms/Select";
+import { Option, SelectProps } from ":/components/Forms/Select";
+import { isOptionWithRender } from ":/components/Forms/Select/utils";
 
 export function getOptionsFilter(inputValue?: string) {
   return (option: Option) => {

diff --git a/packages/react/src/components/Forms/Select/mono-searchable.tsx b/packages/react/src/components/Forms/Select/mono-searchable.tsx
@@ -15,7 +15,8 @@ import {
   SelectMonoAux,
   SubProps,
 } from ":/components/Forms/Select/mono-common";
-import { isOptionWithRender, SelectHandle } from ":/components/Forms/Select";
+import { SelectHandle } from ":/components/Forms/Select";
+import { isOptionWithRender } from ":/components/Forms/Select/utils";
 
 export const SelectMonoSearchable = forwardRef<SelectHandle, SubProps>(
   ({ showLabelWhenSelected = true, ...props }, ref) => {

diff --git a/packages/react/src/components/Forms/Select/mono-simple.tsx b/packages/react/src/components/Forms/Select/mono-simple.tsx
@@ -11,27 +11,8 @@ import {
   SelectMonoAux,
   SubProps,
 } from ":/components/Forms/Select/mono-common";
-import {
-  isOptionWithRender,
-  Option,
-  SelectHandle,
-} from ":/components/Forms/Select/index";
-
-const SelectedOption = ({
-  option,
-  showLabelWhenSelected = true,
-}: {
-  option: Option | undefined | null;
-  showLabelWhenSelected?: boolean;
-}) => {
-  if (!option) {
-    return null;
-  }
-  if (isOptionWithRender(option) && !showLabelWhenSelected) {
-    return option.render();
-  }
-  return <span>{option.label}</span>;
-};
+import { SelectHandle } from ":/components/Forms/Select";
+import { SelectedOption } from ":/components/Forms/Select/utils";
 
 export const SelectMonoSimple = forwardRef<SelectHandle, SubProps>(
   (props, ref) => {

diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx
@@ -19,7 +19,6 @@ import {
   expectOptionToBeDisabled,
   expectOptionToBeSelected,
   expectOptionToBeUnselected,
-  expectSelectedOptions,
 } from ":/components/Forms/Select/test-utils";
 import { Input } from ":/components/Forms/Input";
 
@@ -1850,7 +1849,6 @@ describe("<Select/>", () => {
 
       // Make sure the HTML content of the option is rendered.
       expect(valueRendered).toHaveTextContent("London");
-      screen.logTestingPlaygroundURL();
       within(valueRendered).getByRole("img", {
         name: "London flag",
       });

diff --git a/packages/react/src/components/Forms/Select/mono.tsx b/packages/react/src/components/Forms/Select/mono.tsx
@@ -1,56 +1,10 @@
-import React, { forwardRef, ReactNode, useEffect, useState } from "react";
+import React, { forwardRef, useEffect, useState } from "react";
 import { UseSelectStateChange } from "downshift";
 import { optionToValue, SubProps } from ":/components/Forms/Select/mono-common";
 import { SelectMonoSearchable } from ":/components/Forms/Select/mono-searchable";
 import { SelectMonoSimple } from ":/components/Forms/Select/mono-simple";
-import { SelectHandle, SelectProps } from ":/components/Forms/Select";
+import { Option, SelectHandle, SelectProps } from ":/components/Forms/Select";
 
-// export type Option = {
-//   disabled?: boolean;
-// } & (
-//   | { value: string; label: string; render: () => ReactNode }
-//   | { value?: string; label: string }
-// );
-
-export type OptionWithRender = {
-  disabled?: boolean;
-  value: string;
-  label: string;
-  render: () => ReactNode;
-};
-
-export type Option =
-  | {
-      disabled?: boolean;
-      value?: string;
-      label: string;
-      render?: undefined;
-    }
-  | OptionWithRender;
-
-const a: Option = {
-  disabled: true,
-  label: "coucou",
-};
-const b: Option = {
-  disabled: true,
-  label: "coucou",
-  value: "c",
-};
-const c: Option = {
-  disabled: true,
-  render: () => <div>Hi</div>,
-  label: "Hi",
-  value: "h",
-};
-
-export const isOptionWithRender = (
-  option: Option,
-): option is OptionWithRender => {
-  return (option as OptionWithRender).render !== undefined;
-};
-
-const z = c;
 export const SelectMono = forwardRef<SelectHandle, SelectProps>(
   (props, ref) => {
     const defaultSelectedItem = props.defaultValue

diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -5,13 +5,13 @@ import { Field } from ":/components/Forms/Field";
 import { LabelledBox } from ":/components/Forms/LabelledBox";
 import { Button } from ":/components/Button";
 import { useCunningham } from ":/components/Provider";
-import { isOptionWithRender, Option } from ":/components/Forms/Select/mono";
-import { SelectProps } from ":/components/Forms/Select";
+import { Option, SelectProps } from ":/components/Forms/Select";
 import {
   getOptionsFilter,
   optionToValue,
   renderOption,
 } from ":/components/Forms/Select/mono-common";
+import { SelectedOption } from ":/components/Forms/Select/utils";
 
 /**
  * This method returns a comparator that can be used to filter out options for multi select.
@@ -46,22 +46,6 @@ export interface SubProps extends SelectMultiProps {
   onSelectedItemsChange: (selectedItems: Option[]) => void;
 }
 
-const SelectedOption = ({
-  option,
-  showLabelWhenSelected = true,
-}: {
-  option: Option | undefined | null;
-  showLabelWhenSelected?: boolean;
-}) => {
-  if (!option) {
-    return null;
-  }
-  if (isOptionWithRender(option) && !showLabelWhenSelected) {
-    return option.render();
-  }
-  return <span>{option.label}</span>;
-};
-
 export const SelectMultiAux = ({
   options,
   labelAsPlaceholder,