{"commit":{"authorEmail":"bvaughn@fb.com","subject":"Added 'back to owner' button when owners stack is collapsed","revision":"b6d617ac7f06d712f0edd72fdfbccad3eaf06e68","authorName":"Brian Vaughn","authoredAt":"2019-04-25T15:05:39-07:00","shortRevision":"b6d617ac7f"},"parents":["e88819a22ec1e62b3af1dbae046f0c329c623491"],"files":[{"status":"M","path":"src\/devtools\/views\/ButtonIcon.js"},{"status":"M","path":"src\/devtools\/views\/Components\/OwnersStack.css"},{"status":"M","path":"src\/devtools\/views\/Components\/OwnersStack.js"}],"body":"","patch":"diff --git a\/src\/devtools\/views\/ButtonIcon.js b\/src\/devtools\/views\/ButtonIcon.js\nindex 93891c5505..a42e02bdbc 100644\n--- a\/src\/devtools\/views\/ButtonIcon.js\n+++ b\/src\/devtools\/views\/ButtonIcon.js\n@@ -4,7 +4,6 @@ import React from 'react';\n import styles from '.\/ButtonIcon.css';\n \n export type IconType =\n- | 'back'\n | 'cancel'\n | 'close'\n | 'collapsed'\n@@ -33,9 +32,6 @@ type Props = {|\n export default function ButtonIcon({ type }: Props) {\n let pathData = null;\n switch (type) {\n- case 'back':\n- pathData = PATH_BACK;\n- break;\n case 'cancel':\n pathData = PATH_CANCEL;\n break;\n@@ -115,12 +111,6 @@ export default function ButtonIcon({ type }: Props) {\n );\n }\n \n-const PATH_BACK = `\n- M22 3H7c-.69 0-1.23.35-1.59.88L0 12l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9\n- 2-2V5c0-1.1-.9-2-2-2zm-3 12.59L17.59 17 14 13.41 10.41 17 9 15.59 12.59 12 9 8.41\n- 10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z\n-`;\n-\n const PATH_CANCEL = `\n M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69\n 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.css b\/src\/devtools\/views\/Components\/OwnersStack.css\nindex db2d946b83..1aba50714a 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.css\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.css\n@@ -47,7 +47,6 @@\n border: none;\n background: var(--color-button-background);\n color: var(--color-button);\n- margin-right: 0.5rem;\n }\n .MenuButtonContent {\n display: inline-flex;\ndiff --git a\/src\/devtools\/views\/Components\/OwnersStack.js b\/src\/devtools\/views\/Components\/OwnersStack.js\nindex e252c6c9af..dfe1fbb42b 100644\n--- a\/src\/devtools\/views\/Components\/OwnersStack.js\n+++ b\/src\/devtools\/views\/Components\/OwnersStack.js\n@@ -1,5 +1,6 @@\n \/\/ @flow\n import React, {\n+ Fragment,\n useCallback,\n useContext,\n useLayoutEffect,\n@@ -53,21 +54,25 @@ export default function OwnerStack() {\n

\n {isOverflowing && (\n- \n+ \n+ \n+ \n+ \n+ <\/Fragment>\n )}\n- {isOverflowing ? (\n- \n- ) : (\n+ {!isOverflowing &&\n ownerStack.map((id, index) => (\n \n- ))\n- )}\n+ ))}\n <\/div>\n

\n \n );\n }\n+\n+type BackToOwnerButtonProps = {|\n+ ownerStack: Array,\n+ ownerStackIndex: number | null,\n+|};\n+function BackToOwnerButton({\n+ ownerStack,\n+ ownerStackIndex,\n+}: BackToOwnerButtonProps) {\n+ const store = useContext(StoreContext);\n+ const dispatch = useContext(TreeDispatcherContext);\n+\n+ if (ownerStackIndex === null || ownerStackIndex === 0) {\n+ return null;\n+ }\n+\n+ const ownerID = ownerStack[ownerStackIndex - 1];\n+ const owner = store.getElementByID(ownerID);\n+\n+ return (\n+ \n+ dispatch({\n+ type: 'SELECT_OWNER',\n+ payload: ownerID,\n+ })\n+ }\n+ title={`Back to ${(owner !== null && owner.displayName) || 'owner'}`}\n+ >\n+ \n+ <\/Button>\n+ );\n+}\n"}

dillon1000/react

Files changed