Skip to content

Commit 0313cbc

Browse files
alexvcasillasCompuIves
authored andcommitted
Tab icon status (codesandbox#738)
* Tab Icon Status Corrections * Updated Readme * QuickFix for missing return statement at the end of arrow func
1 parent 4ccd339 commit 0313cbc

File tree

2 files changed

+30
-15
lines changed

2 files changed

+30
-15
lines changed

README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ Thanks goes to these wonderful people
3636
([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
3737

3838
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
39+
3940
<!-- prettier-ignore -->
4041
| [<img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;"/><br /><sub><b>Ives van Hoorne</b></sub>](http://ivesvh.com)<br />[💬](#question-CompuIves "Answering Questions") [📝](#blog-CompuIves "Blogposts") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3ACompuIves "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Code") [🎨](#design-CompuIves "Design") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Documentation") [💡](#example-CompuIves "Examples") [🚇](#infra-CompuIves "Infrastructure (Hosting, Build-Tools, etc)") [👀](#review-CompuIves "Reviewed Pull Requests") [⚠️](https://github.com/CompuIves/codesandbox-client/commits?author=CompuIves "Tests") [🔧](#tool-CompuIves "Tools") | [<img src="https://avatars0.githubusercontent.com/u/887639?v=3" width="100px;"/><br /><sub><b>Donavon West</b></sub>](http://donavon.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=donavon "Code") | [<img src="https://avatars0.githubusercontent.com/u/5266810?v=3" width="100px;"/><br /><sub><b>Jeff Allen</b></sub>](http://www.jeffallen.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=vueu "Code") | [<img src="https://avatars0.githubusercontent.com/u/1089897?v=3" width="100px;"/><br /><sub><b>Ben Gummer</b></sub>](https://github.com/bengummer)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bengummer "Code") | [<img src="https://avatars3.githubusercontent.com/u/154732?v=3" width="100px;"/><br /><sub><b>James Gillmore</b></sub>](http://twitter.com/faceyspacey)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=faceyspacey "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afaceyspacey "Bug reports") | [<img src="https://avatars1.githubusercontent.com/u/9636410?v=4" width="100px;"/><br /><sub><b>Ade Viankakrisna Fadlil</b></sub>](https://github.com/viankakrisna)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=viankakrisna "Code") | [<img src="https://avatars1.githubusercontent.com/u/1854763?v=4" width="100px;"/><br /><sub><b>Tushar Sonawane</b></sub>](https://twitter.com/tushkiz)<br />[💬](#question-Tushkiz "Answering Questions") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=Tushkiz "Documentation") [🤔](#ideas-Tushkiz "Ideas, Planning, & Feedback") |
4142
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
@@ -45,5 +46,6 @@ Thanks goes to these wonderful people
4546
| [<img src="https://avatars3.githubusercontent.com/u/6270048?v=4" width="100px;"/><br /><sub><b>Haroen Viaene</b></sub>](https://twitter.com/haroenv)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=haroenv "Code") [🎨](#design-haroenv "Design") | [<img src="https://avatars1.githubusercontent.com/u/293805?v=4" width="100px;"/><br /><sub><b>Nick Nisi</b></sub>](https://nicknisi.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=nicknisi "Code") | [<img src="https://avatars2.githubusercontent.com/u/9327315?v=4" width="100px;"/><br /><sub><b>Abhishek Jakhotiya</b></sub>](https://github.com/Jakhotiya)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Jakhotiya "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3AJakhotiya "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/14299145?v=4" width="100px;"/><br /><sub><b>Tom Kühl</b></sub>](http://twitter.com/tomkuehl_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=tomkuehl "Code") | [<img src="https://avatars2.githubusercontent.com/u/1086461?v=4" width="100px;"/><br /><sub><b>br1anchen</b></sub>](https://github.com/br1anchen)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=br1anchen "Code") | [<img src="https://avatars3.githubusercontent.com/u/11952174?v=4" width="100px;"/><br /><sub><b>Daniel Hsing</b></sub>](https://arthelon.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Arthelon "Code") | [<img src="https://avatars2.githubusercontent.com/u/5403694?v=4" width="100px;"/><br /><sub><b>Maciej Kasprzyk</b></sub>](https://twitter.com/_maciejka)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=maciej-ka "Code") |
4647
| [<img src="https://avatars2.githubusercontent.com/u/596727?v=4" width="100px;"/><br /><sub><b>Robert Heessels</b></sub>](https://github.com/robertheessels)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=robertheessels "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/772937?v=4" width="100px;"/><br /><sub><b>Ryan P. C. McQuen</b></sub>](https://ryanpcmcquen.org)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ryanpcmcquen "Code") | [<img src="https://avatars3.githubusercontent.com/u/613805?v=4" width="100px;"/><br /><sub><b>Chris</b></sub>](http://chrisrjones.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ipatch "Code") | [<img src="https://avatars3.githubusercontent.com/u/595469?v=4" width="100px;"/><br /><sub><b>Drew Smith</b></sub>](https://github.com/drewsmith)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=drewsmith "Code") | [<img src="https://avatars2.githubusercontent.com/u/12481?v=4" width="100px;"/><br /><sub><b>Eric Berry</b></sub>](https://codesponsor.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=coderberry "Code") | [<img src="https://avatars1.githubusercontent.com/u/17228477?v=4" width="100px;"/><br /><sub><b>Hum4n01d</b></sub>](https://www.hum4n01d.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Hum4n01d "Code") | [<img src="https://avatars3.githubusercontent.com/u/10888943?v=4" width="100px;"/><br /><sub><b>Malachi Willey</b></sub>](https://github.com/malwilley)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=malwilley "Code") |
4748
| [<img src="https://avatars0.githubusercontent.com/u/1820292?v=4" width="100px;"/><br /><sub><b>Michel Weststrate</b></sub>](https://twitter.com/mweststrate)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mweststrate "Code") | [<img src="https://avatars0.githubusercontent.com/u/52824?v=4" width="100px;"/><br /><sub><b>Oleg</b></sub>](https://kof.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=kof "Code") | [<img src="https://avatars0.githubusercontent.com/u/1127037?v=4" width="100px;"/><br /><sub><b>Paul Sherman</b></sub>](https://www.pshrmn.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Apshrmn "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=pshrmn "Code") | [<img src="https://avatars2.githubusercontent.com/u/9244507?v=4" width="100px;"/><br /><sub><b>Ro Savage</b></sub>](https://github.com/ro-savage)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ro-savage "Code") | [<img src="https://avatars3.githubusercontent.com/u/13242392?v=4" width="100px;"/><br /><sub><b>Sam Denty</b></sub>](https://samdd.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=samdenty99 "Code") | [<img src="https://avatars1.githubusercontent.com/u/3087225?v=4" width="100px;"/><br /><sub><b>Zephraph</b></sub>](https://github.com/zephraph)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=zephraph "Code") | [<img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;"/><br /><sub><b>Josh Waller</b></sub>](https://www.joshwaller.me)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdxprograms "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Documentation") |
48-
| [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") | [<img src="https://avatars2.githubusercontent.com/u/468006?v=4" width="100px;"/><br /><sub><b>Vytenis</b></sub>](https://github.com/FDiskas)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=FDiskas "Code") | [<img src="https://avatars1.githubusercontent.com/u/894149?v=4" width="100px;"/><br /><sub><b>Manuel Dugué</b></sub>](http://manueldugue.de)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdugue "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdugue "Code") | [<img src="https://avatars2.githubusercontent.com/u/5346497?v=4" width="100px;"/><br /><sub><b>Demian Dekoninck</b></sub>](https://dem.be)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=DemianD "Code") |
49+
| [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") | [<img src="https://avatars2.githubusercontent.com/u/468006?v=4" width="100px;"/><br /><sub><b>Vytenis</b></sub>](https://github.com/FDiskas)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=FDiskas "Code") | [<img src="https://avatars1.githubusercontent.com/u/894149?v=4" width="100px;"/><br /><sub><b>Manuel Dugué</b></sub>](http://manueldugue.de)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdugue "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdugue "Code") | [<img src="https://avatars2.githubusercontent.com/u/5346497?v=4" width="100px;"/><br /><sub><b>Demian Dekoninck</b></sub>](https://dem.be)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=DemianD "Code") | [<img src="https://avatars3.githubusercontent.com/u/9496960?s=460&v=4" width="100px;"/><br /><sub><b>Alex Casillas</b></sub>](https://alexvcasillas.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=alexvcasillas "Code") |
50+
4951
<!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/index.js

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,31 @@ class Tab extends React.Component {
4242
}
4343
};
4444

45+
renderTabStatus = () => {
46+
const { isNotSynced, tabCount } = this.props;
47+
const { hovering } = this.state;
48+
49+
if (hovering && isNotSynced && tabCount === 1) {
50+
return <StyledNotSyncedIcon show={'true'} />;
51+
}
52+
if (hovering && isNotSynced && tabCount > 1) {
53+
return <StyledCloseIcon onClick={this.closeTab} show={'true'} />;
54+
}
55+
if (hovering && tabCount === 1) {
56+
return <StyledCloseIcon onClick={this.closeTab} show={undefined} />;
57+
}
58+
if (hovering && tabCount > 1) {
59+
return <StyledCloseIcon onClick={this.closeTab} show={'true'} />;
60+
}
61+
if (!hovering && isNotSynced) {
62+
return <StyledNotSyncedIcon show={'true'} />;
63+
}
64+
if (!hovering && !isNotSynced) {
65+
return <StyledNotSyncedIcon show={undefined} />;
66+
}
67+
return <StyledNotSyncedIcon show={undefined} />;
68+
};
69+
4570
render() {
4671
const {
4772
active,
@@ -51,13 +76,10 @@ class Tab extends React.Component {
5176
onDoubleClick,
5277
module,
5378
dirName,
54-
tabCount,
5579
hasError,
5680
isNotSynced,
5781
} = this.props;
5882

59-
const { hovering } = this.state;
60-
6183
return (
6284
<Container
6385
active={active}
@@ -76,17 +98,8 @@ class Tab extends React.Component {
7698
/>
7799
<TabTitle>{module.title}</TabTitle>
78100
{dirName && <TabDir>../{dirName}</TabDir>}
79-
{this.props.closeTab && isNotSynced ? (
80-
<StyledNotSyncedIcon
81-
onClick={tabCount > 1 ? this.closeTab : null}
82-
show={'true'}
83-
/>
84-
) : (
85-
<StyledCloseIcon
86-
onClick={this.closeTab}
87-
show={tabCount > 1 && (active || hovering) ? 'true' : undefined}
88-
/>
89-
)}
101+
102+
{this.renderTabStatus()}
90103
</Container>
91104
);
92105
}

0 commit comments

Comments
 (0)