@talend/react-components
Version:
Set of react components.
73 lines • 2.54 kB
JavaScript
import { ButtonIcon } from '@talend/design-system';
import PropTypes from 'prop-types';
import { Fragment, useState } from 'react';
import { Overlay, Popover } from '@talend/react-bootstrap';
import { useTranslation } from 'react-i18next';
import I18N_DOMAIN_COMPONENTS from '../../../constants';
import ColumnChooser from './ColumnChooser';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function ColumnChooserButton({
children,
columns,
initialFilterValue,
id,
initialOpenedPopover,
placement = 'left',
nbLockedLeftItems,
onSubmit,
buttonRenderer
}) {
const {
t
} = useTranslation(I18N_DOMAIN_COMPONENTS);
const [opened, setOpened] = useState(initialOpenedPopover || false);
const [buttonRef, setButtonRef] = useState(null);
const changeOpened = () => setOpened(!opened);
const closePopover = () => setOpened(false);
const onSubmitColumnChooser = (event, columnsFromColumnChooser) => {
onSubmit(event, columnsFromColumnChooser);
closePopover();
};
const ActionButtonRenderer = buttonRenderer || ButtonIcon;
return /*#__PURE__*/_jsxs(Fragment, {
children: [/*#__PURE__*/_jsx(ActionButtonRenderer, {
icon: "talend-column-chooser",
ref: setButtonRef,
"data-feature": "column-chooser.open",
id: `${id}-button`,
onClick: changeOpened,
size: "S",
children: t('COLUMN_CHOOSER_OVERLAY_BUTTON', 'Open the column chooser')
}), /*#__PURE__*/_jsx(Overlay, {
id: `${id}-overlay`,
onHide: closePopover,
placement: placement,
rootClose: true,
show: opened,
target: buttonRef,
children: /*#__PURE__*/_jsx(Popover, {
id: `${id}-popover`,
children: !children ? /*#__PURE__*/_jsx(ColumnChooser, {
columnsFromList: columns,
initialFilterValue: initialFilterValue,
id: id,
nbLockedLeftItems: nbLockedLeftItems,
onSubmit: onSubmitColumnChooser,
t: t
}) : children
})
})]
});
}
ColumnChooserButton.propTypes = {
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
columns: PropTypes.array.isRequired,
id: PropTypes.string.isRequired,
initialFilterValue: PropTypes.string,
initialOpenedPopover: PropTypes.bool,
nbLockedLeftItems: PropTypes.number,
placement: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
onSubmit: PropTypes.func.isRequired,
buttonRenderer: PropTypes.func
};
//# sourceMappingURL=ColumnChooserButton.component.js.map