|
1 | | -import React, { Component } from 'react'; |
| 1 | +import React, { useEffect, useState } from 'react'; |
2 | 2 | import PropTypes from 'prop-types'; |
3 | 3 |
|
4 | 4 | import LiveContext from './LiveContext'; |
5 | 5 | import { generateElement, renderElementAsync } from '../../utils/transpile'; |
6 | 6 |
|
7 | | -export default class LiveProvider extends Component { |
8 | | - static defaultProps = { |
9 | | - code: '', |
10 | | - noInline: false, |
11 | | - language: 'jsx', |
12 | | - disabled: false |
13 | | - }; |
| 7 | +function LiveProvider({ |
| 8 | + children, |
| 9 | + code, |
| 10 | + language, |
| 11 | + theme, |
| 12 | + disabled, |
| 13 | + scope, |
| 14 | + transformCode, |
| 15 | + noInline = false |
| 16 | +}) { |
| 17 | + const [state, setState] = useState({ |
| 18 | + error: undefined, |
| 19 | + element: undefined |
| 20 | + }); |
14 | 21 |
|
15 | | - static propTypes = { |
16 | | - children: PropTypes.children, |
17 | | - code: PropTypes.string, |
18 | | - disabled: PropTypes.bool, |
19 | | - language: PropTypes.string, |
20 | | - noInline: PropTypes.bool, |
21 | | - scope: PropTypes.object, |
22 | | - theme: PropTypes.object, |
23 | | - transformCode: PropTypes.node |
24 | | - }; |
25 | | - |
26 | | - // eslint-disable-next-line camelcase |
27 | | - UNSAFE_componentWillMount() { |
28 | | - const { code, scope, transformCode, noInline } = this.props; |
29 | | - |
30 | | - this.transpile({ code, scope, transformCode, noInline }); |
31 | | - } |
32 | | - |
33 | | - componentDidUpdate({ |
34 | | - code: prevCode, |
35 | | - scope: prevScope, |
36 | | - noInline: prevNoInline, |
37 | | - transformCode: prevTransformCode |
38 | | - }) { |
39 | | - const { code, scope, noInline, transformCode } = this.props; |
40 | | - if ( |
41 | | - code !== prevCode || |
42 | | - scope !== prevScope || |
43 | | - noInline !== prevNoInline || |
44 | | - transformCode !== prevTransformCode |
45 | | - ) { |
46 | | - this.transpile({ code, scope, transformCode, noInline }); |
47 | | - } |
48 | | - } |
49 | | - |
50 | | - onChange = code => { |
51 | | - const { scope, transformCode, noInline } = this.props; |
52 | | - this.transpile({ code, scope, transformCode, noInline }); |
53 | | - }; |
54 | | - |
55 | | - onError = error => { |
56 | | - this.setState({ error: error.toString() }); |
57 | | - }; |
58 | | - |
59 | | - transpile = ({ code, scope, transformCode, noInline = false }) => { |
| 22 | + function transpile(newCode) { |
60 | 23 | // Transpilation arguments |
61 | 24 | const input = { |
62 | | - code: transformCode ? transformCode(code) : code, |
| 25 | + code: transformCode ? transformCode(newCode) : newCode, |
63 | 26 | scope |
64 | 27 | }; |
65 | 28 |
|
66 | | - const errorCallback = err => |
67 | | - this.setState({ element: undefined, error: err.toString() }); |
68 | | - const renderElement = element => this.setState({ ...state, element }); |
| 29 | + const errorCallback = error => |
| 30 | + setState({ error: error.toString(), element: undefined }); |
69 | 31 |
|
70 | | - // State reset object |
71 | | - const state = { unsafeWrapperError: undefined, error: undefined }; |
| 32 | + const renderElement = element => setState({ error: undefined, element }); |
72 | 33 |
|
73 | 34 | try { |
74 | 35 | if (noInline) { |
75 | | - this.setState({ ...state, element: null }); // Reset output for async (no inline) evaluation |
| 36 | + setState({ error: undefined, element: null }); // Reset output for async (no inline) evaluation |
76 | 37 | renderElementAsync(input, renderElement, errorCallback); |
77 | 38 | } else { |
78 | 39 | renderElement(generateElement(input, errorCallback)); |
79 | 40 | } |
80 | 41 | } catch (error) { |
81 | | - this.setState({ ...state, error: error.toString() }); |
| 42 | + errorCallback(error); |
82 | 43 | } |
83 | | - }; |
| 44 | + } |
84 | 45 |
|
85 | | - render() { |
86 | | - const { children, code, language, theme, disabled } = this.props; |
| 46 | + useEffect(() => { |
| 47 | + transpile(code); |
| 48 | + }, [code, scope, noInline, transformCode]); |
87 | 49 |
|
88 | | - return ( |
89 | | - <LiveContext.Provider |
90 | | - value={{ |
91 | | - ...this.state, |
92 | | - code, |
93 | | - language, |
94 | | - theme, |
95 | | - disabled, |
96 | | - onError: this.onError, |
97 | | - onChange: this.onChange |
98 | | - }} |
99 | | - > |
100 | | - {children} |
101 | | - </LiveContext.Provider> |
102 | | - ); |
103 | | - } |
| 50 | + const onChange = newCode => transpile(newCode); |
| 51 | + |
| 52 | + const onError = error => setState({ error: error.toString() }); |
| 53 | + |
| 54 | + return ( |
| 55 | + <LiveContext.Provider |
| 56 | + value={{ |
| 57 | + ...state, |
| 58 | + code, |
| 59 | + language, |
| 60 | + theme, |
| 61 | + disabled, |
| 62 | + onError, |
| 63 | + onChange |
| 64 | + }} |
| 65 | + > |
| 66 | + {children} |
| 67 | + </LiveContext.Provider> |
| 68 | + ); |
104 | 69 | } |
| 70 | + |
| 71 | +LiveProvider.propTypes = { |
| 72 | + children: PropTypes.node, |
| 73 | + code: PropTypes.string, |
| 74 | + disabled: PropTypes.bool, |
| 75 | + language: PropTypes.string, |
| 76 | + noInline: PropTypes.bool, |
| 77 | + scope: PropTypes.object, |
| 78 | + theme: PropTypes.object, |
| 79 | + transformCode: PropTypes.func |
| 80 | +}; |
| 81 | + |
| 82 | +LiveProvider.defaultProps = { |
| 83 | + code: '', |
| 84 | + noInline: false, |
| 85 | + language: 'jsx', |
| 86 | + disabled: false |
| 87 | +}; |
| 88 | + |
| 89 | +export default LiveProvider; |
0 commit comments