upgraded to substyle v5 (#155)

signavio · Mar 20, 2017 · 05b02d5 · 05b02d5
1 parent 32f19d1
commit 05b02d5
Show file tree

Hide file tree

Showing 13 changed files with 164 additions and 215 deletions.
diff --git a/gh-pages/views/examples/Advanced.js b/gh-pages/views/examples/Advanced.js
@@ -9,7 +9,7 @@ import { provideExampleValue } from './higher-order'
 import defaultStyle from './defaultStyle'
 import defaultMentionStyle from './defaultMentionStyle'
 
-const style = merge({}, defaultStyle(), {
+const style = merge({}, defaultStyle, {
   suggestions: {
     list: {
       maxHeight: 100,

diff --git a/gh-pages/views/examples/Examples.js b/gh-pages/views/examples/Examples.js
@@ -1,4 +1,6 @@
 import React from 'react'
+import { EnhancerProvider } from 'substyle'
+import Radium from 'radium'
 
 import MultipleTrigger from './MultipleTrigger'
 import SingleLine from './SingleLine'
@@ -37,20 +39,22 @@ const users = [
 
 export default function Examples() {
   return (
-    <div className="examples">
-      <div className="row">
-        <div className="col-lg-12">
-          <MultipleTrigger data={ users } />
+    <EnhancerProvider enhancer={Radium}>
+      <div className="examples">
+        <div className="row">
+          <div className="col-lg-12">
+            <MultipleTrigger data={ users } />
+          </div>
         </div>
-      </div>
-      <div className="row">
-        <div className="col-md-6">
-          <SingleLine data={ users } />
-        </div>
-        <div className="col-md-6">
-          <Advanced data={ users } />
+        <div className="row">
+          <div className="col-md-6">
+            <SingleLine data={ users } />
+          </div>
+          <div className="col-md-6">
+            <Advanced data={ users } />
+          </div>
         </div>
       </div>
-    </div>
+    </EnhancerProvider>
   )
 }
diff --git a/gh-pages/views/examples/MultipleTrigger.js b/gh-pages/views/examples/MultipleTrigger.js
@@ -20,7 +20,7 @@ function MultipleTriggers({ value, data, onChange, onAdd }) {
       <MentionsInput
         value={ value }
         onChange={ onChange }
-        style={ defaultStyle() }
+        style={ defaultStyle }
         markup="@[__display__](__type__:__id__)"
         placeholder={"Mention people using '@'"}
       >

diff --git a/gh-pages/views/examples/SingleLine.js b/gh-pages/views/examples/SingleLine.js
@@ -16,7 +16,7 @@ function SingleLine({ value, data, onChange, onAdd }) {
         singleLine
         value={ value }
         onChange={ onChange }
-        style={ defaultStyle({ singleLine: true }) }
+        style={ defaultStyle }
         placeholder={"Mention people using '@'"}
       >
         <Mention

diff --git a/gh-pages/views/examples/defaultStyle.js b/gh-pages/views/examples/defaultStyle.js
@@ -1,4 +1,4 @@
-export default (props = {}) => ({
+export default ({
   control: {
     backgroundColor: '#fff',
 

diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
   "dependencies": {
     "babel-runtime": "^6.22.0",
     "lodash": "^4.5.1",
-    "substyle": "^3.0.1"
+    "substyle": "^5.1.0"
   },
   "peerDependencies": {
     "react": ">=0.14.0",

diff --git a/src/Highlighter.js b/src/Highlighter.js
@@ -1,7 +1,5 @@
 import React, { Component, PropTypes, Children } from 'react';
-import Radium from './OptionalRadium';
-import defaultStyle from 'substyle';
-
+import { defaultStyle } from 'substyle';
 import isEqual from "lodash/isEqual";
 
 import utils from './utils';
@@ -77,7 +75,7 @@ class Highlighter extends Component {
   }
 
   render() {
-    let { selection, value, markup, displayTransform, inputStyle } = this.props;
+    let { selection, value, markup, displayTransform, style, inputStyle } = this.props;
 
     // If there's a caret (i.e. no range selection), map the caret position into the marked up value
     var caretPositionInMarkup;
@@ -133,14 +131,12 @@ class Highlighter extends Component {
       );
     }
 
-    let { style, className } = substyle(this.props, getModifiers(this.props));
-
     return (
       <div
-        className={ className }
+        { ...style }
         style={{
           ...inputStyle,
-          ...style
+          ...style.style
         }}>
 
         { resultComponents }
@@ -151,7 +147,7 @@ class Highlighter extends Component {
   renderSubstring(string, key) {
     // set substring span to hidden, so that Emojis are not shown double in Mobile Safari
     return (
-      <span { ...substyle(this.props, "substring") } key={key}>
+      <span { ...this.props.style("substring") } key={key}>
         { string }
       </span>
     );
@@ -198,39 +194,33 @@ class Highlighter extends Component {
   // Renders an component to be inserted in the highlighter at the current caret position
   renderHighlighterCaret(children) {
     return (
-      <span { ...substyle(this.props, "caret") } ref="caret" key="caret">
+      <span { ...this.props.style("caret") } ref="caret" key="caret">
         { children }
       </span>
     );
   }
 }
 
-export default Radium(Highlighter);
-
-const getModifiers = (props, ...modifiers) => ({
-  ...modifiers.reduce((result, modifier) => ({ ...result, [modifier]: true }), {}),
-
-  '&singleLine': props.singleLine,
-});
+const styled = defaultStyle({
+  position: 'relative',
+  width: 'inherit',
+  color: 'transparent',
 
-const substyle = defaultStyle({
-  style: {
-    position: 'relative',
-    width: 'inherit',
-    color: 'transparent',
+  overflow: 'hidden',
 
-    overflow: 'hidden',
+  whiteSpace: 'pre-wrap',
+  wordWrap: 'break-word',
 
-    whiteSpace: 'pre-wrap',
-    wordWrap: 'break-word',
+  '&singleLine': {
+    whiteSpace: 'pre',
+    wordWrap: null
+  },
 
-    '&singleLine': {
-      whiteSpace: 'pre',
-      wordWrap: null
-    },
-
-    substring: {
-      visibility: 'hidden'
-    }
+  substring: {
+    visibility: 'hidden'
   }
-});
+}, (props) => ({
+  '&singleLine': props.singleLine,
+}));
+
+export default styled(Highlighter);
diff --git a/src/LoadingIndicator.js b/src/LoadingIndicator.js
@@ -1,25 +1,19 @@
 import React from 'react';
-import Radium from './OptionalRadium';
 import substyle from 'substyle';
 
-function Spinner(props) {
+function LoadingIndicator({ style }) {
+  const spinnerStyle = style("spinner")
   return (
-    <div { ...substyle(props) }>
-      <div { ...substyle(props, ["element", "element1"]) } />
-      <div { ...substyle(props, ["element", "element2"]) } />
-      <div { ...substyle(props, ["element", "element3"]) } />
-      <div { ...substyle(props, ["element", "element4"]) } />
-      <div { ...substyle(props, ["element", "element5"]) } />
+    <div { ...style }>
+      <div { ...spinnerStyle }>
+        <div { ...spinnerStyle(["element", "element1"]) } />
+        <div { ...spinnerStyle(["element", "element2"]) } />
+        <div { ...spinnerStyle(["element", "element3"]) } />
+        <div { ...spinnerStyle(["element", "element4"]) } />
+        <div { ...spinnerStyle(["element", "element5"]) } />
+      </div>
     </div>
   );
 };
 
-function LoadingIndicator(props) {
-  return (
-    <div { ...substyle(props) }>
-      <Spinner { ...substyle(props, "spinner") } />
-    </div>
-  );
-};
-
-export default Radium(LoadingIndicator);
+export default substyle(LoadingIndicator);
diff --git a/src/Mention.js b/src/Mention.js
@@ -1,18 +1,15 @@
 import React, { PropTypes } from 'react';
-import Radium from './OptionalRadium';
-
-import utils from './utils';
-
-function Mention({ display, className, style }) {
-  return (
-    <strong
-      className={className}
-      style={{ ...defaultStyle, ...style}}
-    >
-      { display }
-    </strong>
-  );
-};
+import { defaultStyle } from 'substyle';
+
+const styled = defaultStyle({
+  fontWeight: "inherit"
+});
+
+const Mention = styled(({ display, style }) => (
+  <strong {...style}>
+    { display }
+  </strong>
+));
 
 Mention.propTypes = {
   /**
@@ -37,8 +34,6 @@ Mention.propTypes = {
   ]),
 
   isLoading: PropTypes.bool,
-  className: PropTypes.string,
-  style: PropTypes.object
 };
 
 Mention.defaultProps = {
@@ -51,8 +46,4 @@ Mention.defaultProps = {
   appendSpaceOnAdd: false
 };
 
-const defaultStyle = {
-  fontWeight: "inherit"
-}
-
-export default Radium(Mention);
+export default Mention;