Update Tabs.md

snippets/Tabs.md

@@ -1,69 +1,99 @@
 ### Tab
-Render a menu and a view, change the content in the view by clicking the button in the menu and the callback will execute before render 
+Renders a tabbed menu and view component.
 
-Define the `TabItem` as a middleware, pass it to the `Tab` and remove the useless nodes expect `TabItem` by identify the function's name in `props.children`, after that we will use the collected nodes to render the `tab-menu` and `tab-view` with map. Buttons in the `tab-menu` will execute `changeTab`
-when been clicked, `changeTab` will execute the callback funciton(`onTabClick`) and change `bindIndex` to emit `render`,every node in `tab-view` use `bindIndex` and the `index` which ws passing from `TabItem` to judege whether it show of not(`itemStyle`)
+Define `TabItem` as a middleware, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `props.children`.
+Use `Array.prototype.map` on the collected nodes to render the `tab-menu` and `tab-view`. 
+Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.
+`changeTab` executes the passed callback, `onTabClick` and updates `state.bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.
 
+```css
+.tab-menu > button {
+  cursor: pointer;
+  padding: 8px 16px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+}
+.tab-menu > button.focus {
+  border-bottom: 2px solid #007BEF;
+}
+.tab-menu > button:hover {
+  border-bottom: 2px solid #007BEF;
+}
+```
 
 ```jsx
-class Tab extends React.Component{
-  constructor(props){
-    super(props)
-    this.changeTab(props.defaultIndex)
+class Tab extends React.Component {
+  constructor(props) {
+    super(props);
     this.state = {
-      bindIndex:''
-    }
+      bindIndex: props.defaultIndex
+    };
   }
-
-  changeTab(newIndex){
-    if(typeof this.props.onTabClick === 'function'){
-        this.props.onTabClick(newIndex)
-    }
+  changeTab(newIndex) {
+    if (typeof this.props.onTabClick === "function")
+      this.props.onTabClick(newIndex);
     this.setState({
       bindIndex: newIndex
-    })
+    });
   }
-
-  itemStyle(index){
+  buttonClass(index) {
+    return this.state.bindIndex === index ? "focus" : "";
+  }
+  itemStyle(index) {
     return {
-      display:this.state.bindIndex === index?'block':'none'
-    }
+      display: this.state.bindIndex === index ? "block" : "none"
+    };
   }
-
-  render(){
-    const items = this.props.children
-                      .filter(item=>item.type.name==='TabItem')
+  render() {
+    const items = this.props.children.filter(
+      item => item.type.name === "TabItem"
+    );
     return (
-      <div className='wrapper'>
-        <div className='tab-menu'>
-          {items.map(({props:{index, label}})=><button onClick={()=>this.changeTab(index)}>{label}</button>)}
+      <div className="wrapper">
+        <div className="tab-menu">
+          {items.map(({ props: { index, label } }) => (
+            <button
+              onClick={() => this.changeTab(index)}
+              className={this.buttonClass(index)}
+            >
+              {label}
+            </button>
+          ))}
         </div>
-        <div className='tab-view'>
-          {items.map(({props})=>(
-                     <div {...props}
-                       className='tab-view_item' 
-                       key={props.index} 
-                       style={this.itemStyle(props.index)}/>))}
+        <div className="tab-view">
+          {items.map(({ props }) => (
+            <div
+              {...props}
+              className="tab-view_item"
+              key={props.index}
+              style={this.itemStyle(props.index)}
+            />
+          ))}
         </div>
       </div>
-    )
+    );
   }
 }
-
-function TabItem(props){
-  return <div {...props}></div>
+function TabItem(props) {
+  return <div {...props} />;
 }
 ```
 ```jsx
 ReactDOM.render(
-  <Tab defaultIndex='1' onTabClick={console.log}>
-    <TabItem label='item1' index='1'>item1</TabItem>
-    <TabItem label='item2' index='2'>item2</TabItem>
+  <Tab defaultIndex="1" onTabClick={console.log}>
+    <TabItem label="A" index="1">
+      Lorem ipsum
+    </TabItem>
+    <TabItem label="B" index="2">
+      Dolor sit amet
+    </TabItem>
   </Tab>,
-  document.getElementById('root')
+  document.getElementById("root")
 );
+
 ```
 
 <!-- tags: visual,children,class -->
 
-<!-- expertise: 1 -->
+<!-- expertise: 1 -->