New method and property "loading"

react-toolbox · Jul 23, 2015 · 91ee458 · 91ee458
1 parent ae1cab3
commit 91ee458
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git a/components/card/card.md b/components/card/card.md
@@ -23,6 +23,16 @@ var Card = require('react-toolbox/components/card');
 | **image**         | String        |                 | Sets a background image url.|
 | **text**          | String        |                 | Sets a complementary text.|
 | **legend**        | String        |                 | Sets a legend text.|
+| **loading**       | Boolean       |                 | If true, component will be disabled and show a loading animation.|
 | **onClick**       | Function      |                 | Callback function that is fired when the components's is clicked.|
 | **title**         | String        | "text"          | Sets the title of the component.|
 | **type**          | String        | "text"          | Type of the component, overwrite this property if you need set a different stylesheet.|
+
+## Methods
+
+#### loading
+If true, component will be disabled and show a loading animation.
+
+```
+card_instance.loading(true);
+```
diff --git a/components/card/index.cjsx b/components/card/index.cjsx
@@ -11,6 +11,7 @@ module.exports = React.createClass
     image       : React.PropTypes.string
     text        : React.PropTypes.string
     legend      : React.PropTypes.string
+    loading     : React.PropTypes.bool
     onClick     : React.PropTypes.func
     title       : React.PropTypes.string
     type        : React.PropTypes.string
@@ -43,6 +44,7 @@ module.exports = React.createClass
     className += " touch" if @props.onClick?
     className += " image" if @props.image?
     className += " color" if @props.color?
+    className += " loading" if @state.loading?
     style = {}
     style.backgroundImage = "url(#{@props.image})" if @props.image?
     style.backgroundColor = @props.color if @props.color
@@ -60,3 +62,7 @@ module.exports = React.createClass
       { <Navigation actions={@props.actions} /> if @props.actions }
       { <Ripple origin={@state.ripple} loading={@state.loading} /> }
     </div>
+
+  # -- Extends
+  loading: (value) ->
+    @setState loading: value
diff --git a/components/card/style.styl b/components/card/style.styl
@@ -51,6 +51,14 @@ OFFSET                          = (SPACE / 1.25)
   &.image, &.color
     > figure
       color                       : WHITE
+  &.loading
+    cursor                        : none
+    -webkit-filter                : grayscale(100%)
+    &, &:hover
+      box-shadow                  : 0 0 0 1px DIVIDER
+    > [data-component-ripple]
+      width                       : SIZE = (SIZE * 2)
+      height                      : SIZE
 
 // -- Extends
 [data-component-card="small"]

diff --git a/spec/components/card.cjsx b/spec/components/card.cjsx
@@ -29,13 +29,17 @@ module.exports = React.createClass
 
       <h3>Basic properties</h3>
       <Card title="Default Card" />
+      <Card title="Default Card loading" loading />
       <Card title="Default Card with text" text={text} />
       <Card title="Default Card with legend" legend={legend} />
       <Card title="Default Card with actions" actions={actions} />
       <Card title="Defaulr Card with text & image" text={text}
             image="http://cdn.tapquo.com/photos/soyjavi.jpg" />
       <Card title="Default Card with text, color & onClick event" text={text}
             color="#e91e63" onClick={@onClick} />
+      <Card title="Default Card loading with text, color & onClick event"
+            text={text} color="#e91e63" onClick={@onClick} loading />
+
 
       <h3>Sizes using type property</h3>
       <Card type="small" title="Small Card with text & onClick event"