@integec/grid-tools
Version:
Integ Grid Tools
392 lines (358 loc) • 14.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.dateInputCellEditRender = void 0;
var _omit2 = _interopRequireDefault(require("ramda/src/omit"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@storybook/react");
var _index = _interopRequireWildcard(require("../../index"));
var _data = require("../data");
var _Components = require("../../Components");
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var customizedCellRender = function customizedCellRender(params) {
var gridToolProps = params.gridToolProps,
reactVirtualizedProps = params.reactVirtualizedProps,
rest = _objectWithoutProperties(params, ["gridToolProps", "reactVirtualizedProps"]);
var getCellProps = gridToolProps.getCellProps,
headers = gridToolProps.headers,
data = gridToolProps.data;
var columnIndex = reactVirtualizedProps.columnIndex,
rowIndex = reactVirtualizedProps.rowIndex,
style = reactVirtualizedProps.style;
var cellProps = getCellProps(_objectSpread({
rowIndex: rowIndex,
columnIndex: columnIndex,
header: headers[columnIndex],
data: data,
style: style
}, rest));
var cellData = (0, _index.extractAndFormatData)({
rowData: data[rowIndex],
header: headers[columnIndex]
}); // console.log('cell data is',cellData)
// eslint-disable-next-line eqeqeq
if (columnIndex == 1 && rowIndex == 1) {
return _react["default"].createElement(_index.VirtualizedCell, _extends({}, (0, _omit2["default"])(['data'], cellProps), {
title: cellData
}), cellData, _react["default"].createElement("div", {
title: "purple marker",
style: {
position: 'absolute',
top: '0px',
right: '0px',
width: '10px',
height: '10px',
backgroundColor: 'purple'
}
}));
}
return (0, _index.defaultVirtualizedCellRender)(params);
};
var dateInputCellEditRender = function dateInputCellEditRender(_ref) {
var getInputProps = _ref.getInputProps;
return _react["default"].createElement(_Components.CellInputEditor, _extends({
type: "date"
}, getInputProps({
refKey: 'innerRef'
})));
};
exports.dateInputCellEditRender = dateInputCellEditRender;
var GridWithScrollTrigger = function GridWithScrollTrigger() {
var _useState = (0, _react.useState)(),
_useState2 = _slicedToArray(_useState, 2),
rowNo = _useState2[0],
setRowNo = _useState2[1];
var gridRef = (0, _react.useRef)();
return _react["default"].createElement("div", null, _react["default"].createElement("div", {
style: {
margin: 10
}
}, _react["default"].createElement("input", {
type: "number",
value: rowNo,
onChange: function onChange(e) {
return setRowNo(e.target.value);
}
}), _react["default"].createElement("button", {
onClick: function onClick() {
if (gridRef.current && rowNo) {
gridRef.current.scrollToCell({
rowIndex: +rowNo
});
}
}
}, "Scroll To")), _react["default"].createElement(_index["default"], {
data: data,
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({
cellRender: function cellRender(props) {
var type = props.gridToolProps.headers[props.reactVirtualizedProps.columnIndex].type;
return (0, _index.defaultVirtualizedCellRender)(_objectSpread({}, props, {
editRender: (type === 'date-time' || type === 'date') && dateInputCellEditRender
}));
},
contentGridRef: gridRef
}),
editMode: "cell",
isEditable: function isEditable() {
return true;
}
}));
};
var GridWithScrollSync = function GridWithScrollSync() {
var gridRef = (0, _react.useRef)();
var divRef = (0, _react.useRef)();
return _react["default"].createElement("div", null, _react["default"].createElement("div", {
ref: divRef,
style: {
overflow: 'auto',
width: 1100
},
onScroll: function onScroll(e) {
var scrollLeft = e.target.scrollLeft;
if (scrollLeft && gridRef.current) {
gridRef.current.scrollToPosition({
scrollLeft: scrollLeft
});
}
}
}, _react["default"].createElement("div", {
style: {
padding: 20,
background: 'red',
width: _data.headers.map(function (h) {
return h.width || 150;
}).reduce(function (sum, val) {
return sum + val;
}, 0)
}
}, "Scroll Me!!!")), _react["default"].createElement(_index["default"], {
data: data,
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({
cellRender: function cellRender(props) {
var type = props.gridToolProps.headers[props.reactVirtualizedProps.columnIndex].type;
return (0, _index.defaultVirtualizedCellRender)(_objectSpread({}, props, {
editRender: (type === 'date-time' || type === 'date') && dateInputCellEditRender
}));
},
contentGridRef: gridRef,
onScroll: function onScroll(_ref2) {
var scrollLeft = _ref2.scrollLeft;
if (scrollLeft && divRef.current) {
divRef.current.scrollTo({
left: scrollLeft
});
}
}
}),
editMode: "cell",
isEditable: function isEditable() {
return true;
}
}));
};
var data = (0, _data.createData)(200);
(0, _react2.storiesOf)('Virtualized grid', module).add('Basic', function () {
return _react["default"].createElement(_index["default"], {
data: data,
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({
cellRender: function cellRender(props) {
var type = props.gridToolProps.headers[props.reactVirtualizedProps.columnIndex].type;
return (0, _index.defaultVirtualizedCellRender)(_objectSpread({}, props, {
editRender: (type === 'date-time' || type === 'date') && dateInputCellEditRender
}));
}
}),
editMode: "cell",
isEditable: function isEditable() {
return true;
}
});
}).add('Fixed Col and Free edit', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
backgroundColor: 'pink',
color: '#3F4752',
border: '1px solid #ccc',
fontSize: '14px',
headerRowHeight: 30
},
rowContentProps: {
color: '#3F4752',
border: '1px solid #ccc',
// rowHeight: 30,
fontSize: '14px'
},
fixedColData: {
border: '1px solid #ccc',
color: '#3F4752',
rowHeight: 30,
verticalAlign: 'baseline'
}
}
}, _react["default"].createElement(_index["default"], {
isEditable: function isEditable() {
return true;
},
editMode: "cell",
data: data,
headers: _data.headers,
altBgColor: "#d7d7e7",
altBy: function altBy(data) {
return data.unitId;
},
render: (0, _index.virtualizedGridRenderer)({
autoFixColByKey: true,
cellRender: customizedCellRender
})
}));
}).add('Scroll Trigger', function () {
return _react["default"].createElement(GridWithScrollTrigger, null);
}).add('Scroll Sync', function () {
return _react["default"].createElement(GridWithScrollSync, null);
}).add('Custom Multi Selection', function () {
var CustomSelectionStory = function CustomSelectionStory() {
var subGridRef = (0, _react.useRef)();
var _useState3 = (0, _react.useState)('cell'),
_useState4 = _slicedToArray(_useState3, 2),
selectionType = _useState4[0],
setSelectionType = _useState4[1];
var _useState5 = (0, _react.useState)(true),
_useState6 = _slicedToArray(_useState5, 2),
isCtrl = _useState6[0],
setIsCtrl = _useState6[1];
return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("div", null, "Selection Type:"), _react["default"].createElement("div", {
style: {
display: 'flex',
width: 200,
marginBottom: 10,
textAlign: 'center',
border: '1px solid #ccc',
borderRadius: 4
}
}, _react["default"].createElement("div", {
style: {
width: '50%',
cursor: 'pointer',
backgroundColor: selectionType === 'cell' ? 'lightblue' : 'transparent',
padding: 4
},
onClick: function onClick() {
return setSelectionType('cell');
}
}, "Cell"), _react["default"].createElement("div", {
style: {
width: '50%',
cursor: 'pointer',
backgroundColor: selectionType === 'row' ? 'lightblue' : 'transparent',
padding: 4
},
onClick: function onClick() {
return setSelectionType('row');
}
}, "Row")), _react["default"].createElement("div", {
style: {
marginBottom: 10
}
}, _react["default"].createElement("input", {
type: "checkbox",
id: "isCtrl",
name: "isCtrl",
value: !!isCtrl,
checked: !!isCtrl,
onChange: function onChange() {
return setIsCtrl(!isCtrl);
}
}), _react["default"].createElement("label", {
htmlFor: "isCtrl"
}, "Is Ctrl")), _react["default"].createElement("div", {
style: {
display: 'flex',
gap: 30,
marginBottom: 10
}
}, _react["default"].createElement("div", {
style: {
backgroundColor: 'lightblue',
boxShadow: '0 0 5px rgba(0,0,0,0.5)',
padding: 4,
cursor: 'pointer'
},
onClick: function onClick() {
subGridRef.current.setSelectedRect({
x1: 1,
y1: 1,
x2: 2,
y2: 3,
isCtrl: isCtrl
});
}
}, '{x1: 1, y1: 1, x2: 2, y2: 3}'), _react["default"].createElement("div", {
style: {
backgroundColor: 'lightblue',
boxShadow: '0 0 5px rgba(0,0,0,0.5)',
padding: 4,
cursor: 'pointer'
},
onClick: function onClick() {
subGridRef.current.setSelectedRect({
x1: 4,
y1: 4,
x2: 6,
y2: 7,
isCtrl: isCtrl
});
}
}, '{x1: 4, y1: 4, x2: 6, y2: 7}'), _react["default"].createElement("div", {
style: {
backgroundColor: 'lightblue',
boxShadow: '0 0 5px rgba(0,0,0,0.5)',
padding: 4,
cursor: 'pointer'
},
onClick: function onClick() {
subGridRef.current.setSelectedRect({
x1: 7,
y1: 7,
x2: 9,
y2: 10,
isCtrl: isCtrl
});
}
}, '{x1: 7, y1: 7, x2: 9, y2: 10}')), _react["default"].createElement(_index["default"], {
ref: subGridRef,
isEditable: function isEditable() {
return true;
},
data: data,
selectionType: selectionType || 'cell',
selectionMode: 'multi',
editMode: "cell",
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({
cellRender: function cellRender(props) {
var type = props.gridToolProps.headers[props.reactVirtualizedProps.columnIndex].type;
return (0, _index.defaultVirtualizedCellRender)(_objectSpread({}, props, {
editRender: (type === 'date-time' || type === 'date') && dateInputCellEditRender
}));
}
})
}));
};
return _react["default"].createElement(CustomSelectionStory, null);
});
//# sourceMappingURL=virtualized.stories.js.map