This repository has been archived by the owner on Jun 17, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Item.js
133 lines (113 loc) · 3.83 KB
/
Item.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import ClipboardButton from 'react-clipboard.js';
import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/dist/light';
import xml from 'react-syntax-highlighter/dist/languages/xml';
import { atomOneDark } from 'react-syntax-highlighter/dist/styles';
import Loader from './../Loader/Loader';
import parentUrl from '../../helpers/parentUrl';
import './Item.css';
registerLanguage('html', xml);
class Item extends Component {
constructor() {
super();
this.state = {
copied: false,
};
}
onCopySuccess() {
this.setState({ copied: true });
setTimeout(() => {
this.setState({ copied: false });
}, 1000);
}
handleItemClick(e) {
// If it's a link related event, prevent default
if (parentUrl(e.target)) e.preventDefault();
}
render() {
const component = this.props.component;
const isVariant = this.props.variant !== undefined;
const variant = this.props.variant;
const fullPath = `/${component.type}/${component.name}${isVariant ? `/${variant.name}` : ''}/full`;
const slugClass = isVariant ? `tlbx-component-${component.name}-${variant.name}` : `tlbx-component-${component.name}`;
const wrapper = isVariant && variant.wrapper ? variant.wrapper : component.wrapper;
const background = isVariant && variant.background ? variant.background : component.background;
return (
<div className="tlbx-item">
{/* Item actions */}
<div className="tlbx-actions">
<Link className="tlbx-actions-link" to={fullPath}>
View full render
</Link>
<ClipboardButton
data-clipboard-text={this.props.children}
className="tlbx-actions-link"
onSuccess={this.onCopySuccess.bind(this)}
>
{this.state.copied ? 'Copied!' : 'Copy'}
</ClipboardButton>
</div>
{/* Item's preview */}
{ this.props.children.length > 0
?
<div
role="presentation"
className={`tlbx-item-preview ${wrapper} ${slugClass}`}
style={background ? { backgroundColor: background } : {}}
dangerouslySetInnerHTML={{ __html: this.props.children }}
onClick={this.handleItemClick.bind(this)}
/>
:
<div
role="presentation"
className={`tlbx-item-preview ${wrapper} ${slugClass}`}
style={background ? { backgroundColor: background } : {}}
onClick={this.handleItemClick.bind(this)}
><Loader /></div>
}
{/* Item's code display */}
<div className={`tlbx-item-code${this.props.navigation.showAllCode ? '' : ' tlbx-hidden'}`}>
<SyntaxHighlighter
language="html"
style={atomOneDark}
wrapLines
showLineNumbers
lineNumberContainerStyle={{
float: 'left',
textAlign: 'right',
marginRight: '10px',
opacity: '0.5',
}}
customStyle={{
padding: '1.3em 1em',
fontSize: '16px',
lineHeight: '1.4em',
}}
>
{this.props.children}
</SyntaxHighlighter>
</div>
</div>
);
}
}
Item.propTypes = {
component: PropTypes.object.isRequired,
variant: PropTypes.object,
children: PropTypes.string.isRequired,
navigation: PropTypes.object.isRequired,
};
function mapState(state) {
return {
navigation: state.navigation,
};
}
function mapDispatch(dispatch) {
return bindActionCreators({
}, dispatch);
}
export default connect(mapState, mapDispatch)(Item);