- 0}>
-
-
-
-
,
)));
}
}
-export default function ToggleableLink(props) {
+export const ExistingThing = createSelectable(
+ EventEmitter(
+ HOCDropTargetForFsFile(
+ HOVDropTargetForVirtualFile(
+ HOVDropSourceForVirtualFile(
+ ExistingThingComponent,
+ ),
+ ),
+ ),
+ ),
+);
+
+export default function ToggleableLink(props) {
const { disabled, ...rest } = props;
- return disabled ? props.children : {props.children};
+ return disabled ?
+ props.children :
+ {props.children};
}
class Filename extends React.Component {
- constructor(props){
+ constructor(props) {
super(props);
this.state = {
- filename: props.filename
+ filename: props.filename,
};
}
-
- onInputFocus(e){
+ onInputFocus(e) {
let value = e.target.value.split(".");
- if(value.length > 1){
+ if (value.length > 1) {
value.pop();
}
value = value.join(".");
e.target.setSelectionRange(0, value.length);
}
- onRename(e){
+ onRename(e) {
e.preventDefault();
e.stopPropagation();
this.props.onRename(this.state.filename);
}
- onCancel(){
- this.setState({filename: this.props.filename});
+ onCancel() {
+ this.setState({ filename: this.props.filename });
this.props.onRenameCancel();
}
- preventSelect(e){
+ preventSelect(e) {
e.preventDefault();
}
- render(){
- const [fileWithoutExtension, fileExtension] = function(filename){
+ render() {
+ const [fileWithoutExtension, fileExtension] = function(filename) {
const fname = filename.split(".");
- if(fname.length < 2){
+ if (fname.length < 2) {
return [filename, ""];
}
const ext = fname.pop();
- if(window.CONFIG.mime[ext] === undefined){
+ if (window.CONFIG.mime[ext] === undefined) {
return [filename, ""];
}
return [fname.join("."), "." + ext];
}(this.state.filename);
+
return (
-
- { t("Create a New Link") }
+{ t("Create a New Link") }
-
- { this.props.type === "file" ? null :
-
-
-
- { t("Uploader") }
-
- }
-
- { t("Viewer") }
-
-
- { t("Editor") }
-
- { t("Existing Links") }
- 5 ? '90px' : 'inherit'}}>
- {
- this.state.existings && this.state.existings.map((link, i) => {
- return (
-
-
-
- { t(link.role) }
-
- {beautifulPath(this.props.path, link.path)}
-
- );
- })
- }
- { t("Restrictions") }
-
-
- { t("Advanced") }
-
- 0}>
+
-
+
+ { t("Advanced") }
+
+
);
}
@@ -269,7 +324,7 @@ export class ShareComponent extends React.Component {
const SuperCheckbox = (props) => {
const onCheckboxTick = (e) => {
- if(props.inputType === undefined){
+ if (props.inputType === undefined) {
return props.onChange(e.target.checked ? true : false);
}
return props.onChange(e.target.checked ? "" : null);
@@ -277,26 +332,23 @@ const SuperCheckbox = (props) => {
const onValueChange = (e) => {
props.onChange(e.target.value);
};
- const _is_expended = function(val){
+ const _is_expended = function(val) {
return val === null || val === undefined || val === false ? false : true;
}(props.value);
return (
+ { this.props.type === "file" ? null :
+
-
+ { t("Uploader") }
+
+ }
+
+ { t("Viewer") }
+
+
+ { t("Editor") }
+
- { t("Advanced") }
-
-
-
-
-
- this.updateState('url', urlify(val))} inputType="text"/>
-
-
+ { t("Existing Links") }
+ 5 ? "90px" : "inherit" }}>
+ {
+ this.state.existings && this.state.existings.map((link, i) => {
+ return (
+
+
+
+ { t(link.role) }
+
+
+ { beautifulPath(this.props.path, link.path) }
+
+
+ );
+ })
+ }
+
-
-
-
+
-
-
- { t("Restrictions") }
+
+
+
+
+ { t("Advanced") }
+
+
+
+
+
+ this.updateState("url", urlify(val))}
+ inputType="text" />
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
);
};
-// SuperCheckbox.propTypes = {
-// label: PropTypes.string.isRequired,
-// onChange: PropTypes.func.isRequired,
-// inputType: PropTypes.string,
-// placeholder: PropTypes.string,
-// value: PropTypes.boolean
-// };
diff --git a/client/pages/filespage/submenu.js b/client/pages/filespage/submenu.js
index ecef855e..e6c1969c 100644
--- a/client/pages/filespage/submenu.js
+++ b/client/pages/filespage/submenu.js
@@ -1,177 +1,228 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import React, { createRef } from "react";
+import PropTypes from "prop-types";
+import ReactCSSTransitionGroup from "react-addons-css-transition-group";
-import { Card, NgIf, Icon, EventEmitter, Dropdown, DropdownButton, DropdownList, DropdownItem, Container } from '../../components/';
-import { pathBuilder, debounce, prompt } from '../../helpers/';
-import { t } from '../../locales/';
+import {
+ NgIf, Icon, EventEmitter, Dropdown, DropdownButton, DropdownList,
+ DropdownItem, Container,
+} from "../../components/";
+import { debounce, prompt } from "../../helpers/";
+import { t } from "../../locales/";
import "./submenu.scss";
-@EventEmitter
-export class Submenu extends React.Component {
- constructor(props){
+class SubmenuComponent extends React.Component {
+ constructor(props) {
super(props);
this.state = {
search_input_visible: false,
- search_keyword: ""
+ search_keyword: "",
};
+ this.$input = createRef();
this.onSearchChange_Backpressure = debounce(this.onSearchChange, 400);
this._onKeyPress = (e) => {
- if(e.keyCode === 27){ // escape key
+ if (e.keyCode === 27) { // escape key
this.setState({
search_keyword: "",
- search_input_visible: false
+ search_input_visible: false,
});
- if(this.refs.$input) this.refs.$input.blur();
+ if (this.$input.current) this.$input.current.blur();
this.props.onSearch(null);
- }else if(e.ctrlKey && e.keyCode === 70){ // 'Ctrl F' shortcut to search
+ } else if (e.ctrlKey && e.keyCode === 70) { // 'Ctrl F' shortcut to search
e.preventDefault();
this.setState({
- search_input_visible: true
+ search_input_visible: true,
});
- if(this.refs.$input) this.refs.$input.focus();
- }else if(e.altKey && (e.keyCode === 49 || e.keyCode === 50)){ // 'alt 1' 'alt 2' shortcut
+ if (this.$input.current) this.$input.current.focus();
+ } else if (e.altKey && (e.keyCode === 49 || e.keyCode === 50)) { // 'alt 1' 'alt 2' shortcut
e.preventDefault();
this.onViewChange();
}
};
}
- componentDidMount(){
+ componentDidMount() {
window.addEventListener("keydown", this._onKeyPress);
}
- componentWillUnmount(){
+ componentWillUnmount() {
window.removeEventListener("keydown", this._onKeyPress);
}
- onNew(type){
+ onNew(type) {
this.props.emit("new::"+type);
}
- onDelete(arrayOfPaths){
+ onDelete(arrayOfPaths) {
prompt.now(
t("Confirm by typing") + " \"remove\"",
(answer) => {
- if(answer !== "remove"){
+ if (answer !== "remove") {
return Promise.resolve();
}
this.props.emit("file.delete.multiple", arrayOfPaths);
return Promise.resolve();
},
- () => { /* click on cancel */ }
+ () => {/* click on cancel */},
);
}
- onDownload(arrayOfPaths){
+ onDownload(arrayOfPaths) {
this.props.emit("file.download.multiple", arrayOfPaths);
}
- onViewChange(){
+ onViewChange() {
requestAnimationFrame(() => this.props.onViewUpdate());
}
- onSortChange(e){
+ onSortChange(e) {
this.props.onSortUpdate(e);
}
- onSearchChange(search, e){
+ onSearchChange(search, e) {
this.props.onSearch(search.trim());
}
- onSearchToggle(){
- if(new Date () - this.search_last_toggle < 200){
+ onSearchToggle() {
+ if (new Date() - this.search_last_toggle < 200) {
// avoid bluring event cancelling out the toogle
return;
}
- this.refs.$input.focus();
- this.setState({search_input_visible: !this.state.search_input_visible}, () => {
- if(this.state.search_input_visible == false){
+ if (this.$input.current) this.$input.current.focus();
+ this.setState({
+ search_input_visible: !this.state.search_input_visible,
+ }, () => {
+ if (this.state.search_input_visible == false) {
this.props.onSearch(null);
- this.setState({search_keyword: ""});
+ this.setState({ search_keyword: "" });
}
});
}
- closeIfEmpty(){
- if(this.state.search_keyword.trim().length > 0) return;
+ closeIfEmpty() {
+ if (this.state.search_keyword.trim().length > 0) return;
this.search_last_toggle = new Date();
this.setState({
search_input_visible: false,
- search_keyword: ""
+ search_keyword: "",
});
this.props.onSearch(null);
}
- onSearchKeypress(s, backpressure = true, e){
- if(backpressure){
+ onSearchKeypress(s, backpressure = true, e) {
+ if (backpressure) {
this.onSearchChange_Backpressure(s);
- }else{
+ } else {
this.onSearchChange(s);
}
- this.setState({search_keyword: s});
+ this.setState({ search_keyword: s });
- if(e && e.preventDefault){
+ if (e && e.preventDefault) {
e.preventDefault();
}
}
- render(){
+ render() {
return (
-
-
);
};
}
-Submenu.propTypes = {
+SubmenuComponent.propTypes = {
accessRight: PropTypes.object,
onSortUpdate: PropTypes.func.isRequired,
- sort: PropTypes.string.isRequired
+ sort: PropTypes.string.isRequired,
};
+
+export const Submenu = EventEmitter(SubmenuComponent);
diff --git a/client/pages/filespage/thing-existing.js b/client/pages/filespage/thing-existing.js
index 6dfa85f7..0af30a40 100644
--- a/client/pages/filespage/thing-existing.js
+++ b/client/pages/filespage/thing-existing.js
@@ -1,247 +1,277 @@
-import React from 'react';
-import path from 'path';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-import { DragSource, DropTarget } from 'react-dnd';
-import { createSelectable } from 'react-selectable';
+import React, { createRef } from "react";
+import path from "path";
+import { Link } from "react-router-dom";
+import { DragSource, DropTarget } from "react-dnd";
+import { createSelectable } from "react-selectable";
-import './thing.scss';
-import { Card, NgIf, Icon, EventEmitter, Button, img_placeholder } from '../../components/';
-import { pathBuilder, basename, filetype, prompt, alert, leftPad, getMimeType, debounce, memory } from '../../helpers/';
-import { Files } from '../../model/';
-import { ShareComponent } from './share';
-import { t } from '../../locales/';
+import "./thing.scss";
+import { Card, NgIf, Icon, EventEmitter, img_placeholder } from "../../components/";
+import { pathBuilder, basename, filetype, prompt, alert, leftPad, getMimeType, debounce, memory } from "../../helpers/";
+import { Files } from "../../model/";
+import { ShareComponent } from "./share";
+import { t } from "../../locales/";
-const fileSource = {
- beginDrag(props, monitor, component) {
- return {
- path: props.path,
- name: props.file.name,
- type: props.file.type
- };
- },
- canDrag(props, monitor){
- if (props.metadata.can_move === false){
- return false;
- }
- if(props.file.icon === "loading") return false;
- else if(props.selected === false && props.currentSelection.length > 0) return false;
- return true;
- },
- endDrag(props, monitor, component){
- if(monitor.didDrop() && component.state.icon !== 'loading'){
- let result = monitor.getDropResult();
- if(result.action === 'rename'){
- props.emit.apply(component, ['file.rename'].concat(result.args));
- }else if(result.action === "rename.multiple"){
- props.emit.call(component, "file.rename.multiple", result.args);
- }else{
- throw 'unknown action';
+
+const canDrop = (props, monitor) => {
+ const file = monitor.getItem();
+ if (props.file.type !== "directory") return false;
+ else if (file.name === props.file.name) return false;
+ else if (props.file.icon === "loading") return false;
+ else if (props.selected === true) return false;
+ return true;
+};
+
+const HOCDropTargetForFsFile = (Cmp) => {
+ const nativeFileTarget = {
+ canDrop,
+ drop(props, monitor) {
+ const path = pathBuilder(props.path, props.file.name, "directory");
+ props.emit(
+ "file.upload",
+ path,
+ monitor.getItem(),
+ );
+ },
+ };
+
+ return DropTarget(
+ "__NATIVE_FILE__",
+ nativeFileTarget,
+ (connect, monitor) => ({
+ connectDropNativeFile: connect.dropTarget(),
+ nativeFileIsOver: monitor.isOver(),
+ canDropNativeFile: monitor.canDrop(),
+ }),
+ )(Cmp);
+};
+
+const HOVDropTargetForVirtualFile = (Cmp) => {
+ const fileTarget = {
+ canDrop,
+ drop(props, monitor, component) {
+ const src = monitor.getItem();
+ const dest = props.file;
+
+ if (props.currentSelection.length === 0) {
+ const from = pathBuilder(props.path, src.name, src.type);
+ const to = pathBuilder(props.path, "./"+dest.name+"/"+src.name, src.type);
+ return {
+ action: "rename",
+ args: [from, to, src.type],
+ ctx: "existingfile",
+ };
+ } else {
+ return {
+ action: "rename.multiple",
+ args: props.currentSelection.map((selectionPath) => {
+ const from = selectionPath;
+ const to = pathBuilder(
+ props.path,
+ "./"+dest.name+"/"+basename(selectionPath),
+ filetype(selectionPath),
+ );
+ return [from, to];
+ }),
+ };
}
- }
- }
+ },
+ };
+ return DropTarget(
+ "file",
+ fileTarget,
+ (connect, monitor) => ({
+ connectDropFile: connect.dropTarget(),
+ fileIsOver: monitor.isOver(),
+ canDropFile: monitor.canDrop(),
+ }),
+ )(Cmp);
};
-const fileTarget = {
- canDrop(props, monitor){
- let file = monitor.getItem();
- if(props.file.type !== "directory") return false;
- else if(file.name === props.file.name) return false;
- else if(props.file.icon === "loading") return false;
- else if(props.selected === true) return false;
- return true;
- },
- drop(props, monitor, component){
- let src = monitor.getItem();
- let dest = props.file;
+const HOVDropSourceForVirtualFile = (Cmp) => {
+ const fileSource = {
+ beginDrag(props, monitor, component) {
+ return {
+ path: props.path,
+ name: props.file.name,
+ type: props.file.type,
+ };
+ },
+ canDrag(props, monitor) {
+ if (props.metadata.can_move === false) {
+ return false;
+ }
+ if (props.file.icon === "loading") return false;
+ else if (props.selected === false && props.currentSelection.length > 0) return false;
+ return true;
+ },
+ endDrag(props, monitor, component) {
+ if (monitor.didDrop() && component.state.icon !== "loading") {
+ const result = monitor.getDropResult();
+ if (result.action === "rename") {
+ props.emit.apply(component, ["file.rename"].concat(result.args));
+ } else if (result.action === "rename.multiple") {
+ props.emit.call(component, "file.rename.multiple", result.args);
+ } else {
+ throw new Error("unknown action");
+ }
+ }
+ },
+ };
- if(props.currentSelection.length === 0){
- const from = pathBuilder(props.path, src.name, src.type);
- const to = pathBuilder(props.path, './'+dest.name+'/'+src.name, src.type);
- return {action: 'rename', args: [from, to, src.type], ctx: 'existingfile'};
- } else {
- return {action: 'rename.multiple', args: props.currentSelection.map((selectionPath) => {
- const from = selectionPath;
- const to = pathBuilder(
- props.path,
- "./"+dest.name+"/"+basename(selectionPath),
- filetype(selectionPath)
- );
- return [ from, to ];
- })};
- }
- }
+ return DragSource(
+ "file",
+ fileSource,
+ (connect, monitor) => ({
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging(),
+ }),
+ )(Cmp);
};
-const nativeFileTarget = {
- canDrop: fileTarget.canDrop,
- drop(props, monitor){
- let path = pathBuilder(props.path, props.file.name, 'directory');
- props.emit('file.upload', path, monitor.getItem());
- }
-};
-
-
-@createSelectable
-@EventEmitter
-@DropTarget('__NATIVE_FILE__', nativeFileTarget, (connect, monitor) => ({
- connectDropNativeFile: connect.dropTarget(),
- nativeFileIsOver: monitor.isOver(),
- canDropNativeFile: monitor.canDrop()
-}))
-@DropTarget('file', fileTarget, (connect, monitor) => ({
- connectDropFile: connect.dropTarget(),
- fileIsOver: monitor.isOver(),
- canDropFile: monitor.canDrop()
-}))
-@DragSource('file', fileSource, (connect, monitor) => ({
- connectDragSource: connect.dragSource(),
- isDragging: monitor.isDragging()
-}))
-export class ExistingThing extends React.Component {
- constructor(props){
+class ExistingThingComponent extends React.Component {
+ constructor(props) {
super(props);
this.state = {
hover: null,
filename: props.file.name,
is_renaming: false,
- preview: null
+ preview: null,
};
}
- shouldComponentUpdate(nextProps, nextState){
- if(nextState.hover !== this.state.hover ||
- nextState.is_renaming !== this.state.is_renaming ||
- nextProps.view !== this.props.view ||
- this.state.preview !== nextState.preview ||
- this.props.fileIsOver !== nextProps.fileIsOver ||
- this.props.canDropFile !== nextProps.canDropFile ||
- this.props.nativeFileIsOver !== nextProps.nativeFileIsOver ||
- this.props.canDropNativeFile !== nextProps.canDropNativeFile ||
- this.props.selected !== nextProps.selected
- ){
- return true;
- }
+ shouldComponentUpdate(nextProps, nextState) {
+ if (nextState.hover !== this.state.hover ||
+ nextState.is_renaming !== this.state.is_renaming ||
+ nextProps.view !== this.props.view ||
+ this.state.preview !== nextState.preview ||
+ this.props.fileIsOver !== nextProps.fileIsOver ||
+ this.props.canDropFile !== nextProps.canDropFile ||
+ this.props.nativeFileIsOver !== nextProps.nativeFileIsOver ||
+ this.props.canDropNativeFile !== nextProps.canDropNativeFile ||
+ this.props.selected !== nextProps.selected) return true;
return false;
}
- componentDidMount(){
+ componentDidMount() {
this.updateThumbnail(this.props);
}
- componentWillReceiveProps(props){
- if(props.view !== this.props.view){
+ UNSAFE_componentWillReceiveProps(props) {
+ if (props.view !== this.props.view) {
this.updateThumbnail(props);
}
}
- updateThumbnail(props){
- if(props.view === "grid" && props.icon !== "loading"){
+ updateThumbnail(props) {
+ if (props.view === "grid" && props.icon !== "loading") {
const type = getMimeType(props.file.path).split("/")[0];
- if(type === "image"){
+ if (type === "image") {
Files.url(props.file.path).then((url) => {
- this.setState({preview: url+"&thumbnail=true"});
+ this.setState({ preview: url+"&thumbnail=true" });
});
}
}
}
- onRename(newFilename){
- if(typeof newFilename === "string"){
+ onRename(newFilename) {
+ if (typeof newFilename === "string") {
this.props.emit(
- 'file.rename',
+ "file.rename",
pathBuilder(this.props.path, this.props.file.name, this.props.file.type),
pathBuilder(this.props.path, newFilename, this.props.file.type),
- this.props.file.type
+ this.props.file.type,
);
}
- this.setState({is_renaming: false});
+ this.setState({ is_renaming: false });
}
- onRenameRequest(force){
+ onRenameRequest(force) {
let new_state = !this.state.is_renaming;
- if(typeof force === "boolean"){
+ if (typeof force === "boolean") {
new_state = force;
}
- this.setState({is_renaming: new_state});
+ this.setState({ is_renaming: new_state });
}
- onDeleteRequest(filename){
+ onDeleteRequest(filename) {
prompt.now(
t("Confirm by typing") +" \""+this._confirm_delete_text()+"\"",
(answer) => { // click on ok
- if(answer === this._confirm_delete_text()){
- this.setState({icon: 'loading'});
+ if (answer === this._confirm_delete_text()) {
+ this.setState({ icon: "loading" });
this.props.emit(
- 'file.delete',
+ "file.delete",
pathBuilder(this.props.path, this.props.file.name, this.props.file.type),
- this.props.file.type
+ this.props.file.type,
);
return Promise.resolve();
- }else{
+ } else {
return Promise.reject(t("Doesn't match"));
}
},
- () => { /* click on cancel */ });
+ () => {/* click on cancel */},
+ );
}
- onDeleteConfirm(answer){
- if(answer === this._confirm_delete_text()){
- this.setState({icon: 'loading', delete_request: false});
+ onDeleteConfirm(answer) {
+ if (answer === this._confirm_delete_text()) {
+ this.setState({ icon: "loading", delete_request: false });
this.props.emit(
- 'file.delete',
+ "file.delete",
pathBuilder(this.props.path, this.props.file.name, this.props.file.type),
- this.props.file.type
+ this.props.file.type,
);
- }else{
- this.setState({delete_error: t("Doesn't match")});
+ } else {
+ this.setState({ delete_error: t("Doesn't match") });
}
}
- onDeleteCancel(){
- this.setState({delete_request: false});
+ onDeleteCancel() {
+ this.setState({ delete_request: false });
}
- onShareRequest(filename){
+ onShareRequest(filename) {
alert.now(
-
- { window.innerWidth < 410 && t("New File").length > 10 ? t("New File", null, "NEW_FILE::SHORT") : t("New File") }
-
-
- { window.innerWidth < 410 && t("New Directory").length > 10 ? t("New Directory", null, "NEW_DIRECTORY::SHORT") : t("New Directory") }
-
- 0} type="inline" onMouseDown={this.onDownload.bind(this, this.props.selected)}>
-
- { t("Download") }
-
-
- 0 && this.props.accessRight.can_delete !== false} type="inline" onMouseDown={this.onDelete.bind(this, this.props.selected)}>
-
- { t("Remove") }
-
-
+
+
+
+
+
+
+
+ { t("Sort By Type") }
+
+
+ { t("Sort By Date") }
+
+
+ { t("Sort By Name") }
+
+
+
+
+
+
+ { window.innerWidth < 410 && t("New File").length > 10 ? t("New File", null, "NEW_FILE::SHORT") : t("New File") }
+
+
+ { window.innerWidth < 410 && t("New Directory").length > 10 ? t("New Directory", null, "NEW_DIRECTORY::SHORT") : t("New Directory") }
+
+ 0}
+ type="inline"
+ onMouseDown={this.onDownload.bind(this, this.props.selected)}>
+
+ { t("Download") }
+
+
+ 0 && this.props.accessRight.can_delete !== false}
+ type="inline"
+ onMouseDown={this.onDelete.bind(this, this.props.selected)}>
+
+ { t("Remove") }
+
+
-
-
-
-
- { t("Sort By Type") }
- { t("Sort By Date") }
- { t("Sort By Name") }
-
-
-
-
-
-
-
+
+
+
+
+
-
-
-
+
+
-
-
+ onRenameCancel={this.onRenameRequest.bind(this, false)} />
+
-
-
-
-
-
-
+
+
+
+
+
+
);
-}
+};
const DateTime = (props) => {
- function displayTime(timestamp){
- if(timestamp){
- let t = new Date(timestamp);
+ function displayTime(timestamp) {
+ if (timestamp) {
+ const t = new Date(timestamp);
return t.getFullYear() + "-" + leftPad((t.getMonth() + 1).toString(), 2) + "-" + leftPad(t.getDate().toString(), 2);
- }else{
- return '';
+ } else {
+ return "";
}
}
- if(props.show === false){
+ if (props.show === false) {
return null;
}
return (
- {displayTime(props.timestamp)}
+ {displayTime(props.timestamp)}
);
};
const FileSize = (props) => {
- function displaySize(bytes){
- if(bytes === -1) return "";
- if(Number.isNaN(bytes) || bytes === undefined){
+ function displaySize(bytes) {
+ if (bytes === -1) return "";
+ if (Number.isNaN(bytes) || bytes === undefined) {
return "";
- }else if(bytes < 1024){
- return "("+bytes+'B'+")";
- }else if(bytes < 1048576){
- return "("+Math.round(bytes/1024*10)/10+'KB'+")";
- }else if(bytes < 1073741824){
- return "("+Math.round(bytes/(1024*1024)*10)/10+'MB'+")";
- }else if(bytes < 1099511627776){
- return "("+Math.round(bytes/(1024*1024*1024)*10)/10+'GB'+")";
- }else{
- return "("+Math.round(bytes/(1024*1024*1024*1024))+'TB'+")";
+ } else if (bytes < 1024) {
+ return "("+bytes+"B)";
+ } else if (bytes < 1048576) {
+ return "("+Math.round(bytes/1024*10)/10+"KB)";
+ } else if (bytes < 1073741824) {
+ return "("+Math.round(bytes/(1024*1024)*10)/10+"MB)";
+ } else if (bytes < 1099511627776) {
+ return "("+Math.round(bytes/(1024*1024*1024)*10)/10+"GB)";
+ } else {
+ return "("+Math.round(bytes/(1024*1024*1024*1024))+"TB)";
}
}
return (
-
-
-
-
-
+
+
+
+
);
};
}
-NewThing.propTypes = {
+NewThingComponent.propTypes = {
accessRight: PropTypes.object.isRequired,
- sort: PropTypes.string.isRequired
+ sort: PropTypes.string.isRequired,
};
+
+export const NewThing = EventEmitter(EventReceiver(NewThingComponent));
diff --git a/client/pages/homepage.js b/client/pages/homepage.js
index 3260f0c7..b248eb47 100644
--- a/client/pages/homepage.js
+++ b/client/pages/homepage.js
@@ -10,7 +10,7 @@ export function HomePageComponent({ error }) {
useEffect(() => {
const p = new URLSearchParams(location.search);
- if(p.get("error")) {
+ if (p.get("error")) {
error(new Error(t(p.get("error"))));
return;
}
diff --git a/client/pages/sharepage.js b/client/pages/sharepage.js
index e909505f..d420e651 100644
--- a/client/pages/sharepage.js
+++ b/client/pages/sharepage.js
@@ -1,16 +1,15 @@
-import React from 'react';
-import { Redirect } from 'react-router';
+import React, { createRef } from "react";
+import { Redirect } from "react-router";
-import { Share } from '../model/';
-import { notify, basename, filetype, findParams } from '../helpers/';
-import { Loader, Input, Button, Container, ErrorPage, Icon, NgIf } from '../components/';
-import { t } from '../locales/';
-import './error.scss';
-import './sharepage.scss';
+import { Share } from "../model/";
+import { notify, basename, filetype, findParams } from "../helpers/";
+import { Loader, Input, Button, Container, ErrorPage, Icon } from "../components/";
+import { t } from "../locales/";
+import "./error.scss";
+import "./sharepage.scss";
-@ErrorPage
-export class SharePage extends React.Component {
- constructor(props){
+export class SharePageComponent extends React.Component {
+ constructor(props) {
super(props);
this.state = {
path: null,
@@ -19,40 +18,41 @@ export class SharePage extends React.Component {
loading: false,
isUploader: false,
};
+ this.$input = createRef();
}
- componentDidMount(){
+ componentDidMount() {
this._proofQuery(this.props.match.params.id).then(() => {
- if(this.refs.$input) {
- this.refs.$input.ref.focus();
+ if (this.$input.current) {
+ this.$input.current.ref.focus();
}
});
}
- submitProof(e, type, value){
+ submitProof(e, type, value) {
e.preventDefault();
- this.setState({loading: true});
- this._proofQuery(this.props.match.params.id, {type: type, value:value});
+ this.setState({ loading: true });
+ this._proofQuery(this.props.match.params.id, { type: type, value: value });
}
- _proofQuery(id, data = {}){
- this.setState({loading: true});
+ _proofQuery(id, data = {}) {
+ this.setState({ loading: true });
return Share.proof(id, data).then((res) => {
- if(this.refs.$input) {
- this.refs.$input.ref.value = "";
+ if (this.$input.current) {
+ this.$input.current.ref.value = "";
}
- let st = {
+ const st = {
key: res.key,
path: res.path || null,
share: res.id,
loading: false,
isUploader: res.can_read === false && res.can_write === false && res.can_upload === true,
};
- if(res.message){
+ if (res.message) {
notify.send(res.message, "info");
- }else if(res.error){
+ } else if (res.error) {
st.error = res.error;
- window.setTimeout(() => this.setState({error: null}), 500);
+ window.setTimeout(() => this.setState({ error: null }), 500);
}
return new Promise((done) => {
this.setState(st, () => done());
@@ -63,22 +63,22 @@ export class SharePage extends React.Component {
render() {
const marginTop = () => {
return {
- marginTop: parseInt(window.innerHeight / 3)+'px'
+ marginTop: `${parseInt(window.innerHeight / 3)}px`,
};
};
- let className = this.state.error ? "error rand-"+Math.random().toString() : "";
+ const className = this.state.error ? `error rand-${Math.random().toString()}` : "";
- if(this.state.path !== null){
- if(!!findParams("next")){
+ if (this.state.path !== null) {
+ if (!!findParams("next")) {
const url = findParams("next");
- if(url[0] === "/"){
+ if (url[0] === "/") {
requestAnimationFrame(() => {
window.location.pathname = url;
});
return (
-
-
-
-
-
+
+
+
+
+
-
);
}
@@ -92,57 +92,65 @@ export class SharePage extends React.Component {
-
);
- } else if(this.state.key === "code"){
+ } else if (this.state.key === "code") {
return (
-
);
}
}
+
+export const SharePage = ErrorPage(SharePageComponent);
diff --git a/client/pages/viewerpage.js b/client/pages/viewerpage.js
index da7b495c..b06c7781 100644
--- a/client/pages/viewerpage.js
+++ b/client/pages/viewerpage.js
@@ -1,194 +1,213 @@
-import React from 'react';
-import Path from 'path';
+import React from "react";
+import Path from "path";
-import './viewerpage.scss';
-import './error.scss';
-import { Files } from '../model/';
-import { BreadCrumb, Bundle, NgIf, Loader, Container, EventReceiver, EventEmitter, LoggedInOnly , ErrorPage } from '../components/';
-import { debounce, opener, notify } from '../helpers/';
-import { FileDownloader, ImageViewer, PDFViewer, FormViewer } from './viewerpage/';
+import "./viewerpage.scss";
+import "./error.scss";
+import { Files } from "../model/";
+import {
+ BreadCrumb, Bundle, NgIf, Loader, EventReceiver, LoggedInOnly, ErrorPage,
+} from "../components/";
+import { opener, notify } from "../helpers/";
+import { FileDownloader, ImageViewer, PDFViewer, FormViewer } from "./viewerpage/";
const VideoPlayer = (props) => (
- { t("Oops!") }
-{ t("There is nothing in here") }
+{ t("Oops!") }
+{ t("There is nothing in here") }
-
);
}
}
+
+export const ViewerPage = ErrorPage(LoggedInOnly(EventReceiver(ViewerPageComponent)));
diff --git a/client/pages/viewerpage/editor.js b/client/pages/viewerpage/editor.js
index 25a82a85..66d748a8 100644
--- a/client/pages/viewerpage/editor.js
+++ b/client/pages/viewerpage/editor.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-invalid-this */
import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";
diff --git a/client/pages/viewerpage/editor/orgmode.js b/client/pages/viewerpage/editor/orgmode.js
index dd02c503..e5d818fd 100644
--- a/client/pages/viewerpage/editor/orgmode.js
+++ b/client/pages/viewerpage/editor/orgmode.js
@@ -1,4 +1,3 @@
-/* eslint-disable max-len, no-invalid-this */
import "codemirror/addon/mode/simple";
import {
org_cycle, org_shifttab, org_metaleft, org_metaright, org_meta_return, org_metaup,
diff --git a/client/pages/viewerpage/ide.js b/client/pages/viewerpage/ide.js
index 4ab16d9f..19c11046 100644
--- a/client/pages/viewerpage/ide.js
+++ b/client/pages/viewerpage/ide.js
@@ -1,21 +1,22 @@
-import React from 'react';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
-import { withRouter } from 'react-router';
-import { Prompt } from "react-router-dom";
-import { Subject } from 'rxjs/Subject';
+/* eslint-disable react/jsx-no-target-blank */
+import React from "react";
+import ReactCSSTransitionGroup from "react-addons-css-transition-group";
+import { withRouter } from "react-router";
+import { Subject } from "rxjs/Subject";
-import { NgIf, Fab, Icon, Dropdown, DropdownButton, DropdownList, DropdownItem } from '../../components/';
-import { confirm, currentShare } from '../../helpers/';
-import { Editor } from './editor';
-import { MenuBar } from './menubar';
-import { OrgTodosViewer, OrgEventsViewer } from './org_viewer';
-import { t } from '../../locales/';
+import {
+ NgIf, Fab, Icon, Dropdown, DropdownButton, DropdownList, DropdownItem,
+} from "../../components/";
+import { confirm, currentShare } from "../../helpers/";
+import { Editor } from "./editor";
+import { MenuBar } from "./menubar";
+import { OrgTodosViewer, OrgEventsViewer } from "./org_viewer";
+import { t } from "../../locales/";
-import './ide.scss';
+import "./ide.scss";
-@withRouter
-export class IDE extends React.Component {
- constructor(props){
+class IDEComponent extends React.Component {
+ constructor(props) {
super(props);
this.state = {
event: new Subject(),
@@ -23,16 +24,16 @@ export class IDE extends React.Component {
appear_agenda: false,
appear_todo: false,
mode: null,
- folding: null
+ folding: null,
};
}
- componentDidMount(){
- this.unblock = this.props.history.block((nextLocation)=>{
- if(this.props.needSaving === false) return true;
+ componentDidMount() {
+ this.unblock = this.props.history.block((nextLocation)=> {
+ if (this.props.needSaving === false) return true;
confirm.now(
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
- { t("Do you want to save the changes ?") }
+
- {(Comp) =>
);
const LargeExif = (props) => (
- {(Comp) =>
);
-@EventReceiver
-@EventEmitter
-export class ImageViewer extends React.Component{
- constructor(props){
+export class ImageViewerComponent extends React.Component {
+ constructor(props) {
super(props);
this.state = {
preload: null,
@@ -35,55 +33,56 @@ export class ImageViewer extends React.Component{
draggable: true,
};
this.shortcut= (e) => {
- if(e.keyCode === 27){ this.setState({show_exif: false}); }
- else if(e.keyCode === 73){ this.setState({show_exif: !this.state.show_exif}); }
+ if (e.keyCode === 27) this.setState({ show_exif: false });
+ else if (e.keyCode === 73) this.setState({ show_exif: !this.state.show_exif });
};
- this.refresh = () => { this.setState({"_": Math.random()}); };
+ this.refresh = () => this.setState({ "_": Math.random() });
+ this.$container = createRef();
}
- componentDidMount(){
+ componentDidMount() {
this.props.subscribe("media::preload", (preload) => {
- this.setState({preload: preload});
+ this.setState({ preload: preload });
});
- document.addEventListener('webkitfullscreenchange', this.refresh);
- document.addEventListener('mozfullscreenchange', this.refresh);
- document.addEventListener('fullscreenchange', this.refresh);
- document.addEventListener('keydown', this.shortcut);
+ document.addEventListener("webkitfullscreenchange", this.refresh);
+ document.addEventListener("mozfullscreenchange", this.refresh);
+ document.addEventListener("fullscreenchange", this.refresh);
+ document.addEventListener("keydown", this.shortcut);
}
- componentWillUnmount(){
+ componentWillUnmount() {
this.props.unsubscribe("media::preload");
- document.removeEventListener('webkitfullscreenchange', this.refresh);
- document.removeEventListener('mozfullscreenchange', this.refresh);
- document.removeEventListener('fullscreenchange', this.refresh);
- document.removeEventListener('keydown', this.shortcut);
+ document.removeEventListener("webkitfullscreenchange", this.refresh);
+ document.removeEventListener("mozfullscreenchange", this.refresh);
+ document.removeEventListener("fullscreenchange", this.refresh);
+ document.removeEventListener("keydown", this.shortcut);
}
- componentWillReceiveProps(props){
- if(props.data !== this.props.data){
- this.setState({is_loaded: false});
+ UNSAFE_componentWillReceiveProps(props) {
+ if (props.data !== this.props.data) {
+ this.setState({ is_loaded: false });
}
}
- toggleExif(){
- if(window.innerWidth < 580){
+ toggleExif() {
+ if (window.innerWidth < 580) {
alert.now(
+ { t("Do you want to save the changes ?") }
,
() =>{
return this.save()
@@ -41,135 +42,167 @@ export class IDE extends React.Component {
() => {
this.props.needSavingUpdate(false)
.then(() => this.props.history.push(nextLocation));
- }
+ },
);
return false;
});
}
- componentWillUnmount(){
+ componentWillUnmount() {
this.unblock();
window.clearInterval(this.state.id);
}
- save(){
- if(this.props.needSaving === false) return;
+ save() {
+ if (this.props.needSaving === false) return;
// the ipad is the new IE, they don't support the file object so we got to fallback :(
- let blob = new window.Blob([this.state.contentToSave], {type : 'text/plain'});
- return this.props.onSave(blob).then(() => this.props.needSavingUpdate(false));
+ return this.props.onSave(
+ new window.Blob(
+ [this.state.contentToSave],
+ { type: "text/plain" },
+ ),
+ ).then(() => this.props.needSavingUpdate(false));
}
- onUpdate(property, refresh, value){
+ onUpdate(property, refresh, value) {
this.setState({ [property]: value }, () => {
- if(refresh){
+ if (refresh) {
this.state.event.next(["refresh"]);
}
- if(this.props.content === this.state.contentToSave){
+ if (this.props.content === this.state.contentToSave) {
this.props.needSavingUpdate(false);
- }else{
+ } else {
this.props.needSavingUpdate(true);
}
});
}
/* Org Viewer specific stuff */
- toggleAgenda(force = null){
- this.setState({appear_agenda: force === null ? !this.state.appear_agenda : !!force});
+ toggleAgenda(force = null) {
+ this.setState({
+ appear_agenda: force === null ? !this.state.appear_agenda : !!force,
+ });
}
- toggleTodo(force = null){
- this.setState({appear_todo: force === null ? !this.state.appear_todo : !!force});
+ toggleTodo(force = null) {
+ this.setState({
+ appear_todo: force === null ? !this.state.appear_todo : !!force,
+ });
}
- onModeChange(){
+ onModeChange() {
this.state.event.next(["fold"]);
}
- goTo(lineNumber){
+ goTo(lineNumber) {
this.state.event.next(["goTo", lineNumber]);
}
- download(){
+ download() {
document.cookie = "download=yes; path=/; max-age=120;";
- this.setState({random: Math.random()});
- this.state.id = window.setInterval(() => {
- if(/download=yes/.test(document.cookie) === false){
- window.clearInterval(this.state.id);
- this.setState({random: Math.random()});
- }
- }, 100);
+ this.setState({
+ random: Math.random(),
+ id: window.setInterval(() => {
+ if (/download=yes/.test(document.cookie) === false) {
+ window.clearInterval(this.state.id);
+ this.setState({ random: Math.random() });
+ }
+ }, 100),
+ });
}
- render(){
- const changeExt = function(filename, ext){
+ render() {
+ const changeExt = function(filename, ext) {
return filename.replace(/\.org$/, "."+ext);
};
return (
-
-
-
-
-
-
-
-
-
-
- this.download()} enable={/download=yes/.test(document.cookie) ? false : true}>
-
-
-
- { t("Save current file") }
- { t("Export as {{VALUE}}", "HTML") }
- { t("Export as {{VALUE}}", "PDF") }
- { t("Export as {{VALUE}}", "Markdown") }
- { t("Export as {{VALUE}}", "TXT") }
- { t("Export as {{VALUE}}", "Latex") }
- { t("Export as {{VALUE}}", "ical") }
- { t("Export as {{VALUE}}", "Open office") }
- { t("Export as {{VALUE}}", "Beamer") }
-
-
+
+
+
+
+
+
+
+
+
+
+ this.download()}
+ enable={/download=yes/.test(document.cookie) ? false : true}>
+
+
+
+ { t("Save current file") }
+ { t("Export as {{VALUE}}", "HTML") }
+ { t("Export as {{VALUE}}", "PDF") }
+ { t("Export as {{VALUE}}", "Markdown") }
+ { t("Export as {{VALUE}}", "TXT") }
+ { t("Export as {{VALUE}}", "Latex") }
+ { t("Export as {{VALUE}}", "ical") }
+ { t("Export as {{VALUE}}", "Open office") }
+ { t("Export as {{VALUE}}", "Beamer") }
+
+
-
-
-
+
+
+
-
-
+
+ onModeChange={this.onUpdate.bind(this, "mode", false)}
+ onFoldChange={this.onUpdate.bind(this, "folding", false)}
+ onChange={this.onUpdate.bind(this, "contentToSave", false)} />
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
);
}
}
+
+export const IDE = withRouter(IDEComponent);
diff --git a/client/pages/viewerpage/image_exif.js b/client/pages/viewerpage/image_exif.js
index 74ddb0b7..226308b2 100644
--- a/client/pages/viewerpage/image_exif.js
+++ b/client/pages/viewerpage/image_exif.js
@@ -1,4 +1,3 @@
-/* eslint-disable max-len, no-invalid-this */
import React from "react";
import EXIF from "exif-js";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";
@@ -209,7 +208,7 @@ class LargeExifClass extends Exif {
componentDidMount() {
this.refresh_handler(this.props);
}
- componentWillReceiveProps(props) {
+ UNSAFE_componentWillReceiveProps(props) {
this.refresh_handler(props);
}
diff --git a/client/pages/viewerpage/imageviewer.js b/client/pages/viewerpage/imageviewer.js
index 073c1ac0..500ead13 100644
--- a/client/pages/viewerpage/imageviewer.js
+++ b/client/pages/viewerpage/imageviewer.js
@@ -1,31 +1,29 @@
-import React from 'react';
-import path from 'path';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import React, { createRef } from "react";
+import path from "path";
+import ReactCSSTransitionGroup from "react-addons-css-transition-group";
-import { MenuBar } from './menubar';
-import { Bundle, Icon, NgIf, Loader, EventEmitter, EventReceiver } from '../../components/';
-import { alert } from '../../helpers/';
-import { Pager } from './pager';
-import { t } from '../../locales/';
-import './imageviewer.scss';
-import './pager.scss';
+import { MenuBar } from "./menubar";
+import { Bundle, Icon, NgIf, Loader, EventEmitter, EventReceiver } from "../../components/";
+import { alert } from "../../helpers/";
+import { Pager } from "./pager";
+import { t } from "../../locales/";
+import "./imageviewer.scss";
+import "./pager.scss";
const SmallExif = (props) => (
-
-
-
-
-
-
-
-
+
-
+
);
}
}
-class Img extends React.Component{
- constructor(props){
- super(props);
- }
+const ImageFancy = EventEmitter(ImageFancyComponent);
- render(){
- const image_url = (url, size) => {
- return url+"&size="+parseInt(Math.max(window.innerWidth*size, window.innerHeight*size));
- };
- if(!this.props.src) return null;
-
- return (
- 
- );
- }
+function Img({ src, ...props }) {
+ const image_url = (url, size) => {
+ return url+"&size="+parseInt(Math.max(window.innerWidth*size, window.innerHeight*size));
+ };
+ if (!src) return null;
+ return (
+ 
+ );
}
diff --git a/client/pages/viewerpage/org_viewer.js b/client/pages/viewerpage/org_viewer.js
index e9972643..8f49c6d6 100644
--- a/client/pages/viewerpage/org_viewer.js
+++ b/client/pages/viewerpage/org_viewer.js
@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
import React from "react";
import { StickyContainer, Sticky } from "react-sticky";
@@ -10,87 +9,100 @@ import { t } from "../../locales/";
import "./org_viewer.scss";
export class OrgEventsViewer extends React.Component {
- shouldComponentUpdate(nextProps){
- if(this.props.content !== nextProps.content) return true;
- if(this.props.isActive !== nextProps.isActive) return true;
+ shouldComponentUpdate(nextProps) {
+ if (this.props.content !== nextProps.content) return true;
+ if (this.props.isActive !== nextProps.isActive) return true;
return false;
}
- render(){
+ render() {
const headlines = this.props.isActive ? extractEvents(this.props.content) : [];
return (
-
-
- { t("empty") }
-
- 0}>
- 750 ? 545 : window.innerHeight - 202}}>
- {
- Object.keys(this.state.headlines).map((list, i) => {
- return (
-
- this.setState({is_loaded: true})} url={this.props.data} />
-
-
-
- 
-
+
+
+
);
}
}
-@EventEmitter
-class ImageFancy extends React.Component {
- constructor(props){
+export const ImageViewer = EventReceiver(EventEmitter(ImageViewerComponent));
+
+class ImageFancyComponent extends React.Component {
+ constructor(props) {
super(props);
this.state = {
isLoading: true,
isError: false,
- drag_init: {x: null, t: null},
- drag_current: {x: null, t: null},
- hasAction: false
+ drag_init: { x: null, t: null },
+ drag_current: { x: null, t: null },
+ hasAction: false,
};
-
this.img = new Image();
- this.img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
+ this.img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
}
- componentWillReceiveProps(nextProp){
- if(nextProp.url !== this.props.url){
+ UNSAFE_componentWillReceiveProps(nextProp) {
+ if (nextProp.url !== this.props.url) {
this.setState({
isLoading: true,
isError: false,
- drag_current: {x: 0},
- hasAction: false
+ drag_current: { x: 0 },
+ hasAction: false,
});
}
}
- onLoad(){
- this.setState({isLoading: false});
+ onLoad() {
+ this.setState({ isLoading: false });
this.props.onLoad();
}
- onError(w){
- this.setState({isError: true});
+ onError(w) {
+ this.setState({ isError: true });
}
- imageDragStart(e){
+ imageDragStart(e) {
const t = new Date();
- if(e.touches){
+ if (e.touches) {
this.setState({
- drag_init: {x: e.touches[0].clientX, t: t},
- hasAction: true
+ drag_init: { x: e.touches[0].clientX, t: t },
+ hasAction: true,
});
- }else{
+ } else {
this.setState({
- drag_init: {x: e.pageX, t: t},
- hasAction: true
+ drag_init: { x: e.pageX, t: t },
+ hasAction: true,
});
}
- if(e.dataTransfer) e.dataTransfer.setDragImage(this.img, 0, 0);
+ if (e.dataTransfer) e.dataTransfer.setDragImage(this.img, 0, 0);
}
- imageDragEnd(e){
+ imageDragEnd(e) {
const drag_end = {
- x: function(dragX, touch){
- const t = new Date();
- if(dragX !== null) return dragX;
- if(touch && touch[0]){
+ x: function(dragX, touch) {
+ if (dragX !== null) return dragX;
+ if (touch && touch[0]) {
return touch[0].clientX;
}
return 0;
}(e.pageX || null, e.changedTouches || null),
- t: new Date()
+ t: new Date(),
};
- const direction = function(x_current, x_init){
- if(x_current.t - x_init.t > 200){
- if(Math.abs(x_current.x - x_init.x) < (window.innerWidth < 500 ? window.innerWidth / 3 : 250)) return "neutral";
+ const direction = function(x_current, x_init) {
+ if (x_current.t - x_init.t > 200 &&
+ Math.abs(x_current.x - x_init.x) <
+ (window.innerWidth < 500 ? window.innerWidth / 3 : 250)) {
+ return "neutral";
}
return x_current.x > x_init.x ? "right" : "left";
}(drag_end, this.state.drag_init);
- if(direction === "left"){
+ if (direction === "left") {
return this.setState({
- drag_current: {x: - window.innerWidth},
- hasAction: false
+ drag_current: { x: - window.innerWidth },
+ hasAction: false,
}, () => {
this.props.emit("media::next");
});
- }else if(direction === "right"){
+ } else if (direction === "right") {
return this.setState({
- drag_current: {x: + window.innerWidth},
- hasAction: false
+ drag_current: { x: + window.innerWidth },
+ hasAction: false,
}, () => {
this.props.emit("media::previous");
});
}
return this.setState({
- drag_current: {x: 0},
- hasAction: false
+ drag_current: { x: 0 },
+ hasAction: false,
});
}
- imageDrag(e){
- if(e.pageX > 0){
- this.setState({drag_current: {x: e.pageX - this.state.drag_init.x}});
- }else if(e.touches && e.touches[0].clientX > 0){
- this.setState({drag_current: {x: e.touches[0].clientX - this.state.drag_init.x}});
+ imageDrag(e) {
+ if (e.pageX > 0) {
+ this.setState({
+ drag_current: { x: e.pageX - this.state.drag_init.x },
+ });
+ } else if (e.touches && e.touches[0].clientX > 0) {
+ this.setState({
+ drag_current: { x: e.touches[0].clientX - this.state.drag_init.x },
+ });
}
}
- render(){
- if(this.state.isError){
+ render() {
+ if (this.state.isError) {
return (
-
- this.setState({draggable: files.length > 1 ? true : false})}
- next={(e) => this.setState({preload: e})} />
-
- { t("Info") }
-
-
+
+
+
+
+
+
+ this.setState({ draggable: files.length > 1 ? true : false })}
+ next={(e) => this.setState({ preload: e })} />
-
+
-
+ this.setState({ is_loaded: true })}
+ url={this.props.data} />
-
-
+
+
+
+
+ { t("Info") }
+
+
+
+
+ { t("Can't load this picture") }
+
);
}
- if(this.state.isLoading){
+ if (this.state.isLoading) {
return (
+ { t("Can't load this picture") }
+
+
- 
+
);
}
return (
-
-
-
+
+
+
-
- 0}>
-
+
+ { t("empty") }
-
- {this.props.title}
-
+
+ 0}>
+
+
+
+ {this.props.title}
+
-
- {
- ({style}) => {
- return (
-
- 0}>
+ 750 ? 545 : window.innerHeight - 202 }}>
+ {
+ Object.keys(this.state.headlines).map((list, i) => {
+ return (
+
-
+
+ );
+ })
+ }
+
+
);
}
@@ -322,37 +334,37 @@ class OrgViewer extends React.Component {
class Headline extends React.Component {
- constructor(props){
+ constructor(props) {
super(props);
this.state = {
status: props.todo_status,
- properties: false
+ properties: false,
};
}
- onMenuAction(key){
- if(key === "navigate"){
+ onMenuAction(key) {
+ if (key === "navigate") {
this.props.goTo();
- }else if(key === "properties"){
- this.setState({properties: !this.state.properties});
+ } else if (key === "properties") {
+ this.setState({ properties: !this.state.properties });
}
}
- onStatusToggle(){
- if(!this.props.todo_status) return;
+ onStatusToggle() {
+ if (!this.props.todo_status) return;
const new_status = this.state.status === "todo" ? "done" : "todo";
- this.setState({status: new_status});
+ this.setState({ status: new_status });
- const new_status_label = function(new_status, initial_status, initial_keyword){
- if(new_status === initial_status) return initial_keyword;
+ const new_status_label = function(new_status, initial_status, initial_keyword) {
+ if (new_status === initial_status) return initial_keyword;
return new_status === "todo" ? "TODO" : "DONE";
}(new_status, this.props.todo_status, this.props.status);
this.props.onTaskUpdate("status", this.props.line, new_status_label);
}
- onTimeSet(keyword, existing, value){
- if(existing === true){
+ onTimeSet(keyword, existing, value) {
+ if (existing === true) {
this.props.onTaskUpdate(
"existing_"+keyword,
[
@@ -360,127 +372,130 @@ class Headline extends React.Component {
this.props.sortKey,
this.props[keyword].line,
],
- value
+ value,
);
- }else{
+ } else {
const opposite_keyword = keyword === "scheduled" ? "deadline" : "scheduled";
this.props.onTaskUpdate(
"new_"+keyword,
[
this.props.line,
this.props.sortKey,
- this.props[opposite_keyword] && this.props[opposite_keyword].line || null
+ this.props[opposite_keyword] && this.props[opposite_keyword].line || null,
],
- value
+ value,
);
}
}
- render(){
+ render() {
const dateInput = (obj) => {
- if(!obj || !obj.timestamp) return "";
+ if (!obj || !obj.timestamp) return "";
const d = new Date(obj.timestamp);
return d.getFullYear()+"-"+leftPad((d.getMonth() + 1).toString(), 2)+"-"+leftPad(d.getDate().toString(), 2);
};
return (
{list} {this.state.headlines[list].length}
+
+
+ {
+ ({ style }) => {
+ return (
+
+
- );
- })
- }
-
+
+ );
+ }
+ }
+ {list} {this.state.headlines[list].length}
+
+ {
+ this.state.headlines[list].map((headline, j) => {
+ return (
+
- );
- }
- }
-
-
- {
- this.state.headlines[list].map((headline, j) => {
- return (
-
-
-
-
-
-
- 0 && this.state.status === "todo" && this.props.type === "todos"} className="subtask_container">
- {
- this.props.tasks.map((task, i) => {
- return (
-
+
+
+ 0 && this.state.status === "todo" && this.props.type === "todos"} className="subtask_container">
+ {
+ this.props.tasks.map((task, i) => {
+ return (
+
);
}
}
class Subtask extends React.Component {
- constructor(props){
+ constructor(props) {
super(props);
this.state = this.calculateState();
}
- calculateState(){
- return {checked: this.props.status === "DONE"};
+ calculateState() {
+ return { checked: this.props.status === "DONE" };
}
- updateState(e){
+ updateState(e) {
const checked = e.target.checked;
- this.setState({checked: checked}, () => {
- // We don't want the interface to feel laggy while a task is beeing updated. Updating the content
- // and reparsing the result is an expensive operation, this makes it feel like a piece of cake
+ this.setState({ checked: checked }, () => {
+ // We don't want the interface to feel laggy while a task is beeing updated. Updating
+ // the content and reparsing the result is an expensive operation, this makes it feel
+ // like a piece of cake
window.setTimeout(() => {
- window.requestAnimationFrame(() => this.props.onStatusChange(checked ? "DONE" : "TODO"));
+ window.requestAnimationFrame(() => {
+ this.props.onStatusChange(checked ? "DONE" : "TODO");
+ });
}, 0);
});
}
- render(){
+ render() {
return (
- {this.props.title}
-
-
-
-
-
-
-
-
- { t("Navigate") }
- { t("Properties") }
-
-
-
-
- {
- this.props.tags.map((tag, i) => {
- return (
- {tag}
- );
- })
- }
+
+
+
+
+ { t("Navigate") }
+ { t("Properties") }
+
+
-
+
+
+
-
+ {this.props.title}
+
+
+
+
+
+ {
+ this.props.tags.map((tag, i) => {
+ return (
+ {tag}
+ );
+ })
+ }
+
+
-
-
-
-
-
-
+
+
+
+
+
+
-
+
);
}
diff --git a/client/pages/viewerpage/org_viewer.scss b/client/pages/viewerpage/org_viewer.scss
index 7c67f524..ddc729b8 100644
--- a/client/pages/viewerpage/org_viewer.scss
+++ b/client/pages/viewerpage/org_viewer.scss
@@ -69,7 +69,7 @@
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
- padding: 0 10px 70px 10px;
+ padding: 0 10px 10px 10px;
.sticky_header{
z-index: 2;
diff --git a/client/pages/viewerpage/pager.js b/client/pages/viewerpage/pager.js
index 47be4c57..71cc0608 100644
--- a/client/pages/viewerpage/pager.js
+++ b/client/pages/viewerpage/pager.js
@@ -1,94 +1,98 @@
-import React from 'react';
-import { Link, withRouter } from 'react-router-dom';
+import React, { createRef } from "react";
+import { Link, withRouter } from "react-router-dom";
-import { Files } from '../../model/';
-import { sort } from '../../pages/filespage.helper.js';
-import { Icon, NgIf, EventReceiver, EventEmitter } from '../../components/';
-import { dirname, basename, settings_get, getMimeType, debounce, gid, appendShareToUrl } from '../../helpers/';
-import './pager.scss';
+import { Files } from "../../model/";
+import { sort } from "../../pages/filespage.helper.js";
+import { Icon, NgIf, EventReceiver, EventEmitter } from "../../components/";
+import {
+ dirname, basename, settings_get, getMimeType, debounce, appendShareToUrl,
+} from "../../helpers/";
+import "./pager.scss";
-
-@EventEmitter
-@EventReceiver
-@withRouter
-export class Pager extends React.Component {
- constructor(props){
+class PagerComponent extends React.Component {
+ constructor(props) {
super(props);
this.state = {
files: [],
- n: 0
+ n: 0,
};
+ this.$page = createRef();
this.onKeyPress = this.onKeyPress.bind(this);
this.onSubmitDebounced = debounce(this.onFormSubmit.bind(this), 1000);
}
- componentDidMount(){
+ componentDidMount() {
this.setNavigation(this.props);
window.addEventListener("keyup", this.onKeyPress);
- this.props.subscribe('media::next', () => {
+ this.props.subscribe("media::next", () => {
this.navigatePage(this.calculateNextPageNumber(this.state.n));
});
- this.props.subscribe('media::previous', () => {
+ this.props.subscribe("media::previous", () => {
this.navigatePage(this.calculatePrevPageNumber(this.state.n));
});
}
- componentWillReceiveProps(props){
- if(props.path !== this.props.path){
+ UNSAFE_componentWillReceiveProps(props) {
+ if (props.path !== this.props.path) {
this.setNavigation(props);
}
}
- componentWillUnmount(){
+ componentWillUnmount() {
window.removeEventListener("keyup", this.onKeyPress);
- this.props.unsubscribe('media::next');
- this.props.unsubscribe('media::previous');
+ this.props.unsubscribe("media::next");
+ this.props.unsubscribe("media::previous");
this.hasUnmounted = true;
}
- navigatePage(n){
- if(this.state.files[n]){
+ navigatePage(n) {
+ if (this.state.files[n]) {
const url = appendShareToUrl(this.state.files[n].link);
- if(this.refs.$page) this.refs.$page.blur();
- let preload_index = (n >= this.state.n || (this.state.n === this.state.files.length - 1 && n === 0)) ? this.calculateNextPageNumber(n) : this.calculatePrevPageNumber(n);
+ if (this.$page) this.$page.current.blur();
+ const preload_index = (
+ n >= this.state.n ||
+ (this.state.n === this.state.files.length - 1 && n === 0)
+ ) ? this.calculateNextPageNumber(n) : this.calculatePrevPageNumber(n);
Files.url(this.state.files[preload_index].path)
.then((url) => this.props.emit("media::preload", url))
.then(() => this.props.history.push(url))
.catch(() => {});
}
}
- calculateNextPageNumber(n){
- if(n + 1 >= this.state.files.length) return 0;
+ calculateNextPageNumber(n) {
+ if (n + 1 >= this.state.files.length) return 0;
return n + 1;
}
- calculatePrevPageNumber(n){
- if(n <= 0) return this.state.files.length - 1;
+ calculatePrevPageNumber(n) {
+ if (n <= 0) return this.state.files.length - 1;
return n - 1;
}
- setNavigation(props){
+ setNavigation(props) {
Files._ls_from_cache(dirname(props.path))
.then((f) => {
- if(f === null) return Promise.reject({code: "NO_DATA"});
+ if (f === null) return Promise.reject({ code: "NO_DATA" });
return Promise.resolve(f);
})
- .then((f) => f.results.filter((file) => (isImage(file.name) || isVideo(file.name)) && file.type === "file"))
- .then((f) => sort(f, settings_get('filespage_sort') || 'type'))
+ .then((f) => f.results
+ .filter((file) => (isImage(file.name) || isVideo(file.name)) &&
+ file.type === "file"))
+ .then((f) => sort(f, settings_get("filespage_sort") || "type"))
.then((f) => findPosition(f, basename(props.path)))
.then((res) => {
- if(this.hasUnmounted === true) return;
- if(this.props.pageChange) this.props.pageChange(res[0]);
+ if (this.hasUnmounted === true) return;
+ if (this.props.pageChange) this.props.pageChange(res[0]);
this.setState({
files: res[0],
- n: res[1]
+ n: res[1],
});
})
.catch(() => {});
const findPosition = (files, filename) => {
let i;
- for(i=0; i < files.length; i++){
- if(files[i].name === filename){
+ for (i=0; i < files.length; i++) {
+ if (files[i].name === filename) {
break;
}
}
@@ -102,59 +106,67 @@ export class Pager extends React.Component {
};
}
- onFormInputChange(e){
+ onFormInputChange(e) {
let n = parseInt(e.target.value);
- if(Number.isNaN(n)) n = undefined;
- else if(n < 1) n = 0;
- else if(n > this.state.files.length) n = this.state.files.length - 1;
- else{ n = n - 1; }
- this.setState({n: n});
- if(n >= 0){
+ if (Number.isNaN(n)) n = undefined;
+ else if (n < 1) n = 0;
+ else if (n > this.state.files.length) n = this.state.files.length - 1;
+ else n = n - 1;
+
+ this.setState({ n: n });
+ if (n >= 0) {
this.onSubmitDebounced();
}
}
- onFormSubmit(e){
- if(e) e.preventDefault();
+ onFormSubmit(e) {
+ if (e) e.preventDefault();
this.navigatePage(this.state.n);
}
- onKeyPress(e){
- if(e.target.classList.contains("prevent")) return;
- if(e.keyCode === 39){
+ onKeyPress(e) {
+ if (e.target.classList.contains("prevent")) return;
+ if (e.keyCode === 39) {
this.navigatePage(this.calculateNextPageNumber(this.state.n));
- }else if(e.keyCode === 37){
+ } else if (e.keyCode === 37) {
this.navigatePage(this.calculatePrevPageNumber(this.state.n));
}
}
- render(){
- let inputWidth = this.state.n === undefined ? 12 : ((this.state.n + 1).toString().length) * 12;
+ render() {
+ const inputWidth = this.state.n === undefined ?
+ 12 : ((this.state.n + 1).toString().length) * 12;
const nextLink = () => {
const l = this.state.files[this.calculateNextPageNumber(this.state.n)];
- return (((l && l.link) || "") + window.location.search) || '#';
+ return (((l && l.link) || "") + window.location.search) || "#";
};
const prevLink = () => {
const l = this.state.files[this.calculatePrevPageNumber(this.state.n)];
- return (((l && l.link) || "") + window.location.search) || '#';
+ return (((l && l.link) || "") + window.location.search) || "#";
};
const current_page_number = this.state.n === undefined ? "" : this.state.n + 1;
return (
-
);
}
}
+
+export const Pager = EventEmitter(EventReceiver(withRouter(PagerComponent)));
- 0} type="inline">
-
-
+
+ 0} type="inline">
+
+