react-native-bread 0.1.0 → 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 +102 -84
- package/lib/commonjs/icons/CloseIcon.js +1 -22
- package/lib/commonjs/icons/GreenCheck.js +1 -27
- package/lib/commonjs/icons/InfoIcon.js +1 -24
- package/lib/commonjs/icons/RedX.js +1 -27
- package/lib/commonjs/icons/index.js +1 -34
- package/lib/commonjs/index.js +1 -59
- package/lib/commonjs/toast-api.js +1 -127
- package/lib/commonjs/toast-provider.js +1 -71
- package/lib/commonjs/toast-store.js +1 -278
- package/lib/commonjs/toast.js +1 -445
- package/lib/commonjs/types.js +1 -6
- package/lib/module/icons/CloseIcon.js +1 -16
- package/lib/module/icons/GreenCheck.js +1 -21
- package/lib/module/icons/InfoIcon.js +1 -18
- package/lib/module/icons/RedX.js +1 -21
- package/lib/module/icons/index.js +1 -7
- package/lib/module/index.js +1 -14
- package/lib/module/toast-api.js +1 -124
- package/lib/module/toast-provider.js +1 -67
- package/lib/module/toast-store.js +1 -274
- package/lib/module/toast.js +1 -439
- package/lib/module/types.js +1 -4
- package/lib/typescript/toast-provider.d.ts +13 -12
- package/package.json +7 -6
- package/lib/commonjs/icons/CloseIcon.js.map +0 -1
- package/lib/commonjs/icons/GreenCheck.js.map +0 -1
- package/lib/commonjs/icons/InfoIcon.js.map +0 -1
- package/lib/commonjs/icons/RedX.js.map +0 -1
- package/lib/commonjs/icons/index.js.map +0 -1
- package/lib/commonjs/index.js.map +0 -1
- package/lib/commonjs/toast-api.js.map +0 -1
- package/lib/commonjs/toast-provider.js.map +0 -1
- package/lib/commonjs/toast-store.js.map +0 -1
- package/lib/commonjs/toast.js.map +0 -1
- package/lib/commonjs/types.js.map +0 -1
- package/lib/module/icons/CloseIcon.js.map +0 -1
- package/lib/module/icons/GreenCheck.js.map +0 -1
- package/lib/module/icons/InfoIcon.js.map +0 -1
- package/lib/module/icons/RedX.js.map +0 -1
- package/lib/module/icons/index.js.map +0 -1
- package/lib/module/index.js.map +0 -1
- package/lib/module/toast-api.js.map +0 -1
- package/lib/module/toast-provider.js.map +0 -1
- package/lib/module/toast-store.js.map +0 -1
- package/lib/module/toast.js.map +0 -1
- package/lib/module/types.js.map +0 -1
- package/lib/typescript/icons/CloseIcon.d.ts.map +0 -1
- package/lib/typescript/icons/GreenCheck.d.ts.map +0 -1
- package/lib/typescript/icons/InfoIcon.d.ts.map +0 -1
- package/lib/typescript/icons/RedX.d.ts.map +0 -1
- package/lib/typescript/icons/index.d.ts.map +0 -1
- package/lib/typescript/index.d.ts.map +0 -1
- package/lib/typescript/toast-api.d.ts.map +0 -1
- package/lib/typescript/toast-provider.d.ts.map +0 -1
- package/lib/typescript/toast-store.d.ts.map +0 -1
- package/lib/typescript/toast.d.ts.map +0 -1
- package/lib/typescript/types.d.ts.map +0 -1
- package/src/icons/CloseIcon.tsx +0 -10
- package/src/icons/GreenCheck.tsx +0 -16
- package/src/icons/InfoIcon.tsx +0 -12
- package/src/icons/RedX.tsx +0 -16
- package/src/icons/index.ts +0 -4
- package/src/index.ts +0 -26
- package/src/toast-api.ts +0 -213
- package/src/toast-provider.tsx +0 -81
- package/src/toast-store.ts +0 -270
- package/src/toast.tsx +0 -417
- package/src/types.ts +0 -121
|
@@ -1,278 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.toastStore = void 0;
|
|
7
|
-
const EXIT_DURATION = 350;
|
|
8
|
-
|
|
9
|
-
/** Default theme values */
|
|
10
|
-
const DEFAULT_THEME = {
|
|
11
|
-
position: "top",
|
|
12
|
-
offset: 0,
|
|
13
|
-
stacking: true,
|
|
14
|
-
maxStack: 3,
|
|
15
|
-
dismissible: true,
|
|
16
|
-
showCloseButton: true,
|
|
17
|
-
colors: {
|
|
18
|
-
success: {
|
|
19
|
-
accent: "#28B770",
|
|
20
|
-
background: "#FFFFFF"
|
|
21
|
-
},
|
|
22
|
-
error: {
|
|
23
|
-
accent: "#F05964",
|
|
24
|
-
background: "#FFFFFF"
|
|
25
|
-
},
|
|
26
|
-
info: {
|
|
27
|
-
accent: "#EDBE43",
|
|
28
|
-
background: "#FFFFFF"
|
|
29
|
-
},
|
|
30
|
-
loading: {
|
|
31
|
-
accent: "#232323",
|
|
32
|
-
background: "#FFFFFF"
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
icons: {},
|
|
36
|
-
toastStyle: {},
|
|
37
|
-
titleStyle: {},
|
|
38
|
-
descriptionStyle: {},
|
|
39
|
-
defaultDuration: 4000
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
/** Deep merge user config with defaults */
|
|
43
|
-
function mergeConfig(config) {
|
|
44
|
-
if (!config) return DEFAULT_THEME;
|
|
45
|
-
const mergedColors = {
|
|
46
|
-
...DEFAULT_THEME.colors
|
|
47
|
-
};
|
|
48
|
-
if (config.colors) {
|
|
49
|
-
for (const type of Object.keys(config.colors)) {
|
|
50
|
-
const userColors = config.colors[type];
|
|
51
|
-
if (userColors) {
|
|
52
|
-
mergedColors[type] = {
|
|
53
|
-
...DEFAULT_THEME.colors[type],
|
|
54
|
-
...userColors
|
|
55
|
-
};
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
return {
|
|
60
|
-
position: config.position ?? DEFAULT_THEME.position,
|
|
61
|
-
offset: config.offset ?? DEFAULT_THEME.offset,
|
|
62
|
-
stacking: config.stacking ?? DEFAULT_THEME.stacking,
|
|
63
|
-
maxStack: config.maxStack ?? DEFAULT_THEME.maxStack,
|
|
64
|
-
dismissible: config.dismissible ?? DEFAULT_THEME.dismissible,
|
|
65
|
-
showCloseButton: config.showCloseButton ?? DEFAULT_THEME.showCloseButton,
|
|
66
|
-
colors: mergedColors,
|
|
67
|
-
icons: {
|
|
68
|
-
...DEFAULT_THEME.icons,
|
|
69
|
-
...config.icons
|
|
70
|
-
},
|
|
71
|
-
toastStyle: {
|
|
72
|
-
...DEFAULT_THEME.toastStyle,
|
|
73
|
-
...config.toastStyle
|
|
74
|
-
},
|
|
75
|
-
titleStyle: {
|
|
76
|
-
...DEFAULT_THEME.titleStyle,
|
|
77
|
-
...config.titleStyle
|
|
78
|
-
},
|
|
79
|
-
descriptionStyle: {
|
|
80
|
-
...DEFAULT_THEME.descriptionStyle,
|
|
81
|
-
...config.descriptionStyle
|
|
82
|
-
},
|
|
83
|
-
defaultDuration: config.defaultDuration ?? DEFAULT_THEME.defaultDuration
|
|
84
|
-
};
|
|
85
|
-
}
|
|
86
|
-
class ToastStore {
|
|
87
|
-
state = {
|
|
88
|
-
visibleToasts: []
|
|
89
|
-
};
|
|
90
|
-
theme = DEFAULT_THEME;
|
|
91
|
-
listeners = new Set();
|
|
92
|
-
toastIdCounter = 0;
|
|
93
|
-
timeouts = new Map();
|
|
94
|
-
subscribe = listener => {
|
|
95
|
-
this.listeners.add(listener);
|
|
96
|
-
return () => {
|
|
97
|
-
this.listeners.delete(listener);
|
|
98
|
-
};
|
|
99
|
-
};
|
|
100
|
-
emit() {
|
|
101
|
-
for (const listener of this.listeners) {
|
|
102
|
-
listener(this.state);
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
setState(partial) {
|
|
106
|
-
this.state = {
|
|
107
|
-
...this.state,
|
|
108
|
-
...partial
|
|
109
|
-
};
|
|
110
|
-
this.emit();
|
|
111
|
-
}
|
|
112
|
-
getState = () => this.state;
|
|
113
|
-
getTheme = () => this.theme;
|
|
114
|
-
setConfig = config => {
|
|
115
|
-
this.theme = mergeConfig(config);
|
|
116
|
-
};
|
|
117
|
-
show = (title, description, type = "success", duration, options) => {
|
|
118
|
-
const actualDuration = duration ?? options?.duration ?? this.theme.defaultDuration;
|
|
119
|
-
const maxToasts = this.theme.stacking ? this.theme.maxStack : 1;
|
|
120
|
-
const id = `toast-${++this.toastIdCounter}`;
|
|
121
|
-
const newToast = {
|
|
122
|
-
id,
|
|
123
|
-
title,
|
|
124
|
-
description: description ?? options?.description,
|
|
125
|
-
type,
|
|
126
|
-
duration: actualDuration,
|
|
127
|
-
createdAt: Date.now(),
|
|
128
|
-
isExiting: false,
|
|
129
|
-
options
|
|
130
|
-
};
|
|
131
|
-
const {
|
|
132
|
-
visibleToasts
|
|
133
|
-
} = this.state;
|
|
134
|
-
|
|
135
|
-
// Get only non-exiting toasts for count
|
|
136
|
-
const activeToasts = visibleToasts.filter(t => !t.isExiting);
|
|
137
|
-
if (activeToasts.length >= maxToasts) {
|
|
138
|
-
const toastsToRemove = activeToasts.slice(maxToasts - 1);
|
|
139
|
-
for (const toast of toastsToRemove) {
|
|
140
|
-
// Clear auto-dismiss timeout
|
|
141
|
-
const timeout = this.timeouts.get(toast.id);
|
|
142
|
-
if (timeout) {
|
|
143
|
-
clearTimeout(timeout);
|
|
144
|
-
this.timeouts.delete(toast.id);
|
|
145
|
-
}
|
|
146
|
-
}
|
|
147
|
-
const removeIds = new Set(toastsToRemove.map(t => t.id));
|
|
148
|
-
if (this.theme.stacking) {
|
|
149
|
-
// When stacking is ON: remove old toasts from state immediately (no animation for stack overflow)
|
|
150
|
-
this.setState({
|
|
151
|
-
visibleToasts: visibleToasts.filter(t => !removeIds.has(t.id))
|
|
152
|
-
});
|
|
153
|
-
} else {
|
|
154
|
-
// When stacking is OFF: animate out the old toast, wait, then show new one
|
|
155
|
-
this.setState({
|
|
156
|
-
visibleToasts: visibleToasts.map(t => removeIds.has(t.id) ? {
|
|
157
|
-
...t,
|
|
158
|
-
isExiting: true
|
|
159
|
-
} : t)
|
|
160
|
-
});
|
|
161
|
-
|
|
162
|
-
// Delay showing the new toast until the old one has animated out
|
|
163
|
-
setTimeout(() => {
|
|
164
|
-
for (const toast of toastsToRemove) {
|
|
165
|
-
this.removeToast(toast.id);
|
|
166
|
-
}
|
|
167
|
-
this.addToast(newToast, actualDuration);
|
|
168
|
-
}, EXIT_DURATION - 220);
|
|
169
|
-
return id;
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
// Add new toast immediately (stacking ON or no existing toasts)
|
|
174
|
-
this.addToast(newToast, actualDuration);
|
|
175
|
-
return id;
|
|
176
|
-
};
|
|
177
|
-
addToast(toast, duration) {
|
|
178
|
-
this.setState({
|
|
179
|
-
visibleToasts: [toast, ...this.state.visibleToasts.filter(t => !t.isExiting)]
|
|
180
|
-
});
|
|
181
|
-
|
|
182
|
-
// Schedule auto-dismiss with duration multiplier based on position
|
|
183
|
-
this.scheduleTimeout(toast.id, duration, 0);
|
|
184
|
-
|
|
185
|
-
// Reschedule timeouts for other toasts based on their new positions
|
|
186
|
-
this.rescheduleAllTimeouts();
|
|
187
|
-
}
|
|
188
|
-
scheduleTimeout(id, baseDuration, index) {
|
|
189
|
-
const existingTimeout = this.timeouts.get(id);
|
|
190
|
-
if (existingTimeout) {
|
|
191
|
-
clearTimeout(existingTimeout);
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
// Duration multiplier: index 0 = 1x, index 1 = 2x, index 2 = 3x
|
|
195
|
-
const duration = baseDuration * (index + 1);
|
|
196
|
-
const timeout = setTimeout(() => {
|
|
197
|
-
this.hide(id);
|
|
198
|
-
}, duration);
|
|
199
|
-
this.timeouts.set(id, timeout);
|
|
200
|
-
}
|
|
201
|
-
rescheduleAllTimeouts() {
|
|
202
|
-
const {
|
|
203
|
-
visibleToasts
|
|
204
|
-
} = this.state;
|
|
205
|
-
visibleToasts.forEach((toast, index) => {
|
|
206
|
-
// Skip if already exiting or index 0 (just scheduled)
|
|
207
|
-
if (toast.isExiting || index === 0) return;
|
|
208
|
-
this.scheduleTimeout(toast.id, toast.duration, index);
|
|
209
|
-
});
|
|
210
|
-
}
|
|
211
|
-
hide = id => {
|
|
212
|
-
const {
|
|
213
|
-
visibleToasts
|
|
214
|
-
} = this.state;
|
|
215
|
-
const toast = visibleToasts.find(t => t.id === id);
|
|
216
|
-
if (!toast || toast.isExiting) return;
|
|
217
|
-
|
|
218
|
-
// Clear the auto-dismiss timeout
|
|
219
|
-
const timeout = this.timeouts.get(id);
|
|
220
|
-
if (timeout) {
|
|
221
|
-
clearTimeout(timeout);
|
|
222
|
-
this.timeouts.delete(id);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
// Mark as exiting (triggers exit animation in component)
|
|
226
|
-
this.setState({
|
|
227
|
-
visibleToasts: visibleToasts.map(t => t.id === id ? {
|
|
228
|
-
...t,
|
|
229
|
-
isExiting: true
|
|
230
|
-
} : t)
|
|
231
|
-
});
|
|
232
|
-
|
|
233
|
-
// After exit animation, actually remove the toast
|
|
234
|
-
setTimeout(() => {
|
|
235
|
-
this.removeToast(id);
|
|
236
|
-
}, EXIT_DURATION);
|
|
237
|
-
};
|
|
238
|
-
removeToast(id) {
|
|
239
|
-
const timeout = this.timeouts.get(id);
|
|
240
|
-
if (timeout) {
|
|
241
|
-
clearTimeout(timeout);
|
|
242
|
-
this.timeouts.delete(id);
|
|
243
|
-
}
|
|
244
|
-
this.setState({
|
|
245
|
-
visibleToasts: this.state.visibleToasts.filter(t => t.id !== id)
|
|
246
|
-
});
|
|
247
|
-
|
|
248
|
-
// Reschedule remaining toasts with updated positions
|
|
249
|
-
this.rescheduleAllTimeouts();
|
|
250
|
-
}
|
|
251
|
-
updateToast = (id, data) => {
|
|
252
|
-
const {
|
|
253
|
-
visibleToasts
|
|
254
|
-
} = this.state;
|
|
255
|
-
const index = visibleToasts.findIndex(t => t.id === id);
|
|
256
|
-
if (index === -1) return;
|
|
257
|
-
this.setState({
|
|
258
|
-
visibleToasts: visibleToasts.map(t => t.id === id ? {
|
|
259
|
-
...t,
|
|
260
|
-
...data
|
|
261
|
-
} : t)
|
|
262
|
-
});
|
|
263
|
-
if (data.duration !== undefined) {
|
|
264
|
-
this.scheduleTimeout(id, data.duration, index);
|
|
265
|
-
}
|
|
266
|
-
};
|
|
267
|
-
hideAll = () => {
|
|
268
|
-
for (const timeout of this.timeouts.values()) {
|
|
269
|
-
clearTimeout(timeout);
|
|
270
|
-
}
|
|
271
|
-
this.timeouts.clear();
|
|
272
|
-
this.setState({
|
|
273
|
-
visibleToasts: []
|
|
274
|
-
});
|
|
275
|
-
};
|
|
276
|
-
}
|
|
277
|
-
const toastStore = exports.toastStore = new ToastStore();
|
|
278
|
-
//# sourceMappingURL=toast-store.js.map
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toastStore=void 0;const t={position:"top",offset:0,stacking:!0,maxStack:3,dismissible:!0,showCloseButton:!0,colors:{success:{accent:"#28B770",background:"#FFFFFF"},error:{accent:"#F05964",background:"#FFFFFF"},info:{accent:"#EDBE43",background:"#FFFFFF"},loading:{accent:"#232323",background:"#FFFFFF"}},icons:{},toastStyle:{},titleStyle:{},descriptionStyle:{},defaultDuration:4e3};exports.toastStore=new class{state={visibleToasts:[]};theme=t;listeners=new Set;toastIdCounter=0;timeouts=new Map;subscribe=t=>(this.listeners.add(t),()=>{this.listeners.delete(t)});emit(){for(const t of this.listeners)t(this.state)}setState(t){this.state={...this.state,...t},this.emit()}getState=()=>this.state;getTheme=()=>this.theme;setConfig=s=>{this.theme=function(s){if(!s)return t;const e={...t.colors};if(s.colors)for(const i of Object.keys(s.colors)){const o=s.colors[i];o&&(e[i]={...t.colors[i],...o})}return{position:s.position??t.position,offset:s.offset??t.offset,stacking:s.stacking??t.stacking,maxStack:s.maxStack??t.maxStack,dismissible:s.dismissible??t.dismissible,showCloseButton:s.showCloseButton??t.showCloseButton,colors:e,icons:{...t.icons,...s.icons},toastStyle:{...t.toastStyle,...s.toastStyle},titleStyle:{...t.titleStyle,...s.titleStyle},descriptionStyle:{...t.descriptionStyle,...s.descriptionStyle},defaultDuration:s.defaultDuration??t.defaultDuration}}(s)};show=(t,s,e="success",i,o)=>{const a=i??o?.duration??this.theme.defaultDuration,n=this.theme.stacking?this.theme.maxStack:1,l="toast-"+ ++this.toastIdCounter,c={id:l,title:t,description:s??o?.description,type:e,duration:a,createdAt:Date.now(),isExiting:!1,options:o},{visibleToasts:r}=this.state,h=r.filter(t=>!t.isExiting);if(h.length>=n){const t=h.slice(n-1);for(const s of t){const t=this.timeouts.get(s.id);t&&(clearTimeout(t),this.timeouts.delete(s.id))}const s=new Set(t.map(t=>t.id));if(!this.theme.stacking)return this.setState({visibleToasts:r.map(t=>s.has(t.id)?{...t,isExiting:!0}:t)}),setTimeout(()=>{for(const s of t)this.removeToast(s.id);this.addToast(c,a)},130),l;this.setState({visibleToasts:r.filter(t=>!s.has(t.id))})}return this.addToast(c,a),l};addToast(t,s){this.setState({visibleToasts:[t,...this.state.visibleToasts.filter(t=>!t.isExiting)]}),this.scheduleTimeout(t.id,s,0),this.rescheduleAllTimeouts()}scheduleTimeout(t,s,e){const i=this.timeouts.get(t);i&&clearTimeout(i);const o=setTimeout(()=>{this.hide(t)},s*(e+1));this.timeouts.set(t,o)}rescheduleAllTimeouts(){const{visibleToasts:t}=this.state;t.forEach((t,s)=>{t.isExiting||0===s||this.scheduleTimeout(t.id,t.duration,s)})}hide=t=>{const{visibleToasts:s}=this.state,e=s.find(s=>s.id===t);if(!e||e.isExiting)return;const i=this.timeouts.get(t);i&&(clearTimeout(i),this.timeouts.delete(t)),this.setState({visibleToasts:s.map(s=>s.id===t?{...s,isExiting:!0}:s)}),setTimeout(()=>{this.removeToast(t)},350)};removeToast(t){const s=this.timeouts.get(t);s&&(clearTimeout(s),this.timeouts.delete(t)),this.setState({visibleToasts:this.state.visibleToasts.filter(s=>s.id!==t)}),this.rescheduleAllTimeouts()}updateToast=(t,s)=>{const{visibleToasts:e}=this.state,i=e.findIndex(s=>s.id===t);-1!==i&&(this.setState({visibleToasts:e.map(e=>e.id===t?{...e,...s}:e)}),void 0!==s.duration&&this.scheduleTimeout(t,s.duration,i))};hideAll=()=>{for(const t of this.timeouts.values())clearTimeout(t);this.timeouts.clear(),this.setState({visibleToasts:[]})}};
|