@flexis/ui/components/ScrollArea/ScrollArea.stories.babel.js

Styleless React Components

import React from 'react';
import { boolean } from '@storybook/addon-knobs/react';
import { storiesOf } from '../../helpers/stories';
import Table, { TableHead, TableBody, TableRow, TableCell } from '../Table';
import ScrollArea from './';
export const stylableApi = `
Stylable API
---
- ::scroller
	- :hideXScrollbar
	- :hideYScrollbar
- ::shadow
	- :active
	- :top
	- :right
	- :bottom
	- :left
`;
const colsCount = 20;
const rowsCount = 50;
export default storiesOf('ScrollArea', module)
    .addParameters({
    info: stylableApi
})
    .add('with scroll content', () => (<ScrollArea style={{
    maxHeight: '400px',
    maxWidth: '400px'
}}>
				<div style={{
    width: '600px',
    height: '600px',
    background: 'aqua'
}}>
					Content
				</div>
			</ScrollArea>))
    .add('with ignore shadows', () => (<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)}>
				<div style={{
    width: '600px',
    height: '600px',
    background: 'aqua'
}}>
					Content
				</div>
			</ScrollArea>))
    .add('with hidden scrollbars', () => (<ScrollArea style={{
    maxHeight: '400px',
    maxWidth: '400px'
}} hideXScrollbar={boolean('Hide X-scrollbar', true)} hideYScrollbar={boolean('Hide Y-scrollbar', true)}>
				<div style={{
    width: '600px',
    height: '600px',
    background: 'aqua'
}}>
					Content
				</div>
			</ScrollArea>))
    .add('with table', () => (<ScrollArea>
				<Table>
					<TableHead>
						<TableRow>
							{Array.from({ length: colsCount }).map((_, i) => (<TableCell key={i} head>
									Heading
								</TableCell>))}
						</TableRow>
					</TableHead>
					<TableBody>
						{Array.from({ length: rowsCount }).map((_, i) => (<TableRow key={i}>
								{Array.from({ length: colsCount }).map((_, i) => (<TableCell key={i}>
										Cell
									</TableCell>))}
							</TableRow>))}
					</TableBody>
				</Table>
			</ScrollArea>));
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2Nyb2xsQXJlYS5zdG9yaWVzLmpzeCIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1Njcm9sbEFyZWEvU2Nyb2xsQXJlYS5zdG9yaWVzLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUNOLE9BQU8sRUFDUCxNQUFNLDhCQUE4QixDQUFDO0FBQ3RDLE9BQU8sRUFDTixTQUFTLEVBQ1QsTUFBTSx1QkFBdUIsQ0FBQztBQUMvQixPQUFPLEtBQUssRUFBRSxFQUNiLFNBQVMsRUFDVCxTQUFTLEVBQ1QsUUFBUSxFQUNSLFNBQVMsRUFDVCxNQUFNLFVBQVUsQ0FBQztBQUNsQixPQUFPLFVBQVUsTUFBTSxJQUFJLENBQUM7QUFFNUIsTUFBTSxDQUFDLE1BQU0sV0FBVyxHQUFHOzs7Ozs7Ozs7Ozs7Q0FZMUIsQ0FBQztBQUVGLE1BQU0sU0FBUyxHQUFHLEVBQUUsQ0FBQztBQUNyQixNQUFNLFNBQVMsR0FBRyxFQUFFLENBQUM7QUFFckIsZUFBZSxTQUFTLENBQUMsWUFBWSxFQUFFLE1BQU0sQ0FBQztLQUM1QyxhQUFhLENBQUM7SUFDZCxJQUFJLEVBQUUsV0FBVztDQUNqQixDQUFDO0tBQ0QsR0FBRyxDQUNILHFCQUFxQixFQUNyQixHQUFHLEVBQUUsQ0FBQyxDQUNMLENBQUMsVUFBVSxDQUNWLEtBQUssQ0FBQyxDQUFDO0lBQ04sU0FBUyxFQUFFLE9BQU87SUFDbEIsUUFBUSxFQUFHLE9BQU87Q0FDbEIsQ0FBQyxDQUVGO0lBQUEsQ0FBQyxHQUFHLENBQ0gsS0FBSyxDQUFDLENBQUM7SUFDTixLQUFLLEVBQU8sT0FBTztJQUNuQixNQUFNLEVBQU0sT0FBTztJQUNuQixVQUFVLEVBQUUsTUFBTTtDQUNsQixDQUFDLENBRUY7O0lBQ0QsRUFBRSxHQUFHLENBQ047R0FBQSxFQUFFLFVBQVUsQ0FBQyxDQUNiLENBQ0Q7S0FDQSxHQUFHLENBQ0gs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