@makeen.io/material-ui-kit/distr/molecules/Survey/Elements/Radio.js

Makeen UI components kit. Based on material-ui.

import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject2() {var data = _taggedTemplateLiteral(["\n  margin-left: auto;\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import Box from "@material-ui/core/Box";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Materi from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import { Input } from "../../../atoms";
import { SortableContainer, SortableElement } from "react-sortable-hoc";
import styled from "styled-components";
import AddItem from "../../AddItem";
import EditRowCol from "../../EditRow";
var Wrapper = styled.div(_templateObject());



var EditColWrapper = styled.div(_templateObject2());


var EditableInput = function EditableInput(_ref) {var type = _ref.type,collectionIndex = _ref.collectionIndex,value = _ref.value,onLabelUpdate = _ref.onLabelUpdate;return /*#__PURE__*/React.createElement(Input, { value: value, onChange: function onChange(ev) {return onLabelUpdate && onLabelUpdate(type, collectionIndex, ev.target.value);}, required: true });};
var GroupItem = function GroupItem(_ref2) {var mode = _ref2.mode,_ref2$disabled = _ref2.disabled,disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,collectionIndex = _ref2.collectionIndex,option = _ref2.option,onOptionLabelUpdate = _ref2.onOptionLabelUpdate,onRemoveOption = _ref2.onRemoveOption;
  var getLabel = function getLabel(_ref3) {var cIndex = _ref3.collectionIndex,opt = _ref3.option,labelUpdate = _ref3.onOptionLabelUpdate;
    if (mode !== "edit") {
      return opt.label;
    }
    return /*#__PURE__*/React.createElement(EditableInput, { type: "radio", onLabelUpdate: labelUpdate, collectionIndex: cIndex, value: opt.label });
  };
  return /*#__PURE__*/React.createElement(Box, { display: "flex" }, /*#__PURE__*/
  React.createElement(FormControlLabel, { disabled: disabled, key: option.name, control: /*#__PURE__*/React.createElement(Materi, { value: option.value, size: "small", color: "primary" }), label: getLabel({ collectionIndex: collectionIndex, option: option, onOptionLabelUpdate: onOptionLabelUpdate }) }),
  mode === "edit" ? /*#__PURE__*/React.createElement(EditColWrapper, null, /*#__PURE__*/
  React.createElement(EditRowCol, { index: collectionIndex, onRemove: function onRemove(rowIndex) {
      // console.log(rowIndex);
      onRemoveOption(rowIndex);
    } })) : null);
};
var SortableGroupItem = SortableElement(GroupItem);
var GroupComp = function GroupComp(_ref4) {var value = _ref4.value,name = _ref4.name,onChange = _ref4.onChange,options = _ref4.options,onOptionLabelUpdate = _ref4.onOptionLabelUpdate,onRemoveOption = _ref4.onRemoveOption,mode = _ref4.mode,disabled = _ref4.disabled;return /*#__PURE__*/React.createElement(RadioGroup, { name: name, value: value, onChange: onChange }, options.map(function (option, index) {
    var Item = mode === "edit" ? SortableGroupItem : GroupItem;
    return /*#__PURE__*/React.createElement(Item, { key: index, mode: mode, index: index, collectionIndex: index, option: option, onOptionLabelUpdate: onOptionLabelUpdate, onRemoveOption: onRemoveOption, disabled: disabled });
  }));};
var SortableGroupComp = SortableContainer(GroupComp);
var SurveyElementRadioGroup = function SurveyElementRadioGroup(_ref5) {var value = _ref5.value,name = _ref5.name,onChange = _ref5.onChange,options = _ref5.options,onOptionLabelUpdate = _ref5.onOptionLabelUpdate,onRemoveOption = _ref5.onRemoveOption,onReorderOption = _ref5.onReorderOption,onAddOption = _ref5.onAddOption,mode = _ref5.mode,_ref5$disabled = _ref5.disabled,disabled = _ref5$disabled === void 0 ? false : _ref5$disabled;
  var Container = mode === "edit" ? SortableGroupComp : GroupComp;
  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/
  React.createElement(Container, { value: value, name: name, onChange: onChange, options: options, onOptionLabelUpdate: onOptionLabelUpdate, onRemoveOption: onRemoveOption, mode: mode, disabled: disabled, useDragHandle: true, onSortEnd: function onSortEnd(_ref6) {var oldIndex = _ref6.oldIndex,newIndex = _ref6.newIndex;
      if (onReorderOption) {
        onReorderOption({ oldIndex: oldIndex, newIndex: newIndex });
      }
    } }),
  mode === "edit" ? /*#__PURE__*/React.createElement(Box, { mt: 2 }, /*#__PURE__*/
  React.createElement(AddItem, { type: "option", label: "Add Option", handleAdd: onAddOption })) : null);
};
export default SurveyElementRadioGroup;
//# sourceMappingURL=Radio.js.map