mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-11 22:07:08 +03:00
fix(Search): reset the input field when clicking on dismiss button
This commit is contained in:
parent
b5eb3523f4
commit
610dbe808b
@ -5,6 +5,8 @@ import * as Search from "~/components/core/Search";
|
||||
import * as Filters from "~/components/core/Filter/Filters";
|
||||
import * as Constants from "~/common/constants";
|
||||
|
||||
import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { Provider } from "~/components/core/Filter/Provider";
|
||||
import { Sidebar, SidebarTrigger } from "~/components/core/Filter/Sidebar";
|
||||
@ -149,7 +151,12 @@ export default function Filter({
|
||||
|
||||
if (disabled) {
|
||||
return showSearchResult ? (
|
||||
<Search.Content viewer={viewer} page={page} onAction={onAction} isMobile={isMobile} />
|
||||
<WebsitePrototypeWrapper
|
||||
title={`${page.pageTitle} • Slate`}
|
||||
url={`${Constants.hostname}${page.pathname}`}
|
||||
>
|
||||
<Search.Content viewer={viewer} page={page} onAction={onAction} isMobile={isMobile} />
|
||||
</WebsitePrototypeWrapper>
|
||||
) : (
|
||||
children
|
||||
);
|
||||
@ -212,7 +219,12 @@ export default function Filter({
|
||||
/>
|
||||
<div style={{ flexGrow: 1 }}>
|
||||
{showSearchResult ? (
|
||||
<Search.Content viewer={viewer} page={page} onAction={onAction} isMobile={isMobile} />
|
||||
<WebsitePrototypeWrapper
|
||||
title={`${page.pageTitle} • Slate`}
|
||||
url={`${Constants.hostname}${page.pathname}`}
|
||||
>
|
||||
<Search.Content viewer={viewer} page={page} onAction={onAction} isMobile={isMobile} />
|
||||
</WebsitePrototypeWrapper>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
|
@ -8,6 +8,7 @@ import { Input as InputPrimitive } from "~/components/system/components/Input";
|
||||
import { useSearchStore } from "~/components/core/Search/store";
|
||||
import { FileTypeGroup } from "~/components/core/FileTypeIcon";
|
||||
import { Link } from "~/components/core/Link";
|
||||
import { useIsomorphicLayoutEffect } from "~/common/hooks";
|
||||
|
||||
import DataView from "~/components/core/DataView";
|
||||
import CollectionPreviewBlock from "~/components/core/CollectionPreviewBlock";
|
||||
@ -126,6 +127,12 @@ function Input({ viewer, data, page, onAction }) {
|
||||
|
||||
const handleChange = useDebouncedOnChange({ setQuery, handleSearch });
|
||||
|
||||
// NOTE(amine): cleanup input's value when query is empty.
|
||||
const inputRef = React.useRef();
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (!query && inputRef.current) inputRef.current.value = "";
|
||||
}, [query]);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@ -140,6 +147,7 @@ function Input({ viewer, data, page, onAction }) {
|
||||
}}
|
||||
>
|
||||
<InputPrimitive
|
||||
ref={inputRef}
|
||||
full
|
||||
containerStyle={{ height: "100%" }}
|
||||
inputCss={STYLES_SEARCH_COMPONENT}
|
||||
|
@ -5,7 +5,7 @@ import * as Strings from "~/common/strings";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
|
||||
import { FocusRing } from "~/components/core/FocusRing";
|
||||
import { mergeRefs } from "~/common/utilities";
|
||||
|
||||
const INPUT_STYLES = (theme) => css`
|
||||
box-sizing: border-box;
|
||||
@ -130,21 +130,25 @@ const INPUT_COLOR_MAP = {
|
||||
|
||||
class InputPrimitive extends React.Component {
|
||||
_unit;
|
||||
_input;
|
||||
_isPin = this.props.type === "pin";
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this._input = React.createRef();
|
||||
}
|
||||
|
||||
componentDidMount = () => {
|
||||
if (this.props.unit) {
|
||||
this._input.style.paddingRight = `${this._unit.offsetWidth + 48}px`;
|
||||
this._input.current.style.paddingRight = `${this._unit.offsetWidth + 48}px`;
|
||||
}
|
||||
|
||||
if (this.props.autoFocus) {
|
||||
this._input.focus();
|
||||
this._input.current.focus();
|
||||
}
|
||||
};
|
||||
|
||||
_handleCopy = (e) => {
|
||||
this._input.select();
|
||||
this._input.current.select();
|
||||
document.execCommand("copy");
|
||||
};
|
||||
|
||||
@ -240,12 +244,7 @@ class InputPrimitive extends React.Component {
|
||||
}}
|
||||
>
|
||||
<input
|
||||
ref={(c) => {
|
||||
this._input = c;
|
||||
if (this.props.innerRef) {
|
||||
this.props.innerRef?.(c);
|
||||
}
|
||||
}}
|
||||
ref={mergeRefs([this._input, this.props.innerRef])}
|
||||
css={[INPUT_STYLES, this._isPin && STYLES_PIN_INPUT]}
|
||||
autoFocus={this.props.autoFocus}
|
||||
value={this._isPin ? this._formatPin(this.props.value) : this.props.value}
|
||||
@ -256,7 +255,7 @@ class InputPrimitive extends React.Component {
|
||||
onFocus={
|
||||
this.props.autoHighlight
|
||||
? () => {
|
||||
this._input.select();
|
||||
this._input.current.select();
|
||||
}
|
||||
: this.props.onFocus
|
||||
}
|
||||
|
@ -68,7 +68,7 @@ const STYLES_SECURITY_LOCK_WRAPPER = (theme) => css`
|
||||
`;
|
||||
|
||||
const STYLES_EMPTY_STATE_WRAPPER = (theme) => css`
|
||||
// NOTE(amine): 100vh - headers' height - Dataviewer's bottom padding
|
||||
// NOTE(amine): 100vh - headers' height - Dataview's bottom padding
|
||||
height: calc(100vh - ${theme.sizes.filterNavbar + theme.sizes.header}px - 44px);
|
||||
margin: 20px;
|
||||
@media (max-width: ${theme.sizes.mobile}px) {
|
||||
|
Loading…
Reference in New Issue
Block a user