@mmcodemark/fuselage-toastbar
Version:
Fuselage ToastBar component
51 lines • 2.23 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx } from "react/jsx-runtime";
import { Button, Box } from '@mmcodemark/fuselage';
import { useState } from 'react';
import { useToastBarDispatch } from './ToastBarContext';
export default {
title: 'view/ToastBar',
parameters: {
layout: 'fullscreen',
actions: { argTypesRegex: '^on.*' },
},
};
export var ToastBarWithData = function () {
var _a = useState(0), counter = _a[0], setCounter = _a[1];
var dispatchToastMessage = useToastBarDispatch();
var messageArray = [
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam nihi Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam nihi',
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam nihi Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam nihi',
'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam nihi Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam nihi',
'Lorem Ipsum',
'Lorem ipsum dolor, sit amet consectetur adipisicing elit.',
];
var handleToast = function () {
dispatchToastMessage({
type: 'success',
message: messageArray[counter],
});
dispatchToastMessage({
type: 'error',
message: messageArray[counter],
time: 10,
position: 'bottom-start',
});
if (counter === messageArray.length - 1) {
return setCounter(0);
}
return setCounter(function (prevState) { return prevState + 1; });
};
return (_jsx(Box, __assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }, { children: _jsx(Button, __assign({ primary: true, onClick: handleToast }, { children: "Dispatch ToastBar" })) })));
};
//# sourceMappingURL=stories.js.map