mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
This reverts commit 73de529a00.
This commit is contained in:
CJ Cenizal
GitHub
parent
60c0e9b1b1
commit
c86f994d53
5 changed files with 12 additions and 350 deletions
|
|
@ -76,7 +76,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@elastic/datemath": "4.0.2",
|
||||
"@elastic/eui": "0.0.18",
|
||||
"@elastic/eui": "0.0.19",
|
||||
"@elastic/filesaver": "1.1.2",
|
||||
"@elastic/numeral": "2.3.0",
|
||||
"@elastic/test-subj-selector": "0.2.1",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
`;
|
||||
|
|
@ -5,126 +5,37 @@ import PropTypes from 'prop-types';
|
|||
|
||||
import {
|
||||
EuiGlobalToastList,
|
||||
EuiGlobalToastListItem,
|
||||
EuiToast,
|
||||
} from '@elastic/eui';
|
||||
|
||||
export const TOAST_FADE_OUT_MS = 250;
|
||||
|
||||
export class GlobalToastList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
toastIdToDismissedMap: {}
|
||||
};
|
||||
|
||||
this.timeoutIds = [];
|
||||
this.toastIdToScheduledForDismissalMap = {};
|
||||
|
||||
if (this.props.subscribe) {
|
||||
this.props.subscribe(() => this.forceUpdate());
|
||||
}
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
toasts: PropTypes.array,
|
||||
subscribe: PropTypes.func,
|
||||
toasts: PropTypes.array,
|
||||
dismissToast: PropTypes.func.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() {
|
||||
const {
|
||||
toasts,
|
||||
dismissToast,
|
||||
toastLifeTimeMs,
|
||||
} = this.props;
|
||||
|
||||
const renderedToasts = toasts.map(toast => {
|
||||
const {
|
||||
text,
|
||||
...rest
|
||||
} = toast;
|
||||
|
||||
return (
|
||||
<EuiGlobalToastListItem
|
||||
key={toast.id}
|
||||
isDismissed={this.state.toastIdToDismissedMap[toast.id]}
|
||||
>
|
||||
<EuiToast
|
||||
onClose={this.scheduleToastForDismissal.bind(toast, true)}
|
||||
{...rest}
|
||||
>
|
||||
{text}
|
||||
</EuiToast>
|
||||
</EuiGlobalToastListItem>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<EuiGlobalToastList>
|
||||
{renderedToasts}
|
||||
</EuiGlobalToastList>
|
||||
<EuiGlobalToastList
|
||||
toasts={toasts}
|
||||
dismissToast={dismissToast}
|
||||
toastLifeTimeMs={toastLifeTimeMs}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -87,9 +87,9 @@
|
|||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@elastic/eui@0.0.18":
|
||||
version "0.0.18"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.18.tgz#eeae6e93ead3bd014f401f577f06af75fff60898"
|
||||
"@elastic/eui@0.0.19":
|
||||
version "0.0.19"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-0.0.19.tgz#f5e57151c20eb9ef0544155b09a1b9c5d8bfa6ef"
|
||||
dependencies:
|
||||
brace "^0.10.0"
|
||||
classnames "^2.2.5"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue