Skip to content

Commit e263700

Browse files
adamkudrnaadamkudrna
committed
Use ScrollView in Modal and Table (#50)
1 parent 1f23295 commit e263700

File tree

9 files changed

+913
-255
lines changed

9 files changed

+913
-255
lines changed

‎src/demo/pages/DemoContainer.jsx‎

Lines changed: 130 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ class DemoContainer extends React.Component {
7575
showModal: false,
7676
showModal2: false,
7777
showModal3: false,
78+
showModal4: false,
79+
showModal5: false,
7880
tableSortColumn: 'id',
7981
tableSortDirection: 'asc',
8082
};
@@ -1489,7 +1491,7 @@ class DemoContainer extends React.Component {
14891491
)}
14901492
/>
14911493
<Documentation
1492-
name="Small modal with loading icon"
1494+
name="Modal with long content and a loading icon"
14931495
component={(
14941496
<>
14951497
<Button
@@ -1510,16 +1512,17 @@ class DemoContainer extends React.Component {
15101512
]}
15111513
closeHandler={() => this.setState({ showModal2: false })}
15121514
size="small"
1513-
title="Small modal"
1515+
title="Modal with long content"
15141516
>
1515-
<p>Dialog content</p>
1517+
{/* eslint-disable-next-line max-len */}
1518+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
15161519
</Modal>
15171520
)}
15181521
</>
15191522
)}
15201523
/>
15211524
<Documentation
1522-
name="Auto-sized modal"
1525+
name="Modal with disabled body scrolling"
15231526
component={(
15241527
<>
15251528
<Button
@@ -1535,9 +1538,41 @@ class DemoContainer extends React.Component {
15351538
this.setState({ showModal3: false });
15361539
},
15371540
label: 'Agree',
1541+
loadingIcon: <Icon icon="loading" />,
15381542
},
15391543
]}
15401544
closeHandler={() => this.setState({ showModal3: false })}
1545+
scrollMode="modal"
1546+
size="small"
1547+
title="Modal with disabled body scrolling"
1548+
>
1549+
{/* eslint-disable-next-line max-len */}
1550+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
1551+
</Modal>
1552+
)}
1553+
</>
1554+
)}
1555+
/>
1556+
<Documentation
1557+
name="Auto-sized modal"
1558+
component={(
1559+
<>
1560+
<Button
1561+
label="Open modal"
1562+
clickHandler={() => this.setState({ showModal4: true })}
1563+
/>
1564+
{this.state.showModal4 && (
1565+
<Modal
1566+
actions={[
1567+
{
1568+
clickHandler: () => {
1569+
loggerClick();
1570+
this.setState({ showModal4: false });
1571+
},
1572+
label: 'Agree',
1573+
},
1574+
]}
1575+
closeHandler={() => this.setState({ showModal4: false })}
15411576
size="auto"
15421577
title="Auto-sized modal"
15431578
>
@@ -1548,27 +1583,27 @@ class DemoContainer extends React.Component {
15481583
)}
15491584
/>
15501585
<Documentation
1551-
name="Modal rendered in portal"
1586+
name="Modal rendered in React portal"
15521587
component={(
15531588
<>
15541589
<Button
15551590
label="Open modal"
1556-
clickHandler={() => this.setState({ showModal: true })}
1591+
clickHandler={() => this.setState({ showModal5: true })}
15571592
/>
1558-
{this.state.showModal && (
1593+
{this.state.showModal5 && (
15591594
<Modal
15601595
actions={[
15611596
{
15621597
clickHandler: () => {
15631598
loggerClick();
1564-
this.setState({ showModal: false });
1599+
this.setState({ showModal5: false });
15651600
},
15661601
label: 'Agree',
15671602
},
15681603
]}
1569-
closeHandler={() => this.setState({ showModal: false })}
1604+
closeHandler={() => this.setState({ showModal5: false })}
15701605
portalId="app-modal-portal"
1571-
title="Modal"
1606+
title="Modal in React portal"
15721607
>
15731608
<p>Dialog content</p>
15741609
</Modal>
@@ -2447,6 +2482,91 @@ class DemoContainer extends React.Component {
24472482
/>
24482483
)}
24492484
/>
2485+
<Documentation
2486+
name="Responsive Table with Scroll View"
2487+
component={(
2488+
<ScrollView direction="horizontal" shadowSize="100px">
2489+
<Table
2490+
columns={[
2491+
{
2492+
isSortable: true,
2493+
label: 'Id',
2494+
name: 'id',
2495+
},
2496+
{
2497+
format: (row) => (
2498+
<span style={{ whiteSpace: 'nowrap' }}>{row.name}</span>
2499+
),
2500+
isSortable: true,
2501+
label: 'Name',
2502+
name: 'name',
2503+
},
2504+
{
2505+
format: (row) => (
2506+
<span style={{ whiteSpace: 'nowrap' }}>
2507+
{row.dateOfBirth.toLocaleDateString('cz-CZ')}
2508+
</span>
2509+
),
2510+
isSortable: false,
2511+
label: 'Date of birth',
2512+
name: 'dateOfBirth',
2513+
},
2514+
{
2515+
format: (row) => (
2516+
<span style={{ whiteSpace: 'nowrap' }}>{row.address}</span>
2517+
),
2518+
isSortable: false,
2519+
label: 'Address',
2520+
name: 'address',
2521+
},
2522+
{
2523+
format: (row) => (
2524+
<span style={{ whiteSpace: 'nowrap' }}>{row.note}</span>
2525+
),
2526+
isSortable: false,
2527+
label: 'Note',
2528+
name: 'note',
2529+
},
2530+
]}
2531+
rows={[
2532+
{
2533+
address: '2020 Very Cool Street with a Very Long Name, Prague CZ',
2534+
dateOfBirth: new Date(2000, 12, 31),
2535+
id: 1,
2536+
name: 'Jan Novak',
2537+
note: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.',
2538+
},
2539+
{
2540+
address: '2020 Very Cool Street with a Very Long Name, Prague CZ',
2541+
dateOfBirth: new Date(2018, 1, 1),
2542+
id: 2,
2543+
name: 'Josef Novak',
2544+
note: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.',
2545+
},
2546+
{
2547+
address: '2020 Very Cool Street with a Very Long Name, Prague CZ',
2548+
dateOfBirth: new Date(1970, 12, 24),
2549+
id: 3,
2550+
name: 'Jiří Novak',
2551+
note: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.',
2552+
},
2553+
]}
2554+
sort={{
2555+
ascendingIcon: <Icon icon="up" />,
2556+
changeHandler: (column, direction) => {
2557+
this.setState({
2558+
tableSortColumn: column,
2559+
tableSortDirection: direction === 'asc' ? 'desc' : 'asc',
2560+
});
2561+
},
2562+
column: this.state.tableSortColumn,
2563+
descendingIcon: <Icon icon="down" />,
2564+
direction: this.state.tableSortDirection,
2565+
}}
2566+
/>
2567+
</ScrollView>
2568+
)}
2569+
/>
24502570
<h3 id="ui-components-textarea" className="typography-size-4 mb-6">Text Area</h3>
24512571
<Documentation
24522572
name="Text area variants"

0 commit comments

Comments
 (0)