@arudovwen/react-form-builder/lib/dynamic-option-list.js

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _UUID = _interopRequireDefault(require("./UUID"));
class DynamicOptionList extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      element: props.element,
      dirty: false
    };
    this.editValue = this.editValue.bind(this);
    this.editText = this.editText.bind(this);
    this.editKey = this.editKey.bind(this);
    this.editCorrect = this.editCorrect.bind(this);
    this.updateElement = this.updateElement.bind(this);
  }
  editValue(option_index, e) {
    const this_element = this.state.element;
    this_element.options[option_index].value = e.target.value;
    this.setState({
      element: this_element,
      dirty: true
    });
  }
  editText(option_index, e) {
    const this_element = this.state.element;
    this_element.options[option_index].text = e.target.value;
    this.setState({
      element: this_element,
      dirty: true
    });
  }
  editKey(option_index, e) {
    const this_element = this.state.element;
    this_element.options[option_index].key = e.target.value;
    this.setState({
      element: this_element,
      dirty: true
    });
  }
  editCorrect(option_index, e) {
    const this_element = this.state.element;
    this_element.options[option_index].correct = e.target.checked;
    this.setState({
      element: this_element,
      dirty: true
    });
  }
  updateElement() {
    this.props.updateElement.call(this.props.preview, this.state.element);
    this.setState({
      dirty: false
    });
  }
  addOption() {
    const this_element = this.state.element;
    const groupKey = this_element.element.toLowerCase();
    this_element.options.push({
      value: '',
      text: '',
      key: '',
      correct: false,
      id: `${groupKey}_option_${_UUID.default.uuid()}`
    });
    this.props.updateElement.call(this.props.preview, this_element);
  }
  removeOption(index) {
    const this_element = this.state.element;
    this_element.options.splice(index, 1);
    this.props.updateElement.call(this.props.preview, this_element);
  }
  render() {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "w-full"
    }, this.state.element.options.map((option, index) => /*#__PURE__*/_react.default.createElement("div", {
      key: option.id,
      className: "flex gap-2 mb-2"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "w-1/4"
    }, /*#__PURE__*/_react.default.createElement("input", {
      className: "w-full px-2 py-1 border border-gray-300 rounded",
      type: "text",
      value: option.text || '',
      onChange: e => this.editText(index, e),
      placeholder: "Enter text"
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "w-1/4"
    }, /*#__PURE__*/_react.default.createElement("input", {
      className: "w-full px-2 py-1 border border-gray-300 rounded",
      type: "text",
      value: option.value || '',
      onChange: e => this.editValue(index, e),
      placeholder: "Enter value"
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "w-1/4"
    }, /*#__PURE__*/_react.default.createElement("input", {
      className: "w-full px-2 py-1 border border-gray-300 rounded",
      type: "text",
      value: option.key || '',
      onChange: e => this.editKey(index, e),
      placeholder: "Enter key"
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "flex items-center"
    }, /*#__PURE__*/_react.default.createElement("input", {
      type: "checkbox",
      checked: !!option.correct,
      onChange: e => this.editCorrect(index, e)
    })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
      type: "button",
      className: "px-2 py-1 text-white bg-red-500 rounded",
      onClick: () => this.removeOption(index)
    }, "\u2715")))), /*#__PURE__*/_react.default.createElement("div", {
      className: "mt-2"
    }, /*#__PURE__*/_react.default.createElement("button", {
      type: "button",
      className: "px-3 py-1 text-white bg-blue-500 rounded",
      onClick: () => this.addOption()
    }, "+ Add Option")), this.state.dirty && /*#__PURE__*/_react.default.createElement("div", {
      className: "mt-2"
    }, /*#__PURE__*/_react.default.createElement("button", {
      type: "button",
      className: "px-3 py-1 text-white bg-green-500 rounded",
      onClick: this.updateElement
    }, "Save Changes")));
  }
}
exports.default = DynamicOptionList;