Progress Bar Input

Now we want to use the bar as an input too. So it will change the value it's bound to when the user clicks on it.

import * as React from "react";
import { Model, _ } from "@flowable/forms";

export function ProgressBarInput(props: Model.Props) {
  const { config } = props;
  const max = config?.extraSettings?.max || 100;
  const val = ((config?.value || 0) * 100) / max;
  return (
    <div id={config.id} className="flw__component">
      <div
        style={{
          width: "100%",
          height: "39px",
          backgroundColor: "#dadada",
          borderRadius: "2px",
          position: "relative",
        }}
        onClick={(e) => {
          props.onChange(max * (e.clientX / e.currentTarget.clientWidth));
        }}
      >
        <div
          style={{
            width: `${val}%`,
            height: "100%",
            backgroundColor: val > 66 ? "#85cc00" : val > 33 ? "#ffbf00" : "#ff2e00",
            borderRadius: "2px",
            transition: "all .2s ease-out",
          }}
        />
      </div>
    </div>
  );
}

Now we are calling the onChange prop just with the new value. The engine will pick this value and update the variable this component is bound to.

Then the resolved tree of the form will be $resolved and react will call render on the components. This component will receive the updated value in the config.value prop and will be re-rendered.