-
Notifications
You must be signed in to change notification settings - Fork 82
/
index.tsx
129 lines (119 loc) · 3.68 KB
/
index.tsx
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
import React, { Component } from "react";
import PropTypes from "prop-types";
import type { NiceAvatarProps } from "./types"
import { genConfig, defaultOptions } from "./utils";
import Face from "./face";
import Hair from "./hair";
import Hat from "./hat";
import Ear from "./ear";
import Eyebrow from "./eyebrow";
import Eye from "./eyes";
import Glasses from "./glasses";
import Nose from "./nose";
import Mouth from "./mouth";
import Shirt from "./shirt";
export default class ReactNiceAvatar extends Component<NiceAvatarProps> {
static propTypes = {
id: PropTypes.string,
className: PropTypes.string,
style: PropTypes.object,
shape: PropTypes.oneOf(["circle", "rounded", "square"]),
sex: PropTypes.oneOf(defaultOptions.sex),
faceColor: PropTypes.string,
earSize: PropTypes.oneOf(defaultOptions.earSize),
hairColor: PropTypes.string,
hairStyle: PropTypes.oneOf(
(defaultOptions.hairStyleMan as string[]).concat(defaultOptions.hairStyleWoman as string[])
),
hatColor: PropTypes.string,
hatStyle: PropTypes.oneOf(defaultOptions.hatStyle),
hairColorRandom: PropTypes.bool,
eyeStyle: PropTypes.oneOf(defaultOptions.eyeStyle),
glassesStyle: PropTypes.oneOf(defaultOptions.glassesStyle),
noseStyle: PropTypes.oneOf(defaultOptions.noseStyle),
mouthStyle: PropTypes.oneOf(defaultOptions.mouthStyle),
shirtStyle: PropTypes.oneOf(defaultOptions.shirtStyle),
shirtColor: PropTypes.string,
bgColor: PropTypes.string,
isGradient: PropTypes.bool
}
render() {
const { id, className, style, shape = "circle", hairColorRandom = false } = this.props;
const config = genConfig(this.props);
// Background shape
let borderRadius;
switch (shape) {
case "circle": {
borderRadius = "100%";
break;
}
case "rounded": {
borderRadius = "6px";
break;
}
case "square": {
borderRadius = 0;
break;
}
}
return (
<div
id={id}
className={className}
style={{
background: config.bgColor,
overflow: "hidden",
borderRadius,
...style
}}>
<div
style={{
position: "relative",
width: "100%",
height: "100%"
}}>
<div
style={{
position: "absolute",
bottom: 0,
width: "100%",
height: "90%"
}}>
<Face color={config.faceColor} />
<Hat
color={config.hatColor}
style={config.hatStyle} />
{config.hatStyle === "none" &&
<Hair
color={config.hairColor}
style={config.hairStyle}
colorRandom={hairColorRandom} />
}
{/* Face detail */}
<div
style={{
position: "absolute",
right: "-3%",
top: "30%",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}}>
<Eyebrow style={config.eyeBrowStyle} />
<Eye style={config.eyeStyle} />
<Glasses style={config.glassesStyle} />
<Ear color={config.faceColor} size={config.earSize} />
<Nose style={config.noseStyle} />
<Mouth style={config.mouthStyle} />
</div>
<Shirt color={config.shirtColor} style={config.shirtStyle} />
</div>
</div>
</div>
);
}
}
export { genConfig } from "./utils";