@gechiui/block-editor/src/components/colors-gradients/panel-color-gradient-settings.native.js

Generic block editor.

/**
 * External dependencies
 */
import { useNavigation } from '@react-navigation/native';

/**
 * GeChiUI dependencies
 */
import { ColorControl, PanelBody } from '@gechiui/components';
import { useMemo } from '@gechiui/element';

/**
 * Internal dependencies
 */
import { blockSettingsScreens } from '../block-settings';

export default function PanelColorGradientSettings( { settings, title } ) {
	const navigation = useNavigation();

	const mappedSettings = useMemo( () => {
		return settings.map(
			( {
				onColorChange,
				colorValue,
				onGradientChange,
				gradientValue,
				label,
			} ) => (
				<ColorControl
					onPress={ () => {
						navigation.navigate( blockSettingsScreens.color, {
							onColorChange,
							colorValue: gradientValue || colorValue,
							gradientValue,
							onGradientChange,
							label,
						} );
					} }
					key={ `color-setting-${ label }` }
					label={ label }
					color={ gradientValue || colorValue }
				/>
			)
		);
	}, [ settings ] );

	return <PanelBody title={ title }>{ mappedSettings }</PanelBody>;
}