theme designer: fix tab states (#23729)

emmayjiang · web-flow · commit fe62c7fab798 · 2022-06-27T08:58:12.000-07:00
* add custom theme to export

* add typing, update format

* remove reducer

* preserve custom state
diff --git a/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx b/packages/react-components/theme-designer/src/components/Sidebar/EditTab.tsx
@@ -41,32 +41,25 @@ const useStyles = makeStyles({
 export interface EditTabProps {
   sidebarId: string;
   dispatchState: React.Dispatch<DispatchTheme>;
+  formState: CustomAttributes;
+  setFormState: React.Dispatch<CustomAttributes>;
 }
 
 export const EditTab: React.FC<EditTabProps> = props => {
   const styles = useStyles();
 
-  const { sidebarId, dispatchState } = props;
+  const { sidebarId, dispatchState, formState, setFormState } = props;
 
-  const initialForm = {
-    keyColor: '#006bc7',
-    hueTorsion: 0,
-    darkCp: 2 / 3,
-    lightCp: 1 / 3,
-    isDark: false,
-  };
+  const initialForm: CustomAttributes = formState;
 
   const formReducer = (state: CustomAttributes, action: { attributes: CustomAttributes; type: string }) => {
+    setFormState(action.attributes);
     dispatchState({ ...form, type: 'Custom', customAttributes: action.attributes, overrides: {} });
     return action.attributes;
   };
 
   const [form, dispatchForm] = React.useReducer(formReducer, initialForm);
 
-  React.useEffect(() => {
-    dispatchState({ type: 'Custom', customAttributes: form, overrides: {} });
-  }, [dispatchState, form]);
-
   const toggleTheme = () => {
     dispatchForm({ attributes: { ...form, isDark: !form.isDark }, type: 'isDark' });
   };
diff --git a/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.tsx b/packages/react-components/theme-designer/src/components/Sidebar/Sidebar.tsx
@@ -2,8 +2,8 @@
 import * as React from 'react';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { TabValue, TabList, Tab, SelectTabEvent, SelectTabData, useId, tokens } from '@fluentui/react-components';
+import type { CustomAttributes, DispatchTheme } from '../../useThemeDesignerReducer';
 
-import type { DispatchTheme } from '../../useThemeDesignerReducer';
 import { UseTab } from './UseTab';
 import { EditTab } from './EditTab';
 
@@ -78,10 +78,25 @@ export const Sidebar: React.FC<SidebarProps> = props => {
   const sidebarId = useId();
 
   const [tab, setTab] = React.useState<TabValue>('use');
-  const handleTabChange = (event: SelectTabEvent, data: SelectTabData) => setTab(data.value);
+  const handleTabChange = (event: SelectTabEvent, data: SelectTabData) => {
+    if (data.value === 'edit') {
+      props.dispatchState({ type: 'Custom', customAttributes: formState, overrides: {} });
+    } else if (data.value === 'use') {
+      setTheme('Custom');
+    }
+    setTab(data.value);
+  };
 
   const [theme, setTheme] = React.useState<string>('Teams Light');
 
+  const [formState, setFormState] = React.useState<CustomAttributes>({
+    keyColor: '#006bc7',
+    hueTorsion: 0,
+    darkCp: 2 / 3,
+    lightCp: 1 / 3,
+    isDark: false,
+  });
+
   return (
     <div className={mergeClasses(styles.root, props.className)}>
       <TabList className={styles.tabs} size="medium" selectedValue={tab} onTabSelect={handleTabChange}>
@@ -99,9 +114,17 @@ export const Sidebar: React.FC<SidebarProps> = props => {
           setTheme={setTheme}
           dispatchState={props.dispatchState}
           setTab={setTab}
+          formState={formState}
+        />
+      )}
+      {tab === 'edit' && (
+        <EditTab
+          sidebarId={sidebarId}
+          dispatchState={props.dispatchState}
+          formState={formState}
+          setFormState={setFormState}
         />
       )}
-      {tab === 'edit' && <EditTab sidebarId={sidebarId} dispatchState={props.dispatchState} />}
     </div>
   );
 };
diff --git a/packages/react-components/theme-designer/src/components/Sidebar/UseTab.tsx b/packages/react-components/theme-designer/src/components/Sidebar/UseTab.tsx
@@ -15,7 +15,7 @@ import {
   TabValue,
 } from '@fluentui/react-components';
 
-import type { DispatchTheme } from '../../useThemeDesignerReducer';
+import type { CustomAttributes, DispatchTheme } from '../../useThemeDesignerReducer';
 
 const useStyles = makeStyles({
   root: {
@@ -37,17 +37,19 @@ export interface UseTabProps {
   dispatchState: React.Dispatch<DispatchTheme>;
   sidebarId: string;
   setTab: React.Dispatch<TabValue>;
+  formState: CustomAttributes;
 }
 
 export const UseTab: React.FC<UseTabProps> = props => {
   const styles = useStyles();
 
-  const { theme, setTheme, dispatchState, sidebarId } = props;
+  const { theme, setTheme, dispatchState, sidebarId, formState } = props;
 
   const handleThemeChange: MenuProps['onCheckedValueChange'] = (e, data) => {
     const newTheme = data.checkedItems[0] as string;
     if (newTheme === 'Custom') {
       props.setTab('edit');
+      dispatchState({ type: newTheme, customAttributes: formState, overrides: {} });
     } else {
       dispatchState({ type: newTheme, overrides: {} });
     }
