<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Draggable from 'react-draggable';
import { ConsumerVirtualizedList } from '../virtualizedListContext';
import headerResizableCssModule from './HeaderResizable.scss';
import { getTheme } from '../../theme';
import getDefaultT from '../../translate';

const theme = getTheme(headerResizableCssModule);

const HeaderResizableContent = ({ customRender, ...rest }) => {
	if (customRender) {
		return customRender;
	} else if (rest.label) {
		return rest.label;
	}
	return null;
};

export class HeaderResizable extends React.Component {
	state = {
		resizing: false,
	};

	setResizing = resizing => {
		this.setState({
			resizing,
		});
	};

	render() {
		const { children, dataKey, label, t = getDefaultT() } = this.props;
		const { resizing } = this.state;
		const tooltipLabel = t('RESIZE_COLUMN', { defaultValue: 'Resize column' });
		return (
			<ConsumerVirtualizedList>
				{({ resizeColumn }) => (
					<div
						key={dataKey}
						className={classNames(
							theme('tc-header-cell-resizable'),
							theme({ 'tc-header-cell-resizable-resizing': resizing }),
						)}
					>
						<div className={classNames(theme('tc-header-cell-resizable-truncated-text'))}>
							<HeaderResizableContent customRender={children} label={label} />
						</div>
						<Draggable
							axis="x"
							defaultClassName={classNames(theme('tc-header-cell-resizable-drag-handle'))}
							onStart={() => this.setResizing(true)}
							onDrag={(_, data) => {
								resizeColumn(dataKey, data.deltaX);
							}}
							onStop={() => this.setResizing(false)}
							position={{ x: 0 }}
						>
							<div
								className={classNames(theme('tc-header-cell-resizable-drag-handle-icon'))}
								title={tooltipLabel}
							/>
						</Draggable>
					</div>
				)}
			</ConsumerVirtualizedList>
		);
	}
}

HeaderResizable.propTypes = {
	children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
	dataKey: PropTypes.string,
	label: PropTypes.string,
	t: PropTypes.func,
};

export default props => <HeaderResizable {...props} />;<commit_msg>fix(components): List composition - display order icon in resize column (#2407)<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Draggable from 'react-draggable';
import { defaultTableHeaderRenderer } from 'react-virtualized';
import { ConsumerVirtualizedList } from '../virtualizedListContext';
import headerResizableCssModule from './HeaderResizable.scss';
import { getTheme } from '../../theme';
import getDefaultT from '../../translate';

const theme = getTheme(headerResizableCssModule);

const HeaderResizableContent = ({ customRender, ...rest }) => {
	if (customRender) {
		return customRender;
	} else if (rest.label) {
		return defaultTableHeaderRenderer(rest);
	}
	return null;
};

export class HeaderResizable extends React.Component {
	state = {
		resizing: false,
	};

	setResizing = resizing => {
		this.setState({
			resizing,
		});
	};

	render() {
		const { children, dataKey, label, sortBy, sortDirection, t = getDefaultT() } = this.props;
		const { resizing } = this.state;
		const tooltipLabel = t('RESIZE_COLUMN', { defaultValue: 'Resize column' });
		return (
			<ConsumerVirtualizedList>
				{({ resizeColumn }) => (
					<div
						key={dataKey}
						className={classNames(
							theme('tc-header-cell-resizable'),
							theme({ 'tc-header-cell-resizable-resizing': resizing }),
						)}
					>
						<div className={classNames(theme('tc-header-cell-resizable-truncated-text'))}>
							<HeaderResizableContent
								customRender={children}
								label={label}
								dataKey={dataKey}
								sortBy={sortBy}
								sortDirection={sortDirection}
							/>
						</div>
						<Draggable
							axis="x"
							defaultClassName={classNames(theme('tc-header-cell-resizable-drag-handle'))}
							onStart={() => this.setResizing(true)}
							onDrag={(_, data) => {
								resizeColumn(dataKey, data.deltaX);
							}}
							onStop={() => this.setResizing(false)}
							position={{ x: 0 }}
						>
							<div
								className={classNames(theme('tc-header-cell-resizable-drag-handle-icon'))}
								title={tooltipLabel}
							/>
						</Draggable>
					</div>
				)}
			</ConsumerVirtualizedList>
		);
	}
}

HeaderResizable.propTypes = {
	children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
	dataKey: PropTypes.string,
	label: PropTypes.string,
	sortBy: PropTypes.string,
	sortDirection: PropTypes.string,
	t: PropTypes.func,
};

export default props => <HeaderResizable {...props} />;
{'fraction_non_alphanumeric': 0.14958625079567156, 'fraction_numerical': 0.001273074474856779, 'mean_word_length': 3.43879472693032, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4157934', 'n_tokens_mistral': 1810, 'n_tokens_neox': 1448, 'n_words': 282}