@flexis/ui
Version:
Styleless React Components
85 lines (83 loc) • 5.71 kB
JavaScript
import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
import React from 'react';
var _createElement = React.createElement;
import { boolean } from '@storybook/addon-knobs/react';
import { storiesOf } from '../../helpers/stories';
import Table, { TableHead, TableBody, TableRow, TableCell } from '../Table';
import ScrollArea from './';
export var stylableApi = "\nStylable API\n---\n- ::scroller\n\t- :hideXScrollbar\n\t- :hideYScrollbar\n- ::shadow\n\t- :active\n\t- :top\n\t- :right\n\t- :bottom\n\t- :left\n";
var colsCount = 20;
var rowsCount = 50;
export default storiesOf('ScrollArea', module).addParameters({
info: stylableApi
}).add('with scroll content', function () {
return _createElement(ScrollArea, {
style: {
maxHeight: '400px',
maxWidth: '400px'
}
}, _createElement("div", {
style: {
width: '600px',
height: '600px',
background: 'aqua'
}
}, "Content"));
}).add('with ignore shadows', function () {
return _createElement(ScrollArea, {
style: {
maxHeight: '400px',
maxWidth: '400px'
},
ignoreTopShadow: boolean('Ingore top shadow', true),
ignoreRightShadow: boolean('Ingore right shadow', false),
ignoreBottomShadow: boolean('Ingore bottom shadow', true),
ignoreLeftShadow: boolean('Ingore left shadow', false)
}, _createElement("div", {
style: {
width: '600px',
height: '600px',
background: 'aqua'
}
}, "Content"));
}).add('with hidden scrollbars', function () {
return _createElement(ScrollArea, {
style: {
maxHeight: '400px',
maxWidth: '400px'
},
hideXScrollbar: boolean('Hide X-scrollbar', true),
hideYScrollbar: boolean('Hide Y-scrollbar', true)
}, _createElement("div", {
style: {
width: '600px',
height: '600px',
background: 'aqua'
}
}, "Content"));
}).add('with table', function () {
var _context, _context2;
return _createElement(ScrollArea, null, _createElement(Table, null, _createElement(TableHead, null, _createElement(TableRow, null, _mapInstanceProperty(_context = _Array$from({
length: colsCount
})).call(_context, function (_, i) {
return _createElement(TableCell, {
key: i,
head: true
}, "Heading");
}))), _createElement(TableBody, null, _mapInstanceProperty(_context2 = _Array$from({
length: rowsCount
})).call(_context2, function (_, i) {
var _context3;
return _createElement(TableRow, {
key: i
}, _mapInstanceProperty(_context3 = _Array$from({
length: colsCount
})).call(_context3, function (_, i) {
return _createElement(TableCell, {
key: i
}, "Cell");
}));
}))));
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1Njcm9sbEFyZWEvU2Nyb2xsQXJlYS5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUFBLE9BQU8sS0FBUCxNQUFrQixPQUFsQjs7QUFDQSxTQUNDLE9BREQsUUFFTyw4QkFGUDtBQUdBLFNBQ0MsU0FERCxRQUVPLHVCQUZQO0FBR0EsT0FBTyxLQUFQLElBQ0MsU0FERCxFQUVDLFNBRkQsRUFHQyxRQUhELEVBSUMsU0FKRCxRQUtPLFVBTFA7QUFNQSxPQUFPLFVBQVAsTUFBdUIsSUFBdkI7QUFFQSxPQUFPLElBQU0sV0FBVyx5SkFBakI7QUFjUCxJQUFNLFNBQVMsR0FBRyxFQUFsQjtBQUNBLElBQU0sU0FBUyxHQUFHLEVBQWxCO0FBRUEsZUFBZSxTQUFTLENBQUMsWUFBRCxFQUFlLE1BQWYsQ0FBVCxDQUNiLGFBRGEsQ0FDQztBQUNkLEVBQUEsSUFBSSxFQUFFO0FBRFEsQ0FERCxFQUliLEdBSmEsQ0FLYixxQkFMYSxFQU1iO0FBQUEsU0FDQyxlQUFDLFVBQUQ7QUFDQyxJQUFBLEtBQUssRUFBRTtBQUNOLE1BQUEsU0FBUyxFQUFFLE9BREw7QUFFTixNQUFBLFFBQVEsRUFBRztBQUZMO0FBRFIsS0FNQztBQUNDLElBQUEsS0FBSyxFQUFFO0FBQ04sTUFBQSxLQUFLLEVBQU8sT0FETjtBQUVOLE1BQUEsTUFBTSxFQUFNLE9BRk47QUFHTixNQUFBLFVBQVUsRUFBRTtBQUhOO0FBRFIsZUFORCxDQUREO0FBQUEsQ0FOYSxFQXlCYixHQXpCYSxDQTBCYixxQkExQmEsRUEyQmI7QUFBQSxTQUNDLGVBQUMsVUFBRDtBQUNDLElBQUEsS0FBSyxFQUFFO0FBQ04sTUFBQSxTQUFTLEVBQUUsT0FETDtBQUVOLE1BQUEsUUFBUSxFQUFHO0FBRkwsS0FEUjtBQUtDLElBQUEsZUFBZSxFQUFFLE9BQU8sQ0FBQyxtQkFBRCxFQUFzQixJQUF0QixDQUx6QjtBQU1DLElBQUEsaUJBQWlCLEVBQUUsT0FBTyxDQUFDLHFCQUFELEVBQXdCLEtBQXhCLENBTjNCO0FBT0MsSUFBQSxrQkFBa0IsRUFBRSxPQUFPLENBQUMsc0JBQUQsRUFBeUIsSUFBekIsQ0FQNUI7QUFRQyxJQUFBLGdCQUFnQixFQUFFLE9BQU8sQ0FBQyxvQkFBRCxFQUF1QixLQUF2QjtBQVIxQixLQVVDO0FBQ0MsSUFBQSxLQUFLLEVBQUU7QUFDTixNQUFBLEtBQUssRUFBTyxPQUROO0FBRU4sTUFBQSxNQUFNLEVBQU0sT0FGTjtBQUdOLE1BQUEsVUFBVSxFQUFFO0FBSE47QUFEUixlQVZELENBREQ7QUFBQSxDQTNCYSxFQWtEYixHQWxEYSxDQW1EYix3QkFuRGEsRUFvRGI7QUFBQSxTQUNDLGVBQUMsVUFBRDtBQUNDLElBQUEsS0FBSyxFQUFFO0FBQ04sTUFBQSxTQUFTLEVBQUUsT0FETDtBQUVOLE1BQUEsUUFBUSxFQUFHO0FBRkwsS0FEUjtBQUtDLElBQUEsY0FBYyxFQUFFLE9BQU8sQ0FBQyxrQkFBRCxFQUFxQixJQUFyQixDQUx4QjtBQU1DLElBQUEsY0FBYyxFQUFFLE9BQU8sQ0FBQyxrQkFBRCxFQUFxQixJQUFyQjtBQU54QixLQVFDO0FBQ0MsSUFBQSxLQUFLLEVBQUU7QUFDTixNQUFBLEtBQUssRUFBTyxPQUROO0FBRU4sTUFBQSxNQUFNLEVBQU0sT0FGTjtBQUdOLE1BQUEsVUFBVSxFQUFFO0FBSE47QUFEUixlQVJELENBREQ7QUFBQSxDQXBEYSxFQXlFYixHQXpFYSxDQTBFYixZQTFFYSxFQTJFYjtBQUFBOztBQUFBLFNBQ0MsZUFBQyxVQUFELFFBQ0MsZUFBQyxLQUFELFFBQ0MsZUFBQyxTQUFELFFBQ0MsZUFBQyxRQUFELFFBQ0UsNENBQVc7QUFBRSxJQUFBLE1BQU0sRUFBRTtBQUFWLEdBQVgsa0JBQXNDLFVBQUMsQ0FBRCxFQUFJLENBQUo7QUFBQSxXQUN0QyxlQUFDLFNBQUQ7QUFBVyxNQUFBLEdBQUcsRUFBRSxDQUFoQjtBQUFtQixNQUFBLElBQUk7QUFBdkIsaUJBRHNDO0FBQUEsR0FBdEMsQ0FERixDQURELENBREQsRUFVQyxlQUFDLFNBQUQsUUFDRSw2Q0FBVztBQUFFLElBQUEsTUFBTSxFQUFFO0FBQVYsR0FBWCxtQkFBc0MsVUFBQyxDQUFELEVBQUksQ0FBSjtBQUFBOztBQUFBLFdBQ3RDLGVBQUMsUUFBRDtBQUFVLE1BQUEsR0FBRyxFQUFFO0FBQWYsT0FDRSw2Q0FBVztBQUFFLE1BQUEsTUFBTSxFQUFFO0FBQVYsS0FBWCxtQkFBc0MsVUFBQyxDQUFELEVBQUksQ0FBSjtBQUFBLGFBQ3RDLGVBQUMsU0FBRDtBQUFXLFFBQUEsR0FBRyxFQUFFO0FBQWhCLGdCQURzQztBQUFBLEtBQXRDLENBREYsQ0FEc0M7QUFBQSxHQUF0QyxDQURGLENBVkQsQ0FERCxDQUREO0FBQUEsQ0EzRWEsQ0FBZiIsInNvdXJjZVJvb3QiOiIifQ==