Adapt card to new ripple

react-toolbox · Sep 18, 2015 · aa4cbd7 · aa4cbd7
1 parent cac6eed
commit aa4cbd7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 19 deletions.
diff --git a/components/card/index.cjsx b/components/card/index.cjsx
@@ -23,20 +23,10 @@ module.exports = React.createClass
 
   getInitialState: ->
     loading     : @props.loading
-    ripple      : undefined
-
-  # -- Lifecycle
-  componentWillReceiveProps: ->
-    @setState ripple: undefined
 
   # -- Events
   onClick: (event) ->
     event.preventDefault() if @props.onClick?
-    client = event.target.getBoundingClientRect?()
-    @setState ripple:
-                left  : event.pageX - client?.left
-                top   : event.pageY - client?.top
-                width : (client?.width * 2.5)
     @props.onClick? event, @
 
   # -- Render
@@ -51,7 +41,7 @@ module.exports = React.createClass
     style.backgroundImage = "url(#{@props.image})" if @props.image?
     style.backgroundColor = @props.color if @props.color
 
-    <div data-react-toolbox='card' className={className} onClick={@onClick}>
+    <div data-react-toolbox='card' className={className} onMouseDown={@onClick}>
       {
         if @props.title or @props.image
           <figure className={localCSS.figure} style={style}>
@@ -62,11 +52,10 @@ module.exports = React.createClass
       { <p>{@props.text}</p> if @props.text }
       { <small>{@props.legend}</small> if @props.legend }
       { <Navigation className={localCSS.navigation} actions={@props.actions} /> if @props.actions }
-      { <Ripple className={localCSS.ripple} origin={@state.ripple} loading={@state.loading} /> }
+      { <Ripple ref="ripple" className={localCSS.ripple} loading={@state.loading} /> }
     </div>
 
   # -- Extends
   loading: (value) ->
     attributes = loading: value
-    attributes.ripple = undefined unless value
     @setState attributes
diff --git a/components/card/style.styl b/components/card/style.styl
@@ -6,7 +6,6 @@ OFFSET                            = (SPACE / 1.25)
 :local(.navigation)
   padding                         : OFFSET = (OFFSET / 2)
   > *
-    pointer-events                : all
     padding-left                  : OFFSET
     padding-right                 : OFFSET
     box-shadow                    : none !important
@@ -33,17 +32,14 @@ OFFSET                            = (SPACE / 1.25)
   background                      : WHITE
 
   // -- Children
-  *:not(button)
-    pointer-events                : none
   > *:not(:local(.ripple)):not(:local(.navigation))
     padding                       : OFFSET
   &:not(.color):not(.image) > :local(.ripple)
-    background-color              : DIVIDER
+    background-color              : red
   &:not(.color) > *:not(figure), > *:not(:last-child)
     box-shadow                    : 0 1px darken(BACKGROUND, 5%)
   > :local(.figure)
 
-
   // -- Overrides
   &.touch
     cursor                        : pointer
@@ -59,7 +55,7 @@ OFFSET                            = (SPACE / 1.25)
     -webkit-filter                : grayscale(100%)
     &, &:hover
       box-shadow                  : 0 0 0 1px DIVIDER
-    > :local(.ripple)
+    :local(.ripple)
       width                       : SIZE = (SIZE * 2)
       height                      : SIZE
   &.small > :local(.figure)
@@ -68,3 +64,6 @@ OFFSET                            = (SPACE / 1.25)
     height                        : SIZE
   &.wide
     width                         : (SIZE * 2)
+
+:local(.ripple)
+  background-color: #888