Skip to content
This repository has been archived by the owner on Oct 6, 2019. It is now read-only.

Commit

Permalink
Merge pull request #100 from dnnsoftware/bug/CONTENT-7612
Browse files Browse the repository at this point in the history 
CONTENT-7612: localize dnn-file-upload component.
  • Loading branch information
@francescorivola
francescorivola authored Oct 23, 2017
2 parents 7e786f2 + 20f8a1e commit 1149169
Show file tree
Hide file tree
Showing 9 changed files with 205 additions and 61 deletions.
6 changes: 3 additions & 3 deletions FileUpload/lib/FileUpload.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion FileUpload/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dnn-file-upload",
"version": "0.1.13",
"version": "0.1.14",
"description": "DNN File Uploader",
"main": "index.js",
"scripts": {
Expand Down
34 changes: 28 additions & 6 deletions FileUpload/src/Browse/Browse.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, {Component, PropTypes} from "react";
import FolderPicker from "./FolderPicker";
import FilePicker from "./FilePicker";
import helper from "../helper";

import "./style.less";
const KEY = {
Expand Down Expand Up @@ -142,24 +143,38 @@ export default class Browse extends Component {
this.setState({ folders });
}

renderActions(){
const {props} = this;

return helper.renderActions(props.browseActionText, {
"save": this.onSave.bind(this),
"cancel": props.onCancel
});
}

render() {
/* eslint-disable react/no-danger */
return <div className="file-upload-container">
<h4>Folder</h4>
<h4>{this.props.folderText}</h4>
<FolderPicker
notSpecifiedText = {this.props.notSpecifiedText}
searchFoldersPlaceHolderText = {this.props.searchFoldersPlaceHolderText}
selectedFolder={this.state.selectedFolder}
folders={this.state.folders}
searchFolder={this.getFolders.bind(this)}
onFolderClick={this.onFolderClick.bind(this) }
getChildren={this.getChildrenFolders.bind(this) }/>
<h4>File</h4>
getChildren={this.getChildrenFolders.bind(this) }
/>
<h4>{this.props.fileText}</h4>
<FilePicker
notSpecifiedText = {this.props.notSpecifiedText}
searchFilesPlaceHolderText = {this.props.searchFilesPlaceHolderText}
selectedFile={this.state.selectedFile}
files={this.state.files}
onFileClick={this.onFileClick.bind(this) }
getFiles={this.getFiles.bind(this) }
getFiles={this.getFiles.bind(this) }
/>
<span>Press <strong onClick={this.onSave.bind(this) }>[ENTER]</strong> to save, or <strong onClick={this.props.onCancel}>[ESC]</strong> to cancel</span>
<span>{this.renderActions()}</span>
</div>;
}
}
Expand All @@ -171,7 +186,14 @@ Browse.propTypes = {
selectedFolder: PropTypes.object.isRequired,
fileFormats: PropTypes.array,
onSave: PropTypes.func.isRequired,
onCancel: PropTypes.func.isRequired
onCancel: PropTypes.func.isRequired,

browseActionText: PropTypes.string,
fileText: PropTypes.string,
folderText: PropTypes.string,
notSpecifiedText: PropTypes.string,
searchFoldersPlaceHolderText: PropTypes.string,
searchFilesPlaceHolderText: PropTypes.string
};

Browse.defaultProps = {
Expand Down
13 changes: 7 additions & 6 deletions FileUpload/src/Browse/FilePicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ const searchIcon = require("!raw!./img/search.svg");
const fileIcon = require("!raw!./img/pages.svg");
import { Scrollbars } from "react-custom-scrollbars";

const notSpecifiedText = "<None Specified>";

export default class FilePicker extends Component {

constructor() {
Expand Down Expand Up @@ -95,7 +93,7 @@ export default class FilePicker extends Component {
return <ul>
<li>
<div className="icon" dangerouslySetInnerHTML={{ __html: fileIcon }} onClick={this.onFileNameClick.bind(this) }/>
<div className="item-name none-specified" onClick={this.onFileNameClick.bind(this) }>{notSpecifiedText}</div>
<div className="item-name none-specified" onClick={this.onFileNameClick.bind(this) }>{this.props.notSpecifiedText}</div>
</li>
{files}
</ul>;
Expand All @@ -104,7 +102,7 @@ export default class FilePicker extends Component {

render() {
/* eslint-disable react/no-danger */
const selectedFileText = this.props.selectedFile ? this.props.selectedFile.value : notSpecifiedText;
const selectedFileText = this.props.selectedFile ? this.props.selectedFile.value : this.props.notSpecifiedText;

const files = this.getFiles();

Expand All @@ -115,7 +113,7 @@ export default class FilePicker extends Component {
<div className={"item-picker-container" + (this.state.showFilePicker ? " show" : "") } >
<div className="inner-box">
<div className="search">
<input type="text" value={this.state.searchFileText} onChange={this.onChangeSearchFileText.bind(this) } placeholder="Search Files..." aria-label="Search" />
<input type="text" value={this.state.searchFileText} onChange={this.onChangeSearchFileText.bind(this) } placeholder={this.props.searchFilesPlaceHolderText} aria-label="Search" />
{this.state.searchFileText && <div onClick={this.clearSearch.bind(this) } className="clear-button">×</div>}
<div className="search-icon" dangerouslySetInnerHTML={{ __html: searchIcon }} />
</div>
Expand All @@ -139,5 +137,8 @@ FilePicker.propTypes = {
files: PropTypes.object.isRequired,
onFileClick: PropTypes.func.isRequired,
selectedFile: PropTypes.object.isRequired,
getFiles: PropTypes.func.isRequired
getFiles: PropTypes.func.isRequired,

notSpecifiedText: PropTypes.string,
searchFilesPlaceHolderText: PropTypes.string
};
9 changes: 6 additions & 3 deletions FileUpload/src/Browse/FolderPicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default class FolderPicker extends Component {

render() {
/* eslint-disable react/no-danger */
const selectedFolderText = this.props.selectedFolder ? this.props.selectedFolder.value : "<Not Specified>";
const selectedFolderText = this.props.selectedFolder ? this.props.selectedFolder.value : this.props.notSpecifiedText;

return <div className="drop-down">
<div className="selected-item" onClick={this.onFoldersClick.bind(this) }>
Expand All @@ -73,7 +73,7 @@ export default class FolderPicker extends Component {
<div className={"item-picker-container" + (this.state.showFolderPicker ? " show" : "") } >
<div className="inner-box">
<div className="search">
<input type="text" value={this.state.searchFolderText} onChange={this.onChangeSearchFolderText.bind(this) } placeholder="Search Folders..." aria-label="Search" />
<input type="text" value={this.state.searchFolderText} onChange={this.onChangeSearchFolderText.bind(this) } placeholder={this.props.searchFoldersPlaceHolderText} aria-label="Search" />
{this.state.searchFolderText && <div onClick={this.clearSearch.bind(this)} className="clear-button">×</div>}
<div className="search-icon" dangerouslySetInnerHTML={{ __html: searchIcon }} />
</div>
Expand All @@ -100,5 +100,8 @@ FolderPicker.propTypes = {
onFolderClick: PropTypes.func.isRequired,
getChildren: PropTypes.func.isRequired,
selectedFolder: PropTypes.object.isRequired,
searchFolder: PropTypes.func.isRequired
searchFolder: PropTypes.func.isRequired,

notSpecifiedText: PropTypes.string,
searchFoldersPlaceHolderText: PropTypes.string
};
130 changes: 95 additions & 35 deletions FileUpload/src/FileUpload.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,11 @@ import UploadBar from "./UploadBar";
import "./style.less";

const Buttons = [
{ name: "browse", text: "Browse Filesystem" },
{ name: "upload", text: "Upload a File" },
{ name: "link", text: "Enter URL Link" }
{ name: "browse" },
{ name: "upload" },
{ name: "link" }
];

const DefaultText = "Drag and Drop a File or Select an Option";
const onDragOverText = "Drag and Drop a File";

export default class FileUpload extends Component {
constructor(props) {
super(props);
Expand All @@ -23,7 +20,7 @@ export default class FileUpload extends Component {
let selectedFolder = null;

this.state = {
text: DefaultText,
text: props.defaultText,
showLinkInput: false,
showFolderPicker: false,

Expand Down Expand Up @@ -126,7 +123,7 @@ export default class FileUpload extends Component {
}

onMouseLeave() {
this.setState({ text: DefaultText });
this.setState({ text: this.props.defaultText });
}

onFileSelect(selectedFolder, selectedFile) {
Expand All @@ -147,7 +144,7 @@ export default class FileUpload extends Component {
}

handleError(error) {
const errorText = error && typeof error === "string" ? error : "Upload Failed";
const errorText = error && typeof error === "string" ? error : this.props.uploadFailedText;
this.setState({ uploading: true, errorText }, () => {
setTimeout(() => {
this.setState({ uploading: false, errorText: "" });
Expand All @@ -165,7 +162,7 @@ export default class FileUpload extends Component {
let format = file.type;
const isAcceptFormat = fileFormats.some(f => format === f);
if (!isAcceptFormat) {
return this.handleError("wrong format");
return this.handleError(this.props.wrongFormatText);
}
}

Expand Down Expand Up @@ -288,11 +285,11 @@ export default class FileUpload extends Component {
}

onDragOver() {
this.setState({ draggedOver: true, text: onDragOverText });
this.setState({ draggedOver: true, text: this.props.onDragOverText });
}

onDragLeave() {
this.setState({ draggedOver: false, text: DefaultText });
this.setState({ draggedOver: false, text: this.props.defaultText });
}

onDrop(e) {
Expand All @@ -316,10 +313,12 @@ export default class FileUpload extends Component {
}

render() {
const {props, state} = this;

let buttons = Buttons;
if (this.props.buttons) {
if (props.buttons) {
buttons = buttons.filter((button) => {
return this.props.buttons.some((propButton) => {
return props.buttons.some((propButton) => {
return button.name === propButton;
});
});
Expand All @@ -329,10 +328,10 @@ export default class FileUpload extends Component {
const svg = require(`!raw!./img/${button.name}.svg`);
const isUpload = button.name === "upload";
/* eslint-disable react/no-danger */
const accept = this.props.fileFormats.join(",");
const accept = props.fileFormats.join(",");
return <div
className={"button " + button.name}
onMouseEnter={this.onMouseEnter.bind(this, button.text) }
onMouseEnter={this.onMouseEnter.bind(this, props[button.name + "ButtonText"]) }
onMouseLeave={this.onMouseLeave.bind(this) }
onClick={this.onButtonClick.bind(this, button.name) }
key={button.name}>
Expand All @@ -343,9 +342,9 @@ export default class FileUpload extends Component {
});

const buttonsStyle = { width: buttons.length * 67 };
const src = this.state.fileUrl || "";
const showImage = src && this.state.fileExist && !this.state.showLinkInput && !this.state.showFolderPicker;
const className = "overlay" + (src && this.state.fileExist ? " has-image" : "") + (this.state.draggedOver ? " hover" : "");
const src = state.fileUrl || "";
const showImage = src && state.fileExist && !state.showLinkInput && !state.showFolderPicker;
const className = "overlay" + (src && state.fileExist ? " has-image" : "") + (state.draggedOver ? " hover" : "");

return <div className="dnn-file-upload">
<div>
Expand All @@ -359,29 +358,47 @@ export default class FileUpload extends Component {
<div className="buttons" style={buttonsStyle}>
{buttons}
</div>
<span>{this.state.text}</span>
<span>{state.text}</span>
</div>

{this.state.showLinkInput && <LinkInput
linkPath={this.state.linkPath}
{state.showLinkInput && <LinkInput
linkInputTitleText = {props.linkInputTitleText}
linkInputPlaceholderText = {props.linkInputPlaceholderText}
linkInputActionText = {props.linkInputActionText}
linkPath={state.linkPath}
onSave={this.uploadFromLink.bind(this) }
onCancel={this.hideFields.bind(this) }/>}
{this.state.showFolderPicker && <Browse
utils={this.props.utils}
fileFormats={this.props.fileFormats}
selectedFolder={this.state.selectedFolder}
selectedFile={this.state.selectedFile}
onCancel={this.hideFields.bind(this) }
/>}
{state.showFolderPicker && <Browse
browseActionText = {props.browseActionText}
fileText = {props.fileText}
folderText = {props.folderText}
notSpecifiedText = {props.notSpecifiedText}
searchFoldersPlaceHolderText = {props.searchFoldersPlaceHolderText}
searchFilesPlaceHolderText = {props.searchFilesPlaceHolderText}
utils={props.utils}
fileFormats={props.fileFormats}
selectedFolder={state.selectedFolder}
selectedFile={state.selectedFile}
onSave={this.onFileSelect.bind(this) }
onCancel={this.hideFields.bind(this) } />}
onCancel={this.hideFields.bind(this) }
/>}
{showImage && <div className="image-container">
<img
style={this.getImageStyle() }
onError={this.handleImageError.bind(this) }
src={src} alt="Image"/></div>}
{this.state.selectedFile &&
<div className="dnn-file-upload-file-name"><span>{this.state.selectedFile.value}</span></div>}
src={src} alt={props.imageText}/></div>}
{state.selectedFile &&
<div className="dnn-file-upload-file-name"><span>{state.selectedFile.value}</span></div>}
</div>
{this.state.uploading && <UploadBar uploadComplete={this.state.uploadComplete} errorText={this.state.errorText} fileName={this.state.fileName}/>}
{state.uploading && <UploadBar
uploadCompleteText = {props.uploadCompleteText}
uploadingText = {props.uploadingText}
uploadDefaultText = {props.uploadDefaultText}
uploadComplete={state.uploadComplete}
errorText={state.errorText}
fileName={state.fileName}
/>}
</div>;
}
}
Expand All @@ -398,13 +415,56 @@ FileUpload.propTypes = {
buttons: PropTypes.array,
folderName: PropTypes.string,
portalId: PropTypes.number,
fileFormats: PropTypes.array
fileFormats: PropTypes.array,

//-- Localization Props---
browseButtonText: PropTypes.string,
uploadButtonText: PropTypes.string,
linkButtonText: PropTypes.string,
defaultText: PropTypes.string,
onDragOverText: PropTypes.string,
uploadFailedText: PropTypes.string,
wrongFormatText: PropTypes.string,
imageText: PropTypes.string,
linkInputTitleText: PropTypes.string,
linkInputPlaceholderText: PropTypes.string,
linkInputActionText: PropTypes.string,
uploadCompleteText: PropTypes.string,
uploadingText: PropTypes.string,
uploadDefaultText: PropTypes.string,
browseActionText: PropTypes.string,
notSpecifiedText: PropTypes.string,
searchFilesPlaceHolderText: PropTypes.string,
searchFoldersPlaceHolderText: PropTypes.string,
fileText: PropTypes.string,
folderText: PropTypes.string
};

FileUpload.defaultProps = {
cropImagePreview: false,
portalId: -1,
fileFormats: []
fileFormats: [],

browseButtonText: "Browse Filesystem",
uploadButtonText: "Upload a File",
linkButtonText: "Enter URL Link",
defaultText: "Drag and Drop a File or Select an Option",
onDragOverText: "Drag and Drop a File",
uploadFailedText: "Upload Failed",
wrongFormatText: "wrong format",
imageText: "Image",
linkInputTitleText: "URL Link",
linkInputPlaceholderText: "http://example.com/imagename.jpg",
linkInputActionText: "Press {save|[ENTER]} to save, or {cancel|[ESC]} to cancel",
uploadCompleteText: "Upload Complete",
uploadingText: "Uploading...",
uploadDefaultText: "myImage.jpg",
browseActionText: "Press {save|[ENTER]} to save, or {cancel|[ESC]} to cancel",
notSpecifiedText: "<None Specified>",
searchFilesPlaceHolderText: "Search Files...",
searchFoldersPlaceHolderText: "Search Folders...",
fileText: "File",
folderText: "Folder"
};


Loading

0 comments on commit 1149169

Please sign in to comment.