react-sync-ui 0.1.1 → 0.1.2
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 +179 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,180 @@
|
|
|
1
1
|
# React sync ui
|
|
2
|
+
|
|
3
|
+
This library enables to synchronous workflow like this where based on the sequential business logic is react state changed
|
|
4
|
+
|
|
5
|
+
## usage example
|
|
6
|
+
|
|
7
|
+
```ts
|
|
8
|
+
const workflow = async () => {
|
|
9
|
+
let isOk = false;
|
|
10
|
+
|
|
11
|
+
const name = await syncPrompt("fill your name");
|
|
12
|
+
|
|
13
|
+
let triesCount = 0;
|
|
14
|
+
|
|
15
|
+
while (
|
|
16
|
+
(await syncPrompt(`Hello ${name}, fill the secret password!`)) !== userName
|
|
17
|
+
) {
|
|
18
|
+
await syncAlert("Invalid password, keep trying");
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
await syncAlert(`Congratulation Mr. ${userName}, you are logged in`);
|
|
22
|
+
};
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Installation
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
npm i react-sync-ui
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
### Setup SyncUI Component into the root of yout project
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
import { SyncUI } from 'react-sync-ui'
|
|
37
|
+
|
|
38
|
+
const App = () => (
|
|
39
|
+
<>
|
|
40
|
+
<SyncUI />
|
|
41
|
+
<YourAppStuffs />
|
|
42
|
+
<>
|
|
43
|
+
)
|
|
44
|
+
|
|
45
|
+
ReactDOM.render(<App />, document.getElementById("root"));
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Code usage examples
|
|
50
|
+
|
|
51
|
+
Create your UI connectd to the syncUI wrapper
|
|
52
|
+
|
|
53
|
+
syncUI enables you to do the abstraction to promisify your react Components
|
|
54
|
+
|
|
55
|
+
#### Alert example
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
|
|
59
|
+
import { SyncUI } from "react-sync-ui";
|
|
60
|
+
|
|
61
|
+
export const syncAlert = makeSyncUI<string, void>((props) => (
|
|
62
|
+
<Modal isOpen={true} toggle={() => props.resolve()}>
|
|
63
|
+
<ModalHeader>{props.data}</ModalHeader>
|
|
64
|
+
<ModalFooter>
|
|
65
|
+
<Button onClick={() => props.resolve()}>OK</Button>
|
|
66
|
+
</ModalFooter>
|
|
67
|
+
</Modal>
|
|
68
|
+
);
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
/// usage:
|
|
72
|
+
|
|
73
|
+
<button
|
|
74
|
+
onClick={async () => {
|
|
75
|
+
await syncAlert("You're hacked");
|
|
76
|
+
}}
|
|
77
|
+
>
|
|
78
|
+
click to me
|
|
79
|
+
</button>;
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
#### Prompt example
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
|
|
87
|
+
import { makeSyncUI } from "react-sync-ui";
|
|
88
|
+
|
|
89
|
+
export const syncPrompt = makeSyncUI<string, string>((props) => {
|
|
90
|
+
const [input, setInput] = React.useState("");
|
|
91
|
+
|
|
92
|
+
return (
|
|
93
|
+
<Modal
|
|
94
|
+
toggle={() => props.reject(new Error("User forced close prompt modal"))}
|
|
95
|
+
isOpen={true}
|
|
96
|
+
>
|
|
97
|
+
<form
|
|
98
|
+
onSubmit={(e) => {
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
setInput("");
|
|
101
|
+
props.resolve(input);
|
|
102
|
+
}}
|
|
103
|
+
>
|
|
104
|
+
<ModalHeader>{props.data.title}</ModalHeader>
|
|
105
|
+
|
|
106
|
+
<ModalBody>
|
|
107
|
+
<label>
|
|
108
|
+
{props.data}
|
|
109
|
+
<input
|
|
110
|
+
value={input}
|
|
111
|
+
onChange={(e) => setInput(e.target.value)}
|
|
112
|
+
type="text"
|
|
113
|
+
/>
|
|
114
|
+
</label>
|
|
115
|
+
</ModalBody>
|
|
116
|
+
|
|
117
|
+
<ModalFooter>
|
|
118
|
+
<Button type="submit">Accept</Button>
|
|
119
|
+
</ModalFooter>
|
|
120
|
+
</form>
|
|
121
|
+
</Modal>
|
|
122
|
+
);
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
/// usage:
|
|
126
|
+
|
|
127
|
+
<button
|
|
128
|
+
onClick={async () => {
|
|
129
|
+
const usersFeelings = await syncPrompt("how are you");
|
|
130
|
+
}}
|
|
131
|
+
>
|
|
132
|
+
click to me
|
|
133
|
+
</button>;
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
#### Confirm example
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from "reactstrap";
|
|
140
|
+
import { makeSyncUI } from "../../dist";
|
|
141
|
+
|
|
142
|
+
export const syncConfirm = makeSyncUI<
|
|
143
|
+
{
|
|
144
|
+
title: string;
|
|
145
|
+
description?: string;
|
|
146
|
+
okBtn?: string;
|
|
147
|
+
notOkBtn?: string;
|
|
148
|
+
},
|
|
149
|
+
boolean
|
|
150
|
+
>((props) => (
|
|
151
|
+
<Modal isOpen={true} toggle={() => props.resolve(false)}>
|
|
152
|
+
<ModalHeader>{props.data.title}</ModalHeader>
|
|
153
|
+
|
|
154
|
+
<ModalBody>{props.data.description}</ModalBody>
|
|
155
|
+
|
|
156
|
+
<ModalFooter>
|
|
157
|
+
<Button autoFocus onClick={() => props.resolve(true)}>
|
|
158
|
+
{props.data.okBtn ?? "Yes"}
|
|
159
|
+
</Button>
|
|
160
|
+
<Button onClick={() => props.resolve(false)}>
|
|
161
|
+
{props.data.notOkBtn ?? "No"}
|
|
162
|
+
</Button>
|
|
163
|
+
</ModalFooter>
|
|
164
|
+
</Modal>
|
|
165
|
+
));
|
|
166
|
+
|
|
167
|
+
/// usage:
|
|
168
|
+
|
|
169
|
+
<button
|
|
170
|
+
onClick={async () => {
|
|
171
|
+
const isOk = await syncConfirm({
|
|
172
|
+
title: "How are you",
|
|
173
|
+
okBtn: "Good",
|
|
174
|
+
notOkBtn: "Not good",
|
|
175
|
+
});
|
|
176
|
+
}}
|
|
177
|
+
>
|
|
178
|
+
click to me
|
|
179
|
+
</button>;
|
|
180
|
+
```
|