OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
  const { mode } = React.useContext(optionsCtx);
  const allowFormula = mode === "show" || mode === "list";
  /**
   * @returns {void}
   */
  const switchIsFml = () => {
    const isFmlAfter = !isFormula[nodekey];
    setProp((prop) => {
      prop.isFormula[nodekey] = isFmlAfter;
      if (isFmlAfter && prop[nodekey] && prop[nodekey][0] !== '"') {
        prop[nodekey] = `"${prop[nodekey]}"`;
      } else if (
        !isFmlAfter &&
        typeof prop[nodekey] === "string" &&
        prop[nodekey][0] === '"' &&
        prop[nodekey][prop[nodekey].length - 1] === '"'
      ) {
        prop[nodekey] = prop[nodekey].substring(1, prop[nodekey].length - 1);
      }
    });
  };
  let errorString = false;
  if (allowFormula && isFormula[nodekey]) {
    try {
      Function("return " + node[nodekey]);
    } catch (error) {
      errorString = error.message;
    }
  }
  return !allowFormula ? (
    children
  ) : (
    <Fragment>
      <div className="input-group  input-group-sm w-100">
        {isFormula[nodekey] ? (
          <input
            type="text"
            className="form-control text-to-display"
            value={node[nodekey] || ""}
            spellCheck={false}
            onChange={(e) => {
              if (e.target) {
                const target_value = e.target.value;
                setProp((prop) => (prop[nodekey] = target_value));
              }
            }}
          />
        ) : (
          children
        )}

        <button
          className={`btn activate-formula ${
            isFormula[nodekey] ? "btn-secondary" : "btn-outline-secondary"
          }`}
          title="Calculated formula"
          type="button"
          onClick={switchIsFml}
        >
          <i className="fas fa-calculator"></i>
        </button>
      </div>
      {isFormula[nodekey] && (
        <div style={{ marginTop: "-5px" }}>
          <small className="text-muted font-monospace">
            FORMULA
            <FormulaTooltip />
          </small>
          {errorString ? (
            <small className="text-danger font-monospace d-block">
              {errorString}
            </small>
          ) : null}
        </div>
      )}
    </Fragment>
  );
}
@param {object} props
@param {function} props.setProp
@param {object} props.isFormula
@param {object} props.node
@param {string} props.nodekey
@param {string} props.children
@returns {Fragment}
@namespace
@category saltcorn-builder
@subcategory components / elements / utils