-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor
QueryControls component to TypeScript (#46721)
* Begin conversion of QueryControls to TypeScript * Remove the extra value properties * Fix failing unit test * Create a TermsWithChildren type * Change the id to a string * Make onCategoryChange an intersection type * Shorten the JSDoc lines * Correct the React import * Make the properties of QueryControlsProps optional * Alphabetize types.ts * Fix the suggestions * Rename Term to Entity It can also be an author, so Term isn't right. * Fix the type of categorySuggestions * Correct the JSDoc summary for QueryControls * Make SelectControl accept a number * Change the order of number and string * Empty commit to trigger CI/CD * Remove needless change of id type * Update README.md based on types.ts * Let TS infer the return type of buildTermsTree() * Change array to object, as that's what categorySuggestions is * Add a CHANGELOG entry * Add basic stories for QueryControls * Correct the type for selectedCategories * Correct the type of categorySuggestions * Update the types in README.md * Commit Marco's suggestion: Update packages/components/src/query-controls/terms.ts Co-authored-by: Marco Ciampini <[email protected]> * Add hideCancelButton back in * Revert change to SelectControl and TreeSelect, instead change what's passed to TreeSelect * Revert README.md change to select-control * Commit Marco's suggestions for flatTerms verbatim * Commit Marco's suggestion for parameters * Remove fallback to '' * Save the author as a Number * Fix the order and orderBy types * Alphabetize the QueryControls props * Fix unit tests for the ID being a string * Disable controls for values that you can change via the UI For other components that you can control via the UI like RangeControl, the value control is disabled. https://github.com/WordPress/gutenberg/blob/a35b3f245a9672e2a276d8c4c1785f42b3342f84/packages/components/src/range-control/stories/index.tsx#L46 * Apply Marco's suggestion for selected*Id * Commit Marco's suggestion to prevent type casting * Part 1: Commit Marco's changes that handle multiple types * Part 2: Commit Marco's change that handle multiple types #46721 (comment) * Update README.md for Marco's changes * Remove Category type entirely, replace with Entity intersection * Make the category name optional * Remove the name from selectedCategories in the unit test * Remove needless casting * Commit Marco's formatting diff #46721 (comment) * Commit Marco's diff verbatim to fix the types #46721 (comment) * Update README.md for categorySuggestions * Move CHANGELOG entry to Unreleased * Marco's diff: Update packages/components/src/query-controls/README.md Co-authored-by: Marco Ciampini <[email protected]> * Marco's diff for types.ts DocBlocks #46721 (comment) * Marco's update to types.ts and README.md #46721 (comment) Co-authored-by: Marco Ciampini <[email protected]>
- Loading branch information
Showing
14 changed files
with
775 additions
and
293 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { buildTermsTree } from './terms'; | ||
| import TreeSelect from '../tree-select'; | ||
| import type { TreeSelectProps } from '../tree-select/types'; | ||
| import type { AuthorSelectProps } from './types'; | ||
|
|
||
| export default function AuthorSelect( { | ||
| label, | ||
| noOptionLabel, | ||
| authorList, | ||
| selectedAuthorId, | ||
| onChange: onChangeProp, | ||
| }: AuthorSelectProps ) { | ||
| if ( ! authorList ) return null; | ||
| const termsTree = buildTermsTree( authorList ); | ||
| return ( | ||
| <TreeSelect | ||
| { ...{ | ||
| label, | ||
| noOptionLabel, | ||
| // Since the `multiple` attribute is not passed to `TreeSelect`, it is | ||
| // safe to assume that the argument of `onChange` cannot be `string[]`. | ||
| // The correct solution would be to type `SelectControl` better, so that | ||
| // the type of `value` and `onChange` vary depending on `multiple`. | ||
| onChange: onChangeProp as TreeSelectProps[ 'onChange' ], | ||
| } } | ||
| tree={ termsTree } | ||
| selectedId={ | ||
| selectedAuthorId !== undefined | ||
| ? String( selectedAuthorId ) | ||
| : undefined | ||
| } | ||
| /> | ||
| ); | ||
| } |
This file was deleted.
Oops, something went wrong.
46 changes: 46 additions & 0 deletions
46
packages/components/src/query-controls/category-select.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { buildTermsTree } from './terms'; | ||
| import TreeSelect from '../tree-select'; | ||
| import type { TreeSelectProps } from '../tree-select/types'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useMemo } from '@wordpress/element'; | ||
| import type { CategorySelectProps } from './types'; | ||
|
|
||
| export default function CategorySelect( { | ||
| label, | ||
| noOptionLabel, | ||
| categoriesList, | ||
| selectedCategoryId, | ||
| onChange: onChangeProp, | ||
| ...props | ||
| }: CategorySelectProps ) { | ||
| const termsTree = useMemo( () => { | ||
| return buildTermsTree( categoriesList ); | ||
| }, [ categoriesList ] ); | ||
|
|
||
| return ( | ||
| <TreeSelect | ||
| { ...{ | ||
| label, | ||
| noOptionLabel, | ||
| // Since the `multiple` attribute is not passed to `TreeSelect`, it is | ||
| // safe to assume that the argument of `onChange` cannot be `string[]`. | ||
| // The correct solution would be to type `SelectControl` better, so that | ||
| // the type of `value` and `onChange` vary depending on `multiple`. | ||
| onChange: onChangeProp as TreeSelectProps[ 'onChange' ], | ||
| } } | ||
| tree={ termsTree } | ||
| selectedId={ | ||
| selectedCategoryId !== undefined | ||
| ? String( selectedCategoryId ) | ||
| : undefined | ||
| } | ||
| { ...props } | ||
| /> | ||
| ); | ||
| } |
Oops, something went wrong.