@geneui/components
Version:
The Gene UI components library designed for BI tools
141 lines (137 loc) • 6.27 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useState, useCallback } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { n as noop } from '../index-a0e4e333.js';
import Search from '../Search/index.js';
import { D as Dropdown } from '../index-9d8d0112.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../ExtendedInput/index.js';
import '../configs-00612ce0.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../useEllipsisDetection-4d997d5d.js';
import '../Icon/index.js';
import '../SuggestionList/index.js';
import '../hooks/useKeyDown.js';
import '../hooks/useClickOutside.js';
import '../config-1053d64d.js';
import '../Scrollbar/index.js';
import '../callAfterDelay-7272faca.js';
import '../index-6d7e99cd.js';
import '../tslib.es6-f211516f.js';
import '../GeneUIProvider/index.js';
import '../objectWithoutPropertiesLoose-d8a4a68c.js';
import '../react-lifecycles-compat.es-6e1f3768.js';
import '../clsx.m-2bb6df4b.js';
import '../hooks/useMount.js';
import '../hooks/useClick.js';
import '../hooks/useUpdatableRef.js';
import '../hooks/useForceUpdate.js';
import '../BusyLoader/index.js';
import '../Empty/index.js';
import '../index-08898b29.js';
import '../index-122432cd.js';
import '../debounce-4419bc2f.js';
import '../Checkbox/index.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import '../guid-8ddf77b3.js';
import '../index-0cbb1102.js';
import '../Tag/index.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .search-dropdown-mix{display:flex;max-width:100%;position:relative}[data-gene-ui-version=\"2.16.5\"] .search-dropdown-mix.f-full-width{width:100%}[data-gene-ui-version=\"2.16.5\"] .search-dropdown-mix.f-full-width .search-holder{flex:auto}[data-gene-ui-version=\"2.16.5\"] .search-dropdown-mix.f-full-width .dropdown-holder{min-width:36.8811881188%}[data-gene-ui-version=\"2.16.5\"] .search-dropdown-mix.f-default-width .search-holder{max-width:25.5rem;width:100%}[data-gene-ui-version=\"2.16.5\"] .search-dropdown-mix.f-default-width .dropdown-holder{min-width:14.9rem}[data-gene-ui-version=\"2.16.5\"] .search-dropdown-mix .search-holder:before{background:rgba(var(--background-sc-rgb),.05);bottom:.6rem;content:\"\";display:block;position:absolute;top:.6rem;width:1px}html:not([dir=rtl]) .search-dropdown-mix .search-holder:before{left:100%}html[dir=rtl] .search-dropdown-mix .search-holder:before{right:100%}html:not([dir=rtl]) .search-dropdown-mix .search-holder .input-element-back{border-top-right-radius:0}html[dir=rtl] .search-dropdown-mix .search-holder .input-element-back{border-top-left-radius:0}html:not([dir=rtl]) .search-dropdown-mix .search-holder .input-element-back{border-bottom-right-radius:0}html[dir=rtl] .search-dropdown-mix .search-holder .input-element-back{border-bottom-left-radius:0}[data-gene-ui-version=\"2.16.5\"] .search-dropdown-mix .dropdown-holder{flex-shrink:0}html:not([dir=rtl]) .search-dropdown-mix .dropdown-holder .input-element-back{border-top-left-radius:0}html[dir=rtl] .search-dropdown-mix .dropdown-holder .input-element-back{border-top-right-radius:0}html:not([dir=rtl]) .search-dropdown-mix .dropdown-holder .input-element-back{border-bottom-left-radius:0}html[dir=rtl] .search-dropdown-mix .dropdown-holder .input-element-back{border-bottom-right-radius:0}[data-gene-ui-version=\"2.16.5\"] .search-dropdown-mix .dropDown{max-width:150px;min-width:150px}";
styleInject(css_248z);
const SearchWithDropdownConfig = {
flexibility: ['default-width', 'full-width']
};
function SearchWithDropdown(_ref) {
let {
onChange,
searchProps,
dropdownProps,
flexibility,
hideDropdown,
dataKey
} = _ref;
const {
defaultValue
} = searchProps;
const [query, setQuery] = useState(defaultValue);
const [dataKeys, setDataKeys] = useState(() => dropdownProps.defaultValue || []);
const handleSearch = useCallback(e => {
const query = e.target.value;
setQuery(query);
onChange({
query,
dataKeys
});
}, [onChange, dataKeys]);
const handleDropdown = useCallback(items => {
const dataKeys = Array.isArray(items) ? items.map(item => item[dataKey]) : items[dataKey];
setDataKeys(dataKeys);
onChange({
query,
dataKeys
});
}, [query, onChange, dataKey]);
return hideDropdown ? /*#__PURE__*/React__default.createElement(Search, _extends({}, searchProps, {
inputSize: "big",
appearance: "minimal",
onChange: handleSearch
})) : /*#__PURE__*/React__default.createElement("div", {
className: classnames('search-dropdown-mix', "f-".concat(flexibility))
}, /*#__PURE__*/React__default.createElement(Search, _extends({}, searchProps, {
inputSize: "big",
appearance: "minimal",
onChange: handleSearch
})), !hideDropdown && /*#__PURE__*/React__default.createElement("div", {
className: "dropDown"
}, /*#__PURE__*/React__default.createElement(Dropdown, _extends({}, dropdownProps, {
inputSize: "big",
appearance: "minimal",
flexibility: "content-size",
onChange: handleDropdown
}))));
}
SearchWithDropdown.propTypes = {
/**
* Called when the user attempts to change the value,
* OnChange({ query: string, dataKey: array })
*/
onChange: PropTypes.func,
/**
* Accepts same props as search component(molecules)
*/
searchProps: PropTypes.shape({
...Search.propTypes
}),
/**
* Accpets same props as dropdown component(organisms)
*/
dropdownProps: PropTypes.shape({
...Dropdown.propTypes
}),
/**
* Control component passing `default-width` or `full-width`,
*/
flexibility: PropTypes.oneOf(SearchWithDropdownConfig.flexibility),
/**
* Hides dropdown
*/
hideDropdown: PropTypes.bool,
/**
* unique value in dropdown items
*/
dataKey: PropTypes.string
};
SearchWithDropdown.defaultProps = {
searchProps: {},
flexibility: SearchWithDropdownConfig.flexibility[0],
onChange: noop,
hideDropdown: false,
dataKey: 'dataKey'
};
export { SearchWithDropdown as default };