From 55da74c2507a98228ffc010f27eb9e310c8fbd11 Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Fri, 31 Jul 2015 00:47:37 -0400 Subject: [PATCH 01/10] Style guide --- src/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 091f006..6455e7e 100644 --- a/src/index.js +++ b/src/index.js @@ -62,12 +62,12 @@ export default class PopoverControl extends React.Component { return (
-
{this.props.children}
{this.state.isPopped ? - {map(actions, (action, i) => - {action.title} @@ -158,4 +158,4 @@ class PopoverList extends React.Component {
) } -} \ No newline at end of file +} From 1c316ae8fb04b5f0aece4321ab33e61cc96ae74d Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Fri, 31 Jul 2015 02:22:14 -0400 Subject: [PATCH 02/10] Migrate to jss --- css/ReactPopoverControl.scss | 21 ------------------- package.json | 8 +++++++- site/package.json | 6 ++++-- site/src/js/index.js | 4 +++- site/src/js/pages/HomePage.js | 6 +++--- site/webpack.config.js | 16 ++++++++++++--- src/index.js | 38 ++++++++++++++++++++++++++++++++--- src/useSheet.js | 17 ++++++++++++++++ 8 files changed, 82 insertions(+), 34 deletions(-) delete mode 100644 css/ReactPopoverControl.scss create mode 100644 src/useSheet.js diff --git a/css/ReactPopoverControl.scss b/css/ReactPopoverControl.scss deleted file mode 100644 index a5a7a04..0000000 --- a/css/ReactPopoverControl.scss +++ /dev/null @@ -1,21 +0,0 @@ -.ReactPopoverList { - background-color: white; - min-width: 150px; - overflow: hidden; - box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25); - border-radius: 5px; - - a { - display: block; - height: 40px; - line-height: 40px; - padding: 0 10px; - color: #1A2D36; - - &:hover { - text-decoration: none; - color: #1A2D36; - background-color: #e1f0f7; - } - } -} \ No newline at end of file diff --git a/package.json b/package.json index 028d57c..7e521db 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,14 @@ ], "main": "lib/index.js", "dependencies": { + "jss": "^2.1.2", + "jss-camel-case": "^0.1.2", + "jss-nested": "^0.1.8", + "jss-px": "^0.1.3", + "jss-vendor-prefixer": "^0.2.2", "keycode": "^2.1.0", - "lodash": "^3.8.0" + "lodash": "^3.8.0", + "react-jss": "^1.0.4" }, "peerDependencies": { "react": "^0.13.2", diff --git a/site/package.json b/site/package.json index 8bd0360..463b4a9 100644 --- a/site/package.json +++ b/site/package.json @@ -2,13 +2,15 @@ "description": "A simple, idiomatic popover control for React", "scripts": { "start": "NODE_ENV=development webpack-dev-server --progress", + "build-dev": "NODE_ENV=development webpack --progress", "build-prod": "NODE_ENV=production webpack -p --progress" }, "dependencies": { "active-event-stack": "^1.0.0", "react": "^0.13.3", - "react-popover-control": "^0.1.0", - "react-router": "^0.13.3" + "react-popover-control": "^0.1.1", + "react-router": "^0.13.3", + "source-map-support": "^0.3.2" }, "devDependencies": { "autoprefixer-core": "^5.2.1", diff --git a/site/src/js/index.js b/site/src/js/index.js index c0bb26a..1233270 100644 --- a/site/src/js/index.js +++ b/site/src/js/index.js @@ -5,6 +5,8 @@ import routes from './routes'; require('../css/reset.scss'); export default function(path, props, done) { + console.log(typeof global); + Router.run(routes, path, Handler => { done( '' + @@ -17,4 +19,4 @@ if (typeof document != 'undefined') { Router.run(routes, Router.HashLocation, Handler => { React.render(, document); }); -} \ No newline at end of file +} diff --git a/site/src/js/pages/HomePage.js b/site/src/js/pages/HomePage.js index 0f34d7d..ac86fb5 100644 --- a/site/src/js/pages/HomePage.js +++ b/site/src/js/pages/HomePage.js @@ -6,7 +6,7 @@ import marked from 'marked'; import customMarkedRenderer from '../customMarkedRenderer'; import Popover from 'react-popover-control'; -require('react-popover-control/css/ReactPopoverControl.scss'); + require('../../css/HomePage.scss') const HomePageMarkdown = require('../markdown/HomePage.md'); @@ -30,7 +30,7 @@ export default class HomePage extends React.Component { render() { return (
- @@ -57,4 +57,4 @@ export default class HomePage extends React.Component {
) } -} \ No newline at end of file +} diff --git a/site/webpack.config.js b/site/webpack.config.js index fd3ea92..97a31d8 100644 --- a/site/webpack.config.js +++ b/site/webpack.config.js @@ -1,3 +1,5 @@ +var path = require('path'); + var ExtractTextPlugin = require('extract-text-webpack-plugin'); var StaticRenderWebpackPlugin = require('static-render-webpack-plugin'); var webpack = require('webpack'); @@ -27,15 +29,23 @@ module.exports = { {test: /\.md$/, loader: 'raw'} ] }, + resolveLoader: { + alias: { + babel: __dirname + '/node_modules/babel-loader' + } + }, resolve: { alias: { + 'react-popover-control$': path.join(__dirname, '../src/index.js'), react: __dirname + '/node_modules/react' } }, devServer: { - port: 9000 + port: 9000, + contentBase: './build' }, - devtool: IS_DEV ? 'cheap-module-source-map' : undefined, + devtool: 'sourcemap', + // devtool: IS_DEV ? 'cheap-module-source-map' : undefined, postcss: function() { return [autoprefixer]; }, @@ -44,4 +54,4 @@ module.exports = { new ExtractTextPlugin('style.css'), new StaticRenderWebpackPlugin('bundle.js', routes) ] -} \ No newline at end of file +} diff --git a/src/index.js b/src/index.js index 6455e7e..323f71a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,13 @@ import React, {PropTypes} from 'react'; import {debounce, map} from 'lodash'; import keycode from 'keycode'; import EventStack from 'active-event-stack'; +let useSheet; + +if (typeof window === 'undefined') { + useSheet = x => x => x; +} else { + useSheet = require('./useSheet'); +} const PopoverActionsType = PropTypes.arrayOf(PropTypes.shape({ title: PropTypes.string.isRequired, @@ -78,6 +85,29 @@ export default class PopoverControl extends React.Component { } } +const PopoverListStyles = { + base: { + backgroudColor: 'white', + minWidth: 150, + overflow: 'hidden', + boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.25)', + borderRadius: 5 + }, + item: { + display: 'block', + height: 40, + lineHeight: 40, + padding: '0 10px', + color: '#1A2D36', + '&:hover': { + textDecoration: 'none', + color: '#1A2D36', + backgroundColor: '#e1f0f7', + } + } +}; + +@useSheet(PopoverListStyles) class PopoverList extends React.Component { static propTypes = { actions: PopoverActionsType.isRequired, @@ -119,6 +149,7 @@ class PopoverList extends React.Component { this.props.delegate.shouldHidePopover(); } render() { + const {props: {sheet: {classes}}} = this; const {windowMargin, launcherMargin, parentFrame, actions} = this.props; const {width, height} = this.state; @@ -148,14 +179,15 @@ class PopoverList extends React.Component { }; return ( -
+
{map(actions, (action, i) => + onClick={this.onActionClick.bind(null, action)} + className={classes.item}> {action.title} )}
) } -} +}; diff --git a/src/useSheet.js b/src/useSheet.js new file mode 100644 index 0000000..6364583 --- /dev/null +++ b/src/useSheet.js @@ -0,0 +1,17 @@ +import {Jss} from 'jss'; +import reactJss from 'react-jss'; +import jssPx from 'jss-px'; +import jssCamelCase from 'jss-camel-case'; +import jssNested from 'jss-nested'; + +const jss = new Jss(); + +if (typeof window !== 'undefined') { + const vendorPrefixer = require('jss-vendor-prefixer'); + jss.use(vendorPrefixer); +} +jss.use(jssPx); +jss.use(jssCamelCase); +jss.use(jssNested); + +export default reactJss(jss); From af2a625f8268ff86e7e6a49249d8db7a994acb8a Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Fri, 31 Jul 2015 02:26:16 -0400 Subject: [PATCH 03/10] Update README --- README.md | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 8b57a85..3eafb76 100644 --- a/README.md +++ b/README.md @@ -13,17 +13,17 @@ npm install react-popover-control ```javascript import Popover from 'react-popover-control'; -actions = [ +const actions = [ { title: 'Edit', - func: () => { - ... + func() { + // some action here } }, { title: 'Delete', - func: () => { - ... + func() { + // some action here } } ]; @@ -31,23 +31,21 @@ actions = [ class Page extends React.Component { render() { return ( - - Click Here - +
+ Some component... + + + Click Here + +
) } -} +}; ``` ## Styling -Default styles are included in `css/ReactPopoverControl.scss`. - -If you are using webpack with sass-loader, you can load the style in like this: - -```javascript -require('react-popover-control/css/ReactPopoverControl.scss') -``` +Default styles are included as jss, but you can opt out by... (TODO) ## A good popover... @@ -61,4 +59,4 @@ require('react-popover-control/css/ReactPopoverControl.scss') - Arrow key control - Scrolling when there are too many items - Using keyboard letters as shortcuts to certain fields -- Filtering items with an input field \ No newline at end of file +- Filtering items with an input field From 47ded1a80f6e8fba34fba9a54653fb1dff3c20f3 Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Fri, 31 Jul 2015 02:30:51 -0400 Subject: [PATCH 04/10] Render using className/jss so that you can override the position relative --- package.json | 1 + src/index.js | 26 ++++++++++++++++---------- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 7e521db..aac341e 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ ], "main": "lib/index.js", "dependencies": { + "classnames": "^2.1.3", "jss": "^2.1.2", "jss-camel-case": "^0.1.2", "jss-nested": "^0.1.8", diff --git a/src/index.js b/src/index.js index 323f71a..5b25bef 100644 --- a/src/index.js +++ b/src/index.js @@ -2,8 +2,9 @@ import React, {PropTypes} from 'react'; import {debounce, map} from 'lodash'; import keycode from 'keycode'; import EventStack from 'active-event-stack'; -let useSheet; +import classNames from 'classnames'; +let useSheet; if (typeof window === 'undefined') { useSheet = x => x => x; } else { @@ -15,10 +16,18 @@ const PopoverActionsType = PropTypes.arrayOf(PropTypes.shape({ func: PropTypes.func })); +const PopoverControlStyles = { + base: { + position: 'relative' + } +}; + +@useSheet(PopoverControlStyles) export default class PopoverControl extends React.Component { static propTypes = { actions: PopoverActionsType.isRequired, - className: PropTypes.string + className: PropTypes.string, + sheet: PropTypes.object } state = { isPopped: false @@ -60,17 +69,14 @@ export default class PopoverControl extends React.Component { window.removeEventListener('resize', this._debouncedScroll); } render = () => { + const {props: {sheet: {classes}}} = this; const {top, left, width, height} = this.state; - - let popoverControlStyle = { - position: 'relative' - } + const className = classNames(this.props.className, classes.base) return ( -
-
+
+
{this.props.children}
{this.state.isPopped ? From 4c52d54ea50cc6fb02f4590076941e35983b45d7 Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Sat, 8 Aug 2015 17:14:59 -0400 Subject: [PATCH 05/10] Fix zIndex issues --- src/index.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/index.js b/src/index.js index 5b25bef..2da8998 100644 --- a/src/index.js +++ b/src/index.js @@ -16,13 +16,6 @@ const PopoverActionsType = PropTypes.arrayOf(PropTypes.shape({ func: PropTypes.func })); -const PopoverControlStyles = { - base: { - position: 'relative' - } -}; - -@useSheet(PopoverControlStyles) export default class PopoverControl extends React.Component { static propTypes = { actions: PopoverActionsType.isRequired, @@ -61,11 +54,11 @@ export default class PopoverControl extends React.Component { } }, 100); - document.addEventListener('scroll', this._debouncedScroll, true); + document.addEventListener('scroll', this._debouncedScroll); window.addEventListener('resize', this._debouncedScroll); } componentWillUnmount = () => { - document.removeEventListener('scroll', this._debouncedScroll, true); + document.removeEventListener('scroll', this._debouncedScroll); window.removeEventListener('resize', this._debouncedScroll); } render = () => { @@ -89,11 +82,11 @@ export default class PopoverControl extends React.Component {
) } -} +}; const PopoverListStyles = { base: { - backgroudColor: 'white', + backgroundColor: 'white', minWidth: 150, overflow: 'hidden', boxShadow: '0px 1px 4px rgba(0, 0, 0, 0.25)', @@ -122,13 +115,19 @@ class PopoverList extends React.Component { getPopoverReferenceFrame: PropTypes.func.isRequired }).isRequired, windowMargin: PropTypes.number.isRequired, - launcherMargin: PropTypes.number.isRequired + launcherMargin: PropTypes.number.isRequired, + zIndex: PropTypes.number.isRequired } static defaultProps = { + zIndex: 10, windowMargin: 20, launcherMargin: 10 } state = { + top: null, + left: null, + width: null, + height: null, offsetX: 0, isFlipped: false, // usually bottom facing, but if true, then the popover should appear above } @@ -139,8 +138,8 @@ class PopoverList extends React.Component { ]); // Once the element is in the dom, we can measure its height - const {width, height} = React.findDOMNode(this).getBoundingClientRect(); - this.setState({width, height}); + const {top, left, width, height} = React.findDOMNode(this).getBoundingClientRect(); + this.setState({top, left, width, height}); } componentWillUnmount() { EventStack.removeListenable(this.eventToken); @@ -181,7 +180,8 @@ class PopoverList extends React.Component { position: 'absolute', top: 0, left: 0, - transform: `translate(${offsetX}px, ${offsetY}px)` + transform: `translate(${offsetX}px, ${offsetY}px)`, + zIndex: this.props.zInex }; return ( From abc8c5a1f5d983819345095f908f51759a1a1dd0 Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Sat, 8 Aug 2015 17:15:03 -0400 Subject: [PATCH 06/10] 0.1.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aac341e..6f706a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-popover-control", - "version": "0.1.1", + "version": "0.1.2", "description": "A popover control for React", "repository": { "type": "git", From be04cae940ef5fd3480f46692c4f4e4881d7de84 Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Sat, 8 Aug 2015 17:20:30 -0400 Subject: [PATCH 07/10] Fix classes bug --- src/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 2da8998..5a7c823 100644 --- a/src/index.js +++ b/src/index.js @@ -62,13 +62,10 @@ export default class PopoverControl extends React.Component { window.removeEventListener('resize', this._debouncedScroll); } render = () => { - const {props: {sheet: {classes}}} = this; const {top, left, width, height} = this.state; - const className = classNames(this.props.className, classes.base) return ( -
+
{this.props.children}
From 58c1ef48877c8ebe9028aace715b86f972f609c9 Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Sat, 8 Aug 2015 17:20:36 -0400 Subject: [PATCH 08/10] 0.1.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6f706a5..110b891 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-popover-control", - "version": "0.1.2", + "version": "0.1.3", "description": "A popover control for React", "repository": { "type": "git", From 377cb51bce14e749b9ae7f4f36f6cd5a9ad89be0 Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Sat, 8 Aug 2015 17:26:05 -0400 Subject: [PATCH 09/10] Fix typo --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 5a7c823..e22008d 100644 --- a/src/index.js +++ b/src/index.js @@ -178,7 +178,7 @@ class PopoverList extends React.Component { top: 0, left: 0, transform: `translate(${offsetX}px, ${offsetY}px)`, - zIndex: this.props.zInex + zIndex: this.props.zIndex }; return ( From 71025a2ced43af5717bab39ad86ab79502bb62d3 Mon Sep 17 00:00:00 2001 From: Qiming Weng Date: Sat, 8 Aug 2015 17:26:10 -0400 Subject: [PATCH 10/10] 0.1.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 110b891..79d7ecd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-popover-control", - "version": "0.1.3", + "version": "0.1.4", "description": "A popover control for React", "repository": { "type": "git",