Add search box component

2022-03-26 18:54:51 +08:00
parent ce5e6a34d8
commit 87023251a9
8 changed files with 369 additions and 30 deletions
@@ -0,0 +1,95 @@
+@import "../Theme/Theme.scss";
+
+$search-box-height: 26px;
+
+div.search-box-root {
+	min-height: $search-box-height;
+	max-width: 280px;
+	width: 100%;
+	border-radius: 3px;
+	display: flex;
+	cursor: pointer;
+	overflow: hidden;
+
+	div.search-icon {
+		min-width: $search-box-height;
+		height: $search-box-height;
+		flex-shrink: 0;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		user-select: none;
+	}
+
+	div.input-box {
+		width: calc(100% - 26px);
+		height: $search-box-height;
+
+		input {
+			width: 100%;
+			height: 100%;
+			padding: 0;
+			margin: 0;
+			border: 0;
+			outline: none;
+			background-color: transparent;
+			vertical-align: middle;
+		}
+	}
+
+	div.clean-box {
+		height: $search-box-height;
+		width: 0;
+		display: flex;
+		align-items: center;
+
+		div.clean-box-view {
+			flex-shrink: 0;
+			height: 24px;
+			width: 24px;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+			right: 24px;
+			border-radius: 3px;
+			user-select: none;
+		}
+	}
+}
+
+div.dark.search-box-root {
+
+	div.clean-box {
+
+		div.clean-box-view:hover {
+			background-color: $lt-bg-color-lvl2-dark;
+		}
+
+		div.clean-box-view {
+			background-color: $lt-bg-color-lvl3-dark;
+		}
+	}
+
+	div.input-box input {
+		color: $lt-font-color-normal-dark;
+	}
+}
+
+div.light.search-box-root {
+
+	div.clean-box {
+
+		div.clean-box-view:hover {
+			background-color: $lt-bg-color-lvl3-light;
+		}
+
+		div.clean-box-view {
+			background-color: $lt-bg-color-lvl2-light;
+		}
+	} 
+
+	div.input-box input {
+		color: $lt-font-color-normal-light;
+	}
+}
@@ -0,0 +1,60 @@
+import { AllI18nKeys, I18N } from "@Component/Localization/Localization";
+import { BackgroundLevel, FontLevel, Theme } from "@Component/Theme/Theme";
+import { useSettingWithEvent, IMixinSettingProps } from "@Context/Setting";
+import { Icon } from "@fluentui/react";
+import { Component, ReactNode } from "react";
+import "./SearchBox.scss";
+
+interface ISearchBoxProps {
+	value?: string;
+	valueChange?: (value: string) => void;
+	placeholderI18N?: AllI18nKeys;
+	className?: string;
+}
+
+@useSettingWithEvent("language")
+class SearchBox extends Component<ISearchBoxProps & IMixinSettingProps> {
+
+	private renderCleanBox() {
+		return <div className="clean-box">
+			<div
+				className="clean-box-view"
+				onClick={() => {
+					if (this.props.valueChange) {
+						this.props.valueChange("")
+					}
+				}}
+			>
+				<Icon iconName="CalculatorMultiply"/>
+			</div>
+		</div>;
+	}
+
+	public render(): ReactNode {
+		return <Theme
+			className={"search-box-root" + (this.props.className ? ` ${this.props.className}` : "")}
+			backgroundLevel={BackgroundLevel.Level3}
+			fontLevel={FontLevel.normal}
+		>
+			<div className="search-icon">
+				<Icon iconName="search"/>
+			</div>
+			<div className="input-box">
+				<input
+					value={this.props.value}
+					placeholder={
+						I18N(this.props, this.props.placeholderI18N ?? "Common.Search.Placeholder")
+					}
+					onInput={(e) => {
+						if (e.target instanceof HTMLInputElement && this.props.valueChange) {
+							this.props.valueChange(e.target.value)
+						}
+					}}
+				/>
+			</div>
+			{this.props.value ? this.renderCleanBox() : null}
+		</Theme>
+	}
+}
+
+export { SearchBox };