Maintenance: remove constructors (#1040)

* use class functions instead of fn bind

* use class functions in ImagePicker

components/Editor.js

@@ -48,24 +48,12 @@ const unsplashPhotographerCredit = /\n\n\/\/ Photo by.+?on Unsplash/
 class Editor extends React.Component {
   static contextType = ApiContext
 
-  constructor(props) {
+  state = {
-    super(props)
-    this.state = {
     ...DEFAULT_SETTINGS,
     ...this.props.snippet,
     loading: true,
   }
 
-    this.exportImage = this.exportImage.bind(this)
-    this.copyImage = this.copyImage.bind(this)
-    this.updateSetting = this.updateSetting.bind(this)
-    this.updateLanguage = this.updateLanguage.bind(this)
-    this.updateBackground = this.updateBackground.bind(this)
-    this.resetDefaultSettings = this.resetDefaultSettings.bind(this)
-    this.getCarbonImage = this.getCarbonImage.bind(this)
-    this.onDrop = this.onDrop.bind(this)
-  }
-
   async componentDidMount() {
     const { queryState } = getRouteState(this.props.router)
 
@@ -114,7 +102,7 @@ class Editor extends React.Component {
   updateCode = code => this.updateState({ code })
   updateWidth = width => this.setState({ widthAdjustment: false, width })
 
-  async getCarbonImage(
+  getCarbonImage = async (
     {
       format,
       type,
@@ -122,7 +110,7 @@ class Editor extends React.Component {
       exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value,
       includeTransparentRow = false,
     } = { format: 'png' }
-  ) {
+  ) => {
     // if safari, get image from api
     const isPNG = format !== 'svg'
     if (this.context.image && this.isSafari && isPNG) {
@@ -231,7 +219,7 @@ class Editor extends React.Component {
     )
   }
 
-  exportImage(format = 'png', options = {}) {
+  exportImage = (format = 'png', options = {}) => {
     const link = document.createElement('a')
 
     const prefix = options.filename || 'carbon'
@@ -250,29 +238,28 @@ class Editor extends React.Component {
     })
   }
 
-  copyImage() {
+  copyImage = () =>
-    return this.getCarbonImage({ format: 'png', type: 'blob' }).then(blob =>
+    this.getCarbonImage({ format: 'png', type: 'blob' }).then(blob =>
       navigator.clipboard.write([
         new window.ClipboardItem({
           'image/png': blob,
         }),
       ])
     )
-  }
 
-  updateSetting(key, value) {
+  updateSetting = (key, value) => {
     this.updateState({ [key]: value })
     if (Object.prototype.hasOwnProperty.call(DEFAULT_SETTINGS, key)) {
       this.updateState({ preset: null })
     }
   }
 
-  resetDefaultSettings() {
+  resetDefaultSettings = () => {
     this.updateState(DEFAULT_SETTINGS)
     this.props.onReset()
   }
 
-  onDrop([file]) {
+  onDrop = ([file]) => {
     if (file.type.split('/')[0] === 'image') {
       this.updateState({
         backgroundImage: file.content,
@@ -285,13 +272,13 @@ class Editor extends React.Component {
     }
   }
 
-  updateLanguage(language) {
+  updateLanguage = language => {
     if (language) {
       this.updateSetting('language', language.mime || language.mode)
     }
   }
 
-  updateBackground({ photographer, ...changes } = {}) {
+  updateBackground = ({ photographer, ...changes } = {}) => {
     if (photographer) {
       this.updateState(({ code = DEFAULT_CODE }) => ({
         ...changes,

components/ImagePicker.js

@@ -48,19 +48,6 @@ const INITIAL_STATE = {
 
 export default class ImagePicker extends React.Component {
   static contextType = ApiContext
-  constructor(props) {
-    super(props)
-    this.state = INITIAL_STATE
-    this.selectMode = this.selectMode.bind(this)
-    this.handleURLInput = this.handleURLInput.bind(this)
-    this.uploadImage = this.uploadImage.bind(this)
-    this.selectImage = this.selectImage.bind(this)
-    this.removeImage = this.removeImage.bind(this)
-    this.onImageLoaded = this.onImageLoaded.bind(this)
-    this.onCropChange = this.onCropChange.bind(this)
-    this.onDragEnd = this.onDragEnd.bind(this)
-  }
-
   static getDerivedStateFromProps(nextProps, state) {
     if (state.crop) {
       // update crop for editor container aspect-ratio change
@@ -77,25 +64,25 @@ export default class ImagePicker extends React.Component {
     return null
   }
 
-  selectMode(mode) {
+  state = INITIAL_STATE
-    this.setState({ mode })
+
-  }
+  selectMode = mode => this.setState({ mode })
 
-  async onDragEnd() {
+  onDragEnd = async () => {
     if (this.state.pixelCrop) {
       const croppedImg = await getCroppedImg(this.state.dataURL, this.state.pixelCrop)
       this.props.onChange({ backgroundImageSelection: croppedImg })
     }
   }
 
-  onCropChange(crop, pixelCrop) {
+  onCropChange = (crop, pixelCrop) => {
     this.setState({
       crop: { ...crop, aspect: this.props.aspectRatio },
       pixelCrop,
     })
   }
 
-  onImageLoaded(image) {
+  onImageLoaded = image => {
     const imageAspectRatio = image.width / image.height
     const initialCrop = {
       x: 0,
@@ -120,7 +107,7 @@ export default class ImagePicker extends React.Component {
     })
   }
 
-  handleURLInput(e) {
+  handleURLInput = e => {
     e.preventDefault()
     const url = e.target[0].value
     return this.context
@@ -137,12 +124,12 @@ export default class ImagePicker extends React.Component {
       })
   }
 
-  async uploadImage(e) {
+  uploadImage = async e => {
     const dataURL = await fileToDataURL(e.target.files[0])
     return this.handleImageChange(dataURL, dataURL)
   }
 
-  async selectImage(image) {
+  selectImage = async image => {
     // TODO use React suspense for loading this asset
     const { dataURL } = await this.context.downloadThumbnailImage(image)
 
@@ -175,7 +162,7 @@ export default class ImagePicker extends React.Component {
     }
   }
 
-  removeImage() {
+  removeImage = () => {
     this.setState(INITIAL_STATE, () => {
       this.props.onChange({
         backgroundImage: null,