@workday/canvas-kit-docs 6.1.2 → 6.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,17 +4,28 @@ import {space} from '@workday/canvas-kit-react/tokens';
|
|
|
4
4
|
import {Tabs, useTabsModel, TabsModel} from '@workday/canvas-kit-react/tabs';
|
|
5
5
|
import {SelectionModel} from '../../lib/selection';
|
|
6
6
|
|
|
7
|
+
type Tab = {
|
|
8
|
+
tab: string;
|
|
9
|
+
id: string;
|
|
10
|
+
};
|
|
11
|
+
|
|
7
12
|
export default () => {
|
|
8
|
-
const [tabs, setTabs] = React.useState([
|
|
13
|
+
const [tabs, setTabs] = React.useState<Tab[]>([
|
|
9
14
|
{tab: 'Tab 1', id: 'tab-1'},
|
|
10
15
|
{tab: 'Tab 2', id: 'tab-2'},
|
|
11
16
|
{tab: 'Tab 3', id: 'tab-3'},
|
|
17
|
+
{tab: 'Add Tab', id: 'add'},
|
|
12
18
|
]);
|
|
13
|
-
const addedRef = React.useRef(tabs.length);
|
|
19
|
+
const addedRef = React.useRef(tabs.length - 1);
|
|
14
20
|
const model = useTabsModel({
|
|
15
|
-
|
|
21
|
+
items: tabs,
|
|
22
|
+
shouldSelect: ({data}) => data.id !== 'add',
|
|
16
23
|
});
|
|
17
24
|
|
|
25
|
+
// A ref of the model for the render functions to work around the caching done to lists
|
|
26
|
+
const modelRef = React.useRef(model);
|
|
27
|
+
modelRef.current = model;
|
|
28
|
+
|
|
18
29
|
/**
|
|
19
30
|
* Helper function that should be called when an item is programmatically removed. The following
|
|
20
31
|
* side effects depend on state of the model:
|
|
@@ -22,8 +33,9 @@ export default () => {
|
|
|
22
33
|
* * **Item is selected**: Selection will be moved to the next item in the list
|
|
23
34
|
* @param id The id of the item that will be removed
|
|
24
35
|
*/
|
|
25
|
-
const removeItem = (id: string, model: SelectionModel) => {
|
|
36
|
+
const removeItem = <T extends unknown>(id: string, model: SelectionModel<T>) => {
|
|
26
37
|
const index = model.state.items.findIndex(item => model.getId(item) === model.state.cursorId);
|
|
38
|
+
console.log('index', index, id, model.state.cursorId, model.state.items);
|
|
27
39
|
const nextIndex = index === model.state.items.length - 1 ? index - 1 : index + 1;
|
|
28
40
|
const nextId = model.getId(model.state.items[nextIndex]);
|
|
29
41
|
if (model.state.selectedIds[0] === id) {
|
|
@@ -41,48 +53,52 @@ export default () => {
|
|
|
41
53
|
}
|
|
42
54
|
};
|
|
43
55
|
|
|
44
|
-
const onKeyDown = (e: React.KeyboardEvent<HTMLElement
|
|
45
|
-
if (e.key === 'Delete') {
|
|
56
|
+
const onKeyDown = (id: string) => (e: React.KeyboardEvent<HTMLElement>) => {
|
|
57
|
+
if (e.key === 'Delete' && id !== 'add') {
|
|
46
58
|
setTabs(tabs.filter(item => item.id !== id));
|
|
59
|
+
const model = modelRef.current;
|
|
47
60
|
removeItem(id, model);
|
|
48
61
|
}
|
|
49
62
|
};
|
|
50
63
|
|
|
64
|
+
const onClick = (id: string) => (e: React.MouseEvent) => {
|
|
65
|
+
if (id === 'add') {
|
|
66
|
+
addedRef.current += 1;
|
|
67
|
+
setTabs(tabs => {
|
|
68
|
+
const newTabs = tabs.slice(0, tabs.length - 1);
|
|
69
|
+
const addTab = tabs.slice(-1);
|
|
70
|
+
return newTabs.concat(
|
|
71
|
+
{tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`},
|
|
72
|
+
addTab
|
|
73
|
+
);
|
|
74
|
+
});
|
|
75
|
+
model.events.goTo({id: 'add'});
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
|
|
51
79
|
return (
|
|
52
80
|
<Tabs model={model}>
|
|
53
|
-
<Tabs.List>
|
|
54
|
-
{
|
|
55
|
-
<Tabs.Item
|
|
56
|
-
key={item.id}
|
|
57
|
-
name={item.id}
|
|
58
|
-
index={index}
|
|
59
|
-
onKeyDown={e => onKeyDown(e, item.id)}
|
|
60
|
-
>
|
|
81
|
+
<Tabs.List overflowButton={<Tabs.OverflowButton>More</Tabs.OverflowButton>}>
|
|
82
|
+
{(item: Tab) => (
|
|
83
|
+
<Tabs.Item name={item.id} onKeyDown={onKeyDown(item.id)} onClick={onClick(item.id)}>
|
|
61
84
|
{item.tab}
|
|
62
85
|
</Tabs.Item>
|
|
63
|
-
)
|
|
64
|
-
<Tabs.Item
|
|
65
|
-
key={'last'}
|
|
66
|
-
index={tabs.length}
|
|
67
|
-
name={'last'}
|
|
68
|
-
onClick={() => {
|
|
69
|
-
addedRef.current += 1;
|
|
70
|
-
setTabs(tabs =>
|
|
71
|
-
tabs.concat({tab: `Tab ${addedRef.current}`, id: `tab-${addedRef.current}`})
|
|
72
|
-
);
|
|
73
|
-
model.events.goTo({id: 'last'});
|
|
74
|
-
}}
|
|
75
|
-
>
|
|
76
|
-
Add Tab
|
|
77
|
-
</Tabs.Item>
|
|
86
|
+
)}
|
|
78
87
|
</Tabs.List>
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
<Tabs.
|
|
88
|
+
<Tabs.Menu.Popper>
|
|
89
|
+
<Tabs.Menu.Card maxWidth={300} maxHeight={200}>
|
|
90
|
+
<Tabs.Menu.List>
|
|
91
|
+
{(item: Tab) => <Tabs.Menu.Item name={item.id}>{item.tab}</Tabs.Menu.Item>}
|
|
92
|
+
</Tabs.Menu.List>
|
|
93
|
+
</Tabs.Menu.Card>
|
|
94
|
+
</Tabs.Menu.Popper>
|
|
95
|
+
<Tabs.Panels>
|
|
96
|
+
{(item: Tab) => (
|
|
97
|
+
<Tabs.Panel marginTop="m" name={item.id}>
|
|
82
98
|
Contents of {item.tab}
|
|
83
99
|
</Tabs.Panel>
|
|
84
|
-
)
|
|
85
|
-
</
|
|
100
|
+
)}
|
|
101
|
+
</Tabs.Panels>
|
|
86
102
|
</Tabs>
|
|
87
103
|
);
|
|
88
104
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "6.1.
|
|
3
|
+
"version": "6.1.3",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
],
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@storybook/csf": "0.0.1",
|
|
53
|
-
"@workday/canvas-kit-react": "^6.1.
|
|
53
|
+
"@workday/canvas-kit-react": "^6.1.3"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"fs-extra": "^10.0.0",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"mkdirp": "^1.0.3",
|
|
59
59
|
"typescript": "^3.8.3"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "729934bb558b985af2b20a0444a4042c73adbaae"
|
|
62
62
|
}
|