@integec/grid-tools
Version:
Integ Grid Tools
219 lines (177 loc) • 7.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = exports.defaultInputRowEditRender = void 0;
var _map2 = _interopRequireDefault(require("ramda/src/map"));
var _max2 = _interopRequireDefault(require("ramda/src/max"));
var _reduce2 = _interopRequireDefault(require("ramda/src/reduce"));
var _compose2 = _interopRequireDefault(require("ramda/src/compose"));
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _utils = require("./utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _templateObject6() {
var data = _taggedTemplateLiteral(["\n flex: 0 0 ", ";\n width: ", ";\n"]);
_templateObject6 = function _templateObject6() {
return data;
};
return data;
}
function _templateObject5() {
var data = _taggedTemplateLiteral(["\n flex: 0 0 ", ";\n width: ", ";\n"]);
_templateObject5 = function _templateObject5() {
return data;
};
return data;
}
function _templateObject4() {
var data = _taggedTemplateLiteral(["\n flex: 0 0 ", ";\n font-size: 0.75em;\n font-weight: bold;\n display: flex;\n align-items: center;\n"]);
_templateObject4 = function _templateObject4() {
return data;
};
return data;
}
function _templateObject3() {
var data = _taggedTemplateLiteral(["\n display: flex;\n align-item: center;\n justify-content: center;\n margin-bottom: 0.5em;\n"]);
_templateObject3 = function _templateObject3() {
return data;
};
return data;
}
function _templateObject2() {
var data = _taggedTemplateLiteral(["\n background-color: white;\n padding: 1.5em 20px;\n border: solid #ccc 1px;\n border-radius: 3px;\n box-shadow: 6px 1px 12px 1px rgba(0, 0, 0, 0.5);\n width: ", ";\n min-width: 45vw;\n max-width: 80vw;\n max-height: 80vh;\n overflow: auto;\n"]);
_templateObject2 = function _templateObject2() {
return data;
};
return data;
}
function _templateObject() {
var data = _taggedTemplateLiteral(["\n margin-top: 1em;\n display: flex;\n align-items: center;\n justify-content: center;\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var Buttons = _styledComponents["default"].div(_templateObject());
var Container = _styledComponents["default"].div(_templateObject2(), function (props) {
return props.width || '45vw';
});
var RowContainer = _styledComponents["default"].div(_templateObject3());
var Header = _styledComponents["default"].div(_templateObject4(), function (props) {
return props.width || '80px';
});
var Input = _styledComponents["default"].input(_templateObject5(), function (props) {
return props.width || '80px';
}, function (props) {
return props.width || '80px';
});
var RO = _styledComponents["default"].div(_templateObject6(), function (props) {
return props.width || '80px';
}, function (props) {
return props.width || '80px';
});
var defaultInputRowEditRender = function defaultInputRowEditRender(_ref) {
var width = _ref.width,
ref = _ref.ref,
rowData = _ref.rowData,
header = _ref.header,
valueChanged = _ref.valueChanged,
onOk = _ref.onOk,
onCancel = _ref.onCancel,
isKey = _ref.isKey,
showAdd = _ref.showAdd;
return !showAdd && isKey ? _react["default"].createElement(RO, {
width: width
}, " ", (0, _utils.extractAndFormatData)({
header: header,
rowData: rowData
}), " ") : _react["default"].createElement(Input, {
width: width,
onChange: function onChange(e) {
return valueChanged({
header: header,
value: e.target.value
});
},
onKeyDown: function onKeyDown(e) {
// eslint-disable-next-line eqeqeq
if (e.keyCode == 13) onOk(); // eslint-disable-next-line eqeqeq
if (e.keyCode == 17) onCancel();
},
innerRef: ref,
value: (0, _utils.extractData)({
header: header,
rowData: rowData
}) || ''
});
};
exports.defaultInputRowEditRender = defaultInputRowEditRender;
var getMaxWidth = (0, _compose2["default"])((0, _reduce2["default"])(_max2["default"], 100), (0, _map2["default"])(function (h) {
return h.width;
}));
var defaultControlsRender = function defaultControlsRender(_ref2) {
var onOk = _ref2.onOk,
onCancel = _ref2.onCancel;
return _react["default"].createElement(Buttons, null, _react["default"].createElement("button", {
onClick: onOk
}, "Save"), _react["default"].createElement("button", {
onClick: onCancel
}, "Cancel"));
};
var stripPx = function stripPx(val) {
return val && val.endsWith && val.endsWith('px') ? parseFloat(val.substring(0, val.length - 2)) : parseFloat(val);
};
var rendeRowEditorContent = function rendeRowEditorContent() {
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
headerWidth = _ref3.headerWidth,
dataWidth = _ref3.dataWidth,
_ref3$renderEditor = _ref3.renderEditor,
renderEditor = _ref3$renderEditor === void 0 ? defaultInputRowEditRender : _ref3$renderEditor,
_ref3$renderControls = _ref3.renderControls,
renderControls = _ref3$renderControls === void 0 ? defaultControlsRender : _ref3$renderControls;
return function (_ref4) {
var showAdd = _ref4.showAdd,
rowData = _ref4.rowData,
headers = _ref4.headers,
valueChanged = _ref4.valueChanged,
onOk = _ref4.onOk,
onCancel = _ref4.onCancel,
initialFocusRef = _ref4.initialFocusRef;
var width = getMaxWidth(headers) + 'px';
var containerWidth = (stripPx(headerWidth) || getMaxWidth(headers)) + (stripPx(dataWidth) || getMaxWidth(headers)) + 80 + 'px';
return _react["default"].createElement(Container, {
width: containerWidth
}, headers.map(function (header, index) {
if (header.showInRowEditor) {
var ident = header.ident,
display = header.display,
isKey = header.isKey;
return _react["default"].createElement(RowContainer, {
key: ident || '-editor'
}, _react["default"].createElement(Header, {
isKey: isKey,
width: headerWidth || width
}, display || ident), renderEditor({
width: dataWidth || width,
valueChanged: valueChanged,
ref: index === 0 ? initialFocusRef : undefined,
rowData: rowData,
header: header,
index: index,
onOk: onOk,
onCancel: onCancel,
isKey: isKey,
showAdd: showAdd
}));
} else return null;
}), renderControls({
onOk: onOk,
onCancel: onCancel
}));
};
};
var _default = rendeRowEditorContent;
exports["default"] = _default;
//# sourceMappingURL=renderRowEditorContent.js.map