ButtonOrLinkSettingsRows = ({
  setProp,
  btnClass = null,
  keyPrefix = "",
  values,
  linkFirst = false,
  linkIsBlank = false,
  allowRunOnLoad = false,
  faIcons = [],
}) => {
  const setAProp = setAPropGen(setProp);
  const addBtnClass = (s) => (btnClass ? `${btnClass} ${s}` : s);
  return [
    <tr key="btnstyle">
      <td>
        <label>Style</label>
      </td>
      <td>
        <select
          className="form-control form-select"
          value={values[keyPrefix + "style"]}
          onChange={setAProp(keyPrefix + "style")}
        >
          {linkFirst ? (
            <option value={linkIsBlank ? "" : addBtnClass("btn-link")}>
              Link
            </option>
          ) : null}
          <option value={addBtnClass("btn-primary")}>Primary button</option>
          <option value={addBtnClass("btn-secondary")}>Secondary button</option>
          <option value={addBtnClass("btn-success")}>Success button</option>
          <option value={addBtnClass("btn-danger")}>Danger button</option>
          <option value={addBtnClass("btn-warning")}>Warning button</option>
          <option value={addBtnClass("btn-info")}>Info button</option>
          <option value={addBtnClass("btn-outline-primary")}>
            Primary outline button
          </option>
          <option value={addBtnClass("btn-outline-secondary")}>
            Secondary outline button
          </option>
          <option value={addBtnClass("btn-outline-success")}>
            Success outline button
          </option>
          <option value={addBtnClass("btn-outline-danger")}>
            Danger outline button
          </option>
          <option value={addBtnClass("btn-outline-warning")}>
            Warning outline button
          </option>
          <option value={addBtnClass("btn-outline-info")}>
            Info outline button
          </option>
          <option value={addBtnClass("btn-custom-color")}>
            Button custom color
          </option>
          {!linkFirst ? (
            <option value={addBtnClass("btn-link")}>Link</option>
          ) : null}
          {!linkFirst && allowRunOnLoad ? (
            <option value="on_page_load">Run on Page Load</option>
          ) : null}
        </select>
      </td>
    </tr>,
    values[keyPrefix + "style"] !== "on_page_load" ? (
      <tr key="btnsz">
        <td>
          <label>Size</label>
        </td>
        <td>
          <select
            className="form-control form-select"
            value={values[keyPrefix + "size"]}
            onChange={setAProp(keyPrefix + "size")}
          >
            <option value="">Standard</option>
            <option value="btn-lg">Large</option>
            <option value="btn-sm">Small</option>
            <option value="btn-sm btn-xs">Extra Small</option>
            <option value="btn-block">Block</option>
            <option value="btn-block btn-lg">Large block</option>
          </select>
        </td>
      </tr>
    ) : null,
    values[keyPrefix + "style"] !== "on_page_load" ? (
      <tr key="btnicon">
        <td>
          <label>Icon</label>
        </td>
        <td>
          <FontIconPicker
            value={values[keyPrefix + "icon"]}
            onChange={(value) =>
              setProp((prop) => (prop[keyPrefix + "icon"] = value))
            }
            isMulti={false}
            icons={faIcons || []}
          />
        </td>
      </tr>
    ) : null,
    ...(values[keyPrefix + "style"] === addBtnClass("btn-custom-color")
      ? [
          <tr key="btnbgcol">
            <td>
              <label>Background</label>
            </td>
            <td>
              <input
                type="color"
                value={values[keyPrefix + "bgcol"]}
                className="form-control-sm w-50"
                onChange={setAProp(keyPrefix + "bgcol")}
              />
            </td>
          </tr>,
          <tr key="btnbdcol">
            <td>
              <label>Border</label>
            </td>
            <td>
              <input
                type="color"
                value={values[keyPrefix + "bordercol"]}
                className="form-control-sm w-50"
                onChange={setAProp(keyPrefix + "bordercol")}
              />
            </td>
          </tr>,
          <tr key="btntxtcol">
            <td>
              <label>Text</label>
            </td>
            <td>
              <input
                type="color"
                value={values[keyPrefix + "textcol"]}
                className="form-control-sm w-50"
                onChange={setAProp(keyPrefix + "textcol")}
              />
            </td>
          </tr>,
        ]
      : []),
    values[keyPrefix + "style"] !== "on_page_load" ? (
      <Fragment key="btnfrag">
        <tr key="btntitle">
          <td>
            <label>Hover title</label>
          </td>
          <td>
            <input
              className="form-control linkoractiontitle"
              value={values[keyPrefix + "title"]}
              onChange={setAProp(keyPrefix + "title")}
            />
          </td>
        </tr>
        <tr key="btnclass">
          <td>
            <label>Class</label>
          </td>
          <td>
            <input
              className="form-control linkoractionclass"
              value={values[keyPrefix + "class"]}
              onChange={setAProp(keyPrefix + "class")}
            />
          </td>
        </tr>
      </Fragment>
    ) : null,
  ];
}
@param {object} props
@param {function} props.setProp
@param {string} [props.btnClass = null]
@param {string} [props.keyPrefix = ""]
@param {object} props.values
@param {boolean} [props.linkFirst = false]
@returns {tr}
@category saltcorn-builder
@subcategory components / elements / utils
@namespace