object => Object.prototype.toString.call(object) === `[object ${type}]`;
6 |
7 | // const isString = typeOf('String');
8 | // const isObject = typeOf('Object');
9 | const isFunction = typeOf('Function');
10 |
11 | function NewCustomEvent(type, params = { bubbles: false, cancelable: false, detail: null }) {
12 | const event = document.createEvent('CustomEvent');
13 | event.initCustomEvent(type, !!params.bubbles, !!params.cancelable, params.detail || {});
14 | return event;
15 | }
16 |
17 | export default class Geetest extends React.PureComponent {
18 | static defaultProps = {
19 | className: 'i-geetest',
20 | // gt: '',
21 | // challenge: '',
22 | offline: false,
23 | newCaptcha: true,
24 | product: 'popup',
25 | width: '300px',
26 | lang: 'zh-cn',
27 | https: false,
28 | timeout: 30000,
29 | remUnit: 1,
30 | zoomEle: null,
31 | hideSuccess: false,
32 | hideClose: false,
33 | hideRefresh: false,
34 | area: null,
35 | nextWidth: null,
36 | bgColor: null,
37 | onReady: () => {},
38 | onSuccess: () => {},
39 | onError: () => {},
40 | onClose: () => {},
41 | };
42 |
43 | constructor() {
44 | super(...arguments);
45 |
46 | const that = this;
47 |
48 | that.dom = React.createRef();
49 | that.instance = null;
50 | that.script = null;
51 |
52 | // that.state = {};
53 | }
54 |
55 | componentDidMount() {
56 | const that = this;
57 | // console.log('componentDidMount', that.props, that.state);
58 | // const { } = that.props;
59 | // const { } = that.state;
60 | that.create();
61 | }
62 |
63 | // shouldComponentUpdate(nextProps, nextState) {
64 | // const that = this;
65 | // // console.log('shouldComponentUpdate', that.props, nextProps, that.state, nextState);
66 | // const {
67 | // className,
68 | // gt,
69 | // challenge,
70 | // offline,
71 | // newCaptcha,
72 | // product,
73 | // width,
74 | // lang,
75 | // https,
76 | // timeout,
77 | // remUnit,
78 | // zoomEle,
79 | // hideSuccess,
80 | // hideClose,
81 | // hideRefresh,
82 | // area,
83 | // nextWidth,
84 | // bgColor,
85 | // } = that.props;
86 |
87 | // const isUpdate =
88 | // className !== nextProps.className ||
89 | // gt !== nextProps.gt ||
90 | // challenge !== nextProps.challenge ||
91 | // offline !== nextProps.offline ||
92 | // newCaptcha !== nextProps.newCaptcha ||
93 | // product !== nextProps.product ||
94 | // width !== nextProps.width ||
95 | // lang !== nextProps.lang ||
96 | // https !== nextProps.https ||
97 | // timeout !== nextProps.timeout ||
98 | // remUnit !== nextProps.remUnit ||
99 | // zoomEle !== nextProps.zoomEle ||
100 | // hideSuccess !== nextProps.hideSuccess ||
101 | // hideClose !== nextProps.hideClose ||
102 | // hideRefresh !== nextProps.hideRefresh ||
103 | // area !== nextProps.area ||
104 | // nextWidth !== nextProps.nextWidth ||
105 | // bgColor !== nextProps.bgColor;
106 |
107 | // return isUpdate;
108 | // }
109 |
110 | componentDidUpdate(prevProps, prevState) {
111 | const that = this;
112 | // console.log('componentDidUpdate', prevProps, that.props, prevState, that.state);
113 | // const { } = that.props;
114 | // const { } = that.state;
115 | that.create();
116 | }
117 |
118 | componentWillUnmount() {
119 | const that = this;
120 | // console.log('componentWillUnmount', that.props, that.state);
121 | // const { } = that.props;
122 | // const { } = that.state;
123 | that.destroy();
124 | }
125 |
126 | create = () => {
127 | const that = this;
128 | // console.log('create');
129 | // const { } = that.props;
130 | // const { } = that.state;
131 |
132 | if (window.initGeetest) {
133 | return that.ready();
134 | }
135 |
136 | const script = document.getElementById(SCRIPT_ID);
137 | if (script) {
138 | if (that.script) {
139 | return;
140 | }
141 |
142 | script.addEventListener('Im-ready', that.ready, false);
143 | that.script = script;
144 | return;
145 | }
146 |
147 | const ds = document.createElement('script');
148 | ds.id = SCRIPT_ID;
149 | ds.type = 'text/javascript';
150 | ds.async = true;
151 | ds.charset = 'utf-8';
152 |
153 | if (ds.readyState) {
154 | ds.onreadystatechange = () => {
155 | if (ds.readyState === 'loaded' || ds.readyState === 'complete') {
156 | ds.onreadystatechange = null;
157 | that.triggerEvent('Im-ready');
158 | }
159 | };
160 | } else {
161 | ds.onload = () => {
162 | ds.onload = null;
163 | that.triggerEvent('Im-ready');
164 | };
165 | }
166 |
167 | const protocol = window.location.protocol === 'http:' ? 'http:' : 'https:';
168 | ds.src = `${protocol}//static.geetest.com/static/tools/gt.js?_t=${new Date().getTime()}`;
169 |
170 | const s = document.getElementsByTagName('script')[0];
171 | s.parentNode.insertBefore(ds, s);
172 |
173 | ds.addEventListener('Im-ready', that.ready, false);
174 | that.script = ds;
175 | };
176 |
177 | ready = event => {
178 | const that = this;
179 | // console.log('ready');
180 | const {
181 | gt,
182 | challenge,
183 | offline,
184 | newCaptcha,
185 | product,
186 | width,
187 | lang,
188 | https,
189 | timeout,
190 | remUnit,
191 | zoomEle,
192 | hideSuccess,
193 | hideClose,
194 | hideRefresh,
195 | area,
196 | nextWidth,
197 | bgColor,
198 | } = that.props;
199 | // const { } = that.state;
200 |
201 | if (!window.initGeetest) {
202 | return;
203 | }
204 |
205 | if (that.instance) {
206 | return that.attach(that.instance);
207 | }
208 |
209 | window.initGeetest(
210 | {
211 | gt,
212 | challenge,
213 | offline,
214 | new_captcha: newCaptcha,
215 | product,
216 | width,
217 | lang,
218 | https,
219 | timeout,
220 | remUnit,
221 | zoomEle,
222 | hideSuccess,
223 | hideClose,
224 | hideRefresh,
225 | area,
226 | nextWidth,
227 | bgColor,
228 | },
229 | instance => {
230 | that.instance = instance;
231 | that.attach(instance);
232 | }
233 | );
234 | };
235 |
236 | attach = instance => {
237 | const that = this;
238 | // console.log('attach');
239 | const { onReady, onSuccess, onError, onClose } = that.props;
240 | // const { } = that.state;
241 |
242 | if (!that.dom || !that.dom.current) {
243 | return;
244 | }
245 |
246 | instance.appendTo(that.dom.current);
247 |
248 | if (isFunction(instance.onReady)) {
249 | instance.onReady((...arg) => onReady(...arg, instance));
250 | }
251 |
252 | instance.onSuccess(() => onSuccess(instance.getValidate(), instance));
253 |
254 | if (isFunction(instance.onError)) {
255 | instance.onError((...arg) => onError(...arg, instance));
256 | }
257 |
258 | if (isFunction(instance.onClose)) {
259 | instance.onClose((...arg) => onClose(...arg, instance));
260 | }
261 | };
262 |
263 | destroy = () => {
264 | const that = this;
265 | // console.log('destroy');
266 | // const { } = that.props;
267 | // const { } = that.state;
268 |
269 | if (that.script && isFunction(that.script.removeEventListener)) {
270 | that.script.removeEventListener('Im-ready', that.ready, false);
271 | // that.script.parentNode.removeChild(that.script);
272 | that.script = null;
273 | }
274 |
275 | if (that.instance && isFunction(that.instance.destroy)) {
276 | that.instance.destroy();
277 | that.instance = null;
278 | }
279 | };
280 |
281 | triggerEvent = type => {
282 | const that = this;
283 | // console.log('triggerEvent');
284 | // const { } = that.props;
285 | // const { } = that.state;
286 |
287 | if (!that.script || !isFunction(that.script.dispatchEvent)) {
288 | return;
289 | }
290 |
291 | const event = isFunction(window.CustomEvent)
292 | ? new window.CustomEvent(type, {
293 | detail: null,
294 | bubbles: false,
295 | cancelable: false,
296 | // composed: false,
297 | })
298 | : NewCustomEvent(type, {
299 | detail: null,
300 | bubbles: false,
301 | cancelable: false,
302 | // composed: false,
303 | });
304 |
305 | that.script.dispatchEvent(event);
306 | };
307 |
308 | render() {
309 | const that = this;
310 | // console.log('render');
311 | const { className, children } = that.props;
312 | // const { } = that.state;
313 |
314 | return (
315 |
316 | {children || null}
317 |
318 | );
319 | }
320 | }
321 |
--------------------------------------------------------------------------------