visualifyjs 2.5.3-2.dev → 2.5.3-9-dev

package/src/core/components/searchbar.js

@@ -1,131 +1,131 @@
-import React, { useState, useEffect } from 'react';
-import '../../_css/autoSuggestion.css';
-import { useAppContext } from '../appContext';
-import conditionalFetch from '../fetch/condfetch';
-
-function SearchBar({ props, style }) {
-	const [suggestions, setSuggestions] = useState([]);
-	const [wordlist, setWordlist] = useState([]);
-	const [inputValue, setInputValue] = useState('');
-
-	const { sharedData, setSharedData } = useAppContext();
-
-	const {
-		id,
-		title = 'Search',
-		className,
-		style: _style = { height: '130px', width: '200px' },
-		placeholder = 'Search...',
-		wordlimit = 15,
-		suggestLen = 3,
-		searchStyle = {
-			borderRadius: '15px',
-			width: '100%',
-		},
-		config = {},
-		debug,
-	} = props;
-
-	if (config.save && typeof config.save !== 'string') config.save = id;
-
-	useEffect(() => {
-		if (config.source) {
-			const fetchWordlist = async () => {
-				const response = await conditionalFetch(
-					config.source,
-					sharedData,
-					null,
-					null,
-				);
-				if (response) {
-					const newWordlist =
-						response[config.source.responseKey] || response;
-					setWordlist(newWordlist);
-				} else if (config.source.trigger) {
-					console.log('wait for trigger');
-				} else {
-					console.error('Error fetching wordlist.');
-				}
-			};
-
-			if (Array.isArray(config.source)) {
-				setWordlist(config.source);
-			} else if (typeof config.source === 'object') {
-				fetchWordlist();
-			}
-		}
-	}, [config.source, debug, sharedData]);
-
-	useEffect(() => {
-		// 更新inputValue，但不要影响其他组件的共享数据
-		setInputValue(sharedData[id] || '');
-	}, [sharedData, id]);
-
-	const handleInputChange = (e) => {
-		const inputValue = e.target.value;
-		const inputValueLowerCase = inputValue.trim().toLowerCase();
-		setInputValue(inputValue);
-
-		if (inputValue.length >= suggestLen) {
-			setSuggestions(
-				wordlist
-					.filter((word) =>
-						word.toLowerCase().includes(inputValueLowerCase),
-					)
-					.slice(0, wordlimit),
-			);
-		}
-
-		if (
-			config.save &&
-			(wordlist.includes(inputValue) || inputValue === '')
-		) {
-			setSharedData((prevSharedData) => ({
-				...prevSharedData,
-				[config.save]: inputValue,
-			}));
-		}
-	};
-
-	const handleSuggestionClick = (suggestion) => {
-		setInputValue(suggestion);
-		setSuggestions([]);
-
-		if (config.save) {
-			setSharedData((prevSharedData) => ({
-				...prevSharedData,
-				[config.save]: suggestion,
-			}));
-		}
-	};
-
-	return (
-		<div
-			id={id}
-			style={{ ...style, ..._style }}
-			className={className}>
-			{title && <h3>{title}</h3>}
-			<div className='autosuggestion'>
-				<input
-					type='text'
-					placeholder={placeholder}
-					style={searchStyle}
-					value={inputValue}
-					onChange={handleInputChange}
-				/>
-				<ul className='suggestion-list'>
-					{suggestions.map((suggestion, index) => (
-						<li
-							key={index}
-							className='suggestion-item'
-							onClick={() => handleSuggestionClick(suggestion)}>
-							{suggestion}
-						</li>
-					))}
-				</ul>
-			</div>
-		</div>
-	);
-}
-
-export default SearchBar;
+import React, { useState, useEffect } from 'react';
+import '../../_css/autoSuggestion.css';
+import { useAppContext } from '../appContext';
+import conditionalFetch from '../fetch/condfetch';
+
+function SearchBar({ props, style }) {
+	const [suggestions, setSuggestions] = useState([]);
+	const [wordlist, setWordlist] = useState([]);
+	const [inputValue, setInputValue] = useState('');
+
+	const { sharedData, setSharedData } = useAppContext();
+
+	const {
+		id,
+		title = 'Search',
+		className,
+		style: _style = { height: '130px', width: '200px' },
+		placeholder = 'Search...',
+		wordlimit = 15,
+		suggestLen = 3,
+		searchStyle = {
+			borderRadius: '15px',
+			width: '100%',
+		},
+		config = {},
+		debug,
+	} = props;
+
+	if (config.save && typeof config.save !== 'string') config.save = id;
+
+	useEffect(() => {
+		if (config.source) {
+			const fetchWordlist = async () => {
+				const response = await conditionalFetch(
+					config.source,
+					sharedData,
+					null,
+					null,
+				);
+				if (response) {
+					const newWordlist =
+						response[config.source.responseKey] || response;
+					setWordlist(newWordlist);
+				} else if (config.source.trigger) {
+					console.log('wait for trigger');
+				} else {
+					console.error('Error fetching wordlist.');
+				}
+			};
+
+			if (Array.isArray(config.source)) {
+				setWordlist(config.source);
+			} else if (typeof config.source === 'object') {
+				fetchWordlist();
+			}
+		}
+	}, [config.source, debug, sharedData]);
+
+	useEffect(() => {
+		// 更新inputValue，但不要影响其他组件的共享数据
+		setInputValue(sharedData[id] || '');
+	}, [sharedData, id]);
+
+	const handleInputChange = (e) => {
+		const inputValue = e.target.value;
+		const inputValueLowerCase = inputValue.trim().toLowerCase();
+		setInputValue(inputValue);
+
+		if (inputValue.length >= suggestLen) {
+			setSuggestions(
+				wordlist
+					.filter((word) =>
+						word.toLowerCase().includes(inputValueLowerCase),
+					)
+					.slice(0, wordlimit),
+			);
+		}
+
+		if (
+			config.save &&
+			(wordlist.includes(inputValue) || inputValue === '')
+		) {
+			setSharedData((prevSharedData) => ({
+				...prevSharedData,
+				[config.save]: inputValue,
+			}));
+		}
+	};
+
+	const handleSuggestionClick = (suggestion) => {
+		setInputValue(suggestion);
+		setSuggestions([]);
+
+		if (config.save) {
+			setSharedData((prevSharedData) => ({
+				...prevSharedData,
+				[config.save]: suggestion,
+			}));
+		}
+	};
+
+	return (
+		<div
+			id={id}
+			style={{ ...style, ..._style }}
+			className={className}>
+			{title && <h3>{title}</h3>}
+			<div className='autosuggestion'>
+				<input
+					type='text'
+					placeholder={placeholder}
+					style={searchStyle}
+					value={inputValue}
+					onChange={handleInputChange}
+				/>
+				<ul className='suggestion-list'>
+					{suggestions.map((suggestion, index) => (
+						<li
+							key={index}
+							className='suggestion-item'
+							onClick={() => handleSuggestionClick(suggestion)}>
+							{suggestion}
+						</li>
+					))}
+				</ul>
+			</div>
+		</div>
+	);
+}
+
+export default SearchBar;

package/src/core/components/selection.js

@@ -1,193 +1,193 @@
-import React, { useEffect, useState } from 'react';
-import { useAppContext } from '../appContext';
-import simplefetch from '../fetch/fetch';
-import Select from 'react-select';
-
-function Selection({ props, style }) {
-	const { debug } = props;
-	const { style: _style } = props;
-
-	// Render title if it exists
-	const { title } = props;
-	const renderTitle = () => {
-		return title && <h3>{title}</h3>;
-	};
-
-	// If val is exist, store it to SharedData
-	const { sharedData, setSharedData } = useAppContext();
-
-	// store attr in state so that we can update it when it changes
-	const [selected, setSelected] = useState([]);
-
-	// store options in state so that we can update it when it changes
-	const [selectionOptions, setSelectionOptions] = useState([]);
-
-	const [menuIsOpen, setMenuIsOpen] = useState();
-
-	useEffect(() => {
-		const { selection, urlval, rm_suffix, nested = false, entry } = props;
-
-		const fetchData = async () => {
-			if (nested) {
-				if (entry) {
-					const entryValue = sharedData[entry];
-					if (entryValue && entryValue.length > 0) {
-						if (debug)
-							console.log('Selection: entryValue:', entryValue);
-						if (debug)
-							console.log(
-								'Selection: nested url:',
-								selection + entryValue[0],
-								urlval,
-							);
-						try {
-							const response = await simplefetch(
-								selection + entryValue[0],
-								{
-									key: urlval,
-									debug: debug,
-								},
-							);
-							// remove the suffix "_metadata" from the options
-							try {
-								const removed_suffix = response.map((item) =>
-									item.replace(rm_suffix, ''),
-								);
-								// insert the "None" into removed_Suffix
-								removed_suffix.unshift('None');
-								if (debug)
-									console.log(
-										'Removed suffix:',
-										removed_suffix,
-									);
-								setSelectionOptions(removed_suffix);
-							} catch (error) {
-								setSelectionOptions([]);
-							}
-						} catch (error) {
-							console.error('Error fetching options:', error);
-						}
-					}
-				} else
-					console.error(
-						'Error: nested is true but entry is not defined.',
-					);
-			} else {
-				try {
-					const response = await simplefetch(selection, {
-						key: urlval,
-						debug: debug,
-					});
-					// remove the suffix "_metadata" from the options
-					try {
-						const removed_suffix = response.map((item) =>
-							item.replace(rm_suffix, ''),
-						);
-						//console.log("Removed suffix:", removed_suffix);
-						setSelectionOptions(removed_suffix);
-					} catch (error) {
-						setSelectionOptions(response);
-					}
-				} catch (error) {
-					console.error('Error fetching options:', error);
-				}
-			}
-		};
-
-		fetchData();
-	}, [props, setSelectionOptions, sharedData, debug]);
-
-	const handleChange = (selectedOptions) => {
-		if (single) {
-			// If single selection, selectedOptions will be an object
-			setSelected(selectedOptions ? [selectedOptions] : []);
-		} else {
-			// If multi-selection, selectedOptions will be an array
-			setSelected(selectedOptions || []);
-		}
-	};
-
-	const onInputChange = (inputValue, { action, prevInputValue }) => {
-		if (action === 'input-change') return inputValue;
-		if (action === 'menu-close') {
-			if (prevInputValue) setMenuIsOpen(true);
-			else setMenuIsOpen(undefined);
-		}
-		return prevInputValue;
-	};
-
-	// ----------------- Selection bar ------------------------------------------------
-	const { config = {} } = props;
-	const {
-		bar_width = '300px',
-		bar_margin = '0 auto',
-		bar_maxHeight = '300px',
-		menu_maxHeight = '300px',
-		single = false,
-	} = config;
-
-	const renderSelection = () => {
-		const options = selectionOptions.map((item) => ({
-			value: item,
-			label: item,
-		}));
-
-		return (
-			<div className='select-wrapper'>
-				<Select
-					isMulti={!single}
-					options={options}
-					value={selected}
-					onChange={handleChange}
-					onInputChange={onInputChange}
-					menuIsOpen={menuIsOpen}
-					styles={{
-						container: (provided) => ({
-							...provided,
-							width: bar_width,
-							margin: bar_margin,
-							maxHeight: bar_maxHeight,
-						}),
-						valueContainer: (provided) => ({
-							...provided,
-							maxHeight: bar_maxHeight ?? 'auto',
-							overflowY: 'auto',
-						}),
-						menu: (provided) => ({
-							...provided,
-							maxHeight: menu_maxHeight ?? 'auto', // Set the max height as required
-							overflowY: 'auto', // Enable scroll if exceeds max height
-						}),
-					}}
-				/>
-			</div>
-		);
-	};
-
-	// Store value to SharedData
-	const { id, val } = props;
-
-	useEffect(() => {
-		if (val) {
-			setSharedData((prevSharedData) => {
-				const selectedValues = selected
-					? selected.map((option) => option.value)
-					: [];
-				//console.log("Selection: selected:", selectedValues);
-				return { ...prevSharedData, [val]: selectedValues };
-			});
-		}
-	}, [selected, val, setSharedData]);
-
-	return (
-		<div
-			key={id}
-			style={{ ...style, ..._style }}
-			className='selection-box-container'>
-			{renderTitle()}
-			{renderSelection()}
-		</div>
-	);
-}
-
-export default Selection;
+import React, { useEffect, useState } from 'react';
+import { useAppContext } from '../appContext';
+import simplefetch from '../fetch/fetch';
+import Select from 'react-select';
+
+function Selection({ props, style }) {
+	const { debug } = props;
+	const { style: _style } = props;
+
+	// Render title if it exists
+	const { title } = props;
+	const renderTitle = () => {
+		return title && <h3>{title}</h3>;
+	};
+
+	// If val is exist, store it to SharedData
+	const { sharedData, setSharedData } = useAppContext();
+
+	// store attr in state so that we can update it when it changes
+	const [selected, setSelected] = useState([]);
+
+	// store options in state so that we can update it when it changes
+	const [selectionOptions, setSelectionOptions] = useState([]);
+
+	const [menuIsOpen, setMenuIsOpen] = useState();
+
+	useEffect(() => {
+		const { selection, urlval, rm_suffix, nested = false, entry } = props;
+
+		const fetchData = async () => {
+			if (nested) {
+				if (entry) {
+					const entryValue = sharedData[entry];
+					if (entryValue && entryValue.length > 0) {
+						if (debug)
+							console.log('Selection: entryValue:', entryValue);
+						if (debug)
+							console.log(
+								'Selection: nested url:',
+								selection + entryValue[0],
+								urlval,
+							);
+						try {
+							const response = await simplefetch(
+								selection + entryValue[0],
+								{
+									key: urlval,
+									debug: debug,
+								},
+							);
+							// remove the suffix "_metadata" from the options
+							try {
+								const removed_suffix = response.map((item) =>
+									item.replace(rm_suffix, ''),
+								);
+								// insert the "None" into removed_Suffix
+								removed_suffix.unshift('None');
+								if (debug)
+									console.log(
+										'Removed suffix:',
+										removed_suffix,
+									);
+								setSelectionOptions(removed_suffix);
+							} catch (error) {
+								setSelectionOptions([]);
+							}
+						} catch (error) {
+							console.error('Error fetching options:', error);
+						}
+					}
+				} else
+					console.error(
+						'Error: nested is true but entry is not defined.',
+					);
+			} else {
+				try {
+					const response = await simplefetch(selection, {
+						key: urlval,
+						debug: debug,
+					});
+					// remove the suffix "_metadata" from the options
+					try {
+						const removed_suffix = response.map((item) =>
+							item.replace(rm_suffix, ''),
+						);
+						//console.log("Removed suffix:", removed_suffix);
+						setSelectionOptions(removed_suffix);
+					} catch (error) {
+						setSelectionOptions(response);
+					}
+				} catch (error) {
+					console.error('Error fetching options:', error);
+				}
+			}
+		};
+
+		fetchData();
+	}, [props, setSelectionOptions, sharedData, debug]);
+
+	const handleChange = (selectedOptions) => {
+		if (single) {
+			// If single selection, selectedOptions will be an object
+			setSelected(selectedOptions ? [selectedOptions] : []);
+		} else {
+			// If multi-selection, selectedOptions will be an array
+			setSelected(selectedOptions || []);
+		}
+	};
+
+	const onInputChange = (inputValue, { action, prevInputValue }) => {
+		if (action === 'input-change') return inputValue;
+		if (action === 'menu-close') {
+			if (prevInputValue) setMenuIsOpen(true);
+			else setMenuIsOpen(undefined);
+		}
+		return prevInputValue;
+	};
+
+	// ----------------- Selection bar ------------------------------------------------
+	const { config = {} } = props;
+	const {
+		bar_width = '300px',
+		bar_margin = '0 auto',
+		bar_maxHeight = '300px',
+		menu_maxHeight = '300px',
+		single = false,
+	} = config;
+
+	const renderSelection = () => {
+		const options = selectionOptions.map((item) => ({
+			value: item,
+			label: item,
+		}));
+
+		return (
+			<div className='select-wrapper'>
+				<Select
+					isMulti={!single}
+					options={options}
+					value={selected}
+					onChange={handleChange}
+					onInputChange={onInputChange}
+					menuIsOpen={menuIsOpen}
+					styles={{
+						container: (provided) => ({
+							...provided,
+							width: bar_width,
+							margin: bar_margin,
+							maxHeight: bar_maxHeight,
+						}),
+						valueContainer: (provided) => ({
+							...provided,
+							maxHeight: bar_maxHeight ?? 'auto',
+							overflowY: 'auto',
+						}),
+						menu: (provided) => ({
+							...provided,
+							maxHeight: menu_maxHeight ?? 'auto', // Set the max height as required
+							overflowY: 'auto', // Enable scroll if exceeds max height
+						}),
+					}}
+				/>
+			</div>
+		);
+	};
+
+	// Store value to SharedData
+	const { id, val } = props;
+
+	useEffect(() => {
+		if (val) {
+			setSharedData((prevSharedData) => {
+				const selectedValues = selected
+					? selected.map((option) => option.value)
+					: [];
+				//console.log("Selection: selected:", selectedValues);
+				return { ...prevSharedData, [val]: selectedValues };
+			});
+		}
+	}, [selected, val, setSharedData]);
+
+	return (
+		<div
+			key={id}
+			style={{ ...style, ..._style }}
+			className='selection-box-container'>
+			{renderTitle()}
+			{renderSelection()}
+		</div>
+	);
+}
+
+export default Selection;