@samitouri / QOS-React / commits / e421df8151

Add basic popover with additional information

Andrew Clark committed Aug 25, 2017 at 11:26 UTC e421df81512839651092f107d00fc190b09e3d7a
1 file changed +107 -15
fixtures/attribute-behavior/src/App.js
+107 -15
@@ -1253,11 +1253,12 @@ function getRenderedAttributeValue(renderer, attribute, type) {
1253 container = document.createElement(containerTagName);
1254 }
1255
1256 + let testValue;
1257 let defaultValue;
1258 try {
1259 const read = attribute.read || getProperty(attribute.name);
1260
1260 - let testValue = type.testValue;
1261 + testValue = type.testValue;
1262 if (attribute.overrideStringValue !== undefined) {
1263 switch (type.name) {
1264 case 'string':
@@ -1285,6 +1286,8 @@ function getRenderedAttributeValue(renderer, attribute, type) {
1286 const result = read(container.firstChild);
1287
1288 return {
1289 + testValue,
1290 + defaultValue,
1291 defaultValue,
1292 result,
1293 didWarn: _didWarn,
@@ -1292,6 +1295,8 @@ function getRenderedAttributeValue(renderer, attribute, type) {
1295 };
1296 } catch (error) {
1297 return {
1298 + testValue,
1299 + defaultValue,
1300 defaultValue,
1301 result: null,
1302 didWarn: _didWarn,
@@ -1398,23 +1403,110 @@ function RendererResult({version, result, defaultValue, didWarn, didError}) {
1403 return <div css={style}>{displayResult}</div>;
1404 }
1405
1401 -function Result(props) {
1402 - const {react15, react16, hasSameBehavior} = props;
1403 - const style = {position: 'absolute', width: '100%', height: '100%'};
1404 - if (!hasSameBehavior) {
1405 - style.border = '4px solid purple';
1406 - }
1406 +function ResultPopover(props) {
1407 return (
1408 - <div css={style}>
1409 - <div css={{position: 'absolute', width: '50%', height: '100%'}}>
1410 - <RendererResult version={15} {...react15} />
1411 - </div>
1408 + <pre
1409 + css={{
1410 + padding: '1em',
1411 + width: '25em',
1412 + }}>
1413 + {JSON.stringify(
1414 + {
1415 + react15: props.react15,
1416 + react16: props.react16,
1417 + hasSameBehavior: props.hasSameBehavior,
1418 + },
1419 + null,
1420 + 2,
1421 + )}
1422 + </pre>
1423 + );
1424 +}
1425 +
1426 +class Result extends React.Component {
1427 + state = {showInfo: false};
1428 + onMouseEnter = () => {
1429 + if (this.timeout) {
1430 + clearTimeout(this.timeout);
1431 + }
1432 + this.timeout = setTimeout(() => {
1433 + this.setState({showInfo: true});
1434 + }, 250);
1435 + };
1436 + onMouseLeave = () => {
1437 + if (this.timeout) {
1438 + clearTimeout(this.timeout);
1439 + }
1440 + this.setState({showInfo: false});
1441 + };
1442 +
1443 + componentWillUnmount() {
1444 + if (this.timeout) {
1445 + clearTimeout(this.interval);
1446 + }
1447 + }
1448 +
1449 + render() {
1450 + const {react15, react16, hasSameBehavior} = this.props;
1451 + const style = {
1452 + position: 'absolute',
1453 + width: '100%',
1454 + height: '100%',
1455 + };
1456 +
1457 + let highlight = null;
1458 + let popover = null;
1459 + if (this.state.showInfo) {
1460 + highlight = (
1461 + <div
1462 + css={{
1463 + position: 'absolute',
1464 + height: '100%',
1465 + width: '100%',
1466 + border: '2px solid blue',
1467 + }}
1468 + />
1469 + );
1470 +
1471 + popover = (
1472 + <div
1473 + css={{
1474 + backgroundColor: 'white',
1475 + border: '1px solid black',
1476 + position: 'absolute',
1477 + top: '100%',
1478 + zIndex: 999,
1479 + }}>
1480 + <ResultPopover {...this.props} />
1481 + </div>
1482 + );
1483 + }
1484 +
1485 + if (!hasSameBehavior) {
1486 + style.border = '4px solid purple';
1487 + }
1488 + return (
1489 <div
1413 - css={{position: 'absolute', width: '50%', left: '50%', height: '100%'}}>
1414 - <RendererResult version={16} {...react16} />
1490 + css={style}
1491 + onMouseEnter={this.onMouseEnter}
1492 + onMouseLeave={this.onMouseLeave}>
1493 + <div css={{position: 'absolute', width: '50%', height: '100%'}}>
1494 + <RendererResult version={15} {...react15} />
1495 + </div>
1496 + <div
1497 + css={{
1498 + position: 'absolute',
1499 + width: '50%',
1500 + left: '50%',
1501 + height: '100%',
1502 + }}>
1503 + <RendererResult version={16} {...react16} />
1504 + </div>
1505 + {highlight}
1506 + {popover}
1507 </div>
1416 - </div>
1417 - );
1508 + );
1509 + }
1510 }
1511
1512 function ColumnHeader({children}) {