[MM-55407] Remove deprecated LocalizedIcon component (#25828)
Этот коммит содержится в:
коммит произвёл
GitHub
родитель
9016e30044
Коммит
18f0d8d88f
@@ -167,7 +167,7 @@
|
|||||||
"jest-junit": "16.0.0",
|
"jest-junit": "16.0.0",
|
||||||
"jest-styled-components": "7.2.0",
|
"jest-styled-components": "7.2.0",
|
||||||
"jest-watch-typeahead": "2.2.2",
|
"jest-watch-typeahead": "2.2.2",
|
||||||
"mmjstool": "github:mattermost/mattermost-utilities#83b1b311972b8f5e750aae4019457a40abb5aa44",
|
"mmjstool": "github:mattermost/mattermost-utilities#73e61d2ede0ebf802492df4cfbac481d35efed54",
|
||||||
"nock": "13.2.8",
|
"nock": "13.2.8",
|
||||||
"prettier": "2.3.2",
|
"prettier": "2.3.2",
|
||||||
"react-router-enzyme-context": "1.2.0",
|
"react-router-enzyme-context": "1.2.0",
|
||||||
|
|||||||
@@ -1,51 +0,0 @@
|
|||||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
||||||
// See LICENSE.txt for license information.
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import {mountWithIntl} from 'tests/helpers/intl-test-helper';
|
|
||||||
|
|
||||||
import LocalizedIcon from './localized_icon';
|
|
||||||
|
|
||||||
describe('LocalizedIcon', () => {
|
|
||||||
const baseProps = {
|
|
||||||
title: {
|
|
||||||
id: 'test.id',
|
|
||||||
defaultMessage: 'test default message',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
test('should render localized title', () => {
|
|
||||||
const wrapper = mountWithIntl(<LocalizedIcon {...baseProps}/>);
|
|
||||||
|
|
||||||
expect(wrapper.find('i').prop('title')).toBe(baseProps.title.defaultMessage);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should render using given component', () => {
|
|
||||||
const props = {
|
|
||||||
...baseProps,
|
|
||||||
};
|
|
||||||
|
|
||||||
const wrapper = mountWithIntl(
|
|
||||||
<LocalizedIcon
|
|
||||||
component='span'
|
|
||||||
{...props}
|
|
||||||
/>,
|
|
||||||
);
|
|
||||||
|
|
||||||
expect(wrapper.find('i').exists()).toBe(false);
|
|
||||||
expect(wrapper.find('span').exists()).toBe(true);
|
|
||||||
expect(wrapper.find('span').prop('title')).toBe(baseProps.title.defaultMessage);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('should pass other props to component', () => {
|
|
||||||
const props = {
|
|
||||||
...baseProps,
|
|
||||||
className: 'my-icon',
|
|
||||||
};
|
|
||||||
|
|
||||||
const wrapper = mountWithIntl(<LocalizedIcon {...props}/>);
|
|
||||||
|
|
||||||
expect(wrapper.find('i').prop('className')).toBe(props.className);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,59 +0,0 @@
|
|||||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
|
||||||
// See LICENSE.txt for license information.
|
|
||||||
|
|
||||||
import type {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat';
|
|
||||||
import React from 'react';
|
|
||||||
import type {HTMLAttributes} from 'react';
|
|
||||||
import {useIntl} from 'react-intl';
|
|
||||||
import type {MessageDescriptor} from 'react-intl';
|
|
||||||
|
|
||||||
type Props = Omit<HTMLAttributes<HTMLSpanElement | HTMLElement>, 'title' | 'component'> & {
|
|
||||||
component?: 'i' | 'span';
|
|
||||||
ariaLabel?: MessageDescriptor & {
|
|
||||||
values?: Record<string, PrimitiveType | FormatXMLElementFn<string, string>>;
|
|
||||||
};
|
|
||||||
title?: MessageDescriptor & {
|
|
||||||
values?: Record<string, PrimitiveType | FormatXMLElementFn<string, string>>;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @deprecated Use react-intl for title and aria-label instead and make revelant i or span tags for the icon
|
|
||||||
*/
|
|
||||||
const LocalizedIcon = React.forwardRef((props: Props, ref?: React.Ref<HTMLSpanElement | HTMLElement>) => {
|
|
||||||
const {
|
|
||||||
component = 'i',
|
|
||||||
ariaLabel,
|
|
||||||
title,
|
|
||||||
...otherProps
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const {formatMessage} = useIntl();
|
|
||||||
|
|
||||||
if (component !== 'i' && component !== 'span') {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Use an uppercase name since JSX thinks anything lowercase is an HTML tag
|
|
||||||
const Component = component;
|
|
||||||
|
|
||||||
const iconProps: HTMLAttributes<HTMLElement> = {
|
|
||||||
...otherProps,
|
|
||||||
};
|
|
||||||
if (ariaLabel) {
|
|
||||||
iconProps['aria-label'] = formatMessage({id: ariaLabel.id, defaultMessage: ariaLabel.defaultMessage}, ariaLabel.values);
|
|
||||||
}
|
|
||||||
if (title) {
|
|
||||||
iconProps.title = formatMessage({id: title.id, defaultMessage: title.defaultMessage}, title.values);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Component
|
|
||||||
ref={ref}
|
|
||||||
{...iconProps}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
LocalizedIcon.displayName = 'LocalizedIcon';
|
|
||||||
|
|
||||||
export default LocalizedIcon;
|
|
||||||
6
webapp/package-lock.json
сгенерированный
6
webapp/package-lock.json
сгенерированный
@@ -213,7 +213,7 @@
|
|||||||
"jest-junit": "16.0.0",
|
"jest-junit": "16.0.0",
|
||||||
"jest-styled-components": "7.2.0",
|
"jest-styled-components": "7.2.0",
|
||||||
"jest-watch-typeahead": "2.2.2",
|
"jest-watch-typeahead": "2.2.2",
|
||||||
"mmjstool": "github:mattermost/mattermost-utilities#83b1b311972b8f5e750aae4019457a40abb5aa44",
|
"mmjstool": "github:mattermost/mattermost-utilities#73e61d2ede0ebf802492df4cfbac481d35efed54",
|
||||||
"nock": "13.2.8",
|
"nock": "13.2.8",
|
||||||
"prettier": "2.3.2",
|
"prettier": "2.3.2",
|
||||||
"react-router-enzyme-context": "1.2.0",
|
"react-router-enzyme-context": "1.2.0",
|
||||||
@@ -17036,8 +17036,8 @@
|
|||||||
},
|
},
|
||||||
"node_modules/mmjstool": {
|
"node_modules/mmjstool": {
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"resolved": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#83b1b311972b8f5e750aae4019457a40abb5aa44",
|
"resolved": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#73e61d2ede0ebf802492df4cfbac481d35efed54",
|
||||||
"integrity": "sha512-SFAbT+eN1mvgSfRTe8k6IMKVWbhGItTJtxZ+Pt0mX+fe8pakB3MkIkWzHBHVnEDI9Ek9kmQFGF1aZwzKFHXyYQ==",
|
"integrity": "sha512-FnyR3NE3UWkEwmhomKmArHxL3BIjZ2MCCiPX8L/hkDcCTsO5YCgrGzT9OBvJeQnB1RrIIu2Rm9DsK8k4NkCCQA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"estree-walk": "^2.2.0",
|
"estree-walk": "^2.2.0",
|
||||||
|
|||||||
Ссылка в новой задаче
Block a user