Merge pull request #320 from Souptik2001/refactor/migrate-color-setti…

…ngs-component-to-ts

Migrate `ColorSetting` component to TS

components/color-settings/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { BaseControl } from '@wordpress/components';
+import { ColorPalette } from '@wordpress/block-editor';
+import { useInstanceId } from '@wordpress/compose';
+
+interface ColorSettingProps {
+	/**
+	 * If this property is added, a label will be generated using label property as the content.
+	 */
+	label?: string,
+
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 */
+	hideLabelFromVision?: boolean,
+
+	/**
+	 * If this property is added, a help text will be generated using help property as the content.
+	 */
+	help?: string,
+
+	/**
+	 * If no className is passed only components-base-control is used.
+	 */
+	className?: string,
+
+	/**
+	 * Whether to allow custom color or not.
+	 */
+	disableCustomColors?: boolean,
+
+	/**
+	 * currently active value.
+	 */
+	value?: string,
+
+	/**
+	 * Whether the palette should have a clearing button or not.
+	 */
+	clearable?: boolean,
+
+	/**
+	 * Array with the colors to be shown.
+	 */
+	colors: Array<Color>,
+
+	/**
+	 * Callback called when a color is selected.
+	 */
+	onChange: Function,
+}
+
+interface Color {
+	/**
+	 * Color name.
+	 */
+	name: string,
+
+	/**
+	 * Color hex code.
+	 */
+	color: string,
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export const ColorSetting: React.FC<ColorSettingProps> = ({
+	label= '',
+	help = '',
+	className = '',
+	hideLabelFromVision = false,
+	colors,
+	value = '',
+	onChange,
+	disableCustomColors = false,
+	clearable = true,
+}) => {
+	const instanceId = useInstanceId(ColorSetting);
+	const id = `color-settings-${instanceId}`;
+
+	return (
+		<BaseControl
+			id={id}
+			label={label}
+			help={help}
+			className={className}
+			hideLabelFromVision={hideLabelFromVision}
+		>
+			<ColorPalette
+				colors={colors}
+				value={value}
+				onChange={onChange}
+				disableCustomColors={disableCustomColors}
+				clearable={clearable}
+			/>
+		</BaseControl>
+	);
+};

example/src/blocks/color-settings-example/block.json

@@ -0,0 +1,18 @@
+{
+	"name": "example/color-settings-example",
+	"title": "Color Settings Component Example",
+	"description": "Example Block to show the Color settings component",
+	"icon": "smiley",
+	"category": "common",
+	"example": {},
+	"supports": {
+		"html": false
+	},
+	"attributes": {
+		"color": {
+			"type": "string"
+		}
+	},
+	"variations": [],
+	"editorScript": "file:./index.js"
+}

example/src/blocks/color-settings-example/edit.js

@@ -0,0 +1,40 @@
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+import { PanelBody } from '@wordpress/components';
+
+import { ColorSetting } from '@10up/block-components';
+
+export const BlockEdit = (props) => {
+	const {
+		attributes: { color },
+		setAttributes
+	} = props;
+
+	const colors = [
+		{ name: 'red', color: '#f00' },
+		{ name: 'white', color: '#fff' },
+		{ name: 'blue', color: '#00f' },
+	];
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Post Picker', 'example' ) }>
+				<ColorSetting
+					label={ __( 'Color Setting - Label', 'example' ) }
+					help={ __( 'Color Setting - Help Text', 'example' ) }
+					colors={ colors }
+					value={ color }
+					onChange={ ( val ) => setAttributes( { color: val } ) }
+				/>
+				</PanelBody>
+			</InspectorControls>
+			<ColorSetting
+				label={ __( 'Color Setting - Label', 'example' ) }
+				help={ __( 'Color Setting - Help Text', 'example' ) }
+				colors={ colors }
+				value={ color }
+				onChange={ ( val ) => setAttributes( { color: val } ) }
+			/>
+		</>
+	)
+}

example/src/blocks/color-settings-example/index.js

@@ -0,0 +1,8 @@
+import { registerBlockType } from '@wordpress/blocks';
+import metadata from './block.json';
+import { BlockEdit } from './edit';
+
+registerBlockType( metadata, {
+    edit: BlockEdit,
+    save: () => null
+} );