From 6c8d0433d24791472e768ca5ff81446bb283322c Mon Sep 17 00:00:00 2001 From: Labhansh Agrawal Date: Thu, 6 Jul 2023 20:10:14 +0530 Subject: [PATCH] Convert tab, tabs and searchBox to function components --- lib/components/searchBox.tsx | 307 ++++++++++++++++------------------- lib/components/tab.tsx | 262 +++++++++++++++--------------- lib/components/tabs.tsx | 182 ++++++++++----------- 3 files changed, 360 insertions(+), 391 deletions(-) diff --git a/lib/components/searchBox.tsx b/lib/components/searchBox.tsx index 76af472e..b9ff6086 100644 --- a/lib/components/searchBox.tsx +++ b/lib/components/searchBox.tsx @@ -1,4 +1,4 @@ -import React, {useCallback} from 'react'; +import React, {useCallback, useRef, useEffect} from 'react'; import type {SearchBoxProps} from '../hyper'; import {VscArrowUp} from '@react-icons/all-files/vsc/VscArrowUp'; import {VscArrowDown} from '@react-icons/all-files/vsc/VscArrowDown'; @@ -82,179 +82,152 @@ const SearchButton = ({ ); }; -class SearchBox extends React.PureComponent { - searchTerm: string; - input: HTMLInputElement | null = null; - searchButtonColors: SearchButtonColors; +const SearchBox = (props: SearchBoxProps) => { + const { + caseSensitive, + wholeWord, + regex, + results, + toggleCaseSensitive, + toggleWholeWord, + toggleRegex, + next, + prev, + close, + backgroundColor, + foregroundColor, + borderColor, + selectionColor, + font + } = props; - constructor(props: SearchBoxProps) { - super(props); - this.searchTerm = ''; - this.searchButtonColors = { - backgroundColor: this.props.borderColor, - selectionColor: this.props.selectionColor, - foregroundColor: this.props.foregroundColor - }; - } + const searchTermRef = useRef(''); + const inputRef = useRef(null); - handleChange = (event: React.KeyboardEvent) => { - this.searchTerm = event.currentTarget.value; - if (event.shiftKey && event.key === 'Enter') { - this.props.prev(this.searchTerm); - } else if (event.key === 'Enter') { - this.props.next(this.searchTerm); - } + const handleChange = useCallback( + (event: React.KeyboardEvent) => { + searchTermRef.current = event.currentTarget.value; + if (event.shiftKey && event.key === 'Enter') { + prev(searchTermRef.current); + } else if (event.key === 'Enter') { + next(searchTermRef.current); + } + }, + [prev, next] + ); + + useEffect(() => { + inputRef.current?.focus(); + }, [inputRef.current]); + + const searchButtonColors: SearchButtonColors = { + backgroundColor: borderColor, + selectionColor, + foregroundColor }; - componentDidMount(): void { - this.input?.focus(); - } + return ( +
+
+ - render() { - const { - caseSensitive, - wholeWord, - regex, - results, - toggleCaseSensitive, - toggleWholeWord, - toggleRegex, - next, - prev, - close, - backgroundColor, - foregroundColor, - borderColor, - selectionColor, - font - } = this.props; + + + - return ( -
-
- { - this.input = input; - }} - placeholder="Search" - > + + + - - - - - - - - - - - -
- - - {results === undefined - ? '' - : results.resultCount === 0 - ? 'No results' - : `${results.resultIndex + 1} of ${results.resultCount}`} - - -
- prev(this.searchTerm)} - active={false} - title="Previous Match" - {...this.searchButtonColors} - > - - - - next(this.searchTerm)} - active={false} - title="Next Match" - {...this.searchButtonColors} - > - - - - close()} active={false} title="Close" {...this.searchButtonColors}> - - -
- - + + +
- ); - } -} + + + {results === undefined + ? '' + : results.resultCount === 0 + ? 'No results' + : `${results.resultIndex + 1} of ${results.resultCount}`} + + +
+ prev(searchTermRef.current)} + active={false} + title="Previous Match" + {...searchButtonColors} + > + + + + next(searchTermRef.current)} + active={false} + title="Next Match" + {...searchButtonColors} + > + + + + + + +
+ + +
+ ); +}; export default SearchBox; diff --git a/lib/components/tab.tsx b/lib/components/tab.tsx index 4d1a14c3..31797667 100644 --- a/lib/components/tab.tsx +++ b/lib/components/tab.tsx @@ -1,164 +1,160 @@ import React from 'react'; import type {TabProps} from '../hyper'; -export default class Tab extends React.PureComponent { - constructor(props: TabProps) { - super(props); - } - - handleClick = (event: React.MouseEvent) => { +const Tab = (props: TabProps) => { + const handleClick = (event: React.MouseEvent) => { const isLeftClick = event.nativeEvent.which === 1; - if (isLeftClick && !this.props.isActive) { - this.props.onSelect(); + if (isLeftClick && !props.isActive) { + props.onSelect(); } }; - handleMouseUp = (event: React.MouseEvent) => { + const handleMouseUp = (event: React.MouseEvent) => { const isMiddleClick = event.nativeEvent.which === 2; if (isMiddleClick) { - this.props.onClose(); + props.onClose(); } }; - render() { - const {isActive, isFirst, isLast, borderColor, hasActivity} = this.props; + const {isActive, isFirst, isLast, borderColor, hasActivity} = props; - return ( - -
  • +
  • + {props.customChildrenBefore} + - {this.props.customChildrenBefore} - - - {this.props.text} - + + {props.text} - - - - - - {this.props.customChildren} -
    • + + + + + + + {props.customChildren} + - -     - ); - } -} + .tab_shape { + position: absolute; + left: 4px; + top: 4px; + width: 6px; + height: 6px; + vertical-align: middle; + fill: currentColor; + shape-rendering: crispEdges; + } + `} + + ); +}; + +export default Tab; diff --git a/lib/components/tabs.tsx b/lib/components/tabs.tsx index bd5a37de..60a1ecd5 100644 --- a/lib/components/tabs.tsx +++ b/lib/components/tabs.tsx @@ -9,103 +9,103 @@ import DropdownButton from './new-tab'; const Tab = decorate(Tab_, 'Tab'); const isMac = /Mac/.test(navigator.userAgent); -export default class Tabs extends React.PureComponent { - render() { - const {tabs = [], borderColor, onChange, onClose, fullScreen} = this.props; +const Tabs = (props: TabsProps) => { + const {tabs = [], borderColor, onChange, onClose, fullScreen} = props; - const hide = !isMac && tabs.length === 1; + const hide = !isMac && tabs.length === 1; - return ( - + ); +}; + +export default Tabs;