Minor changes

react-toolbox · Nov 4, 2015 · 02c6024 · 02c6024
1 parent 1712fc9
commit 02c6024
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 16 deletions.
diff --git a/components/table/readme.md b/components/table/readme.md
@@ -40,10 +40,11 @@ const TableTest = () => (
 | `model`         | `Object`      |                 | If true, component will be disabled.|
 | `heading`       | `Bool`        | `true`          | If true, component will show a heading using model field names.|
 | `onChange`      | `Function`    |                 | Callback function that is fired when the components's value changes.|
-| `onSelect`      | `Function`    |                 | Callback function when  clicks in a determinate row.|
+| `onSelect`      | `Function`    |                 | Callback function when  selects a determinate row.|
 
 ## Methods
 
 This component has state to control how is it rendered and the values currently selected. It exposes the following instance methods:
 
 - `getValue` is used to retrieve the current dataSource.
+- `getSelected` is used to retrieve the current rows selected.
diff --git a/docs/app/components/layout/main/modules/examples/table_example_1.txt b/docs/app/components/layout/main/modules/examples/table_example_1.txt
@@ -18,8 +18,12 @@ const users = [
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
 ];
 
+const handleSelect = (event, row, instance) => {
+  alert(row.twitter);
+};
+
 const TableTest = () => (
-  <Table model={UserModel} dataSource={users} />
+  <Table model={UserModel} dataSource={users} onSelect={handleSelect} />
 )
 
 return <TableTest />
diff --git a/spec/components/table.jsx b/spec/components/table.jsx
@@ -12,13 +12,15 @@ const UserModel = {
 ,
   dogs: {type: Number}
 ,
-  active: {type: Boolean}
+  owner: {type: Boolean}
 };
 
 const users = [
   {name: 'Javi Jimenez', twitter: '@soyjavi', birthdate: new Date(1980, 3, 11), cats: 1}
 ,
   {name: 'Javi Velasco', twitter: '@javivelasco', birthdate: new Date(1987, 1, 1), dogs: 1, active: true}
+,
+  {name: 'chinorro'}
 ];
 
 class TableTest extends React.Component {
@@ -27,8 +29,8 @@ class TableTest extends React.Component {
     console.log('handleTableChange', instance.getValue(), row);
   };
 
-  handleTableRowSelect = (event, row) => {
-    console.log('handleTableRowSelect', row);
+  handleTableRowSelect = (event, row, instance) => {
+    console.log('handleTableRowSelect', row, this.refs.table.getSelected());
   };
 
   render () {
@@ -37,6 +39,7 @@ class TableTest extends React.Component {
         <h5>Table</h5>
         <p style={{marginBottom: '10px'}}>Organized data.</p>
         <Table
+          ref='table'
           model={UserModel}
           dataSource={users}
           onChange={this.handleTableChange}

diff --git a/spec/root.jsx b/spec/root.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
+
 import App from '../components/app';
-import AppBar from '../components/app_bar';
+import AppBarToolbox from '../components/app_bar';
+import ButtonToolbox from '../components/button';
+
 import Autocomplete from './components/autocomplete';
 import Button from './components/button';
 import Card from './components/card';
@@ -24,12 +27,22 @@ import Tabs from './components/tabs';
 // import Logo from '../docs/app/components/logo'
 import style from './style';
 
+const _hrefProject = () => {
+  window.href = 'http://react-toolbox';
+};
+
 const Root = () => (
   <App className={style.app}>
-    <AppBar fixed flat className={style.app_bar}>
-      <h1>React Toolbox <small>Component Spec</small></h1>
-      <small>v0.11.2</small>
-    </AppBar>
+    <AppBarToolbox fixed flat className={style.app_bar}>
+      <h1>React Toolbox <small>Spec 0.11.2</small></h1>
+      <ButtonToolbox
+        accent
+        className={style.github}
+        icon='web'
+        kind='floating'
+        onClick={_hrefProject}
+      />
+    </AppBarToolbox>
 
     <Autocomplete />
     <Button />

diff --git a/spec/style.scss b/spec/style.scss
@@ -1,5 +1,9 @@
-$unit: 1rem;
+@import "../components/base";
+@import "../components/app_bar/config";
+@import "../components/button/config";
+
 $offset: 1.8 * $unit;
+
 .app {
   padding: (8.2 * $unit) $offset $offset $offset;
   background-color: #f5f5f5;
@@ -25,6 +29,13 @@ $offset: 1.8 * $unit;
   }
 }
 
+.github {
+  position: fixed;
+  top: $appbar-height - ($button-floating-height / 2);
+  right: $button-floating-height / 2;
+  z-index: $z-index-higher;
+}
+
 .app_bar {
   display: flex;
   > h1 {
@@ -36,11 +47,6 @@ $offset: 1.8 * $unit;
       font-weight: normal;
     }
   }
-  > small {
-    padding: (.5 * $unit) (.8 * $unit);
-    font-size: 1.2 * $unit;
-    background-color: rgba(0,0,0, .25);
-  }
 }
 
 .logo {