feat(react): allow to select & remove value items

p3ol · Sep 28, 2022 · fb59d2b · fb59d2b
1 parent a97b771
commit fb59d2b
Show file tree

Hide file tree

Showing 4 changed files with 148 additions and 7 deletions.
diff --git a/packages/react/lib/SelectField/index.js b/packages/react/lib/SelectField/index.js
@@ -48,6 +48,7 @@ const SelectField = forwardRef(({
   onBlur,
   onFocus,
   onKeyPress,
+  onKeyUp,
   onValidate = (val, { required, multiple }) => (
     (multiple && Array.isArray(val) && val.length > 0) ||
     (!multiple && !!val) ||
@@ -68,6 +69,7 @@ const SelectField = forwardRef(({
     search: '',
     searching: false,
     searchResults: null,
+    selectedItem: -1,
   });
 
   useImperativeHandle(ref, () => ({
@@ -78,6 +80,8 @@ const SelectField = forwardRef(({
     dirty: state.dirty,
     focused: state.focused,
     opened: state.opened,
+    focus,
+    blur,
     reset,
     isJunipero: true,
   }));
@@ -112,6 +116,7 @@ const SelectField = forwardRef(({
       value: state.value,
       valid: state.valid,
       dirty: true,
+      selectedItem: -1,
       ...resetSearch && { search: '', searchResults: null },
     });
     onChange?.({ value: parseValue(state.value), valid: state.valid });
@@ -207,13 +212,77 @@ const SelectField = forwardRef(({
   };
 
   const onKeyPress_ = e => {
-    if (e.key === 'Enter' && allowArbitraryItems) {
-      onSelectOption(state.search, { resetSearch: true });
+    if (disabled) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'Enter':
+        if (allowArbitraryItems) {
+          onSelectOption(state.search, { resetSearch: true });
+        }
+
+        break;
     }
 
     onKeyPress?.(e);
   };
 
+  const onKeyUp_ = e => {
+    if (disabled) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'Backspace':
+        if (state.selectedItem >= 0) {
+          onRemoveOption(state.value[state.selectedItem]);
+        } else {
+          dispatch({ selectedItem: state.value.length - 1 });
+        }
+
+        break;
+
+      case 'ArrowLeft':
+        if (state.selectedItem > 0) {
+          dispatch({ selectedItem: state.selectedItem - 1 });
+        } else if (state.selectedItem === -1 && !state.search) {
+          dispatch({ selectedItem: state.value.length - 1 });
+        }
+
+        break;
+
+      case 'ArrowRight':
+        if (state.selectedItem < state.value.length - 1) {
+          dispatch({ selectedItem: state.selectedItem + 1 });
+        } else if (state.selectedItem !== -1) {
+          dispatch({ selectedItem: -1 });
+        }
+
+        break;
+    }
+
+    onKeyUp?.(e);
+  };
+
+  const focus = () => {
+    if (multiple) {
+      searchInputRef.current?.focus();
+    } else {
+      dispatch({ focused: false });
+      dropdownRef.current?.open();
+    }
+  };
+
+  const blur = () => {
+    if (multiple) {
+      searchInputRef.current?.blur();
+    } else {
+      dispatch({ focused: false });
+      dropdownRef.current?.close();
+    }
+  };
+
   const reset = () => {
     dispatch({
       value: value ?? '',
@@ -320,7 +389,10 @@ const SelectField = forwardRef(({
           { hasTags() ? state.value.map((o, i) => (
             <Tag
               key={i}
-              className="info"
+              className={classNames(
+                'info',
+                { selected: i === state.selectedItem }
+              )}
               onDelete={onRemoveOption.bind(null, o)}
             >
               { parseTitle(o) }
@@ -337,6 +409,7 @@ const SelectField = forwardRef(({
               onFocus={onFocus_}
               onBlur={onBlur_}
               onKeyPress={onKeyPress_}
+              onKeyUp={onKeyUp_}
             />
           ) }
           <div className="icons">
@@ -384,6 +457,7 @@ SelectField.propTypes = {
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
   onKeyPress: PropTypes.func,
+  onKeyUp: PropTypes.func,
   onSearch: PropTypes.func,
   onValidate: PropTypes.func,
   parseItem: PropTypes.func,

diff --git a/packages/react/lib/SelectField/index.test.js b/packages/react/lib/SelectField/index.test.js
@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { render, act, fireEvent } from '@testing-library/react';
 
 import SelectField from './index';
 
@@ -28,4 +29,22 @@ describe('<SelectField />', () => {
     expect(container).toMatchSnapshot();
     unmount();
   });
+
+  it('should be invalid if validation fails', async () => {
+    const ref = createRef();
+    const { unmount, container, getByText } = render(
+      <SelectField
+        ref={ref}
+        placeholder="Name"
+        options={['Item 1', 'Item 2', 'Item 3']}
+        onValidate={() => false}
+        autoFocus
+      />
+    );
+
+    fireEvent.click(getByText('Item 1'));
+    await act(async () => { ref.current.blur(); });
+    expect(container).toMatchSnapshot();
+    unmount();
+  });
 });
diff --git a/packages/react/lib/SelectField/index.test.js.snap b/packages/react/lib/SelectField/index.test.js.snap
@@ -1,5 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<SelectField /> should be invalid if validation fails 1`] = `
+<div>
+  <div
+    class="junipero dropdown select-field dirty invalid"
+  >
+    <div
+      class="field dropdown-toggle"
+    >
+      <input
+        readonly=""
+        type="text"
+        value="Item 1"
+      />
+      <div
+        class="icons"
+      >
+        <svg
+          class="junipero icon remove"
+          height="10"
+          viewBox="0 0 9 10"
+          width="10"
+        >
+          <path
+            d="M8 1.5L1 8.5"
+          />
+          <path
+            d="M1 1.5L8 8.5"
+          />
+        </svg>
+        <svg
+          class="junipero icon arrows"
+          height="13"
+          viewBox="0 0 8 13"
+          width="8"
+        >
+          <path
+            d="M1 4.5L4 1.5L7 4.5"
+          />
+          <path
+            d="M1 8.5L4 11.5L7 8.5"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<SelectField /> should render 1`] = `
 <div>
   <div

diff --git a/packages/theme/lib/SelectField.sass b/packages/theme/lib/SelectField.sass
@@ -51,9 +51,9 @@
         opacity: 1
         user-select: none
 
-    .value
-      padding: 10px
-      min-height: 36px
+    .tag.selected
+      --background-color: var(--main-color)
+      --text-color: var(--junipero-seashell)
 
     .icons
       position: absolute