' + hl + '
61 | ${hlcss}
62 | ` : '';
63 |
64 | this.state.codePrismed +=
65 | `
66 | ${hljx}
67 | `;
68 | }
69 |
70 | componentDidMount() {
71 | if (this.codeArea.getElementsByClassName('description').length > 0) {
72 | this.codeAreaHeight =
73 | Math.max(this.codeArea.getElementsByClassName('description')[0].clientHeight,
74 | this.codeArea.getElementsByClassName('highlight')[0].clientHeight)
75 | } else {
76 | this.codeAreaHeight = this.codeArea.getElementsByClassName('highlight')[0].clientHeight
77 | }
78 | }
79 |
80 | onMouseEnter = _ => {
81 | this.setState({
82 | hovering: true
83 | })
84 | }
85 |
86 | onMouseLeave = _ => {
87 | this.setState({
88 | hovering: false
89 | })
90 | }
91 |
92 | toggleDetail = _ => {
93 | this.isExpanded = !this.isExpanded
94 |
95 | if (this.isExpanded) {
96 | this.setState({
97 | codeAreaHeight: `${this.codeAreaHeight}px`,
98 | controlText: 'Hide'
99 | })
100 |
101 | setTimeout(() => {
102 | this.scrollParent = document.querySelector(this.props.scrollParentSelector) || window;
103 | this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler);
104 | this.scrollHandler();
105 | }, 200)
106 | } else {
107 | this.setState({
108 | codeAreaHeight: 0,
109 | controlText: 'Expand',
110 | fixedControl: false
111 | })
112 |
113 | this.removeScrollHandler()
114 | const { top, bottom, left, right } = this.codeArea.getBoundingClientRect()
115 |
116 | this.setState({
117 | demoControlStyle: {
118 | left: '0',
119 | width: 'auto'
120 | }
121 | })
122 | }
123 | }
124 |
125 | scrollHandler = () => {
126 | const { top, bottom, left, right } = this.codeArea.getBoundingClientRect()
127 | this.setState({
128 | fixedControl: bottom > document.documentElement.clientHeight && top + 36
129 | <= document.documentElement.clientHeight
130 | })
131 |
132 | this.setState({
133 | demoControlStyle: {
134 | left: this.state.fixedControl ? `${ left }px` : '0',
135 | width: this.state.fixedControl ? `${ right - left }px` : 'auto'
136 | }
137 | })
138 | }
139 |
140 | removeScrollHandler = () => {
141 | this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler)
142 | }
143 |
144 | goJsfiddle = _ => {
145 | const { script, html, style } = this.props.jsfiddle;
146 | let ComponentName = script.match(/export default class (.*) extends/)[1]
147 |
148 | let jsTpl = this.props.bootCode + '\n' + (script || '').replace(/export default/, '').trim()
149 | let htmlTpl = `${this.props.jsResources || ''}\n'+Prism.highlight(r,Prism.languages[i]||Prism.languages.markup)+"