Skip to content

Commit

Permalink
Merge pull request #235 from newfold-labs/enhance/optimize-use-global…
Browse files Browse the repository at this point in the history 
…-styles

Optimize useGlobalStylesOutput and LivePreview usage
  • Loading branch information
@arunshenoy99
arunshenoy99 authored May 17, 2023
2 parents 6a3c8ba + c091354 commit f55ce88
Show file tree
Hide file tree
Showing 15 changed files with 355 additions and 282 deletions.
110 changes: 67 additions & 43 deletions src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { useState, useEffect, useRef } from '@wordpress/element';
import { store as nfdOnboardingStore } from '../../../store';
import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes';
import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
import { GlobalStylesProvider } from '../../LivePreview';
import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants';
import Animate from '../../Animate';

Expand Down Expand Up @@ -42,10 +41,10 @@ const DesignColors = () => {
updateThemeStatus,
} = useDispatch( nfdOnboardingStore );

function stateToLocal( selectedColors ) {
if ( selectedColors ) {
function stateToLocal( selectedColorPalette ) {
if ( selectedColorPalette ) {
const selectedColorsLocalTemp = {};
selectedColors?.color?.forEach( ( color ) => {
selectedColorPalette?.color?.forEach( ( color ) => {
selectedColorsLocalTemp[ color.slug ] = color.color;
} );

Expand Down Expand Up @@ -85,6 +84,9 @@ const DesignColors = () => {
selectedColorsLocalTemp = selectedColors,
globalStylesTemp = storedPreviewSettings
) {
if ( selectedColors?.slug === colorStyle ) {
return true;
}
const isCustomStyle = colorStyle === 'custom';
const selectedGlobalStyle = globalStylesTemp;
const selectedThemeColorPalette =
Expand All @@ -94,8 +96,8 @@ const DesignColors = () => {
const slug = selectedThemeColorPalette[ idx ]?.slug;
if (
isCustomStyle &&
selectedColorsLocalTemp?.[ slug ] != '' &&
selectedColorsLocalTemp?.[ slug ] != undefined
selectedColorsLocalTemp?.[ slug ] !== '' &&
selectedColorsLocalTemp?.[ slug ] !== undefined
)
selectedThemeColorPalette[ idx ].color =
selectedColorsLocalTemp[ slug ];
Expand All @@ -118,6 +120,7 @@ const DesignColors = () => {
selectedGlobalStyle.settings.color.palette =
selectedThemeColorPalette;
updatePreviewSettings(
// eslint-disable-next-line react-hooks/rules-of-hooks
useGlobalStylesOutput(
selectedGlobalStyle,
storedPreviewSettings
Expand All @@ -128,13 +131,9 @@ const DesignColors = () => {
}
}

function findInCustomColors(
slugName,
colorPickerCalledBy,
storedPreviewSettingsTemp = storedPreviewSettings
) {
function findInCustomColors( slugName ) {
const selectedThemeColorPalette =
storedPreviewSettingsTemp?.settings?.color?.palette;
storedPreviewSettings?.settings?.color?.palette;
const res = selectedThemeColorPalette.findIndex(
( { slug } ) => slug === slugName
);
Expand Down Expand Up @@ -170,10 +169,7 @@ const DesignColors = () => {
customColors[ colorPickerCalledBy ] !== undefined
) {
selectedThemeColorPalette[
findInCustomColors(
variant,
colorPickerCalledBy
)
findInCustomColors( variant )
].color = customColors[ colorPickerCalledBy ];
}
} );
Expand All @@ -183,6 +179,7 @@ const DesignColors = () => {
selectedGlobalStyle.settings.color.palette =
selectedThemeColorPalette;
updatePreviewSettings(
// eslint-disable-next-line react-hooks/rules-of-hooks
useGlobalStylesOutput(
selectedGlobalStyle,
storedPreviewSettings
Expand All @@ -193,35 +190,37 @@ const DesignColors = () => {

const getColorStylesAndPatterns = async () => {
const globalStyles = await getGlobalStyles();
const colorPalettes = await getThemeColors();
if ( colorPalettes?.error ) {
const colorPaletteResponse = await getThemeColors();
if ( colorPaletteResponse?.error ) {
return updateThemeStatus( THEME_STATUS_INIT );
}
if ( globalStyles?.error ) {
return updateThemeStatus( THEME_STATUS_INIT );
}
setColorPalettes( colorPalettes?.body.tailored );
setCustomColorsMap( colorPalettes?.body[ 'custom-picker-grouping' ] );
let selectedColors;
let selectedColorsLocal;
setColorPalettes( colorPaletteResponse?.body.tailored );
setCustomColorsMap(
colorPaletteResponse?.body[ 'custom-picker-grouping' ]
);
let selectedColorsTemp;
let selectedColorsLocalTemp;
if ( ! currentData?.data?.palette?.slug === '' ) {
selectedColors = currentData.data.palette;
selectedColorsLocal = stateToLocal( selectedColors );
selectedColorsTemp = currentData.data.palette;
selectedColorsLocalTemp = stateToLocal( selectedColors );
setCustomColors( selectedColorsLocal );
setCurrentOnboardingData( currentData );
} else {
selectedColors = currentData.data.palette;
selectedColorsLocal = stateToLocal( selectedColors );
selectedColorsTemp = currentData.data.palette;
selectedColorsLocalTemp = stateToLocal( selectedColors );

if ( selectedColors.slug === 'custom' ) {
if ( selectedColorsTemp.slug === 'custom' ) {
setCustomColors( selectedColorsLocal );
}
}
setSelectedColors( selectedColors );
setSelectedColors( selectedColorsTemp );
saveThemeColorPalette(
currentData?.data?.palette.slug,
colorPalettes?.body.tailored,
selectedColorsLocal,
selectedColorsLocalTemp,
globalStyles?.body[ 0 ]
);
setIsLoaded( true );
Expand Down Expand Up @@ -288,6 +287,7 @@ const DesignColors = () => {
selectedGlobalStyle = globalStyles.body[ 0 ];
}
updatePreviewSettings(
// eslint-disable-next-line react-hooks/rules-of-hooks
useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
);
selectedColors.slug = '';
Expand All @@ -302,17 +302,19 @@ const DesignColors = () => {
}

function buildPalettes() {
const paletteRenderedList = [];
for ( const colorStyle in colorPalettes ) {
paletteRenderedList.push(
return Object.keys( colorPalettes ).map( ( colorStyle, idx ) => {
return (
<div
key={ colorStyle }
className={ `color-palette drawer-palette--button ${
colorStyle == selectedColors?.slug
colorStyle === selectedColors?.slug
? 'color-palette-selected drawer-palette--button--selected'
: ''
} ` }
onClick={ ( e ) => handleClick( colorStyle ) }
role="button"
tabIndex={ idx + 1 }
onClick={ () => handleClick( colorStyle ) }
onKeyDown={ () => handleClick( colorStyle ) }
>
<div className="color-palette__colors">
<div
Expand Down Expand Up @@ -340,14 +342,12 @@ const DesignColors = () => {
</div>
</div>
);
}

return paletteRenderedList;
} );
}

function isCustomColorActive() {
for ( const custom in customColors )
if ( customColors[ custom ] != '' ) return true;
if ( customColors[ custom ] !== '' ) return true;

return false;
}
Expand All @@ -366,12 +366,18 @@ const DesignColors = () => {
customColors && customColors?.tertiary !== ''
? customColors?.tertiary
: selectedColorsLocal?.tertiary ?? defaultColor;
const paletteCount = Object.keys( colorPalettes ).length;

return (
<div className="custom-palette">
<div
className="custom-palette__top"
onClick={ ( e ) =>
role="button"
tabIndex={ 0 }
onClick={ () =>
setIsAccordionClosed( ! isAccordionClosed )
}
onKeyDown={ () =>
setIsAccordionClosed( ! isAccordionClosed )
}
>
Expand All @@ -397,7 +403,10 @@ const DesignColors = () => {
>
<div
className="custom-palette__below-row"
onClick={ ( e ) => selectCustomColor( 'base' ) }
onClick={ () => selectCustomColor( 'base' ) }
onKeyDown={ () => selectCustomColor( 'base' ) }
role="button"
tabIndex={ paletteCount + 1 }
>
<div
className={ `custom-palette__below-row-icon ${
Expand All @@ -418,7 +427,10 @@ const DesignColors = () => {
</div>
<div
className="custom-palette__below-row"
onClick={ ( e ) => selectCustomColor( 'primary' ) }
onClick={ () => selectCustomColor( 'primary' ) }
onKeyDown={ () => selectCustomColor( 'primary' ) }
role="button"
tabIndex={ paletteCount + 2 }
>
<div
className={ `custom-palette__below-row-icon ${
Expand All @@ -437,7 +449,10 @@ const DesignColors = () => {
</div>
<div
className="custom-palette__below-row"
onClick={ ( e ) => selectCustomColor( 'secondary' ) }
onClick={ () => selectCustomColor( 'secondary' ) }
onKeyDown={ () => selectCustomColor( 'secondary' ) }
role="button"
tabIndex={ paletteCount + 3 }
>
<div
className={ `custom-palette__below-row-icon ${
Expand All @@ -456,7 +471,10 @@ const DesignColors = () => {
</div>
<div
className="custom-palette__below-row"
onClick={ ( e ) => selectCustomColor( 'tertiary' ) }
onClick={ () => selectCustomColor( 'tertiary' ) }
onKeyDown={ () => selectCustomColor( 'tertiary' ) }
role="button"
tabIndex={ paletteCount + 4 }
>
<div
className={ `custom-palette__below-row-icon ${
Expand All @@ -479,7 +497,10 @@ const DesignColors = () => {
<div
ref={ customColorsResetRef }
className="theme-colors--drawer--reset"
role="button"
tabIndex={ 0 }
onClick={ resetColors }
onKeyDown={ resetColors }
>
<div>Reset</div>
</div>
Expand All @@ -490,6 +511,9 @@ const DesignColors = () => {
<div
className="custom-palette__picker-close-icon"
onClick={ () => setShowColorPicker( false ) }
role="button"
tabIndex={ 0 }
onKeyDown={ () => setShowColorPicker( false ) }
>
X
</div>
Expand Down
Loading

0 comments on commit f55ce88

Please sign in to comment.