From 8d50e6bedfc560b3a5901be0ab1b54888dba2840 Mon Sep 17 00:00:00 2001 From: Garrett Date: Thu, 7 Sep 2023 12:26:40 -0700 Subject: [PATCH 1/2] Add buttons beneath the filesystem handler if multiple types defined --- .../src/stories/FileSystemSelector.js | 69 +++++++++++++------ .../src/stories/FileSystemSelector.stories.js | 20 +++++- src/renderer/src/stories/JSONSchemaInput.js | 2 + 3 files changed, 67 insertions(+), 24 deletions(-) diff --git a/src/renderer/src/stories/FileSystemSelector.js b/src/renderer/src/stories/FileSystemSelector.js index 81967a6ad..bb37fee37 100644 --- a/src/renderer/src/stories/FileSystemSelector.js +++ b/src/renderer/src/stories/FileSystemSelector.js @@ -3,6 +3,17 @@ import { LitElement, css, html } from "lit"; import { remote } from "../electron/index"; const { dialog } = remote; +function getObjectTypeReferenceString(type, multiple, { nested, native} = {}) { + if (Array.isArray(type)) return `${multiple ? '' : 'a '}${type.map((type) => getObjectTypeReferenceString(type, multiple, { native, nested: true })).join(' / ')}` + + const isDir = type === "directory" + return multiple && (!isDir || (isDir && !native)) + ? type === "directory" + ? "directories" : "files" + : nested ? type : `a ${type}`; +} + + const componentCSS = css` * { box-sizing: border-box; @@ -13,6 +24,17 @@ const componentCSS = css` width: 100%; } + :host([manytypes=true]) > button { + cursor: default; + } + + #button-div { + margin-top: 10px; + display: flex; + gap: 5px; + } + + button { background: WhiteSmoke; border: 1px solid #c3c3c3; @@ -130,9 +152,27 @@ export class FilesystemSelector extends LitElement { this.dispatchEvent(event); }; + async selectFormat(type = this.type) { + + if (dialog) { + const file = await this.#useElectronDialog(type); + const path = file.filePath ?? file.filePaths?.[0]; + this.#handleFiles(path); + } else { + let handles = await (type === "directory" + ? window.showDirectoryPicker() + : window.showOpenFilePicker({ multiple: this.multiple })).catch((e) => this.#onCancel()); // Call using the same options + + const result = Array.isArray(handles) ? handles.map((o) => o.name) : handles.name; + this.#handleFiles(result); + } + } + render() { let resolved, isUpdated; + const isMultipleTypes = Array.isArray(this.type) + this.setAttribute('manytypes', isMultipleTypes) const isArray = Array.isArray(this.value); const len = isArray ? this.value.length : 0; @@ -156,29 +196,13 @@ export class FilesystemSelector extends LitElement { : this.value[0] : this.value; - const objectTypeReference = this.multiple - ? this.type === "directory" - ? "directories" - : "files" - : `a ${this.type}`; + const objectTypeReference = getObjectTypeReferenceString(this.type, this.multiple) + return html` + ${isMultipleTypes ? html`
${this.type.map(type => html` this.selectFormat(type)}>Select ${getObjectTypeReferenceString(type, this.multiple, { native: true })}`)}` : ''} `; } } diff --git a/src/renderer/src/stories/FileSystemSelector.stories.js b/src/renderer/src/stories/FileSystemSelector.stories.js index 035d61938..80fcc28cb 100644 --- a/src/renderer/src/stories/FileSystemSelector.stories.js +++ b/src/renderer/src/stories/FileSystemSelector.stories.js @@ -6,10 +6,12 @@ export default { const Template = (args) => new FilesystemSelector(args); +const types = ['file', 'directory'] + export const File = Template.bind({}); export const Folder = Template.bind({}); Folder.args = { - type: "directory", + type: types[1], }; export const FileMultiple = Template.bind({}); @@ -17,6 +19,20 @@ FileMultiple.args = { multiple: true }; export const FolderMultiple = Template.bind({}); FolderMultiple.args = { - type: "directory", + type: types[1], multiple: true, }; + +export const Both = Template.bind({}); +Both.args = { + type: types, +}; + +export const BothMultiple = Template.bind({}); +BothMultiple.args = { + type: types, + multiple: true, +}; + + + diff --git a/src/renderer/src/stories/JSONSchemaInput.js b/src/renderer/src/stories/JSONSchemaInput.js index f87a96b94..42e7226bb 100644 --- a/src/renderer/src/stories/JSONSchemaInput.js +++ b/src/renderer/src/stories/JSONSchemaInput.js @@ -9,6 +9,8 @@ import { List } from "./List"; import { Modal } from "./Modal"; const isFilesystemSelector = (format) => { + if (Array.isArray(format)) return format.map(isFilesystemSelector).every(Boolean) ? format : null + const matched = name.match(/(.+_)?(.+)_paths?/); if (!format && matched) format = matched[2] === "folder" ? "directory" : matched[2]; return ["file", "directory"].includes(format) ? format : null; // Handle file and directory formats From ff29cf8bdf613b5b2ac98bcdea687886800365e0 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Thu, 7 Sep 2023 19:28:43 +0000 Subject: [PATCH 2/2] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- .../src/stories/FileSystemSelector.js | 62 ++++++++++++------- .../src/stories/FileSystemSelector.stories.js | 5 +- src/renderer/src/stories/JSONSchemaInput.js | 4 +- 3 files changed, 44 insertions(+), 27 deletions(-) diff --git a/src/renderer/src/stories/FileSystemSelector.js b/src/renderer/src/stories/FileSystemSelector.js index bb37fee37..df79bc57f 100644 --- a/src/renderer/src/stories/FileSystemSelector.js +++ b/src/renderer/src/stories/FileSystemSelector.js @@ -3,17 +3,22 @@ import { LitElement, css, html } from "lit"; import { remote } from "../electron/index"; const { dialog } = remote; -function getObjectTypeReferenceString(type, multiple, { nested, native} = {}) { - if (Array.isArray(type)) return `${multiple ? '' : 'a '}${type.map((type) => getObjectTypeReferenceString(type, multiple, { native, nested: true })).join(' / ')}` - - const isDir = type === "directory" +function getObjectTypeReferenceString(type, multiple, { nested, native } = {}) { + if (Array.isArray(type)) + return `${multiple ? "" : "a "}${type + .map((type) => getObjectTypeReferenceString(type, multiple, { native, nested: true })) + .join(" / ")}`; + + const isDir = type === "directory"; return multiple && (!isDir || (isDir && !native)) - ? type === "directory" - ? "directories" : "files" - : nested ? type : `a ${type}`; + ? type === "directory" + ? "directories" + : "files" + : nested + ? type + : `a ${type}`; } - const componentCSS = css` * { box-sizing: border-box; @@ -24,7 +29,7 @@ const componentCSS = css` width: 100%; } - :host([manytypes=true]) > button { + :host([manytypes="true"]) > button { cursor: default; } @@ -34,7 +39,6 @@ const componentCSS = css` gap: 5px; } - button { background: WhiteSmoke; border: 1px solid #c3c3c3; @@ -153,7 +157,6 @@ export class FilesystemSelector extends LitElement { }; async selectFormat(type = this.type) { - if (dialog) { const file = await this.#useElectronDialog(type); const path = file.filePath ?? file.filePaths?.[0]; @@ -161,7 +164,8 @@ export class FilesystemSelector extends LitElement { } else { let handles = await (type === "directory" ? window.showDirectoryPicker() - : window.showOpenFilePicker({ multiple: this.multiple })).catch((e) => this.#onCancel()); // Call using the same options + : window.showOpenFilePicker({ multiple: this.multiple }) + ).catch((e) => this.#onCancel()); // Call using the same options const result = Array.isArray(handles) ? handles.map((o) => o.name) : handles.name; this.#handleFiles(result); @@ -171,8 +175,8 @@ export class FilesystemSelector extends LitElement { render() { let resolved, isUpdated; - const isMultipleTypes = Array.isArray(this.type) - this.setAttribute('manytypes', isMultipleTypes) + const isMultipleTypes = Array.isArray(this.type); + this.setAttribute("manytypes", isMultipleTypes); const isArray = Array.isArray(this.value); const len = isArray ? this.value.length : 0; @@ -196,8 +200,7 @@ export class FilesystemSelector extends LitElement { : this.value[0] : this.value; - const objectTypeReference = getObjectTypeReferenceString(this.type, this.multiple) - + const objectTypeReference = getObjectTypeReferenceString(this.type, this.multiple); return html` - ${isMultipleTypes ? html`
${this.type.map(type => html` this.selectFormat(type)}>Select ${getObjectTypeReferenceString(type, this.multiple, { native: true })}`)}` : ''} + ${isMultipleTypes + ? html`
+ ${this.type.map( + (type) => + html` this.selectFormat(type)} + >Select + ${getObjectTypeReferenceString(type, this.multiple, { native: true })}` + )} +
` + : ""} `; } } diff --git a/src/renderer/src/stories/FileSystemSelector.stories.js b/src/renderer/src/stories/FileSystemSelector.stories.js index 80fcc28cb..75ba900eb 100644 --- a/src/renderer/src/stories/FileSystemSelector.stories.js +++ b/src/renderer/src/stories/FileSystemSelector.stories.js @@ -6,7 +6,7 @@ export default { const Template = (args) => new FilesystemSelector(args); -const types = ['file', 'directory'] +const types = ["file", "directory"]; export const File = Template.bind({}); export const Folder = Template.bind({}); @@ -33,6 +33,3 @@ BothMultiple.args = { type: types, multiple: true, }; - - - diff --git a/src/renderer/src/stories/JSONSchemaInput.js b/src/renderer/src/stories/JSONSchemaInput.js index 42e7226bb..0a27c0b48 100644 --- a/src/renderer/src/stories/JSONSchemaInput.js +++ b/src/renderer/src/stories/JSONSchemaInput.js @@ -9,8 +9,8 @@ import { List } from "./List"; import { Modal } from "./Modal"; const isFilesystemSelector = (format) => { - if (Array.isArray(format)) return format.map(isFilesystemSelector).every(Boolean) ? format : null - + if (Array.isArray(format)) return format.map(isFilesystemSelector).every(Boolean) ? format : null; + const matched = name.match(/(.+_)?(.+)_paths?/); if (!format && matched) format = matched[2] === "folder" ? "directory" : matched[2]; return ["file", "directory"].includes(format) ? format : null; // Handle file and directory formats