execution-input

"render types inputs "

Install

import React, { useState } from "react";

import ExecutionInput from "execution-input";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {faEdit, faCheck, faTrafficLight} from "@fortawesome/free-solid-svg-icons";
import Truncate from "react-truncate";

// need install react-dates, moment and bootstrap
const options2 = [
  {
    id: 4,
    value: "esta es una nota larga para el campo ",
    note: "esta seria la nota que quieras poner en el radio",
    state: "",
    data: {
      name: "test 1",
      value: "Yes this is note 1this is note 1this is note 1this is note 1",
      id: 1
    }
  },
  {
    id: 5,
    value: "test note 2 ",
    note: "this is note 2 ",
    state: "",
    data: { name: "test 2", value: "test note 2", id: 3 }
  },
  {
    id: 6,
    value: "test note 3",
    note: "No route",
    state: "",
    data: { name: "test 1", value: "test note 3", id: 3 }
  }
];

const options = [
  {
    id: 1,
    value: "test note 1 ",
    label: (
      <Truncate lines={4} ellipsis="...">
        {
          "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content."
        }
      </Truncate>
    ),
    note: (
      <small className="text-danger text-left">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos itaque
        iusto maxime non omnis quaerat, quam quasi voluptas. Enim, saepe,
        voluptates? Blanditiis esse eum ex iste nulla quibusdam rem veniam!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
        alias aperiam blanditiis consequatur cum fugit illo ipsum labore magnam
        molestias, nemo neque nihil non quae quas reprehenderit tenetur
        voluptates voluptatibus.
      </small>
    ),
    state: "green",
    icon: (
      <div>
        <FontAwesomeIcon icon={faEdit} /> <FontAwesomeIcon icon={faEdit} />{" "}
        <FontAwesomeIcon icon={faEdit} />
      </div>
    ),
    data: {
      name: "test 1",
      value: "Yes this is note 1this is note 1this is note 1this is note 1",
      id: 1
    }
  },
  {
    id: 2,
    value: "test note 2 ",
    note: "",
    label: (
      <div className="m-auto">
        <p className="m-0">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi earum
          obcaecati optio perferendis quidem repellat repellendus, veritatis.
          Animi corporis cumque, dolorem impedit inventore itaque, molestiae
          perferendis quae quod ratione ullam? Lorem ipsum dolor sit amet,
          consectetur adipisicing elit. Accusantium alias
        </p>
      </div>
    ),
    state: "yellow",
    icon: <FontAwesomeIcon icon={faEdit} />,
    data: { name: "test 2", value: "test note 2", id: 3 }
  },
  {
    id: 3,
    value: "test note 3",
    note: "No route",
    state: "red",
    label: "test note 3",
    icon: <FontAwesomeIcon icon={faEdit} />,
    data: {
      name: "test 1",
      value: "test note 3",
      id: 3,
      description: (
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aut
          cumque distinctio ducimus ea eaque esse explicabo, facere facilis
          fugiat natus neque officia provident quia reprehenderit repudiandae
          sunt suscipit veniam.
        </p>
      )
    }
  }
];

const App = () => {
  const [valueSmallText, setValueSmallText] = useState("");
  const [valueLargeText, setValueLargeText] = useState("");
  const [valueTimeText, setValueTimeText] = useState("");
  const [valueNumberText, setValueNumberText] = useState("");
  const [valueRadio, setValueRadio] = useState({});
  const [valueRadio2, setValueRadio2] = useState({});
  const [valueCheckbox, setValueCheckbox] = useState({});
  const [valueSelect, setValueSelect] = useState(null);
  const [valueSelectMulti, setValueSelectMulti] = useState(null);
  const [date, setDate] = useState(null);
  const [dateRange, setDateRange] = useState({
    from: new Date(),
    to: new Date()
  });

  return (
    <div className="mt-5">
      <form
        className="col-lg-8 col-md-10 col-12 mx-auto"
        onSubmit={event => event.preventDefault()}
      >
        <ExecutionInput type={"BUTTON"} options={options}/>
        <ExecutionInput type="RADIO_BUTTON_DESCRIPTION"
                        value={valueRadio.value}
                        required
                        onChange={e => setValueRadio(e)}
                        label="label radio"
                        radioAction={a => {
                          console.log(a)
                        }}
                        options={options}/>
        <ExecutionInput value={date} type="SCHEDULE" required onChange={e => setDate(e)}/>
        <ExecutionInput type="LINK"
                        label={<div className="text-center"><b><a href={"http://engine-dev.mrreset.com/#/flow"}>contact us</a></b></div>}/>
        <ExecutionInput type="LABEL" placeholder="hola" label="hola 1" id="12222" name="name-1"/>
        <ExecutionInput type="SMALL_TEXT"
                        value={valueSmallText}
                        onChange={e => setValueSmallText(e)}
                        label="label small text"
                        placeholder="small text"/>
        <ExecutionInput type="SMALL_TEXT"
                        childType="PHONE"
                        value={valueSmallText}
                        onChange={e => setValueSmallText(e)}
                        label="label small texT phone"
                        placeholder="small text phone"/>
        <ExecutionInput type="SMALL_TEXT"
                        childType="EMAIL"
                        value={valueSmallText}
                        onChange={e => setValueSmallText(e)}
                        label="label small texT email"
                        placeholder="small text email"/>
        <ExecutionInput type="SMALL_TEXT"
                        childType="SSN"
                        value={valueSmallText}
                        onChange={e => setValueSmallText(e)}
                        label="label small texT ssn"
                        placeholder="small text ssn"/>
        <ExecutionInput type="LARGE_TEXT"
                        value={valueLargeText}
                        onChange={e => setValueLargeText(e)}
                        label="label large text"
                        placeholder="large text"/>
        <ExecutionInput type="TIME"
                        value={valueTimeText}
                        onChange={e => setValueTimeText(e)}
                        label="label time text"/>
        <ExecutionInput type="NUMBER"
                        value={valueNumberText}
                        onChange={e => setValueNumberText(e)}
                        label="label number"
                        placeholder="number text"/>
        <ExecutionInput type="RADIO_BUTTON"
                        value={valueRadio.value}
                        onChange={e => setValueRadio(e)}
                        label="label radio"
                        options={options}
                        radioIcon={<FontAwesomeIcon icon={faTrafficLight}/>}
                        singleValue/>
        <ExecutionInput
          type="RADIO_BUTTON"
          value={valueRadio2.value}
          onChange={e => setValueRadio2(e)}
          label="label radio"
          options={options2}
          customChecked={
            <FontAwesomeIcon style={{ fontSize: "13px" }} icon={faCheck} />
          }
          className="container-radio"
          alignText="left"
          singleValue
        />

        <ExecutionInput
          type="RADIO_BUTTON"
          value={valueCheckbox}
          required
          className="container-checkbox"
          customChecked={
            <FontAwesomeIcon style={{ fontSize: "13px" }} icon={faCheck} />
          }
          onChange={e => setValueCheckbox(e)}
          label="label checkbox"
          alignText="center"
          options={options}
        />
        <ExecutionInput type="SELECT"
                        value={valueSelectMulti}
                        onChange={e => setValueSelectMulti(e)}
                        label="label select"
                        placeholder="select text"
                        options={options}/>
        <ExecutionInput type="SELECT"
                        value={valueSelect}
                        onChange={e => setValueSelect(e)}
                        label="label select"
                        singleValue
                        placeholder="select text"
                        options={options}/>
        <ExecutionInput
          type="DATE"
          label="label date"
          value={date}
          required
          onChange={e => setDate(e)}
        />
        <ExecutionInput type="DATE_RANGE"
                        label="label date range"
                        value={dateRange}
                        onChange={(e) => setDateRange(e)}/>
        <button className="btn btn-block btn-success btn-sm">test</button>
      </form>
    </div>
  );
};

export default App;

License

MIT © sbx