Maintenance: remove constructors (#1040)

* use class functions instead of fn bind

* use class functions in ImagePicker
main
Michael Fix 4 years ago committed by GitHub
parent e765b54baa
commit e5ffd999f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

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

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

Loading…
Cancel
Save