@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
169 lines (151 loc) • 7.92 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _extends from "@babel/runtime/helpers/extends";import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n .text {\n margin-top: 0;\n }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React, { useState } from "react";
import { Input, Select } from "../../../atoms";
import styled from "styled-components";
import BaseMatrix from "../BaseMatrix";
import AddItem from "../../AddItem";
import ConfirmationDialog from "../../ConfirmationDialog";
var selectStyle = function selectStyle(selectProps) {return "\n min-width: 20px;\n .MuiSelect-outlined.MuiSelect-outlined {\n padding-left: 5px;\n padding-top: 5px;\n padding-bottom: 5px;\n }\n";};
var formControlStyle = function formControlStyle(formControlProps) {return "\n max-width: 110px;\n font-size: 16px;\n";};
var menuItemStyle = function menuItemStyle(menuItemProps) {return "\n min-height: 36px!important;\n";};
var adderStyle = function adderStyle(adderProps) {
var adderColor = adderProps.theme.palette.info.main;
return "color: ".concat(adderColor, ";");
};
var DialogContentWrapper = styled.div(_templateObject());
var DropdownMatrix = function DropdownMatrix(_ref) {var matrix = _ref.matrix,selections = _ref.selections,onSelectionUpdate = _ref.onSelectionUpdate,onOptionsUpdate = _ref.onOptionsUpdate,disabled = _ref.disabled,rest = _objectWithoutProperties(_ref, ["matrix", "selections", "onSelectionUpdate", "onOptionsUpdate", "disabled"]);
var convertArrayToNewlineStrings = function convertArrayToNewlineStrings(arr) {return arr.join("\r\n");};
var convertNewlineStringsToArray = function convertNewlineStringsToArray(str) {return str.split(/\r?\n/);};
var initOptionsDialog = {
columnIndex: null,
open: false,
options: ""
};var _useState =
useState(initOptionsDialog),_useState2 = _slicedToArray(_useState, 2),optionsDialog = _useState2[0],setOptionsDialog = _useState2[1];
var cancelEditOptions = function cancelEditOptions() {
setOptionsDialog(initOptionsDialog);
};
var initiateEditOptions = function initiateEditOptions(_column, colIndex) {
var currentOptions = _column[colIndex].options.map(function (item) {return item.text;});
var listStr = convertArrayToNewlineStrings(currentOptions);
setOptionsDialog({
columnIndex: colIndex,
open: true,
options: listStr
});
};
var handleOptionsEdit = function handleOptionsEdit(str) {
setOptionsDialog(function (obj) {return {
columnIndex: obj.columnIndex,
open: obj.open,
options: str
};});
};
var saveNewOptions = function saveNewOptions() {
var currentOptionsDialog = _extends({}, optionsDialog);
var newOptionSet = convertNewlineStringsToArray(currentOptionsDialog.options);
var newOptions = newOptionSet.map(function (op) {return {
id: op,
text: op
};});
if (onOptionsUpdate) {
onOptionsUpdate({
columnIndex: currentOptionsDialog.columnIndex,
options: newOptions
});
}
setOptionsDialog(initOptionsDialog);
};
var rows = matrix[0];
var columns = matrix[1];
// const matrixColumns = columns.map(item => Object.keys(item)[0]);
var matrixForBase = [rows, columns];
var handleSelectionUpdate = function handleSelectionUpdate(rowIndex, colIndex, value) {
var updateObject = {
added: null,
modified: null,
removed: null,
selections: []
};
var recentSelections = _toConsumableArray(selections) || [];
var addToUpdateObject = function addToUpdateObject() {
updateObject.added = [rowIndex, colIndex, value];
recentSelections.push(updateObject.added);
updateObject.selections = recentSelections;
};
if (recentSelections.length > 0) {
var existingIndex = null;
recentSelections.forEach(function (currentSelection, selectionIndex) {
if (currentSelection[0] === rowIndex &&
currentSelection[1] === colIndex) {
existingIndex = selectionIndex;
}
});
// Explicit not null check to handle 0 index
if (existingIndex !== null) {
if (value === "") {
updateObject.removed = [
recentSelections[existingIndex][0],
recentSelections[existingIndex][1],
recentSelections[existingIndex][2]];
recentSelections.splice(existingIndex, 1);
} else
{
updateObject.modified = [
recentSelections[existingIndex][0],
recentSelections[existingIndex][1],
recentSelections[existingIndex][2]];
recentSelections[existingIndex][2] = value;
}
updateObject.selections = recentSelections;
} else
{
addToUpdateObject();
}
} else
{
addToUpdateObject();
}
// eslint-disable-next-line @typescript-eslint/tslint/config
onSelectionUpdate && onSelectionUpdate(updateObject);
};
var getValue = function getValue(rowIndex, colIndex) {
var value = "";
if (selections && selections.length > 0) {
// eslint-disable-next-line @typescript-eslint/prefer-for-of,@typescript-eslint/tslint/config
for (var i = 0; i < selections.length; i++) {
var currentSelection = selections[i];
if (currentSelection[0] === rowIndex &&
currentSelection[1] === colIndex) {
value = currentSelection[2];
break;
}
}
}
return value;
};
var getSelectOptions = function getSelectOptions(rowIndex, colIndex) {
var allOptions = [{ value: "", item: "" }];
if (columns[colIndex]) {
allOptions.push.apply(allOptions, _toConsumableArray(columns[colIndex].options.map(function (item) {return {
value: item.id,
label: item.text
};})));
}
return allOptions;
};
var renderElement = function renderElement(_ref2) {var rowIndex = _ref2.rowIndex,colIndex = _ref2.colIndex;return /*#__PURE__*/React.createElement(Select, { label: "", disabled: disabled, id: "".concat(rowIndex, "-").concat(colIndex), onChange: function onChange(selectedValue) {return handleSelectionUpdate(rowIndex, colIndex, selectedValue);}, value: getValue(rowIndex, colIndex), options: getSelectOptions(rowIndex, colIndex), selectStyle: selectStyle, formControlStyle: formControlStyle, menuItemStyle: menuItemStyle });};
var renderAdderElement = function renderAdderElement(_ref3) {var type = _ref3.type,colIndex = _ref3.colIndex;
if (type === "row" && colIndex < columns.length) {
return /*#__PURE__*/React.createElement(AddItem, { type: "row", label: "Answer Choices", handleAdd: function handleAdd() {return initiateEditOptions(columns, colIndex);}, adderStyle: adderStyle });
}
return null;
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/
React.createElement(BaseMatrix, _extends({ matrix: matrixForBase, renderElement: renderElement, renderAdderElement: renderAdderElement }, rest)), /*#__PURE__*/
React.createElement(ConfirmationDialog, { title: "Answer Choices", open: optionsDialog.open, confirmText: "Save", cancelText: "Cancel", confirmColor: "info", onClose: cancelEditOptions, onCancel: cancelEditOptions, onConfirm: saveNewOptions }, /*#__PURE__*/
React.createElement(DialogContentWrapper, null, /*#__PURE__*/
React.createElement("p", { className: "text" }, "Each row represents an individual option"), /*#__PURE__*/
React.createElement(Input, { rows: 2, value: optionsDialog.options, onChange: handleOptionsEdit }))));
};
export default DropdownMatrix;
//# sourceMappingURL=index.js.map