ColorPicker positions

casesandberg · Aug 16, 2015 · eed4dda · eed4dda
1 parent 133d0d9
commit eed4dda
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 42 deletions.
diff --git a/build/bundle.js b/build/bundle.js
@@ -81,8 +81,8 @@
 
 	var Home = __webpack_require__(153);
 
-	var html = React.renderToString(React.createElement(Home));
-	console.log(html);
+	// var html = React.renderToString(React.createElement(Home));
+	// console.log(html);
 
 	if (typeof document !== 'undefined') {
 	  React.render(React.createElement(Home), document.getElementById('root'));
@@ -41187,10 +41187,10 @@
 	var Saturation = _require.Saturation;
 	var Hue = _require.Hue;
 	var Alpha = _require.Alpha;
-	var Checkboard = _require.Checkboard;
 
 	var SketchFields = __webpack_require__(181);
 	var SketchPresetColors = __webpack_require__(182);
+	var Checkboard = __webpack_require__(173);
 
 	var Sketch = (function (_ReactCSS$Component) {
 	  _inherits(Sketch, _ReactCSS$Component);

diff --git a/docs/components/home/HomeDocumentation.jsx b/docs/components/home/HomeDocumentation.jsx
@@ -59,30 +59,31 @@ class HomeDocumentation extends ReactCSS.Component {
       <div is="body">
         <Container width={ 780 }>
           <Docs markdown={ documentation } primaryColor={ this.props.primaryColor } bottom={ bottom } />
-            <Grid>
-              <div />
-              <div is="examples">
+          <Grid>
+            <div />
+            <div is="examples">
 
-                <div is="example">
-                  <div is="playground">
-                    <div is="exampleButton">
-                      <Button />
-                    </div>
+              <div is="example">
+                <div is="playground">
+                  <div is="exampleButton">
+                    <Button />
                   </div>
-                  <Markdown>{ buttonmd }</Markdown>
                 </div>
+                <Markdown>{ buttonmd }</Markdown>
+              </div>
+
 
-                <div is="example">
-                  <div is="playground">
-                    <div is="exampleSketch">
-                      <Sketch />
-                    </div>
+              <div is="example">
+                <div is="playground">
+                  <div is="exampleSketch">
+                    <Sketch />
                   </div>
-                  <Markdown>{ sketchmd }</Markdown>
                 </div>
-
+                <Markdown>{ sketchmd }</Markdown>
               </div>
-            </Grid>
+
+            </div>
+          </Grid>
         </Container>
       </div>
     );

diff --git a/docs/components/home/HomeFeature.jsx b/docs/components/home/HomeFeature.jsx
@@ -116,7 +116,7 @@ class HomeFeature extends ReactCSS.Component {
   }
 
   handleChangeComplete(data) {
-    console.log(data);
+    // console.log(data);
     if (data.hsl !== this.state) {
       this.setState(data.hsl);
     }

diff --git a/docs/index.js b/docs/index.js
@@ -1,12 +1,11 @@
 'use strict';
 
 var React = require('react');
-// require('../node_modules/normalize.css/normalize.css');
 
 var Home = require('./components/home/Home.jsx');
 
-var html = React.renderToString(React.createElement(Home));
-console.log(html);
+// var html = React.renderToString(React.createElement(Home));
+// console.log(html);
 
 if (typeof document !== 'undefined') {
   React.render(

diff --git a/examples/Sketch.jsx b/examples/Sketch.jsx
@@ -56,7 +56,7 @@ module.exports = class SketchExample extends ReactCSS.Component {
         <div is="swatch" onClick={ this.handleClick }>
           <div is="color" />
         </div>
-        <ColorPicker color={ this.state.color } display={ this.state.displayColorPicker } onChange={ this.handleChange } onClose={ this.handleClose } type="sketch" />
+        <ColorPicker color={ this.state.color } display={ this.state.displayColorPicker } position="below" onChange={ this.handleChange } onClose={ this.handleClose } type="sketch" />
       </div>
     );
   }

diff --git a/examples/button.md b/examples/button.md
@@ -25,7 +25,10 @@ class ButtonExample extends React.Component {
     return (
       <div>
         <button onClick={ this.handleClick }>Pick Color</button>
-        <ColorPicker display={ this.state.displayColorPicker } onClose={ this.handleClose } type="chrome" />
+        <ColorPicker
+          display={ this.state.displayColorPicker }
+          onClose={ this.handleClose }
+          type="chrome" />
       </div>
     );
   }

diff --git a/examples/sketch.md b/examples/sketch.md
@@ -55,7 +55,13 @@ class SketchExample extends ReactCSS.Component {
         <div is="swatch" onClick={ this.handleClick }>
           <div is="color" />
         </div>
-        <ColorPicker color={ this.state.color } display={ this.state.displayColorPicker } onChange={ this.handleChange } onClose={ this.handleClose } type="sketch" />
+        <ColorPicker
+          color={ this.state.color }
+          position="below"
+          display={ this.state.displayColorPicker }
+          onChange={ this.handleChange }
+          onClose={ this.handleClose }
+          type="sketch" />
       </div>
     );
   }

diff --git a/src/components/Color.jsx b/src/components/Color.jsx
@@ -42,23 +42,13 @@ class ColorPicker extends ReactCSS.Component {
   }
 
   classes() {
-    var wrap;
-    if (this.props.position) {
-      wrap = this.props.position;
-    } else {
-      wrap = {
-        position: 'absolute',
-        display: 'block',
-        left: '100%',
-        marginLeft: '20px',
-        top: '0',
-        zIndex: '999',
-      };
-    }
-
     return {
       'show': {
-        wrap: wrap,
+        wrap: {
+          zIndex: '999',
+          position: 'absolute',
+          display: 'block',
+        },
         picker: {
           zIndex: '2',
           position: 'relative',
@@ -73,17 +63,44 @@ class ColorPicker extends ReactCSS.Component {
       },
       'hide': {
         wrap: {
+          zIndex: '999',
           position: 'absolute',
           display: 'none',
         },
       },
+      'position-right': {
+        wrap: {
+          left: '100%',
+          marginLeft: '20px',
+          top: '0',
+        },
+      },
+      'position-left': {
+        wrap: {
+          right: '100%',
+          marginRight: '20px',
+          top: '0',
+        },
+      },
+      'position-below': {
+        wrap: {
+          left: '0',
+          marginLeft: '0',
+          top: '100%',
+          marginTop: '20px',
+        },
+      },
+      'override': {
+        wrap: this.props.positionCSS,
+      },
     };
   }
 
   styles() {
     return this.css({
       'show': this.state.visible === true,
       'hide': this.state.visible === false,
+      'override': _.isPlainObject(this.props.positionCSS),
     });
   }
 
@@ -150,6 +167,8 @@ ColorPicker.defaultProps = {
     a: 1,
   },
   type: 'sketch',
+  position: 'right',
+  positionCSS: {},
 };
 
 module.exports = ColorPicker;