feat(calendar): add pure React based Calendar component

plouc · May 10, 2016 · a0473e4 · a0473e4
1 parent 2acc80b
commit a0473e4
Show file tree

Hide file tree

Showing 8 changed files with 340 additions and 147 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,10 @@
     - [`<BubblePlaceholders />`](https://plouc.github.io/nivo/#/bubble/placeholders)
     - [`<ResponsiveBubblePlaceholders />`](https://plouc.github.io/nivo/#/bubble/placeholders)
 - Calendar
-    - [`<Calendar />`](https://plouc.github.io/nivo/#/calendar)
+    - [`<Calendar />`](https://plouc.github.io/nivo/#/calendar/react)
+    - [`<ResponsiveCalendar />`](https://plouc.github.io/nivo/#/calendar/react)
+    - [`<CalendarD3 />`](https://plouc.github.io/nivo/#/calendar/d3)
+    - [`<ResponsiveCalendarD3 />`](https://plouc.github.io/nivo/#/calendar/d3)
 - Stack
     - [`<Stack />`](https://plouc.github.io/nivo/#/stack)
     - [`<ResponsiveStack />`](https://plouc.github.io/nivo/#/stack)

diff --git a/src/components/charts/calendar/Calendar.js b/src/components/charts/calendar/Calendar.js
@@ -8,175 +8,104 @@
  */
 'use strict';
 
-import React, { Component, PropTypes }      from 'react';
-import { findDOMNode }                      from 'react-dom';
-import d3                                   from 'd3';
-import _                                    from 'lodash';
-import Nivo                                 from '../../../Nivo';
-import { margin as marginPropType }         from '../../../PropTypes';
-import decoratorsFromReactChildren          from '../../../lib/decoratorsFromReactChildren';
-import CalendarLayout                       from '../../../lib/charts/calendar/CalendarLayout';
-import {
-    DIRECTION_HORIZONTAL,
-    DIRECTION_VERTICAL
-} from '../../../constants/directions'
+import React, { Component }                        from 'react';
+import { TransitionMotion, spring }                from 'react-motion';
+import Nivo                                        from '../../../Nivo';
+import CalendarLayout                              from '../../../lib/charts/calendar/CalendarLayout';
+import { calendarPropTypes, calendarDefaultProps } from './CalendarProps';
 
 
-const color = d3.scale.category20();
-
 class Calendar extends Component {
-    constructor(props) {
-        super(props);
+    componentWillMount() {
+        this.calendarLayout = CalendarLayout();
     }
 
-    renderD3(props) {
+    render() {
         const {
             direction,
             daySpacing, dayBorderWidth, dayBorderColor,
             monthBorderWidth, monthBorderColor,
-            transitionDuration, transitionEasing, transitionStaggering
-        } = props;
+            motionStiffness, motionDamping
+        } = this.props;
 
-        const element = d3.select(findDOMNode(this));
-        const wrapper = element.select('.nivo_calendar_wrapper');
-
-        const margin = _.assign({}, Nivo.defaults.margin, props.margin);
-        const width  = props.width  - margin.left - margin.right;
-        const height = props.height - margin.top  - margin.bottom;
-
-
-        element.attr({
-            width:  props.width,
-            height: props.height
-        });
-        wrapper.attr('transform', `translate(${margin.left},${margin.top})`);
+        const margin = _.assign({}, Nivo.defaults.margin, this.props.margin);
+        const width  = this.props.width  - margin.left - margin.right;
+        const height = this.props.height - margin.top  - margin.bottom;
 
         const { days, months } = this.calendarLayout.compute({
             width, height,
             direction,
             daySpacing
         });
 
-
-        const rects = wrapper.selectAll('.nivo_calendar_day').data(days, d => d.date);
-
-        rects
-            .enter().append('rect')
-            .attr('class', 'nivo_calendar_day')
-            .attr('width', d => d.cellSize)
-            .attr('height', d => d.cellSize)
-            .attr('x', 0)
-            .attr('y', 0)
-            .style({
-                opacity:        0,
-                fill:           d => color(d.date.getMonth()),
-                stroke:         dayBorderColor,
-                'stroke-width': dayBorderWidth,
-            })
-        ;
-
-        rects
-            .transition()
-            .duration(transitionDuration)
-            .ease(transitionEasing)
-            .delay(d => d3.time.dayOfYear(d.date) * transitionStaggering)
-            .attr('width', d => d.cellSize)
-            .attr('height', d => d.cellSize)
-            .attr('x', d => d.x)
-            .attr('y', d => d.y)
-            .style({
-                opacity:        1,
-                fill:           d => color(d.date.getMonth()),
-                stroke:         dayBorderColor,
-                'stroke-width': dayBorderWidth,
-            })
-        ;
-
-
-        const paths = wrapper.selectAll('.nivo_calendar_month').data(months, d => d.date);
-
-        paths.enter().append('path')
-            .attr('class', 'nivo_calendar_month')
-            .style({
-                fill:   'none',
-                stroke:         monthBorderColor,
-                'stroke-width': monthBorderWidth,
-            })
-            .attr('d', d => d.path)
-        ;
-
-        paths
-            .transition()
-            .duration(transitionDuration)
-            .ease(transitionEasing)
-            .delay((d, i) => i * 30 * transitionStaggering)
-            .style({
-                stroke:         monthBorderColor,
-                'stroke-width': monthBorderWidth,
-            })
-            .attr('d', d => d.path)
-        ;
-
-        this.decorators.forEach(decorator => {
+        const defaultStyles = days.map(d => {
+            return {
+                key:   d.date.toString(),
+                data:  d,
+                style: {
+                    size: d.size,
+                    x:    0,
+                    y:    0,
+                }
+            };
         });
-    }
-
-    componentWillMount() {
-        this.calendarLayout = CalendarLayout();
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        this.decorators = decoratorsFromReactChildren(nextProps.children, 'decorateCalendar');
-
-        this.renderD3(nextProps, nextState);
 
-        return false;
-    }
-
-    componentDidMount() {
-        this.decorators = decoratorsFromReactChildren(this.props.children, 'decorateCalendar');
-
-        this.renderD3(this.props, this.state);
-    }
+        const stiffness = motionStiffness;
+        const damping   = motionDamping;
 
-    render() {
         return (
-            <svg ref="svg" className="nivo_calendar">
-                <g className="nivo_calendar_wrapper" />
+            <svg className="nivo_calendar" style={{ width: this.props.width, height: this.props.height }}>
+                <g className="nivo_calendar_wrapper" transform={`translate(${margin.left},${margin.top})`}>
+                    <TransitionMotion
+                        defaultStyles={defaultStyles}
+                        styles={days.map(d => {
+                            return {
+                                key:   d.date.toString(),
+                                data:  d,
+                                style: {
+                                    size: spring(d.size, { stiffness, damping }),
+                                    x:    spring(d.x, { stiffness, damping }),
+                                    y:    spring(d.y, { stiffness, damping }),
+                                }
+                            };
+                        })}
+                    >
+                        {interpolatedStyles => (
+                            <g>
+                                {interpolatedStyles.map(d => (
+                                    <rect
+                                        key={d.key}
+                                        x={d.style.x}
+                                        y={d.style.y}
+                                        width={d.style.size}
+                                        height={d.style.size}
+                                        style={{
+                                            fill:        'rgba(0, 0, 0, .15)',
+                                            stroke:      dayBorderColor,
+                                            strokeWidth: dayBorderWidth,
+                                        }}
+                                    />
+                                ))}
+                            </g>
+                        )}
+                    </TransitionMotion>
+                </g>
             </svg>
         );
     }
 }
 
-const { number, string, oneOf } = PropTypes;
-
-Calendar.propTypes = {
-    width:                number.isRequired,
-    height:               number.isRequired,
-    margin:               marginPropType,
-    direction:            oneOf([DIRECTION_HORIZONTAL, DIRECTION_VERTICAL]),
-    daySpacing:           number.isRequired,
-    dayBorderWidth:       number.isRequired,
-    dayBorderColor:       string.isRequired,
-    monthBorderWidth:     number.isRequired,
-    monthBorderColor:     string.isRequired,
-    transitionDuration:   number.isRequired,
-    transitionEasing:     string.isRequired,
-    transitionStaggering: number.isRequired,
-};
-
-Calendar.defaultProps = {
-    margin:               Nivo.defaults.margin,
-    direction:            DIRECTION_HORIZONTAL,
-    daySpacing:           0,
-    dayBorderWidth:       1,
-    dayBorderColor:       '#000',
-    monthBorderWidth:     2,
-    monthBorderColor:     '#000',
-    transitionDuration:   Nivo.defaults.transitionDuration,
-    transitionEasing:     Nivo.defaults.transitionEasing,
-    transitionStaggering: 5,
-};
+Calendar.propTypes = _.omit(calendarPropTypes, [
+    'transitionDuration',
+    'transitionEasing',
+    'transitionStaggering',
+]);
+
+Calendar.defaultProps = _.omit(calendarDefaultProps, [
+    'transitionDuration',
+    'transitionEasing',
+    'transitionStaggering',
+]);
 
 
 export default Calendar;