refactor(collect-folder): rename && redesign old one

src/components/Buttons/ArrowButton.tsx

@@ -4,7 +4,7 @@
  *
  */
 
-import { FC, ReactNode, useRef, useState, useEffect, memo } from 'react'
+import { FC, ReactNode, memo } from 'react'
 
 import type { TSIZE } from '@/spec'
 import { ICON } from '@/config'
@@ -40,32 +40,12 @@ const ArrowButton: FC<TProps> = ({
       ? `${ICON}/shape/arrow.svg`
       : `${ICON}/shape/arrow-simple.svg`
 
-  const leftTextRef = useRef(null)
-  const rightTextRef = useRef(null)
-
-  const [leftChildWidth, setLeftTextWidth] = useState(50)
-  const [rightChildWidth, setRightTextWidth] = useState(50)
-
-  useEffect(() => {
-    if (leftTextRef) {
-      setLeftTextWidth(leftTextRef.current?.clientWidth)
-    }
-  }, [leftTextRef])
-
-  useEffect(() => {
-    if (rightTextRef) {
-      setRightTextWidth(rightTextRef.current?.clientWidth)
-    }
-  }, [rightTextRef])
-
-  const textWidth = direction === 'left' ? leftChildWidth : rightChildWidth
-
   return (
     <Wrapper
       onClick={() => !disabled && onClick()}
       dimWhenIdle={dimWhenIdle}
+      direction={direction}
       size={size}
-      width={textWidth}
       disabled={disabled}
     >
       {direction === 'left' ? (
@@ -76,15 +56,11 @@ const ArrowButton: FC<TProps> = ({
             src={iconSrc}
             disabled={disabled}
           />
-          <Text ref={leftTextRef} size={size}>
-            {children}
-          </Text>
+          <Text size={size}>{children}</Text>
         </>
       ) : (
         <>
-          <Text ref={rightTextRef} size={size}>
-            {children}
-          </Text>
+          <Text size={size}>{children}</Text>
           <RightIcon
             arrowStyle={arrowStyle}
             size={size}

src/components/Buttons/MenuButton/index.tsx

@@ -22,10 +22,10 @@ export type TOption = {
 type TProps = {
   children: ReactNode
   options: TOption[]
-  extraOptions: TOption[]
+  extraOptions?: TOption[]
   placement?: TTooltipPlacement
   panelMinWidth?: string
-  onClick: (key?: string) => void
+  onClick?: (key?: string) => void
 }
 
 const MenuButton: FC<TProps> = ({

src/components/Buttons/styles/arrow_button.ts

@@ -4,30 +4,36 @@ import Img from '@/Img'
 import { css } from '@/utils'
 
 import {
-  getWidth,
   getIconSize,
   getFontSize,
   getMargin,
   getSimpleMargin,
+  //
+  getArrowTopOffset,
+  getArrowMaxWidth,
+  getArrowInitWidth,
 } from './metircs/arrow_button'
 
 type TWrapper = {
   disabled: boolean
   dimWhenIdle: boolean
+  direction: 'left' | 'right'
   size: string
-  width: number
 }
 export const Wrapper = styled.div<TWrapper>`
+  position: relative;
   ${css.flex('align-center')};
   opacity: ${({ dimWhenIdle, disabled }) =>
     dimWhenIdle || disabled ? '0.65' : 1};
-  min-width: ${({ size, width }) => getWidth(size, width)};
+  justify-content: ${({ direction }) =>
+    direction === 'left' ? 'flex-end' : 'flex-start'};
+  margin-left: ${({ size }) => getArrowMaxWidth(size)};
 
   &:hover {
     cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
     opacity: ${({ disabled }) => (disabled ? 0.65 : 1)};
   }
-  transition: all 0.25s;
+  transition: all 0.2s;
 `
 export const Text = styled.div<{ size: string }>`
   font-size: ${({ size }) => getFontSize(size)};
@@ -42,33 +48,37 @@ export const Icon = styled(Img)<{ size: string }>`
 `
 type TIcon = { size: string; arrowStyle: string; disabled: boolean }
 export const LeftIcon = styled(Icon)<TIcon>`
+  position: absolute;
+  top: ${({ size }) => getArrowTopOffset(size)};
+  left: ${({ size }) => `-${getArrowInitWidth(size)}`};
+
+  opacity: 0.6;
   margin-right: ${({ size, arrowStyle }) =>
     arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};
 
   ${Wrapper}:hover & {
-    margin-left: ${({ arrowStyle, disabled }) => {
+    opacity: 1;
+    left: ${({ size, disabled }) => {
       if (disabled) return 0
-      return arrowStyle === 'default' ? '-4px' : '-2px'
+      return `-${getArrowMaxWidth(size)}`
     }};
-    /* margin-left: ${({ size, arrowStyle, disabled }) => {
-      return arrowStyle === 'default'
-        ? `-${getMargin(size, !disabled)}`
-        : `-${getSimpleMargin(size, !disabled)}`
-    }}; */
-    fill: #327ca1;
   }
 `
 export const RightIcon = styled(Icon)<TIcon>`
+  position: absolute;
+  top: ${({ size }) => getArrowTopOffset(size)};
+  right: ${({ size }) => `-${getArrowInitWidth(size)}`};
+
+  opacity: 0.6;
   margin-left: ${({ size, arrowStyle }) =>
     arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};
 
   ${Wrapper}:hover & {
-    margin-left: ${({ size, arrowStyle, disabled }) => {
-      return arrowStyle === 'default'
-        ? getMargin(size, !disabled)
-        : getSimpleMargin(size, !disabled)
+    opacity: 1;
+    right: ${({ size, disabled }) => {
+      if (disabled) return 0
+      return `-${getArrowMaxWidth(size)}`
     }};
-    fill: #327ca1;
   }
 
   transform: rotate(180deg);

src/components/Buttons/styles/button.ts

@@ -26,11 +26,12 @@ export const Wrapper = styled.button<TButton>`
   border: 1px solid transparent;
   white-space: nowrap;
   padding: ${({ size }) => getPadding(size)};
-  font-size: 14px;
+  font-size: ${({ size }) => getFontSize(size)};
+  /* font-size: 14px; */
   border-radius: 4px;
   height: ${({ size }) => getHeight(size)};
   user-select: none;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
   position: relative;
 
   color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
@@ -39,7 +40,7 @@ export const Wrapper = styled.button<TButton>`
   border-color: ${({ noBorder, disabled }) =>
     getBorderColor(noBorder, disabled)};
 
-  opacity: ${({ noBorder }) => (noBorder ? '0.7' : 1)};
+  opacity: ${({ noBorder }) => (noBorder ? '0.8' : 1)};
 
   &:hover {
     color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
@@ -89,34 +90,27 @@ export const LoadingMask = styled.div<{ width: string }>`
   left: 0;
   background: ${({ width }) => (width === '100%' ? 'transparent' : '#2c6b94')};
   z-index: 1;
-  transition: width 0.3s;
+  transition: width 0.1s;
 `
 export const RedWrapper = styled(Wrapper)`
   color: ${({ ghost }) => (ghost ? theme('baseColor.red') : 'white')};
   background-color: ${({ ghost }) =>
     !ghost ? theme('baseColor.red') : 'transparent'};
-  border-color: ${theme('baseColor.red')};
+
+  border-color: ${({ noBorder }) =>
+    noBorder ? 'transparent' : theme('baseColor.red')};
 
   &:hover {
-    border: 2px solid;
     background-color: ${({ ghost }) =>
       !ghost ? lighten(0.1, 'tomato') : 'transparent'};
-    border-color: ${lighten(0.1, 'tomato')};
-    font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
   }
   &:focus {
-    border: 2px solid;
     background-color: ${({ ghost }) =>
       !ghost ? lighten(0.1, 'tomato') : 'transparent'};
-    border-color: ${lighten(0.1, 'tomato')};
-    font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
   }
   &:active {
-    border: 2px solid;
     background-color: ${({ ghost }) =>
       !ghost ? lighten(0.1, 'tomato') : 'transparent'};
-    border-color: ${lighten(0.1, 'tomato')};
-    font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
   }
-  transition: all 0.25s;
+  transition: all 0.1s;
 `

src/components/Buttons/styles/metircs/arrow_button.ts

@@ -17,25 +17,6 @@ const MEDIUM_MARGIN_HOVER = 10
 const LARGE_MARGIN = 6
 const LARGE_MARGIN_HOVER = 10
 
-// arrow button should have width
-// otherwise the arrow will jump
-export const getWidth = (size: string, width = 30): string => {
-  switch (size) {
-    case SIZE.TINY: {
-      return `${width + TINY_SIZE + TINY_MARGIN_HOVER}px`
-    }
-    case SIZE.SMALL: {
-      return `${width + SMALL_SIZE + SMALL_MARGIN_HOVER}px`
-    }
-    case SIZE.MEDIUM: {
-      return `${width + MEDIUM_SIZE + MEDIUM_MARGIN_HOVER}px`
-    }
-    default: {
-      return `${width + LARGE_SIZE + LARGE_MARGIN_HOVER}px`
-    }
-  }
-}
-
 export const getIconSize = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
@@ -103,3 +84,55 @@ export const getSimpleMargin = (size: string, hover = false): string => {
     }
   }
 }
+
+//
+export const getArrowTopOffset = (size: string): string => {
+  switch (size) {
+    case SIZE.TINY: {
+      return '3px;'
+    }
+    case SIZE.SMALL: {
+      return '4px;'
+    }
+    case SIZE.MEDIUM: {
+      return '5px;'
+    }
+    default: {
+      return '6px;'
+    }
+  }
+}
+
+export const getArrowMaxWidth = (size: string): string => {
+  switch (size) {
+    case SIZE.TINY: {
+      return '18px;'
+    }
+    case SIZE.SMALL: {
+      return '20px;'
+    }
+    case SIZE.MEDIUM: {
+      return '25px;'
+    }
+    default: {
+      return '28px;'
+    }
+  }
+}
+
+export const getArrowInitWidth = (size: string): string => {
+  switch (size) {
+    case SIZE.TINY: {
+      return '15px;'
+    }
+    case SIZE.SMALL: {
+      return '17px;'
+    }
+    case SIZE.MEDIUM: {
+      return '20px;'
+    }
+    default: {
+      return '23px;'
+    }
+  }
+}

src/components/Buttons/styles/metircs/button.ts

@@ -63,7 +63,7 @@ export const getHeight = (size: string): string => {
 export const getPadding = (size: string): string => {
   switch (size) {
     case SIZE.TINY: {
-      return '1px 5px'
+      return '0 4px'
     }
 
     case SIZE.SMALL: {

src/components/Checker/styles/index.ts

@@ -35,8 +35,8 @@ export const Icon = styled(Img)<TItem>`
   cursor: pointer;
 `
 export const ChildWrapper = styled.div<TItem>`
-  color: ${theme('thread.articleDigest')};
-  opacity: ${({ checked }) => (checked ? 1 : 0.9)};
+  color: ${({ checked }) =>
+    checked ? theme('thread.articleTitle') : theme('thread.articleDigest')};
   font-size: ${({ size }) => getFontSize(size)};
   margin-left: 6px;
   cursor: pointer;

src/components/Folder/Content.tsx

@@ -0,0 +1,31 @@
+import { FC, memo } from 'react'
+import TimeAgo from 'timeago-react'
+
+import { ICON } from '@/config'
+
+import { Wrapper, Info, Total, Unit, Text, LockIcon } from './styles/content'
+
+type TProps = {
+  total?: number
+  updatedAt?: string
+  lock?: boolean
+  inactive: boolean
+}
+
+const Content: FC<TProps> = ({ total, updatedAt, lock, inactive }) => {
+  return (
+    <Wrapper inactive={inactive}>
+      {lock && <LockIcon src={`${ICON}/shape/lock.svg`} />}
+      <Info>
+        <Total>
+          {total} <Unit>项</Unit>
+        </Total>
+        <Text>
+          <TimeAgo datetime={updatedAt} locale="zh_CN" />
+        </Text>
+      </Info>
+    </Wrapper>
+  )
+}
+
+export default memo(Content)