fix(common): check all/none when available

Author: rvsia

packages/common/src/select/select.js

@@ -8,17 +8,45 @@ import fnToString from '../utils/fn-to-string';
 import reducer from './reducer';
 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 getSelectValue = (stateValue, simpleValue, isMulti, allOptions) => {
+  let enhancedValue = stateValue;
 
-const handleSelectChange = (option, simpleValue, isMulti, onChange, allOptions) => {
-  const sanitizedOption = !option && isMulti ? [] : option;
+  let hasSelectAll = isMulti && allOptions.find(({ selectAll }) => selectAll);
+  let hasSelectNone = isMulti && allOptions.find(({ selectNone }) => selectNone);
 
-  if (isMulti && option.find(({ selectAll }) => selectAll)) {
-    return onChange(allOptions.filter(({ selectAll }) => !selectAll).map(({ value }) => value));
+  if (hasSelectAll || hasSelectNone) {
+    enhancedValue = enhancedValue || [];
+    const optionsLength = allOptions.filter(({ selectAll, selectNone }) => !selectAll && !selectNone).length;
+
+    const selectedAll = optionsLength === enhancedValue.length;
+    const selectedNone = enhancedValue.length === 0;
+
+    enhancedValue = [
+      ...enhancedValue,
+      ...(hasSelectAll && selectedAll ? [simpleValue ? hasSelectAll.value : hasSelectAll] : []),
+      ...(hasSelectNone && selectedNone ? [simpleValue ? hasSelectNone.value : hasSelectNone] : [])
+    ];
   }
 
-  if (isMulti && option.find(({ selectNone }) => selectNone)) {
+  return simpleValue ? allOptions.filter(({ value }) => (isMulti ? enhancedValue.includes(value) : isEqual(value, enhancedValue))) : enhancedValue;
+};
+
+const handleSelectChange = (option, simpleValue, isMulti, onChange, allOptions, removeSelectAll, removeSelectNone) => {
+  let enhanceOption = option;
+
+  if (removeSelectNone) {
+    enhanceOption = enhanceOption.filter(({ selectNone }) => !selectNone);
+  } else if (removeSelectAll) {
+    enhanceOption = enhanceOption.filter(({ selectAll }) => !selectAll);
+  }
+
+  const sanitizedOption = !enhanceOption && isMulti ? [] : enhanceOption;
+
+  if (isMulti && enhanceOption.find(({ selectAll }) => selectAll)) {
+    return onChange(allOptions.filter(({ selectAll, selectNone }) => !selectAll && !selectNone).map(({ value }) => value));
+  }
+
+  if (isMulti && enhanceOption.find(({ selectNone }) => selectNone)) {
     return onChange([]);
   }
 
@@ -145,6 +173,10 @@ const Select = ({
 
   const selectValue = pluckSingleValue ? (isMulti ? value : Array.isArray(value) && value[0] ? value[0] : value) : value;
 
+  const filteredLength = state.options.filter(({ selectAll, selectNone }) => !selectAll && !selectNone).length;
+  const shouldRemoveSelectAll = isMulti && state.options.find(({ selectAll }) => selectAll) && selectValue.length === filteredLength;
+  const shouldRemoveSelectNone = isMulti && state.options.find(({ selectNone }) => selectNone) && selectValue.length === 0;
+
   return (
     <SelectComponent
       className={clsx(classNamePrefix, {
@@ -156,7 +188,7 @@ const Select = ({
       classNamePrefix={classNamePrefix}
       isMulti={isMulti}
       value={getSelectValue(selectValue, simpleValue, isMulti, state.options)}
-      onChange={(option) => handleSelectChange(option, simpleValue, isMulti, onChange, state.options)}
+      onChange={(option) => handleSelectChange(option, simpleValue, isMulti, onChange, state.options, shouldRemoveSelectAll, shouldRemoveSelectNone)}
       onInputChange={onInputChange}
       isFetching={Object.values(state.promises).some((value) => value)}
       noOptionsMessage={renderNoOptionsMessage()}