@talend/react-components
Version:
Set of react components.
45 lines • 1.61 kB
JavaScript
import PropTypes from 'prop-types';
import { useColumnChooserContext } from '../columnChooser.context';
import RichLayout from '../../../../../Rich/Layout';
import cssModule from '../ColumnChooser.module.scss';
import { getTheme } from '../../../../../theme';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const theme = getTheme(cssModule);
const isVisible = column => column.visible;
const Default = () => {
const {
columns,
t
} = useColumnChooserContext();
const selectedColumns = t('SELECT_COLUMNS', {
count: columns.filter(isVisible).length,
total: columns.length,
defaultValue: '{{count}}/{{total}} selected'
});
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("div", {
className: theme('tc-column-chooser-header-title'),
children: t('COLUMN_CHOOSER_HEADER_TITLE', {
defaultValue: 'Select columns to display'
})
}), /*#__PURE__*/_jsx("div", {
id: "selected-columns-text",
children: selectedColumns
})]
});
};
const ColumnChooserHeader = ({
className,
children = /*#__PURE__*/_jsx(Default, {})
}) => /*#__PURE__*/_jsx(RichLayout.Header, {
id: "column-chooser-header",
className: theme('tc-column-chooser-header', className),
children: children
});
ColumnChooserHeader.propTypes = {
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.element]))]),
className: PropTypes.string
};
ColumnChooserHeader.SelectAll = ColumnChooserHeader;
export default ColumnChooserHeader;
//# sourceMappingURL=ColumnChooserHeader.component.js.map