fix(composer): Adding ability to deselect by click radio button (#351)

Co-authored-by: Emily Dodds <dodemily@amazon.com>
awslabs · Nov 10, 2022 · 8c402b7 · 8c402b7
1 parent 8458e50
commit 8c402b7
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 16 deletions.
diff --git a/packages/scene-composer/package.json b/packages/scene-composer/package.json
@@ -157,7 +157,7 @@
         "lines": 77.49,
         "statements": 76.63,
         "functions": 77.01,
-        "branches": 63.31,
+        "branches": 63.2,
         "branchesTrue": 100
       }
     }

diff --git a/packages/scene-composer/src/components/Tree/TreeItem.tsx b/packages/scene-composer/src/components/Tree/TreeItem.tsx
@@ -46,6 +46,7 @@ const TreeItemInner: FC<TreeItemInnerProps> = ({
 
   const toggle = useCallback(
     (e) => {
+      if (selected) setSelectedSceneNodeRef(undefined);
       return (children) =>
         children.every((child) => child === true) ? selectFromChildren() : onSelected(!selected, e);
     },

diff --git a/packages/scene-composer/src/components/Tree/__tests__/TreeItem.spec.tsx b/packages/scene-composer/src/components/Tree/__tests__/TreeItem.spec.tsx
@@ -8,17 +8,6 @@ jest.mock('react-dnd', () => ({
   useDrop: jest.fn(() => [1, useRef(2)]),
 }));
 
-jest.mock('@awsui/components-react', () => ({
-  Button: 'button',
-  // eslint-disable-next-line react/prop-types
-  Checkbox: ({ children, ...props }) => (
-    <div>
-      <input type='checkbox' {...props} />
-      {children}
-    </div>
-  ),
-}));
-
 describe('<TreeItem />', () => {
   (
     [
@@ -88,8 +77,9 @@ describe('<TreeItem />', () => {
               type="radio"
               value=""
             />
-            <button
+            <div
               class="tm-tree-item-expand-btn"
+              data-mocked="Button"
               iconname="treeview-collapse"
               variant="inline-icon"
             />
@@ -140,8 +130,9 @@ describe('<TreeItem />', () => {
               type="radio"
               value=""
             />
-            <button
+            <div
               class="tm-tree-item-expand-btn"
+              data-mocked="Button"
               iconname="treeview-expand"
               variant="inline-icon"
             />

diff --git a/packages/scene-composer/src/components/Tree/__tests__/__snapshots__/TreeItem.spec.tsx.snap b/packages/scene-composer/src/components/Tree/__tests__/__snapshots__/TreeItem.spec.tsx.snap
@@ -56,8 +56,9 @@ exports[`<TreeItem /> should render appropriate configuration "{"labelText":"Lab
         type="radio"
         value=""
       />
-      <button
+      <div
         class="tm-tree-item-expand-btn"
+        data-mocked="Button"
         iconname="treeview-expand"
         variant="inline-icon"
       />
@@ -104,8 +105,9 @@ exports[`<TreeItem /> should render appropriate configuration "{"labelText":"Lab
         type="radio"
         value=""
       />
-      <button
+      <div
         class="tm-tree-item-expand-btn"
+        data-mocked="Button"
         iconname="treeview-expand"
         variant="inline-icon"
       />