@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
238 lines (208 loc) • 13.9 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _extends from "@babel/runtime/helpers/extends";import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject3() {var data = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n margin-left: auto;\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n flex-grow: 1;\n\n .question {\n &__title {\n display: flex;\n\n &_row {\n font-size: 13px;\n\n justify-content: flex-start;\n align-items: center;\n }\n\n &_column {\n font-size: 12px;\n\n flex-direction: column;\n align-items: flex-start;\n }\n }\n }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React, { useEffect, useState } from "react";
import Grid from "@material-ui/core/Grid";
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 MAX_COLUMNS = 7; // Name Column + Max 5 Item Column + Edit Column
var Wrapper = styled.div(_templateObject());
var EditColWrapper = styled.div(_templateObject2());
var EditableWrapper = styled.div(_templateObject3());
var isOrigin = function isOrigin(rowIndex, colIndex) {return rowIndex === 0 && colIndex === 0;};
var isEditColumn = function isEditColumn(mode, columns, colIndex) {return mode === "edit" && colIndex === columns.length - 1;};
var isEditColumnHeader = function isEditColumnHeader(mode, columns, colIndex, rowIndex) {return isEditColumn(mode, columns, colIndex) && rowIndex === 0;};
var isAddColumn = function isAddColumn(mode, columns, colIndex) {
var val = false;
if (mode === "edit" && colIndex === columns.length - 2) {
if (columns.length !== MAX_COLUMNS) {
val = true;
} else
if (columns[colIndex].id === "matrix-add-column") {
val = true;
}
}
return val;
};
var isAddColumnAction = function isAddColumnAction(mode, columns, colIndex, rowIndex) {return isAddColumn(mode, columns, colIndex) && rowIndex === 0;};
var isAddRow = function isAddRow(mode, rows, rowIndex) {return mode === "edit" && rowIndex === rows.length - 1;};
var isAddRowAction = function isAddRowAction(mode, rows, rowIndex, colIndex) {return isAddRow(mode, rows, rowIndex) && colIndex === 0;};
var getMatrixLabel = function getMatrixLabel(collection, collectionIndex, mode, type, onLabelUpdate, onRemoveColumn) {
var currentValue = collection[collectionIndex];
if (mode !== "edit") {
return currentValue.text;
}
return /*#__PURE__*/React.createElement(EditableWrapper, null,
type === "columns" ? /*#__PURE__*/React.createElement(EditRowCol, { index: collectionIndex, onRemove: function onRemove(collIndex) {return onRemoveColumn && onRemoveColumn(collIndex - 1);}, showReorder: false }) : null, /*#__PURE__*/
React.createElement(Input, { value: currentValue.text, onChange: function onChange(ev) {return onLabelUpdate &&
onLabelUpdate(type, collectionIndex - 1, ev.target.value);}, required: true }));
};
var getItem = function getItem(_ref) {var rows = _ref.totalRows,columns = _ref.totalColumns,rowIndex = _ref.rowIndex,colIndex = _ref.colIndex,renderElement = _ref.renderElement,mode = _ref.mode,rest = _objectWithoutProperties(_ref, ["totalRows", "totalColumns", "rowIndex", "colIndex", "renderElement", "mode"]);
if (isOrigin(rowIndex, colIndex)) {
return "";
}
if (rowIndex === 0) {
if (isEditColumnHeader(mode, columns, colIndex, rowIndex)) {
return "";
}
if (isAddColumnAction(mode, columns, colIndex, rowIndex)) {
return /*#__PURE__*/React.createElement(AddItem, { type: "column", label: "Add Column", handleAdd: rest.onAddColumn });
}
return getMatrixLabel(mode, "columns", columns, colIndex, rest.onLabelUpdate, rest.onRemoveColumn);
}
if (colIndex === 0) {
if (isAddRowAction(mode, rows, rowIndex, colIndex)) {
return /*#__PURE__*/React.createElement(AddItem, { type: "row", label: "Add Row", handleAdd: rest.onAddRow });
}
return getMatrixLabel(mode, "rows", rows, rowIndex, rest.onLabelUpdate);
}
if (isEditColumn(mode, columns, colIndex) &&
!isAddRow(mode, rows, rowIndex)) {
return /*#__PURE__*/React.createElement(EditColWrapper, null, /*#__PURE__*/
React.createElement(EditRowCol, { index: rowIndex, onRemove: function onRemove(rIndex) {return rest.onRemoveRow(rIndex - 1);} }));
}
if (isAddColumn(mode, columns, colIndex) || isAddRow(mode, rows, rowIndex)) {
if (rest.renderAdderElement) {
return rest.renderAdderElement({
colIndex: colIndex - 1,
rowIndex: rowIndex - 1,
type: isAddColumn(mode, columns, colIndex) ? "column" : "row"
});
}
return "";
}
return renderElement({ rowIndex: rowIndex - 1, colIndex: colIndex - 1 });
};
var ItemRow = function ItemRow(_ref2) {var rows = _ref2.rows,columns = _ref2.columns,rowIndex = _ref2.rowIndex,renderElement = _ref2.renderElement,mode = _ref2.mode,_ref2$vertical = _ref2.vertical,vertical = _ref2$vertical === void 0 ? false : _ref2$vertical,verticalMap = _ref2.verticalMap,rest = _objectWithoutProperties(_ref2, ["rows", "columns", "rowIndex", "renderElement", "mode", "vertical", "verticalMap"]);
// const colSize = Math.floor(12 / columns.length);
var totalRows = _toConsumableArray(rows);
var totalColumns = _toConsumableArray(columns);
var getColumnDimension = function getColumnDimension(colIndex) {
if (totalColumns.length === 7) {
if (colIndex === 5 || colIndex === 6) {
return 1;
}
return 2;
}
return 2;
};
var allColumns = totalColumns.map(function (currentCol, colIndex) {
// Have to apply margin-left: auto on Grid in case of edit row
// Clone columns here - check if not first col & edit col or add col & not last row
// Group by colIndex wrapped in a wrapper, append one after another. Each of this wrapper is SortableElement
// Arrange all the wrappers in a row one after another. This parent wrapper would be the sortableContainer.
var elem = /*#__PURE__*/React.createElement(Grid, { key: "".concat(rowIndex, "-").concat(colIndex), item: true, className: colIndex === 0 ?
"question__title question__title_row" :
rowIndex === 0 ?
"question__title question__title_column" :
"", xs: vertical ? 12 : getColumnDimension(colIndex) }, /*#__PURE__*/
React.createElement(React.Fragment, null, getItem(_extends({
colIndex: colIndex,
mode: mode,
renderElement: renderElement,
rowIndex: rowIndex,
totalColumns: totalColumns,
totalRows: totalRows },
rest))));
if (vertical &&
colIndex !== 0 &&
!isAddColumn(mode, columns, colIndex) &&
!isEditColumn(mode, columns, colIndex) &&
!isAddRow(mode, rows, rowIndex)) {
var currentColItems = verticalMap[colIndex];
if (!currentColItems) {
verticalMap[colIndex] = [];
}
verticalMap[colIndex].push(elem);
}
return elem;
});
return /*#__PURE__*/React.createElement(React.Fragment, null, allColumns);
};
var ItemRowGrid = function ItemRowGrid(_ref3) {var totalRows = _ref3.totalRows,totalColumns = _ref3.totalColumns,rowIndex = _ref3.rowIndex,renderElement = _ref3.renderElement,mode = _ref3.mode,rest = _objectWithoutProperties(_ref3, ["totalRows", "totalColumns", "rowIndex", "renderElement", "mode"]);return /*#__PURE__*/React.createElement(Grid, { key: rowIndex, container: true, item: true, xs: 12, spacing: 2 }, /*#__PURE__*/
React.createElement(ItemRow, _extends({ rows: totalRows, columns: totalColumns, rowIndex: rowIndex, renderElement: renderElement, mode: mode }, rest)));};
var SortableItem = SortableElement(ItemRowGrid);
var SortableRows = SortableContainer(function (_ref4) {var totalRows = _ref4.totalRows,totalColumns = _ref4.totalColumns,renderElement = _ref4.renderElement,mode = _ref4.mode,rest = _objectWithoutProperties(_ref4, ["totalRows", "totalColumns", "renderElement", "mode"]);
var allRows = totalRows.map(function (currentRow, index) {
if (mode === "edit") {
if (index === 0 || index === totalRows.length - 1) {
return /*#__PURE__*/React.createElement(ItemRowGrid, _extends({ key: "row-".concat(index), totalRows: totalRows, totalColumns: totalColumns, renderElement: renderElement, mode: mode, rowIndex: index }, rest));
}
return /*#__PURE__*/React.createElement(SortableItem, _extends({ key: "row-".concat(index), index: index, totalRows: totalRows, totalColumns: totalColumns, renderElement: renderElement, mode: mode, rowIndex: index }, rest));
}
return /*#__PURE__*/React.createElement(ItemRowGrid, { key: "row-".concat(index), totalRows: totalRows, totalColumns: totalColumns, renderElement: renderElement, mode: mode, rowIndex: index });
});
return /*#__PURE__*/React.createElement("div", null, allRows);
});
var getTotalRowsAndColumns = function getTotalRowsAndColumns(_ref5) {var rows = _ref5.rows,columns = _ref5.columns,mode = _ref5.mode;
var totalRows = _toConsumableArray(rows);
var totalColumns = _toConsumableArray(columns);
totalRows.unshift({ id: "matrix-first-row", text: "" });
totalColumns.unshift({ id: "matrix-first-column", text: "" });
if (mode && mode === "edit") {
totalRows.push({ id: "matrix-add-row", text: "" });
// Check for if item columns are less than the max limit of 5 or not
if (columns.length < 5) {
totalColumns.push({ id: "matrix-add-column", text: "" });
}
totalColumns.push({ id: "matrix-edit-row", text: "" });
}
return { totalRows: totalRows, totalColumns: totalColumns };
};
var getRows = function getRows(_ref6) {var rows = _ref6.rows,columns = _ref6.columns,renderElement = _ref6.renderElement,mode = _ref6.mode,rest = _objectWithoutProperties(_ref6, ["rows", "columns", "renderElement", "mode"]);var _getTotalRowsAndColum =
getTotalRowsAndColumns({
columns: columns,
mode: mode,
rows: rows
}),totalRows = _getTotalRowsAndColum.totalRows,totalColumns = _getTotalRowsAndColum.totalColumns;
return /*#__PURE__*/React.createElement(SortableRows, _extends({ useDragHandle: true, onSortEnd: function onSortEnd(_ref7) {var oldIndex = _ref7.oldIndex,newIndex = _ref7.newIndex;
if (rest && rest.onReorderRow) {
rest.onReorderRow({ oldIndex: oldIndex - 1, newIndex: newIndex - 1 });
}
}, totalRows: totalRows, totalColumns: totalColumns, renderElement: renderElement, mode: mode }, rest));
};
var getVerticalColumns = function getVerticalColumns(columnMap) {
var columnMapKeys = Object.keys(columnMap).sort();
var DivCol = SortableElement(function (_ref8) {var item = _ref8.item;return /*#__PURE__*/React.createElement(Grid, { item: true, xs: 2, spacing: 2 }, item);});
var DivContainer = SortableContainer(function () {return /*#__PURE__*/React.createElement(Grid, { container: true, xs: 12, spacing: 2 }, columnMapKeys.map(function (colKey, index) {return /*#__PURE__*/React.createElement(DivCol, { key: "colKey-".concat(colKey, "-index-").concat(index), index: index, item: columnMap[colKey] });}));});
if (columnMapKeys.length > 0) {
return /*#__PURE__*/React.createElement(DivContainer, { onSortEnd: function onSortEnd(_ref9) {var oldIndex = _ref9.oldIndex,newIndex = _ref9.newIndex;
} /* todo: implement */, axis: "x" });
}
return null;
};
var getBreak = function getBreak(_ref10) {var rows = _ref10.rows,columns = _ref10.columns,renderElement = _ref10.renderElement,mode = _ref10.mode,rest = _objectWithoutProperties(_ref10, ["rows", "columns", "renderElement", "mode"]);var _getTotalRowsAndColum2 =
getTotalRowsAndColumns({
columns: columns,
mode: mode,
rows: rows
}),totalRows = _getTotalRowsAndColum2.totalRows,totalColumns = _getTotalRowsAndColum2.totalColumns;
var verticalMap = {};
totalRows.map(function (currentRow, rowIndex) {return ItemRow({
columns: totalColumns,
mode: mode,
renderElement: renderElement,
rowIndex: rowIndex,
rows: totalRows,
vertical: true,
verticalMap: verticalMap
});});
return verticalMap;
};
var BaseMatrix = function BaseMatrix(_ref11) {var matrix = _ref11.matrix,renderElement = _ref11.renderElement,_ref11$mode = _ref11.mode,mode = _ref11$mode === void 0 ? "view" : _ref11$mode,rest = _objectWithoutProperties(_ref11, ["matrix", "renderElement", "mode"]);var _useState =
useState([]),_useState2 = _slicedToArray(_useState, 2),rows = _useState2[0],setRows = _useState2[1];var _useState3 =
useState([]),_useState4 = _slicedToArray(_useState3, 2),columns = _useState4[0],setColumns = _useState4[1];
useEffect(function () {
setRows(matrix[0]);
setColumns(matrix[1]);
}, [matrix]);
var arrangedRows = getRows(_extends({ rows: rows, columns: columns, renderElement: renderElement, mode: mode }, rest));
var verticalMap = getBreak(_extends({ rows: rows, columns: columns, renderElement: renderElement, mode: mode }, rest));
var vertColumns = getVerticalColumns(verticalMap);
// eslint-disable-next-line no-console
console.log({ vertColumns: vertColumns });
return /*#__PURE__*/React.createElement("div", { style: { position: "relative" } }, /*#__PURE__*/
React.createElement(Wrapper, null, arrangedRows));
};
export default BaseMatrix;
//# sourceMappingURL=BaseMatrix.js.map