adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-07-04 00:41:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Reuse text field component

Browse Source
This commit is contained in:
Elio Struyf
2024-01-19 13:26:42 +01:00
parent 0d19abfa8f
commit ae436e1a0e
9 changed files with 145 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboardWebView/components/Header/FilterInput.tsx
+12 -26
View File
@@ -1,8 +1,8 @@
import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/solid';
import * as React from 'react';
import useThemeColors from '../../hooks/useThemeColors';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../localization';
import { TextField } from '../Common/TextField';
export interface IFilterInputProps {
placeholder: string;
@@ -21,7 +21,6 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
onReset,
onChange
}: React.PropsWithChildren<IFilterInputProps>) => {
const { getColors } = useThemeColors();
return (
<div className="flex space-x-4 flex-1">
@@ -29,32 +28,19 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
<label htmlFor="search" className="sr-only">
{l10n.t(LocalizationKey.commonSearch)}
</label>
<div className="relative flex justify-center">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<MagnifyingGlassIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
</div>
<input
type="text"
name="search"
className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
)
}`}
placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
value={value}
autoFocus={autoFocus}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value)}
disabled={!isReady}
/>
{value && onReset && (
<button onClick={onReset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
<XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
</button>
<TextField
name='search'
icon={(
<MagnifyingGlassIcon className={`h-4 w-4 text-[var(--vscode-input-foreground)]`} aria-hidden="true" />
)}
</div>
value={value}
autoFocus={autoFocus}
placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
disabled={!isReady}
onChange={onChange}
onReset={onReset}
/>
</div>
</div>
);
src/dashboardWebView/components/Header/Searchbox.tsx
+13 -27
View File
@@ -2,11 +2,11 @@ import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/solid';
import * as React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useDebounce } from '../../../hooks/useDebounce';
import useThemeColors from '../../hooks/useThemeColors';
import { SearchAtom, SearchReadyAtom } from '../../state';
import { RefreshDashboardData } from './RefreshDashboardData';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../localization';
import { TextField } from '../Common/TextField';
export interface ISearchboxProps {
placeholder?: string;
@@ -19,10 +19,9 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
const [debounceSearchValue, setDebounceValue] = useRecoilState(SearchAtom);
const searchReady = useRecoilValue(SearchReadyAtom);
const debounceSearch = useDebounce<string>(value, 500);
const { getColors } = useThemeColors();
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue(event.target.value);
const handleChange = (newValue: string) => {
setValue(newValue);
};
const reset = React.useCallback(() => {
@@ -46,31 +45,18 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
<label htmlFor="search" className="sr-only">
{l10n.t(LocalizationKey.commonSearch)}
</label>
<div className="relative flex justify-center">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<MagnifyingGlassIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
</div>
<input
type="text"
name="search"
className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-input-border, --vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
)
}`}
placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
value={value}
onChange={handleChange}
disabled={!searchReady}
/>
{value && (
<button onClick={reset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
<XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
</button>
<TextField
name='search'
icon={(
<MagnifyingGlassIcon className={`h-4 w-4 text-[var(--vscode-input-foreground)]`} aria-hidden="true" />
)}
</div>
value={value}
placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
disabled={!searchReady}
onChange={handleChange}
onReset={reset}
/>
</div>
<RefreshDashboardData />