@teselagen/ui 0.7.33 → 0.7.35
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/index.js +1 -196
- package/isBeingCalledExcessively.js +1 -0
- package/package.json +1 -1
package/index.js
CHANGED
|
@@ -1,196 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { Dialog } from "@blueprintjs/core";
|
|
3
|
-
import { connect } from "react-redux";
|
|
4
|
-
import { lifecycle, compose } from "recompose";
|
|
5
|
-
import { camelCase } from "lodash-es";
|
|
6
|
-
import { nanoid } from "nanoid";
|
|
7
|
-
import ResizableDraggableDialog from "../../ResizableDraggableDialog";
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* usage:
|
|
11
|
-
* in container:
|
|
12
|
-
* compose(
|
|
13
|
-
* withDialog({ title: "Select Aliquot(s) From", other bp dialog props here })
|
|
14
|
-
* )
|
|
15
|
-
*
|
|
16
|
-
*
|
|
17
|
-
* in react component
|
|
18
|
-
* import MyDialogEnhancedComponent from "./MyDialogEnhancedComponent"
|
|
19
|
-
*
|
|
20
|
-
* render() {
|
|
21
|
-
* return <div>
|
|
22
|
-
* <MyDialogEnhancedComponent
|
|
23
|
-
* dialogProps={} //bp dialog overrides can go here
|
|
24
|
-
* target={<button>Open Dialog</button> } //target can also be passed as a child component
|
|
25
|
-
* myRandomProp={'yuppp'} //pass any other props like normal to the component
|
|
26
|
-
*
|
|
27
|
-
* />
|
|
28
|
-
* </div>
|
|
29
|
-
* }
|
|
30
|
-
*/
|
|
31
|
-
|
|
32
|
-
// or programatically:
|
|
33
|
-
// const ProgramaticDialog = withDialog({
|
|
34
|
-
// dialogName: "programaticDialog", //giving it a unique dialogName means you can
|
|
35
|
-
// title: "Programatic Dialog Demo"
|
|
36
|
-
// })(DialogInner);
|
|
37
|
-
//
|
|
38
|
-
// add the no target dialog somewhere on the page
|
|
39
|
-
// <ProgramaticDialog></ProgramaticDialog> //this just renders without any target
|
|
40
|
-
//
|
|
41
|
-
// somewhere else on the page:
|
|
42
|
-
// <Button>Click To Open Dialog</Button>
|
|
43
|
-
|
|
44
|
-
export default function withDialog(topLevelDialogProps) {
|
|
45
|
-
function dialogHoc(WrappedComponent) {
|
|
46
|
-
return class DialogWrapper extends React.Component {
|
|
47
|
-
componentWillUnmount() {
|
|
48
|
-
const { dispatch, dialogName, uniqueName } = this.props;
|
|
49
|
-
if (dialogName) {
|
|
50
|
-
dispatch({
|
|
51
|
-
type: "TG_UNREGISTER_MODAL",
|
|
52
|
-
name: dialogName,
|
|
53
|
-
uniqueName
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
render() {
|
|
58
|
-
const {
|
|
59
|
-
target,
|
|
60
|
-
noTarget,
|
|
61
|
-
isDialogOpen,
|
|
62
|
-
showModal,
|
|
63
|
-
dialogName,
|
|
64
|
-
onClickRename,
|
|
65
|
-
hideModal,
|
|
66
|
-
fetchPolicy = "network-only",
|
|
67
|
-
children,
|
|
68
|
-
onCloseHook,
|
|
69
|
-
dialogProps,
|
|
70
|
-
title,
|
|
71
|
-
isDraggable,
|
|
72
|
-
alreadyRendering,
|
|
73
|
-
...rest
|
|
74
|
-
} = this.props;
|
|
75
|
-
const extraDialogProps = {
|
|
76
|
-
...topLevelDialogProps,
|
|
77
|
-
...dialogProps
|
|
78
|
-
};
|
|
79
|
-
const _onCloseHook = onCloseHook || extraDialogProps.onCloseHook;
|
|
80
|
-
const { noButtonClickPropagate } = {
|
|
81
|
-
...this.props,
|
|
82
|
-
...extraDialogProps
|
|
83
|
-
};
|
|
84
|
-
const isOpen = isDialogOpen || extraDialogProps.isOpen;
|
|
85
|
-
const targetEl = target || children;
|
|
86
|
-
// if (!targetEl && !dialogName)
|
|
87
|
-
// throw new Error(
|
|
88
|
-
// "withDialog error: Please provide a target or child element to the withDialog() enhanced component. If you really don't want a target, please pass a 'noTarget=true' prop"
|
|
89
|
-
// );
|
|
90
|
-
const DialogToUse =
|
|
91
|
-
isDraggable || extraDialogProps.isDraggable
|
|
92
|
-
? ResizableDraggableDialog
|
|
93
|
-
: Dialog;
|
|
94
|
-
return (
|
|
95
|
-
<React.Fragment>
|
|
96
|
-
{isOpen && (
|
|
97
|
-
<DialogToUse
|
|
98
|
-
onClose={function () {
|
|
99
|
-
hideModal();
|
|
100
|
-
_onCloseHook && _onCloseHook();
|
|
101
|
-
}}
|
|
102
|
-
className={dialogName || camelCase()}
|
|
103
|
-
title={title}
|
|
104
|
-
isOpen={isOpen}
|
|
105
|
-
canEscapeKeyClose={false}
|
|
106
|
-
canOutsideClickClose={false}
|
|
107
|
-
{...extraDialogProps}
|
|
108
|
-
>
|
|
109
|
-
<WrappedComponent
|
|
110
|
-
{...{
|
|
111
|
-
...rest,
|
|
112
|
-
fetchPolicy,
|
|
113
|
-
ssr: false,
|
|
114
|
-
hideModal
|
|
115
|
-
}}
|
|
116
|
-
/>
|
|
117
|
-
</DialogToUse>
|
|
118
|
-
)}
|
|
119
|
-
{targetEl &&
|
|
120
|
-
React.cloneElement(targetEl, {
|
|
121
|
-
[onClickRename || "onClick"]: e => {
|
|
122
|
-
showModal();
|
|
123
|
-
if (noButtonClickPropagate) {
|
|
124
|
-
e.preventDefault();
|
|
125
|
-
e.stopPropagation();
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
})}
|
|
129
|
-
</React.Fragment>
|
|
130
|
-
);
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
return compose(
|
|
136
|
-
connect(({ tg_modalState }) => {
|
|
137
|
-
return { ...topLevelDialogProps, tg_modalState };
|
|
138
|
-
}),
|
|
139
|
-
lifecycle({
|
|
140
|
-
componentWillMount: function () {
|
|
141
|
-
const { dispatch, dialogName } = this.props;
|
|
142
|
-
const uniqueName = nanoid();
|
|
143
|
-
const nameToUse = dialogName || uniqueName;
|
|
144
|
-
this.setState({
|
|
145
|
-
nameToUse,
|
|
146
|
-
uniqueName
|
|
147
|
-
});
|
|
148
|
-
if (dialogName) {
|
|
149
|
-
dispatch({
|
|
150
|
-
type: "TG_REGISTER_MODAL",
|
|
151
|
-
name: dialogName,
|
|
152
|
-
uniqueName
|
|
153
|
-
});
|
|
154
|
-
}
|
|
155
|
-
}
|
|
156
|
-
}),
|
|
157
|
-
connect(
|
|
158
|
-
function ({ tg_modalState }, { nameToUse, uniqueName }) {
|
|
159
|
-
const dialogState = tg_modalState[nameToUse] || {};
|
|
160
|
-
const { open, __registeredAs, ...rest } = dialogState;
|
|
161
|
-
const newProps = {
|
|
162
|
-
...rest,
|
|
163
|
-
isDialogOpen:
|
|
164
|
-
open &&
|
|
165
|
-
(__registeredAs
|
|
166
|
-
? Object.keys(__registeredAs)[
|
|
167
|
-
Object.keys(__registeredAs).length - 1
|
|
168
|
-
] === uniqueName
|
|
169
|
-
: true)
|
|
170
|
-
};
|
|
171
|
-
return newProps;
|
|
172
|
-
},
|
|
173
|
-
function (dispatch, { nameToUse, hideModal, showModal }) {
|
|
174
|
-
return {
|
|
175
|
-
showModal:
|
|
176
|
-
showModal ||
|
|
177
|
-
function () {
|
|
178
|
-
dispatch({
|
|
179
|
-
type: "TG_SHOW_MODAL",
|
|
180
|
-
name: nameToUse
|
|
181
|
-
});
|
|
182
|
-
},
|
|
183
|
-
hideModal:
|
|
184
|
-
hideModal ||
|
|
185
|
-
function () {
|
|
186
|
-
dispatch({
|
|
187
|
-
type: "TG_HIDE_MODAL",
|
|
188
|
-
name: nameToUse
|
|
189
|
-
});
|
|
190
|
-
}
|
|
191
|
-
};
|
|
192
|
-
}
|
|
193
|
-
),
|
|
194
|
-
dialogHoc
|
|
195
|
-
);
|
|
196
|
-
}
|
|
1
|
+
export { useDeepEqualMemo } from "./useDeepEqualMemo";
|