Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

fix(site): fix search menu for creating workspace and templates filter#11674

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
BrunoQuaresma merged 2 commits intomainfrombq/fix-create-workspace-search-field
Jan 17, 2024
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 12 additions & 48 deletionssite/src/components/Filter/filter.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,12 @@ import { Loader } from "components/Loader/Loader";
import { useDebouncedFunction } from "hooks/debounce";
import { useFilterMenu } from "./menu";
import type { BaseOption } from "./options";
import {
Search,
SearchEmpty,
SearchInput,
searchStyles,
} from "components/Menu/Search";

export type PresetFilter = {
name: string;
Expand DownExpand Up@@ -489,7 +495,7 @@ export const FilterSearchMenu = <TOption extends BaseOption>({
onQueryChange={menu.setQuery}
renderOption={(option) => (
<MenuItem
key={option.label}
key={option.value}
selected={option.value === menu.selectedOption?.value}
onClick={() => {
menu.selectOption(option);
Expand DownExpand Up@@ -576,7 +582,6 @@ function SearchMenu<TOption extends BaseOption>({
}: SearchMenuProps<TOption>) {
const menuListRef = useRef<HTMLUListElement>(null);
const searchInputRef = useRef<HTMLInputElement>(null);
const theme = useTheme();

return (
<Menu
Expand All@@ -586,10 +591,7 @@ function SearchMenu<TOption extends BaseOption>({
onQueryChange("");
}}
css={{
"& .MuiPaper-root": {
width: 320,
padding: 0,
},
"& .MuiPaper-root": searchStyles.content,
}}
// Disabled this so when we clear the filter and do some sorting in the
// search items it does not look strange. Github removes exit transitions
Expand All@@ -606,44 +608,16 @@ function SearchMenu<TOption extends BaseOption>({
}
}}
>
<li
css={{
display: "flex",
alignItems: "center",
paddingLeft: 16,
height: 40,
borderBottom: `1px solid ${theme.palette.divider}`,
}}
>
<SearchOutlined
css={{
fontSize: 14,
color: theme.palette.text.secondary,
}}
/>
<input
tabIndex={-1}
type="text"
placeholder="Search..."
<Search component="li">
<SearchInput
autoFocus
value={query}
ref={searchInputRef}
onChange={(e) => {
onQueryChange(e.target.value);
}}
css={{
height: "100%",
border: 0,
background: "none",
width: "100%",
marginLeft: 16,
outline: 0,
"&::placeholder": {
color: theme.palette.text.secondary,
},
}}
/>
</li>
</Search>

<li css={{ maxHeight: 480, overflowY: "auto" }}>
<MenuList
Expand All@@ -660,17 +634,7 @@ function SearchMenu<TOption extends BaseOption>({
options.length > 0 ? (
options.map(renderOption)
) : (
<div
css={{
fontSize: 13,
color: theme.palette.text.secondary,
textAlign: "center",
paddingTop: 8,
paddingBottom: 8,
}}
>
No results
</div>
<SearchEmpty />
)
) : (
<Loader size={14} />
Expand Down
100 changes: 100 additions & 0 deletionssite/src/components/Menu/Search.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
import SearchOutlined from "@mui/icons-material/SearchOutlined";
// eslint-disable-next-line no-restricted-imports -- use it to have the component prop
import Box, { BoxProps } from "@mui/material/Box";
import { Interpolation, Theme, useTheme } from "@mui/material/styles";
import visuallyHidden from "@mui/utils/visuallyHidden";
import { FC, HTMLAttributes, InputHTMLAttributes, forwardRef } from "react";

export const Search = forwardRef<HTMLElement, BoxProps>(
({ children, ...boxProps }, ref) => {
const theme = useTheme();

return (
<Box
ref={ref}
{...boxProps}
css={{
display: "flex",
alignItems: "center",
paddingLeft: 16,
height: 40,
borderBottom: `1px solid ${theme.palette.divider}`,
}}
>
<SearchOutlined
css={{
fontSize: 14,
color: theme.palette.text.secondary,
}}
/>
{children}
</Box>
);
},
);

type SearchInputProps = InputHTMLAttributes<HTMLInputElement> & {
label?: string;
};

export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
({ label, ...inputProps }, ref) => {
const theme = useTheme();

return (
<>
<label css={{ ...visuallyHidden }} htmlFor={inputProps.id}>
{label}
</label>
<input
ref={ref}
tabIndex={-1}
type="text"
placeholder="Search..."
css={{
height: "100%",
border: 0,
background: "none",
flex: 1,
marginLeft: 16,
outline: 0,
"&::placeholder": {
color: theme.palette.text.secondary,
},
}}
{...inputProps}
/>
</>
);
},
);

export const SearchEmpty: FC<HTMLAttributes<HTMLDivElement>> = ({
children = "Not found",
...props
}) => {
const theme = useTheme();

return (
<div
css={{
fontSize: 13,
color: theme.palette.text.secondary,
textAlign: "center",
paddingTop: 8,
paddingBottom: 8,
}}
{...props}
>
{children}
</div>
);
};

export const searchStyles = {
content: {
width: 320,
padding: 0,
borderRadius: 4,
},
} satisfies Record<string, Interpolation<Theme>>;
25 changes: 14 additions & 11 deletionssite/src/pages/WorkspacesPage/WorkspacesButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,14 +11,14 @@ import AddIcon from "@mui/icons-material/AddOutlined";
import OpenIcon from "@mui/icons-material/OpenInNewOutlined";
import { Loader } from "components/Loader/Loader";
import { OverflowY } from "components/OverflowY/OverflowY";
import { EmptyState } from "components/EmptyState/EmptyState";
import { Avatar } from "components/Avatar/Avatar";
import { SearchBox } from "./WorkspacesSearchBox";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "components/Popover/Popover";
import { SearchEmpty, searchStyles } from "components/Menu/Search";

const ICON_SIZE = 18;

Expand All@@ -43,17 +43,15 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
let emptyState: ReactNode = undefined;
if (templates?.length === 0) {
emptyState = (
<EmptyState
message="No templates yet"
cta={
<Link to="/templates" component={RouterLink}>
Create one now.
</Link>
}
/>
<SearchEmpty>
No templates yet.{" "}
<Link to="/templates" component={RouterLink}>
Create one now.
</Link>
</SearchEmpty>
);
} else if (processed.length === 0) {
emptyState = <EmptyState message="No templatesmatch your text" />;
emptyState = <SearchEmpty>No templatesfound</SearchEmpty>;
}

return (
Expand All@@ -63,7 +61,12 @@ export const WorkspacesButton: FC<WorkspacesButtonProps> = ({
{children}
</Button>
</PopoverTrigger>
<PopoverContent horizontal="right">
<PopoverContent
horizontal="right"
css={{
".MuiPaper-root": searchStyles.content,
}}
>
<SearchBox
value={searchTerm}
onValueChange={(newValue) => setSearchTerm(newValue)}
Expand Down
49 changes: 5 additions & 44 deletionssite/src/pages/WorkspacesPage/WorkspacesSearchBox.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,9 +11,7 @@ import {
forwardRef,
useId,
} from "react";
import SearchIcon from "@mui/icons-material/SearchOutlined";
import { visuallyHidden } from "@mui/utils";
import { useTheme } from "@emotion/react";
import { Search, SearchInput } from "components/Menu/Search";

interface SearchBoxProps extends InputHTMLAttributes<HTMLInputElement> {
label?: string;
Expand All@@ -35,39 +33,12 @@ export const SearchBox = forwardRef(function SearchBox(
} = props;

const hookId = useId();
const theme = useTheme();

const inputId = `${hookId}-${SearchBox.name}-input`;

return (
<div
css={{
display: "flex",
flexFlow: "row nowrap",
alignItems: "center",
padding: "0 8px",
height: "40px",
borderBottom: `1px solid ${theme.palette.divider}`,
}}
>
<div css={{ width: 18 }}>
<SearchIcon
css={{
display: "block",
fontSize: "14px",
marginLeft: "auto",
marginRight: "auto",
color: theme.palette.text.secondary,
}}
/>
</div>

<label css={{ ...visuallyHidden }} htmlFor={inputId}>
{label}
</label>

<input
type="text"
<Search>
<SearchInput
label={label}
ref={ref}
id={inputId}
autoFocus
Expand All@@ -76,17 +47,7 @@ export const SearchBox = forwardRef(function SearchBox(
{...attrs}
onKeyDown={onKeyDown}
onChange={(e) => onValueChange(e.target.value)}
css={{
height: "100%",
border: 0,
background: "none",
width: "100%",
outline: 0,
"&::placeholder": {
color: theme.palette.text.secondary,
},
}}
/>
</div>
</Search>
);
});
[8]ページ先頭
©2009-2025 Movatter.jp