-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
52 lines (45 loc) · 1.49 KB
/
index.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
import React from 'react';
import PropTypes from 'prop-types';
import {View} from 'react-native';
import Canvas from 'react-native-canvas';
import { generateCircles, calcPositions, drawCirclesOnCanvas } from './utils';
class KeywordsCloud extends React.Component {
selectTab = tabName => () => {
this.setState({ selectedTab: tabName });
}
handleCanvas = (canvas) => {
const { keywords,scale, largestAtCenter, drawContainerCircle,containerCircleColor } = this.props;
if (canvas) {
canvas.width = 300
canvas.height = 300
const center = { x: canvas.width / 2, y: canvas.height / 2 };
const circles = generateCircles(
keywords, center, scale, largestAtCenter);
calcPositions(circles);
drawCirclesOnCanvas(circles, canvas, drawContainerCircle, containerCircleColor);
}
}
render() {
return (
<View style={{justifyContent:'center',alignItems:'center'}}>
<Canvas ref={canvas => this.handleCanvas(canvas)} />
</View>
);
}
}
KeywordsCloud.defaultProps = {
scale: 250,
largestAtCenter: true,
drawContainerCircle: false,
containerCircleColor: '#FF000030'
};
KeywordsCloud.propTypes = {
keywords: PropTypes.arrayOf(PropTypes.shape(
{ keyword: PropTypes.string, frequency: PropTypes.number, color: PropTypes.string },
)).isRequired,
scale: PropTypes.number,
largestAtCenter: PropTypes.bool,
drawContainerCircle: PropTypes.bool,
containerCircleColor: PropTypes.string
};
export default KeywordsCloud;