Simplify column headers (#27557)
parent
1f5187e2e2
commit
13d310e64d
@ -1,41 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { Icon } from 'mastodon/components/icon';
|
||||
|
||||
export default class ColumnHeader extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
icon: PropTypes.string,
|
||||
iconComponent: PropTypes.func,
|
||||
type: PropTypes.string,
|
||||
active: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
columnHeaderId: PropTypes.string,
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
this.props.onClick();
|
||||
};
|
||||
|
||||
render () {
|
||||
const { icon, iconComponent, type, active, columnHeaderId } = this.props;
|
||||
let iconElement = '';
|
||||
|
||||
if (icon) {
|
||||
iconElement = <Icon id={icon} icon={iconComponent} className='column-header__icon' />;
|
||||
}
|
||||
|
||||
return (
|
||||
<h1 className={classNames('column-header', { active })} id={columnHeaderId || null}>
|
||||
<button onClick={this.handleClick}>
|
||||
{iconElement}
|
||||
{type}
|
||||
</button>
|
||||
</h1>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
@ -0,0 +1,62 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
import { Component } from 'react';
|
||||
|
||||
import { IntlProvider } from 'react-intl';
|
||||
|
||||
import { MemoryRouter } from 'react-router';
|
||||
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { render as rtlRender } from '@testing-library/react';
|
||||
|
||||
class FakeIdentityWrapper extends Component<
|
||||
PropsWithChildren<{ signedIn: boolean }>
|
||||
> {
|
||||
static childContextTypes = {
|
||||
identity: PropTypes.shape({
|
||||
signedIn: PropTypes.bool.isRequired,
|
||||
accountId: PropTypes.string,
|
||||
disabledAccountId: PropTypes.string,
|
||||
accessToken: PropTypes.string,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
getChildContext() {
|
||||
return {
|
||||
identity: {
|
||||
signedIn: this.props.signedIn,
|
||||
accountId: '123',
|
||||
accessToken: 'test-access-token',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
function render(
|
||||
ui: React.ReactElement,
|
||||
{ locale = 'en', signedIn = true, ...renderOptions } = {},
|
||||
) {
|
||||
const Wrapper = (props: { children: React.ReactElement }) => {
|
||||
return (
|
||||
<MemoryRouter>
|
||||
<IntlProvider locale={locale}>
|
||||
<FakeIdentityWrapper signedIn={signedIn}>
|
||||
{props.children}
|
||||
</FakeIdentityWrapper>
|
||||
</IntlProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
};
|
||||
return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
|
||||
}
|
||||
|
||||
// re-export everything
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
export * from '@testing-library/react';
|
||||
|
||||
// override render method
|
||||
export { render };
|
Loading…
Reference in new issue