init

2025-01-05 11:51:39 +08:00
commit 0c7ee142cb
215 changed files with 20611 additions and 0 deletions
--- a/src/settings/components/TriggerSettings.tsx
+++ b/src/settings/components/TriggerSettings.tsx
@@ -0,0 +1,169 @@
+import * as React from "react";
+
+import { Trigger } from "../versions";
+
+
+interface IProps {
+	name: string;
+	description: string;
+	triggers: Trigger[];
+
+	setValues(value: Trigger[]): void;
+
+	errorMessage?: string;
+	errorMessages: Map<string, string>;
+}
+
+function TriggerSettings(props: IProps): React.JSX.Element {
+	const { name, triggers, description, setValues, errorMessage } = props;
+	const onClickAddButton = () => {
+		setValues([{ value: "TODO...", type: "string" }, ...triggers]);
+	};
+	const onClickRemoveButton = (index: number) => {
+		return () => {
+			const newTriggers = triggers
+				.slice(0, index)
+				.concat(triggers.slice(index + 1));
+			setValues(newTriggers);
+		};
+	};
+	const onChangeType = (index: number) => {
+		return (e: React.ChangeEvent<HTMLSelectElement>) => {
+			if (e.target.value === "regex" || e.target.value === "string") {
+				const value = triggers[index].value;
+				const newTriggers = [...triggers];
+				newTriggers[index] = { type: e.target.value as Trigger["type"], value };
+				setValues(newTriggers);
+			}
+		};
+	}
+
+	const onChangeValue = (index: number) => {
+		return (e: React.ChangeEvent<HTMLInputElement>) => {
+			const type = triggers[index].type;
+			const newTriggers = [...triggers];
+			newTriggers[index] = { type, value: decodeHiddenCharacters(e.target.value) };
+			setValues(newTriggers);
+		};
+	};
+
+	return (
+		<>
+			<div className="setting-item">
+				<div className="setting-item-info">
+					<div className="setting-item-name">{name}</div>
+					<div className="setting-item-description">
+						{description}
+					</div>
+					{props.errorMessages.get("triggerWords") !== undefined && (
+						<div className="setting-item-description ">
+							<span className={"mod-warning"}>
+								{errorMessage}
+							</span>
+						</div>
+					)}
+				</div>
+				<div className="setting-item-control">
+					<div
+						className="clickable-icon setting-editor-extra-setting-button"
+						aria-label="Add"
+						onClick={onClickAddButton}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							className="svg-icon lucide-plus"
+						>
+							<line x1="12" y1="5" x2="12" y2="19"></line>
+							<line x1="5" y1="12" x2="19" y2="12"></line>
+						</svg>
+					</div>
+				</div>
+			</div>
+
+			{triggers.map((trigger: Trigger, index: number) => (
+				<div
+					className="infio-autocomplete-setting-list-item"
+					key={`setting-list-item-${name.replace(" ", "-")}-${index}`}
+				>
+					{(props.errorMessages.get(`triggers.${index}.value`) !== undefined || props.errorMessages.get(`triggers.${index}.type`) !== undefined) && (
+						<div className="setting-item-description" style={{ width: "100%", textAlign: "left" }}>
+							{props.errorMessages.get(`triggers.${index}.value`) !== undefined && (
+								<span className={"mod-warning"}>
+									{props.errorMessages.get(`triggers.${index}.value`)}
+								</span>
+							)}
+							{props.errorMessages.get(`triggers.${index}.type`) !== undefined && (
+								<span className={"mod-warning"}>
+									{props.errorMessages.get(`triggers.${index}.type`)}
+								</span>
+							)}
+						</div>
+					)}
+					<div className="setting-item-info">
+						<div className="setting-item-control">
+							<select
+								className="dropdown"
+								value={trigger.type}
+								onChange={onChangeType(index)}
+							>
+								<option value={"string"}>
+									string
+								</option>
+								<option value={"regex"}>
+									regex
+								</option>
+							</select>
+							<input
+								style={{ whiteSpace: "pre-wrap" }}
+								type="text"
+								placeholder={"TODO..."}
+								value={encodeHiddenCharacters(trigger.value)}
+								onChange={onChangeValue(index)}
+							/>
+
+							<div
+								className="clickable-icon setting-editor-extra-setting-button"
+								aria-label="Remove"
+								onClick={onClickRemoveButton(index)}
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									className="svg-icon lucide-x"
+								>
+									<line x1="18" y1="6" x2="6" y2="18"></line>
+									<line x1="6" y1="6" x2="18" y2="18"></line>
+								</svg>
+							</div>
+						</div>
+					</div>
+				</div>
+			))}
+		</>
+	);
+}
+
+function encodeHiddenCharacters(value: string) {
+	return value.replace("\t", "\\t").replace("\n", "\\n");
+}
+
+function decodeHiddenCharacters(value: string) {
+	return value.replace("\\t", "\t").replace("\\n", "\n");
+}
+
+export default TriggerSettings;