Update examples (#27657)
This commit is contained in:
parent
8fb34fc752
commit
76ae4e6923
2 changed files with 42 additions and 44 deletions
|
@ -393,29 +393,29 @@ For example, there is a component that is wrapped by `injectI18n`, like in the `
|
|||
|
||||
```js
|
||||
// ...
|
||||
class AddFilterUi extends Component {
|
||||
export const AddFilter = injectI18n(
|
||||
class AddFilterUi extends Component {
|
||||
// ...
|
||||
render() {
|
||||
const { filter } = this.state;
|
||||
return (
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow={10}>
|
||||
<EuiFieldText
|
||||
fullWidth
|
||||
value={filter}
|
||||
onChange={e => this.setState({ filter: e.target.value.trim() })}
|
||||
placeholder={this.props.intl.formatMessage({
|
||||
id: 'kbn.management.indexPattern.edit.source.placeholder',
|
||||
defaultMessage: 'source filter, accepts wildcards (e.g., `user*` to filter fields starting with \'user\')'
|
||||
})}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
render() {
|
||||
const { filter } = this.state;
|
||||
return (
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexItem grow={10}>
|
||||
<EuiFieldText
|
||||
fullWidth
|
||||
value={filter}
|
||||
onChange={e => this.setState({ filter: e.target.value.trim() })}
|
||||
placeholder={this.props.intl.formatMessage({
|
||||
id: 'kbn.management.indexPattern.edit.source.placeholder',
|
||||
defaultMessage: 'source filter, accepts wildcards (e.g., `user*` to filter fields starting with \'user\')'
|
||||
})}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const AddFilter = injectI18n(AddFilterUi);
|
||||
);
|
||||
```
|
||||
|
||||
To test the `AddFilter` component it is needed to render its `WrappedComponent` property using `shallowWithIntl` function to pass `intl` object into the `props`.
|
||||
|
|
|
@ -298,7 +298,7 @@ React component as a pure function:
|
|||
import React from 'react';
|
||||
import { injectI18n, intlShape } from '@kbn/i18n/react';
|
||||
|
||||
const MyComponentContent = ({ intl }) => (
|
||||
export const MyComponent = injectI18n({ intl }) => (
|
||||
<input
|
||||
type="text"
|
||||
placeholder={intl.formatMessage(
|
||||
|
@ -311,13 +311,11 @@ const MyComponentContent = ({ intl }) => (
|
|||
{ name, unreadCount }
|
||||
)}
|
||||
/>
|
||||
);
|
||||
));
|
||||
|
||||
MyComponentContent.propTypes = {
|
||||
MyComponent.WrappedComponent.propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
export const MyComponent = injectI18n(MyComponentContent);
|
||||
```
|
||||
|
||||
React component as a class:
|
||||
|
@ -326,27 +324,27 @@ React component as a class:
|
|||
import React from 'react';
|
||||
import { injectI18n, intlShape } from '@kbn/i18n/react';
|
||||
|
||||
class MyComponentContent extends React.Component {
|
||||
static propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
export const MyComponent = injectI18n(
|
||||
class MyComponent extends React.Component {
|
||||
static propTypes = {
|
||||
intl: intlShape.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { intl } = this.props;
|
||||
render() {
|
||||
const { intl } = this.props;
|
||||
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'kbn.management.objects.searchPlaceholder',
|
||||
defaultMessage: 'Search',
|
||||
})}
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<input
|
||||
type="text"
|
||||
placeholder={intl.formatMessage({
|
||||
id: 'kbn.management.objects.searchPlaceholder',
|
||||
defaultMessage: 'Search',
|
||||
})}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const MyComponent = injectI18n(MyComponentContent);
|
||||
);
|
||||
```
|
||||
|
||||
## AngularJS
|
||||
|
|
Loading…
Reference in a new issue