Emote Menu Search (#87)

* Input styling * Filter by search input * Set input background color
SevenTV · Aug 3, 2021 · ebdcd5a · ebdcd5a
1 parent 9ca6018
commit ebdcd5a
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 5 deletions.
diff --git a/src/Content/Components/EmoteMenu/EmoteMenu.tsx b/src/Content/Components/EmoteMenu/EmoteMenu.tsx
@@ -18,7 +18,8 @@ const styles = () => ({
 export class EmoteMenu extends React.Component<EmoteMenu.Props, EmoteMenu.State> {
 	ref: React.RefObject<HTMLDivElement>;
 	state = {
-		provider: '7TV'
+		provider: '7TV',
+		search: ''
 	} as EmoteMenu.State;
 
 	constructor(props: EmoteMenu.Props) {
@@ -44,28 +45,35 @@ export class EmoteMenu extends React.Component<EmoteMenu.Props, EmoteMenu.State>
 				<EmoteMenu.Scrollable className='seventv-emote-menu-scrollable'>
 					{/* Render current emotes*/}
 					<EmoteMenu.EmoteListSection>
-						<h3>Channel Emotes</h3>
+						<EmoteMenu.CategoryHeader>Channel Emotes</EmoteMenu.CategoryHeader>
 					</EmoteMenu.EmoteListSection>
 					<EmoteMenu.EmoteList>
-						{this.emotes.getAllEmotes([this.state.provider]).filter(e => !e.isGlobal()).map((e, i) => (
+						{this.emotes.getAllEmotes([this.state.provider]).filter(e => !e.isGlobal() && e.name.toLowerCase().includes(this.state.search)).map((e, i) => (
 							<span key={`${i}-${e.id}`} onClick={() => this.onInsertEmote(e)}>
 								<EmoteComponent emote={e}></EmoteComponent>
 							</span>
 						))}
 					</EmoteMenu.EmoteList>
 
 					<EmoteMenu.EmoteListSection>
-						<h3>Global Emotes</h3>
+						<EmoteMenu.CategoryHeader>Global Emotes</EmoteMenu.CategoryHeader>
 					</EmoteMenu.EmoteListSection>
 					<EmoteMenu.EmoteList>
-						{this.emotes.getAllEmotes([this.state.provider]).filter(e => e.isGlobal()).map((e, i) => (
+						{this.emotes.getAllEmotes([this.state.provider]).filter(e => e.isGlobal() && e.name.toLowerCase().includes(this.state.search)).map((e, i) => (
 							<span key={`${i}-${e.id}`} onClick={() => this.onInsertEmote(e)}>
 								<EmoteComponent emote={e}></EmoteComponent>
 							</span>
 						))}
 					</EmoteMenu.EmoteList>
 
 				</EmoteMenu.Scrollable>
+
+				{/** Search Bar */}
+				<EmoteMenu.Search>
+					<input className='seventv-emote-search' placeholder='Search Emotes...' onChange={ev => this.onSearchChange(ev)}>
+
+					</input>
+				</EmoteMenu.Search>
 			</EmoteMenu.Styled>
 		);
 	}
@@ -84,6 +92,14 @@ export class EmoteMenu extends React.Component<EmoteMenu.Props, EmoteMenu.State>
 		return (this.props.bounds?.left ?? 0) - (offset / 2) - 64;
 	}
 
+	onSearchChange(ev: React.ChangeEvent<HTMLInputElement>): void {
+		const value = ev.currentTarget.value;
+
+		this.setState({
+			search: value.toLowerCase()
+		});
+	}
+
 	onInsertEmote(emote: EmoteStore.Emote): void {
 		this.props.main.app?.sendMessageDown('InsertEmoteInChatInput', emote.name);
 	}
@@ -117,6 +133,7 @@ export namespace EmoteMenu {
 
 	export interface State {
 		provider: DataStructure.Emote.Provider;
+		search: string;
 	}
 
 	export const Styled = styled.div`
@@ -149,6 +166,17 @@ export namespace EmoteMenu {
 		}
 	`;
 
+	export const CategoryHeader = styled.span`
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		font-size: 1.65rem;
+
+		border-style: solid;
+		border-bottom-width: 1px;
+		border-color: white;
+	`;
+
 	export const Search = styled.div`
 		margin: 1em;
 		margin-bottom: 1.75em;

diff --git a/src/Style/Style.scss b/src/Style/Style.scss
@@ -40,4 +40,22 @@
 	.seventv-emote-menu-scrollable {
 		background-color: var(--color-background-base);
 	}
+
+	.seventv-emote-search, input {
+		width: 100%;
+		height: 3em;
+		color: white;
+		border-color: white;
+		border-width: 1px;
+		border-style: solid;
+		border-radius: 4px;
+		background-color: var(--color-background-base);
+		padding: .5em;
+
+		&:focus {
+			outline: none !important;
+			border: 1px solid rgb(0, 195, 255) ;
+			box-shadow: 0 0 10px rgb(0, 195, 255) !important;
+		}
+	}
 }