9c3b1830513cc3b8fc4b76635d32e692

Edit file

File name : controls.js

Content :

import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import ColorPalettes from '../../../../../components/color-palettes/color-palettes';
import {
	sendPostMessage,
	getDefaultColorPalette,
	getColorScheme,
} from '../../../utils/functions';
import ICONS from '../../../../../../icons';
import { DARK_PALETTES, LIGHT_PALETTES } from './colors';
import TypographyWrapper from './typography';

const onPaletteChange = ( event, palette ) => {
		if ( ! palette ) {
			return;
		}

dispatch( {
			type: 'set',
			activePaletteSlug: palette.slug,
			activePalette: palette,
		} );

sendPostMessage( {
			param: 'colorPalette',
			data: palette,
		} );
	};

useEffect( () => {
		const defaultPaletteValues = getDefaultColorPalette( templateResponse );
		setDefaultPalette( defaultPaletteValues );
		let scheme =
			'light' === getColorScheme( templateResponse )
				? LIGHT_PALETTES
				: DARK_PALETTES;

const customColors =
			templateResponse?.[ 'astra-custom-palettes' ] || [];
		if ( customColors.length && customColors.length % 2 === 0 ) {
			let colors = customColors;

scheme = colors;
		}

setColorScheme( scheme );
	}, [ templateResponse ] );

const resetColorPlallete = ( e ) => {
		onPaletteChange( e, Object.values( defaultPalette )[ 0 ] );
	};

const ColorWrapper = () => {
		if ( builder === 'beaver-builder' || builder === 'brizy' ) {
			return null;
		}

return (
			<div className="colors-section">
				<div className="d-flex-space-between">
					<h4>{ __( 'Change Colors', 'ai-builder' ) }</h4>
					<div
						className={ `customize-reset-btn ${
							activePaletteSlug === 'default'
								? 'disabled'
								: 'active'
						}` }
						onClick={ resetColorPlallete }
					>
						{ ICONS.reset }
					</div>
				</div>
				{ defaultPalette ? (
					<>
						<ColorPalettes
							selected={ activePaletteSlug }
							options={ defaultPalette }
							onChange={ ( event, palette ) => {
								onPaletteChange( event, palette );
							} }
							tabIndex="0"
							type="default"
						/>
					</>
				) : (
					''
				) }

<ColorPalettes
					selected={ activePaletteSlug }
					options={ colorScheme }
					onChange={ ( event, palette ) => {
						onPaletteChange( event, palette );
					} }
					tabIndex="0"
					type="others"
				/>
			</div>
		);
	};
	return (
		<>
			<ColorWrapper />
			<TypographyWrapper />
		</>
	);
};

export default SiteColorsControls;

Gel4y Mini Shell

Edit file