d2ed3e54ee
* refactor: replaced injectIntl with useIntl * test: update tests for useIntl hook implementation * fix: add missing trailing comma * test: fix failing component tests and remove deprecated defaultProps - Fix SwitchContent component defaultProps warning with default parameters - Fix Visibility component formatMessage errors and remove defaultProps - Fix FormControls component intl provider issues with useIntl mock - Fix EditButton component defaultProps and message formatting - Update EditableItemHeader, EmptyContent components - Replace React defaultProps with ES6 default parameters across components - Update test mocking to properly handle useIntl hook - All 82 tests now pass (previously 4 failed, 78 passed) Resolves React deprecation warnings and modernizes component patterns. * fix: add missing trailing comma
60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import classNames from 'classnames';
|
|
import EditButton from './EditButton';
|
|
import { Visibility } from './Visibility';
|
|
import { useIsOnMobileScreen } from '../../data/hooks';
|
|
|
|
const EditableItemHeader = ({
|
|
content = '',
|
|
showVisibility = false,
|
|
visibility = 'private',
|
|
showEditButton = false,
|
|
onClickEdit = () => {},
|
|
headingId = null,
|
|
}) => {
|
|
const isMobileView = useIsOnMobileScreen();
|
|
return (
|
|
<>
|
|
<div className="row m-0 p-0 d-flex flex-nowrap align-items-center">
|
|
<div
|
|
className={classNames([
|
|
'm-0 p-0 col-auto',
|
|
isMobileView ? 'w-90' : '',
|
|
])}
|
|
>
|
|
<h4
|
|
className="edit-section-header text-gray-700"
|
|
id={headingId}
|
|
>
|
|
{content}
|
|
</h4>
|
|
</div>
|
|
<div
|
|
className={classNames([
|
|
'col-auto m-0 p-0 d-flex align-items-center',
|
|
isMobileView ? 'col-1' : 'col-auto',
|
|
])}
|
|
>
|
|
{showEditButton ? <EditButton className="p-1.5" onClick={onClickEdit} /> : null}
|
|
</div>
|
|
</div>
|
|
<div className="row m-0 p-0">
|
|
{showVisibility ? <p className="mb-0"><Visibility to={visibility} /></p> : null}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default EditableItemHeader;
|
|
|
|
EditableItemHeader.propTypes = {
|
|
onClickEdit: PropTypes.func,
|
|
showVisibility: PropTypes.bool,
|
|
showEditButton: PropTypes.bool,
|
|
content: PropTypes.node,
|
|
visibility: PropTypes.oneOf(['private', 'all_users']),
|
|
headingId: PropTypes.string,
|
|
};
|