@arudovwen/react-form-builder/lib/OptionsCreate.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _UUID = _interopRequireDefault(require("./UUID"));
class DynamicOptionList extends _react.default.Component {
  constructor(props) {
    super(props);
    (0, _defineProperty2.default)(this, "updateOption", (index, field, value) => {
      this.setState(prevState => {
        const element = {
          ...prevState.element
        };
        if (!element.options) element.options = [];
        element.options[index] = {
          ...element.options[index],
          [field]: value
        };
        return {
          element,
          dirty: true
        };
      });
    });
    (0, _defineProperty2.default)(this, "editCorrectValue", (index, e) => {
      this.updateOption(index, 'correct', e.target.checked);
    });
    (0, _defineProperty2.default)(this, "addOption", () => {
      this.setState(prevState => {
        const element = {
          ...prevState.element
        };
        if (!element.options) element.options = [];
        const groupKey = element.element?.toLowerCase?.() || 'unknown';
        element.options.push({
          value: '',
          text: '',
          key: '',
          correct: false,
          id: `${groupKey}_option_${_UUID.default.uuid()}`
        });
        if (this.props.updateElement) {
          this.props.updateElement.call(this.props.preview, element);
        }
        return {
          element
        };
      });
    });
    (0, _defineProperty2.default)(this, "removeOption", index => {
      this.setState(prevState => {
        const element = {
          ...prevState.element
        };
        if (Array.isArray(element.options)) {
          element.options.splice(index, 1);
        }
        return {
          element,
          dirty: true
        };
      });
    });
    this.state = {
      element: props.element || {
        options: []
      },
      dirty: false
    };
  }
  render() {
    const options = this.state.element?.options || [];
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "p-4 bg-white border rounded"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "grid grid-cols-5 gap-2 pb-2 mb-2 font-semibold border-b"
    }, /*#__PURE__*/_react.default.createElement("div", null, "Text"), /*#__PURE__*/_react.default.createElement("div", null, "Value"), /*#__PURE__*/_react.default.createElement("div", null, "Key"), /*#__PURE__*/_react.default.createElement("div", null, "Correct"), /*#__PURE__*/_react.default.createElement("div", null, "Actions")), options.map((option, index) => /*#__PURE__*/_react.default.createElement("div", {
      key: option.id || index,
      className: "grid items-center grid-cols-5 gap-2 mb-2"
    }, /*#__PURE__*/_react.default.createElement("input", {
      className: "input-style",
      type: "text",
      value: option.text || '',
      onChange: e => this.updateOption(index, 'text', e.target.value),
      placeholder: "Enter text"
    }), /*#__PURE__*/_react.default.createElement("input", {
      className: "input-style",
      type: "text",
      value: option.value || '',
      onChange: e => this.updateOption(index, 'value', e.target.value),
      placeholder: "Enter value"
    }), /*#__PURE__*/_react.default.createElement("input", {
      className: "input-style",
      type: "text",
      value: option.key || '',
      onChange: e => this.updateOption(index, 'key', e.target.value),
      placeholder: "Enter key"
    }), /*#__PURE__*/_react.default.createElement("input", {
      type: "checkbox",
      checked: option.correct || false,
      onChange: e => this.editCorrectValue(index, e),
      className: "w-5 h-5"
    }), /*#__PURE__*/_react.default.createElement("button", {
      type: "button",
      className: "px-3 py-1 text-white bg-red-500 rounded hover:bg-red-600",
      onClick: () => this.removeOption(index)
    }, "Remove"))), /*#__PURE__*/_react.default.createElement("button", {
      type: "button",
      className: "px-4 py-2 mt-3 text-white bg-blue-500 rounded hover:bg-blue-600",
      onClick: this.addOption
    }, "Add Option"));
  }
}
var _default = exports.default = DynamicOptionList;