nest-parrot
Version:
Parrot built on react
285 lines (283 loc) • 9.1 kB
JSX
(function (window, $, React, ReactDOM, $pt) {
var NFile = React.createClass($pt.defineCellComponent({
displayName: 'NFile',
statics: {
// PROPERTY_LIST: {
// ajaxDeleteSettings: null,
// ajaxSettings: null,
// allowedFileExtensions: null,
// allowedFileTypes: null,
// allowedPreviewMimeTypes: null,
// allowedPreviewTypes: null,
// autoReplace: null,
// browseClass: null,
// browseIcon: null,
// browseLabel: null,
// browseOnZoneClick: null,
// buttonLabelClass: null,
// captionClass: null,
// customLayoutTags: null,
// customPreviewTags: null,
// defaultPreviewContent: null,
// deleteExtraData: null,
// deleteUrl: null,
// dropZoneClickTitle: null,
// dropZoneEnabled: null,
// dropZoneTitle: null,
// dropZoneTitleClass: null,
// fileActionSettings: null,
// fileSizeGetter: null,
// fileTypeSettings: null,
// initialCaption: null,
// initialPreview: null,
// initialPreviewAsData: null,
// initialPreviewConfig: null,
// initialPreviewCount: null,
// initialPreviewDelimiter: null,
// initialPreviewFileType: null,
// initialPreviewShowDelete: null,
// initialPreviewThumbTags: null,
// language: null,
// layoutTemplates: null,
// mainClass: null,
// maxFileCount: null,
// maxFileSize: null,
// maxImageHeight: null,
// maxImageWidth: null,
// maxPreviewFileSize: null,
// minFileCount: null,
// minImageHeight: null,
// minImageWidth: null,
// msgCancelled: null,
// msgErrorClass: null,
// msgFileNotFound: null,
// msgFileNotReadable: null,
// msgFilePreviewAborted: null,
// msgFilePreviewError: null,
// msgFileSecured: null,
// msgFilesTooLess: null,
// msgFilesTooMany: null,
// msgFoldersNotAllowed: null,
// msgImageHeightLarge: null,
// msgImageHeightSmall: null,
// msgImageWidthLarge: null,
// msgImageWidthSmall: null,
// msgInvalidFileExtension: null,
// msgInvalidFileType: null,
// msgLoading: null,
// msgNo: null,
// msgProgress: null,
// msgSelected: null,
// msgSizeTooLarge: null,
// msgUploadAborted: null,
// msgValidationError: null,
// msgValidationErrorClass: null,
// msgValidationErrorIcon: null,
// msgZoomModalHeading: null,
// msgZoomTitle: null,
// otherActionButtons: null,
// overwriteInitial: null,
// previewClass: null,
// previewFileExtSettings: null,
// previewFileIcon: null,
// previewFileIconClass: null,
// previewFileIconSettings: null,
// previewFileType: null,
// previewSettings: null,
// previewTemplates: null,
// previewThumbTags: null,
// previewZoomButtonClasses: null,
// previewZoomButtonIcons: null,
// previewZoomButtonTitles: null,
// previewZoomSettings: null,
// progressClass: null,
// progressCompleteClass: null,
// progressErrorClass: null,
// purifyHtml: null,
// removeClass: null,
// resizeDefaultImageType: null,
// removeIcon: null,
// removeLabel: null,
// removeFromPreviewOnError: null,
// removeTitle: null,
// resizeImage: null,
// resizeImageQuality: null,
// resizePreference: null,
// showBrowse: null,
// showAjaxErrorDetails: null,
// showCaption: null,
// showCancel: null,
// showClose: null,
// showPreview: null,
// showRemove: null,
// showUpload: null,
// showUploadedThumbs: null,
// slugCallback: null,
// textEncoding: null,
// theme: null,
// uploadAsync: null,
// uploadClass: null,
// uploadExtraData: null,
// uploadIcon: null,
// uploadLabel: null,
// uploadTitle: null,
// uploadUrl: null,
// validateInitialCount: null,
// zoomIndicator: null
// },
DEFAULT_PROPERTY_VALUES: {
browseLabel: '',
browseIcon: '<i class="fa fa-fw fa-folder-open-o"></i>',
browseClass: 'btn btn-link',
uploadLabel: '',
uploadIcon: '<i class="fa fa-fw fa-upload"></i>',
uploadClass: 'btn btn-link',
removeLabel: '',
removeIcon: '<i class="fa fa-fw fa-trash-o"></i>',
removeClass: 'btn btn-link',
showClose: false,
showPreview: true
},
MOBILE_SETTINGS: {
previewSettings: {
image: {width: "80px", height: "80px"},
html: {width: "80px", height: "80px"},
text: {width: "80px", height: "80px"},
video: {width: "80px", height: "80px"},
audio: {width: "80px", height: "80px"},
flash: {width: "80px", height: "80px"},
object: {width: "80px", height: "80px"},
other: {width: "80px", height: "80px"}
},
browseIcon: '<i class="fa fa-fw fa-plus-square"></i>',
showCaption: true,
layoutTemplates: {
caption: '<span />',
progress: '<span />'
},
showCancel: false,
dropZoneEnabled: false
}
},
getDefaultProps: function () {
return {
defaultOptions: {
mobileEnabled: true,
multiple: true,
inputName: 'fileData'
}
};
},
getInitialState: function () {
return {
monitors: {}
};
},
beforeDidMount: function () {
var input = $(ReactDOM.findDOMNode(this.refs.file));
input.fileinput(this.createDisplayOptions());
// event monitor
var _this = this;
var monitors = this.getEventMonitor();
Object.keys(monitors).forEach(function (eventKey) {
_this.state.monitors[eventKey] = function() {
var args = Array.prototype.slice.call(arguments);
// attach this component to event object
args[0].reactComponent = _this;
monitors[eventKey].apply(this, args);
};
input.on(eventKey, _this.state.monitors[eventKey]);
});
var comp = $(ReactDOM.findDOMNode(this.refs.comp));
comp.find('.kv-fileinput-caption')
.focus(this.onComponentFocused)
.blur(this.onComponentBlurred);
comp.find('.input-group-btn>.btn')
.focus(this.onComponentFocused)
.blur(this.onComponentBlurred);
},
beforeWillUnmount: function () {
var input = $(ReactDOM.findDOMNode(this.refs.file));
// event monitor
var monitors = this.getEventMonitor();
Object.keys(this.state.monitors).forEach(function (eventKey) {
input.off(eventKey, this.state.monitors[eventKey]);
}.bind(this));
// destroy the component
input.fileinput('destroy');
},
render: function () {
var css = {
'n-disabled': !this.isEnabled()
};
css[this.getComponentCSS('n-file')] = true;
css.mobile = this.isMobileEnabled();
var inputCSS = {
file: true
};
return (<div className={$pt.LayoutHelper.classSet(css)} ref='comp'>
<input type='file'
className={$pt.LayoutHelper.classSet(inputCSS)}
multiple={this.allowMultipleFiles()}
disabled={!this.isEnabled()}
name={this.getComponentOption('inputName')}
ref='file'/>
{this.renderNormalLine()}
{this.renderFocusLine()}
</div>);
},
createDisplayOptions: function () {
var _this = this;
// get all component options
var options = this.getLayout().getComponentOption();
Object.keys(options).filter(function(key) {
// the component type should be filterred
return ['type', 'multiple', 'inputName', 'mobileEnabled'].indexOf(key) == -1;
}).forEach(function (key) {
options[key] = _this.getComponentOption(key);
// console.log(key, options[key]);
if (options[key] == null) {
var defaultValue = NFile.DEFAULT_PROPERTY_VALUES[key];
// console.log(defaultValue);
if (defaultValue) {
options[key] = defaultValue;
} else {
delete options[key];
}
}
});
Object.keys(NFile.DEFAULT_PROPERTY_VALUES).forEach(function(key) {
if (options[key] == null) {
options[key] = NFile.DEFAULT_PROPERTY_VALUES[key];
}
});
if (this.isMobileEnabled()) {
Object.keys(NFile.MOBILE_SETTINGS).forEach(function(key) {
var value = NFile.MOBILE_SETTINGS[key];
if (value) {
options[key] = value;
}
});
}
return options;
},
allowMultipleFiles: function () {
return this.getComponentOption('multiple');
},
onComponentFocused: function () {
$(ReactDOM.findDOMNode(this.refs.focusLine)).toggleClass('focus');
$(ReactDOM.findDOMNode(this.refs.normalLine)).toggleClass('focus');
},
onComponentBlurred: function () {
$(ReactDOM.findDOMNode(this.refs.focusLine)).toggleClass('focus');
$(ReactDOM.findDOMNode(this.refs.normalLine)).toggleClass('focus');
},
isMobileEnabled: function() {
return this.isMobile() && this.getComponentOption('mobileEnabled');
}
}));
$pt.Components.NFile = NFile;
$pt.LayoutHelper.registerComponentRenderer($pt.ComponentConstants.File, function (model, layout, direction, viewMode) {
return <$pt.Components.NFile {...$pt.LayoutHelper.transformParameters(model, layout, direction, viewMode)}/>;
});
}(window, jQuery, React, ReactDOM, $pt));