@geneui/components
Version:
The Gene UI components library designed for BI tools
281 lines (277 loc) • 10.3 kB
JavaScript
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import React__default, { useRef, useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import { n as noop } from '../index-a0e4e333.js';
import useKeyDown from '../hooks/useKeyDown.js';
import { c as checkboxRadioSwitcherConfig, n as noDataConfig } from '../configs-00612ce0.js';
import CustomScrollbar from '../Scrollbar/index.js';
import Button from '../Button/index.js';
import Empty from '../Empty/index.js';
import ExtendedInput from '../ExtendedInput/index.js';
import CheckboxGroup from '../CheckboxGroup/index.js';
import '../index-0cbb1102.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../dateValidation-67caec66.js';
import '../_commonjsHelpers-24198af3.js';
import 'react-dom';
import '../tslib.es6-f211516f.js';
import '../Icon/index.js';
import '../hooks/useDeviceType.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../useEllipsisDetection-4d997d5d.js';
import '../SuggestionList/index.js';
import '../hooks/useClickOutside.js';
import '../config-1053d64d.js';
import '../callAfterDelay-7272faca.js';
import '../index-6d7e99cd.js';
import '../GeneUIProvider/index.js';
import '../Checkbox/index.js';
import '../checkboxRadioSwitcher-5b69d7bd.js';
import '../guid-8ddf77b3.js';
var css_248z = "[data-gene-ui-version=\"2.16.5\"] .checkbox-group-with-search-holder{background:var(--background);width:100%}[data-gene-ui-version=\"2.16.5\"] .empty-data-holder{align-items:center;display:flex;height:19rem;justify-content:center;width:100%}[data-gene-ui-version=\"2.16.5\"] .c-g-w-s-content{background:rgba(var(--background-sc-rgb),.01);display:flex;flex-direction:column;width:100%}[data-gene-ui-version=\"2.16.5\"] .c-g-w-s-content>li{display:flex;width:100%}[data-gene-ui-version=\"2.16.5\"] .c-g-w-s-head{border-bottom:1px solid rgba(var(--background-sc-rgb),.1);padding:1.5rem}[data-gene-ui-version=\"2.16.5\"] .c-g-w-s-footer{border-top:1px solid rgba(var(--background-sc-rgb),.1);display:flex;justify-content:center;padding:1.5rem 0}[data-gene-ui-version=\"2.16.5\"] .c-g-w-s-footer>*+*{margin-inline-start:1rem}[data-gene-ui-version=\"2.16.5\"] .c-g-w-s-body-content{max-height:31rem;padding:1.5rem 0;width:100%}[data-gene-ui-version=\"2.16.5\"] .grouped-checkbox-with-search{flex-direction:column}[data-gene-ui-version=\"2.16.5\"] .grouped-checkbox-with-search>div{padding:1rem!important}@media (hover:hover){[data-gene-ui-version=\"2.16.5\"] .checkbox-group-with-search-holder .crs-holder.active{background:rgba(var(--background-sc-rgb),.05)}}";
styleInject(css_248z);
function CheckboxGroupWithSearch(_ref) {
let {
className,
onSave,
onCancel,
saveText,
cancelText,
onSearch,
value,
defaultSelected,
onChange,
data: options,
noDataText,
noDataWithImage,
noDataTypes,
disableSave,
autofocusSearchField,
isSaveButtonLoading,
...rest
} = _ref;
const parentRef = useRef(null);
const scrollbarRef = useRef(null);
const [query, setQuery] = useState('');
const [data, setData] = useState(options);
const [values, setValues] = useState(defaultSelected);
const [hoveredState, setHoveredState] = useState(-1);
const handleSearchChange = useCallback(e => {
const {
value
} = e.target;
onSearch ? onSearch(e) : setData(() => options.filter(item => !value || item.label.toLowerCase().includes(value.toLowerCase())));
setQuery(value);
}, [onSearch, options]);
const handleChange = useCallback(e => {
setValues(e);
onChange(e);
}, [onChange]);
function scroll(type, index) {
let newIndex = index;
if (type === 'prev' && data.length - 1 > index) {
newIndex++;
} else if (type === 'next' && index !== 0) {
newIndex--;
}
scrollbarRef.current.scrollTop(newIndex * Math.round(scrollbarRef.current.getScrollHeight() / data.length));
return newIndex;
}
useKeyDown(e => {
if (e.key === 'ArrowDown') {
setHoveredState(index => scroll('prev', index));
}
if (e.key === 'ArrowUp') {
setHoveredState(index => scroll('next', index));
}
if (e.key === 'Enter') {
onChange(e, hoveredState);
if (!value && data.length && hoveredState >= 0) {
setValues(v => {
const index = v.indexOf(data[hoveredState].value);
const newValues = [...v];
index > -1 ? newValues.splice(index, 1) : newValues.push(data[hoveredState].value);
return newValues;
});
}
}
}, [data, hoveredState, onChange], parentRef, ['ArrowUp', 'ArrowDown', 'Enter']);
useEffect(() => {
setData(options);
}, [options]);
useEffect(() => {
value && setValues(value);
}, [value]);
return /*#__PURE__*/React__default.createElement("div", {
ref: parentRef,
className: classnames('checkbox-group-with-search-holder', className)
}, /*#__PURE__*/React__default.createElement("ul", {
className: "c-g-w-s-content"
}, /*#__PURE__*/React__default.createElement("li", {
className: "c-g-w-s-head"
}, /*#__PURE__*/React__default.createElement(ExtendedInput, {
autoFocus: autofocusSearchField,
value: query,
type: "search",
onChange: handleSearchChange,
icon: "bc-icon-search"
})), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(CustomScrollbar, {
ref: scrollbarRef,
autoHeight: true
}, data.length ? /*#__PURE__*/React__default.createElement("div", {
className: "c-g-w-s-body-content"
}, /*#__PURE__*/React__default.createElement(CheckboxGroup, _extends({
hoveredState: hoveredState,
className: "grouped-checkbox-with-search",
data: data,
value: values,
onChange: handleChange
}, rest))) : /*#__PURE__*/React__default.createElement("div", {
className: "empty-data-holder"
}, /*#__PURE__*/React__default.createElement(Empty, {
title: noDataText,
appearance: "greyscale",
withImage: noDataWithImage,
className: "absolute",
type: noDataTypes,
size: "small"
})))), /*#__PURE__*/React__default.createElement("li", {
className: "c-g-w-s-footer"
}, onCancel && /*#__PURE__*/React__default.createElement(Button, {
appearance: "minimal",
color: "default",
onClick: onCancel
}, cancelText), onSave && /*#__PURE__*/React__default.createElement(Button, {
disabled: disableSave || isSaveButtonLoading,
onClick: onSave,
loading: isSaveButtonLoading
}, saveText))));
}
CheckboxGroupWithSearch.propTypes = {
/** Text for save button * */
saveText: PropTypes.string,
/** Text for cancel button * */
cancelText: PropTypes.string,
/** Save button click callback * */
onSave: PropTypes.func,
/** Cancel button click callback * */
onCancel: PropTypes.func,
/** Search input on change callback * */
onSearch: PropTypes.func,
/** Initially selected value */
defaultSelected: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number])),
/**
* Disables events
*/
disabled: PropTypes.bool,
/**
* Disables save button
*/
disableSave: PropTypes.bool,
/**
* If data item is typeof string than value will apply both as checkbox label and value,
* Label: The text of the associated element.
* Value: The input value
* Disabled: A checkbox can appear disabled and be unable to change states
* readOnly: A checkbox can be read-only and unable to change states.
* required: If true, the input element will be required.
* isValid: Check validity of input value
* errorText: Displays custom error text when input value is not valid
*/
data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
label: PropTypes.node,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
disabled: PropTypes.bool,
description: PropTypes.string,
readOnly: PropTypes.bool,
required: PropTypes.bool,
isValid: PropTypes.bool,
errorText: PropTypes.string
})])),
/**
* Custom text for checkAll checkbox
*/
checkAllText: PropTypes.string,
/**
* Displays select all checkbox
*/
showSelectAll: PropTypes.bool,
/**
* Array of values of the input elements
*/
value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
/**
* Fires an event when Checkbox is clicked or "enter" key is pressed
* (event: SyntheticEvent) => void
*/
onChange: PropTypes.func,
/**
* Additional className which applies to group holder div element
*/
className: PropTypes.string,
/**
* Accepts same values as Checkbox component(check in Checkbox component(molecules) propTable)
*/
size: PropTypes.oneOf(checkboxRadioSwitcherConfig.size),
/**
* Specify "label" position
*/
labelPosition: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelPosition),
/**
* Specify "label" alignment
*/
labelAlignment: PropTypes.oneOf(checkboxRadioSwitcherConfig.labelAlignment),
/**
* Description for checkboxes
*/
description: PropTypes.string,
/**
* Define is field read only or no.
*/
readOnly: PropTypes.bool,
/**
* Define is field required or no.
*/
required: PropTypes.bool,
/**
* Additional state for field validation
*/
isValid: PropTypes.bool,
/**
* Text that will be shown id field is invalid
*/
errorText: PropTypes.string,
/**
* Different types/views for no data view
*/
noDataTypes: PropTypes.oneOf(noDataConfig),
/**
* Showing no data with image
*/
noDataWithImage: PropTypes.bool,
/**
* Custom No data text
*/
noDataText: PropTypes.string,
/*
* When rendering a component, the search field will automatically focused
*/
autofocusSearchField: PropTypes.bool,
/*
* Loader for save button
*/
isSaveButtonLoading: PropTypes.bool
};
CheckboxGroupWithSearch.defaultProps = {
onSave: noop,
onCancel: noop,
saveText: 'Save',
cancelText: 'Cancel',
noDataText: 'No data found',
noDataWithImage: true,
noDataTypes: 'image',
autofocusSearchField: false
};
export { CheckboxGroupWithSearch as default };