{"files":[{"status":"M","path":"fixtures\/attribute-behavior\/src\/App.js"}],"body":"","parents":["87a32314aeb4f8eb3b3b941c7fe8df2f72369436"],"commit":{"authorName":"Andrew Clark","subject":"Add basic popover with additional information","shortRevision":"e421df8151","authorEmail":"acdlite@fb.com","revision":"e421df81512839651092f107d00fc190b09e3d7a","authoredAt":"2017-08-25T11:26:22-07:00"},"patch":"diff --git a\/fixtures\/attribute-behavior\/src\/App.js b\/fixtures\/attribute-behavior\/src\/App.js\nindex 6068517905..6fee801404 100644\n--- a\/fixtures\/attribute-behavior\/src\/App.js\n+++ b\/fixtures\/attribute-behavior\/src\/App.js\n@@ -1253,11 +1253,12 @@ function getRenderedAttributeValue(renderer, attribute, type) {\n container = document.createElement(containerTagName);\n }\n \n+ let testValue;\n let defaultValue;\n try {\n const read = attribute.read || getProperty(attribute.name);\n \n- let testValue = type.testValue;\n+ testValue = type.testValue;\n if (attribute.overrideStringValue !== undefined) {\n switch (type.name) {\n case 'string':\n@@ -1285,6 +1286,8 @@ function getRenderedAttributeValue(renderer, attribute, type) {\n const result = read(container.firstChild);\n \n return {\n+ testValue,\n+ defaultValue,\n defaultValue,\n result,\n didWarn: _didWarn,\n@@ -1292,6 +1295,8 @@ function getRenderedAttributeValue(renderer, attribute, type) {\n };\n } catch (error) {\n return {\n+ testValue,\n+ defaultValue,\n defaultValue,\n result: null,\n didWarn: _didWarn,\n@@ -1398,23 +1403,110 @@ function RendererResult({version, result, defaultValue, didWarn, didError}) {\n return

{displayResult}<\/div>;\n }\n \n-function Result(props) {\n- const {react15, react16, hasSameBehavior} = props;\n- const style = {position: 'absolute', width: '100%', height: '100%'};\n- if (!hasSameBehavior) {\n- style.border = '4px solid purple';\n- }\n+function ResultPopover(props) {\n return (\n-

\n-

\n- \n- <\/div>\n+ \n+ {JSON.stringify(\n+ {\n+ react15: props.react15,\n+ react16: props.react16,\n+ hasSameBehavior: props.hasSameBehavior,\n+ },\n+ null,\n+ 2,\n+ )}\n+ <\/pre>\n+ );\n+}\n+\n+class Result extends React.Component {\n+ state = {showInfo: false};\n+ onMouseEnter = () => {\n+ if (this.timeout) {\n+ clearTimeout(this.timeout);\n+ }\n+ this.timeout = setTimeout(() => {\n+ this.setState({showInfo: true});\n+ }, 250);\n+ };\n+ onMouseLeave = () => {\n+ if (this.timeout) {\n+ clearTimeout(this.timeout);\n+ }\n+ this.setState({showInfo: false});\n+ };\n+\n+ componentWillUnmount() {\n+ if (this.timeout) {\n+ clearTimeout(this.interval);\n+ }\n+ }\n+\n+ render() {\n+ const {react15, react16, hasSameBehavior} = this.props;\n+ const style = {\n+ position: 'absolute',\n+ width: '100%',\n+ height: '100%',\n+ };\n+\n+ let highlight = null;\n+ let popover = null;\n+ if (this.state.showInfo) {\n+ highlight = (\n+ \n+ );\n+\n+ popover = (\n+ \n+ \n+ <\/div>\n+ );\n+ }\n+\n+ if (!hasSameBehavior) {\n+ style.border = '4px solid purple';\n+ }\n+ return (\n \n- \n+ css={style}\n+ onMouseEnter={this.onMouseEnter}\n+ onMouseLeave={this.onMouseLeave}>\n+

\n+ \n+ <\/div>\n+ \n+ \n+ <\/div>\n+ {highlight}\n+ {popover}\n <\/div>\n- <\/div>\n- );\n+ );\n+ }\n }\n \n function ColumnHeader({children}) {\n"}

dillon1000/react

Files changed