RestrictedDialogForm.renderUsageRightsWarning = function() {
return (
<div className="RestrictedDialogForm__banner col-xs-12">
<span className="alert">
<i className="icon-warning RestrictedDialogForm__warning" />
{I18n.t('Before publishing, you must set usage rights on your files.')}
</span>
</div>
)
}
RestrictedDialogForm.renderRestrictedAccessForm = function (options) {
var formContainerClasses = classNames({
'RestrictedDialogForm__form': true,
'col-xs-9': true,
'off-xs-3': options && options.offset
});
return (
<div className={formContainerClasses}>
<form
ref='dialogForm'
onSubmit={this.handleSubmit}
className='form-horizontal form-dialog permissions-dialog-form'
>
<RestrictedRadioButtons
ref='restrictedSelection'
models={this.props.models}
radioStateChange={this.radioStateChange}
>
</RestrictedRadioButtons>
<div className='form-controls'>
<button
type='button'
onClick={this.props.closeDialog}
className='btn'
>
{I18n.t('Cancel')}
</button>
<button
ref='updateBtn'
type='submit'
className='btn btn-primary'
disabled={!this.state.submitable}
>
{I18n.t('Update')}
</button>
</div>
</form>
</div>
);
};
renderDatePickers: function () {
var styleObj = {};
if (this.state.selectedOption !== 'date_range') {
styleObj.visibility = 'hidden';
}
return (
<div style={styleObj}>
<label className='control-label dialog-adapter-form-calendar-label'>
{I18n.t('Available From')}
</label>
<div className='dateSelectInputContainer controls'>
<input
ref='unlock_at'
defaultValue={(this.state.unlock_at) ? $.datetimeString(this.state.unlock_at) : ''}
className='form-control dateSelectInput'
type='text'
aria-label={I18n.t('Available From Date')}
/>
</div>
<div>
<label className='control-label dialog-adapter-form-calendar-label'>
{I18n.t('Available Until')}
</label>
<div className='dateSelectInputContainer controls'>
<input
id='lockDate'
ref='lock_at'
defaultValue={(this.state.lock_at) ? $.datetimeString(this.state.lock_at) : ''}
className='form-control dateSelectInput'
type='text'
aria-label={I18n.t('Available Until Date')}
/>
</div>
</div>
</div>
);
},
RestrictedDialogForm.renderRestrictedAccessForm = function(options) {
const formContainerClasses = classNames({
RestrictedDialogForm__form: true,
'col-xs-9': true,
'off-xs-3': options && options.offset
})
return (
<div className={formContainerClasses}>
<form
ref={e => (this.dialogForm = e)}
onSubmit={this.handleSubmit}
className="form-horizontal form-dialog permissions-dialog-form"
>
<RestrictedRadioButtons
ref={e => (this.restrictedSelection = e)}
models={this.props.models}
radioStateChange={this.radioStateChange}
/>
<div className="form-controls">
<button type="button" onClick={this.props.closeDialog} className="btn">
{I18n.t('Cancel')}
</button>
<button
ref={e => (this.updateBtn = e)}
type="submit"
className="btn btn-primary"
disabled={!this.state.submitable}
>
{I18n.t('Update')}
</button>
</div>
</form>
</div>
)
}
import ReactDOM from 'react-dom'
import I18n from 'i18n!restrict_student_access'
import $ from 'jquery'
import customPropTypes from 'compiled/react_files/modules/customPropTypes'
import Folder from 'compiled/models/Folder'
import 'jquery.instructure_date_and_time'
var RestrictedRadioButtons = React.createClass({
propTypes: {
models: PropTypes.arrayOf(customPropTypes.filesystemObject).isRequired,
radioStateChange: PropTypes.func
},
permissionOptions: [{
ref: 'publishInput',
text: I18n.t('Publish'),
selectedOptionKey: 'published',
iconClasses: 'icon-publish icon-Solid RestrictedRadioButtons__publish_icon',
onChange () {
this.updateBtnEnable();
this.setState({selectedOption: 'published'});
}
}, {
ref: 'unpublishInput',
text: I18n.t('Unpublish'),
selectedOptionKey: 'unpublished',
iconClasses: 'icon-unpublish RestrictedRadioButtons__unpublish_icon',
onChange () {
this.updateBtnEnable();
this.setState({selectedOption: 'unpublished'});
}