@onehat/ui 0.4.20 → 0.4.22
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/package.json
CHANGED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { forwardRef, useRef } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
Toast,
|
|
4
|
+
ToastTitle,
|
|
5
|
+
ToastDescription,
|
|
6
|
+
useToast,
|
|
7
|
+
} from '@project-components/Gluestack';
|
|
8
|
+
import _ from 'lodash';
|
|
9
|
+
|
|
10
|
+
// This HOC enables showing a toast in the wrapped component.
|
|
11
|
+
|
|
12
|
+
export default function withToast(WrappedComponent) {
|
|
13
|
+
return forwardRef((props, ref) => {
|
|
14
|
+
|
|
15
|
+
if (props.disableWithToast || props.showToast) {
|
|
16
|
+
return <WrappedComponent {...props} ref={ref} />;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const
|
|
20
|
+
toastId = useRef(0),
|
|
21
|
+
toast = useToast(),
|
|
22
|
+
showToast = (args) => {
|
|
23
|
+
let {
|
|
24
|
+
title = null,
|
|
25
|
+
description = null,
|
|
26
|
+
body = null,
|
|
27
|
+
placement = 'top',
|
|
28
|
+
action = 'muted',
|
|
29
|
+
variant = 'solid',
|
|
30
|
+
duration = 3000,
|
|
31
|
+
onCloseComplete,
|
|
32
|
+
avoidKeyboard,
|
|
33
|
+
containerStyle,
|
|
34
|
+
className,
|
|
35
|
+
} = args;
|
|
36
|
+
|
|
37
|
+
if (!title && !description && !body) {
|
|
38
|
+
throw Error('Toast must have a title or description or body');
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const
|
|
42
|
+
toastProps = {},
|
|
43
|
+
id = ++toastId.current;
|
|
44
|
+
if (onCloseComplete) {
|
|
45
|
+
toastProps.onCloseComplete = onCloseComplete;
|
|
46
|
+
}
|
|
47
|
+
if (avoidKeyboard) {
|
|
48
|
+
toastProps.avoidKeyboard = avoidKeyboard;
|
|
49
|
+
}
|
|
50
|
+
if (containerStyle) {
|
|
51
|
+
toastProps.containerStyle = containerStyle;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
toast.show({
|
|
55
|
+
id,
|
|
56
|
+
placement,
|
|
57
|
+
duration,
|
|
58
|
+
render: ({ id }) => {
|
|
59
|
+
const toastId = 'toast-' + id;
|
|
60
|
+
let bodyElements = [];
|
|
61
|
+
if (title) {
|
|
62
|
+
bodyElements.push(<ToastTitle key="title" className="text-lg">{title}</ToastTitle>);
|
|
63
|
+
}
|
|
64
|
+
if (description) {
|
|
65
|
+
bodyElements.push(<ToastDescription key="description">{description}</ToastDescription>);
|
|
66
|
+
}
|
|
67
|
+
return <Toast
|
|
68
|
+
nativeID={toastId}
|
|
69
|
+
action={action}
|
|
70
|
+
variant={variant}
|
|
71
|
+
className={className}
|
|
72
|
+
>
|
|
73
|
+
{body || bodyElements}
|
|
74
|
+
</Toast>;
|
|
75
|
+
},
|
|
76
|
+
...toastProps,
|
|
77
|
+
})
|
|
78
|
+
};
|
|
79
|
+
|
|
80
|
+
return <WrappedComponent
|
|
81
|
+
{...props}
|
|
82
|
+
showToast={showToast}
|
|
83
|
+
ref={ref}
|
|
84
|
+
/>;
|
|
85
|
+
});
|
|
86
|
+
}
|
|
@@ -33,6 +33,7 @@ function ManagerScreen(props) {
|
|
|
33
33
|
[isModeSet, setIsModeSet] = useState(false),
|
|
34
34
|
[allowSideBySide, setAllowSideBySide] = useState(false),
|
|
35
35
|
[mode, setModeRaw] = useState(MODE_FULL),
|
|
36
|
+
actualMode = (!allowSideBySide || mode === MODE_FULL) ? MODE_FULL : MODE_SIDE,
|
|
36
37
|
setMode = (newMode) => {
|
|
37
38
|
if (!allowSideBySide && newMode === MODE_SIDE) {
|
|
38
39
|
return;
|
|
@@ -74,14 +75,13 @@ function ManagerScreen(props) {
|
|
|
74
75
|
})();
|
|
75
76
|
}, [isRendered]);
|
|
76
77
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
whichComponent = fullModeComponent;
|
|
80
|
-
} else if (mode === MODE_SIDE) {
|
|
81
|
-
whichComponent = sideModeComponent;
|
|
78
|
+
if (self) {
|
|
79
|
+
self.mode = actualMode;
|
|
82
80
|
}
|
|
83
81
|
|
|
84
|
-
const
|
|
82
|
+
const
|
|
83
|
+
whichComponent = actualMode === MODE_FULL ? fullModeComponent : sideModeComponent,
|
|
84
|
+
textProps = {};
|
|
85
85
|
if (styles.MANAGER_SCREEN_TITLE) {
|
|
86
86
|
textProps.style = {
|
|
87
87
|
fontFamily: styles.MANAGER_SCREEN_TITLE,
|
|
@@ -104,7 +104,7 @@ function ManagerScreen(props) {
|
|
|
104
104
|
size: 'xl',
|
|
105
105
|
className: 'text-black',
|
|
106
106
|
}}
|
|
107
|
-
isDisabled={
|
|
107
|
+
isDisabled={actualMode === MODE_FULL}
|
|
108
108
|
onPress={() => setMode(MODE_FULL)}
|
|
109
109
|
tooltip="To full width"
|
|
110
110
|
className="ml-5"
|
|
@@ -116,7 +116,7 @@ function ManagerScreen(props) {
|
|
|
116
116
|
size: 'xl',
|
|
117
117
|
className: 'text-black',
|
|
118
118
|
}}
|
|
119
|
-
isDisabled={
|
|
119
|
+
isDisabled={actualMode === MODE_SIDE}
|
|
120
120
|
onPress={() => setMode(MODE_SIDE)}
|
|
121
121
|
tooltip="To side editor"
|
|
122
122
|
/>
|