mergins sstern6 commits

babgyy · Feb 13, 2016 · e8317a3 · e8317a3
1 parent 6e2764e
commit e8317a3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 12 deletions.
diff --git a/example/card-loader.cjsx b/example/card-loader.cjsx
@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 ReactCardFormContainer = require '../lib/card-react-form-container.js'
 
 CardLoader = React.createClass
@@ -42,4 +43,4 @@ CardLoader = React.createClass
     </div>
 
 
-React.render <CardLoader />, document.getElementById 'demo-container'
+ReactDOM.render <CardLoader />, document.getElementById 'demo-container'
diff --git a/lib/card-react-component.js b/lib/card-react-component.js
@@ -1,5 +1,10 @@
 (function() {
   var ClassNames, Payment, React, ReactCard;
+  var dot,ccDots,cvcDots,expiryDots;
+    dot = String.fromCharCode(183);
+    ccDots = dot + dot + dot + dot;
+    cvcDots = dot + dot + dot;
+    expiryDots = dot + dot + "/" + dot + dot;
 
   React = require('react');
 
@@ -17,9 +22,9 @@
         },
         baseWidth: 350,
         defaultValues: {
-          number: '•••• •••• •••• ••••',
-          cvc: '•••',
-          expiry: '••/••',
+          number:ccDots + " " + ccDots + " " + ccDots + " " + ccDots,
+          cvc: cvcDots,
+          expiry:expiryDots,
           name: 'Full Name'
         }
       };

diff --git a/lib/card-react-form-container.js b/lib/card-react-form-container.js
diff --git a/src/components/card-react-form-container.cjsx b/src/components/card-react-form-container.cjsx
@@ -1,4 +1,5 @@
 React = require 'react'
+ReactDOM = require 'react-dom'
 Payment = require 'payment'
 ReactCard = require './card-react-component'
 
@@ -54,16 +55,16 @@ ReactCardFormContainer = React.createClass
   # format the text inside the number, cvc and expiry inputs
   formatInputs: ->
     inputsNames = @props.formInputsNames
-    Payment.formatCardNumber React.findDOMNode(@refs[@inputsRefs[inputsNames["number"]]])
-    Payment.formatCardCVC React.findDOMNode(@refs[@inputsRefs[inputsNames["cvc"]]])
-    Payment.formatCardExpiry React.findDOMNode(@refs[@inputsRefs[inputsNames["expiry"]]])
+    Payment.formatCardNumber ReactDOM.findDOMNode(@refs[@inputsRefs[inputsNames["number"]]])
+    Payment.formatCardCVC ReactDOM.findDOMNode(@refs[@inputsRefs[inputsNames["cvc"]]])
+    Payment.formatCardExpiry ReactDOM.findDOMNode(@refs[@inputsRefs[inputsNames["expiry"]]])
 
   # Render the card component into the DOM in the supplied this.cardContainer
   # according to React docs: "If the ReactElement was previously rendered into container,
   # this will perform an update on it and only mutate the DOM as necessary to reflect the latest React component."
   renderCardComponent: ->
     if @cardContainer
-      React.render <ReactCard
+      ReactDOM.render <ReactCard
                     {...@props}
                     cardFlipped={@cardFlipped}
                     focusedInput={@focusedInput}