updated tabs

erxes · Aug 3, 2021 · e44bc71 · e44bc71
1 parent 4744736
commit e44bc71
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 43 deletions.
diff --git a/src/components/tabs/index.tsx b/src/components/tabs/index.tsx
@@ -1,26 +1,67 @@
 import React from 'react';
-import { TabCaption, TabContainer } from './styles';
+import { TabCaption, TabContainer, Slider, Listener } from './styles';
 
-function Tabs(props: {
-  children: React.ReactNode;
+type Props = {
+  children: any;
+  tabNumber?: number;
   grayBorder?: boolean;
   full?: boolean;
   vertical?: boolean;
-}) {
-  return <TabContainer {...props} />;
+  backgroundFull?: boolean;
+  color?: string;
+  textColor?: string;
+};
+
+type State = {
+  linePosition: number
 }
 
 type TabTitleProps = {
   children: React.ReactNode;
   onClick?: () => void;
   className?: string;
-  backgroundColor?: string;
-  textColor?: string;
-  type?: 'underlined' | 'underlined-vertical';
 };
 
-function TabTitle(props: TabTitleProps) {
-  return <TabCaption {...props} />;
+const TabTitle: React.FC<TabTitleProps> = (props) => {
+  return (
+    <TabCaption {...props} />
+  )
+}
+
+class Tabs extends React.Component<Props, State> {
+  static TabTitle = TabCaption;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      linePosition: 0
+    }
+  }
+
+  onClick = (index: number) => {
+    this.setState({ linePosition: index })
+  }
+
+  render() {
+    const { children, grayBorder, full, vertical, backgroundFull, color, textColor } = this.props;
+
+    const newChildren = children.map((child: any, index: number) => {
+      return <Listener onClick={() => this.onClick(index)} textColor={textColor}>{child}</Listener>
+    })
+
+    return (
+      <TabContainer grayBorder={grayBorder} full={full} vertical={vertical}>
+        {newChildren}
+        <Slider
+          vertical={vertical}
+          sizes={`${100 / children.length}%`}
+          position={this.state.linePosition}
+          backgroundFull={backgroundFull}
+          color={color} />
+      </TabContainer>
+    )
+  }
 }
 
 export { Tabs, TabTitle };
diff --git a/src/components/tabs/styles.ts b/src/components/tabs/styles.ts
@@ -17,49 +17,55 @@ const TabContainer = styledTS<{ grayBorder?: boolean; full?: boolean, vertical?:
   height: ${props => props.vertical ? 'auto' : `${dimensions.headerSpacing}px`};
 `;
 
-const TabCaption = styledTS<{ type?: 'underlined' | 'underlined-vertical', backgroundColor?: string, textColor?: string }>(styled.span)`
+const TabCaption = styled.span`
   cursor: pointer;
   display: inline-block;
-  color: ${colors.textSecondary};
-  font-weight: ${typography.fontWeightRegular};
   padding: 15px ${dimensions.coreSpacing}px;
   position: relative;
-  transition: all ease 0.3s;
-  background-color: ${props => props.backgroundColor}
-
-  &:hover {
-    color: ${colors.textPrimary};
-  }
 
   i {
     margin-right: 3px;
   }
+`;
 
-  &.active {
-    color: ${props => props.textColor ? props.textColor : colors.textPrimary};
-    font-weight: 500;
-
-    &:before {
-      ${props => (props.type === 'underlined' || props.type === undefined) && `
-      border-bottom: 3px solid ${colors.colorSecondary};
-      content: '';
+const Slider = styledTS<{ sizes?: string, position?: number, vertical?: boolean, backgroundFull?: boolean, color?: string }>(styled.div)`
+  ${props => props.vertical ? `
+    height: ${props.sizes};
+    right: -1px;
+    top: 0px;
+    transform: translateY(${props.position && 100 * props.position}%);
+    ${props.backgroundFull ? `
+      background: ${props.color ? props.color : colors.colorSecondary};
       width: 100%;
-      position: absolute;
-      z-index: 1;
-      left: 0;
-      bottom: -1px;
-      `}
-      ${props => props.type === 'underlined-vertical' && `
-      border-right: 3px solid ${colors.colorSecondary};
-      content: '';
+    ` : `
+      border-right: 3px solid ${props.color ? props.color : colors.colorSecondary};
+    `}
+  ` : `
+    width: ${props.sizes};
+    left: 0;
+    bottom: -1px;
+    transform: translateX(${props.position && 100 * props.position}%);
+    ${props.backgroundFull ? `
+      background: ${props.color ? props.color : colors.colorSecondary};
       height: 100%;
-      position: absolute;
-      z-index: 1;
-      right: -1px;
-      top: 0px;
-      `}
-    }
+    ` : `
+      border-bottom: 3px solid ${props.color ? props.color : colors.colorSecondary};
+    `}
+  `}
+  transition: 0.25s ease;
+  position: absolute;
+  content: '';
+  z-index: -1;
+`
+
+const Listener = styledTS<{ textColor?: string }>(styled.div)`
+  width: fit-content;
+  color: ${props => props.textColor ? props.textColor : colors.textSecondary};
+  font-weight: ${typography.fontWeightRegular};
+  &:hover {
+    font-weight: 500;
+    color: ${props => props.textColor ? props.textColor : colors.textPrimary};
   }
-`;
+`
 
-export { TabContainer, TabCaption };
+export { TabContainer, TabCaption, Slider, Listener };