Skip to content

Commit 751beac

Browse files
lmuller18lmuller18
committed
Remove uneeded avatarStyle option
This will longer needed if fangpenlin/avataaars#25 gets merged
1 parent 15114e2 commit 751beac

File tree

5 files changed

+42
-120
lines changed

5 files changed

+42
-120
lines changed

‎src/components/AvatarForm.tsx‎

Lines changed: 6 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react'
2-
import { AvatarStyle, Option, OptionContext } from 'avataaars'
2+
import { Option, OptionContext } from 'avataaars'
33
import {
44
Button,
55
Col,
@@ -28,7 +28,7 @@ const serializeQuery = function (obj: any) {
2828
}
2929

3030
class OptionSelect extends React.Component<SelectProps> {
31-
render () {
31+
render() {
3232
const { controlId, label, value, children } = this.props
3333
return (
3434
<FormGroup className='row' controlId={controlId}>
@@ -55,21 +55,19 @@ class OptionSelect extends React.Component<SelectProps> {
5555
}
5656

5757
export interface Props {
58-
avatarStyle: AvatarStyle
5958
optionContext: OptionContext
6059
displayingCode: boolean
6160
displayingImg: boolean
6261
onDownloadPNG?: () => void
6362
onDownloadSVG?: () => void
64-
onAvatarStyleChange?: (avatarStyle: AvatarStyle) => void
6563
onToggleCode?: () => void
6664
onToggleImg?: () => void
6765
}
6866

6967
export default class AvatarForm extends React.Component<Props> {
7068
private onChangeCache: Array<(value: string) => void> = []
7169

72-
componentWillMount () {
70+
componentWillMount() {
7371
const { optionContext } = this.props
7472
optionContext.addStateChangeListener(() => {
7573
this.forceUpdate()
@@ -79,8 +77,8 @@ export default class AvatarForm extends React.Component<Props> {
7977
)
8078
}
8179

82-
render () {
83-
const { optionContext, avatarStyle, displayingImg, displayingCode } = this.props
80+
render() {
81+
const { optionContext, displayingImg, displayingCode } = this.props
8482
const selects = optionContext.options.map((option, index) => {
8583
const optionState = optionContext.getOptionState(option.key)!
8684
if (optionState.available <= 0) {
@@ -107,35 +105,6 @@ export default class AvatarForm extends React.Component<Props> {
107105
const inputCol = 9
108106
return (
109107
<Form horizontal>
110-
<FormGroup className='row' controlId='avatar-style'>
111-
<Col componentClass={ControlLabel} sm={3}>
112-
Avatar Style
113-
</Col>
114-
<Col sm={9}>
115-
<label>
116-
<input
117-
type='radio'
118-
id='avatar-style-circle'
119-
name='avatar-style'
120-
value={AvatarStyle.Circle}
121-
checked={avatarStyle === AvatarStyle.Circle}
122-
onChange={this.onAvatarStyleChange}
123-
/>{' '}
124-
Circle
125-
</label>{' '}
126-
<label>
127-
<input
128-
type='radio'
129-
id='avatar-style-transparent'
130-
name='avatar-style'
131-
value={AvatarStyle.Transparent}
132-
checked={avatarStyle === AvatarStyle.Transparent}
133-
onChange={this.onAvatarStyleChange}
134-
/>{' '}
135-
Transparent
136-
</label>
137-
</Col>
138-
</FormGroup>
139108
{selects}
140109
<FormGroup className='row'>
141110
<Col
@@ -203,17 +172,11 @@ export default class AvatarForm extends React.Component<Props> {
203172
)
204173
}
205174

206-
private onChange (option: Option, value: string) {
175+
private onChange(option: Option, value: string) {
207176
const { optionContext } = this.props
208177
optionContext.setValue(option.key, value)
209178
}
210179

211-
private onAvatarStyleChange = (event: React.FormEvent<HTMLInputElement>) => {
212-
if (this.props.onAvatarStyleChange) {
213-
this.props.onAvatarStyleChange((event.target as any).value)
214-
}
215-
}
216-
217180
private onDownloadPNG = (event: React.FormEvent<FormControl>) => {
218181
event.preventDefault()
219182
if (this.props.onDownloadPNG) {

‎src/components/ComponentCode.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,27 @@
11
import * as PropTypes from 'prop-types'
22
import * as React from 'react'
3-
import { AvatarStyle, OptionContext, allOptions } from 'avataaars'
3+
import { OptionContext, allOptions } from 'avataaars'
44

5-
export interface Props {
6-
avatarStyle: AvatarStyle
7-
}
8-
9-
export default class ComponentCode extends React.Component<Props> {
5+
export default class ComponentCode extends React.Component {
106
static contextTypes = {
117
optionContext: PropTypes.instanceOf(OptionContext)
128
}
139

1410
private textArea: HTMLTextAreaElement | null = null
1511

16-
private get optionContext (): OptionContext {
12+
private get optionContext(): OptionContext {
1713
return this.context.optionContext
1814
}
1915

20-
componentWillMount () {
16+
componentWillMount() {
2117
this.optionContext.addValueChangeListener(this.onOptionValueChange)
2218
}
2319

24-
componentWillUnmount () {
20+
componentWillUnmount() {
2521
this.optionContext.removeValueChangeListener(this.onOptionValueChange)
2622
}
2723

28-
render () {
29-
const { avatarStyle } = this.props
24+
render() {
3025
const { optionContext } = this
3126
const props: Array<string> = []
3227
for (const option of allOptions) {
@@ -39,7 +34,6 @@ export default class ComponentCode extends React.Component<Props> {
3934
}
4035
const propsStr = props.join('\n')
4136
const code = `<Avatar
42-
avatarStyle='${avatarStyle}'
4337
${propsStr}
4438
/>`
4539
return (

‎src/components/ComponentImg.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,27 @@
11
import * as PropTypes from 'prop-types'
22
import * as React from 'react'
3-
import { AvatarStyle, OptionContext, allOptions } from 'avataaars'
3+
import { OptionContext, allOptions } from 'avataaars'
44

5-
export interface Props {
6-
avatarStyle: AvatarStyle
7-
}
8-
9-
export default class ComponentCode extends React.Component<Props> {
5+
export default class ComponentCode extends React.Component {
106
static contextTypes = {
117
optionContext: PropTypes.instanceOf(OptionContext)
128
}
139

1410
private textArea: HTMLTextAreaElement | null = null
1511

16-
private get optionContext (): OptionContext {
12+
private get optionContext(): OptionContext {
1713
return this.context.optionContext
1814
}
1915

20-
componentWillMount () {
16+
componentWillMount() {
2117
this.optionContext.addValueChangeListener(this.onOptionValueChange)
2218
}
2319

24-
componentWillUnmount () {
20+
componentWillUnmount() {
2521
this.optionContext.removeValueChangeListener(this.onOptionValueChange)
2622
}
2723

28-
render () {
29-
const { avatarStyle } = this.props
24+
render() {
3025
const { optionContext } = this
3126
const props: Array<string> = []
3227
for (const option of allOptions) {
@@ -38,7 +33,7 @@ export default class ComponentCode extends React.Component<Props> {
3833
props.push(`${option.key}=${value}`)
3934
}
4035
const propsStr = props.join('&')
41-
const code = `<img src='https://avataaars.io/?avatarStyle=${avatarStyle}&${propsStr}'
36+
const code = `<img src='https://avataaars.io/?${propsStr}'
4237
/>`
4338
return (
4439
<div>

‎src/components/Main.tsx‎

Lines changed: 15 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as FileSaver from 'file-saver'
44
import * as PropTypes from 'prop-types'
55
import * as React from 'react'
66
import * as ReactDOM from 'react-dom'
7-
import { Avatar, AvatarStyle, OptionContext, allOptions } from 'avataaars'
7+
import { Avatar, OptionContext, allOptions } from 'avataaars'
88
import { Button } from 'react-bootstrap'
99
import { Helmet } from 'react-helmet'
1010
import {
@@ -20,9 +20,7 @@ import ComponentImg from './ComponentImg'
2020

2121
interface Props {
2222
__render__?: string
23-
avatarStyle: AvatarStyle
2423
onChangeUrlQueryParams: (params: any, updateType: string) => void
25-
onChangeAvatarStyle: (avatarStyle: AvatarStyle) => void
2624
}
2725

2826
const updateType = UrlUpdateTypes.pushIn
@@ -35,30 +33,22 @@ const urlPropsQueryConfig = {
3533
updateType
3634
}
3735
])
38-
),
39-
avatarStyle: {
40-
type: UrlQueryParamTypes.string,
41-
updateType
42-
}
36+
)
4337
}
4438

4539
interface State {
4640
displayComponentCode: boolean,
4741
displayComponentImg: boolean
4842
}
4943

50-
function capitalizeFirstLetter (text: string) {
44+
function capitalizeFirstLetter(text: string) {
5145
return text.charAt(0).toUpperCase() + text.slice(1)
5246
}
5347

5448
export class Main extends React.Component<Props, State> {
5549
static childContextTypes = {
5650
optionContext: PropTypes.instanceOf(OptionContext)
5751
}
58-
static defaultProps = {
59-
avatarStyle: AvatarStyle.Circle
60-
}
61-
6252
state = {
6353
displayComponentCode: false,
6454
displayComponentImg: false
@@ -68,32 +58,31 @@ export class Main extends React.Component<Props, State> {
6858
private canvasRef: HTMLCanvasElement | null = null
6959
private optionContext: OptionContext = new OptionContext(allOptions)
7060

71-
getChildContext () {
61+
getChildContext() {
7262
return { optionContext: this.optionContext }
7363
}
7464

75-
componentWillReceiveProps (nextProps: Props) {
65+
componentWillReceiveProps(nextProps: Props) {
7666
this.updateOptionContext(nextProps)
7767
}
7868

79-
componentWillMount () {
69+
componentWillMount() {
8070
this.optionContext.addValueChangeListener(this.onOptionValueChange)
8171
this.updateOptionContext(this.props)
8272
}
8373

84-
componentDidMount () {
74+
componentDidMount() {
8575
const anyWindow = window as any
8676
setTimeout(() => {
8777
anyWindow.prerenderReady = true
8878
}, 500)
8979
}
9080

91-
componentWillUnmount () {
81+
componentWillUnmount() {
9282
this.optionContext.removeValueChangeListener(this.onOptionValueChange)
9383
}
9484

95-
render () {
96-
const { avatarStyle } = this.props
85+
render() {
9786
const { displayComponentCode, displayComponentImg } = this.state
9887
const title = 'Avataaars Generator - Generate your own avataaars!'
9988
const imageURL = process.env.REACT_APP_IMG_RENDERER_URL + location.search
@@ -128,24 +117,22 @@ export class Main extends React.Component<Props, State> {
128117
<meta name='twitter:url' content={document.location.href} />
129118
</Helmet>
130119
<div style={{ textAlign: 'center', marginBottom: '1rem' }}>
131-
<Avatar ref={this.onAvatarRef} avatarStyle={avatarStyle} />
120+
<Avatar ref={this.onAvatarRef} />
132121
</div>
133122
<AvatarForm
134123
optionContext={this.optionContext}
135-
avatarStyle={avatarStyle}
136124
displayingCode={displayComponentCode}
137125
displayingImg={displayComponentImg}
138126
onDownloadPNG={this.onDownloadPNG}
139127
onDownloadSVG={this.onDownloadSVG}
140-
onAvatarStyleChange={this.onAvatarStyleChange}
141128
onToggleCode={this.onToggleCode}
142129
onToggleImg={this.onToggleImg}
143130
/>
144131
{displayComponentImg ? (
145-
<ComponentImg avatarStyle={avatarStyle} />
132+
<ComponentImg />
146133
) : null}
147134
{displayComponentCode ? (
148-
<ComponentCode avatarStyle={avatarStyle} />
135+
<ComponentCode />
149136
) : null}
150137
<canvas
151138
style={{ display: 'none' }}
@@ -172,19 +159,13 @@ export class Main extends React.Component<Props, State> {
172159
updateHandler(value)
173160
}
174161

175-
private updateOptionContext (nextProps: Props) {
162+
private updateOptionContext(nextProps: Props) {
176163
this.optionContext.setData(nextProps as any)
177164
}
178165

179-
private onAvatarStyleChange = (avatarStyle: AvatarStyle) => {
180-
this.props.onChangeAvatarStyle(avatarStyle)
181-
}
182-
183166
private onRandom = () => {
184167
const { optionContext } = this
185-
let values: { [index: string]: string } = {
186-
avatarStyle: this.props.avatarStyle
187-
}
168+
let values: { [index: string]: string } = {}
188169

189170
for (const option of optionContext.options) {
190171
if (option.key in values) {
@@ -241,7 +222,7 @@ export class Main extends React.Component<Props, State> {
241222
this.triggerDownload(svg, 'avataaars.svg')
242223
}
243224

244-
private triggerDownload (imageBlob: Blob, fileName: string) {
225+
private triggerDownload(imageBlob: Blob, fileName: string) {
245226
FileSaver.saveAs(imageBlob, fileName)
246227
}
247228

0 commit comments

Comments
 (0)