@roderickhsiao/react-i13n
Version:
[Experiment] React I13n provides a performant and scalable solution to application instrumentation.
78 lines (76 loc) • 2.09 kB
JavaScript
/**
* Copyright 2015 - Present, Yahoo Inc.
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
*/
import React, { useState, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import TriggerNode from './TriggerNode';
import DashboardContainer from './DashboardContainer';
var DISPLAY_NONE = 'none';
var DISPLAY_BLOCK = 'block';
var Dashboard = props => {
var {
onShow,
onHide,
title,
model,
DOMNode,
onMount
} = props;
var [display, setDisplay] = useState(DISPLAY_NONE);
var style = {
fontFamily: "-apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif",
position: 'relative',
display,
color: 'rgba(255,255,255,.87)',
fontSize: '14px',
width: '100%',
marginTop: '2px',
zIndex: 1
};
var handleOnClick = useCallback(() => {
if (display === DISPLAY_NONE) {
setDisplay(DISPLAY_BLOCK);
onShow();
} else {
setDisplay(DISPLAY_NONE);
onHide();
}
}, [display]);
var handleMouseOver = useCallback(() => {
if (DOMNode) {
DOMNode.style.outline = '2px solid #b39ddb';
}
}, []);
var handleMouseOut = useCallback(() => {
if (DOMNode) {
DOMNode.style.outline = null;
}
}, []);
useEffect(() => {
onMount();
}, []);
return /*#__PURE__*/React.createElement("div", {
onFocus: handleMouseOver,
onMouseOver: handleMouseOver,
onBlur: handleMouseOut,
onMouseOut: handleMouseOut
}, /*#__PURE__*/React.createElement(TriggerNode, {
onClick: handleOnClick
}), /*#__PURE__*/React.createElement("div", {
style: style,
className: "dashboard"
}, /*#__PURE__*/React.createElement(DashboardContainer, {
title: title,
model: model,
DOMNode: DOMNode
})));
};
Dashboard.propTypes = {
model: PropTypes.shape().isRequired,
onHide: PropTypes.func.isRequired,
onMount: PropTypes.func.isRequired,
onShow: PropTypes.func.isRequired,
title: PropTypes.string.isRequired
};
export default Dashboard;