feat: conrol updates and fix for maxHeight

lifinance · Aug 7, 2024 · 54d0863 · 54d0863
1 parent b52165d
commit 54d0863
Show file tree

Hide file tree

Showing 9 changed files with 205 additions and 33 deletions.
diff --git a/...s/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx b/...s/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx
@@ -112,8 +112,8 @@ export const Input = styled(InputBase)(({ theme }) => {
       textAlign: 'center',
       '&::placeholder': {
         fontSize: '1rem',
-        fontWeight: 700,
-        opacity: 1,
+        fontWeight: 400,
+        opacity: 0.5,
       },
       '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
         display: 'none',

diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx
@@ -1,15 +1,20 @@
 import { MenuItem, type SelectChangeEvent } from '@mui/material';
-import { useState } from 'react';
+import { type ChangeEventHandler, useState } from 'react';
+import { useConfig, useConfigActions } from '../../../store';
 import { CardRowContainer, CardValue, ExpandableCard } from '../../Card';
 import { popperZIndex } from '../DrawerControls.style';
-import { Input, Select } from './DesignControls.style';
+import { CapitalizeFirstLetter, Input, Select } from './DesignControls.style';
 
 interface LayoutOption {
   id: string;
   name: string;
 }
 
 const layoutOptions = [
+  {
+    id: 'default',
+    name: 'Default',
+  },
   {
     id: 'restricted-height',
     name: 'Restricted Height',
@@ -33,10 +38,120 @@ const inputLabel: InputLabel = {
   'restricted-max-height': 'Set max height',
 };
 
+const defaultHeight = 682;
+
 export const LayoutControls = () => {
-  const [selectedLayoutId, setSelectedLayoutId] = useState('restricted-height');
-  const handleChange = (event: SelectChangeEvent<any>) => {
-    setSelectedLayoutId(event.target.value);
+  const { config } = useConfig();
+  const { setHeader, setContainer, getCurrentConfigTheme, setVariant } =
+    useConfigActions();
+
+  const [selectedLayoutId, setSelectedLayoutId] = useState(
+    'restricted-max-height',
+  );
+  const [heightValue, setHeightValue] = useState<number | undefined>();
+
+  // TODO: on mount establish the Layout mode
+
+  const handleSelectChange = (event: SelectChangeEvent<any>) => {
+    const newLayoutId = event.target.value;
+
+    setSelectedLayoutId(newLayoutId);
+    setHeightValue(682);
+
+    switch (newLayoutId) {
+      case 'restricted-height':
+        const newHeight = config?.theme?.container?.height;
+        if (Number.isFinite(newHeight) || newHeight === undefined) {
+          setHeightValue(newHeight as number | undefined);
+        }
+
+        setHeader();
+        setContainer({
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          height: Number.isFinite(newHeight) ? newHeight : undefined,
+          display: undefined,
+          maxHeight: undefined,
+        });
+
+        break;
+      case 'restricted-max-height':
+        const newMaxHeight = config?.theme?.container?.maxHeight;
+        if (Number.isFinite(newMaxHeight) || newMaxHeight === undefined) {
+          setHeightValue(newMaxHeight as number | undefined);
+        }
+
+        setHeader();
+        setContainer({
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          maxHeight: Number.isFinite(newMaxHeight) ? newMaxHeight : undefined,
+          display: undefined,
+          height: undefined,
+        });
+
+        break;
+      case 'full-height':
+        setVariant('compact');
+
+        setHeader({
+          position: 'fixed',
+          // TODO: top defaults to 0 but if header is visible make it 48
+          top: 48,
+        });
+
+        const newContainer = {
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          display: 'flex',
+          height: '100%',
+          maxHeight: undefined,
+        };
+
+        setContainer(newContainer);
+        break;
+      default:
+        setHeightValue(undefined);
+        setHeader();
+        setContainer({
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          maxHeight: undefined,
+          display: undefined,
+          height: undefined,
+        });
+    }
+  };
+
+  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (e) => {
+    const height = Number.isFinite(parseInt(e.target.value, 10))
+      ? parseInt(e.target.value, 10)
+      : undefined;
+
+    setHeightValue(height);
+
+    switch (selectedLayoutId) {
+      case 'restricted-height':
+        if (getCurrentConfigTheme()?.header) {
+          setHeader();
+        }
+
+        const containerWithMaxHeight = {
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          height: height ? Math.max(height, defaultHeight) : undefined,
+        };
+
+        setContainer(containerWithMaxHeight);
+        break;
+      case 'restricted-max-height':
+      default:
+        if (getCurrentConfigTheme()?.header) {
+          setHeader();
+        }
+
+        const newContainer = {
+          ...(getCurrentConfigTheme()?.container ?? {}),
+          maxHeight: height ? Math.max(height, defaultHeight) : undefined,
+        };
+
+        setContainer(newContainer);
+    }
   };
 
   return (
@@ -50,13 +165,11 @@ export const LayoutControls = () => {
       }
     >
       <CardRowContainer
-        sx={
-          selectedLayoutId !== 'full-height' ? { paddingBottom: 0 } : undefined
-        }
+        sx={selectedLayoutId !== 'default' ? { paddingBottom: 0 } : undefined}
       >
         <Select
-          value={selectedLayoutId}
-          onChange={handleChange}
+          value={selectedLayoutId ?? ''}
+          onChange={handleSelectChange}
           aria-label="Layout"
           MenuProps={{ sx: { zIndex: popperZIndex } }}
         >
@@ -69,16 +182,40 @@ export const LayoutControls = () => {
           })}
         </Select>
       </CardRowContainer>
-      {selectedLayoutId !== 'full-height' ? (
+      {selectedLayoutId !== 'full-height' && selectedLayoutId !== 'default' ? (
         <CardRowContainer>
           <CardRowContainer
             sx={{
               flexGrow: 3,
+              flexDirection: 'column',
+              alignItems: 'center',
+              paddingTop: 0,
+              paddingBottom: 0,
             }}
           >
-            <label htmlFor="height-input">{inputLabel[selectedLayoutId]}</label>
+            <label htmlFor="layout-height-input">
+              {inputLabel[selectedLayoutId]}
+            </label>
+            {(heightValue && heightValue <= 682) || !heightValue ? (
+              <CapitalizeFirstLetter variant="caption" sx={{ paddingLeft: 1 }}>
+                682px minimum
+              </CapitalizeFirstLetter>
+            ) : null}
           </CardRowContainer>
-          <Input id="height-input" type="number" />
+          <Input
+            id="layout-height-input"
+            type="number"
+            value={heightValue ?? ''}
+            placeholder={`${defaultHeight}`}
+            onChange={handleInputChange}
+          />
+        </CardRowContainer>
+      ) : null}
+      {selectedLayoutId === 'full-height' ? (
+        <CardRowContainer>
+          <CapitalizeFirstLetter variant="caption" sx={{ paddingLeft: 1 }}>
+            full height should be used with the compact variant
+          </CapitalizeFirstLetter>
         </CardRowContainer>
       ) : null}
     </ExpandableCard>

diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx
@@ -22,11 +22,10 @@ interface WidgetContainerProps extends BoxProps {
   alignTop?: boolean;
 }
 
-export const WidgetContainer = styled(Box)<WidgetContainerProps>(({
-  theme,
-  removePaddingTop,
-  alignTop,
-}) => {
+export const WidgetContainer = styled(Box, {
+  shouldForwardProp: (prop) =>
+    !['removePaddingTop', 'alignTop'].includes(prop as string),
+})<WidgetContainerProps>(({ theme, removePaddingTop, alignTop }) => {
   return {
     display: 'flex',
     flexGrow: 1,
@@ -41,9 +40,9 @@ interface WidgetContainerRowProps extends BoxProps {
   alignTop?: boolean;
 }
 
-export const WidgetContainerRow = styled(Box)<WidgetContainerRowProps>(({
-  alignTop,
-}) => {
+export const WidgetContainerRow = styled(Box, {
+  shouldForwardProp: (prop) => !['alignTop'].includes(prop as string),
+})<WidgetContainerRowProps>(({ alignTop }) => {
   return {
     display: 'flex',
     alignItems: alignTop ? 'flex-start' : 'center',

diff --git a/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx b/packages/widget-playground/src/components/Widget/WidgetViewContainer.tsx
@@ -67,6 +67,7 @@ export function WidgetViewContainer({
             </MockElement>
           ) : null}
           <WidgetContainerRow
+            id="widget-row-container"
             // sx={{ maxHeight: 682 }} // for sticky headers to work there needs to be an ancester with fixed height
             alignTop={config?.theme?.container?.display === 'flex'}
           >

diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts
@@ -219,14 +219,16 @@ export const defaultWidgetConfig: Partial<WidgetConfig> = {
       fontFamily: 'Inter, sans-serif',
     },
     // allows for positioning of header to accommodate navigation bar
-    header: {
-      position: 'fixed',
-      top: 48,
-    },
+    // header: {
+    //   position: 'fixed',
+    //   top: 48,
+    // },
     container: {
-      display: 'flex',
-      height: '100%',
-      // height: 1000,
+      // display: 'flex',
+      // height: '100%',
+      // height: 800,
+      maxHeight: 900,
+      //
       // paddingTop: 80,
       // boxSizing: 'border-box',
       // height: '100vh',

diff --git a/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts b/packages/widget-playground/src/store/widgetConfig/createWidgetConfigStore.ts
@@ -196,6 +196,28 @@ export const createWidgetConfigStore = (
         getCurrentConfigTheme: () => {
           return get().config?.theme;
         },
+        setHeader: (header) => {
+          set({
+            config: {
+              ...get().config,
+              theme: {
+                ...get().config?.theme,
+                header,
+              },
+            },
+          });
+        },
+        setContainer: (container) => {
+          set({
+            config: {
+              ...get().config,
+              theme: {
+                ...get().config?.theme,
+                container,
+              },
+            },
+          });
+        },
       }),
       {
         name: 'li.fi-playground-config',

diff --git a/packages/widget-playground/src/store/widgetConfig/types.ts b/packages/widget-playground/src/store/widgetConfig/types.ts
@@ -6,6 +6,7 @@ import type {
   WidgetVariant,
   WidgetWalletConfig,
 } from '@lifi/widget';
+import type { CSSProperties } from 'react';
 import type { StoreApi } from 'zustand';
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
 import type { ThemeItem } from '../editTools/types';
@@ -35,6 +36,8 @@ export interface WidgetConfigActions {
   setAvailableThemes: (themeItems: ThemeItem[]) => void;
   getCurrentThemePreset: (useDarkMode?: boolean) => WidgetTheme | undefined;
   getCurrentConfigTheme: () => WidgetTheme | undefined;
+  setHeader: (header?: CSSProperties) => void;
+  setContainer: (container?: CSSProperties) => void;
 }
 
 export type WidgetConfigState = WidgetConfigValues & WidgetConfigActions;

diff --git a/packages/widget-playground/src/store/widgetConfig/useConfigActions.ts b/packages/widget-playground/src/store/widgetConfig/useConfigActions.ts
@@ -19,6 +19,8 @@ export const useConfigActions = () => {
       setConfigTheme: state.setConfigTheme,
       getCurrentThemePreset: state.getCurrentThemePreset,
       getCurrentConfigTheme: state.getCurrentConfigTheme,
+      setHeader: state.setHeader,
+      setContainer: state.setContainer,
     }),
     shallow,
   );

diff --git a/packages/widget/src/components/AppContainer.tsx b/packages/widget/src/components/AppContainer.tsx
@@ -18,7 +18,9 @@ export const AppExpandedContainer = styled(Box, {
       ? 'none'
       : theme.container?.display === 'flex'
         ? '100%'
-        : theme.container?.height || maxHeight,
+        : theme.container?.maxHeight
+          ? theme.container?.maxHeight
+          : theme.container?.height || maxHeight,
 }));
 
 export const RelativeContainer = styled(Box, {
@@ -34,7 +36,9 @@ export const RelativeContainer = styled(Box, {
       ? 'none'
       : theme.container?.display === 'flex' && !theme.container?.height
         ? '100%'
-        : theme.container?.height || maxHeight,
+        : theme.container?.maxHeight
+          ? theme.container?.maxHeight
+          : theme.container?.height || maxHeight,
   background: theme.palette.background.default,
   overflow: 'auto',
   flex: 1,
@@ -54,7 +58,9 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
   maxHeight:
     variant === 'drawer' || theme.container?.display === 'flex'
       ? 'none'
-      : theme.container?.height || maxHeight,
+      : theme.container?.maxHeight
+        ? theme.container?.maxHeight
+        : theme.container?.height || maxHeight,
   overflowY: 'auto',
   height: theme.container?.display === 'flex' ? 'auto' : '100%',
 }));