@linzjs/windows 1.1.0 → 1.1.1
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.
- package/README.md +1 -98
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,101 +33,4 @@ yarn add @linzjs/windows
|
|
|
33
33
|
npm run storybook
|
|
34
34
|
```
|
|
35
35
|
|
|
36
|
-
See [Chromatic storybook](https://64a2356b80885af35510b627
|
|
37
|
-
|
|
38
|
-
## Examples
|
|
39
|
-
|
|
40
|
-
### Modal
|
|
41
|
-
#### Example: Modal Context Provider
|
|
42
|
-
Don't forget to add a ModalContextProvider at the root of your project.
|
|
43
|
-
```
|
|
44
|
-
export const App = () => (
|
|
45
|
-
<ModalContextProvider>
|
|
46
|
-
<div>...the rest of your app...</div>
|
|
47
|
-
</ModalContextProvider>
|
|
48
|
-
);
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
#### Example: Modal Component
|
|
52
|
-
```
|
|
53
|
-
// Extend your props with ModalCallback<RESULT_TYPE> to add a return type, and enable close/resolve
|
|
54
|
-
export interface TestModalProps extends ModalCallback<number> {
|
|
55
|
-
text: string; // A user property
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// Close and resolve will be passed to your props magically!
|
|
59
|
-
export const TestModal = ({ text, close, resolve }: TestModalProps) => (
|
|
60
|
-
<Modal>
|
|
61
|
-
<div>
|
|
62
|
-
<div>This is the modal text: '{text}'</div>
|
|
63
|
-
<div>
|
|
64
|
-
<button onClick={close}>Close</button>
|
|
65
|
-
<button onClick={() => resolve(1)}>Return 1</button>
|
|
66
|
-
</div>
|
|
67
|
-
</div>
|
|
68
|
-
</Modal>
|
|
69
|
-
);
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
#### Example: Modal Invocation
|
|
73
|
-
```
|
|
74
|
-
export const TestModalUsage = () => {
|
|
75
|
-
// showModal to show modal, modalOwnerRef is only required if you have popout windows
|
|
76
|
-
const { showModal, modalOwnerRef } = useShowModal();
|
|
77
|
-
|
|
78
|
-
const showModalHandler = async () => {
|
|
79
|
-
// Show modal and await result
|
|
80
|
-
const result = await showModal(TestModal, { text: "Text text" });
|
|
81
|
-
|
|
82
|
-
// If result is undefined the modal was closed
|
|
83
|
-
if (!result) return alert("Modal closed");
|
|
84
|
-
|
|
85
|
-
// Otherwise we have a result
|
|
86
|
-
alert(`Modal result is: ${result}`);
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
// Remember to add the modalOwnerRef!
|
|
90
|
-
return (
|
|
91
|
-
<div ref={modalOwnerRef}>
|
|
92
|
-
<button onClick={showModalHandler}>Show modal</button>
|
|
93
|
-
</div>
|
|
94
|
-
);
|
|
95
|
-
};
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
### Windows
|
|
99
|
-
**Note:** *Windows are called Panels so as not to conflict with browser window types*
|
|
100
|
-
|
|
101
|
-
##### Example: Panel Context Provider
|
|
102
|
-
Don't forget to add a PanelContextProvider at the root of your project.
|
|
103
|
-
```
|
|
104
|
-
export const App = () => (
|
|
105
|
-
<PanelsContextProvider baseZIndex={500}>
|
|
106
|
-
...the rest of your app...
|
|
107
|
-
</PanelsContextProvider>
|
|
108
|
-
);
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
##### Example: Panel Component
|
|
112
|
-
```
|
|
113
|
-
export const TestPanel = () => {
|
|
114
|
-
return (
|
|
115
|
-
<Panel name={"Panel demo"} size={{ width: 640, height: 400 }}>
|
|
116
|
-
<PanelHeader title={"Panel demo"} />
|
|
117
|
-
<PanelContent>
|
|
118
|
-
...PanelContent...
|
|
119
|
-
</PanelContent>
|
|
120
|
-
</Panel>
|
|
121
|
-
);
|
|
122
|
-
};
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
##### Example: Panel Invocation
|
|
126
|
-
```
|
|
127
|
-
export const TestPanelUsage = () => {
|
|
128
|
-
const { openPanel } = useContext(PanelsContext);
|
|
129
|
-
|
|
130
|
-
return <button onClick={() => openPanel(TestPanel)}>Show panel</button>;
|
|
131
|
-
};
|
|
132
|
-
```
|
|
133
|
-
|
|
36
|
+
See [Chromatic storybook](https://master--64a2356b80885af35510b627.chromatic.com/) for documentation.
|