Updating the units of number fields in grapes js Style manager.

[FahemAhmad]

Hey !

I was following this grapes js -react example that @artf created.

i have a custom input field for number fields like padding, margin etc and i am unable to figure out how to change the unit of the property, For example if i have set padding 16px, i should be able to switch to rem and it should change the value to 1rem. Is there a function to update the attributes/properties ?

My code till now :

 case "scrollable-input":
      {
        const selectProp = prop as PropertySelect
        let units
        if (prop && prop.attributes && "units" in prop.attributes) {
          units = prop.attributes.units as any[]
        }

        const handleSelectChange = (event: any) => {
          const selectedUnit = event.target.value

          if (prop.attributes && "unit" in prop.attributes) {
            prop.setValue("unit", "rem")
          }
        }

        inputToRender = (
          <>
            <p className="mb-2">{selectProp.getLabel()}</p>
            <div className=" flex border border-primary-dark  w-1/2 justify-center items-center rounded-md">
              <DragLabel value={value} setValue={onChange} />
              <InputScroll
                type={"number"}
                value={value || 0}
                onChange={onChange}
                className="bg-primary"
              />
              <select
                onChange={handleSelectChange}
                value={
                  "unit" in prop.attributes
                    ? (prop.attributes.unit as string)
                    : ""
                }
              >
                {units.map((unit: any) => (
                  <option key={unit} value={unit}>
                    {unit}
                  </option>
                ))}
              </select>
            </div>
          </>
        )
      }
      break