From 54d08635e1707918bb95291fff3e789667956e90 Mon Sep 17 00:00:00 2001 From: Nathan Richards Date: Wed, 7 Aug 2024 14:54:32 +0200 Subject: [PATCH] feat: conrol updates and fix for maxHeight --- .../DesignControls/DesignControls.style.tsx | 4 +- .../DesignControls/LayoutControls.tsx | 163 ++++++++++++++++-- .../components/Widget/WidgetView.style.tsx | 15 +- .../components/Widget/WidgetViewContainer.tsx | 1 + .../src/defaultWidgetConfig.ts | 16 +- .../widgetConfig/createWidgetConfigStore.ts | 22 +++ .../src/store/widgetConfig/types.ts | 3 + .../store/widgetConfig/useConfigActions.ts | 2 + .../widget/src/components/AppContainer.tsx | 12 +- 9 files changed, 205 insertions(+), 33 deletions(-) diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx index 09fcc075b..6550bfe35 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/DesignControls.style.tsx +++ b/packages/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 index 81c93ef24..c986e625b 100644 --- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx +++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls.tsx @@ -1,8 +1,9 @@ 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; @@ -10,6 +11,10 @@ interface LayoutOption { } 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) => { - setSelectedLayoutId(event.target.value); + const { config } = useConfig(); + const { setHeader, setContainer, getCurrentConfigTheme, setVariant } = + useConfigActions(); + + const [selectedLayoutId, setSelectedLayoutId] = useState( + 'restricted-max-height', + ); + const [heightValue, setHeightValue] = useState(); + + // TODO: on mount establish the Layout mode + + const handleSelectChange = (event: SelectChangeEvent) => { + 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 = (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 = () => { } > - {selectedLayoutId !== 'full-height' ? ( + {selectedLayoutId !== 'full-height' && selectedLayoutId !== 'default' ? ( - + + {(heightValue && heightValue <= 682) || !heightValue ? ( + + 682px minimum + + ) : null} - + + + ) : null} + {selectedLayoutId === 'full-height' ? ( + + + full height should be used with the compact variant + ) : null} diff --git a/packages/widget-playground/src/components/Widget/WidgetView.style.tsx b/packages/widget-playground/src/components/Widget/WidgetView.style.tsx index 41c64a386..2a9518d12 100644 --- 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)(({ - theme, - removePaddingTop, - alignTop, -}) => { +export const WidgetContainer = styled(Box, { + shouldForwardProp: (prop) => + !['removePaddingTop', 'alignTop'].includes(prop as string), +})(({ theme, removePaddingTop, alignTop }) => { return { display: 'flex', flexGrow: 1, @@ -41,9 +40,9 @@ interface WidgetContainerRowProps extends BoxProps { alignTop?: boolean; } -export const WidgetContainerRow = styled(Box)(({ - alignTop, -}) => { +export const WidgetContainerRow = styled(Box, { + shouldForwardProp: (prop) => !['alignTop'].includes(prop as string), +})(({ 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 index a63ddbbe4..df09c79f5 100644 --- 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({ ) : null} diff --git a/packages/widget-playground/src/defaultWidgetConfig.ts b/packages/widget-playground/src/defaultWidgetConfig.ts index e6bbb5c4e..57c88a7d1 100644 --- a/packages/widget-playground/src/defaultWidgetConfig.ts +++ b/packages/widget-playground/src/defaultWidgetConfig.ts @@ -219,14 +219,16 @@ export const defaultWidgetConfig: Partial = { 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 index cd6876ea7..03b8b3fce 100644 --- 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 index 8c2431b0a..b1f2fb2e7 100644 --- 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 index 4e73b237b..bc786f57d 100644 --- 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 index 34426c78e..8e3be21a4 100644 --- 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%', }));