integrate with collection hooks changes

Author: pan-kot

pages/property-filter/split-panel-app-layout-integration.page.tsx

@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState } from 'react';
+import React from 'react';
 import AppLayout from '~components/app-layout';
 import SplitPanel from '~components/split-panel';
 import Box from '~components/box';
 import Table from '~components/table';
-import PropertyFilter, { PropertyFilterProps } from '~components/property-filter';
+import PropertyFilter from '~components/property-filter';
 import Header from '~components/header';
 import Button from '~components/button';
 import ScreenshotArea from '../utils/screenshot-area';
@@ -36,24 +36,21 @@ export default function () {
         </Box>
       ),
       filteringProperties,
-      defaultQuery: { tokens: [{ propertyKey: 'averagelatency', operator: '!=', value: '30' }], operation: 'and' },
-    },
-    sorting: {},
-  });
-
-  // TODO: add collection-hooks support for nested queries
-  const [query, setQuery] = useState<PropertyFilterProps.Query>({
-    tokens: [],
-    tokenGroups: [
-      {
-        operation: 'and',
-        tokens: [
-          { propertyKey: 'averagelatency', operator: '>=', value: '30' },
-          { propertyKey: 'averagelatency', operator: '<', value: '60' },
+      defaultQuery: {
+        tokens: [],
+        tokenGroups: [
+          {
+            operation: 'or',
+            tokens: [
+              { propertyKey: 'state', operator: '=', value: '0' },
+              { propertyKey: 'state', operator: '=', value: '1' },
+            ],
+          },
         ],
+        operation: 'or',
       },
-    ],
-    operation: 'or',
+    },
+    sorting: {},
   });
 
   const filteringOptions = propertyFilterProps.filteringOptions.map(option => {
@@ -100,8 +97,6 @@ export default function () {
             filter={
               <PropertyFilter
                 {...propertyFilterProps}
-                query={query}
-                onChange={event => setQuery(event.detail)}
                 filteringOptions={filteringOptions}
                 virtualScroll={true}
                 countText={`${items.length} matches`}

src/property-filter/controller.ts

@@ -26,21 +26,23 @@ export const getQueryActions = (
   inputRef: React.RefObject<AutosuggestInputRef>
 ) => {
   const supportsGroups = !!query.tokenGroups;
-  const fireOnChange = (tokenGroups: readonly TokenGroup[], operation: JoinOperation) => {
+  const fireOnChange = (tokenGroups: readonly (Token | TokenGroup)[], operation: JoinOperation) => {
     if (supportsGroups) {
       fireNonCancelableEvent(onChange, { tokens: [], operation, tokenGroups });
     } else {
       const tokens: Token[] = [];
-      for (const group of tokenGroups) {
-        if ('operator' in group.tokens[0]) {
-          tokens.push(group.tokens[0]);
+      for (const tokenOrGroup of tokenGroups) {
+        if ('operation' in tokenOrGroup && 'operator' in tokenOrGroup.tokens[0]) {
+          tokens.push(tokenOrGroup.tokens[0]);
+        } else if ('operator' in tokenOrGroup) {
+          tokens.push(tokenOrGroup);
         }
       }
       fireNonCancelableEvent(onChange, { tokens, operation });
     }
   };
   const setToken = (index: number, newTokenGroup: TokenGroup) => {
-    const newTokens: TokenGroup[] = query.tokenGroups
+    const newTokens: (Token | TokenGroup)[] = query.tokenGroups
       ? [...query.tokenGroups]
       : query.tokens.map(t => ({ operation: 'and', tokens: [t] }));
     if (newTokens && index < newTokens.length) {
@@ -49,7 +51,7 @@ export const getQueryActions = (
     fireOnChange(newTokens, query.operation);
   };
   const removeToken = (index: number) => {
-    const newTokens: TokenGroup[] = query.tokenGroups
+    const newTokens: (Token | TokenGroup)[] = query.tokenGroups
       ? [...query.tokenGroups]
       : query.tokens.map(t => ({ operation: 'and', tokens: [t] }));
     newTokens.splice(index, 1);
@@ -61,14 +63,14 @@ export const getQueryActions = (
     inputRef.current?.focus({ preventDropdown: true });
   };
   const addToken = (newTokenGroup: TokenGroup) => {
-    const newTokens: TokenGroup[] = query.tokenGroups
+    const newTokens: (Token | TokenGroup)[] = query.tokenGroups
       ? [...query.tokenGroups]
       : query.tokens.map(t => ({ operation: 'and', tokens: [t] }));
     newTokens.push(newTokenGroup);
     fireOnChange(newTokens, query.operation);
   };
   const setOperation = (newOperation: JoinOperation) => {
-    const tokens: TokenGroup[] = query.tokenGroups
+    const tokens: (Token | TokenGroup)[] = query.tokenGroups
       ? [...query.tokenGroups]
       : query.tokens.map(t => ({ operation: 'and', tokens: [t] }));
     fireOnChange(tokens, newOperation);

src/property-filter/interfaces.ts

@@ -20,6 +20,7 @@ import {
   PropertyFilterProperty,
   PropertyFilterToken,
 } from '@cloudscape-design/collection-hooks';
+import { PropertyFilterQuery, PropertyFilterTokenGroup } from '@cloudscape-design/collection-hooks/cjs/interfaces';
 
 export interface PropertyFilterProps extends BaseComponentProps, ExpandToViewport, FormFieldControlProps {
   /**
@@ -212,6 +213,8 @@ export interface PropertyFilterProps extends BaseComponentProps, ExpandToViewpor
 
 export namespace PropertyFilterProps {
   export type Token = PropertyFilterToken;
+  export type TokenGroup = PropertyFilterTokenGroup;
+  export type Query = PropertyFilterQuery;
   export type JoinOperation = PropertyFilterOperation;
   export type ComparisonOperator = PropertyFilterOperator;
   export type ExtendedOperator<TokenValue> = PropertyFilterOperatorExtended<TokenValue>;
@@ -222,17 +225,6 @@ export namespace PropertyFilterProps {
   export type FilteringProperty = PropertyFilterProperty;
   export type FreeTextFiltering = PropertyFilterFreeTextFiltering;
 
-  export interface Query {
-    tokens: ReadonlyArray<PropertyFilterProps.Token>;
-    operation: PropertyFilterProps.JoinOperation;
-    tokenGroups?: ReadonlyArray<PropertyFilterProps.TokenGroup>;
-  }
-
-  export interface TokenGroup {
-    operation: PropertyFilterProps.JoinOperation;
-    tokens: ReadonlyArray<PropertyFilterProps.TokenGroup | PropertyFilterProps.Token>;
-  }
-
   export interface LoadItemsDetail {
     filteringProperty?: FilteringProperty;
     filteringOperator?: ComparisonOperator;