@makeen.io/material-ui-kit/distr/molecules/Survey/Elements/Checkbox.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 MaterialCheckbox from "@material-ui/core/Checkbox";
import FormControlLabel from "@material-ui/core/FormControlLabel";
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,_onChange = _ref2.onChange,onRemoveOption = _ref2.onRemoveOption;
  var getLabel = function getLabel(_ref3) {var collectionIndex = _ref3.collectionIndex,option = _ref3.option,onOptionLabelUpdate = _ref3.onOptionLabelUpdate;
    if (mode !== "edit") {
      return option.label;
    }
    return /*#__PURE__*/React.createElement(EditableInput, { type: "checkbox", onLabelUpdate: onOptionLabelUpdate, collectionIndex: collectionIndex, value: option.label });
  };
  var renderMaterialCheckbox = function renderMaterialCheckbox() {return /*#__PURE__*/React.createElement(MaterialCheckbox, { disabled: disabled, key: option.name, checked: option.checked, onChange: function onChange(event) {return _onChange(event.target.checked, collectionIndex);}, name: option.name, color: "primary", size: "small" });};
  return /*#__PURE__*/React.createElement(Box, { display: "flex" }, /*#__PURE__*/
  React.createElement(FormControlLabel, { control: renderMaterialCheckbox(), label: getLabel({ collectionIndex: collectionIndex, onOptionLabelUpdate: onOptionLabelUpdate, option: option }) }),
  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 options = _ref4.options,onOptionLabelUpdate = _ref4.onOptionLabelUpdate,onRemoveOption = _ref4.onRemoveOption,onChange = _ref4.onChange,mode = _ref4.mode,disabled = _ref4.disabled;return /*#__PURE__*/React.createElement("div", null, 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, onChange: onChange, disabled: disabled });
  }));};
var SortableGroupComp = SortableContainer(GroupComp);
var Checkbox = function Checkbox(_ref5) {var options = _ref5.options,onChange = _ref5.onChange,mode = _ref5.mode,onOptionLabelUpdate = _ref5.onOptionLabelUpdate,onRemoveOption = _ref5.onRemoveOption,onReorderOption = _ref5.onReorderOption,onAddOption = _ref5.onAddOption,disabled = _ref5.disabled;
  var Container = mode === "edit" ? SortableGroupComp : GroupComp;
  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/
  React.createElement(Container, { 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 Checkbox;
//# sourceMappingURL=Checkbox.js.map