60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
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 }; |