@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
128 lines (127 loc) • 3.64 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/** @jsx jsx */
import { Fragment } from 'react';
import { css, jsx } from '@emotion/react';
import SearchIcon from '@atlaskit/icon/glyph/search';
import { CREATE_BREAKPOINT, fontSize, gridSize, varSearchBackgroundColor, varSearchBorderColor, varSearchColor, varSearchFocusBorderColor, varSearchHoverBackgroundColor } from '../../common/constants';
import { useTheme } from '../../theme';
import { IconButton } from '../IconButton';
const searchInputContainerStyles = css({
marginRight: gridSize,
marginLeft: 20,
position: 'relative',
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
[`@media (max-width: ${CREATE_BREAKPOINT - 1}px)`]: {
display: 'none !important'
}
});
const searchInputIconStyles = css({
width: '20px',
height: '20px',
position: 'absolute',
top: '5px',
left: '10px',
pointerEvents: 'none'
});
const searchInputStyles = css({
boxSizing: 'border-box',
width: '220px',
height: `${gridSize * 4}px`,
padding: `0 ${gridSize}px 0 40px`,
backgroundColor: `var(${varSearchBackgroundColor})`,
border: '2px solid',
borderColor: `var(${varSearchBorderColor})`,
borderRadius: 6,
color: `var(${varSearchColor})`,
fontSize: `${fontSize}px`,
outline: 'none',
'::placeholder': {
color: 'inherit'
},
'&:focus': {
borderColor: `var(${varSearchFocusBorderColor})`
},
'&:hover': {
backgroundColor: `var(${varSearchHoverBackgroundColor})`
}
});
const searchIconStyles = css({
// eslint-disable-next-line @repo/internal/styles/no-nested-styles
[`@media (min-width: ${CREATE_BREAKPOINT}px)`]: {
display: 'none !important'
}
});
const SearchComponent = props => {
const {
onClick,
placeholder,
label,
value
} = props;
const theme = useTheme();
const search = theme.mode.search;
const onChange = (...args) => {
// @ts-ignore
onClick && onClick(...args);
};
const onInputClick = (...args) => {
// @ts-ignore
onClick && onClick(...args);
};
const searchInputDynamicStyles = {
[varSearchBackgroundColor]: search.default.backgroundColor,
[varSearchColor]: search.default.color,
[varSearchBorderColor]: search.default.borderColor,
[varSearchFocusBorderColor]: search.focus.borderColor,
[varSearchHoverBackgroundColor]: search.hover.backgroundColor
};
return jsx("div", {
css: searchInputContainerStyles,
role: "search"
}, jsx("div", {
css: searchInputIconStyles
}, jsx(SearchIcon, {
label: ""
})), jsx("input", {
style: searchInputDynamicStyles,
css: searchInputStyles,
"aria-label": label,
placeholder: placeholder,
onChange: onChange,
onClick: onInputClick,
value: value
}));
};
/**
* __Search__
*
* A search input that can be passed into `AtlassianNavigation`'s `renderSearch` prop.
*
* - [Examples](https://atlassian.design/components/atlassian-navigation/examples#search)
* - [Code](https://atlassian.design/components/atlassian-navigation/code)
*/
export const Search = props => {
const {
placeholder,
tooltip,
label,
value,
...iconButtonProps
} = props;
return jsx(Fragment, null, jsx(SearchComponent, {
onClick: iconButtonProps.onClick,
placeholder: placeholder,
label: label,
value: value || ''
}), jsx(IconButton
// @ts-ignore Overriding styles is not supported.
, _extends({
css: searchIconStyles,
icon: jsx(SearchIcon, {
label: label
}),
tooltip: tooltip
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
}, iconButtonProps)));
};
export default Search;