selectable changes

elastic · Nov 24, 2020 · 6dfb861 · 6dfb861
1 parent d5f5d6f
commit 6dfb861
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 11 deletions.
diff --git a/src/components/index.js b/src/components/index.js
@@ -288,6 +288,7 @@ export {
   EuiSelectableMessage,
   EuiSelectableSearch,
   EuiSelectableTemplateSitewide,
+  euiSelectableTemplateSitewideRenderOptions,
 } from './selectable';
 
 export { EuiSideNav } from './side_nav';

diff --git a/src/components/selectable/index.ts b/src/components/selectable/index.ts
@@ -31,4 +31,5 @@ export {
   EuiSelectableTemplateSitewideProps,
   EuiSelectableTemplateSitewideOption,
   EuiSelectableTemplateSitewideMetaData,
+  euiSelectableTemplateSitewideRenderOptions,
 } from './selectable_templates';
diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx
@@ -136,6 +136,11 @@ export type EuiSelectableProps<T = {}> = CommonProps &
      * or a node to replace the whole content.
      */
     emptyMessage?: ReactElement | string;
+    /**
+     * Control whether or not options get filtered internally or if consumer will filter
+     * Default: false
+     */
+    isPreFiltered?: boolean;
   };
 
 export interface EuiSelectableState<T> {
@@ -153,18 +158,23 @@ export class EuiSelectable<T = {}> extends Component<
     options: [],
     singleSelection: false,
     searchable: false,
+    isPreFiltered: false,
   };
   private containerRef = createRef<HTMLDivElement>();
   private optionsListRef = createRef<EuiSelectableList<T>>();
   rootId = htmlIdGenerator();
   constructor(props: EuiSelectableProps<T>) {
     super(props);
 
-    const { options, singleSelection } = props;
+    const { options, singleSelection, isPreFiltered } = props;
 
     const initialSearchValue = '';
 
-    const visibleOptions = getMatchingOptions<T>(options, initialSearchValue);
+    const visibleOptions = getMatchingOptions<T>(
+      options,
+      initialSearchValue,
+      isPreFiltered
+    );
 
     // ensure that the currently selected single option is active if it is in the visibleOptions
     const selectedOptions = options.filter((option) => option.checked);
@@ -187,10 +197,14 @@ export class EuiSelectable<T = {}> extends Component<
     nextProps: EuiSelectableProps<T>,
     prevState: EuiSelectableState<T>
   ) {
-    const { options } = nextProps;
+    const { options, isPreFiltered } = nextProps;
     const { activeOptionIndex, searchValue } = prevState;
 
-    const matchingOptions = getMatchingOptions<T>(options, searchValue);
+    const matchingOptions = getMatchingOptions<T>(
+      options,
+      searchValue,
+      isPreFiltered
+    );
 
     const stateUpdate = { visibleOptions: matchingOptions, activeOptionIndex };
 
@@ -349,15 +363,23 @@ export class EuiSelectable<T = {}> extends Component<
   };
 
   onOptionClick = (options: Array<EuiSelectableOption<T>>) => {
+    const { isPreFiltered, onChange, searchProps } = this.props;
+
     this.setState((state) => ({
-      visibleOptions: getMatchingOptions<T>(options, state.searchValue),
+      visibleOptions: getMatchingOptions<T>(
+        options,
+        state.searchValue,
+        isPreFiltered
+      ),
       activeOptionIndex: this.state.activeOptionIndex,
     }));
-    if (this.props.onChange) {
-      this.props.onChange(options);
+
+    if (onChange) {
+      onChange(options);
     }
-    if (this.props.searchProps && this.props.searchProps.onChange) {
-      this.props.searchProps.onChange(
+
+    if (searchProps && searchProps.onChange) {
+      searchProps.onChange(
         { ...this.state.visibleOptions },
         this.state.searchValue
       );
@@ -384,6 +406,7 @@ export class EuiSelectable<T = {}> extends Component<
       loadingMessage,
       noMatchesMessage,
       emptyMessage,
+      isPreFiltered,
       ...rest
     } = this.props;
 
@@ -556,6 +579,7 @@ export class EuiSelectable<T = {}> extends Component<
             listId={this.optionsListRef.current ? listId : undefined} // Only pass the listId if it exists on the page
             aria-activedescendant={makeOptionId(activeOptionIndex)} // the current faux-focused option
             placeholder={placeholderName}
+            isPreFiltered={isPreFiltered ?? false}
             {...(searchHasAccessibleName
               ? searchAccessibleName
               : { 'aria-label': placeholderName })}

diff --git a/src/components/selectable/selectable_search/selectable_search.tsx b/src/components/selectable/selectable_search/selectable_search.tsx
@@ -42,6 +42,7 @@ export type EuiSelectableSearchProps<T> = Omit<
      * The id of the visible list to create the appropriate aria controls
      */
     listId?: string;
+    isPreFiltered: boolean;
   };
 
 export interface EuiSelectableSearchState {
@@ -68,7 +69,8 @@ export class EuiSelectableSearch<T> extends Component<
     const { searchValue } = this.state;
     const matchingOptions = getMatchingOptions<T>(
       this.props.options,
-      searchValue
+      searchValue,
+      this.props.isPreFiltered
     );
     this.props.onChange(matchingOptions, searchValue);
   }
@@ -78,7 +80,8 @@ export class EuiSelectableSearch<T> extends Component<
       this.setState({ searchValue: value }, () => {
         const matchingOptions = getMatchingOptions<T>(
           this.props.options,
-          value
+          value,
+          this.props.isPreFiltered
         );
         this.props.onChange(matchingOptions, value);
       });
@@ -93,6 +96,7 @@ export class EuiSelectableSearch<T> extends Component<
       defaultValue,
       listId,
       placeholder,
+      isPreFiltered,
       ...rest
     } = this.props;