🎨(react) improve select mono-common code

- simplify the reading of the condition displaying the clear button - update CHANGELOG.md for release
openfun · Sep 24, 2024 · 9ef000c · 9ef000c
1 parent 6e9a8cd
commit 9ef000c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 25 deletions.
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @openfun/cunningham-react
 
+## 2.10.0
+
+### Minor Changes
+
+- 0b45f51: add async option fetching mode to select mono
+
 ## 2.9.4
 
 ### Patch Changes
@@ -425,6 +431,8 @@
 - 4ebbf16: Add component's tokens handling
 
 [unreleased]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]
+[2.10.0]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]
+[2.9.4]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]
 [2.9.3]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]
 [2.9.2]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]
 [2.9.1]: https://github.com/openfun/cunningham/compare/@openfun/[email protected]...@openfun/[email protected]

diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -93,6 +93,9 @@ export const SelectMonoAux = ({
   const labelProps = downshiftReturn.getLabelProps();
   const ref = useRef<HTMLDivElement>(null);
 
+  const isToReset =
+    !props.isLoading && clearable && !disabled && downshiftReturn.selectedItem;
+
   return (
     <>
       <Field state={state} {...props}>
@@ -138,31 +141,28 @@ export const SelectMonoAux = ({
               <div className="c__select__inner">
                 <div className="c__select__inner__value">{children}</div>
                 <div className="c__select__inner__actions">
-                  {!props.isLoading &&
-                    clearable &&
-                    !disabled &&
-                    downshiftReturn.selectedItem && (
-                      <>
-                        <Button
-                          color="tertiary-text"
-                          size="nano"
-                          aria-label={t(
-                            "components.forms.select.clear_button_aria_label",
-                          )}
-                          className="c__select__inner__actions__clear"
-                          onClick={(e) => {
-                            downshiftReturn.selectItem(null);
-                            if (typeof updateArrayOptions === "function") {
-                              updateArrayOptions(undefined);
-                            }
-                            e.stopPropagation();
-                          }}
-                          icon={<span className="material-icons">close</span>}
-                          type="button"
-                        />
-                        <div className="c__select__inner__actions__separator" />
-                      </>
-                    )}
+                  {isToReset && (
+                    <>
+                      <Button
+                        color="tertiary-text"
+                        size="nano"
+                        aria-label={t(
+                          "components.forms.select.clear_button_aria_label",
+                        )}
+                        className="c__select__inner__actions__clear"
+                        onClick={(e) => {
+                          downshiftReturn.selectItem(null);
+                          if (typeof updateArrayOptions === "function") {
+                            updateArrayOptions(undefined);
+                          }
+                          e.stopPropagation();
+                        }}
+                        icon={<span className="material-icons">close</span>}
+                        type="button"
+                      />
+                      <div className="c__select__inner__actions__separator" />
+                    </>
+                  )}
 
                   <Button
                     color="tertiary-text"