Add select for unit

Author: psrpinto

frontend/block/editor.scss

@@ -17,6 +17,10 @@
       align-items: center;
       justify-content: center;
 
+      & > input {
+        width: 80%;
+      }
+
       & > span {
         margin-left: 5px;
       }

frontend/block/inspector/StylePanel.tsx

@@ -14,8 +14,8 @@ export default function StylePanel({ attributes, setAttributes }): WPElement {
                     label={__("height", "chatrix")}
                     value={attributes.height.value}
                     unit={attributes.height.unit}
-                    onChange={(value) => {
-                        setAttributes({ height: { value: value, unit: "px" } });
+                    onChange={(value, unit) => {
+                        setAttributes({ height: { value: value, unit: unit } });
                     }}
                 />
             </PanelRow>
@@ -24,8 +24,8 @@ export default function StylePanel({ attributes, setAttributes }): WPElement {
                     label={__("border width", "chatrix")}
                     value={attributes.borderWidth.value}
                     unit={attributes.borderWidth.unit}
-                    onChange={(value) => {
-                        setAttributes({ borderWidth: { value: value, unit: "px" } });
+                    onChange={(value, unit) => {
+                        setAttributes({ borderWidth: { value: value, unit: unit } });
                     }}
                 />
             </PanelRow>
@@ -52,8 +52,8 @@ export default function StylePanel({ attributes, setAttributes }): WPElement {
                     label={__("border radius", "chatrix")}
                     value={attributes.borderRadius.value}
                     unit={attributes.borderRadius.unit}
-                    onChange={(value) => {
-                        setAttributes({ borderRadius: { value: value, unit: "px" } });
+                    onChange={(value, unit) => {
+                        setAttributes({ borderRadius: { value: value, unit: unit } });
                     }}
                 />
             </PanelRow>

frontend/block/inspector/TextControlWithUnit.tsx

@@ -1,23 +1,53 @@
 import { BaseControl } from "@wordpress/components";
 import { useInstanceId } from "@wordpress/compose";
-import { forwardRef } from "@wordpress/element";
-import type { ChangeEvent, ForwardedRef } from 'react';
+import { forwardRef, useState } from "@wordpress/element";
+import type { ChangeEvent, FormEvent, ForwardedRef } from 'react';
 
 interface Props {
     value: number
     unit: string
-    onChange: any
+    onChange: (value: number, unit: string) => any
     label: string
     help?: string
 }
 
+interface State {
+    value: number;
+    unit: string;
+}
+
 export const TextControlWithUnit = forwardRef(UnforwardedTextControlWithUnit);
 export default TextControlWithUnit;
 
 function UnforwardedTextControlWithUnit(props: Props, ref: ForwardedRef<HTMLInputElement>) {
     const instanceId = useInstanceId(TextControlWithUnit);
     const id = `inspector-text-control-${instanceId}`;
-    const onChangeValue = (event: ChangeEvent<HTMLInputElement>) => props.onChange(event.target.value);
+    const units = ["px"];
+
+    const [state, setState] = useState<State>({
+        value: props.value,
+        unit: props.unit,
+    });
+
+    const onChangeValue = (event: ChangeEvent<HTMLInputElement>) => {
+        const target = event.target as HTMLInputElement;
+        const value = +target.value;
+        setState({
+            ...state,
+            value: value,
+        });
+        props.onChange(value, state.unit);
+    };
+
+    const onChangeUnit = (event: FormEvent<HTMLSelectElement>) => {
+        const target = event.target as HTMLSelectElement;
+        const unit = target.value;
+        setState({
+            ...state,
+            unit: unit,
+        });
+        props.onChange(state.value, unit);
+    };
 
     return (
         <div className={"chatrix-text-control-with-unit"}>
@@ -31,12 +61,14 @@ function UnforwardedTextControlWithUnit(props: Props, ref: ForwardedRef<HTMLInpu
                         className="components-text-control__input"
                         type={"text"}
                         id={id}
-                        value={props.value}
+                        value={state.value}
                         onChange={onChangeValue}
                         aria-describedby={!!props.help ? id + '__help' : undefined}
                         ref={ref}
                     />
-                    <span>{props.unit}</span>
+                    <select value={state.unit} onChange={onChangeUnit}>
+                        {units.map(unit => <option value={unit} key={unit}>{unit}</option>)}
+                    </select>
                 </span>
             </BaseControl>
         </div>