react-ui-basics 0.0.177 → 0.0.178

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ui-basics",
-  "version": "0.0.177",
+  "version": "0.0.178",
   "description": "",
   "module": "index.js",
   "_main": "index.cjs.js",

package/src/Tabs.css

@@ -0,0 +1,65 @@
+.Tabs {
+  display: block;
+  padding: 16px;
+  background: #fff;
+}
+.Tabs .visible {
+  position: relative;
+  opacity: 1;
+  height: auto;
+  transition: opacity 0.5s ease-out 0.25s;
+}
+.Tabs .hidden {
+  left: 0;
+  top: 0;
+  position: absolute;
+  opacity: 0;
+  transition: opacity 0.25s ease-out 0s, transform 1ms linear 0.25s;
+  transform: scale(0);
+}
+.Tabs .contents {
+  position: relative;
+}
+.Tabs .selector {
+  padding: 0;
+  margin: 0;
+  margin-bottom: 10px;
+  display: flex;
+  flex-flow: row nowrap;
+  position: relative;
+}
+.Tabs .selector .tab {
+  display: block;
+  height: 32px;
+  line-height: 32px;
+  padding: 0px 16px;
+  text-align: center;
+  background: #fff;
+  font-weight: bold;
+  text-decoration: none;
+  color: black;
+  font-size: 14px;
+  white-space: nowrap;
+}
+.Tabs .selector .tab.active {
+  color: #2196F3;
+}
+.Tabs .selector a:first-child {
+  border-top-left-radius: 2px;
+}
+.Tabs .selector a:last-of-type {
+  border-top-right-radius: 2px;
+}
+.Tabs .highlighter {
+  position: absolute;
+  z-index: 10;
+  bottom: 0;
+  height: 2px;
+  background: #2196F3;
+  width: 1px;
+  transform: translateX(0);
+  transform-origin: top left;
+  display: block;
+  left: 0;
+  transition: transform 0.23s ease-out;
+}

package/src/Tabs.scss

@@ -0,0 +1,77 @@
+@import "./global.scss";
+
+.Tabs {
+  $main-size: 16px;
+
+  display: block;
+  padding: $main-size;
+  background: #fff;
+
+  .visible {
+    position: relative;
+    opacity: 1;
+    height: auto;
+    transition: opacity .5s ease-out 0.25s;
+  }
+  .hidden {
+    left: 0;
+    top: 0;
+    position: absolute;
+    opacity: 0;
+    transition: opacity .25s ease-out 0s, transform 1ms linear 0.25s;
+    transform: scale(0);
+  }
+
+  .contents {
+    position: relative;
+  }
+
+  .selector {
+    padding: 0;
+    margin: 0;
+    margin-bottom: 10px;
+    display: flex;
+    flex-flow: row nowrap;
+    position: relative;
+
+    .tab {
+      display: block;
+      height: $main-size*2;
+      line-height: $main-size*2;
+      padding: 0px 16px;
+      text-align: center;
+      background: #fff;
+      font-weight: bold;
+      text-decoration: none;
+      color: black;
+      font-size: 14px;
+      white-space: nowrap;
+
+      &.active {
+        color: $colorBlue;
+      }
+    }
+
+    a:first-child {
+      border-top-left-radius: 2px;
+    }
+    a:last-of-type {
+      border-top-right-radius: 2px;
+    }
+  }
+
+  .highlighter {
+    position: absolute;
+    z-index: 10;
+    bottom: 0;
+    height: 2px;
+    background: $colorBlue;
+    width: 1px;
+    transform: translateX(0);
+    transform-origin: top left;
+    display: block;
+    left: 0;
+    transition: transform .23s ease-out;
+  }
+
+}

package/src/Tabs.tsx

@@ -0,0 +1,63 @@
+import React, {PureComponent} from "react";
+import "./Tabs.css";
+import {classNames} from "./Tools";
+
+export interface Tab {
+    label: string | JSX.Element
+    className?: string
+    renderer: (active: boolean) => JSX.Element
+}
+
+export interface TabsProps {
+    tabs: Tab[]
+}
+
+interface TabsState {
+    active: number,
+    highlighterPosition: number,
+    highlighterWidth: number,
+}
+
+class Tabs extends PureComponent<TabsProps, TabsState> {
+    private selector: HTMLDivElement;
+
+    render() {
+        const {tabs} = this.props;
+        const {active = 0, highlighterPosition = 0, highlighterWidth = 0} = this.state || {};
+        return (<div className="Tabs">
+                <div className="selector" ref={el => this.selector = el}>
+                    {tabs.map((tab, i) => <a key={i}
+                                             className={classNames(`tab `, i === active && 'active', tab.className)}
+                                             href="#"
+                                             onClick={this.openTab}>
+                        {tab.label}
+                    </a>)}
+                    <span className="highlighter" style={{transform: `translateX(${highlighterPosition}px) scale(${highlighterWidth},1)`}}/>
+                </div>
+                <div className="contents">
+                    {tabs.map((tab, i) => <div key={i} className={`content ${i === active ? 'visible' : 'hidden'}`}>{tab.renderer(i === active)}</div>)}
+                </div>
+            </div>
+        );
+    }
+
+    openTab = (e) => {
+        e.preventDefault();
+        let i = 0;
+        let child = e.target;
+        while ((child = child.previousSibling) != null) i++;
+
+        this.setState({active: i, highlighterPosition: e.target.offsetLeft, highlighterWidth: e.target.offsetWidth});
+    };
+
+    componentDidMount() {
+        const selected = this.selector.childNodes[0] as HTMLElement;
+        this.setState({active: 0, highlighterPosition: selected.offsetLeft, highlighterWidth: selected.offsetWidth});
+    }
+}
+
+export default Tabs;
+
+
+
+