revelry_core 0.1.11.2 → 0.1.11.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3103f059a1494d5ff841c90f06fde124010b0a19
-  data.tar.gz: d7e5c5e80333f6c39adb2b3e3602ec820078b8d1
+  metadata.gz: 1436f5abdfe1dd94158f9efb8f56f387e099490f
+  data.tar.gz: a6b9114acd1a17f1e44bd233a51299356092a796
 SHA512:
-  metadata.gz: ec039c7027c6217a33796e6b03eba0e51f609e21635f6ae78f069aae088b84c70bd0d7f0da2dc22dd65e2a058367cd070cadf0508283bd33b14808b173dfe4d6
-  data.tar.gz: c48004aaa1c3de8e5a4c1a547542d3f0c04ebedb9aa9ae606168d67d9bdc067bb77143ab9866bc06619ac3ea26126c1b74c62965d8c229571bd850bfa96614e6
+  metadata.gz: 2c20de27bedeafbc2dd39ccebbe34e99e6b07532dc275bc9d82cc57d6fd0c53c9861a312c13dc1e7f8e15d6c6d28b5ba674a355bedf4b5fce567cc566c198436
+  data.tar.gz: d2378d7c80e8218eda27620a1d126c0e091e29b05cd75853cc7b51efb15dc782cbea57295c1fe232619f2dc229ccad0f3611e77d311e9e83dc55fcce61b1548c

data/app/assets/javascripts/revelry/examples/Charts.js.cjsx

@@ -0,0 +1,30 @@
+Rev.pullInto(this) 'ChartBuilder'
+
+Rev.registerExample 'Charts',
+  getInitialState: ->
+    state =
+      data:
+        labels: ["January", "February", "March", "April", "May", "June", "July"]
+        datasets: [
+          {
+            label: "My First dataset"
+            fillColor: "rgba(220,220,220,0.5)"
+            strokeColor: "rgba(220,220,220,0.8)"
+            highlightFill: "rgba(220,220,220,0.75)"
+            highlightStroke: "rgba(220,220,220,1)"
+            data: [65, 59, 80, 81, 56, 55, 40]
+          },
+          {
+            label: "My Second dataset"
+            fillColor: "rgba(151,187,205,0.5)"
+            strokeColor: "rgba(151,187,205,0.8)"
+            highlightFill: "rgba(151,187,205,0.75)"
+            highlightStroke: "rgba(151,187,205,1)"
+            data: [28, 48, 40, 19, 86, 27, 90]
+          }
+        ]
+
+  render: ->
+    <div>
+      <ChartBuilder type="Line" data={@state.data} height={300} width={300}/>
+    </div>

data/app/assets/javascripts/revelry/examples/Grid.js.cjsx

@@ -91,6 +91,15 @@ Rev.registerExample 'Grid <Row> & <Col>',
         <Col small="4">4</Col>
       </Row>
       <hr />
+      <Row collapse>
+        <Col large=6 className="exampleRowCollapseColumn">
+          These are columns
+        </Col>
+        <Col large=6 className="exampleRowCollapseColumn">
+          in a collapsed row
+        </Col>
+      </Row>
+      <hr />
       <h3>Incomplete Rows</h3>
       <Row>
         <Col medium="3">3</Col>

data/app/assets/javascripts/revelry/examples/IconBar.js.cjsx

@@ -0,0 +1,22 @@
+IconBar = Rev.Components.IconBar
+IconBarItem = Rev.Components.IconBarItem
+
+Rev.registerExample 'IconBar',
+  render: ->
+    <div>
+    <h3>{"<IconBar>"}</h3>
+      <IconBar>
+        <IconBarItem type="FontAwesome" icon="thumbs-up">
+          one
+        </IconBarItem>
+        <IconBarItem type="FontAwesome" icon="thumbs-down">
+          two
+        </IconBarItem>
+        <IconBarItem type="FontAwesome" icon="comment">
+          three
+        </IconBarItem>
+        <IconBarItem type="FontAwesome" icon="cog">
+          four
+        </IconBarItem>
+      </IconBar>
+    </div>

data/app/assets/javascripts/revelry/examples/Lists.js.cjsx

@@ -0,0 +1,22 @@
+Rev.pullInto(this) 'Emptyable', 'Panel'
+
+Rev.registerExample 'Lists',
+
+  nonEmptyList: ['There are children in this Emptyable.', 'The empty state will not be displayed.']
+
+  emptyList: []
+
+  render: ->
+    <div>
+      <h3>{"<Emptyable>"}</h3>
+      <Emptyable componentClass="ul" emptyState={
+        <p>This is the empty state. It will not be displayed.</p>
+      }>
+        {@nonEmptyList.map (x) -> <li>{x}</li>}
+      </Emptyable>
+      <Emptyable componentClass="ul" emptyState={
+        <Panel>This is the empty state. It is displayed because the Emptyable has no children.</Panel>
+      }>
+        {@emptyList.map (x) -> <li>{x}</li>}
+      </Emptyable>
+    </div>

data/app/assets/javascripts/revelry/ui/charts/BarChart.js.cjsx

@@ -0,0 +1,58 @@
+Rev.registerComponent 'BarChart',
+  propTypes:
+    data: React.PropTypes.array.isRequired
+    options: React.PropTypes.object
+    width: React.PropTypes.number
+    height: React.PropTypes.number
+    title: React.PropTypes.string
+
+  getDefaultProps: ->
+    title: "Bar Chart"
+    width: 300
+    height: 300
+
+  componentDidMount: ->
+    ctx = @refs.canvas.getDOMNode().getContext('2d')
+    @_chart = @renderChart(ctx)
+
+  componentWillUnmount: ->
+    @_chart.destroy()
+
+  renderChart: (ctx) ->
+    new Chart(ctx).Bar(@props.data, @getDefaultOptions())
+
+  getDefaultOptions: ->
+    defaultOptions =
+      # Whether the scale should start at zero, or an order of magnitude down from the lowest value
+      scaleBeginAtZero : true
+      scaleShowGridLines : true
+      scaleGridLineColor : "rgba(0,0,0,.05)"
+      scaleGridLineWidth : 1
+      # Whether to show horizontal lines (except X axis)
+      scaleShowHorizontalLines: true
+      # Whether to show vertical lines (except Y axis)
+      scaleShowVerticalLines: false
+      barShowStroke : true
+      barStrokeWidth : 2
+      # Spacing between each of the X value sets
+      barValueSpacing : 5
+      # Spacing between data sets within X values
+      barDatasetSpacing : 1
+      # Amount extra to add to the radius to cater for hit detection outside the drawn point
+      pointHitDetectionRadius : 20
+      # Whether to show a stroke for datasets
+      datasetStroke : true
+      datasetStrokeWidth : 2
+      datasetFill : false
+
+    defaultOptions = Object.assign(defaultOptions, @props.options)
+
+  render: ->
+    <div>
+      <h3 className="ChartTitle">{ @props.title }</h3>
+      <canvas
+        ref="canvas"
+        width={ @props.width }
+        height={ @props.height }
+      />
+    </div>

data/app/assets/javascripts/revelry/ui/charts/ChartBuilder.js.cjsx

@@ -0,0 +1,30 @@
+Rev.registerComponent 'ChartBuilder',
+  propTypes:
+    data: React.PropTypes.array.isRequired
+    type: React.PropTypes.string.isRequired
+    options: React.PropTypes.object
+    width: React.PropTypes.number
+    height: React.PropTypes.number
+    title: React.PropTypes.string
+
+  getDefaultProps: ->
+    title: "Chart Title"
+    width: 300
+    height: 300
+
+  renderChart: (ctx) ->
+    if (typeof Chart == "undefined")
+      console.warn("Chart is undefined - Chart must be required in application.js")
+    else
+      switch @props.type
+        when "Bar" then <Rev.Components.BarChart {...@props} />
+        when "Line" then <Rev.Components.LineChart {...@props} />
+        when "Donut" then <Rev.Components.DonutChart {...@props} />
+        when "Pie" then <Rev.Components.PieChart {...@props} />
+        when "Radar" then <Rev.Components.RadarChart {...@props} />
+        else null
+
+  render: ->
+    <div>
+      {this.renderChart()}
+    </div>

data/app/assets/javascripts/revelry/ui/charts/DonutChart.js.cjsx

@@ -0,0 +1,45 @@
+Rev.registerComponent 'DonutChart',
+  propTypes:
+    data: React.PropTypes.array.isRequired
+    options: React.PropTypes.object
+    width: React.PropTypes.number
+    height: React.PropTypes.number
+    title: React.PropTypes.string
+
+  getDefaultProps: ->
+    title: "Donut Chart"
+    width: 300
+    height: 300
+
+  componentDidMount: ->
+    ctx = @refs.canvas.getDOMNode().getContext('2d')
+    @_chart = @renderChart(ctx)
+
+  componentWillUnmount: ->
+    @_chart.destroy()
+
+  renderChart: (ctx) ->
+    new Chart(ctx).Doughnut(@props.data, @getDefaultOptions())
+
+  getDefaultOptions: ->
+    defaultOptions =
+      segmentShowStroke : true
+      segmentStrokeColor : "#fff"
+      segmentStrokeWidth : 2
+      percentageInnerCutout : 50
+      animationSteps : 100
+      animationEasing : "easeOutBounce"
+      animateRotate : true
+      animateScale : false
+
+    defaultOptions = Object.assign(defaultOptions, @props.options)
+
+  render: ->
+    <div>
+      <h3 className="ChartTitle">{ @props.title }</h3>
+      <canvas
+        ref="canvas"
+        width={ @props.width }
+        height={ @props.height }
+      />
+    </div>

data/app/assets/javascripts/revelry/ui/charts/LineChart.js.cjsx

@@ -0,0 +1,51 @@
+Rev.registerComponent 'LineChart',
+  propTypes:
+    data: React.PropTypes.array.isRequired
+    options: React.PropTypes.object
+    width: React.PropTypes.number
+    height: React.PropTypes.number
+    title: React.PropTypes.string
+
+  getDefaultProps: ->
+    title: "Line Chart"
+    width: 300
+    height: 300
+
+  componentDidMount: ->
+    ctx = @refs.canvas.getDOMNode().getContext('2d')
+    @_chart = @renderChart(ctx)
+
+  componentWillUnmount: ->
+    @_chart.destroy()
+
+  renderChart: (ctx) ->
+    new Chart(ctx).Line(@props.data, @getDefaultOptions())
+
+  getDefaultOptions: ->
+    defaultOptions =
+      scaleShowGridLines : true
+      scaleGridLineColor : "rgba(0,0,0,.05)"
+      scaleGridLineWidth : 1
+      scaleShowHorizontalLines: true
+      scaleShowVerticalLines: false
+      bezierCurve : false
+      bezierCurveTension : 0.4
+      pointDot : true
+      pointDotRadius : 4
+      pointDotStrokeWidth : 1
+      pointHitDetectionRadius : 20
+      datasetStroke : true
+      datasetStrokeWidth : 2
+      datasetFill : false
+
+    defaultOptions = Object.assign(defaultOptions, @props.options)
+
+  render: ->
+    <div>
+      <h3 className="ChartTitle">{ @props.title }</h3>
+      <canvas
+        ref="canvas"
+        width={ @props.width }
+        height={ @props.height }
+      />
+    </div>

data/app/assets/javascripts/revelry/ui/charts/PieChart.js.cjsx

@@ -0,0 +1,46 @@
+Rev.registerComponent 'PieChart',
+  propTypes:
+    data: React.PropTypes.array.isRequired
+    options: React.PropTypes.object
+    width: React.PropTypes.number
+    height: React.PropTypes.number
+    title: React.PropTypes.string
+
+  getDefaultProps: ->
+    title: "Pie Chart"
+    width: 300
+    height: 300
+
+  componentDidMount: ->
+    ctx = @refs.canvas.getDOMNode().getContext('2d')
+    @_chart = @renderChart(ctx)
+
+  componentWillUnmount: ->
+    @_chart.destroy()
+
+  renderChart: (ctx) ->
+    new Chart(ctx).Pie(@props.data, @getDefaultOptions())
+
+  getDefaultOptions: ->
+    defaultOptions =
+      segmentShowStroke : true
+      segmentStrokeColor : "#fff"
+      segmentStrokeWidth : 2
+      percentageInnerCutout : 0
+      animationSteps : 100
+      animationEasing : "easeOutBounce"
+      animateRotate : true
+      animateScale : false
+
+    defaultOptions = Object.assign(defaultOptions, @props.options)
+
+  render: ->
+    <div>
+      <h3 className="ChartTitle">{ @props.title }</h3>
+      <canvas
+        ref="canvas"
+        width={ @props.width }
+        height={ @props.height }
+      />
+      <button onClick={@clearChart}>Clear Chart</button>
+    </div>

data/app/assets/javascripts/revelry/ui/charts/RadarChart.js.cjsx

@@ -0,0 +1,59 @@
+Rev.registerComponent 'RadarChart',
+  propTypes:
+    data: React.PropTypes.array.isRequired
+    options: React.PropTypes.object
+    width: React.PropTypes.number
+    height: React.PropTypes.number
+    title: React.PropTypes.string
+
+  getDefaultProps: ->
+    title: "Radar Chart"
+    width: 300
+    height: 300
+
+  componentDidMount: ->
+    ctx = @refs.canvas.getDOMNode().getContext('2d')
+    @_chart = @renderChart(ctx)
+
+  componentWillUnmount: ->
+    @_chart.destroy()
+
+  renderChart: (ctx) ->
+    new Chart(ctx).Radar(@props.data, @getDefaultOptions())
+
+  getDefaultOptions: ->
+    defaultOptions =
+      # Whether to show lines for each scale point
+      scaleShowLine : true
+      # Whether we show the angle lines out of the radar
+      angleShowLineOut : true
+      scaleShowLabels : false
+      scaleBeginAtZero : true
+      # Colour of the angle line
+      angleLineColor : "rgba(0,0,0,.1)"
+      # Pixel width of the angle line
+      angleLineWidth : 1
+      pointLabelFontFamily : "'Arial'"
+      pointLabelFontStyle : "normal"
+      pointLabelFontSize : 10
+      pointLabelFontColor : "#666"
+      pointDot : true
+      pointDotRadius : 3
+      pointDotStrokeWidth : 1
+      # amount extra to add to the radius to cater for hit detection outside the drawn point
+      pointHitDetectionRadius : 20
+      datasetStroke : true
+      datasetStrokeWidth : 2
+      datasetFill : true
+
+    defaultOptions = Object.assign(defaultOptions, @props.options)
+
+  render: ->
+    <div>
+      <h3 className="ChartTitle">{ @props.title }</h3>
+      <canvas
+        ref="canvas"
+        width={ @props.width }
+        height={ @props.height }
+      />
+    </div>

data/app/assets/javascripts/revelry/ui/formatting/FontIcon.js.cjsx

@@ -1,5 +1,6 @@
 Rev.registerComponent 'FontIcon',
   render: ->
+    console.warn('Warning: FontIcon is depreciated, use the Icon component instead')
     classes =
       "RevFontIcon": true
     classes["fi-#{@props.type}"] = true

data/app/assets/javascripts/revelry/ui/forms/Input.js.cjsx

@@ -26,7 +26,7 @@ Rev.registerComponent 'Input',
 
   renderInput: ->
     inputProps = _(@getPropsWithout 'dom', 'error', 'className').extend
-      className: @cx
+      className: @classAdd
         'RevInput--input': true
         'error': @props.error
 

data/app/assets/javascripts/revelry/ui/grid/Row.js.cjsx

@@ -2,6 +2,7 @@ Rev.registerComponent 'Row',
   render: ->
     className = @classAdd
       row: true
+      collapse: @props.collapse
     <div {...@props} className="RevRow #{className}">
       { @props.children }
     </div>

data/app/assets/javascripts/revelry/ui/lists/Emptyable.js.cjsx

@@ -0,0 +1,14 @@
+Rev.registerComponent 'Emptyable',
+
+  propTypes:
+    componentClass: React.PropTypes.element.isRequired
+    emptyState: React.PropTypes.element.isRequired
+
+  getDefaultProps: () ->
+    componentClass: 'div'
+
+  render: ->
+    if @props.children and @props.children.length
+      React.createElement(@props.componentClass, @props, @props.children)
+    else
+      @props.emptyState