Skip to content

Commit a723e8e

Browse files
siddharthkpsiddharthkp
authored
Fix dependency dropdown for firefox (codesandbox#3618)
1 parent 17cdd95 commit a723e8e

File tree

1 file changed

+82
-97
lines changed
  • packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency

1 file changed

+82
-97
lines changed

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Explorer/Dependencies/Dependency/index.tsx

Lines changed: 82 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,13 @@ interface Props {
3131
}
3232

3333
interface State {
34-
hovering: boolean;
3534
version: null | string;
3635
open: boolean;
3736
versions: string[];
3837
}
3938

4039
export class Dependency extends React.PureComponent<Props, State> {
4140
state: State = {
42-
hovering: false,
4341
version: null,
4442
open: false,
4543
versions: [],
@@ -106,10 +104,6 @@ export class Dependency extends React.PureComponent<Props, State> {
106104
this.props.onRefresh(this.props.dependency);
107105
};
108106

109-
onMouseEnter = () => this.setState({ hovering: true });
110-
111-
onMouseLeave = () => this.setState({ hovering: false });
112-
113107
handleOpen = () => this.setState(({ open }) => ({ open: !open }));
114108

115109
render() {
@@ -119,18 +113,22 @@ export class Dependency extends React.PureComponent<Props, State> {
119113
return null;
120114
}
121115

122-
const { hovering, version, open, versions } = this.state;
116+
const { version, open, versions } = this.state;
123117
return (
124118
<>
125119
<ListAction
126120
justify="space-between"
127121
align="center"
128-
onMouseEnter={this.onMouseEnter}
129-
onMouseLeave={this.onMouseLeave}
130122
css={css({
131123
position: 'relative',
132-
'.actions': { backgroundColor: 'sideBar.background' },
133-
':hover .actions': { backgroundColor: 'list.hoverBackground' },
124+
'.actions': {
125+
backgroundColor: 'sideBar.background',
126+
display: 'none',
127+
},
128+
':hover .actions': {
129+
backgroundColor: 'list.hoverBackground',
130+
display: 'flex',
131+
},
134132
})}
135133
>
136134
<Link
@@ -141,28 +139,22 @@ export class Dependency extends React.PureComponent<Props, State> {
141139
{dependency}
142140
</Link>
143141

144-
{!hovering && (
145-
<Stack
146-
align="center"
147-
justify="flex-end"
148-
css={css({
149-
position: 'absolute',
150-
right: 2,
151-
flexGrow: 0,
152-
flexShrink: 1,
153-
width: '100%',
154-
})}
155-
>
156-
<Text
157-
variant="muted"
158-
maxWidth="30%"
159-
css={{ display: hovering ? 'none' : 'block' }}
160-
>
161-
{formatVersion(dependencies[dependency])}{' '}
162-
{version && <span>({formatVersion(version)})</span>}
163-
</Text>
164-
</Stack>
165-
)}
142+
<Stack
143+
align="center"
144+
justify="flex-end"
145+
css={css({
146+
position: 'absolute',
147+
right: 2,
148+
flexGrow: 0,
149+
flexShrink: 1,
150+
width: '100%',
151+
})}
152+
>
153+
<Text variant="muted" maxWidth="30%">
154+
{formatVersion(dependencies[dependency])}{' '}
155+
{version && <span>({formatVersion(version)})</span>}
156+
</Text>
157+
</Stack>
166158

167159
<Stack
168160
className="actions"
@@ -174,70 +166,63 @@ export class Dependency extends React.PureComponent<Props, State> {
174166
width: '150px', // overlay on text
175167
})}
176168
>
177-
{hovering && (
178-
<>
179-
<Select
180-
css={{ width: '80px' }}
181-
defaultValue={versions.find(
182-
v => v === dependencies[dependency]
183-
)}
184-
onChange={e => {
185-
this.props.onRefresh(dependency, e.target.value);
186-
this.setState({ hovering: false });
187-
}}
188-
>
189-
{versions.map(a => (
190-
<option key={a}>{a}</option>
191-
))}
192-
</Select>
193-
194-
<SingletonTooltip>
195-
{singleton => (
196-
<>
197-
<Tooltip
198-
content={open ? 'Hide sizes' : 'Show sizes'}
199-
style={{ outline: 'none' }}
200-
singleton={singleton}
201-
>
202-
<Button
203-
variant="link"
204-
onClick={this.handleOpen}
205-
css={css({ minWidth: 5 })}
206-
>
207-
{open ? <ArrowDropUp /> : <ArrowDropDown />}
208-
</Button>
209-
</Tooltip>
210-
<Tooltip
211-
content="Update to latest"
212-
style={{ outline: 'none' }}
213-
singleton={singleton}
214-
>
215-
<Button
216-
variant="link"
217-
onClick={this.handleRefresh}
218-
css={css({ minWidth: 5 })}
219-
>
220-
<RefreshIcon />
221-
</Button>
222-
</Tooltip>
223-
<Tooltip
224-
content="Remove"
225-
style={{ outline: 'none' }}
226-
singleton={singleton}
227-
>
228-
<Button
229-
variant="link"
230-
onClick={this.handleRemove}
231-
css={css({ minWidth: 5 })}
232-
>
233-
<CrossIcon />
234-
</Button>
235-
</Tooltip>
236-
</>
237-
)}
238-
</SingletonTooltip>
239-
</>
240-
)}
169+
<Select
170+
css={{ width: '80px' }}
171+
defaultValue={versions.find(v => v === dependencies[dependency])}
172+
onChange={e => {
173+
this.props.onRefresh(dependency, e.target.value);
174+
}}
175+
>
176+
{versions.map(a => (
177+
<option key={a}>{a}</option>
178+
))}
179+
</Select>
180+
181+
<SingletonTooltip>
182+
{singleton => (
183+
<>
184+
<Tooltip
185+
content={open ? 'Hide sizes' : 'Show sizes'}
186+
style={{ outline: 'none' }}
187+
singleton={singleton}
188+
>
189+
<Button
190+
variant="link"
191+
onClick={this.handleOpen}
192+
css={css({ minWidth: 5 })}
193+
>
194+
{open ? <ArrowDropUp /> : <ArrowDropDown />}
195+
</Button>
196+
</Tooltip>
197+
<Tooltip
198+
content="Update to latest"
199+
style={{ outline: 'none' }}
200+
singleton={singleton}
201+
>
202+
<Button
203+
variant="link"
204+
onClick={this.handleRefresh}
205+
css={css({ minWidth: 5 })}
206+
>
207+
<RefreshIcon />
208+
</Button>
209+
</Tooltip>
210+
<Tooltip
211+
content="Remove"
212+
style={{ outline: 'none' }}
213+
singleton={singleton}
214+
>
215+
<Button
216+
variant="link"
217+
onClick={this.handleRemove}
218+
css={css({ minWidth: 5 })}
219+
>
220+
<CrossIcon />
221+
</Button>
222+
</Tooltip>
223+
</>
224+
)}
225+
</SingletonTooltip>
241226
</Stack>
242227
</ListAction>
243228
{open ? (

0 commit comments

Comments
 (0)