refactor: export z-index seperately (#1320)

mydearxym · web-flow · commit 095b063a85ca · 2022-05-16T12:23:38.000+08:00
diff --git a/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts b/src/containers/digest/ArticleDigest/styles/desktop_view/fixed_header.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import type { TTestable, TMetric, TActive, TThread } from '@/spec'
-import css, { theme } from '@/utils/css'
+import css, { theme, zIndex } from '@/utils/css'
 import Img from '@/Img'
 
 import { getFixStickerOffset, getFixStickerAlign } from './metric'
@@ -13,7 +13,7 @@ export const Wrapper = styled.nav.attrs(({ testid }: TTestable) => ({
   ${css.flex('justify-center')};
   top: ${({ show }) => (show ? 0 : '-48px;')};
   opacity: ${({ show }) => (show ? 1 : 0)};
-  z-index: ${({ show }) => (show ? css.zIndex.articleFixedHeader : -1)};
+  z-index: ${({ show }) => (show ? zIndex.articleFixedHeader : -1)};
 
   position: fixed;
   top: 0;
diff --git a/src/containers/tool/Doraemon/styles/index.ts b/src/containers/tool/Doraemon/styles/index.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import type { TTestable, TActive } from '@/spec'
-import css, { theme } from '@/utils/css'
+import css, { theme, zIndex } from '@/utils/css'
 
 export const PageOverlay = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
@@ -12,7 +12,7 @@ export const PageOverlay = styled.div.attrs(({ testid }: TTestable) => ({
   position: fixed;
   right: 0;
   top: 0;
-  z-index: ${css.zIndex.doraemonOverlay};
+  z-index: ${zIndex.doraemonOverlay};
   display: ${({ visible }) => (visible ? 'block' : 'none')};
   background: ${({ visible }) =>
     visible ? '#000' : 'transparent'}; // to-theme
@@ -29,7 +29,7 @@ export const PanelContainer = styled.div.attrs(({ testid }: TTestable) => ({
   max-width: 550px;
   position: fixed;
   top: 12vh;
-  z-index: ${css.zIndex.doraemon};
+  z-index: ${zIndex.doraemon};
   margin: auto;
   left: 0;
   right: 0;
diff --git a/src/containers/tool/Doraemon/styles/results_list.ts b/src/containers/tool/Doraemon/styles/results_list.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import type { TActive } from '@/spec'
 import Img from '@/Img'
-import css, { theme, animate } from '@/utils/css'
+import css, { theme, animate, zIndex } from '@/utils/css'
 
 export const Wrapper = styled.div<{ empty: boolean }>`
   position: relative;
@@ -28,7 +28,7 @@ export const PageOverlay = styled.div<TActive>`
   position: fixed;
   right: 0;
   top: 0;
-  z-index: ${css.zIndex.doraemonOverlay};
+  z-index: ${zIndex.doraemonOverlay};
   display: ${({ visible }) => (visible ? 'block' : 'none')};
 `
 // flex-grow example: http://zhoon.github.io/css3/2014/08/23/flex.html
@@ -38,7 +38,7 @@ export const PanelContainer = styled.div<TActive>`
   max-width: 550px;
   position: fixed;
   top: 12vh;
-  z-index: ${css.zIndex.doraemon};
+  z-index: ${zIndex.doraemon};
   display: ${({ visible }) => (visible ? 'block' : 'none')};
   left: 50%;
   margin-left: -19vw;
diff --git a/src/containers/tool/Drawer/styles/index.ts b/src/containers/tool/Drawer/styles/index.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { contains } from 'ramda'
 
 import type { TActive } from '@/spec'
-import css, { theme } from '@/utils/css'
+import css, { theme, zIndex } from '@/utils/css'
 
 import type { TDrawer, TSwipe } from '../spec'
 import {
@@ -23,7 +23,7 @@ export const DrawerOverlay = styled.div<TActive>`
   height: 100%;
   right: 0;
   top: 0;
-  z-index: ${css.zIndex.drawerOverlay};
+  z-index: ${zIndex.drawerOverlay};
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
   background: ${({ visible }) => (visible ? theme('drawer.mask') : 'none')};
   opacity: ${({ visible }) => (visible ? 0.5 : 0)};
@@ -74,7 +74,7 @@ export const DrawerWrapper = styled.div.attrs(
     contains(type, WIDE_CASE) ? WIDE_WIDTH : NARROW_WIDTH};
 
   min-width: ${({ type }) => (contains(type, WIDE_CASE) ? '700px' : '450px')};
-  z-index: ${({ visible }) => (visible ? css.zIndex.drawer : -1)};
+  z-index: ${({ visible }) => (visible ? zIndex.drawer : -1)};
 
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
   opacity: ${({ visible, fromContentEdge }) =>
diff --git a/src/containers/unit/ModeLine/styles/bottom_bar/index.ts b/src/containers/unit/ModeLine/styles/bottom_bar/index.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import type { TTestable } from '@/spec'
 import Img from '@/Img'
 import { TYPE } from '@/constant'
-import css, { theme } from '@/utils/css'
+import css, { theme, zIndex } from '@/utils/css'
 
 type TMenuIcon = { active: boolean; colorTheme: string; raw?: string }
 
@@ -18,7 +18,7 @@ export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   width: 100%;
   height: 35px;
   background: #0e3b4a;
-  z-index: ${css.zIndex.modeLine};
+  z-index: ${zIndex.modeLine};
   box-shadow: ${({ isMenuActive }) =>
     !isMenuActive ? '' : '-5px 6px 37px -8px rgba(0, 0, 0, 0.42)'};
 `
diff --git a/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts b/src/containers/unit/ModeLine/styles/top_bar/desktop_view.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import type { TTestable, TActive } from '@/spec'
-import css, { theme, WIDTH } from '@/utils/css'
+import css, { theme, WIDTH, zIndex } from '@/utils/css'
 
 type TWrapper = TTestable & { noBorder: boolean; leftOffset: string }
 export const WrapperBase = styled.div.attrs(({ testid }: TTestable) => ({
@@ -29,7 +29,7 @@ export const InnerWrapperBase = styled.div`
 export const Wrapper = styled.div<TActive>`
   ${css.flex('justify-center')};
   position: fixed;
-  z-index: ${css.zIndex.header};
+  z-index: ${zIndex.header};
   top: ${({ visible }) => (visible ? '0' : '-33px')};
   width: 100%;
   max-width: ${WIDTH.COMMUNITY.PAGE};
diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/article_bar/index.ts
@@ -2,12 +2,12 @@ import styled from 'styled-components'
 
 import type { TActive } from '@/spec'
 import Img from '@/Img'
-import css, { theme } from '@/utils/css'
+import css, { theme, zIndex } from '@/utils/css'
 
 export const Wrapper = styled.div<TActive>`
   ${css.flex('justify-start')};
   position: fixed;
-  z-index: ${css.zIndex.header};
+  z-index: ${zIndex.header};
   top: ${({ visible }) => (visible ? '0' : '-33px')};
   width: 100%;
   /* TODO: move namespace to modeline */
diff --git a/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts b/src/containers/unit/ModeLine/styles/top_bar/mobile_view/community_bar/index.ts
@@ -1,12 +1,12 @@
 import styled from 'styled-components'
 
 import type { TActive } from '@/spec'
-import css, { theme } from '@/utils/css'
+import css, { theme, zIndex } from '@/utils/css'
 
 export const Wrapper = styled.div<TActive>`
   ${css.flex('justify-start')};
   position: fixed;
-  z-index: ${css.zIndex.header};
+  z-index: ${zIndex.header};
   top: ${({ visible }) => (visible ? '0' : '-33px')};
   width: 100%;
   /* TODO: move namespace to modeline */
diff --git a/src/containers/unit/Sidebar/styles/index.ts b/src/containers/unit/Sidebar/styles/index.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-import css, { theme } from '@/utils/css'
+import css, { theme, zIndex } from '@/utils/css'
 
 import { getMainWidth, getShadow, SIDEBAR_WIDTH } from './metric'
 
@@ -14,7 +14,7 @@ export const Wrapper = styled.aside<TWrapper>`
   height: 100vh;
   border-right: 1px solid;
   border-color: ${theme('sidebar.borderColor')};
-  z-index: ${css.zIndex.sidebar};
+  z-index: ${zIndex.sidebar};
 
   transform: ${({ ispulled }) =>
     ispulled ? 'translateX(0)' : `translateX(-${SIDEBAR_WIDTH})`};
@@ -39,7 +39,7 @@ export const MainWrapper = styled.div.attrs(
 
   height: 100vh;
   background: ${theme('sidebar.bg')};
-  z-index: ${css.zIndex.sidebar};
+  z-index: ${zIndex.sidebar};
 
   transition: width 0.1s, box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
 `
diff --git a/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts b/src/containers/unit/Sidebar/styles/menu_list/menu_bar.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import type { TActive } from '@/spec'
-import css, { theme } from '@/utils/css'
+import css, { theme, zIndex } from '@/utils/css'
 import Img from '@/Img'
 import CommunityFaceLogo from '@/widgets/CommunityFaceLogo'
 
@@ -10,7 +10,7 @@ type TMenuItemTitle = TActive & { pin: boolean }
 export const Wrapper = styled.div`
   display: block;
   position: relative;
-  z-index: ${css.zIndex.sidebar + 1};
+  z-index: ${zIndex.sidebar + 1};
 
   transition: all 0.2s;
 `
diff --git a/src/widgets/Img/styles/lazy_load_image.ts b/src/widgets/Img/styles/lazy_load_image.ts
@@ -1,11 +1,11 @@
 import styled from 'styled-components'
 
-import css from '@/utils/css'
+import css, { zIndex } from '@/utils/css'
 
 export const Wrapper = styled.div`
   ${css.flex()};
   position: relative;
-  z-index: ${css.zIndex.img};
+  z-index: ${zIndex.img};
 `
 export const FallbackWrapper = styled.div`
   position: absolute;
diff --git a/src/widgets/Modal/styles/index.ts b/src/widgets/Modal/styles/index.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 
 import type { TActive } from '@/spec'
-import css, { theme, animate } from '@/utils/css'
+import css, { theme, animate, zIndex } from '@/utils/css'
 import CloseCrossSVG from '@/icons/CloseLight'
 
 // display: ${props => (props.show ? 'block' : 'none')};
@@ -12,7 +12,7 @@ export const Mask = styled.div<TActive>`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: ${css.zIndex.modalOverlay};
+  z-index: ${zIndex.modalOverlay};
   display: ${({ show }) => (show ? 'block' : 'none')};
   background: ${theme('modal.mask')};
 `
@@ -60,7 +60,7 @@ export const CloseBtn = styled(CloseCrossSVG)<TCloseBtn>`
   fill: ${({ mode }) =>
     mode === 'default' ? theme('thread.extraInfo') : theme('baseColor.red')};
   ${css.size(20)};
-  z-index: ${css.zIndex.modalCloseBtn};
+  z-index: ${zIndex.modalCloseBtn};
   opacity: 0.8;
 
   &:hover {
diff --git a/src/widgets/Tooltip/RealTooltip.tsx b/src/widgets/Tooltip/RealTooltip.tsx
@@ -7,7 +7,7 @@
 import { FC, useState, useRef, memo } from 'react'
 import { hideAll } from 'tippy.js'
 
-import css from '@/utils/css'
+import { zIndex } from '@/utils/css'
 import { buildLog } from '@/utils/logger'
 import { isString } from '@/utils/validator'
 import { isDescendant } from '@/utils/dom'
@@ -113,7 +113,7 @@ const Tooltip: FC<TProps> = ({
     content: PopoverContent,
     placement,
     hideOnClick,
-    zIndex: css.zIndex.popover,
+    zIndex: zIndex.popover,
     active: true,
     delay: [delay, 0] as [number, number],
     offset,
diff --git a/src/widgets/Tooltip/styles/index.ts b/src/widgets/Tooltip/styles/index.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import Tippy from '@tippyjs/react'
 
-import css, { theme } from '@/utils/css'
+import css, { theme, zIndex } from '@/utils/css'
 
 export const StyledTippy = styled(Tippy)`
   position: relative;
@@ -42,7 +42,7 @@ export const ContentWrapper = styled.div<{ hasMaxWidth: boolean }>`
 const Arrow = styled.div`
   position: absolute;
   ${css.circle(4)};
-  z-index: ${css.zIndex.popover};
+  z-index: ${zIndex.popover};
   background: #2d7eb1;
   box-shadow: ${theme('popover.boxShadow')};
 `
diff --git a/utils/css/index.ts b/utils/css/index.ts
@@ -9,7 +9,6 @@ import { media, fitContentWidth, fitStickerWidth, fitPageWidth } from './media'
 import { flex, flexGrow, flexColumn, flexColumnGrow } from './flex'
 
 import { circle, size } from './shape'
-import zIndex from './zindex'
 
 const smokey = (initOpacity = 0.6): string => `
   opacity: ${initOpacity};
@@ -46,7 +45,6 @@ const css = {
   flexGrow,
   flexColumn,
   flexColumnGrow,
-  zIndex,
   mediaBreakPoints,
   media,
   fitContentWidth,
@@ -56,6 +54,7 @@ const css = {
 
 export { theme } from '../themes'
 export { WIDTH } from './metric'
+export { default as zIndex } from './zindex'
 
 export { default as animate } from './animations'
 
