Skip to content
Snippets Groups Projects
Unverified Commit 125e7d97 authored by Kyle Doherty's avatar Kyle Doherty Committed by GitHub
Browse files

Extract SearchBar from Nav (#14227) 

* extract SearchBar

* move to components dir

* better constant name
parent 8cfffd3a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/metabase/nav/components/SearchBar.jsx 0 → 100644
+ 117
− 0
View file @ 125e7d97
import React from "react";
import ReactDOM from "react-dom";
import { Flex } from "grid-styled";
import styled from "styled-components";
import { space } from "styled-system";
import { t } from "ttag";
import { color, lighten } from "metabase/lib/colors";
import Icon from "metabase/components/Icon";
import OnClickOutsideWrapper from "metabase/components/OnClickOutsideWrapper";
import { DefaultSearchColor } from "metabase/nav/constants";
const ActiveSearchColor = lighten(color("nav"), 0.1);
const SearchWrapper = Flex.extend`
background-color: ${props =>
props.active ? ActiveSearchColor : DefaultSearchColor};
border-radius: 6px;
flex: 1 1 auto;
max-width: 50em;
align-items: center;
color: white;
transition: background 300ms ease-in;
&:hover {
background-color: ${ActiveSearchColor};
}
`;
const SearchInput = styled.input`
${space} background-color: transparent;
width: 100%;
border: none;
color: white;
font-size: 1em;
font-weight: 700;
&:focus {
outline: none;
}
&::placeholder {
color: ${color("text-white")};
}
`;
const ALLOWED_SEARCH_FOCUS_ELEMENTS = new Set(["BODY", "A"]);
export default class SearchBar extends React.Component {
state = {
active: false,
searchText: "",
};
componentWillMount() {
this._updateSearchTextFromUrl(this.props);
window.addEventListener("keyup", this.handleKeyUp);
}
componentWillUnmount() {
window.removeEventListener("keyup", this.handleKeyUp);
}
componentWillReceiveProps(nextProps) {
if (this.props.location.pathname !== nextProps.location.pathname) {
this._updateSearchTextFromUrl(nextProps);
}
}
_updateSearchTextFromUrl(props) {
const components = props.location.pathname.split("/");
if (components[components.length - 1] === "search") {
this.setState({ searchText: props.location.query.q });
} else {
this.setState({ searchText: "" });
}
}
handleKeyUp = (e: KeyboardEvent) => {
const FORWARD_SLASH_KEY = 191;
if (
e.keyCode === FORWARD_SLASH_KEY &&
ALLOWED_SEARCH_FOCUS_ELEMENTS.has(document.activeElement.tagName)
) {
ReactDOM.findDOMNode(this.searchInput).focus();
}
};
render() {
const { active, searchText } = this.state;
return (
<OnClickOutsideWrapper
handleDismissal={() => this.setState({ active: false })}
>
<SearchWrapper
onClick={() => this.setState({ active: true })}
active={active}
>
<Icon name="search" ml={["10px", 2]} />
<SearchInput
py={2}
pr={[0, 2]}
pl={1}
ref={ref => (this.searchInput = ref)}
value={searchText}
placeholder={t`Search` + "…"}
onClick={() => this.setState({ active: true })}
onChange={e => this.setState({ searchText: e.target.value })}
onKeyPress={e => {
if (e.key === "Enter" && (searchText || "").trim().length > 0) {
this.props.onChangeLocation({
pathname: "search",
query: { q: searchText },
});
}
}}
/>
</SearchWrapper>
</OnClickOutsideWrapper>
);
}
}
frontend/src/metabase/nav/constants.js 0 → 100644
+ 2
− 0
View file @ 125e7d97
import { color, lighten } from "metabase/lib/colors";
export const DefaultSearchColor = lighten(color("nav"), 0.07);
frontend/src/metabase/nav/containers/Navbar.jsx
+ 5
− 110
View file @ 125e7d97
import React, { Component } from "react";
import ReactDOM from "react-dom";
import PropTypes from "prop-types";
import { PLUGIN_ADMIN_NAV_ITEMS } from "metabase/plugins";
......@@ -10,20 +9,19 @@ import { push } from "react-router-redux";
import cx from "classnames";
import { t } from "ttag";
import { Flex, Box } from "grid-styled";
import styled from "styled-components";
import { space } from "styled-system";
import * as Urls from "metabase/lib/urls";
import { color, darken, lighten } from "metabase/lib/colors";
import { color, darken } from "metabase/lib/colors";
import Icon, { IconWrapper } from "metabase/components/Icon";
import EntityMenu from "metabase/components/EntityMenu";
import Link from "metabase/components/Link";
import LogoIcon from "metabase/components/LogoIcon";
import OnClickOutsideWrapper from "metabase/components/OnClickOutsideWrapper";
import Modal from "metabase/components/Modal";
import ProfileLink from "metabase/nav/components/ProfileLink";
import SearchBar from "metabase/nav/components/SearchBar";
import CreateDashboardModal from "metabase/components/CreateDashboardModal";
import { getPath, getContext, getUser } from "../selectors";
......@@ -43,6 +41,8 @@ const mapStateToProps = (state, props) => ({
hasNativeWrite: getHasNativeWrite(state),
});
import { DefaultSearchColor } from "metabase/nav/constants";
const mapDispatchToProps = {
onChangeLocation: push,
};
......@@ -61,116 +61,11 @@ const AdminNavItem = ({ name, path, currentPath }) => (
</li>
);
const DefaultSearchColor = lighten(color("nav"), 0.07);
const ActiveSearchColor = lighten(color("nav"), 0.1);
const NavHover = {
backgroundColor: darken(color("nav")),
color: "white",
};
const SearchWrapper = Flex.extend`
background-color: ${props =>
props.active ? ActiveSearchColor : DefaultSearchColor};
border-radius: 6px;
flex: 1 1 auto;
max-width: 50em;
align-items: center;
color: white;
transition: background 300ms ease-in;
&:hover {
background-color: ${ActiveSearchColor};
}
`;
const SearchInput = styled.input`
${space} background-color: transparent;
width: 100%;
border: none;
color: white;
font-size: 1em;
font-weight: 700;
&:focus {
outline: none;
}
&::placeholder {
color: ${color("text-white")};
}
`;
const SEARCH_FOCUS_ELEMENT_WHITELIST = new Set(["BODY", "A"]);
class SearchBar extends React.Component {
state = {
active: false,
searchText: "",
};
componentWillMount() {
this._updateSearchTextFromUrl(this.props);
window.addEventListener("keyup", this.handleKeyUp);
}
componentWillUnmount() {
window.removeEventListener("keyup", this.handleKeyUp);
}
componentWillReceiveProps(nextProps) {
if (this.props.location.pathname !== nextProps.location.pathname) {
this._updateSearchTextFromUrl(nextProps);
}
}
_updateSearchTextFromUrl(props) {
const components = props.location.pathname.split("/");
if (components[components.length - 1] === "search") {
this.setState({ searchText: props.location.query.q });
} else {
this.setState({ searchText: "" });
}
}
handleKeyUp = (e: KeyboardEvent) => {
const FORWARD_SLASH_KEY = 191;
if (
e.keyCode === FORWARD_SLASH_KEY &&
SEARCH_FOCUS_ELEMENT_WHITELIST.has(document.activeElement.tagName)
) {
ReactDOM.findDOMNode(this.searchInput).focus();
}
};
render() {
const { active, searchText } = this.state;
return (
<OnClickOutsideWrapper
handleDismissal={() => this.setState({ active: false })}
>
<SearchWrapper
onClick={() => this.setState({ active: true })}
active={active}
>
<Icon name="search" ml={["10px", 2]} />
<SearchInput
py={2}
pr={[0, 2]}
pl={1}
ref={ref => (this.searchInput = ref)}
value={searchText}
placeholder={t`Search` + "…"}
onClick={() => this.setState({ active: true })}
onChange={e => this.setState({ searchText: e.target.value })}
onKeyPress={e => {
if (e.key === "Enter" && (searchText || "").trim().length > 0) {
this.props.onChangeLocation({
pathname: "search",
query: { q: searchText },
});
}
}}
/>
</SearchWrapper>
</OnClickOutsideWrapper>
);
}
}
const MODAL_NEW_DASHBOARD = "MODAL_NEW_DASHBOARD";
@Database.loadList({
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment