Merge pull request #69 from LuchoTurtle/warning-message

[PR] Adding warning message option.

README.md

@@ -21,7 +21,7 @@ A Tweakpane plugin for importing files.
 > You can install it.
 > 
 > ```sh
-> npm i tweakpane-plugin-file-import@0.1.4
+> npm i tweakpane-plugin-file-import@0.2.0
 > ```
 > 
 > And use it like so.
@@ -79,6 +79,7 @@ pane
 		view: 'file-input',
 		lineCount: 3,
 		filetypes: ['.png', '.jpg'],
+		invalidFiletypeMessage: "We can't accept those filetypes!"
 	})
 	.on('change', (ev) => {
 		console.log(ev.value);
@@ -90,6 +91,7 @@ pane
 		view: 'file-input',
 		lineCount: 3,
 		filetypes: ['.png', '.jpg'],
+		invalidFiletypeMessage: "We can't accept those filetypes!"
 	})
 	.on('change', (ev) => {
 		console.log(ev.value);
@@ -103,6 +105,8 @@ pane
 |-----------|--------|--------------------------------|
 | lineCount | int    | Number of lines for the height of the container. Similar to [FPS graph ](https://github.com/tweakpane/plugin-essentials#fps-graph)          |
 | filetypes     | array | Array of valid file extensions.             |
+| invalidFiletypeMessage     | string | String shown when the user tries to upload an invalid filetype.             |
+
 
 
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tweakpane-plugin-file-import",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"description": "A general-purpose and simple file input Tweakpane plugin",
 	"homepage": "https://github.com/LuchoTurtle/tweakpane-plugin-file-import",
 	"main": "dist/tweakpane-plugin-file-import.js",

src/controller/controller.ts

@@ -6,6 +6,7 @@ interface Config {
 	value: Value<File | null>;
 	viewProps: ViewProps;
 
+	invalidFiletypeMessage: string;
 	lineCount: number;
 	filetypes?: string[];
 }
@@ -24,6 +25,7 @@ export class FilePluginController implements Controller<FilePluginView> {
 		this.view = new FilePluginView(doc, {
 			viewProps: this.viewProps,
 			value: config.value,
+			invalidFiletypeMessage: config.invalidFiletypeMessage,
 			lineCount: config.lineCount,
 			filetypes: config.filetypes,
 		});
@@ -78,10 +80,8 @@ export class FilePluginController implements Controller<FilePluginView> {
 	 */
 	private showWarning() {
 		this.view.warning.style.display = 'block';
-		this.view.warning.innerHTML = 'Unaccepted file type.';
 		setTimeout(() => {
 			// Resetting warning text
-			this.view.warning.innerHTML = '';
 			this.view.warning.style.display = 'none';
 		}, 5000);
 	}
@@ -117,7 +117,6 @@ export class FilePluginController implements Controller<FilePluginView> {
 			this.view.input.value = '';
 
 			// Resetting the warning text
-			this.view.warning.innerHTML = '';
 			this.view.warning.style.display = 'none';
 		}
 	}
@@ -192,7 +191,6 @@ export class FilePluginController implements Controller<FilePluginView> {
 			}
 
 			// Resetting warning text
-			this.view.warning.innerHTML = '';
 			this.view.warning.style.display = 'none';
 
 			// Adding button to delete
@@ -207,7 +205,6 @@ export class FilePluginController implements Controller<FilePluginView> {
 			containerEl.removeChild(textEl);
 
 			// Resetting warning text
-			this.view.warning.innerHTML = '';
 			this.view.warning.style.display = 'none';
 
 			// Hiding button and resetting border

src/plugin.ts

@@ -11,6 +11,7 @@ import {FilePluginController} from './controller/controller.js';
 
 export interface PluginInputParams extends BaseInputParams {
 	view: 'file-input';
+	invalidFiletypeMessage?: string;
 	lineCount?: number;
 	filetypes?: string[];
 }
@@ -36,6 +37,7 @@ export const TweakpaneFileInputPlugin: InputBindingPlugin<
 			// `view` option may be useful to provide a custom control for primitive values
 			view: p.required.constant('file-input'),
 
+			invalidFiletypeMessage: p.optional.string,
 			lineCount: p.optional.number,
 			filetypes: p.optional.array(p.required.string),
 		}));
@@ -73,12 +75,15 @@ export const TweakpaneFileInputPlugin: InputBindingPlugin<
 
 	controller(args) {
 		const defaultNumberOfLines = 3;
+		const defaultFiletypeWarningText = 'Unaccepted file type.';
 
 		// Create a controller for the plugin
 		return new FilePluginController(args.document, {
 			value: args.value,
 			viewProps: args.viewProps,
 
+			invalidFiletypeMessage:
+				args.params.invalidFiletypeMessage ?? defaultFiletypeWarningText,
 			lineCount: args.params.lineCount ?? defaultNumberOfLines,
 			filetypes: args.params.filetypes,
 		});

src/sass/plugin.scss

@@ -35,8 +35,7 @@
 		display: inline-block;
 		font-size: 0.9em;
 		height: max-content;
-		line-height: 0.9;
-		margin: 0.2rem;
+		line-height: 1.5;
 		opacity: 0.5;
 		white-space: normal;
 		width: max-content;

src/view/view.ts

@@ -4,6 +4,7 @@ interface Config {
 	value: Value<File | null>;
 	viewProps: ViewProps;
 
+	invalidFiletypeMessage: string;
 	lineCount: number;
 	filetypes?: string[];
 }
@@ -55,6 +56,7 @@ export class FilePluginView implements View {
 		// Warning text
 		this.warning = doc.createElement('span');
 		this.warning.classList.add(containerClassName('warning'));
+		this.warning.innerHTML = config.invalidFiletypeMessage;
 		this.warning.style.display = 'none';
 
 		// Delete button

test/browser.html

@@ -20,8 +20,9 @@
 			pane
 				.addBinding(params, 'file', {
 					view: 'file-input',
+					invalidFiletypeMessage: "We can't accept those filetypes!",
 					lineCount: 3,
-					filetypes: ['.png', '.jpg'],
+					filetypes: ['.png', '.jpeg'],
 				})
 				.on('change', (ev) => {
 					console.log(ev.value);