@integec/grid-tools
Version:
Integ Grid Tools
516 lines (502 loc) • 14.3 kB
JavaScript
"use strict";
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@storybook/react");
var _data = require("../data");
var _index = _interopRequireWildcard(require("../../index"));
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 _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; }
var colSpecificData = [{
a: 'abc',
b: 'xddyz',
c: 17,
d: 101
}, {
a: 'opd',
b: 'xyccz',
c: 12,
d: 75
}, {
a: 'abasdc',
b: 'xvvyz',
c: 12,
d: 203
}, {
a: 'ass',
b: 'vvv',
c: 25,
d: 23
}, {
a: 'aaabc',
b: 'xyvvvz',
c: 12,
d: 26
}, {
a: 'abffc',
b: 'xyznbn',
c: 25,
d: 105
}];
var hour25Style = function hour25Style(_ref) {
var data = _ref.data,
rowIndex = _ref.rowIndex;
var val = data[rowIndex].c;
console.log(val);
if (val === 25) {
return {
backgroundColor: 'lightblue'
};
} else {
return {};
}
};
var colSpecificHeaders = [(0, _index.strCol)({
ident: 'a',
display: 'Unit',
width: 180,
isKey: true,
formatCell: function formatCell(props) {
var hour = hour25Style(props);
return _objectSpread({
backgroundColor: 'yellow'
}, hour);
}
}), (0, _index.strCol)({
ident: 'b',
display: 'Fixed Gen',
ellipsis: true,
formatCell: hour25Style
}), (0, _index.intCol)({
ident: 'c',
display: 'HE',
width: 40,
isKey: true,
numFormat: '0',
formatCell: hour25Style
}), (0, _index.numCol)({
ident: 'd',
display: 'Emer Min',
width: 120,
alignment: 'right',
displayFormat: null,
ellipsis: true,
formatCell: function formatCell(_ref2) {
var headers = _ref2.headers,
data = _ref2.data,
rowIndex = _ref2.rowIndex,
columnIndex = _ref2.columnIndex;
var val = data[rowIndex].d;
var hour = hour25Style({
headers: headers,
data: data,
rowIndex: rowIndex,
columnIndex: columnIndex
});
console.log(val);
if (val > 100) {
return _objectSpread({}, hour, {
backgroundColor: 'pink'
});
} else return hour;
}
})];
var data = (0, _data.createData)(200);
(0, _react2.storiesOf)('AG-Virtualized grid', module).add('fix Row Editor', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
backgroundColor: '#EFEFEF',
color: '#3F4752',
border: '1px solid #DADADA',
fontSize: '12px',
fontWeight: 500,
headerRowHeight: 30,
fontFamily: 'sans-serif'
},
rowContentProps: {
color: '#0D0106',
backgroundColor: '#FFFFFF',
border: '1px solid #DADADA',
rowHeight: 30,
fontSize: '12px',
fontWeight: 400,
fontFamily: 'sans-serif',
paddingTop: '4px'
},
fixedColHead: {
backgroundColor: '#EFEFEF',
border: '1px solid #DADADA',
color: '#0D0106',
rowHeight: 30,
fontSize: '12px',
fontWeight: 400,
fontFamily: 'sans-serif',
paddingTop: '4px'
},
fixedColData: {
backgroundColor: '#f2f2f2',
border: '1px solid #DADADA',
borderRadius: '12px 12px 0px 0px',
color: '#0D0106',
rowHeight: 30,
fontFamily: 'sans-serif',
fontSize: '12px',
fontWeight: 400
}
}
}, _react["default"].createElement(_index["default"], {
isEditable: function isEditable() {
return true;
},
editMode: "cell",
data: data,
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({
autoFixColByKey: true
})
}));
}).add('ngrid2', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
backgroundColor: '#EFEFEF',
color: '#3F4752',
border: '1px solid #DADADA',
fontSize: '12px',
fontWeight: 500,
headerRowHeight: 40
},
rowContentProps: {
color: '#0D0106',
backgroundColor: '#FFFFFF',
border: '1px solid #DADADA',
rowHeight: 40,
fontSize: '14px',
fontWeight: 400,
paddingTop: '4px'
},
fixedColHead: {
backgroundColor: '#EFEFEF',
border: '1px solid #DADADA',
color: '#0D0106',
rowHeight: 30,
fontSize: '12px',
fontWeight: 500,
paddingTop: '4px'
},
fixedColData: {
backgroundColor: '#f2f2f2',
border: '1px solid #DADADA',
borderRadius: '12px 12px 0px 0px',
color: '#0D0106',
rowHeight: 30,
fontSize: '14px',
fontWeight: 400
}
}
}, _react["default"].createElement(_index["default"], {
isEditable: function isEditable() {
return false;
},
editMode: "cell",
data: data,
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({// autoFixColByKey: true,
})
}));
}).add('ngrid3', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
backgroundColor: '#EFEFEF',
color: '#3F4752',
border: '1px solid #DADADA',
fontSize: '12px',
fontWeight: 500,
headerRowHeight: 40
},
rowContentProps: {
color: '#0D0106',
backgroundColor: '#FFFFFF',
border: '1px solid #DADADA',
rowHeight: 40,
fontSize: '14px',
fontWeight: 400,
paddingTop: '4px'
}
}
}, _react["default"].createElement(_index["default"], {
isEditable: function isEditable() {
return true;
},
editMode: "cell",
data: data,
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({// autoFixColByKey: true,
})
}));
}).add('alt color non-fixed grid', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
backgroundColor: '#EFEFEF',
color: '#3F4752',
border: '1px solid #DADADA',
fontSize: '12px',
fontWeight: 500,
headerRowHeight: 40
},
rowContentProps: {
color: '#0D0106',
border: '1px solid #cccc',
rowHeight: 40,
fontSize: '14px',
fontWeight: 400,
paddingTop: '4px'
}
}
}, _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)({})
}));
}).add('alt color non-fixed grid-2', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
backgroundColor: '#EFEFEF',
color: '#3F4752',
border: '1px solid #DADADA',
fontSize: '12px',
fontWeight: 500,
headerRowHeight: 40
},
rowContentProps: {
color: '#0D0106',
border: '1px solid #cccc',
rowHeight: 40,
fontSize: '14px',
fontWeight: 400,
paddingTop: '4px'
}
}
}, _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)({
height: 700,
width: 700
})
}));
}).add('columnStyle', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
backgroundColor: '#EFEFEF',
color: '#3F4752',
border: '1px solid #DADADA',
fontSize: '12px',
fontWeight: 500,
headerRowHeight: 30,
fontFamily: 'sans-serif'
},
rowContentProps: {
color: '#0D0106',
backgroundColor: '#FFFFFF',
border: '1px solid #DADADA',
rowHeight: 30,
fontSize: '12px',
fontWeight: 400,
fontFamily: 'sans-serif',
paddingTop: '4px'
}
}
}, _react["default"].createElement(_index["default"], {
isEditable: function isEditable() {
return true;
},
editMode: "cell",
data: colSpecificData,
headers: colSpecificHeaders,
render: (0, _index.virtualizedGridRenderer)({
autoFixColByKey: true
})
}));
}).add('columnStyle non-editable', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
backgroundColor: '#EFEFEF',
color: '#3F4752',
border: '1px solid #DADADA',
fontSize: '12px',
fontWeight: 500,
headerRowHeight: 30,
fontFamily: 'sans-serif'
},
rowContentProps: {
color: '#0D0106',
backgroundColor: '#FFFFFF',
border: '1px solid #DADADA',
rowHeight: 30,
fontSize: '12px',
fontWeight: 400,
fontFamily: 'sans-serif',
paddingTop: '4px'
}
}
}, _react["default"].createElement(_index["default"], {
isEditable: function isEditable() {
return false;
},
editMode: "cell",
data: colSpecificData,
headers: colSpecificHeaders,
render: (0, _index.virtualizedGridRenderer)({
autoFixColByKey: true
})
}));
}).add('with getRowStyle', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
backgroundColor: '#EFEFEF',
color: '#3F4752',
border: '1px solid #DADADA',
fontSize: '12px',
fontWeight: 500,
headerRowHeight: 30,
fontFamily: 'sans-serif'
},
rowContentProps: {
color: '#0D0106',
backgroundColor: '#FFFFFF',
border: '1px solid #DADADA',
rowHeight: 30,
fontSize: '12px',
fontWeight: 400,
fontFamily: 'sans-serif',
paddingTop: '4px'
},
fixedColHead: {
backgroundColor: '#EFEFEF',
border: '1px solid #DADADA',
color: '#0D0106',
rowHeight: 30,
fontSize: '12px',
fontWeight: 400,
fontFamily: 'sans-serif',
paddingTop: '4px'
},
fixedColData: {
backgroundColor: '#f2f2f2',
border: '1px solid #DADADA',
borderRadius: '12px 12px 0px 0px',
color: '#0D0106',
rowHeight: 30,
fontFamily: 'sans-serif',
fontSize: '12px',
fontWeight: 400
}
}
}, _react["default"].createElement(_index["default"], {
isEditable: function isEditable() {
return true;
},
editMode: "cell",
data: data,
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({
autoFixColByKey: true,
getRowStyle: function getRowStyle(_) {
return {
backgroundColor: 'green',
color: 'white'
};
}
})
}));
}).add('without context', function () {
return _react["default"].createElement(_index["default"], {
isEditable: function isEditable() {
return false;
},
editMode: "cell",
data: data,
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({
autoFixColByKey: true
})
});
}).add('partial context', function () {
return _react["default"].createElement(_index.GridToolContext.Provider, {
value: {
columnHeaderProps: {
// backgroundColor: '#EFEFEF',
color: '#3F4752',
border: '1px solid #DADADA',
fontSize: '12px',
fontWeight: 500,
headerRowHeight: 30,
fontFamily: 'sans-serif'
},
rowContentProps: {
// color: '#0D0106',
backgroundColor: '#FFFFFF',
border: '1px solid #DADADA',
rowHeight: 30,
// fontSize: '12px',
// fontWeight: 400,
fontFamily: 'sans-serif',
paddingTop: '4px'
},
fixedColHead: {
// backgroundColor: '#EFEFEF',
// border: '1px solid #DADADA',
// color: '#0D0106',
rowHeight: 30,
fontSize: '12px',
fontWeight: 400,
fontFamily: 'sans-serif',
paddingTop: '4px'
},
fixedColData: {
// backgroundColor: '#f2f2f2',
// border: '1px solid #DADADA',
// borderRadius: '12px 12px 0px 0px',
// color: '#0D0106',
// rowHeight: 30,
fontFamily: 'sans-serif',
fontSize: '12px' // fontWeight: 400,
}
}
}, _react["default"].createElement(_index["default"], {
isEditable: function isEditable() {
return false;
},
editMode: "cell",
data: data,
headers: _data.headers,
render: (0, _index.virtualizedGridRenderer)({
autoFixColByKey: true
})
}));
});
//# sourceMappingURL=ag-virtualized.stories.js.map