fangpenlin · lmuller18 · Oct 3, 2019
diff --git a/src/components/AvatarForm.tsx b/src/components/AvatarForm.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { AvatarStyle, Option, OptionContext } from 'avataaars'
+import { Option, OptionContext } from 'avataaars'
 import {
   Button,
   Col,
@@ -28,7 +28,7 @@ const serializeQuery = function (obj: any) {
 }
 
 class OptionSelect extends React.Component<SelectProps> {
-  render () {
+  render() {
     const { controlId, label, value, children } = this.props
     return (
       <FormGroup className='row' controlId={controlId}>
@@ -55,21 +55,19 @@ class OptionSelect extends React.Component<SelectProps> {
 }
 
 export interface Props {
-  avatarStyle: AvatarStyle
   optionContext: OptionContext
   displayingCode: boolean
   displayingImg: boolean
   onDownloadPNG?: () => void
   onDownloadSVG?: () => void
-  onAvatarStyleChange?: (avatarStyle: AvatarStyle) => void
   onToggleCode?: () => void
   onToggleImg?: () => void
 }
 
 export default class AvatarForm extends React.Component<Props> {
   private onChangeCache: Array<(value: string) => void> = []
 
-  componentWillMount () {
+  componentWillMount() {
     const { optionContext } = this.props
     optionContext.addStateChangeListener(() => {
       this.forceUpdate()
@@ -79,8 +77,8 @@ export default class AvatarForm extends React.Component<Props> {
     )
   }
 
-  render () {
-    const { optionContext, avatarStyle, displayingImg, displayingCode } = this.props
+  render() {
+    const { optionContext, displayingImg, displayingCode } = this.props
     const selects = optionContext.options.map((option, index) => {
       const optionState = optionContext.getOptionState(option.key)!
       if (optionState.available <= 0) {
@@ -107,35 +105,6 @@ export default class AvatarForm extends React.Component<Props> {
     const inputCol = 9
     return (
       <Form horizontal>
-        <FormGroup className='row' controlId='avatar-style'>
-          <Col componentClass={ControlLabel} sm={3}>
-            Avatar Style
-          </Col>
-          <Col sm={9}>
-            <label>
-              <input
-                type='radio'
-                id='avatar-style-circle'
-                name='avatar-style'
-                value={AvatarStyle.Circle}
-                checked={avatarStyle === AvatarStyle.Circle}
-                onChange={this.onAvatarStyleChange}
-              />{' '}
-              Circle
-            </label>{' '}
-            <label>
-              <input
-                type='radio'
-                id='avatar-style-transparent'
-                name='avatar-style'
-                value={AvatarStyle.Transparent}
-                checked={avatarStyle === AvatarStyle.Transparent}
-                onChange={this.onAvatarStyleChange}
-              />{' '}
-              Transparent
-            </label>
-          </Col>
-        </FormGroup>
         {selects}
         <FormGroup className='row'>
           <Col
@@ -203,17 +172,11 @@ export default class AvatarForm extends React.Component<Props> {
     )
   }
 
-  private onChange (option: Option, value: string) {
+  private onChange(option: Option, value: string) {
     const { optionContext } = this.props
     optionContext.setValue(option.key, value)
   }
 
-  private onAvatarStyleChange = (event: React.FormEvent<HTMLInputElement>) => {
-    if (this.props.onAvatarStyleChange) {
-      this.props.onAvatarStyleChange((event.target as any).value)
-    }
-  }
-
   private onDownloadPNG = (event: React.FormEvent<FormControl>) => {
     event.preventDefault()
     if (this.props.onDownloadPNG) {

diff --git a/src/components/ComponentCode.tsx b/src/components/ComponentCode.tsx
@@ -1,32 +1,27 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { AvatarStyle, OptionContext, allOptions } from 'avataaars'
+import { OptionContext, allOptions } from 'avataaars'
 
-export interface Props {
-  avatarStyle: AvatarStyle
-}
-
-export default class ComponentCode extends React.Component<Props> {
+export default class ComponentCode extends React.Component {
   static contextTypes = {
     optionContext: PropTypes.instanceOf(OptionContext)
   }
 
   private textArea: HTMLTextAreaElement | null = null
 
-  private get optionContext (): OptionContext {
+  private get optionContext(): OptionContext {
     return this.context.optionContext
   }
 
-  componentWillMount () {
+  componentWillMount() {
     this.optionContext.addValueChangeListener(this.onOptionValueChange)
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.optionContext.removeValueChangeListener(this.onOptionValueChange)
   }
 
-  render () {
-    const { avatarStyle } = this.props
+  render() {
     const { optionContext } = this
     const props: Array<string> = []
     for (const option of allOptions) {
@@ -39,7 +34,6 @@ export default class ComponentCode extends React.Component<Props> {
     }
     const propsStr = props.join('\n')
     const code = `<Avatar
-  avatarStyle='${avatarStyle}'
 ${propsStr}
 />`
     return (

diff --git a/src/components/ComponentImg.tsx b/src/components/ComponentImg.tsx
@@ -1,32 +1,27 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { AvatarStyle, OptionContext, allOptions } from 'avataaars'
+import { OptionContext, allOptions } from 'avataaars'
 
-export interface Props {
-  avatarStyle: AvatarStyle
-}
-
-export default class ComponentCode extends React.Component<Props> {
+export default class ComponentCode extends React.Component {
   static contextTypes = {
     optionContext: PropTypes.instanceOf(OptionContext)
   }
 
   private textArea: HTMLTextAreaElement | null = null
 
-  private get optionContext (): OptionContext {
+  private get optionContext(): OptionContext {
     return this.context.optionContext
   }
 
-  componentWillMount () {
+  componentWillMount() {
     this.optionContext.addValueChangeListener(this.onOptionValueChange)
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.optionContext.removeValueChangeListener(this.onOptionValueChange)
   }
 
-  render () {
-    const { avatarStyle } = this.props
+  render() {
     const { optionContext } = this
     const props: Array<string> = []
     for (const option of allOptions) {
@@ -38,7 +33,7 @@ export default class ComponentCode extends React.Component<Props> {
       props.push(`${option.key}=${value}`)
     }
     const propsStr = props.join('&')
-    const code = `<img src='https://avataaars.io/?avatarStyle=${avatarStyle}&${propsStr}'
+    const code = `<img src='https://avataaars.io/?${propsStr}'
 />`
     return (
       <div>

diff --git a/src/components/Main.tsx b/src/components/Main.tsx
@@ -4,7 +4,7 @@ import * as FileSaver from 'file-saver'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
-import { Avatar, AvatarStyle, OptionContext, allOptions } from 'avataaars'
+import { Avatar, OptionContext, allOptions } from 'avataaars'
 import { Button } from 'react-bootstrap'
 import { Helmet } from 'react-helmet'
 import {
@@ -20,9 +20,7 @@ import ComponentImg from './ComponentImg'
 
 interface Props {
   __render__?: string
-  avatarStyle: AvatarStyle
   onChangeUrlQueryParams: (params: any, updateType: string) => void
-  onChangeAvatarStyle: (avatarStyle: AvatarStyle) => void
 }
 
 const updateType = UrlUpdateTypes.pushIn
@@ -35,30 +33,22 @@ const urlPropsQueryConfig = {
         updateType
       }
     ])
-  ),
-  avatarStyle: {
-    type: UrlQueryParamTypes.string,
-    updateType
-  }
+  )
 }
 
 interface State {
   displayComponentCode: boolean,
   displayComponentImg: boolean
 }
 
-function capitalizeFirstLetter (text: string) {
+function capitalizeFirstLetter(text: string) {
   return text.charAt(0).toUpperCase() + text.slice(1)
 }
 
 export class Main extends React.Component<Props, State> {
   static childContextTypes = {
     optionContext: PropTypes.instanceOf(OptionContext)
   }
-  static defaultProps = {
-    avatarStyle: AvatarStyle.Circle
-  }
-
   state = {
     displayComponentCode: false,
     displayComponentImg: false
@@ -68,32 +58,31 @@ export class Main extends React.Component<Props, State> {
   private canvasRef: HTMLCanvasElement | null = null
   private optionContext: OptionContext = new OptionContext(allOptions)
 
-  getChildContext () {
+  getChildContext() {
     return { optionContext: this.optionContext }
   }
 
-  componentWillReceiveProps (nextProps: Props) {
+  componentWillReceiveProps(nextProps: Props) {
     this.updateOptionContext(nextProps)
   }
 
-  componentWillMount () {
+  componentWillMount() {
     this.optionContext.addValueChangeListener(this.onOptionValueChange)
     this.updateOptionContext(this.props)
   }
 
-  componentDidMount () {
+  componentDidMount() {
     const anyWindow = window as any
     setTimeout(() => {
       anyWindow.prerenderReady = true
     }, 500)
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     this.optionContext.removeValueChangeListener(this.onOptionValueChange)
   }
 
-  render () {
-    const { avatarStyle } = this.props
+  render() {
     const { displayComponentCode, displayComponentImg } = this.state
     const title = 'Avataaars Generator - Generate your own avataaars!'
     const imageURL = process.env.REACT_APP_IMG_RENDERER_URL + location.search
@@ -128,24 +117,22 @@ export class Main extends React.Component<Props, State> {
           <meta name='twitter:url' content={document.location.href} />
         </Helmet>
         <div style={{ textAlign: 'center', marginBottom: '1rem' }}>
-          <Avatar ref={this.onAvatarRef} avatarStyle={avatarStyle} />
+          <Avatar ref={this.onAvatarRef} />
         </div>
         <AvatarForm
           optionContext={this.optionContext}
-          avatarStyle={avatarStyle}
           displayingCode={displayComponentCode}
           displayingImg={displayComponentImg}
           onDownloadPNG={this.onDownloadPNG}
           onDownloadSVG={this.onDownloadSVG}
-          onAvatarStyleChange={this.onAvatarStyleChange}
           onToggleCode={this.onToggleCode}
           onToggleImg={this.onToggleImg}
         />
         {displayComponentImg ? (
-          <ComponentImg avatarStyle={avatarStyle} />
+          <ComponentImg />
         ) : null}
         {displayComponentCode ? (
-          <ComponentCode avatarStyle={avatarStyle} />
+          <ComponentCode />
         ) : null}
         <canvas
           style={{ display: 'none' }}
@@ -172,19 +159,13 @@ export class Main extends React.Component<Props, State> {
     updateHandler(value)
   }
 
-  private updateOptionContext (nextProps: Props) {
+  private updateOptionContext(nextProps: Props) {
     this.optionContext.setData(nextProps as any)
   }
 
-  private onAvatarStyleChange = (avatarStyle: AvatarStyle) => {
-    this.props.onChangeAvatarStyle(avatarStyle)
-  }
-
   private onRandom = () => {
     const { optionContext } = this
-    let values: { [index: string]: string } = {
-      avatarStyle: this.props.avatarStyle
-    }
+    let values: { [index: string]: string } = {}
 
     for (const option of optionContext.options) {
       if (option.key in values) {
@@ -241,7 +222,7 @@ export class Main extends React.Component<Props, State> {
     this.triggerDownload(svg, 'avataaars.svg')
   }
 
-  private triggerDownload (imageBlob: Blob, fileName: string) {
+  private triggerDownload(imageBlob: Blob, fileName: string) {
     FileSaver.saveAs(imageBlob, fileName)
   }