Hide tabs at extension width (#55)
This commit is contained in:
parent
65284636de
commit
15c9845bdc
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@project-serum/swap-ui",
|
"name": "@project-serum/swap-ui",
|
||||||
"version": "0.1.5",
|
"version": "0.1.6",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
"types": "dist/index.d.ts",
|
"types": "dist/index.d.ts",
|
||||||
"homepage": "https://github.com/project-serum/swap-ui",
|
"homepage": "https://github.com/project-serum/swap-ui",
|
||||||
|
|
|
@ -16,6 +16,7 @@ import {
|
||||||
} from "@material-ui/core";
|
} from "@material-ui/core";
|
||||||
import { TokenIcon } from "./Swap";
|
import { TokenIcon } from "./Swap";
|
||||||
import { useSwappableTokens } from "../context/TokenList";
|
import { useSwappableTokens } from "../context/TokenList";
|
||||||
|
import { useMediaQuery } from "@material-ui/core";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
dialogContent: {
|
dialogContent: {
|
||||||
|
@ -53,6 +54,7 @@ export default function TokenDialog({
|
||||||
const styles = useStyles();
|
const styles = useStyles();
|
||||||
const { swappableTokens, swappableTokensSollet, swappableTokensWormhole } =
|
const { swappableTokens, swappableTokensSollet, swappableTokensWormhole } =
|
||||||
useSwappableTokens();
|
useSwappableTokens();
|
||||||
|
const displayTabs = !useMediaQuery("(max-width:450px)");
|
||||||
const selectedTokens =
|
const selectedTokens =
|
||||||
tabSelection === 0
|
tabSelection === 0
|
||||||
? swappableTokens
|
? swappableTokens
|
||||||
|
@ -107,6 +109,7 @@ export default function TokenDialog({
|
||||||
))}
|
))}
|
||||||
</List>
|
</List>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
|
{displayTabs && (
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
<Tabs
|
<Tabs
|
||||||
value={tabSelection}
|
value={tabSelection}
|
||||||
|
@ -135,6 +138,7 @@ export default function TokenDialog({
|
||||||
/>
|
/>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</DialogActions>
|
</DialogActions>
|
||||||
|
)}
|
||||||
</Dialog>
|
</Dialog>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue