react-openfin-mat-impl
Version:
Materialize UI implementation of react-openfin
158 lines • 6.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_1 = require("react");
const react_particles_js_1 = require("react-particles-js");
const react_openfin_1 = require("react-openfin");
const init_1 = require("react-openfin/init");
const react_i18next_1 = require("react-i18next");
const classnames_1 = require("classnames");
const styles_1 = require("@material-ui/styles");
const styles_2 = require("@material-ui/core/styles");
const colorManipulator_1 = require("@material-ui/core/styles/colorManipulator");
const LinearProgress_1 = require("@material-ui/core/LinearProgress");
const Typography_1 = require("@material-ui/core/Typography");
const openfin_starter_constant_1 = require("../../assets/jss/openfin-starter-constant");
const style = (theme) => styles_2.createStyles({
container: {
position: 'relative',
width: '100vw',
height: '100vh',
overflow: 'hidden',
backgroundSize: '200%',
animation: 'gba 5s infinite',
},
appLogoImg: {
position: 'absolute',
top: 'calc(15% + 7px)',
left: 'calc(15% - 70px)',
width: '60px',
height: '60px',
},
appName: {
position: 'absolute',
top: '15%',
left: '15%',
fontFamily: '"Arial Black", Gadget, sans-serif',
fontSize: '3rem',
fontWeight: 'bold',
color: "white",
},
versionStr: {
position: 'absolute',
top: '35%',
right: '20%',
fontFamily: '"Arial Black", Gadget, sans-serif',
fontSize: '1.2rem',
color: 'white',
},
loadingProgressBar: {
position: 'absolute',
top: '66%',
left: '15%',
right: '15%',
},
statusMsg: {
color: 'white',
position: 'absolute',
top: 'calc( 66% + 20px )',
left: 'calc( 15% + 20px )',
right: 'calc( 15% + 20px )',
fontFamily: '"Arial Black", Gadget, sans-serif',
},
companyLogImg: {
position: 'absolute',
bottom: '40px',
right: '60px',
width: '40px',
},
mainWinContainer: {
position: 'relative',
width: '100vw',
height: '100vh',
overflow: 'hidden',
color: theme.palette.getContrastText(theme.palette.background.default),
backgroundColor: theme.palette.background.default,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
},
mainWinAppIcon: {
width: '20vmin',
height: '20vmin',
marginBottom: 30,
},
flash: {
animation: '$blinker 1s linear infinite',
},
'@keyframes blinker': {
'50%': {
opacity: 0,
}
}
});
const useStyles = styles_1.makeStyles(style);
exports.LoadingBarComponent = ({}) => {
const classes = useStyles({});
const [state, setState] = react_1.useState({
completed: 0,
count: 0,
});
let timer = null;
const progress = () => {
const { completed, count } = state;
if (completed === 100) {
setState({ completed: 0, count: 0 });
}
else {
setState({
completed: Math.min(Math.round(100 * count / (count + 2)), 100),
count: count + 1,
});
}
};
react_1.useEffect(() => {
timer = setInterval(progress, 500);
return () => {
clearInterval(timer);
};
});
return (React.createElement(LinearProgress_1.default, { className: classes.loadingProgressBar, color: "secondary", variant: "determinate", value: state.completed }));
};
const LoadingComponent = ({ appLogo, companyLogo, version, }) => {
const classes = useStyles({});
const { t, i18n } = react_i18next_1.useTranslation('landing', { useSuspense: false });
const { state: { loading, loadingMsg, } } = react_1.useContext(react_openfin_1.ApplicationContext);
const BACKGROUND_STR = openfin_starter_constant_1.default.primaryColor == '#1e88e5' ?
'#4dd0e1, #26c6da, #00bcd4, #00acc1, #0097a7, #00838f, #006064' :
`
${colorManipulator_1.darken(openfin_starter_constant_1.default.primaryColor, 0.3)},
${colorManipulator_1.darken(openfin_starter_constant_1.default.primaryColor, 0.2)},
${colorManipulator_1.darken(openfin_starter_constant_1.default.primaryColor, 0.1)},
${openfin_starter_constant_1.default.primaryColor},
${colorManipulator_1.lighten(openfin_starter_constant_1.default.primaryColor, 0.1)},
${colorManipulator_1.lighten(openfin_starter_constant_1.default.primaryColor, 0.2)},
${colorManipulator_1.lighten(openfin_starter_constant_1.default.primaryColor, 0.3)}
`;
if (window.name === init_1.default.finUuid) {
return (React.createElement("div", { className: classes.mainWinContainer },
React.createElement("img", { src: appLogo, className: classnames_1.default(classes.flash, classes.mainWinAppIcon) }),
React.createElement(Typography_1.default, { variant: "h5" }, t(loadingMsg))));
}
else {
return (React.createElement("div", { className: classes.container, style: {
background: `linear-gradient(141deg, ${BACKGROUND_STR})`,
} },
React.createElement("img", { src: appLogo, className: classes.appLogoImg }),
React.createElement("div", { className: classes.appName }, t('appName')),
React.createElement("div", { className: classes.versionStr }, version),
React.createElement(exports.LoadingBarComponent, null),
React.createElement("img", { src: companyLogo, className: classes.companyLogImg }),
React.createElement("div", { className: classes.statusMsg }, t(loadingMsg)),
React.createElement(react_particles_js_1.default, { width: "100%", height: "100%" })));
}
};
exports.default = LoadingComponent;
//# sourceMappingURL=Loading.js.map