jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
142 lines (130 loc) • 6.44 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index$1 = require('../11-form-item/index.js');
var index = require('../03-input/index.js');
var index$2 = require('../../../../../node_modules/@reach/combobox/es/index.js');
var styles = require('../../../../../node_modules/@reach/menu-button/styles.css.js');
/**
* @file index.tsx
*
* @fileoverview Renders an autocomplete that can be used to select elements from.
*/
const AutocompleteStyles = styled.css `
[data-reach-combobox] {
max-width: ${props => props.theme.autocomplete.input.width};
}
[data-reach-combobox-input] {
box-sizing: border-box;
background: ${props => props.theme.autocomplete.input.background};
font-size: ${props => props.theme.autocomplete.input.fontSize};
line-height: ${props => props.theme.autocomplete.input.lineHeight};
margin: ${props => props.theme.autocomplete.input.margin};
padding: ${props => props.theme.autocomplete.input.padding};
border-radius: ${props => props.theme.autocomplete.input.borderRadius};
border-width: ${props => props.theme.autocomplete.input.borderWidth};
border-style: ${props => props.theme.autocomplete.input.borderStyle};
border-color: ${props => props.theme.autocomplete.input.borderColor};
width: ${props => props.theme.autocomplete.input.width};
${props => props.theme.mediaQueries.medium} {
max-width: ${props => props.theme.autocomplete.input.width};
width: auto;
}
opacity: ${props => (props.disabled ? 0.5 : 1)};
&:focus,
&:active {
outline: 0;
border-color: ${props => props.theme.colors.focusRingColor};
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05),
0 0 4px ${props => props.theme.colors.focusRingColor};
}
}
[data-reach-combobox-popover] {
background: ${props => props.theme.autocomplete.dropMenu.background};
max-height: ${props => props.theme.autocomplete.dropMenu.maxHeight};
border-right-width: ${props => props.theme.autocomplete.dropMenu.borderWidth};
border-bottom-width: ${props => props.theme.autocomplete.dropMenu.borderWidth};
border-left-width: ${props => props.theme.autocomplete.dropMenu.borderWidth};
border-radius: ${props => props.theme.autocomplete.dropMenu.borderRadius};
border-color: ${props => props.theme.autocomplete.dropMenu.borderColor};
box-shadow: ${props => props.theme.autocomplete.dropMenu.boxShadow};
border-top-width: 0;
overflow-y: auto;
overflow-x: hidden;
outline: 0;
transition: opacity 0.1s ease;
border-style: solid;
z-index: 100;
}
[data-reach-combobox-list] {
list-style: none;
margin: 0;
padding: 0;
}
[data-reach-combobox-option] {
font-size: ${props => props.theme.autocomplete.option.fontSize};
margin: ${props => props.theme.autocomplete.option.margin};
padding: ${props => props.theme.autocomplete.option.padding};
border-radius: ${props => props.theme.autocomplete.option.borderRadius};
border-width: ${props => props.theme.autocomplete.option.borderWidth};
border-style: ${props => props.theme.autocomplete.option.borderStyle};
border-color: ${props => props.theme.autocomplete.option.borderColor};
position: relative;
cursor: pointer;
display: block;
border: none;
height: auto;
border-top: none;
text-transform: none;
box-shadow: none;
white-space: normal;
word-wrap: normal;
}
[data-reach-combobox-option]:hover,
[data-reach-combobox-option][data-highlighted] {
background: ${props => props.theme.autocomplete.option.backgroundHover};
}
[data-user-value] {
color: ${props => props.theme.autocomplete.userValue.color};
font-weight: ${props => props.theme.autocomplete.userValue.fontWeight};
font-style: ${props => props.theme.autocomplete.userValue.fontStyle};
}
`;
const GlobalMenuButtonStyle = styled.createGlobalStyle `
${styles}
${AutocompleteStyles}
`;
const Autocomplete = ({ id, inputSize = 40, placeholder, maxItemsDisplayed = 10, results, onChange, onSelect, label, value, focusElements = null }) => {
const [showChild, setShowChild] = React.useState(false);
const [showFocusElements, setShowFocusElements] = React.useState(false);
// Wait until after client-side hydration to show
React.useEffect(() => {
setShowChild(true);
return () => {
setShowChild(false);
};
}, []);
if (!showChild) {
// You can show some kind of placeholder UI here.
// Because combobox does not currently work on the server.
return React__default.createElement(index.default, { placeholder: placeholder, size: inputSize, disabled: true });
}
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement(GlobalMenuButtonStyle, null),
React__default.createElement(index$1.FormItem, null,
React__default.createElement(index$1.FormLabel, { htmlFor: id }, label),
React__default.createElement(index$2.Combobox, { onSelect: onSelect, openOnFocus: focusElements !== null },
React__default.createElement(index$2.ComboboxInput, Object.assign({ id: id, "aria-label": label, className: "autocomplete-input", size: inputSize, placeholder: placeholder, onChange: onChange }, (focusElements
? { onFocus: e => setShowFocusElements(true) }
: null), { value: value })),
(results.length > 0 || showFocusElements) && (React__default.createElement(index$2.ComboboxPopover, { className: "autocomplete-popup" },
React__default.createElement(index$2.ComboboxList, { "aria-label": label }, results.slice(0, maxItemsDisplayed).map((result, index) => (React__default.createElement(index$2.ComboboxOption, { key: index, value: result })))),
showFocusElements && React__default.createElement("div", null, focusElements)))))));
};
exports.Autocomplete = Autocomplete;
exports.AutocompleteStyles = AutocompleteStyles;
exports.GlobalMenuButtonStyle = GlobalMenuButtonStyle;