Migrated to emotion

Author: rafaelklaessen

CHANGELOG.md

@@ -1,3 +1,9 @@
+# Version 1.2.0
+Released 2018-09-08
+
+- Migrated from `glamorous` to `emotion`
+- Dragging now only activates when the left mouse button is clicked
+
 # Version 1.1.0
 Released 2018-03-28
 

README.md

@@ -119,6 +119,3 @@ All other props (not documented here) will be passed on to the root element.
 #### How custom styles work
 When a function is passed to a `style` prop rather than an object, it is expected to return an object.
 The style function will be called with all props that that component has (except for the `style` and `children` props and any internal callbacks). The return value of the function will be used as style (see the [demo repo](https://github.com/rafaelklaessen/react-multi-bar-slider-demo) for an example).
-
-## Caveats
-When the `MultiSlider`, `Progress` or `Dot` components are wrapped with glamorous (eg `glamorous(MultiSlider)`), glamorous breaks. I don't know how to fix this, so don't wrap them :)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-multi-bar-slider",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Slider component with multiple bars for React",
   "repository": {
     "type": "git",
@@ -19,8 +19,7 @@
     "react multi slider"
   ],
   "peerDependencies": {
-    "glamor": "^2.x",
-    "glamorous": "^4.x",
+    "emotion": "^9.x",
     "prop-types": "^15.x",
     "react": "^15.3.x || ^16.x",
     "react-dom": "^15.3.x || ^16.x"
@@ -41,17 +40,17 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "clean-webpack-plugin": "^0.1.16",
+    "emotion": "^9.2.8",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "eslint": "^4.9.0",
     "eslint-plugin-react": "^7.4.0",
-    "glamor": "^2.20.40",
-    "glamorous": "^4.12.1",
     "jest": "^21.2.1",
     "jest-cli": "^22.4.3",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-emotion": "^9.2.8",
     "react-test-renderer": "^16.2.0",
     "webpack": "^3.8.1"
   }

src/Dot/DotIcon.js

@@ -1,14 +1,15 @@
 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 
-const DotIcon = glamorous.img({
+const DotIcon = styled('img')({
   position: 'absolute',
   transform: 'translateX(-50%)',
   userDrag: 'none',
   userSelect: 'none'
-}, ({ width, height }) => ({
+}, ({ width, height, css }) => ({
   width,
-  height
+  height,
+  ...css
 }));
 
 DotIcon.displayName = 'DotIcon';
@@ -21,7 +22,8 @@ DotIcon.propTypes = {
 
 DotIcon.defaultProps = {
   width: 50,
-  height: 50
+  height: 50,
+  css: null
 };
 
 export default DotIcon;

src/Dot/StyledDot.js

@@ -1,14 +1,14 @@
 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import transition from '../utils/transition';
 
-const StyledDot = glamorous.span({
+const StyledDot = styled('span')({
   position: 'absolute',
   right: 0,
   display: 'block',
   zIndex: 5,
   borderRadius: '50%'
-}, ({ hasIcon, width, height, color, reversed, noTransition }) => ({
+}, ({ hasIcon, width, height, color, reversed, noTransition, css }) => ({
   top: hasIcon ? 0 : '50%',
   left: reversed ? 0 : 'auto',
   right: reversed ? 'auto' : 0,
@@ -18,7 +18,8 @@ const StyledDot = glamorous.span({
   width: hasIcon ? 0 : width,
   height: hasIcon ? 0 : height,
   backgroundColor: hasIcon ? 'transparent' : color,
-  transition: noTransition ? 'none' : transition
+  transition: noTransition ? 'none' : transition,
+  ...css
 }));
 
 StyledDot.propTypes = {
@@ -33,7 +34,8 @@ StyledDot.propTypes = {
 
 StyledDot.defaultProps = {
   width: 28,
-  height: 28
+  height: 28,
+  css: null
 };
 
 export default StyledDot;

src/Dot/__tests__/__snapshots__/DotIcon.test.js.snap

@@ -2,6 +2,8 @@
 
 exports[`DotIcon.js matches the snapshot 1`] = `
 <img
-  className="css-19tq53f"
+  className="css-1gn67lo"
+  height={45}
+  width={45}
 />
 `;

src/Dot/__tests__/__snapshots__/StyledDot.test.js.snap

@@ -2,6 +2,10 @@
 
 exports[`StyledDot.js matches the snapshot 1`] = `
 <span
-  className="css-1c7oaf0"
+  className="css-r1lieg"
+  color="green"
+  height={30}
+  reversed={false}
+  width={30}
 />
 `;

src/MultiSlider/SlidableZone.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 
-const SlidableZone = glamorous.div({
+const SlidableZone = styled('div')({
   position: 'absolute',
   width: '100%'
 }, ({ size, zIndex }) => ({

src/MultiSlider/StyledSlider.js

@@ -1,19 +1,20 @@
 import PropTypes from 'prop-types';
-import glamorous from 'glamorous';
+import styled from 'react-emotion';
 import transition from '../utils/transition';
 import getHalf from '../utils/getHalf';
 
-const StyledSlider = glamorous.div({
+const StyledSlider = styled('div')({
   position: 'relative',
   height: 14,
   boxSizing: 'border-box',
   transition
-}, ({ width, height, backgroundColor, roundedCorners, readOnly }) => ({
+}, ({ width, height, backgroundColor, roundedCorners, readOnly, css }) => ({
   width,
   height,
   backgroundColor,
   borderRadius: roundedCorners ? getHalf(height) : 0,
-  cursor: readOnly ? 'auto' : 'pointer'
+  cursor: readOnly ? 'auto' : 'pointer',
+  ...css
 }));
 
 
@@ -32,4 +33,8 @@ StyledSlider.propTypes = {
   css: PropTypes.object.isRequired
 };
 
+StyledSlider.defaultProps = {
+  css: null
+};
+
 export default StyledSlider;

src/MultiSlider/__tests__/__snapshots__/SlidableZone.test.js.snap

@@ -2,6 +2,7 @@
 
 exports[`SlidableZone.js matches the snapshot 1`] = `
 <div
-  className="css-t0d97c"
+  className="css-1r9s984"
+  size={40}
 />
 `;