trying to fix displaying components after selection

microsoft · Sep 22, 2024 · b71a37c · b71a37c
1 parent 053589d
commit b71a37c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/packages/react-components/react-components/stories/ComponentSelector/SelectionCard.tsx b/packages/react-components/react-components/stories/ComponentSelector/SelectionCard.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { makeStyles, Button, Caption1, tokens, Text, Checkbox } from '@fluentui/react-components';
 import { MoreHorizontal20Regular } from '@fluentui/react-icons';
 import { Card, CardHeader, CardPreview, CardProps } from '@fluentui/react-components';
+import { stat } from 'fs';
 
 const resolveAsset = (asset: string) => {
   const ASSET_URL = 'https://fluent2websitecdn.azureedge.net/cdn/';
@@ -62,6 +63,8 @@ export const SelectionCard = props => {
   const onSelectedCardChange = React.useCallback(
     (_, state) => {
       setCheckboxState(state, setSelected);
+      console.log('------- onchange called');
+      state && state.checked && console.log('card state', state.checked);
       props.onChange(_, state, props.name);
     },
     [setCheckboxState],

diff --git a/packages/react-components/react-components/stories/ComponentSelector/Selector.stories.tsx b/packages/react-components/react-components/stories/ComponentSelector/Selector.stories.tsx
@@ -338,6 +338,8 @@ export const Selector = () => {
     console.log(`--------- get component called`);
     const suitableComponents: any[] = [];
 
+    console.log(`selectedComponents: ${selectedComponents}`);
+
     if (selectedComponents && selectedComponents.length > 0) {
       selectedComponents.forEach(componentName => {
         const component = getComponentByName(componentName);
@@ -393,9 +395,17 @@ export const Selector = () => {
   };
 
   const onSelectionChange = (event, data, name) => {
-    if (!!data.selected) {
+    if (data?.checked === undefined) {
+      console.log(`onSelectionChange undefined`);
+      console.log(`onSelectionChange: undefined: selectedComponents: ${selectedComponents}`);
+      return;
+    }
+    if (data.checked) {
+      console.log(`onSelectionChange: TRUE: selectedComponents: ${selectedComponents}`);
+      console.log(`onSelectionChange: TRUE: name : ${name}`);
       setSelectedComponents([...selectedComponents, name]);
     } else {
+      console.log(`onSelectionChange: FALSE:  ${name}`);
       setSelectedComponents(selectedComponents.filter(component => component !== name));
     }
   };
@@ -461,9 +471,9 @@ export const Selector = () => {
       setRadioItems(anotherNewArray);
     };
 
-    radioItems.forEach(item => {
-      console.log(`STATE: Radio items: ${item.value}`);
-    });
+    // radioItems.forEach(item => {
+    //   console.log(`STATE: Radio items: ${item.value}`);
+    // });
 
     const allQuestions = getAllQuestions(selectedComponents, questions);
 

diff --git a/...act-components/react-components/stories/ComponentSelector/components-definitions/index.js b/...act-components/react-components/stories/ComponentSelector/components-definitions/index.js
@@ -30,3 +30,6 @@ export { default as TreeSelectionDef } from './TreeSelection.json';
 export { default as TabListDef } from './TabList.json';
 
 export { default as GroupsDef } from './Groups.json';
+
+export { default as TooltipDef } from './Tooltip.json';
+export { default as InfoLabelDef } from './InfoLabel.json';