[website] add tooltip cell example

Author: nihgwu

website/package.json

@@ -31,6 +31,7 @@
     "react-live-runner": "^0.7.3",
     "react-overlays": "^1.2.0",
     "react-sortable-hoc": "^1.9.1",
+    "react-texty": "^0.1.0",
     "rehype-react": "^3.1.0",
     "seamless-immutable": "^7.1.4",
     "slugify": "^1.3.4",

website/siteConfig.js

@@ -52,6 +52,10 @@ module.exports = {
       title: 'JSX Column',
       path: '/examples/jsx-column',
     },
+    {
+      title: 'Tooltip Cell',
+      path: '/examples/tooltip-cell',
+    },
     {
       title: 'Auto Resize',
       path: '/examples/auto-resize',
@@ -76,10 +80,6 @@ module.exports = {
       title: '10000 Rows',
       path: '/examples/10000-rows',
     },
-    {
-      title: 'Draggable Rows',
-      path: '/examples/draggable-rows',
-    },
     {
       title: 'Disabled',
       path: '/examples/disabled',
@@ -92,6 +92,10 @@ module.exports = {
       title: 'Hide Header',
       path: '/examples/hide-header',
     },
+    {
+      title: 'Draggable Rows',
+      path: '/examples/draggable-rows',
+    },
     {
       title: 'Multi Header',
       path: '/examples/multi-header',

website/src/components/Methods.js

@@ -8,7 +8,9 @@ const Method = styled.div`
   margin-bottom: 1.6rem;
 `
 
-const Name = styled.h4``
+const Name = styled.div`
+  font-weight: 600;
+`
 
 const Tag = styled.span`
   font-size: 0.8em;

website/src/components/Props.js

@@ -8,7 +8,9 @@ const Prop = styled.div`
   margin-bottom: 1.6rem;
 `
 
-const Name = styled.h4``
+const Name = styled.div`
+  font-weight: 600;
+`
 
 const Tag = styled.span`
   font-size: 0.8em;

website/src/examples/tooltip-cell.js

@@ -0,0 +1,23 @@
+// import Text from 'react-texty'
+const Text = ReactTexty
+
+const TableCell = ({ className, cellData }) => (
+  <Text className={className}>{cellData}</Text>
+)
+
+const TableHeaderCell = ({ className, column }) => (
+  <Text className={className}>{column.title}</Text>
+)
+
+const columns = generateColumns(10)
+const data = generateData(columns, 200)
+columns[3].title = 'No tooltip'
+columns[3].minWidth = 150
+
+export default () => (
+  <Table
+    columns={columns}
+    data={data}
+    components={{ TableCell, TableHeaderCell }}
+  />
+)

website/src/styles/index.css

@@ -1,4 +1,5 @@
 @import '~minireset.css';
+@import '~react-texty/styles.css';
 
 html {
   font-size: 62.5%;
@@ -84,3 +85,8 @@ pre {
   background-color: #f3f3f3;
   border-radius: 0.3em;
 }
+
+[data-texty-tooltip] {
+  font-size: 1.2rem;
+  padding: 0.2rem 0.8rem;
+}

website/src/utils/baseScope.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import styled, { css, keyframes, createGlobalStyle } from 'styled-components'
 import * as ReactSortableHoc from 'react-sortable-hoc'
 import * as ReactOverlays from 'react-overlays'
+import ReactTexty from 'react-texty'
 
 import BaseTable, {
   Column,
@@ -57,6 +58,7 @@ export default {
 
   ReactSortableHoc,
   ReactOverlays,
+  ReactTexty,
 
   BaseTable,
   Column,

website/yarn.lock

@@ -9111,7 +9111,7 @@ react-overlays@^1.2.0:
     uncontrollable "^6.0.0"
     warning "^4.0.2"
 
-react-popper@^1.3.2:
+react-popper@^1.3.2, react-popper@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"
   integrity sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==
@@ -9162,6 +9162,13 @@ react-sortable-hoc@^1.9.1:
     invariant "^2.2.4"
     prop-types "^15.5.7"
 
+react-texty@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/react-texty/-/react-texty-0.1.0.tgz#405a76f77705c84a1b154cb68e9e51bd5babe055"
+  integrity sha512-THyjCs5xnfATh50tpgIbqkKs1J5mYISAGGRpnII57so6XlnFdajonieAo1VcXNqEIFuvXF2LX++yGxfW+zqWew==
+  dependencies:
+    react-popper "^1.3.3"
+
 react@^16.8.4, react@^16.8.5:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"