@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
52 lines • 2.38 kB
JavaScript
import * as React from 'react';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { useState, useEffect } from 'react';
import { Icon, } from '@fluentui/react/lib/Icon';
require('@mikezimm/fps-styles/dist/fps-FadePanel.css');
//Use this to add more console.logs for this component
// const consolePrefix: string = 'fpsconsole: FadePanelComponent';
const _backStyle = [
undefined,
'hidePane',
'showPane',
];
const FadePanel = (props) => {
const { content, show, refreshId, blockClose } = props;
// const [ showPane, setShowPane ] = useState<boolean>( props.show );
const [showBack, setShowBack] = useState(show === true ? 2 : 0);
const hidePanel = () => {
setShowBack(1);
// Delay creds to: https://stackoverflow.com/a/42090488
setTimeout(function () {
props._hideBack(); // Required to close #30
setShowBack(0);
console.log('newBack:', 0);
}.bind(this), 1000);
};
useEffect(() => {
// https://ultimatecourses.com/blog/using-async-await-inside-react-use-effect-hook
if (show === false && showBack === 2) {
hidePanel();
return () => {
// this now gets called when the component unmounts
};
}
else if (show === true && showBack !== 2) {
setShowBack(2);
return () => {
// this now gets called when the component unmounts
};
}
}, [show, refreshId]);
const showClass = show === true && showBack === 2 ? 'showPane' : 'hidePane';
const indexClass = showBack !== 0 ? 'maxZindex' : 'minZindex';
const constainerClass = props.styleProps ? props.styleProps.constainerClass : '';
const constainerStyles = props.styleProps ? props.styleProps.constainerStyles : null;
const panel = React.createElement("div", { className: `fpsFadePanel ${showClass} ${indexClass} ${_backStyle[showBack]} ${constainerClass}`, style: constainerStyles },
React.createElement("div", null,
blockClose === true ? undefined : React.createElement(Icon, { className: 'fadePaneCloseIcon', iconName: 'ChromeClose', onClick: () => hidePanel() }),
content));
return (panel);
};
export default FadePanel;
//# sourceMappingURL=component.js.map