From f5c48993314a666eadf0202d8d9b561e6c461bc0 Mon Sep 17 00:00:00 2001 From: unclebill Date: Tue, 11 Jan 2022 11:08:44 +0800 Subject: [PATCH 1/6] feat: add --- package.json | 3 +- .../theme/src/Components/FolderTabs/index.tsx | 93 ++++++++++++ packages/theme/src/Components/index.ts | 1 + pnpm-lock.yaml | 134 +++++++++++++----- 4 files changed, 197 insertions(+), 34 deletions(-) create mode 100644 packages/theme/src/Components/FolderTabs/index.tsx diff --git a/package.json b/package.json index dee4a2935b59..abe132199040 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,8 @@ "@emotion/styled": "^11.6.0", "@emotion/utils": "^1.0.0", "@mui/icons-material": "5.2.5", - "@mui/lab": "5.0.0-alpha.61", + "@mui/base": "5.0.0-alpha.64", + "@mui/lab": "5.0.0-alpha.64", "@mui/material": "5.2.5", "@mui/system": "5.2.5", "@types/masknet__global-types": "workspace:*", diff --git a/packages/theme/src/Components/FolderTabs/index.tsx b/packages/theme/src/Components/FolderTabs/index.tsx new file mode 100644 index 000000000000..2d2da0abf86c --- /dev/null +++ b/packages/theme/src/Components/FolderTabs/index.tsx @@ -0,0 +1,93 @@ +import { styled } from '@mui/material' +import { + TabPanelUnstyled, + TabPanelUnstyledProps, + TabsListUnstyled, + TabsUnstyled, + TabsUnstyledProps, + TabUnstyled, + tabUnstyledClasses, +} from '@mui/base' +import { Children, cloneElement, FC } from 'react' +import { MaskColorVar } from '../../constants' + +const TabList = styled(TabsListUnstyled)` + display: flex; + gap: 8px; +` + +const Tab = styled(TabUnstyled)(({ theme }) => { + const isDark = theme.palette.mode === 'dark' + const inactiveColor = isDark ? theme.palette.grey['50'] : MaskColorVar.twitterBg + return { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexGrow: 1, + height: 40, + borderRadius: '8px 8px 0 0', + cursor: 'pointer', + backgroundColor: inactiveColor, + border: `1px solid ${inactiveColor}`, + borderBottomColor: 'transparent', + color: theme.palette.text.secondary, + position: 'relative', + boxSizing: 'border-box', + [`&.${tabUnstyledClasses.selected}`]: { + backgroundColor: theme.palette.background.paper, + borderColor: MaskColorVar.twitterBorderLine, + color: theme.palette.primary.main, + }, + // cover bottom border of the active tab + [`&.${tabUnstyledClasses.selected}::after`]: { + position: 'absolute', + content: '""', + height: 2, + borderLeft: `1px solid ${MaskColorVar.twitterBorderLine}`, + borderRight: `1px solid ${MaskColorVar.twitterBorderLine}`, + backgroundColor: theme.palette.background.paper, + bottom: '-2px', + left: -1, + right: -1, + }, + } +}) + +const PanelContent = styled('div')` + border: 1px solid ${MaskColorVar.twitterBorderLine}; + padding: 12px; + border-radius: 0 0 8px 8px; +` + +interface TabPanelProps extends Omit { + label: string + value?: TabPanelUnstyledProps['value'] +} + +export const FolderTabPanel = styled(TabPanelUnstyled)(({ theme }) => ({ + backgroundColor: theme.palette.background.paper, +})) + +type TabPanelReactElement = React.ReactElement> + +interface FolderTabsProps extends TabsUnstyledProps {} + +export const FolderTabs: FC = ({ children: childNodes, defaultValue = 0, ...rest }) => { + const labels = Children.map(childNodes as TabPanelReactElement[], (child) => child.props.label) + const children = Children.map(childNodes as TabPanelReactElement[], (child, index) => + cloneElement(child, { + value: child.props.value ?? index, + }), + ) + if (!labels.length) return null + return ( + + + {labels.map((label) => ( + {label} + ))} + + {children} + + ) +} diff --git a/packages/theme/src/Components/index.ts b/packages/theme/src/Components/index.ts index 4245a5ef880f..4482f53bf23c 100644 --- a/packages/theme/src/Components/index.ts +++ b/packages/theme/src/Components/index.ts @@ -1,5 +1,6 @@ export * from './Dialogs' export * from './ButtonGroupTab' +export * from './FolderTabs' export * from './Snackbar' export * from './SearchableList' export * from './TextField' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0a1e80e5aee7..76001e0cf09d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,8 +22,9 @@ importers: '@magic-works/i18n-codegen': ^0.0.6 '@masknet/cli': workspace:* '@masknet/serializer': workspace:^0.0.0 + '@mui/base': 5.0.0-alpha.64 '@mui/icons-material': 5.2.5 - '@mui/lab': 5.0.0-alpha.61 + '@mui/lab': 5.0.0-alpha.64 '@mui/material': 5.2.5 '@mui/system': 5.2.5 '@nice-labs/git-rev': ^3.5.0 @@ -68,8 +69,9 @@ importers: '@emotion/serialize': 1.0.2 '@emotion/styled': 11.6.0_e0f2ce61d672e052c2dabbceabccaca0 '@emotion/utils': 1.0.0 + '@mui/base': 5.0.0-alpha.64_2f50eb45a1501445764b3dbbd8573d7c '@mui/icons-material': 5.2.5_695e98f08a2d125282e19cae338368d2 - '@mui/lab': 5.0.0-alpha.61_10fe5b9cda37a48a2d94b5e38d45d618 + '@mui/lab': 5.0.0-alpha.64_10fe5b9cda37a48a2d94b5e38d45d618 '@mui/material': 5.2.5_811d2bc6069f340521b4a59905442643 '@mui/system': 5.2.5_78136fa2e471fe4795d123fe9b8f9a75 '@types/masknet__global-types': link:packages/polyfills/types @@ -2920,6 +2922,7 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.13.9 + dev: false /@babel/runtime/7.16.5: resolution: {integrity: sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==} @@ -3628,7 +3631,7 @@ packages: dependencies: '@babel/helper-module-imports': 7.16.0 '@babel/plugin-syntax-jsx': 7.16.0 - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 '@emotion/hash': 0.8.0 '@emotion/memoize': 0.7.5 '@emotion/serialize': 1.0.2 @@ -3664,7 +3667,7 @@ packages: peerDependencies: react: '>=16.3.0' dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 '@emotion/cache': 10.0.29 '@emotion/css': 10.0.27 '@emotion/serialize': 0.11.16 @@ -3775,7 +3778,7 @@ packages: '@emotion/core': ^10.0.28 react: '>=16.3.0' dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 '@emotion/core': 10.3.1_react@18.0.0-rc.0 '@emotion/is-prop-valid': 0.8.8 '@emotion/serialize': 0.11.16 @@ -4747,6 +4750,29 @@ packages: react-is: 17.0.2 dev: false + /@mui/base/5.0.0-alpha.64_2f50eb45a1501445764b3dbbd8573d7c: + resolution: {integrity: sha512-lqUFbAyYPl3uDaTxGWIUWx9Zin5APv5Rrn/oUcnm/71Isd5dJ94zoGHCTdNy2sxhDRcXRshsdC2dfdwIWxhkZA==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@types/react': ^16.8.6 || ^17.0.0 + react: ^17.0.2 + react-dom: ^17.0.2 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.16.5 + '@emotion/is-prop-valid': 1.1.1 + '@mui/utils': 5.2.3_react@18.0.0-rc.0 + '@popperjs/core': 2.11.0 + '@types/react': 17.0.38 + clsx: 1.1.1 + prop-types: 15.8.0 + react: 18.0.0-rc.0 + react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 + react-is: 17.0.2 + dev: false + /@mui/icons-material/5.2.5_695e98f08a2d125282e19cae338368d2: resolution: {integrity: sha512-uQiUz+l0xy+2jExyKyU19MkMAR2F7bQFcsQ5hdqAtsB14Jw2zlmIAD55mV6f0NxKCut7Rx6cA3ZpfzlzAfoK8Q==} engines: {node: '>=12.0.0'} @@ -4764,8 +4790,8 @@ packages: react: 18.0.0-rc.0 dev: false - /@mui/lab/5.0.0-alpha.61_10fe5b9cda37a48a2d94b5e38d45d618: - resolution: {integrity: sha512-bLWTj8CR/C+HKOtrJVbAa0AYXGAdjZzQlwOQgvdw1YWNo3HQi+ers9BirDoqzP+j+t+0zh/YM2ZchFsc8KTGTA==} + /@mui/lab/5.0.0-alpha.64_10fe5b9cda37a48a2d94b5e38d45d618: + resolution: {integrity: sha512-YqTWT4TBHSGyV3dS4/TQctpKh0s4CDgWNrA2UnEnXFAfXmFET2Zm6W06fJ1VZDmJfyCVD8Wq0WsiwVZj4ay+Uw==} engines: {node: '>=12.0.0'} peerDependencies: '@mui/material': ^5.0.0 @@ -4793,9 +4819,9 @@ packages: '@date-io/dayjs': 2.11.0 '@date-io/luxon': 2.11.1 '@date-io/moment': 2.11.0 - '@mui/base': 5.0.0-alpha.61_2f50eb45a1501445764b3dbbd8573d7c + '@mui/base': 5.0.0-alpha.64_2f50eb45a1501445764b3dbbd8573d7c '@mui/material': 5.2.5_811d2bc6069f340521b4a59905442643 - '@mui/system': 5.2.5_78136fa2e471fe4795d123fe9b8f9a75 + '@mui/system': 5.2.8_78136fa2e471fe4795d123fe9b8f9a75 '@mui/utils': 5.2.3_react@18.0.0-rc.0 '@types/react': 17.0.38 clsx: 1.1.1 @@ -4884,6 +4910,27 @@ packages: react: 18.0.0-rc.0 dev: false + /@mui/styled-engine/5.2.6_c0cf7dff94e5429eafa9194873ebdbc2: + resolution: {integrity: sha512-bqAhli8eGS6v2qxivy2/4K0Ag8o//jsu1G2G6QcieFiT6y7oIF/nd/6Tvw6OSm3roOTifVQWNKwkt1yFWhGS+w==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/react': ^11.4.1 + '@emotion/styled': ^11.3.0 + react: ^17.0.2 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + dependencies: + '@babel/runtime': 7.16.5 + '@emotion/cache': 11.7.1 + '@emotion/react': 11.7.1_2fa291bfae6e56080648438396754a97 + '@emotion/styled': 11.6.0_e0f2ce61d672e052c2dabbceabccaca0 + prop-types: 15.8.0 + react: 18.0.0-rc.0 + dev: false + /@mui/system/5.2.5_78136fa2e471fe4795d123fe9b8f9a75: resolution: {integrity: sha512-UHKsEZCZa0wuR9w8EXRmDVolHjjFBWinMhSmaRuR6nbmxVMUq7AhF5N0+Aw4IhFSehwfpVpf8FOlZDfg9QnGBA==} engines: {node: '>=12.0.0'} @@ -4914,6 +4961,36 @@ packages: react: 18.0.0-rc.0 dev: false + /@mui/system/5.2.8_78136fa2e471fe4795d123fe9b8f9a75: + resolution: {integrity: sha512-tje1HRubQUk+cDJBG5F83X1j0XzVe+qhellKxByrJVOEEDHoSpbc8UW+NCLSuBBHvOikxihuv3SS4VOWOo2/BQ==} + engines: {node: '>=12.0.0'} + peerDependencies: + '@emotion/react': ^11.5.0 + '@emotion/styled': ^11.3.0 + '@types/react': ^16.8.6 || ^17.0.0 + react: ^17.0.2 + peerDependenciesMeta: + '@emotion/react': + optional: true + '@emotion/styled': + optional: true + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.16.5 + '@emotion/react': 11.7.1_2fa291bfae6e56080648438396754a97 + '@emotion/styled': 11.6.0_e0f2ce61d672e052c2dabbceabccaca0 + '@mui/private-theming': 5.2.3_2fa291bfae6e56080648438396754a97 + '@mui/styled-engine': 5.2.6_c0cf7dff94e5429eafa9194873ebdbc2 + '@mui/types': 7.1.0_@types+react@17.0.38 + '@mui/utils': 5.2.3_react@18.0.0-rc.0 + '@types/react': 17.0.38 + clsx: 1.1.1 + csstype: 3.0.10 + prop-types: 15.8.0 + react: 18.0.0-rc.0 + dev: false + /@mui/types/7.1.0_@types+react@17.0.38: resolution: {integrity: sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ==} peerDependencies: @@ -5536,7 +5613,7 @@ packages: nanoid: 3.1.30 p-limit: 3.1.0 prettier: 2.5.1 - prop-types: 15.7.2 + prop-types: 15.8.0 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 react-element-to-jsx-string: 14.3.4_757a802188413a36d4f24237d13b8e90 @@ -5748,7 +5825,7 @@ packages: core-js: 3.19.3 global: 4.4.0 memoizerific: 1.11.3 - prop-types: 15.7.2 + prop-types: 15.8.0 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 regenerator-runtime: 0.13.9 @@ -6162,7 +6239,7 @@ packages: memoizerific: 1.11.3 overlayscrollbars: 1.13.1 polished: 4.1.3 - prop-types: 15.7.2 + prop-types: 15.8.0 react: 18.0.0-rc.0 react-colorful: 5.5.1_757a802188413a36d4f24237d13b8e90 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 @@ -7992,7 +8069,7 @@ packages: /@types/react-syntax-highlighter/11.0.5: resolution: {integrity: sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg==} dependencies: - '@types/react': 17.0.37 + '@types/react': 17.0.38 dev: true /@types/react-transition-group/4.4.4: @@ -8037,21 +8114,12 @@ packages: csstype: 3.0.10 dev: false - /@types/react/17.0.37: - resolution: {integrity: sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==} - dependencies: - '@types/prop-types': 15.7.4 - '@types/scheduler': 0.16.2 - csstype: 3.0.10 - dev: true - /@types/react/17.0.38: resolution: {integrity: sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==} dependencies: '@types/prop-types': 15.7.4 '@types/scheduler': 0.16.2 csstype: 3.0.10 - dev: false /@types/remarkable/2.0.3: resolution: {integrity: sha512-QQUBeYApuHCNl9Br6ZoI3PlKmwZ69JHrlJktJXnjxobia9liZgsI70fm8PnCqVFAcefYK+9PGzR5L/hzCslNYQ==} @@ -12735,7 +12803,7 @@ packages: dependencies: '@babel/runtime': 7.16.5 compute-scroll-into-view: 1.0.17 - prop-types: 15.7.2 + prop-types: 15.8.0 react: 18.0.0-rc.0 react-is: 17.0.2 tslib: 2.3.1 @@ -12864,7 +12932,7 @@ packages: '@emotion/core': ^10.0.27 react: '>=16.3.0' dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 '@emotion/core': 10.3.1_react@18.0.0-rc.0 '@emotion/weak-memoize': 0.2.5 hoist-non-react-statics: 3.3.2 @@ -19522,7 +19590,7 @@ packages: resolution: {integrity: sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA==} engines: {node: '>=10'} dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 dev: true /portfinder/1.0.28: @@ -20151,7 +20219,7 @@ packages: dependencies: '@babel/core': 7.16.5 '@babel/generator': 7.16.0 - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 ast-types: 0.14.2 commander: 2.20.3 doctrine: 3.0.0 @@ -20181,7 +20249,7 @@ packages: react-dom: '>= 16.3.0' dependencies: clsx: 1.1.1 - prop-types: 15.7.2 + prop-types: 15.8.0 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 @@ -20223,7 +20291,7 @@ packages: dependencies: '@babel/runtime': 7.16.5 invariant: 2.2.4 - prop-types: 15.7.2 + prop-types: 15.8.0 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 react-fast-compare: 3.2.0 @@ -20268,9 +20336,9 @@ packages: peerDependencies: react: ^16.8.4 || ^17.0.0 dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 is-dom: 1.1.0 - prop-types: 15.7.2 + prop-types: 15.8.0 react: 18.0.0-rc.0 dev: true @@ -20286,7 +20354,7 @@ packages: react: ^16.6.0 || ^17.0.0 react-dom: ^16.6.0 || ^17.0.0 dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 '@popperjs/core': 2.11.0 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 @@ -20406,7 +20474,7 @@ packages: peerDependencies: react: '>= 0.14.0' dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 highlight.js: 10.7.3 lowlight: 1.20.0 prismjs: 1.25.0 @@ -20420,7 +20488,7 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0 dependencies: - '@babel/runtime': 7.16.3 + '@babel/runtime': 7.16.5 react: 18.0.0-rc.0 use-composed-ref: 1.1.0_react@18.0.0-rc.0 use-latest: 1.2.0_2fa291bfae6e56080648438396754a97 From 88fc49274610864903571d5d2d4d6c4e64f38c38 Mon Sep 17 00:00:00 2001 From: unclebill Date: Wed, 12 Jan 2022 12:09:09 +0800 Subject: [PATCH 2/6] fix: try --- package.json | 4 ++-- packages/theme/tsconfig.json | 3 ++- pnpm-lock.yaml | 37 +++++++----------------------------- 3 files changed, 11 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index abe132199040..2968e506b08e 100644 --- a/package.json +++ b/package.json @@ -26,8 +26,8 @@ "@emotion/styled": "^11.6.0", "@emotion/utils": "^1.0.0", "@mui/icons-material": "5.2.5", - "@mui/base": "5.0.0-alpha.64", - "@mui/lab": "5.0.0-alpha.64", + "@mui/base": "5.0.0-alpha.61", + "@mui/lab": "5.0.0-alpha.61", "@mui/material": "5.2.5", "@mui/system": "5.2.5", "@types/masknet__global-types": "workspace:*", diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json index bb4139031a1a..4416c85e8081 100644 --- a/packages/theme/tsconfig.json +++ b/packages/theme/tsconfig.json @@ -3,7 +3,8 @@ "compilerOptions": { "rootDir": "./src", "outDir": "./dist/src/", - "tsBuildInfoFile": "./dist/src.tsbuildinfo" + "tsBuildInfoFile": "./dist/src.tsbuildinfo", + "preserveSymlinks": true }, "include": ["./src"], "references": [{ "path": "../icons" }] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 76001e0cf09d..a11356216f3d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,9 +22,9 @@ importers: '@magic-works/i18n-codegen': ^0.0.6 '@masknet/cli': workspace:* '@masknet/serializer': workspace:^0.0.0 - '@mui/base': 5.0.0-alpha.64 + '@mui/base': 5.0.0-alpha.61 '@mui/icons-material': 5.2.5 - '@mui/lab': 5.0.0-alpha.64 + '@mui/lab': 5.0.0-alpha.61 '@mui/material': 5.2.5 '@mui/system': 5.2.5 '@nice-labs/git-rev': ^3.5.0 @@ -69,9 +69,9 @@ importers: '@emotion/serialize': 1.0.2 '@emotion/styled': 11.6.0_e0f2ce61d672e052c2dabbceabccaca0 '@emotion/utils': 1.0.0 - '@mui/base': 5.0.0-alpha.64_2f50eb45a1501445764b3dbbd8573d7c + '@mui/base': 5.0.0-alpha.61_2f50eb45a1501445764b3dbbd8573d7c '@mui/icons-material': 5.2.5_695e98f08a2d125282e19cae338368d2 - '@mui/lab': 5.0.0-alpha.64_10fe5b9cda37a48a2d94b5e38d45d618 + '@mui/lab': 5.0.0-alpha.61_10fe5b9cda37a48a2d94b5e38d45d618 '@mui/material': 5.2.5_811d2bc6069f340521b4a59905442643 '@mui/system': 5.2.5_78136fa2e471fe4795d123fe9b8f9a75 '@types/masknet__global-types': link:packages/polyfills/types @@ -4750,29 +4750,6 @@ packages: react-is: 17.0.2 dev: false - /@mui/base/5.0.0-alpha.64_2f50eb45a1501445764b3dbbd8573d7c: - resolution: {integrity: sha512-lqUFbAyYPl3uDaTxGWIUWx9Zin5APv5Rrn/oUcnm/71Isd5dJ94zoGHCTdNy2sxhDRcXRshsdC2dfdwIWxhkZA==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@types/react': ^16.8.6 || ^17.0.0 - react: ^17.0.2 - react-dom: ^17.0.2 - peerDependenciesMeta: - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.16.5 - '@emotion/is-prop-valid': 1.1.1 - '@mui/utils': 5.2.3_react@18.0.0-rc.0 - '@popperjs/core': 2.11.0 - '@types/react': 17.0.38 - clsx: 1.1.1 - prop-types: 15.8.0 - react: 18.0.0-rc.0 - react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 - react-is: 17.0.2 - dev: false - /@mui/icons-material/5.2.5_695e98f08a2d125282e19cae338368d2: resolution: {integrity: sha512-uQiUz+l0xy+2jExyKyU19MkMAR2F7bQFcsQ5hdqAtsB14Jw2zlmIAD55mV6f0NxKCut7Rx6cA3ZpfzlzAfoK8Q==} engines: {node: '>=12.0.0'} @@ -4790,8 +4767,8 @@ packages: react: 18.0.0-rc.0 dev: false - /@mui/lab/5.0.0-alpha.64_10fe5b9cda37a48a2d94b5e38d45d618: - resolution: {integrity: sha512-YqTWT4TBHSGyV3dS4/TQctpKh0s4CDgWNrA2UnEnXFAfXmFET2Zm6W06fJ1VZDmJfyCVD8Wq0WsiwVZj4ay+Uw==} + /@mui/lab/5.0.0-alpha.61_10fe5b9cda37a48a2d94b5e38d45d618: + resolution: {integrity: sha512-bLWTj8CR/C+HKOtrJVbAa0AYXGAdjZzQlwOQgvdw1YWNo3HQi+ers9BirDoqzP+j+t+0zh/YM2ZchFsc8KTGTA==} engines: {node: '>=12.0.0'} peerDependencies: '@mui/material': ^5.0.0 @@ -4819,7 +4796,7 @@ packages: '@date-io/dayjs': 2.11.0 '@date-io/luxon': 2.11.1 '@date-io/moment': 2.11.0 - '@mui/base': 5.0.0-alpha.64_2f50eb45a1501445764b3dbbd8573d7c + '@mui/base': 5.0.0-alpha.61_2f50eb45a1501445764b3dbbd8573d7c '@mui/material': 5.2.5_811d2bc6069f340521b4a59905442643 '@mui/system': 5.2.8_78136fa2e471fe4795d123fe9b8f9a75 '@mui/utils': 5.2.3_react@18.0.0-rc.0 From 01ec9f0e2824cf488d488820af45f6c29edce229 Mon Sep 17 00:00:00 2001 From: unclebill Date: Wed, 12 Jan 2022 12:22:27 +0800 Subject: [PATCH 3/6] fix: lock styled-engine at 5.2.5 --- package.json | 1 + pnpm-lock.yaml | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 2968e506b08e..b7bc6dc48144 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@mui/lab": "5.0.0-alpha.61", "@mui/material": "5.2.5", "@mui/system": "5.2.5", + "@mui/styled-engine": "5.2.5", "@types/masknet__global-types": "workspace:*", "@types/react": "^17.0.38", "@types/react-dom": "^17.0.11", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a11356216f3d..89b77a624a80 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,7 @@ importers: '@mui/icons-material': 5.2.5 '@mui/lab': 5.0.0-alpha.61 '@mui/material': 5.2.5 + '@mui/styled-engine': 5.2.5 '@mui/system': 5.2.5 '@nice-labs/git-rev': ^3.5.0 '@types/lodash-es': ^4.17.5 @@ -73,6 +74,7 @@ importers: '@mui/icons-material': 5.2.5_695e98f08a2d125282e19cae338368d2 '@mui/lab': 5.0.0-alpha.61_10fe5b9cda37a48a2d94b5e38d45d618 '@mui/material': 5.2.5_811d2bc6069f340521b4a59905442643 + '@mui/styled-engine': 5.2.5_c0cf7dff94e5429eafa9194873ebdbc2 '@mui/system': 5.2.5_78136fa2e471fe4795d123fe9b8f9a75 '@types/masknet__global-types': link:packages/polyfills/types '@types/react': 17.0.38 @@ -4928,7 +4930,7 @@ packages: '@emotion/react': 11.7.1_2fa291bfae6e56080648438396754a97 '@emotion/styled': 11.6.0_e0f2ce61d672e052c2dabbceabccaca0 '@mui/private-theming': 5.2.3_2fa291bfae6e56080648438396754a97 - '@mui/styled-engine': 5.2.5_c0cf7dff94e5429eafa9194873ebdbc2 + '@mui/styled-engine': 5.2.6_c0cf7dff94e5429eafa9194873ebdbc2 '@mui/types': 7.1.0_@types+react@17.0.38 '@mui/utils': 5.2.3_react@18.0.0-rc.0 '@types/react': 17.0.38 From 36e688f9abab2853ea311ae469b1bed8dc0bb9ff Mon Sep 17 00:00:00 2001 From: unclebill Date: Thu, 13 Jan 2022 12:40:31 +0800 Subject: [PATCH 4/6] refactor: use vanilla html --- package.json | 2 - .../components/shared/ApplicationBoard.tsx | 50 +-------- .../theme/src/Components/FolderTabs/index.tsx | 75 +++++++------ packages/theme/tsconfig.json | 3 +- pnpm-lock.yaml | 105 +++++------------- 5 files changed, 78 insertions(+), 157 deletions(-) diff --git a/package.json b/package.json index b7bc6dc48144..dee4a2935b59 100644 --- a/package.json +++ b/package.json @@ -26,11 +26,9 @@ "@emotion/styled": "^11.6.0", "@emotion/utils": "^1.0.0", "@mui/icons-material": "5.2.5", - "@mui/base": "5.0.0-alpha.61", "@mui/lab": "5.0.0-alpha.61", "@mui/material": "5.2.5", "@mui/system": "5.2.5", - "@mui/styled-engine": "5.2.5", "@types/masknet__global-types": "workspace:*", "@types/react": "^17.0.38", "@types/react-dom": "^17.0.11", diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index c53d508f20fb..2920afdb564a 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -1,7 +1,7 @@ import { useCallback, useState } from 'react' import classNames from 'classnames' import { Typography } from '@mui/material' -import { makeStyles } from '@masknet/theme' +import { FolderTabPanel, FolderTabs, makeStyles } from '@masknet/theme' import { ChainId, useChainId, useAccount, useWallet } from '@masknet/web3-shared-evm' import { useRemoteControlledDialog } from '@masknet/shared' import { MaskMessages } from '../../utils/messages' @@ -318,49 +318,9 @@ export function ApplicationBoard({ secondEntries, secondEntryChainTabs }: MaskAp ] return ( - <> - {secondEntryChainTabs?.length ? ( -
- -
- ) : null} -
- {(secondEntries ?? firstLevelEntries).map( - ({ title, img, onClick, supportedChains, hidden, walletRequired }, i) => - (!supportedChains || supportedChains?.includes(chainId)) && !hidden ? ( -
- - - {title} - -
- ) : null, - )} -
- {isClaimAllDialogOpen ? ( - - ) : null} - {isSwapDialogOpen ? : null} - {isSecondLevelEntryDialogOpen ? ( - - ) : null} - + + Content 1 + Content 2 + ) } diff --git a/packages/theme/src/Components/FolderTabs/index.tsx b/packages/theme/src/Components/FolderTabs/index.tsx index 2d2da0abf86c..1e431b5b1ded 100644 --- a/packages/theme/src/Components/FolderTabs/index.tsx +++ b/packages/theme/src/Components/FolderTabs/index.tsx @@ -1,22 +1,22 @@ import { styled } from '@mui/material' -import { - TabPanelUnstyled, - TabPanelUnstyledProps, - TabsListUnstyled, - TabsUnstyled, - TabsUnstyledProps, - TabUnstyled, - tabUnstyledClasses, -} from '@mui/base' -import { Children, cloneElement, FC } from 'react' +// import { +// TabPanelUnstyled, +// TabPanelUnstyledProps, +// TabsListUnstyled, +// TabsUnstyled, +// TabsUnstyledProps, +// TabUnstyled, +// tabUnstyledClasses, +// } from '@mui/base' +import { Children, cloneElement, FC, useState, HTMLProps } from 'react' import { MaskColorVar } from '../../constants' -const TabList = styled(TabsListUnstyled)` +const TabList = styled('div')` display: flex; gap: 8px; ` -const Tab = styled(TabUnstyled)(({ theme }) => { +const Tab = styled('button')(({ theme }) => { const isDark = theme.palette.mode === 'dark' const inactiveColor = isDark ? theme.palette.grey['50'] : MaskColorVar.twitterBg return { @@ -33,13 +33,13 @@ const Tab = styled(TabUnstyled)(({ theme }) => { color: theme.palette.text.secondary, position: 'relative', boxSizing: 'border-box', - [`&.${tabUnstyledClasses.selected}`]: { + ['&.selected']: { backgroundColor: theme.palette.background.paper, borderColor: MaskColorVar.twitterBorderLine, color: theme.palette.primary.main, }, // cover bottom border of the active tab - [`&.${tabUnstyledClasses.selected}::after`]: { + ['&.selected::after']: { position: 'absolute', content: '""', height: 2, @@ -59,35 +59,46 @@ const PanelContent = styled('div')` border-radius: 0 0 8px 8px; ` -interface TabPanelProps extends Omit { +interface TabPanelProps extends HTMLProps { label: string - value?: TabPanelUnstyledProps['value'] + value?: number | string } -export const FolderTabPanel = styled(TabPanelUnstyled)(({ theme }) => ({ +export const FolderTabPanel = styled('div')(({ theme }) => ({ backgroundColor: theme.palette.background.paper, })) type TabPanelReactElement = React.ReactElement> -interface FolderTabsProps extends TabsUnstyledProps {} +interface FolderTabsProps extends HTMLProps {} export const FolderTabs: FC = ({ children: childNodes, defaultValue = 0, ...rest }) => { - const labels = Children.map(childNodes as TabPanelReactElement[], (child) => child.props.label) - const children = Children.map(childNodes as TabPanelReactElement[], (child, index) => - cloneElement(child, { - value: child.props.value ?? index, - }), - ) - if (!labels.length) return null + const [value, setValue] = useState(defaultValue) + const tabs = Children.map(childNodes as TabPanelReactElement[], (child, index) => { + const label = child.props.label + const childValue = child.props.value ?? index + const selected = value === childValue + return ( + setValue(childValue)}> + {label} + + ) + }) + const children = Children.map(childNodes as TabPanelReactElement[], (child, index) => { + const childValue = child.props.value ?? index + const selected = value === childValue + return selected ? child : null + }) + if (!tabs.length) return null return ( - - - {labels.map((label) => ( - {label} - ))} - +
+ {tabs} {children} - +
) } diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json index 4416c85e8081..bb4139031a1a 100644 --- a/packages/theme/tsconfig.json +++ b/packages/theme/tsconfig.json @@ -3,8 +3,7 @@ "compilerOptions": { "rootDir": "./src", "outDir": "./dist/src/", - "tsBuildInfoFile": "./dist/src.tsbuildinfo", - "preserveSymlinks": true + "tsBuildInfoFile": "./dist/src.tsbuildinfo" }, "include": ["./src"], "references": [{ "path": "../icons" }] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89b77a624a80..0a1e80e5aee7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,11 +22,9 @@ importers: '@magic-works/i18n-codegen': ^0.0.6 '@masknet/cli': workspace:* '@masknet/serializer': workspace:^0.0.0 - '@mui/base': 5.0.0-alpha.61 '@mui/icons-material': 5.2.5 '@mui/lab': 5.0.0-alpha.61 '@mui/material': 5.2.5 - '@mui/styled-engine': 5.2.5 '@mui/system': 5.2.5 '@nice-labs/git-rev': ^3.5.0 '@types/lodash-es': ^4.17.5 @@ -70,11 +68,9 @@ importers: '@emotion/serialize': 1.0.2 '@emotion/styled': 11.6.0_e0f2ce61d672e052c2dabbceabccaca0 '@emotion/utils': 1.0.0 - '@mui/base': 5.0.0-alpha.61_2f50eb45a1501445764b3dbbd8573d7c '@mui/icons-material': 5.2.5_695e98f08a2d125282e19cae338368d2 '@mui/lab': 5.0.0-alpha.61_10fe5b9cda37a48a2d94b5e38d45d618 '@mui/material': 5.2.5_811d2bc6069f340521b4a59905442643 - '@mui/styled-engine': 5.2.5_c0cf7dff94e5429eafa9194873ebdbc2 '@mui/system': 5.2.5_78136fa2e471fe4795d123fe9b8f9a75 '@types/masknet__global-types': link:packages/polyfills/types '@types/react': 17.0.38 @@ -2924,7 +2920,6 @@ packages: engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.13.9 - dev: false /@babel/runtime/7.16.5: resolution: {integrity: sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==} @@ -3633,7 +3628,7 @@ packages: dependencies: '@babel/helper-module-imports': 7.16.0 '@babel/plugin-syntax-jsx': 7.16.0 - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 '@emotion/hash': 0.8.0 '@emotion/memoize': 0.7.5 '@emotion/serialize': 1.0.2 @@ -3669,7 +3664,7 @@ packages: peerDependencies: react: '>=16.3.0' dependencies: - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 '@emotion/cache': 10.0.29 '@emotion/css': 10.0.27 '@emotion/serialize': 0.11.16 @@ -3780,7 +3775,7 @@ packages: '@emotion/core': ^10.0.28 react: '>=16.3.0' dependencies: - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 '@emotion/core': 10.3.1_react@18.0.0-rc.0 '@emotion/is-prop-valid': 0.8.8 '@emotion/serialize': 0.11.16 @@ -4800,7 +4795,7 @@ packages: '@date-io/moment': 2.11.0 '@mui/base': 5.0.0-alpha.61_2f50eb45a1501445764b3dbbd8573d7c '@mui/material': 5.2.5_811d2bc6069f340521b4a59905442643 - '@mui/system': 5.2.8_78136fa2e471fe4795d123fe9b8f9a75 + '@mui/system': 5.2.5_78136fa2e471fe4795d123fe9b8f9a75 '@mui/utils': 5.2.3_react@18.0.0-rc.0 '@types/react': 17.0.38 clsx: 1.1.1 @@ -4889,27 +4884,6 @@ packages: react: 18.0.0-rc.0 dev: false - /@mui/styled-engine/5.2.6_c0cf7dff94e5429eafa9194873ebdbc2: - resolution: {integrity: sha512-bqAhli8eGS6v2qxivy2/4K0Ag8o//jsu1G2G6QcieFiT6y7oIF/nd/6Tvw6OSm3roOTifVQWNKwkt1yFWhGS+w==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/react': ^11.4.1 - '@emotion/styled': ^11.3.0 - react: ^17.0.2 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - dependencies: - '@babel/runtime': 7.16.5 - '@emotion/cache': 11.7.1 - '@emotion/react': 11.7.1_2fa291bfae6e56080648438396754a97 - '@emotion/styled': 11.6.0_e0f2ce61d672e052c2dabbceabccaca0 - prop-types: 15.8.0 - react: 18.0.0-rc.0 - dev: false - /@mui/system/5.2.5_78136fa2e471fe4795d123fe9b8f9a75: resolution: {integrity: sha512-UHKsEZCZa0wuR9w8EXRmDVolHjjFBWinMhSmaRuR6nbmxVMUq7AhF5N0+Aw4IhFSehwfpVpf8FOlZDfg9QnGBA==} engines: {node: '>=12.0.0'} @@ -4930,37 +4904,7 @@ packages: '@emotion/react': 11.7.1_2fa291bfae6e56080648438396754a97 '@emotion/styled': 11.6.0_e0f2ce61d672e052c2dabbceabccaca0 '@mui/private-theming': 5.2.3_2fa291bfae6e56080648438396754a97 - '@mui/styled-engine': 5.2.6_c0cf7dff94e5429eafa9194873ebdbc2 - '@mui/types': 7.1.0_@types+react@17.0.38 - '@mui/utils': 5.2.3_react@18.0.0-rc.0 - '@types/react': 17.0.38 - clsx: 1.1.1 - csstype: 3.0.10 - prop-types: 15.8.0 - react: 18.0.0-rc.0 - dev: false - - /@mui/system/5.2.8_78136fa2e471fe4795d123fe9b8f9a75: - resolution: {integrity: sha512-tje1HRubQUk+cDJBG5F83X1j0XzVe+qhellKxByrJVOEEDHoSpbc8UW+NCLSuBBHvOikxihuv3SS4VOWOo2/BQ==} - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/react': ^11.5.0 - '@emotion/styled': ^11.3.0 - '@types/react': ^16.8.6 || ^17.0.0 - react: ^17.0.2 - peerDependenciesMeta: - '@emotion/react': - optional: true - '@emotion/styled': - optional: true - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.16.5 - '@emotion/react': 11.7.1_2fa291bfae6e56080648438396754a97 - '@emotion/styled': 11.6.0_e0f2ce61d672e052c2dabbceabccaca0 - '@mui/private-theming': 5.2.3_2fa291bfae6e56080648438396754a97 - '@mui/styled-engine': 5.2.6_c0cf7dff94e5429eafa9194873ebdbc2 + '@mui/styled-engine': 5.2.5_c0cf7dff94e5429eafa9194873ebdbc2 '@mui/types': 7.1.0_@types+react@17.0.38 '@mui/utils': 5.2.3_react@18.0.0-rc.0 '@types/react': 17.0.38 @@ -5592,7 +5536,7 @@ packages: nanoid: 3.1.30 p-limit: 3.1.0 prettier: 2.5.1 - prop-types: 15.8.0 + prop-types: 15.7.2 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 react-element-to-jsx-string: 14.3.4_757a802188413a36d4f24237d13b8e90 @@ -5804,7 +5748,7 @@ packages: core-js: 3.19.3 global: 4.4.0 memoizerific: 1.11.3 - prop-types: 15.8.0 + prop-types: 15.7.2 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 regenerator-runtime: 0.13.9 @@ -6218,7 +6162,7 @@ packages: memoizerific: 1.11.3 overlayscrollbars: 1.13.1 polished: 4.1.3 - prop-types: 15.8.0 + prop-types: 15.7.2 react: 18.0.0-rc.0 react-colorful: 5.5.1_757a802188413a36d4f24237d13b8e90 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 @@ -8048,7 +7992,7 @@ packages: /@types/react-syntax-highlighter/11.0.5: resolution: {integrity: sha512-VIOi9i2Oj5XsmWWoB72p3KlZoEbdRAcechJa8Ztebw7bDl2YmR+odxIqhtJGp1q2EozHs02US+gzxJ9nuf56qg==} dependencies: - '@types/react': 17.0.38 + '@types/react': 17.0.37 dev: true /@types/react-transition-group/4.4.4: @@ -8093,12 +8037,21 @@ packages: csstype: 3.0.10 dev: false + /@types/react/17.0.37: + resolution: {integrity: sha512-2FS1oTqBGcH/s0E+CjrCCR9+JMpsu9b69RTFO+40ua43ZqP5MmQ4iUde/dMjWR909KxZwmOQIFq6AV6NjEG5xg==} + dependencies: + '@types/prop-types': 15.7.4 + '@types/scheduler': 0.16.2 + csstype: 3.0.10 + dev: true + /@types/react/17.0.38: resolution: {integrity: sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==} dependencies: '@types/prop-types': 15.7.4 '@types/scheduler': 0.16.2 csstype: 3.0.10 + dev: false /@types/remarkable/2.0.3: resolution: {integrity: sha512-QQUBeYApuHCNl9Br6ZoI3PlKmwZ69JHrlJktJXnjxobia9liZgsI70fm8PnCqVFAcefYK+9PGzR5L/hzCslNYQ==} @@ -12782,7 +12735,7 @@ packages: dependencies: '@babel/runtime': 7.16.5 compute-scroll-into-view: 1.0.17 - prop-types: 15.8.0 + prop-types: 15.7.2 react: 18.0.0-rc.0 react-is: 17.0.2 tslib: 2.3.1 @@ -12911,7 +12864,7 @@ packages: '@emotion/core': ^10.0.27 react: '>=16.3.0' dependencies: - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 '@emotion/core': 10.3.1_react@18.0.0-rc.0 '@emotion/weak-memoize': 0.2.5 hoist-non-react-statics: 3.3.2 @@ -19569,7 +19522,7 @@ packages: resolution: {integrity: sha512-ocPAcVBUOryJEKe0z2KLd1l9EBa1r5mSwlKpExmrLzsnIzJo4axsoU9O2BjOTkDGDT4mZ0WFE5XKTlR3nLnZOA==} engines: {node: '>=10'} dependencies: - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 dev: true /portfinder/1.0.28: @@ -20198,7 +20151,7 @@ packages: dependencies: '@babel/core': 7.16.5 '@babel/generator': 7.16.0 - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 ast-types: 0.14.2 commander: 2.20.3 doctrine: 3.0.0 @@ -20228,7 +20181,7 @@ packages: react-dom: '>= 16.3.0' dependencies: clsx: 1.1.1 - prop-types: 15.8.0 + prop-types: 15.7.2 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 @@ -20270,7 +20223,7 @@ packages: dependencies: '@babel/runtime': 7.16.5 invariant: 2.2.4 - prop-types: 15.8.0 + prop-types: 15.7.2 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 react-fast-compare: 3.2.0 @@ -20315,9 +20268,9 @@ packages: peerDependencies: react: ^16.8.4 || ^17.0.0 dependencies: - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 is-dom: 1.1.0 - prop-types: 15.8.0 + prop-types: 15.7.2 react: 18.0.0-rc.0 dev: true @@ -20333,7 +20286,7 @@ packages: react: ^16.6.0 || ^17.0.0 react-dom: ^16.6.0 || ^17.0.0 dependencies: - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 '@popperjs/core': 2.11.0 react: 18.0.0-rc.0 react-dom: 18.0.0-rc.0_react@18.0.0-rc.0 @@ -20453,7 +20406,7 @@ packages: peerDependencies: react: '>= 0.14.0' dependencies: - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 highlight.js: 10.7.3 lowlight: 1.20.0 prismjs: 1.25.0 @@ -20467,7 +20420,7 @@ packages: peerDependencies: react: ^16.8.0 || ^17.0.0 dependencies: - '@babel/runtime': 7.16.5 + '@babel/runtime': 7.16.3 react: 18.0.0-rc.0 use-composed-ref: 1.1.0_react@18.0.0-rc.0 use-latest: 1.2.0_2fa291bfae6e56080648438396754a97 From c2006e85fc0a27d71ec098221f47f6605f96ed6a Mon Sep 17 00:00:00 2001 From: unclebill Date: Thu, 13 Jan 2022 13:39:36 +0800 Subject: [PATCH 5/6] refactor: use makeStyles --- .../theme/src/Components/FolderTabs/index.tsx | 122 +++++++++--------- 1 file changed, 63 insertions(+), 59 deletions(-) diff --git a/packages/theme/src/Components/FolderTabs/index.tsx b/packages/theme/src/Components/FolderTabs/index.tsx index 1e431b5b1ded..9a55e0041081 100644 --- a/packages/theme/src/Components/FolderTabs/index.tsx +++ b/packages/theme/src/Components/FolderTabs/index.tsx @@ -1,92 +1,94 @@ import { styled } from '@mui/material' -// import { -// TabPanelUnstyled, -// TabPanelUnstyledProps, -// TabsListUnstyled, -// TabsUnstyled, -// TabsUnstyledProps, -// TabUnstyled, -// tabUnstyledClasses, -// } from '@mui/base' -import { Children, cloneElement, FC, useState, HTMLProps } from 'react' +import { Children, cloneElement, FC, useState, HTMLProps, ReactElement } from 'react' +import classnames from 'classnames' +import { makeStyles } from '../../makeStyles' import { MaskColorVar } from '../../constants' -const TabList = styled('div')` - display: flex; - gap: 8px; -` - -const Tab = styled('button')(({ theme }) => { - const isDark = theme.palette.mode === 'dark' +const useStyles = makeStyles()((theme, _, refs) => { + const { palette } = theme + const isDark = palette.mode === 'dark' const inactiveColor = isDark ? theme.palette.grey['50'] : MaskColorVar.twitterBg + const selected = {} return { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - flexGrow: 1, - height: 40, - borderRadius: '8px 8px 0 0', - cursor: 'pointer', - backgroundColor: inactiveColor, - border: `1px solid ${inactiveColor}`, - borderBottomColor: 'transparent', - color: theme.palette.text.secondary, - position: 'relative', - boxSizing: 'border-box', - ['&.selected']: { - backgroundColor: theme.palette.background.paper, - borderColor: MaskColorVar.twitterBorderLine, - color: theme.palette.primary.main, + folderTabs: {}, + selected, + tabList: { + display: 'flex', + gap: 8, + }, + tab: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + flexGrow: 1, + height: 40, + borderRadius: '8px 8px 0 0', + cursor: 'pointer', + backgroundColor: inactiveColor, + border: `1px solid ${inactiveColor}`, + borderBottomColor: 'transparent', + color: theme.palette.text.secondary, + position: 'relative', + boxSizing: 'border-box', + [`&.${refs.selected}`]: { + backgroundColor: theme.palette.background.paper, + borderColor: MaskColorVar.twitterBorderLine, + color: theme.palette.primary.main, + }, + // cover bottom border of the active tab + [`&.${refs.selected}::after`]: { + position: 'absolute', + content: '""', + height: 2, + borderLeft: `1px solid ${MaskColorVar.twitterBorderLine}`, + borderRight: `1px solid ${MaskColorVar.twitterBorderLine}`, + backgroundColor: theme.palette.background.paper, + bottom: '-2px', + left: -1, + right: -1, + }, }, - // cover bottom border of the active tab - ['&.selected::after']: { - position: 'absolute', - content: '""', - height: 2, - borderLeft: `1px solid ${MaskColorVar.twitterBorderLine}`, - borderRight: `1px solid ${MaskColorVar.twitterBorderLine}`, + tabPanel: { backgroundColor: theme.palette.background.paper, - bottom: '-2px', - left: -1, - right: -1, + }, + tabContent: { + border: `1px solid ${MaskColorVar.twitterBorderLine}`, + padding: 12, + borderRadius: '0 0 8px 8px', }, } }) -const PanelContent = styled('div')` - border: 1px solid ${MaskColorVar.twitterBorderLine}; - padding: 12px; - border-radius: 0 0 8px 8px; -` - interface TabPanelProps extends HTMLProps { label: string value?: number | string } -export const FolderTabPanel = styled('div')(({ theme }) => ({ - backgroundColor: theme.palette.background.paper, -})) +export const FolderTabPanel: FC = ({ className, ...rest }) => { + const { classes } = useStyles() + return
+} -type TabPanelReactElement = React.ReactElement> +type TabPanelReactElement = ReactElement> interface FolderTabsProps extends HTMLProps {} export const FolderTabs: FC = ({ children: childNodes, defaultValue = 0, ...rest }) => { + const { classes } = useStyles() const [value, setValue] = useState(defaultValue) const tabs = Children.map(childNodes as TabPanelReactElement[], (child, index) => { const label = child.props.label const childValue = child.props.value ?? index const selected = value === childValue return ( - setValue(childValue)}> {label} - + ) }) const children = Children.map(childNodes as TabPanelReactElement[], (child, index) => { @@ -97,8 +99,10 @@ export const FolderTabs: FC = ({ children: childNodes, defaultV if (!tabs.length) return null return (
- {tabs} - {children} +
+ {tabs} +
+
{children}
) } From 2301ff41630298d0259d60efeac5daaeee5162d7 Mon Sep 17 00:00:00 2001 From: unclebill Date: Thu, 13 Jan 2022 13:46:47 +0800 Subject: [PATCH 6/6] fix: revert mock code --- .../components/shared/ApplicationBoard.tsx | 50 +++++++++++++++++-- .../theme/src/Components/FolderTabs/index.tsx | 3 +- 2 files changed, 46 insertions(+), 7 deletions(-) diff --git a/packages/mask/src/components/shared/ApplicationBoard.tsx b/packages/mask/src/components/shared/ApplicationBoard.tsx index 2920afdb564a..c53d508f20fb 100644 --- a/packages/mask/src/components/shared/ApplicationBoard.tsx +++ b/packages/mask/src/components/shared/ApplicationBoard.tsx @@ -1,7 +1,7 @@ import { useCallback, useState } from 'react' import classNames from 'classnames' import { Typography } from '@mui/material' -import { FolderTabPanel, FolderTabs, makeStyles } from '@masknet/theme' +import { makeStyles } from '@masknet/theme' import { ChainId, useChainId, useAccount, useWallet } from '@masknet/web3-shared-evm' import { useRemoteControlledDialog } from '@masknet/shared' import { MaskMessages } from '../../utils/messages' @@ -318,9 +318,49 @@ export function ApplicationBoard({ secondEntries, secondEntryChainTabs }: MaskAp ] return ( - - Content 1 - Content 2 - + <> + {secondEntryChainTabs?.length ? ( +
+ +
+ ) : null} +
+ {(secondEntries ?? firstLevelEntries).map( + ({ title, img, onClick, supportedChains, hidden, walletRequired }, i) => + (!supportedChains || supportedChains?.includes(chainId)) && !hidden ? ( +
+ + + {title} + +
+ ) : null, + )} +
+ {isClaimAllDialogOpen ? ( + + ) : null} + {isSwapDialogOpen ? : null} + {isSecondLevelEntryDialogOpen ? ( + + ) : null} + ) } diff --git a/packages/theme/src/Components/FolderTabs/index.tsx b/packages/theme/src/Components/FolderTabs/index.tsx index 9a55e0041081..103709a35c26 100644 --- a/packages/theme/src/Components/FolderTabs/index.tsx +++ b/packages/theme/src/Components/FolderTabs/index.tsx @@ -1,5 +1,4 @@ -import { styled } from '@mui/material' -import { Children, cloneElement, FC, useState, HTMLProps, ReactElement } from 'react' +import { Children, FC, useState, HTMLProps, ReactElement } from 'react' import classnames from 'classnames' import { makeStyles } from '../../makeStyles' import { MaskColorVar } from '../../constants'