<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { translate } from 'react-i18next';
import Skeleton from '../Skeleton';
import { Action } from '../Actions';
import InlineForm from './InlineForm.component';
import theme from './EditableText.scss';
import I18N_DOMAIN_COMPONENTS from '../constants';

function PlainTextTitle({ onEdit, disabled, text, inProgress, t }) {
	const isDisabled = disabled || inProgress;
	return (
		<div className={theme['tc-editable-text-title']}>
			<span
				className={classNames(theme['tc-editable-text-wording'], 'tc-editable-text-wording')}
				onDoubleClick={isDisabled ? undefined : onEdit}
			>
				{text}
			</span>
			<Action
				name="action-edit"
				label={t('MODIFY_TOOLTIP', { defaultValue: 'Edit' })}
				icon="talend-pencil"
				onClick={onEdit}
				bsStyle="link"
				className={classNames(theme['tc-editable-text-pencil'], 'tc-editable-text-pencil')}
				disabled={disabled || inProgress}
				hideLabel
			/>
		</div>
	);
}

PlainTextTitle.propTypes = {
	text: PropTypes.string.isRequired,
	onEdit: PropTypes.bool,
	disabled: PropTypes.bool,
	inProgress: PropTypes.bool,
	t: PropTypes.func,
};

function EditableText({ editMode, loading, inProgress, ...rest }) {
	if (loading) {
		return <Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />;
	}

	const Component = editMode ? InlineForm : PlainTextTitle;
	const allyProps = {};
	if (inProgress) {
		allyProps['aria-label'] = rest.t('EDITABLE_TEXT_IN_PROGRESS', {
			defaultValue: 'Edit in progress',
		});
		allyProps['aria-busy'] = true;
	}
	return (
		<div
			className={classNames(theme['tc-editable-text'], 'tc-editable-text', {
				[theme['tc-editable-text-blink']]: inProgress,
				'tc-editable-text-blink': inProgress,
			})}
			{...allyProps}
		>
			<Component inProgress={inProgress} {...rest} />
		</div>
	);
}

EditableText.displayName = 'EditableText';

EditableText.propTypes = {
	text: PropTypes.string.isRequired,
	editMode: PropTypes.bool,
	loading: PropTypes.bool,
	inProgress: PropTypes.bool,
	onEdit: PropTypes.bool,
	disabled: PropTypes.bool,
	t: PropTypes.func,
};

EditableText.defaultProps = {
	editMode: false,
	loading: false,
	inProgress: false,
};

export default translate(I18N_DOMAIN_COMPONENTS)(EditableText);<commit_msg>chore(component): remove two proptypes warnings (#1692)<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { translate } from 'react-i18next';
import Skeleton from '../Skeleton';
import { Action } from '../Actions';
import InlineForm from './InlineForm.component';
import theme from './EditableText.scss';
import I18N_DOMAIN_COMPONENTS from '../constants';

function PlainTextTitle({ onEdit, disabled, text, inProgress, t }) {
	const isDisabled = disabled || inProgress;
	return (
		<div className={theme['tc-editable-text-title']}>
			<span
				className={classNames(theme['tc-editable-text-wording'], 'tc-editable-text-wording')}
				onDoubleClick={isDisabled ? undefined : onEdit}
			>
				{text}
			</span>
			<Action
				name="action-edit"
				label={t('MODIFY_TOOLTIP', { defaultValue: 'Edit' })}
				icon="talend-pencil"
				onClick={onEdit}
				bsStyle="link"
				className={classNames(theme['tc-editable-text-pencil'], 'tc-editable-text-pencil')}
				disabled={disabled || inProgress}
				hideLabel
			/>
		</div>
	);
}

PlainTextTitle.propTypes = {
	text: PropTypes.string.isRequired,
	onEdit: PropTypes.func.isRequired,
	disabled: PropTypes.bool,
	inProgress: PropTypes.bool,
	t: PropTypes.func,
};

function EditableText({ editMode, loading, inProgress, ...rest }) {
	if (loading) {
		return <Skeleton type={Skeleton.TYPES.text} size={Skeleton.SIZES.large} />;
	}

	const Component = editMode ? InlineForm : PlainTextTitle;
	const allyProps = {};
	if (inProgress) {
		allyProps['aria-label'] = rest.t('EDITABLE_TEXT_IN_PROGRESS', {
			defaultValue: 'Edit in progress',
		});
		allyProps['aria-busy'] = true;
	}
	return (
		<div
			className={classNames(theme['tc-editable-text'], 'tc-editable-text', {
				[theme['tc-editable-text-blink']]: inProgress,
				'tc-editable-text-blink': inProgress,
			})}
			{...allyProps}
		>
			<Component inProgress={inProgress} {...rest} />
		</div>
	);
}

EditableText.displayName = 'EditableText';

EditableText.propTypes = {
	text: PropTypes.string.isRequired,
	editMode: PropTypes.bool,
	loading: PropTypes.bool,
	inProgress: PropTypes.bool,
	onEdit: PropTypes.func.isRequired,
	disabled: PropTypes.bool,
	t: PropTypes.func,
};

EditableText.defaultProps = {
	editMode: false,
	loading: false,
	inProgress: false,
};

export default translate(I18N_DOMAIN_COMPONENTS)(EditableText);
{'fraction_non_alphanumeric': 0.1554054054054054, 'fraction_numerical': 0.0033783783783783786, 'mean_word_length': 4.586084905660377, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 21, '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': '5136831', 'n_tokens_mistral': 1756, 'n_tokens_neox': 1618, 'n_words': 308}