diff --git a/blog-website/blog/2024-03-20-text-first-mui-tabs/index.md b/blog-website/blog/2024-03-20-text-first-mui-tabs/index.md index 446f2698b9d..1ecc530b6cc 100644 --- a/blog-website/blog/2024-03-20-text-first-mui-tabs/index.md +++ b/blog-website/blog/2024-03-20-text-first-mui-tabs/index.md @@ -2,7 +2,7 @@ slug: text-first-mui-tabs title: 'Text-first MUI Tabs' authors: johnnyreilly -tags: [react] +tags: [react, mui] image: ./title-image.png hide_table_of_contents: false description: 'Learn how to use the MUI tabs component in a text first way that remains strongly typed.' diff --git a/blog-website/blog/2024-05-25-mui-react-tree-view-check-children-uncheck-parents/index.md b/blog-website/blog/2024-05-25-mui-react-tree-view-check-children-uncheck-parents/index.md index 53ab36d240c..0b500ab42a1 100644 --- a/blog-website/blog/2024-05-25-mui-react-tree-view-check-children-uncheck-parents/index.md +++ b/blog-website/blog/2024-05-25-mui-react-tree-view-check-children-uncheck-parents/index.md @@ -2,7 +2,7 @@ slug: mui-react-tree-view-check-children-uncheck-parents title: 'MUI React Tree View: check children, uncheck parents' authors: johnnyreilly -tags: [react] +tags: [react, mui] image: ./title-image.png hide_table_of_contents: false description: 'Learn how to use the MUI treeview component with behaviour that selects child nodes when parents are select and deselects parent nodes when children are deselected.' @@ -97,13 +97,13 @@ function getParentNode( } function getAllParentIds(items: TreeViewBaseItem[], id: string) { - const parentIds: string[] = []; - let parent = getParentNode(items, id); - while (parent) { - parentIds.push(parent.id); - parent = getParentNode(items, parent.id); - } - return parentIds; + const parentIds: string[] = []; + let parent = getParentNode(items, id); + while (parent) { + parentIds.push(parent.id); + parent = getParentNode(items, parent.id); + } + return parentIds; } function getSelectedIdsAndChildrenIds( @@ -151,7 +151,7 @@ function determineIdsToSet( const isDeselectingNode = currentIds.length > newIds.length; if (isDeselectingNode) { const removed = currentIds.filter((id) => !newIds.includes(id))[0]; - + const parentIdsToRemove = getAllParentIds(items, removed); const childIdsToRemove = getSelectedIdsAndChildrenIds(items, [removed]); @@ -168,9 +168,7 @@ function determineIdsToSet( let parent = getParentNode(items, added); while (parent) { const childIds = parent.children?.map((node) => node.id) ?? []; - const allChildrenSelected = childIds.every((id) => - idsToSet.includes(id), - ); + const allChildrenSelected = childIds.every((id) => idsToSet.includes(id)); if (allChildrenSelected) { idsToSet.push(parent.id); parent = getParentNode(items, parent.id); diff --git a/blog-website/blog/2024-07-01-mui-react-tree-view-pass-data-to-treeitem/index.md b/blog-website/blog/2024-07-01-mui-react-tree-view-pass-data-to-treeitem/index.md index a6addfde848..0c8ef938da7 100644 --- a/blog-website/blog/2024-07-01-mui-react-tree-view-pass-data-to-treeitem/index.md +++ b/blog-website/blog/2024-07-01-mui-react-tree-view-pass-data-to-treeitem/index.md @@ -2,7 +2,7 @@ slug: mui-react-tree-view-pass-data-to-treeitem title: 'MUI React Tree View: pass data to TreeItem' authors: johnnyreilly -tags: [react] +tags: [react, mui] image: ./title-image.png hide_table_of_contents: false description: 'Learn how to pass arbitrary data to individual nodes in the MUI treeview component so individual nodes can be customised; for instance implementing a loader.' diff --git a/blog-website/blog/2024-10-07-static-typing-for-mui-react-data-grid-columns/index.md b/blog-website/blog/2024-10-07-static-typing-for-mui-react-data-grid-columns/index.md index 0ee7076a22c..5f2c57bc05a 100644 --- a/blog-website/blog/2024-10-07-static-typing-for-mui-react-data-grid-columns/index.md +++ b/blog-website/blog/2024-10-07-static-typing-for-mui-react-data-grid-columns/index.md @@ -2,7 +2,7 @@ slug: static-typing-for-mui-react-data-grid-columns title: 'Static Typing for MUI React Data Grid Columns' authors: johnnyreilly -tags: [typescript] +tags: [react, typescript, mui] image: ./title-image.png hide_table_of_contents: false description: 'The MUI React Data Grid can be used with static typing to ensure the columns you pass to the component are correct. This post will show you how to do that.' diff --git a/blog-website/blog/tags.yml b/blog-website/blog/tags.yml index 4a61efb31ff..924c3ffc72a 100644 --- a/blog-website/blog/tags.yml +++ b/blog-website/blog/tags.yml @@ -118,6 +118,11 @@ jsdoc: description: 'Type safety through JSDoc annotations.' permalink: /jsdoc +mui: + label: 'MUI' + description: 'The MUI / Material UI component library.' + permalink: /mui + node.js: label: 'Node.js' description: 'The Node.js runtime.'