Skip to content

Commit 5b492a4

Browse files
LFDanLuLFDanLu
authored
Updating test app with expandable rows table and InlineAlert (#4866)
* adding treeble and inline alert to test apps * test build * Update examples/rsp-webpack-4/src/App.js * test app fix * revert some ci changes * take two of build fix * make table shorter * forgot next 17 * revert ci changes * fixing warnings * Revert "revert ci changes" This reverts commit 64e7384. * Revert "Revert "revert ci changes"" This reverts commit 7f5bd8d.
1 parent 48994a7 commit 5b492a4

File tree

12 files changed

+175
-29
lines changed

12 files changed

+175
-29
lines changed

‎examples/rsp-cra-18/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"homepage": ".",
66
"dependencies": {
77
"@adobe/react-spectrum": "latest",
8+
"@react-spectrum/inlinealert": "^3.0.0-rc.0",
89
"@spectrum-icons/workflow": "latest",
910
"@testing-library/jest-dom": "^5.16.4",
1011
"@testing-library/react": "^13.3.0",

‎examples/rsp-cra-18/src/App.tsx

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,29 @@
11
import './App.css';
2-
import {Provider, defaultTheme, Item, TagGroup} from '@adobe/react-spectrum'
2+
import {Provider, defaultTheme, Item, TagGroup, Cell, Column, Row, TableBody, TableHeader, TableView, Content, Heading} from '@adobe/react-spectrum';
33
import Lighting from './Lighting';
44
import {useState} from 'react'
55
import BodyContent from './BodyContent';
6+
import {enableTableNestedRows} from '@react-stately/flags';
7+
import {InlineAlert} from '@react-spectrum/inlinealert'
8+
9+
let columns = [
10+
{name: 'Foo', key: 'foo'},
11+
{name: 'Bar', key: 'bar'},
12+
{name: 'Baz', key: 'baz'}
13+
];
14+
15+
let nestedItems = [
16+
{foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
17+
{foo: 'Lvl 2 Foo 1', bar: 'Lvl 2 Bar 1', baz: 'Lvl 2 Baz 1', childRows: [
18+
{foo: 'Lvl 3 Foo 1', bar: 'Lvl 3 Bar 1', baz: 'Lvl 3 Baz 1'}
19+
]},
20+
{foo: 'Lvl 2 Foo 2', bar: 'Lvl 2 Bar 2', baz: 'Lvl 2 Baz 2'}
21+
]}
22+
];
623

724
function App() {
825
let [selected, setSelection] = useState(false);
26+
enableTableNestedRows();
927

1028
return (
1129
<Provider theme={defaultTheme}
@@ -20,6 +38,24 @@ function App() {
2038
<Item>Shopping</Item>
2139
</TagGroup>
2240
<BodyContent />
41+
<TableView aria-label="example table with nested rows" UNSTABLE_allowsExpandableRows width={500} height={200} >
42+
<TableHeader columns={columns}>
43+
{column => <Column>{column.name}</Column>}
44+
</TableHeader>
45+
<TableBody items={nestedItems}>
46+
{(item: any) =>
47+
(<Row key={item.foo} UNSTABLE_childItems={item.childRows}>
48+
{(key) => {
49+
return <Cell>{item[key]}</Cell>;
50+
}}
51+
</Row>)
52+
}
53+
</TableBody>
54+
</TableView>
55+
<InlineAlert>
56+
<Heading>Payment Information</Heading>
57+
<Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
58+
</InlineAlert>
2359
</div>
2460
</Provider>
2561
);

‎examples/rsp-next-ts-17/next.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const withTM = require("next-transpile-modules")([
2020
'@react-spectrum/icon',
2121
'@react-spectrum/illustratedmessage',
2222
'@react-spectrum/image',
23+
'@react-spectrum/inlinealert',
2324
'@react-spectrum/label',
2425
'@react-spectrum/labeledvalue',
2526
'@react-spectrum/layout',

‎examples/rsp-next-ts-17/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"dependencies": {
1414
"@adobe/react-spectrum": "^3.26.0",
1515
"@react-spectrum/color": "^3.0.0-beta.16",
16+
"@react-spectrum/inlinealert": "^3.0.0-rc.0",
1617
"@react-spectrum/toast": "^3.0.0-alpha.0",
1718
"@spectrum-icons/illustrations": "^3.5.0",
1819
"@spectrum-icons/workflow": "^4.0.3",

‎examples/rsp-next-ts-17/pages/_app.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@ import { useState } from "react";
1414
import Moon from "@spectrum-icons/workflow/Moon";
1515
import Light from "@spectrum-icons/workflow/Light";
1616
import { ToastContainer } from "@react-spectrum/toast";
17+
import {enableTableNestedRows} from '@react-stately/flags';
1718

1819
function MyApp({ Component, pageProps }: AppProps) {
1920
const [theme, setTheme] = useState<ColorScheme>("light");
2021

2122
let themeIcons = { dark: <Moon />, light: <Light /> };
2223
let otherTheme: ColorScheme = theme === "light" ? "dark" : "light";
24+
enableTableNestedRows();
2325

2426
return (
2527
<SSRProvider>

‎examples/rsp-next-ts-17/pages/index.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,22 @@ import {
8383
} from "@react-spectrum/color";
8484
import ReorderableListView from "../components/ReorderableListView";
8585
import {ToastQueue} from '@react-spectrum/toast';
86+
import {InlineAlert} from '@react-spectrum/inlinealert'
87+
88+
let nestedItems = [
89+
{foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
90+
{foo: 'Lvl 2 Foo 1', bar: 'Lvl 2 Bar 1', baz: 'Lvl 2 Baz 1', childRows: [
91+
{foo: 'Lvl 3 Foo 1', bar: 'Lvl 3 Bar 1', baz: 'Lvl 3 Baz 1'}
92+
]},
93+
{foo: 'Lvl 2 Foo 2', bar: 'Lvl 2 Bar 2', baz: 'Lvl 2 Baz 2'}
94+
]}
95+
];
96+
97+
let columns = [
98+
{name: 'Foo', key: 'foo'},
99+
{name: 'Bar', key: 'bar'},
100+
{name: 'Baz', key: 'baz'}
101+
];
86102

87103
export default function Home() {
88104
let [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -188,6 +204,20 @@ export default function Home() {
188204
</Row>
189205
</TableBody>
190206
</TableView>
207+
<TableView aria-label="example table with nested rows" UNSTABLE_allowsExpandableRows width={500} height={200} >
208+
<TableHeader columns={columns}>
209+
{column => <Column>{column.name}</Column>}
210+
</TableHeader>
211+
<TableBody items={nestedItems}>
212+
{(item: any) =>
213+
(<Row key={item.foo} UNSTABLE_childItems={item.childRows}>
214+
{(key) => {
215+
return <Cell>{item[key]}</Cell>;
216+
}}
217+
</Row>)
218+
}
219+
</TableBody>
220+
</TableView>
191221
</Section>
192222

193223
<Section title="Color">
@@ -390,6 +420,10 @@ export default function Home() {
390420
<Item>Gaming</Item>
391421
<Item>Shopping</Item>
392422
</TagGroup>
423+
<InlineAlert>
424+
<Heading>Payment Information</Heading>
425+
<Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
426+
</InlineAlert>
393427
</Section>
394428

395429
<Section title="Content">

‎examples/rsp-next-ts/next.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default {
2121
'@react-spectrum/icon',
2222
'@react-spectrum/illustratedmessage',
2323
'@react-spectrum/image',
24+
'@react-spectrum/inlinealert',
2425
'@react-spectrum/label',
2526
'@react-spectrum/labeledvalue',
2627
'@react-spectrum/layout',

‎examples/rsp-next-ts/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"dependencies": {
1515
"@adobe/react-spectrum": "^3.26.0",
1616
"@react-spectrum/color": "^3.0.0-beta.16",
17+
"@react-spectrum/inlinealert": "^3.0.0-rc.0",
1718
"@react-spectrum/toast": "^3.0.0-alpha.0",
1819
"@spectrum-icons/illustrations": "^3.5.0",
1920
"@spectrum-icons/workflow": "^4.0.3",

‎examples/rsp-next-ts/pages/_app.tsx

Lines changed: 25 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import "../styles/globals.css";
22
import type { AppProps } from "next/app";
33
import {
4-
SSRProvider,
54
Provider,
65
lightTheme,
76
ActionButton,
@@ -14,42 +13,42 @@ import { useState } from "react";
1413
import Moon from "@spectrum-icons/workflow/Moon";
1514
import Light from "@spectrum-icons/workflow/Light";
1615
import { ToastContainer } from "@react-spectrum/toast";
16+
import {enableTableNestedRows} from '@react-stately/flags';
1717

1818
function MyApp({ Component, pageProps }: AppProps) {
1919
const [theme, setTheme] = useState<ColorScheme>("light");
2020

2121
let themeIcons = { dark: <Moon />, light: <Light /> };
2222
let otherTheme: ColorScheme = theme === "light" ? "dark" : "light";
23+
enableTableNestedRows();
2324

2425
return (
25-
<SSRProvider>
26-
<Provider theme={lightTheme} colorScheme={theme}>
27-
<Grid
28-
areas={["header", "content"]}
29-
columns={["1fr"]}
30-
rows={["size-200", "auto"]}
26+
<Provider theme={lightTheme} colorScheme={theme}>
27+
<Grid
28+
areas={["header", "content"]}
29+
columns={["1fr"]}
30+
rows={["size-200", "auto"]}
31+
gap="size-100"
32+
>
33+
<Flex
34+
direction="row"
3135
gap="size-100"
36+
justifyContent="end"
37+
margin="size-100"
3238
>
33-
<Flex
34-
direction="row"
35-
gap="size-100"
36-
justifyContent="end"
37-
margin="size-100"
39+
<ActionButton
40+
aria-label={`Switch to ${otherTheme} mode.`}
41+
onPress={() => setTheme(otherTheme)}
3842
>
39-
<ActionButton
40-
aria-label={`Switch to ${otherTheme} mode.`}
41-
onPress={() => setTheme(otherTheme)}
42-
>
43-
{themeIcons[otherTheme]}
44-
</ActionButton>
45-
</Flex>
46-
<View>
47-
<Component {...pageProps} />
48-
</View>
49-
</Grid>
50-
<ToastContainer />
51-
</Provider>
52-
</SSRProvider>
43+
{themeIcons[otherTheme]}
44+
</ActionButton>
45+
</Flex>
46+
<View>
47+
<Component {...pageProps} />
48+
</View>
49+
</Grid>
50+
<ToastContainer />
51+
</Provider>
5352
);
5453
}
5554
export default MyApp;

‎examples/rsp-next-ts/pages/index.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,22 @@ import {
8383
} from "@react-spectrum/color";
8484
import ReorderableListView from "../components/ReorderableListView";
8585
import {ToastQueue} from '@react-spectrum/toast';
86+
import {InlineAlert} from '@react-spectrum/inlinealert'
87+
88+
let nestedItems = [
89+
{foo: 'Lvl 1 Foo 1', bar: 'Lvl 1 Bar 1', baz: 'Lvl 1 Baz 1', childRows: [
90+
{foo: 'Lvl 2 Foo 1', bar: 'Lvl 2 Bar 1', baz: 'Lvl 2 Baz 1', childRows: [
91+
{foo: 'Lvl 3 Foo 1', bar: 'Lvl 3 Bar 1', baz: 'Lvl 3 Baz 1'}
92+
]},
93+
{foo: 'Lvl 2 Foo 2', bar: 'Lvl 2 Bar 2', baz: 'Lvl 2 Baz 2'}
94+
]}
95+
];
96+
97+
let columns = [
98+
{name: 'Foo', key: 'foo'},
99+
{name: 'Bar', key: 'bar'},
100+
{name: 'Baz', key: 'baz'}
101+
];
86102

87103
export default function Home() {
88104
let [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -188,6 +204,20 @@ export default function Home() {
188204
</Row>
189205
</TableBody>
190206
</TableView>
207+
<TableView aria-label="example table with nested rows" UNSTABLE_allowsExpandableRows width={500} height={200} >
208+
<TableHeader columns={columns}>
209+
{column => <Column>{column.name}</Column>}
210+
</TableHeader>
211+
<TableBody items={nestedItems}>
212+
{(item: any) =>
213+
(<Row key={item.foo} UNSTABLE_childItems={item.childRows}>
214+
{(key) => {
215+
return <Cell>{item[key]}</Cell>;
216+
}}
217+
</Row>)
218+
}
219+
</TableBody>
220+
</TableView>
191221
</Section>
192222

193223
<Section title="Color">
@@ -390,6 +420,10 @@ export default function Home() {
390420
<Item>Gaming</Item>
391421
<Item>Shopping</Item>
392422
</TagGroup>
423+
<InlineAlert>
424+
<Heading>Payment Information</Heading>
425+
<Content>Enter your billing address, shipping address, and payment method to complete your purchase.</Content>
426+
</InlineAlert>
393427
</Section>
394428

395429
<Section title="Content">

0 commit comments

Comments
 (0)