feat(common): allow to select all/none in the select options

Author: rvsia

packages/common/src/select/select.js

@@ -11,8 +11,17 @@ import useIsMounted from '../hooks/use-is-mounted';
 const getSelectValue = (stateValue, simpleValue, isMulti, allOptions) =>
   simpleValue ? allOptions.filter(({ value }) => (isMulti ? stateValue.includes(value) : isEqual(value, stateValue))) : stateValue;
 
-const handleSelectChange = (option, simpleValue, isMulti, onChange) => {
+const handleSelectChange = (option, simpleValue, isMulti, onChange, allOptions) => {
   const sanitizedOption = !option && isMulti ? [] : option;
+
+  if (isMulti && option.find(({ selectAll }) => selectAll)) {
+    return onChange(allOptions.filter(({ selectAll }) => !selectAll).map(({ value }) => value));
+  }
+
+  if (isMulti && option.find(({ selectNone }) => selectNone)) {
+    return onChange([]);
+  }
+
   return simpleValue
     ? onChange(isMulti ? sanitizedOption.map((item) => item.value) : sanitizedOption ? sanitizedOption.value : undefined)
     : onChange(sanitizedOption);
@@ -147,7 +156,7 @@ const Select = ({
       classNamePrefix={classNamePrefix}
       isMulti={isMulti}
       value={getSelectValue(selectValue, simpleValue, isMulti, state.options)}
-      onChange={(option) => handleSelectChange(option, simpleValue, isMulti, onChange)}
+      onChange={(option) => handleSelectChange(option, simpleValue, isMulti, onChange, state.options)}
       onInputChange={onInputChange}
       isFetching={Object.values(state.promises).some((value) => value)}
       noOptionsMessage={renderNoOptionsMessage()}

packages/common/src/tests/select/select.test.js

@@ -313,6 +313,76 @@ describe('Select test', () => {
       ]);
       expect(inputValue).toEqual(['d', 'c']);
     });
+
+    it('selects all values', async () => {
+      field = { ...field, isMulti: true, options: [{ label: 'Select all', selectAll: true }, ...field.options] };
+
+      await act(async () => {
+        wrapper = mount(
+          <FormRenderer
+            {...rendererProps}
+            schema={{
+              fields: [
+                {
+                  ...field,
+                  component: componentTypes.SELECT,
+                  name: 'select'
+                }
+              ]
+            }}
+          />
+        );
+      });
+      wrapper.update();
+
+      await act(async () => {
+        wrapper
+          .find('#onChange')
+          .props()
+          .onClick([{ label: 'Select all', selectAll: true }]);
+      });
+      wrapper.update();
+
+      expect(state.value).toEqual([
+        { label: 'Dogs', value: 'd' },
+        { label: 'Cats', value: 'c' },
+        { label: 'Hamsters', value: 'h' }
+      ]);
+      expect(inputValue).toEqual(['d', 'c', 'h']);
+    });
+
+    it('selects none', async () => {
+      field = { ...field, isMulti: true, options: [{ label: 'Select none', selectNone: true }, ...field.options], initialValue: ['d', 'c', 'h'] };
+
+      await act(async () => {
+        wrapper = mount(
+          <FormRenderer
+            {...rendererProps}
+            schema={{
+              fields: [
+                {
+                  ...field,
+                  component: componentTypes.SELECT,
+                  name: 'select'
+                }
+              ]
+            }}
+          />
+        );
+      });
+      wrapper.update();
+
+      await act(async () => {
+        wrapper
+          .find('#onChange')
+          .props()
+          .onClick([{ label: 'Select none', selectNone: true }]);
+      });
+      wrapper.update();
+
+      expect(state.value).toEqual([]);
+      expect(inputValue).toEqual('');
+    });
   });
 
   describe('loadOptions', () => {