-
Notifications
You must be signed in to change notification settings - Fork 479
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React: Remove uses of React.createClass in code-studio/components #17624
Merged
islemaster
merged 31 commits into
staging
from
react-no-createclass-code-studio-components
Sep 8, 2017
Merged
Changes from 27 commits
Commits
Show all changes
31 commits
Select commit
Hold shift + click to select a range
8453ff4
ES6ify AbuseError
islemaster cd3121c
ES6ify AbuseExclamation
islemaster fec2388
ES6ify AdvancedShareOptions
islemaster be30ca2
ES6ify AssetManager
islemaster 68f6d56
ES6ify AssetRow
islemaster cd5c75d
ES6ify AssetThumbnail
islemaster bd63b0d
ES6ify AssetUploader
islemaster 6a91ab8
ES6ify Attachments
islemaster d6b556f
ES6ify Grid
islemaster 5fd33df
ES6ify GridEditor
islemaster 2e9b513
ES6ify HiddenUploader
islemaster c851660
ES6ify Icon
islemaster 928b083
ES6ify IconLibrary
islemaster 9d331d7
ES6ify IconList
islemaster e6cf0d1
ES6ify IconListEntry
islemaster b594d14
ES6ify ImagePicker
islemaster 45e8b95
ES6ify ReportAbuseForm
islemaster bd482a1
ES6ify SendToPhone
islemaster 936ef84
ES6ify ShareDialog
islemaster 07964bd
ES6ify SmallFooter
islemaster 9a2e070
ES6ify SoundCategory
islemaster 8c9d781
ES6ify SoundLibrary
islemaster 2a1350c
ES6ify SoundList
islemaster 2c7e18d
ES6ify SoundListEntry
islemaster 4db38da
ES6ify SoundPicker
islemaster efecf9f
ES6ify TeacherContentToggle
islemaster 8837649
ES6ify TeacherPanel
islemaster c7154b0
Fixup to AdvancedShareOptions.jsx
islemaster 02ef047
Fixup to Grid.jsx
islemaster 4aa632d
Fixup in GridEditor.jsx
islemaster e9be378
Remove deprecated isMounted call
islemaster File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -44,8 +44,8 @@ const style = { | |
}, | ||
}; | ||
|
||
const AdvancedShareOptions = Radium(React.createClass({ | ||
propTypes: { | ||
const AdvancedShareOptions = Radium(class extends React.Component { | ||
static propTypes = { | ||
shareUrl: PropTypes.string.isRequired, | ||
onClickExport: PropTypes.func, | ||
onExpand: PropTypes.func.isRequired, | ||
|
@@ -56,18 +56,19 @@ const AdvancedShareOptions = Radium(React.createClass({ | |
iframeHeight: PropTypes.number.isRequired, | ||
iframeWidth: PropTypes.number.isRequired, | ||
}).isRequired, | ||
}, | ||
}; | ||
|
||
getInitialState() { | ||
return { | ||
selectedOption: (this.props.onClickExport && 'export') || 'embed', | ||
constructor(props) { | ||
super(props); | ||
this.state = { | ||
selectedOption: (props.onClickExport && 'export') || 'embed', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems better expressed as |
||
exporting: false, | ||
exportError: null, | ||
embedWithoutCode: false, | ||
}; | ||
}, | ||
} | ||
|
||
downloadExport() { | ||
downloadExport = () => { | ||
this.setState({exporting: true}); | ||
this.props.onClickExport().then( | ||
this.setState.bind(this, {exporting: false}), | ||
|
@@ -78,7 +79,7 @@ const AdvancedShareOptions = Radium(React.createClass({ | |
}); | ||
} | ||
); | ||
}, | ||
}; | ||
|
||
renderEmbedTab() { | ||
let url = `${this.props.shareUrl}/embed`; | ||
|
@@ -96,7 +97,7 @@ const AdvancedShareOptions = Radium(React.createClass({ | |
) + '?nosource'; | ||
} | ||
const {iframeWidth, iframeHeight} = this.props.embedOptions; | ||
var iframeHtml = | ||
const iframeHtml = | ||
`<iframe width="${iframeWidth}" height="${iframeHeight}" style="border: 0px;" src="${url}"></iframe>`; | ||
return ( | ||
<div> | ||
|
@@ -122,14 +123,14 @@ const AdvancedShareOptions = Radium(React.createClass({ | |
</label> | ||
</div> | ||
); | ||
}, | ||
} | ||
|
||
renderExportTab() { | ||
var spinner = this.state.exporting ? | ||
const spinner = this.state.exporting ? | ||
<i className="fa fa-spinner fa-spin"></i> : | ||
null; | ||
// TODO: Make this use a nice UI component from somewhere. | ||
var alert = this.state.exportError ? ( | ||
const alert = this.state.exportError ? ( | ||
<div className="alert fade in"> | ||
{this.state.exportError} | ||
</div> | ||
|
@@ -149,17 +150,17 @@ const AdvancedShareOptions = Radium(React.createClass({ | |
{alert} | ||
</div> | ||
); | ||
}, | ||
} | ||
|
||
render() { | ||
if (!this.state.selectedOption) { | ||
// no options are available. Render nothing. | ||
return null; | ||
} | ||
var optionsNav; | ||
var selectedOption; | ||
let optionsNav; | ||
let selectedOption; | ||
if (this.props.expanded) { | ||
var exportTab = null; | ||
let exportTab = null; | ||
if (this.props.onClickExport) { | ||
exportTab = ( | ||
<li | ||
|
@@ -173,7 +174,7 @@ const AdvancedShareOptions = Radium(React.createClass({ | |
</li> | ||
); | ||
} | ||
var embedTab = ( | ||
const embedTab = ( | ||
<li | ||
style={[ | ||
style.nav.li, | ||
|
@@ -198,7 +199,7 @@ const AdvancedShareOptions = Radium(React.createClass({ | |
selectedOption = this.renderEmbedTab(); | ||
} | ||
} | ||
var expand = this.props.expanded && this.state.selectedOption ? null : | ||
const expand = this.props.expanded && this.state.selectedOption ? null : | ||
( | ||
<a onClick={this.props.onExpand} style={style.expand}> | ||
{this.props.i18n.t('project.advanced_share')} | ||
|
@@ -212,6 +213,6 @@ const AdvancedShareOptions = Radium(React.createClass({ | |
</div> | ||
); | ||
} | ||
})); | ||
}); | ||
|
||
export default AdvancedShareOptions; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Out of scope for this PR, but have we considered adding decorator support and using
@Radium
to add Radium to our components?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That would be awesome. I loved using annotations in AS3.