github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-25 10:23:14 -04:00
Code Issues Projects Releases Packages Wiki Activity

Revert "Revert "Upgrade to EUI 0.0.19. (#16576)"" (#16622) (#16626)

Browse source 
This reverts commit 73de529a00.
This commit is contained in:
CJ Cenizal 2018-02-08 17:09:52 -08:00 • committed by GitHub
parent 60c0e9b1b1
commit c86f994d53
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 350 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -76,7 +76,7 @@
}, },
"dependencies": { "dependencies": {
"@elastic/datemath": "4.0.2", "@elastic/datemath": "4.0.2",
"@elastic/eui": "0.0.18", "@elastic/eui": "0.0.19",
"@elastic/filesaver": "1.1.2", "@elastic/filesaver": "1.1.2",
"@elastic/numeral": "2.3.0", "@elastic/numeral": "2.3.0",
"@elastic/test-subj-selector": "0.2.1", "@elastic/test-subj-selector": "0.2.1",

146
src/ui/public/notify/toasts/__snapshots__/global_toast_list.test.js.snap
View file

@ -1,146 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`GlobalToastList is rendered 1`] = `
<div
class="euiGlobalToastList"
/>
`;
exports[`GlobalToastList props toasts is rendered 1`] = `
<div
class="euiGlobalToastList"
>
<div
class="euiToast euiToast--success euiGlobalToastListItem"
data-test-subj="a"
id="a"
>
<div
class="euiToastHeader euiToastHeader--withBody"
>
<svg
aria-hidden="true"
class="euiIcon euiToastHeader__icon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
id="check-a"
/>
</defs>
<use
href="#check-a"
/>
</svg>
<span
class="euiToastHeader__title"
>
A
</span>
</div>
<button
aria-label="Dismiss toast"
class="euiToast__closeButton"
data-test-subj="toastCloseButton"
type="button"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
id="cross-a"
/>
</defs>
<use
fill-rule="nonzero"
href="#cross-a"
/>
</svg>
</button>
<div
class="euiText euiText--small"
>
a
</div>
</div>
<div
class="euiToast euiToast--danger euiGlobalToastListItem"
data-test-subj="b"
id="b"
>
<div
class="euiToastHeader euiToastHeader--withBody"
>
<svg
aria-hidden="true"
class="euiIcon euiToastHeader__icon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill-rule="evenodd"
>
<path
d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
/>
<path
d="M7 6h1v5H7zM7 12h1v1H7z"
/>
</g>
</svg>
<span
class="euiToastHeader__title"
>
B
</span>
</div>
<button
aria-label="Dismiss toast"
class="euiToast__closeButton"
data-test-subj="toastCloseButton"
type="button"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<path
d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
id="cross-a"
/>
</defs>
<use
fill-rule="nonzero"
href="#cross-a"
/>
</svg>
</button>
<div
class="euiText euiText--small"
>
b
</div>
</div>
</div>
`;

105
src/ui/public/notify/toasts/global_toast_list.js
View file

@ -5,126 +5,37 @@ import PropTypes from 'prop-types';
import { import {
EuiGlobalToastList, EuiGlobalToastList,
EuiGlobalToastListItem,
EuiToast,
} from '@elastic/eui'; } from '@elastic/eui';
export const TOAST_FADE_OUT_MS = 250;
export class GlobalToastList extends Component { export class GlobalToastList extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
toastIdToDismissedMap: {}
};
this.timeoutIds = [];
this.toastIdToScheduledForDismissalMap = {};
if (this.props.subscribe) { if (this.props.subscribe) {
this.props.subscribe(() => this.forceUpdate()); this.props.subscribe(() => this.forceUpdate());
} }
} }
static propTypes = { static propTypes = {
toasts: PropTypes.array,
subscribe: PropTypes.func, subscribe: PropTypes.func,
toasts: PropTypes.array,
dismissToast: PropTypes.func.isRequired, dismissToast: PropTypes.func.isRequired,
toastLifeTimeMs: PropTypes.number.isRequired, toastLifeTimeMs: PropTypes.number.isRequired,
}; };
static defaultProps = {
toasts: [],
};
scheduleAllToastsForDismissal = () => {
this.props.toasts.forEach(toast => {
if (!this.toastIdToScheduledForDismissalMap[toast.id]) {
this.scheduleToastForDismissal(toast);
}
});
};
scheduleToastForDismissal = (toast, isImmediate = false) => {
this.toastIdToScheduledForDismissalMap[toast.id] = true;
const toastLifeTimeMs = isImmediate ? 0 : this.props.toastLifeTimeMs;
// Start fading the toast out once its lifetime elapses.
this.timeoutIds.push(setTimeout(() => {
this.startDismissingToast(toast);
}, toastLifeTimeMs));
// Remove the toast after it's done fading out.
this.timeoutIds.push(setTimeout(() => {
this.props.dismissToast(toast);
this.setState(prevState => {
const toastIdToDismissedMap = { ...prevState.toastIdToDismissedMap };
delete toastIdToDismissedMap[toast.id];
delete this.toastIdToScheduledForDismissalMap[toast.id];
return {
toastIdToDismissedMap,
};
});
}, toastLifeTimeMs + TOAST_FADE_OUT_MS));
};
startDismissingToast(toast) {
this.setState(prevState => {
const toastIdToDismissedMap = {
...prevState.toastIdToDismissedMap,
[toast.id]: true,
};
return {
toastIdToDismissedMap,
};
});
}
componentDidMount() {
this.scheduleAllToastsForDismissal();
}
componentWillUnmount() {
this.timeoutIds.forEach(clearTimeout);
}
componentDidUpdate() {
this.scheduleAllToastsForDismissal();
}
render() { render() {
const { const {
toasts, toasts,
dismissToast,
toastLifeTimeMs,
} = this.props; } = this.props;
const renderedToasts = toasts.map(toast => {
const {
text,
...rest
} = toast;
return ( return (
<EuiGlobalToastListItem <EuiGlobalToastList
key={toast.id} toasts={toasts}
isDismissed={this.state.toastIdToDismissedMap[toast.id]} dismissToast={dismissToast}
> toastLifeTimeMs={toastLifeTimeMs}
<EuiToast />
onClose={this.scheduleToastForDismissal.bind(toast, true)}
{...rest}
>
{text}
</EuiToast>
</EuiGlobalToastListItem>
);
});
return (
<EuiGlobalToastList>
{renderedToasts}
</EuiGlobalToastList>
); );
} }
} }

103
src/ui/public/notify/toasts/global_toast_list.test.js
View file

@ -1,103 +0,0 @@
import React from 'react';
import { render, mount } from 'enzyme';
import sinon from 'sinon';
import { findTestSubject } from '@elastic/eui/lib/test';
import {
GlobalToastList,
TOAST_FADE_OUT_MS,
} from './global_toast_list';
describe('GlobalToastList', () => {
test('is rendered', () => {
const component = render(
<GlobalToastList
dismissToast={() => {}}
toastLifeTimeMs={5}
/>
);
expect(component)
.toMatchSnapshot();
});
describe('props', () => {
describe('toasts', () => {
test('is rendered', () => {
const toasts = [{
title: 'A',
text: 'a',
color: 'success',
iconType: 'check',
'data-test-subj': 'a',
id: 'a',
}, {
title: 'B',
text: 'b',
color: 'danger',
iconType: 'alert',
'data-test-subj': 'b',
id: 'b',
}];
const component = render(
<GlobalToastList
toasts={toasts}
dismissToast={() => {}}
toastLifeTimeMs={5}
/>
);
expect(component)
.toMatchSnapshot();
});
});
describe('dismissToast', () => {
test('is called when a toast is clicked', done => {
const dismissToastSpy = sinon.spy();
const component = mount(
<GlobalToastList
toasts={[{
'data-test-subj': 'b',
id: 'b',
}]}
dismissToast={dismissToastSpy}
toastLifeTimeMs={100}
/>
);
const toastB = findTestSubject(component, 'b');
const closeButton = findTestSubject(toastB, 'toastCloseButton');
closeButton.simulate('click');
// The callback is invoked once the toast fades from view.
setTimeout(() => {
expect(dismissToastSpy.called).toBe(true);
done();
}, TOAST_FADE_OUT_MS + 1);
});
test('is called when the toast lifetime elapses', done => {
const TOAST_LIFE_TIME_MS = 5;
const dismissToastSpy = sinon.spy();
mount(
<GlobalToastList
toasts={[{
'data-test-subj': 'b',
id: 'b',
}]}
dismissToast={dismissToastSpy}
toastLifeTimeMs={TOAST_LIFE_TIME_MS}
/>
);
// The callback is invoked once the toast fades from view.
setTimeout(() => {
expect(dismissToastSpy.called).toBe(true);
done();
}, TOAST_LIFE_TIME_MS + TOAST_FADE_OUT_MS);
});
});
});
});

6
yarn.lock
View file

@ -87,9 +87,9 @@
version "0.0.0" version "0.0.0"
uid "" uid ""
"@elastic/eui@0.0.18": "@elastic/eui@0.0.19":
version "0.0.18" version "0.0.19"
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.18.tgz#eeae6e93ead3bd014f401f577f06af75fff60898" resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.19.tgz#f5e57151c20eb9ef0544155b09a1b9c5d8bfa6ef"
dependencies: dependencies:
brace "^0.10.0" brace "^0.10.0"
classnames "^2.2.5" classnames "^2.2.5"