2020-08-29 09:04:09 +03:00
|
|
|
import * as React from "react";
|
|
|
|
import * as Constants from "~/common/constants";
|
|
|
|
import * as SVG from "~/common/svg";
|
|
|
|
|
|
|
|
import { css } from "@emotion/react";
|
|
|
|
|
|
|
|
const STYLES_DROPDOWN_CONTAINER = css`
|
|
|
|
box-sizing: border-box;
|
|
|
|
z-index: ${Constants.zindex.modal};
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_DROPDOWN = css`
|
|
|
|
box-sizing: border-box;
|
|
|
|
position: absolute;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
background-color: ${Constants.system.white};
|
|
|
|
overflow: hidden;
|
|
|
|
width: 100%;
|
2020-08-31 00:02:34 +03:00
|
|
|
scrollbar-width: none;
|
|
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
|
display: none;
|
|
|
|
}
|
2020-08-29 09:04:09 +03:00
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_DROPDOWN_ITEM = css`
|
|
|
|
box-sizing: border-box;
|
|
|
|
padding: 8px;
|
|
|
|
font-size: 0.8em;
|
|
|
|
border-radius: 16px;
|
|
|
|
border: 1px solid ${Constants.system.white};
|
2020-08-31 21:19:46 +03:00
|
|
|
cursor: pointer;
|
|
|
|
|
2020-08-29 09:04:09 +03:00
|
|
|
:hover {
|
2020-08-31 21:19:46 +03:00
|
|
|
border-color: ${Constants.system.border} !important;
|
2020-08-29 09:04:09 +03:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const STYLES_INPUT = css`
|
|
|
|
font-family: ${Constants.font.text};
|
|
|
|
-webkit-appearance: none;
|
|
|
|
width: 100%;
|
|
|
|
height: 40px;
|
|
|
|
background: ${Constants.system.foreground};
|
|
|
|
color: ${Constants.system.black};
|
|
|
|
display: flex;
|
|
|
|
font-size: 14px;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: flex-start;
|
|
|
|
outline: 0;
|
|
|
|
border: 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
transition: 200ms ease all;
|
|
|
|
padding: 0 24px 0 48px;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
border-radius: 12px;
|
|
|
|
margin-bottom: 16px;
|
|
|
|
::placeholder {
|
|
|
|
/* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
|
|
color: ${Constants.system.black};
|
|
|
|
opacity: 1; /* Firefox */
|
|
|
|
}
|
|
|
|
:-ms-input-placeholder {
|
|
|
|
/* Internet Explorer 10-11 */
|
|
|
|
color: ${Constants.system.black};
|
|
|
|
}
|
|
|
|
::-ms-input-placeholder {
|
|
|
|
/* Microsoft Edge */
|
|
|
|
color: ${Constants.system.black};
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
2020-08-31 21:19:46 +03:00
|
|
|
export class SearchDropdown extends React.Component {
|
2020-08-29 09:04:09 +03:00
|
|
|
_input;
|
|
|
|
_optionRoot;
|
|
|
|
|
2020-08-31 21:19:46 +03:00
|
|
|
static defaultProps = {
|
|
|
|
defaultResults: [],
|
|
|
|
};
|
|
|
|
|
2020-08-29 09:04:09 +03:00
|
|
|
state = {
|
|
|
|
selectedIndex: -1,
|
|
|
|
};
|
|
|
|
|
|
|
|
componentDidMount = () => {
|
|
|
|
window.addEventListener("keydown", this._handleDocumentKeydown);
|
|
|
|
this._input.focus();
|
|
|
|
};
|
|
|
|
|
|
|
|
componentWillUnmount = () => {
|
|
|
|
window.removeEventListener("keydown", this._handleDocumentKeydown);
|
|
|
|
};
|
|
|
|
|
2020-08-31 21:19:46 +03:00
|
|
|
_handleChange = (e) => {
|
2020-08-29 09:04:09 +03:00
|
|
|
if (this.state.selectedIndex !== -1) {
|
|
|
|
this.setState({ selectedIndex: -1 });
|
|
|
|
}
|
2020-08-31 21:19:46 +03:00
|
|
|
this.props.onChange(e);
|
2020-08-29 09:04:09 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
_handleSelect = (index) => {
|
2020-08-31 21:19:46 +03:00
|
|
|
this.props.onSelect(this.props.results[index].value);
|
2020-08-29 09:04:09 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
_handleDocumentKeydown = (e) => {
|
|
|
|
if (e.keyCode === 27) {
|
|
|
|
this._handleDelete();
|
|
|
|
e.preventDefault();
|
|
|
|
} else if (e.keyCode === 9) {
|
|
|
|
this._handleDelete();
|
|
|
|
} else if (e.keyCode === 40) {
|
2020-08-31 21:19:46 +03:00
|
|
|
if (this.state.selectedIndex < this.props.results.length - 1) {
|
2020-08-29 09:04:09 +03:00
|
|
|
let listElem = this._optionRoot.children[this.state.selectedIndex + 1];
|
|
|
|
let elemRect = listElem.getBoundingClientRect();
|
|
|
|
let rootRect = this._optionRoot.getBoundingClientRect();
|
|
|
|
if (elemRect.bottom > rootRect.bottom) {
|
|
|
|
this._optionRoot.scrollTop =
|
|
|
|
listElem.offsetTop +
|
|
|
|
listElem.offsetHeight -
|
|
|
|
this._optionRoot.offsetHeight;
|
|
|
|
}
|
|
|
|
this.setState({ selectedIndex: this.state.selectedIndex + 1 });
|
|
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
} else if (e.keyCode === 38) {
|
|
|
|
if (this.state.selectedIndex > 0) {
|
|
|
|
let listElem = this._optionRoot.children[this.state.selectedIndex - 1];
|
|
|
|
let elemRect = listElem.getBoundingClientRect();
|
|
|
|
let rootRect = this._optionRoot.getBoundingClientRect();
|
|
|
|
if (elemRect.top < rootRect.top) {
|
|
|
|
this._optionRoot.scrollTop = listElem.offsetTop;
|
|
|
|
}
|
|
|
|
this.setState({ selectedIndex: this.state.selectedIndex - 1 });
|
|
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
} else if (e.keyCode === 13) {
|
|
|
|
if (
|
2020-08-31 21:19:46 +03:00
|
|
|
this.props.results.length > this.state.selectedIndex &&
|
2020-08-29 09:04:09 +03:00
|
|
|
this.state.selectedIndex !== -1
|
|
|
|
) {
|
|
|
|
this._handleSelect(this.state.selectedIndex);
|
|
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
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}
|
2020-08-31 21:19:46 +03:00
|
|
|
onChange={this._handleChange}
|
2020-08-29 09:04:09 +03:00
|
|
|
ref={(c) => {
|
|
|
|
this._input = c;
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<SVG.Search
|
|
|
|
height="20px"
|
|
|
|
style={{ position: "absolute", left: "12px", top: "10px" }}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{
|
|
|
|
<div
|
|
|
|
data-menu
|
|
|
|
ref={(c) => {
|
|
|
|
this._optionRoot = c;
|
|
|
|
}}
|
|
|
|
css={STYLES_DROPDOWN}
|
|
|
|
style={this.props.style}
|
|
|
|
>
|
2020-08-31 21:19:46 +03:00
|
|
|
{(this.props.results && this.props.results.length
|
|
|
|
? this.props.results
|
|
|
|
: this.props.defaultResults
|
2020-08-29 09:04:09 +03:00
|
|
|
).map((each, i) => (
|
|
|
|
<div
|
2020-08-31 21:19:46 +03:00
|
|
|
key={each.value.data.id}
|
2020-08-29 09:04:09 +03:00
|
|
|
css={STYLES_DROPDOWN_ITEM}
|
|
|
|
style={{
|
|
|
|
borderColor:
|
|
|
|
this.state.selectedIndex === i
|
|
|
|
? Constants.system.border
|
2020-08-31 21:19:46 +03:00
|
|
|
: Constants.system.white,
|
2020-08-29 09:04:09 +03:00
|
|
|
...this.props.itemStyle,
|
|
|
|
}}
|
2020-08-31 21:19:46 +03:00
|
|
|
onClick={() => this.props.onSelect(each.value)}
|
2020-08-29 09:04:09 +03:00
|
|
|
>
|
2020-08-31 21:19:46 +03:00
|
|
|
{each.component}
|
2020-08-29 09:04:09 +03:00
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|