Skip to content

Commit 33de55f

Browse files
radubreharradubrehar
committed
add light mode for ocean theme and release version patch
1 parent aa57435 commit 33de55f

File tree

9 files changed

+271
-34
lines changed

9 files changed

+271
-34
lines changed

‎examples/src/pages/tests/table/theme/balsam.page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function Example() {
7676
}}
7777
className="text-white bg-red-400 rounded-md p-4"
7878
>
79-
toggle
79+
Enable {darkMode ? 'light' : 'dark'} mode
8080
</button>
8181
</div>
8282
<div style={containerStyle}>

‎examples/src/pages/tests/table/theme/ocean.page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const infiniteProps: InfiniteTableProps<Order> = {
5959
columnMinWidth: 100,
6060
};
6161
export default function Example() {
62-
const [darkMode, setDarkMode] = React.useState(true);
62+
const [darkMode, setDarkMode] = React.useState(false);
6363
return (
6464
<div
6565
style={{
@@ -76,7 +76,7 @@ export default function Example() {
7676
}}
7777
className="text-white bg-red-400 rounded-md p-4"
7878
>
79-
toggle
79+
Enable {darkMode ? 'light' : 'dark'} mode
8080
</button>
8181
</div>
8282
<div style={containerStyle}>

‎source/src/components/InfiniteTable/vars-ocean-light.css.ts‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,38 @@
11
import { ThemeVars } from './vars.css';
2+
const borderColor = `color-mix(in srgb, transparent, ${ThemeVars.color.color} 10%)`;
23

34
export const OceanLightVars = {
45
// TODO we need to implement ocean light theme
5-
[ThemeVars.color.accent]: '#00b0ff',
6+
[ThemeVars.color.accent]: '#8b5cf6',
7+
8+
[ThemeVars.background]: '#d1e8fc',
9+
[ThemeVars.color.color]: '#04233d',
10+
[ThemeVars.components.HeaderCell.background]: '#7dd3fc', // tw sky
11+
[ThemeVars.components.HeaderCell.hoverBackground]: '#38bdf8',
12+
13+
[ThemeVars.components.Header.color]: ThemeVars.color.color,
14+
[ThemeVars.components.Cell.color]: ThemeVars.color.color,
15+
[ThemeVars.components.Cell.borderTop]: `1px solid ${borderColor}`,
16+
[ThemeVars.components.HeaderCell
17+
.borderRight]: `1px solid color-mix(in srgb, transparent, ${ThemeVars.color.color} 40%)`,
18+
619
[ThemeVars.components.Cell.borderLeft]: 'none',
720
[ThemeVars.components.Cell.borderRight]: 'none',
821
[ThemeVars.components.Cell.borderWidth]: '0px',
922
[ThemeVars.components.ActiveCellIndicator.inset]: '2px 1px 1px 1px',
23+
24+
[ThemeVars.components.Row.background]: ThemeVars.background,
25+
[ThemeVars.components.Row
26+
.oddBackground]: `color-mix(in srgb, ${ThemeVars.components.Row.background}, white 20%)`,
27+
28+
[ThemeVars.components.Row.hoverBackground]:
29+
ThemeVars.components.HeaderCell.background,
30+
[ThemeVars.components.Row.selectedBackground]:
31+
ThemeVars.components.HeaderCell.hoverBackground,
32+
[ThemeVars.components.Row
33+
.selectedHoverBackground]: `color-mix(in srgb, ${ThemeVars.components.Row.selectedBackground}, white 20%)`,
34+
[ThemeVars.components.Menu.separatorColor]: borderColor,
35+
[ThemeVars.components.Menu.background]:
36+
ThemeVars.components.HeaderCell.background,
37+
[ThemeVars.components.Menu.itemPressedBackground]: ThemeVars.background,
1038
};

‎www/content/docs/learn/theming/index.page.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import '@infinite-table/infinite-react/index.css';
1212
This file includes the following themes:
1313
- `default`
1414
- `minimalist`
15+
- `ocean`
16+
- `balsam`
1517

1618
Each of them in both the **`light`** and the **`dark`** modes.
1719

‎www/content/docs/learn/theming/theme-switching-example.page.tsx‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import * as React from 'react';
33

44
import { columns, Employee } from './columns';
55

6+
type ThemeName = 'default' | 'minimalist' | 'ocean' | 'balsam';
7+
68
export default function App() {
79
const [currentThemeMode, setThemeMode] = React.useState<'light' | 'dark'>(
810
'light',
911
);
10-
const [currentThemeName, setThemeName] = React.useState<
11-
'default' | 'minimalist'
12-
>('default');
12+
const [currentThemeName, setThemeName] = React.useState<ThemeName>('default');
1313
return (
1414
<div
1515
className={`infinite-theme-mode--${currentThemeMode} infinite-theme-name--${currentThemeName}`}
@@ -29,20 +29,27 @@ export default function App() {
2929
Current settings: <b>{currentThemeName}</b> theme,{' '}
3030
<b>{currentThemeMode}</b> mode.
3131
</div>
32-
<div style={{ display: 'flex', flexFlow: 'row', gap: 10, padding: 10 }}>
33-
<button
34-
style={{ marginTop: 'var(--infinite-space-4)' }}
35-
onClick={() =>
36-
setThemeName(
37-
currentThemeName === 'default' ? 'minimalist' : 'default',
38-
)
39-
}
32+
<div
33+
style={{
34+
display: 'flex',
35+
flexFlow: 'row',
36+
alignItems: 'center',
37+
gap: 10,
38+
padding: 10,
39+
}}
40+
>
41+
Select theme
42+
<select
43+
title="Select theme"
44+
value={currentThemeName}
45+
onChange={(e) => setThemeName(e.target.value as ThemeName)}
4046
>
41-
Switch to {currentThemeName === 'default' ? 'minimalist' : 'default'}{' '}
42-
theme.
43-
</button>
47+
<option value="ocean">Ocean</option>
48+
<option value="balsam">Balsam</option>
49+
<option value="minimalist">Minimalist</option>
50+
<option value="default">Default</option>
51+
</select>
4452
<button
45-
style={{ marginTop: 'var(--infinite-space-4)' }}
4653
onClick={() =>
4754
setThemeMode(currentThemeMode === 'dark' ? 'light' : 'dark')
4855
}

‎www/content/docs/learn/theming/theme-switching-minimalist-theme-default-example.page.tsx‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@ import * as React from 'react';
33

44
import { columns, Employee } from './columns';
55

6+
type ThemeName = 'default' | 'minimalist' | 'ocean' | 'balsam';
7+
68
export default function App() {
79
const [currentThemeMode, setThemeMode] = React.useState<'light' | 'dark'>(
810
'dark',
911
);
10-
const [currentThemeName, setThemeName] = React.useState<
11-
'default' | 'minimalist'
12-
>('minimalist');
12+
const [currentThemeName, setThemeName] =
13+
React.useState<ThemeName>('minimalist');
1314
return (
1415
<div
1516
className={`infinite-theme-mode--${currentThemeMode} infinite-theme-name--${currentThemeName}`}
@@ -29,20 +30,27 @@ export default function App() {
2930
Current settings: <b>{currentThemeName}</b> theme,{' '}
3031
<b>{currentThemeMode}</b> mode.
3132
</div>
32-
<div style={{ display: 'flex', flexFlow: 'row', gap: 10, padding: 10 }}>
33-
<button
34-
style={{ marginTop: 'var(--infinite-space-4)' }}
35-
onClick={() =>
36-
setThemeName(
37-
currentThemeName === 'default' ? 'minimalist' : 'default',
38-
)
39-
}
33+
<div
34+
style={{
35+
display: 'flex',
36+
flexFlow: 'row',
37+
alignItems: 'center',
38+
gap: 10,
39+
padding: 10,
40+
}}
41+
>
42+
Select theme
43+
<select
44+
title="Select theme"
45+
value={currentThemeName}
46+
onChange={(e) => setThemeName(e.target.value as ThemeName)}
4047
>
41-
Switch to {currentThemeName === 'default' ? 'minimalist' : 'default'}{' '}
42-
theme.
43-
</button>
48+
<option value="ocean">Ocean</option>
49+
<option value="balsam">Balsam</option>
50+
<option value="minimalist">Minimalist</option>
51+
<option value="default">Default</option>
52+
</select>
4453
<button
45-
style={{ marginTop: 'var(--infinite-space-4)' }}
4654
onClick={() =>
4755
setThemeMode(currentThemeMode === 'dark' ? 'light' : 'dark')
4856
}

‎www/content/docs/reference/horizontal-layout-example.page.tsx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import {
2+
InfiniteTable,
3+
DataSource,
4+
DataSourceData,
5+
} from '@infinite-table/infinite-react';
6+
7+
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
8+
import * as React from 'react';
9+
10+
type Developer = {
11+
id: number;
12+
firstName: string;
13+
lastName: string;
14+
country: string;
15+
city: string;
16+
currency: string;
17+
preferredLanguage: string;
18+
stack: string;
19+
canDesign: 'yes' | 'no';
20+
hobby: string;
21+
salary: number;
22+
age: number;
23+
};
24+
25+
const dataSource: DataSourceData<Developer> = () => {
26+
return fetch(
27+
'https://infinite-table.com/.netlify/functions/json-server' +
28+
`/developers1k-sql?`,
29+
)
30+
.then((r) => r.json())
31+
.then((data: Developer[]) => data);
32+
};
33+
34+
const columns: InfiniteTablePropColumns<Developer> = {
35+
id: { field: 'id', header: 'ID', defaultWidth: 50 },
36+
firstName: { field: 'firstName', header: 'First Name' },
37+
age: { field: 'age', header: 'Age' },
38+
};
39+
40+
export default function HorizontalLayout() {
41+
const [wrapRowsHorizontally, setWrapRowsHorizontally] = React.useState(false);
42+
return (
43+
<>
44+
<div
45+
style={{
46+
color: 'var(--infinite-cell-color)',
47+
marginBottom: 10,
48+
}}
49+
>
50+
<button
51+
onClick={() => {
52+
setWrapRowsHorizontally(!wrapRowsHorizontally);
53+
}}
54+
>
55+
{wrapRowsHorizontally ? 'Disable' : 'Enable'} Horizontal Layout
56+
</button>
57+
</div>
58+
<DataSource<Developer> primaryKey="id" data={dataSource}>
59+
<InfiniteTable<Developer>
60+
wrapRowsHorizontally={wrapRowsHorizontally}
61+
columns={columns}
62+
columnDefaultWidth={100}
63+
columnDefaultSortable={false}
64+
/>
65+
</DataSource>
66+
</>
67+
);
68+
}

‎www/content/docs/reference/horizontal-layout-with-column-set-index-in-header-example.page.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import {
2+
InfiniteTable,
3+
DataSource,
4+
DataSourceData,
5+
InfiniteTableColumn,
6+
} from '@infinite-table/infinite-react';
7+
8+
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
9+
import * as React from 'react';
10+
11+
type Developer = {
12+
id: number;
13+
firstName: string;
14+
lastName: string;
15+
country: string;
16+
city: string;
17+
currency: string;
18+
preferredLanguage: string;
19+
stack: string;
20+
canDesign: 'yes' | 'no';
21+
hobby: string;
22+
salary: number;
23+
age: number;
24+
};
25+
26+
const dataSource: DataSourceData<Developer> = () => {
27+
return fetch(
28+
'https://infinite-table.com/.netlify/functions/json-server' +
29+
`/developers1k-sql?`,
30+
)
31+
.then((r) => r.json())
32+
.then((data: Developer[]) => data);
33+
};
34+
35+
const getColumnHeaderFor = (
36+
label: string,
37+
): InfiniteTableColumn<Developer>['header'] => {
38+
return ({
39+
horizontalLayoutPageIndex,
40+
}: {
41+
horizontalLayoutPageIndex: number | null;
42+
}) => {
43+
return (
44+
<>
45+
{label}
46+
{horizontalLayoutPageIndex != null
47+
? `(${horizontalLayoutPageIndex + 1})`
48+
: ''}
49+
</>
50+
);
51+
};
52+
};
53+
const columns: InfiniteTablePropColumns<Developer> = {
54+
id: {
55+
field: 'id',
56+
defaultWidth: 80,
57+
header: getColumnHeaderFor('ID'),
58+
},
59+
firstName: { field: 'firstName', header: getColumnHeaderFor('Name') },
60+
age: { field: 'age', header: getColumnHeaderFor('Age') },
61+
};
62+
63+
export default function HorizontalLayout() {
64+
const [wrapRowsHorizontally, setWrapRowsHorizontally] = React.useState(true);
65+
return (
66+
<>
67+
<div
68+
style={{
69+
color: 'var(--infinite-cell-color)',
70+
marginBottom: 10,
71+
}}
72+
>
73+
<button
74+
onClick={() => {
75+
setWrapRowsHorizontally(!wrapRowsHorizontally);
76+
}}
77+
>
78+
{wrapRowsHorizontally ? 'Disable' : 'Enable'} Horizontal Layout
79+
</button>
80+
</div>
81+
<DataSource<Developer> primaryKey="id" data={dataSource}>
82+
<InfiniteTable<Developer>
83+
wrapRowsHorizontally={wrapRowsHorizontally}
84+
columns={columns}
85+
columnDefaultWidth={100}
86+
columnDefaultSortable={false}
87+
/>
88+
</DataSource>
89+
</>
90+
);
91+
}

‎www/content/docs/reference/infinite-table-props.page.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,39 @@ In the API Reference below we'll use **`DATA_TYPE`** to refer to the TypeScript
88

99
<PropTable sort>
1010

11+
<Prop name="wrapRowsHorizontally" type="boolean" defaultValue={false}>
12+
13+
> Whether to wrap rows horizontally or not. Horizontal Layout is a very different approach to the normal grid layout and only useful in very advanced scenarios.
14+
15+
When this is set to `true`, rows will be wrapped horizontally to fit the container.
16+
17+
When horizontal layout is enabled, rows will wrap and the existing columns will be repeated for each row-wrapping section - we will call them column sets.
18+
19+
So for example when the DataGrid is configured with 3 columns and the DataSource has 25 rows, but only 10 rows fit in the vertical viewport, you will end up with 3 column-sets: the first with 10 rows, the second with the next 10 rows, and the third with the remaining 5 rows. The same columns are repeated for each column-set.
20+
21+
<Sandpack title="Horizontal Layout example">
22+
23+
```tsx file="horizontal-layout-example.page.tsx"
24+
```
25+
26+
</Sandpack>
27+
28+
<Note>
29+
30+
In the column rendering functions (both for header and cell rendering), you will have access to the `horizontalLayoutPageIndex` property. This is the index of the current horizontal layout page (the current column-set). `horizontalLayoutPageIndex` can either be `null`, when horizontal layout is disabled, or a number >= 0, when horizontal layout is enabled.
31+
32+
</Note>
33+
34+
35+
<Sandpack title="Horizontal Layout example with column set index in header">
36+
37+
```tsx file="horizontal-layout-with-column-set-index-in-header-example.page.tsx"
38+
```
39+
40+
</Sandpack>
41+
42+
</Prop>
43+
1144
<Prop name="components.RowDetail">
1245

1346
> Component to use for rendering the row details section in the master-detail DataGrid. When specified, it makes InfiniteTable be a [master-detail DataGrid](/docs/learn/master-detail/overview). For configuring the height of row details, see <PropLink name="rowDetailHeight" />

0 commit comments

Comments
 (0)