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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
import React from 'react';
import { Helmet } from 'react-helmet';
import brand from 'ba-api/brand';
import PropTypes from 'prop-types';
import Axios from 'axios';
import { withStyles } from '@material-ui/core/styles';
import { PapperBlock } from 'ba-components';
import { Typography, IconButton, Icon, LinearProgress } from '@material-ui/core';
import DetailIcon from './IconGallery/DetailIcon';
import SearchIcons from './IconGallery/SearchIcons';
const url = '/api/icons?src=';
const styles = theme => ({
hide: {
display: 'none'
},
iconsList: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
[theme.breakpoints.down('xs')]: {
justifyContent: 'center',
},
overflow: 'auto',
maxHeight: 1000,
position: 'relative'
},
iconWrap: {
position: 'relative',
width: 120,
margin: 20,
[theme.breakpoints.down('xs')]: {
margin: 10,
},
textAlign: 'center'
},
btn: {
display: 'block',
textAlign: 'center',
margin: '0 auto',
},
icon: {
fontSize: 48,
},
preloader: {
width: '100%'
},
});
class Icons extends React.Component {
state = {
raws: [],
loading: false,
openDetail: false,
iconName: '',
iconCode: '',
filterText: ''
};
componentDidMount = () => {
const name = 'material-icon-cheat.txt';
this.setState({ loading: true }, () => {
Axios.get(url + name)
.then(response => response.data.records[0].source)
.then(data => {
const namesAndCodes = data.split('\n');
const icons = namesAndCodes.map(nameAndCode => {
const parts = nameAndCode.split(' ');
return {
name: parts[0],
code: parts[1]
};
});
return icons;
})
.then(icons => {
this.setState({
raws: icons,
loading: false
});
});
});
}
handleOpenDetail = (name, code) => {
this.setState({
openDetail: true,
iconName: name,
iconCode: code,
});
};
handleCloseDetail = () => {
this.setState({ openDetail: false });
};
handleSearch = (event) => {
event.persist();
// Show result base on keyword
this.setState({ filterText: event.target.value.toLowerCase() });
}
render() {
const title = brand.name + ' - UI Elements';
const description = brand.desc;
const {
raws,
loading,
openDetail,
iconName,
iconCode,
filterText
} = this.state;
const { classes } = this.props;
return (
<div>
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
</Helmet>
<PapperBlock title="Material Icons" desc="Material icons are delightful, beautifully crafted symbols for common actions and items. System icons are designed to be simple, modern, friendly, and sometimes quirky. Each icon is reduced to its minimal form, expressing essential characteristics.">
<div>
{loading
&& <LinearProgress color="secondary" className={classes.preloader} />
}
<SearchIcons filterText={filterText} handleSearch={(event) => this.handleSearch(event)} />
<div className={classes.iconsList}>
{raws.map((raw, index) => {
if (raw.name.toLowerCase().indexOf(filterText) === -1) {
return false;
}
return (
<div className={classes.iconWrap} key={index.toString()}>
<IconButton title="Click to see detail" onClick={() => this.handleOpenDetail(raw.name, raw.code)} className={classes.btn}>
<Icon className={classes.icon}>{raw.name}</Icon>
</IconButton>
<Typography gutterBottom noWrap>{raw.name}</Typography>
</div>
);
})}
<DetailIcon closeDetail={this.handleCloseDetail} isOpenDetail={openDetail} iconName={iconName} iconCode={iconCode} />
</div>
</div>
</PapperBlock>
</div>
);
}
}
Icons.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Icons);
|
