diff options
Diffstat (limited to 'src/client/util')
| -rw-r--r-- | src/client/util/Import & Export/DirectoryImportBox.scss | 0 | ||||
| -rw-r--r-- | src/client/util/Import & Export/DirectoryImportBox.tsx (renamed from src/client/util/Import & Export/ImportBox.tsx) | 71 | ||||
| -rw-r--r-- | src/client/util/Import & Export/ImageImporter.tsx | 67 | ||||
| -rw-r--r-- | src/client/util/request-image-size.js | 6 |
4 files changed, 63 insertions, 81 deletions
diff --git a/src/client/util/Import & Export/DirectoryImportBox.scss b/src/client/util/Import & Export/DirectoryImportBox.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/src/client/util/Import & Export/DirectoryImportBox.scss diff --git a/src/client/util/Import & Export/ImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx index 630911710..2d77f6ae6 100644 --- a/src/client/util/Import & Export/ImportBox.tsx +++ b/src/client/util/Import & Export/DirectoryImportBox.tsx @@ -3,31 +3,42 @@ import React = require("react"); import { Doc } from "../../../new_fields/Doc"; import { DocServer } from "../../DocServer"; import { RouteStore } from "../../../server/RouteStore"; -import { action, observable } from "mobx"; +import { action, observable, runInAction } from "mobx"; import { FieldViewProps, FieldView } from "../../views/nodes/FieldView"; import Measure, { ContentRect } from "react-measure"; import { library } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowUp } from '@fortawesome/free-solid-svg-icons'; +import { faArrowUp, faTag, faFileExcel } from '@fortawesome/free-solid-svg-icons'; import { Docs, DocumentOptions } from "../../documents/Documents"; +import { EditableView } from "../../views/EditableView"; -interface ImageImporterProps { - addSchema: (imageDocs: Doc[]) => void; -} - -export default class ImportBox extends React.Component<FieldViewProps> { +export default class DirectoryImportBox extends React.Component<FieldViewProps> { + private selector = React.createRef<HTMLInputElement>(); @observable private top = 0; @observable private left = 0; private dimensions = 50; + @observable private key = "Key"; + @observable private value = "Value"; + + public static LayoutString() { return FieldView.LayoutString(DirectoryImportBox); } + constructor(props: FieldViewProps) { super(props); - library.add(faArrowUp); + library.add(faArrowUp, faTag); } - public static LayoutString() { return FieldView.LayoutString(ImportBox); } + updateKey = (newKey: string) => { + runInAction(() => this.key = newKey); + console.log("KEY ", this.key); + return true; + } - private selector = React.createRef<HTMLInputElement>(); + updateValue = (newValue: string) => { + runInAction(() => this.value = newValue); + console.log("VALUE ", this.value); + return true; + } handleSelection = async (e: React.ChangeEvent<HTMLInputElement>) => { let promises: Promise<void>[] = []; @@ -56,6 +67,7 @@ export default class ImportBox extends React.Component<FieldViewProps> { }).then(async (res: Response) => { (await res.json()).map(action((file: any) => { let path = DocServer.prepend(file); + console.log(path); let docPromise = Docs.getDocumentFromType(type, path, { nativeWidth: 300, width: 300, title: dropFileName }); docPromise.then(doc => doc && docs.push(doc)); })); @@ -76,8 +88,8 @@ export default class ImportBox extends React.Component<FieldViewProps> { } componentDidMount() { - this.selector.current!.setAttribute("directory", "true"); - this.selector.current!.setAttribute("webkitdirectory", "true"); + this.selector.current!.setAttribute("directory", ""); + this.selector.current!.setAttribute("webkitdirectory", ""); } @action @@ -93,6 +105,7 @@ export default class ImportBox extends React.Component<FieldViewProps> { render() { let dimensions = 50; + let keyValueStyle = { paddingLeft: 5, width: "50%" }; return ( <Measure offset onResize={this.preserveCentering}> {({ measureRef }) => @@ -125,6 +138,40 @@ export default class ImportBox extends React.Component<FieldViewProps> { <FontAwesomeIcon icon={faArrowUp} color="#FFFFFF" size={"2x"} /> </div> </label> + <div style={{ + position: "absolute", + top: 5, + right: 5, + borderRadius: "50%", + width: 25, + height: 25, + background: "black" + }} /> + <div style={{ + position: "absolute", + right: 9.5, + top: 11 + }}> + <FontAwesomeIcon icon={faTag} color="#FFFFFF" size={"1x"} /> + </div> + <div style={{ display: "flex", flexDirection: "row", borderBottom: "1px solid black", paddingBottom: 5 }} > + <div className={"key_container"} style={keyValueStyle}> + <EditableView + contents={this.key} + SetValue={this.updateKey} + GetValue={() => this.key} + oneLine={true} + /> + </div> + <div className={"value_container"} style={keyValueStyle}> + <EditableView + contents={this.value} + SetValue={this.updateValue} + GetValue={() => this.value} + oneLine={true} + /> + </div> + </div> </div> } </Measure> diff --git a/src/client/util/Import & Export/ImageImporter.tsx b/src/client/util/Import & Export/ImageImporter.tsx deleted file mode 100644 index d664f6487..000000000 --- a/src/client/util/Import & Export/ImageImporter.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import "fs"; -import React = require("react"); -import { Doc } from "../../../new_fields/Doc"; -import { DocServer } from "../../DocServer"; -import { RouteStore } from "../../../server/RouteStore"; -import { action } from "mobx"; -import { Docs } from "../../documents/Documents"; -import { FieldViewProps } from "../../views/nodes/FieldView"; - -interface ImageImporterProps { - addSchema: (imageDocs: Doc[]) => void; -} - -export default class BulkImporter extends React.Component<FieldViewProps> { - private selector = React.createRef<HTMLInputElement>(); - - handleSelection = async (e: React.ChangeEvent<HTMLInputElement>) => { - let promises: Promise<void>[] = []; - let docs: Doc[] = []; - - let files = e.target.files; - if (!files) return; - - for (let i = 0; i < files.length; i++) { - let target = files.item(i); - - if (target === null) { - continue; - } - - let type = target.type; - let formData = new FormData(); - formData.append('file', target); - let dropFileName = target ? target.name : "-empty-"; - - let prom = fetch(DocServer.prepend(RouteStore.upload), { - method: 'POST', - body: formData - }).then(async (res: Response) => { - (await res.json()).map(action((file: any) => { - let path = window.location.origin + file; - let docPromise = Docs.getDocumentFromType(type, path, { nativeWidth: 300, width: 300, title: dropFileName }); - docPromise.then(doc => doc && docs.push(doc)); - })); - }); - promises.push(prom); - } - - await Promise.all(promises); - - let parent = Docs.SchemaDocument(["title", "data"], docs, { width: 300, height: 300, title: "Bulk Import from Directory" }); - } - - componentDidMount() { - this.selector.current!.setAttribute("directory", "true"); - this.selector.current!.setAttribute("webkitdirectory", "true"); - } - - render() { - return ( - <div> - <input ref={this.selector} name={"selector"} onChange={this.handleSelection} type="file" style={{ position: "absolute" }} /> - </div> - ); - } - -}
\ No newline at end of file diff --git a/src/client/util/request-image-size.js b/src/client/util/request-image-size.js index 0f9328872..27605d167 100644 --- a/src/client/util/request-image-size.js +++ b/src/client/util/request-image-size.js @@ -21,7 +21,9 @@ module.exports = function requestImageSize(options) { if (options && typeof options === 'object') { opts = Object.assign(options, opts); } else if (options && typeof options === 'string') { - opts = Object.assign({ uri: options }, opts); + opts = Object.assign({ + uri: options + }, opts); } else { return Promise.reject(new Error('You should provide an URI string or a "request" options object.')); } @@ -70,4 +72,4 @@ module.exports = function requestImageSize(options) { req.on('error', err => reject(err)); }); -}; +};
\ No newline at end of file |
