@integec/grid-tools
Version:
Integ Grid Tools
229 lines (200 loc) • 7.31 kB
JavaScript
'use strict';
var _range = require('ramda/src/range');
var _range2 = _interopRequireDefault(_range);
var _take = require('ramda/src/take');
var _take2 = _interopRequireDefault(_take);
var _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; };
// import { action } from '@storybook/addon-actions'
// import { linkTo } from '@storybook/addon-links'
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _react3 = require('@storybook/react');
var _data = require('../data');
var _ControlledEditDemo = require('./ControlledEditDemo');
var _ControlledEditDemo2 = _interopRequireDefault(_ControlledEditDemo);
var _CellEditDemo = require('./CellEditDemo');
var _CellEditDemo2 = _interopRequireDefault(_CellEditDemo);
var _index = require('../../index');
var _index2 = _interopRequireDefault(_index);
var _FilterDemo = require('./FilterDemo');
var _FilterDemo2 = _interopRequireDefault(_FilterDemo);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// const createRow = _ => randomRow(headers)
// const createData = R.compose(R.map(createRow), R.range(0))
/* grid code starts here */
var data = (0, _data.createData)(80);
var redOn3X3Renderer = function redOn3X3Renderer(props) {
var rowIndex = props.rowIndex,
columnIndex = props.columnIndex,
width = props.width,
height = props.height,
data = props.data,
header = props.header;
if (rowIndex === 3 && columnIndex === 3) {
return _react2.default.createElement(
_index.FlexCell,
{ color: 'red', fontSize: '.8em', fontWeight: 'bold', width: width, height: height },
'$',
data[rowIndex][header.ident]
);
}
return (0, _index.defaultFlexCellRenderer)(props);
};
var splitColHeaderRenderer = function splitColHeaderRenderer(props) {
var header = props.header;
if (header.ident === 'unitId') {
return _react2.default.createElement(
_index.FlexColHeader,
{ backgroundColor: 'black', width: props.width },
_react2.default.createElement(
'div',
null,
'Left'
),
_react2.default.createElement(
'div',
null,
'|'
),
_react2.default.createElement(
'div',
null,
'Right'
)
);
}
return (0, _index.defaultFlexColHeaderRenderer)(props);
};
var commonProps = { headers: _data.headers, data: data };
var debugHeaders = (0, _take2.default)(5, _data.headers);
var debugData = (0, _range2.default)(0, 5).map(function (_) {
return (0, _data.randomRow)(debugHeaders);
});
var debugProps = { headers: debugHeaders, data: debugData };
var tenKData = (0, _data.createData)(10000);
(0, _react3.storiesOf)('Flex Grid', module).add('debug', function () {
return _react2.default.createElement(_index2.default, _extends({}, debugProps, {
isEditable: true,
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 1100,
height: 400,
autoFixColByKey: true
})
}));
}).add('Broswer Scroll/No Scroll', function () {
return _react2.default.createElement(_index2.default, _extends({}, commonProps, { render: (0, _index.flexGridRenderer)() }));
}).add('Simple Scroll', function () {
return _react2.default.createElement(_index2.default, _extends({}, commonProps, {
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 800,
height: 400
})
}));
}).add('Scroll with fixed col', function () {
return _react2.default.createElement(_index2.default, _extends({}, commonProps, {
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 800,
height: 400,
autoFixColByKey: true
})
}));
}).add('Customized Cell Renderer', function () {
return _react2.default.createElement(_index2.default, _extends({}, commonProps, {
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 800,
height: 400,
autoFixColByKey: true,
cellRenderer: redOn3X3Renderer
})
}));
}).add('Customized Row Header Renderer', function () {
return _react2.default.createElement(_index2.default, _extends({}, commonProps, {
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 800,
height: 400,
autoFixColByKey: true,
colHeaderRenderer: splitColHeaderRenderer
})
}));
}).add('Fuzzy Filter', function () {
return _react2.default.createElement(_FilterDemo2.default, _extends({}, commonProps, { render: (0, _index.flexGridRenderer)() }));
}).add('Scrolled Fixed col with paging', function () {
return _react2.default.createElement(_index2.default, _extends({}, commonProps, {
rowsPerPage: 18,
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 800,
height: 400,
autoFixColByKey: true
})
}));
}).add('No Scroll with paging', function () {
return _react2.default.createElement(_index2.default, _extends({}, commonProps, { rowsPerPage: 15, render: (0, _index.flexGridRenderer)() }));
}).add('10k rows scroll with alt rows', function () {
return _react2.default.createElement(_index2.default, {
headers: _data.headers,
data: tenKData,
rowsPerPage: 20,
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 800,
height: 400,
autoFixColByKey: true
}),
altBgColor: 'red',
altBy: function altBy(data) {
return data.unitId;
}
});
}).add('10k rows scroll paging', function () {
return _react2.default.createElement(_index2.default, {
headers: _data.headers,
data: tenKData,
rowsPerPage: 20,
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 800,
height: 400,
autoFixColByKey: true
})
});
}).add('10k rows non Scroll paging', function () {
return _react2.default.createElement(_index2.default, { headers: _data.headers, data: tenKData, rowsPerPage: 15, render: (0, _index.flexGridRenderer)() });
}).add('Controlled Row Editor', function () {
return _react2.default.createElement(_ControlledEditDemo2.default, _extends({}, commonProps, { controlled: true }));
}).add('Un-Controlled Row Editor', function () {
return _react2.default.createElement(_ControlledEditDemo2.default, commonProps);
}).add('Free Edit', function () {
return _react2.default.createElement(_CellEditDemo2.default, debugProps);
}).add('No Data Render', function () {
return _react2.default.createElement(_index2.default, {
headers: _data.headers,
data: [],
isEditable: true,
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 1100,
height: 400,
autoFixColByKey: true
})
});
}).add('hide No Data Render', function () {
return _react2.default.createElement(_index2.default, {
headers: _data.headers,
data: [],
isEditable: true,
render: (0, _index.flexGridRenderer)({
headerRowHeight: 60,
width: 1100,
height: 400,
autoFixColByKey: true,
noDataRender: null
})
});
});
//# sourceMappingURL=flex.stories.js.map