daily pastebin goal
91%
SHARE
TWEET

Untitled

a guest Sep 12th, 2018 61 Never
Upgrade to PRO!
ENDING IN00days00hours00mins00secs
  1. import * as React from "react";
  2. import * as ReactDOM from "react-dom";
  3. import { PropertyControls, ControlType } from "framer";
  4. import { fontStyles } from "../data/style/_fontStyles";
  5. import styled from "styled-components";
  6.  
  7. // Define type of property
  8. interface Props {
  9.     amount: number;
  10.     lineWidth: number;
  11.     lineLeft: number;
  12.     items: any;
  13. }
  14.  
  15. interface States {
  16.     lineProps: any;
  17. }
  18.  
  19. // Define Styled components
  20. const TabGroup = styled<Props, any>("div")`
  21.     display: flex;
  22.     width: 100%;
  23.     height: 100%;
  24.     justify-content: space-between;
  25.     padding: 0 16px;
  26.     background: white;
  27. `;
  28.  
  29. const TabItem = styled<Props, any>("div")`
  30.     display: flex;
  31.     flex: 1 1 auto;
  32.     justify-content: center;
  33.     height: 100%;
  34. `;
  35.  
  36. const TabText = styled<Props, any>("span")`
  37.     ${fontStyles["Small Bold"]};
  38.     margin-top: 3px;
  39.     text-align: center;
  40.     letter-spacing: 0.11em;
  41.     text-transform: uppercase;
  42.     pointer-events: none;
  43. `;
  44.  
  45. const TabLine = styled<Props, any>("div")`
  46.     position: absolute;
  47.     bottom: 0;
  48.     left: ${props => props.lineLeft}px;
  49.     width: ${props => props.lineWidth}px;
  50.     height: 4px;
  51.     background: black;
  52.     transition: all 0.25s cubic-bezier(0.595, 0, 0.435, 1);
  53. `;
  54.  
  55. export class Tabs extends React.Component<Partial<Props>, States> {
  56.     // Set default properties
  57.     static defaultProps = {
  58.         width: 375,
  59.         height: 32,
  60.         amount: 3,
  61.         item1: "Women",
  62.         item2: "Men",
  63.         item3: "Kids",
  64.         item4: "Item #4",
  65.         item5: "Item #5"
  66.     };
  67.  
  68.     // Items shown in property panel
  69.     static propertyControls: PropertyControls = {
  70.         amount: { type: ControlType.Number, min: 2, max: 5, title: "Amount" },
  71.         item1: { type: ControlType.String, title: "Item #1" },
  72.         item2: {
  73.             type: ControlType.String,
  74.             title: "Item #2",
  75.             hidden(props) {
  76.                 if (props.amount >= 2) {
  77.                     return false;
  78.                 } else {
  79.                     return true;
  80.                 }
  81.             }
  82.         },
  83.         item3: {
  84.             type: ControlType.String,
  85.             title: "Item #3",
  86.             hidden(props) {
  87.                 if (props.amount >= 3) {
  88.                     return false;
  89.                 } else {
  90.                     return true;
  91.                 }
  92.             }
  93.         },
  94.         item4: {
  95.             type: ControlType.String,
  96.             title: "Item #4",
  97.             hidden(props) {
  98.                 if (props.amount >= 4) {
  99.                     return false;
  100.                 } else {
  101.                     return true;
  102.                 }
  103.             }
  104.         },
  105.         item5: {
  106.             type: ControlType.String,
  107.             title: "Item #5",
  108.             hidden(props) {
  109.                 if (props.amount >= 5) {
  110.                     return false;
  111.                 } else {
  112.                     return true;
  113.                 }
  114.             }
  115.         }
  116.     };
  117.  
  118.     state = {
  119.         lineProps: {
  120.             width: 50,
  121.             left: 54
  122.         }
  123.     };
  124.  
  125.     private tabGroupRef = React.createRef<any>();
  126.     private itemsArray = [];
  127.     private currentItem = 1;
  128.  
  129.     getLineProps = i => {
  130.         let width = ReactDOM.findDOMNode(this.tabGroupRef.current).children[i]
  131.             .children[0].clientWidth;
  132.         let left = ReactDOM.findDOMNode(this.tabGroupRef.current).children[i]
  133.             .children[0].offsetLeft;
  134.         return {
  135.             width: width,
  136.             left: left
  137.         };
  138.     };
  139.  
  140.     updateCurrentTab = e => {
  141.         this.setState({
  142.             lineProps: {
  143.                 width: e.target.children[0].clientWidth,
  144.                 left: e.target.children[0].offsetLeft
  145.             }
  146.         });
  147.     };
  148.  
  149.     componentWillReceiveProps(props: Props) {
  150.         this.itemsArray.length = 0;
  151.         for (let i = 0; i < props.amount; i++) {
  152.             this.itemsArray.push(props[`item${i + 1}`]);
  153.         }
  154.     }
  155.  
  156.     componentWillMount() {
  157.         for (let i = 0; i < this.props.amount; i++) {
  158.             this.itemsArray.push(this.props[`item${i + 1}`]);
  159.         }
  160.     }
  161.  
  162.     componentDidUpdate(prevProps, prevState) {
  163.         if (prevState.lineProps !== this.state.lineProps) {
  164.             return false;
  165.         } else {
  166.             this.setState({
  167.                 lineProps: this.getLineProps(this.currentItem)
  168.             });
  169.         }
  170.     }
  171.  
  172.     componentDidMount() {
  173.         this.setState({
  174.             lineProps: this.getLineProps(this.currentItem)
  175.         });
  176.     }
  177.  
  178.     render() {
  179.         const itemsAmount = this.itemsArray.map((item, index) => (
  180.             <TabItem
  181.                 key={`item-${index}`}
  182.                 onClick={e => {
  183.                     this.updateCurrentTab(e);
  184.                 }}
  185.             >
  186.                 <TabText>{this.itemsArray[index]}</TabText>
  187.             </TabItem>
  188.         ));
  189.         return (
  190.             <TabGroup ref={this.tabGroupRef}>
  191.                 <TabLine
  192.                     lineWidth={this.state.lineProps.width}
  193.                     lineLeft={this.state.lineProps.left}
  194.                 />
  195.                 {itemsAmount}
  196.             </TabGroup>
  197.         );
  198.     }
  199. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top