mirror of
https://github.com/filecoin-project/slate.git
synced 2024-09-20 10:47:18 +03:00
minor fixes for search
This commit is contained in:
parent
81304a7ab9
commit
5848a17dc5
@ -62,9 +62,7 @@ export default class Profile extends React.Component {
|
||||
>
|
||||
<SlatePreviewBlock
|
||||
slate={slate}
|
||||
editing={
|
||||
relation.slate.data.ownerId === this.props.viewer.id
|
||||
}
|
||||
editing={this.props.editing}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
@ -3,6 +3,7 @@ import * as Constants from "~/common/constants";
|
||||
import * as SVG from "~/common/svg";
|
||||
|
||||
import { css } from "@emotion/react";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
|
||||
const STYLES_DROPDOWN_CONTAINER = css`
|
||||
box-sizing: border-box;
|
||||
@ -30,8 +31,9 @@ const STYLES_DROPDOWN_ITEM = css`
|
||||
padding: 8px;
|
||||
font-size: 0.8em;
|
||||
border-radius: 16px;
|
||||
border: 1px solid ${Constants.system.white};
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
margin-bottom: -1px;
|
||||
|
||||
:hover {
|
||||
border-color: ${Constants.system.border} !important;
|
||||
@ -73,6 +75,11 @@ const STYLES_INPUT = css`
|
||||
}
|
||||
`;
|
||||
|
||||
const STYLES_LOADER = css`
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
`;
|
||||
|
||||
export class SearchDropdown extends React.Component {
|
||||
_input;
|
||||
_optionRoot;
|
||||
@ -87,13 +94,18 @@ export class SearchDropdown extends React.Component {
|
||||
|
||||
componentDidMount = () => {
|
||||
window.addEventListener("keydown", this._handleDocumentKeydown);
|
||||
this._input.focus();
|
||||
};
|
||||
|
||||
componentWillUnmount = () => {
|
||||
window.removeEventListener("keydown", this._handleDocumentKeydown);
|
||||
};
|
||||
|
||||
componentDidUpdate = (prevProps) => {
|
||||
if (prevProps.disabled && !this.props.disabled) {
|
||||
this._input.focus();
|
||||
}
|
||||
};
|
||||
|
||||
_handleChange = (e) => {
|
||||
if (this.state.selectedIndex !== -1) {
|
||||
this.setState({ selectedIndex: -1 });
|
||||
@ -150,23 +162,29 @@ export class SearchDropdown extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div css={STYLES_DROPDOWN_CONTAINER} style={this.props.containerStyle}>
|
||||
<div style={{ position: "relative" }}>
|
||||
<input
|
||||
css={STYLES_INPUT}
|
||||
value={this.props.inputValue}
|
||||
placeholder={this.props.placeholder}
|
||||
style={this.props.inputStyle}
|
||||
onChange={this._handleChange}
|
||||
ref={(c) => {
|
||||
this._input = c;
|
||||
}}
|
||||
/>
|
||||
<SVG.Search
|
||||
height="20px"
|
||||
style={{ position: "absolute", left: "12px", top: "10px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{this.props.disabled ? (
|
||||
<div css={STYLES_LOADER}>
|
||||
<LoaderSpinner />
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ position: "relative" }}>
|
||||
<input
|
||||
disabled={this.props.disabled}
|
||||
css={STYLES_INPUT}
|
||||
value={this.props.inputValue}
|
||||
placeholder={this.props.placeholder}
|
||||
style={this.props.inputStyle}
|
||||
onChange={this._handleChange}
|
||||
ref={(c) => {
|
||||
this._input = c;
|
||||
}}
|
||||
/>
|
||||
<SVG.Search
|
||||
height="20px"
|
||||
style={{ position: "absolute", left: "12px", top: "10px" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
data-menu
|
||||
ref={(c) => {
|
||||
@ -186,7 +204,7 @@ export class SearchDropdown extends React.Component {
|
||||
borderColor:
|
||||
this.state.selectedIndex === i
|
||||
? Constants.system.border
|
||||
: Constants.system.white,
|
||||
: "transparent",
|
||||
...this.props.itemStyle,
|
||||
}}
|
||||
onClick={() => this.props.onSelect(each.value)}
|
||||
|
@ -11,7 +11,6 @@ import { css } from "@emotion/react";
|
||||
import { SearchDropdown } from "~/components/core/SearchDropdown";
|
||||
import { dispatchCustomEvent } from "~/common/custom-events";
|
||||
import { SlatePreviewRow } from "~/components/core/SlatePreviewBlock";
|
||||
import { LoaderSpinner } from "~/components/system/components/Loaders";
|
||||
|
||||
const STYLES_ICON_CIRCLE = css`
|
||||
height: 24px;
|
||||
@ -162,12 +161,6 @@ const FileEntry = ({ item }) => {
|
||||
);
|
||||
};
|
||||
|
||||
const STYLES_LOADER = css`
|
||||
position: absolute;
|
||||
top: calc(50% - 22px);
|
||||
left: calc(50% - 22px);
|
||||
`;
|
||||
|
||||
export class SearchModal extends React.Component {
|
||||
state = {
|
||||
loading: true,
|
||||
@ -314,6 +307,7 @@ export class SearchModal extends React.Component {
|
||||
return (
|
||||
<div css={STYLES_MODAL}>
|
||||
<SearchDropdown
|
||||
disabled={this.state.loading}
|
||||
placeholder="Search..."
|
||||
results={this.state.results}
|
||||
onSelect={this._handleSelect}
|
||||
@ -321,7 +315,6 @@ export class SearchModal extends React.Component {
|
||||
inputValue={this.state.inputValue}
|
||||
style={STYLES_SEARCH_DROPDOWN}
|
||||
/>
|
||||
{this.state.loading ? <LoaderSpinner css={STYLES_LOADER} /> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -191,6 +191,7 @@ export default class SceneProfile extends React.Component {
|
||||
? null
|
||||
: buttons
|
||||
}
|
||||
editing={this.props.viewer.username === this.props.data.username}
|
||||
/>
|
||||
</ScenePage>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user