✨ [feature] Support server rendering (lanjingling0510#4)

.eslintrc

@@ -5,7 +5,9 @@
         "camelcase": 0,
         "indent": [2, 4, {"SwitchCase": 1}],
         "no-use-before-define": 0,
+        "no-restricted-syntax": ["error", "WithStatement"],
         "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
+        "no-param-reassign": 0,
         "func-names": 0,
         "new-cap": 0,
         "no-underscore-dangle": 0,

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 examples/__build__/
 .nyc_output/
 coverage/
+dist

lib/DatePickerItem.js

@@ -5,12 +5,7 @@
 import React, { Component, PropTypes } from 'react';
 import * as TimeUtil from './time.js';
 import { shallowEqual } from './pureRender.js';
-
-import {
-    TRANSITION,
-    TRANSFORM,
-    TRANSFORM_CSS,
-} from './transition';
+import { addPrefixCss, formatCss } from './prefix.js';
 
 const DATE_HEIGHT = 40;                              // 每个日期的高度
 const DATE_LENGTH = 10;                              // 日期的个数
@@ -116,7 +111,7 @@ class DatePickerItem extends Component {
      * @return {undefined}
      */
     _clearTransition(obj) {
-        obj.style[TRANSITION] = ''; // eslint-disable-line
+        addPrefixCss(obj, { transition: '' });
     }
 
     /**
@@ -144,10 +139,14 @@ class DatePickerItem extends Component {
      */
     _moveTo(obj, currentIndex) {
         this.animating = true;
-        obj.style[TRANSITION] = `${TRANSFORM_CSS} .2s ease-out`; // eslint-disable-line
+
+        addPrefixCss(obj, { transition: 'transform .2s ease-out' });
+
         this.setState({
             translateY: -currentIndex * DATE_HEIGHT,
         });
+
+        // NOTE: There is no transitionend, setTimeout is used instead.
         setTimeout(() => {
             this.animating = false;
             this.props.onSelect(this.state.dates[MIDDLE_INDEX]);
@@ -251,10 +250,10 @@ class DatePickerItem extends Component {
     }
 
     render() {
-        const scrollStyle = {
-            [TRANSFORM]: `translateY(${this.state.translateY}px)`,
+        const scrollStyle = formatCss({
+            transform: `translateY(${this.state.translateY}px)`,
             marginTop: this.state.marginTop,
-        };
+        });
 
         return (
             <div className="datepicker-col-1">

lib/prefix.js

@@ -0,0 +1,54 @@
+/**
+ * 驼峰写法
+ * @param  {String} str 要转化的字符串
+ * @return {String}     转化后的字符串
+ */
+export function camelCase(str) {
+    return str.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase()).replace('-', '');
+}
+
+/**
+ * 格式化css属性对象
+ * @param  {Object} props 属性对象
+ * @return {Object}       添加前缀的格式化属性对象
+ */
+export function formatCss(props) {
+    const prefixs = ['-webkit-', '-moz-', '-ms-'];
+
+    const result = {};
+
+    const regPrefix = /transform|transition/;
+
+
+    for (const key in props) {
+        if (props.hasOwnProperty(key)) {
+            const styleValue = props[key];
+
+            // 如果检测是transform或transition属性
+            if (regPrefix.test(key)) {
+                for (let i = 0; i < prefixs.length; i++) {
+                    const styleName = camelCase(prefixs[i] + key);
+                    result[styleName] = styleValue.replace(regPrefix, `${prefixs[i]}$&`);
+                }
+            }
+
+            result[key] = styleValue;
+        }
+    }
+
+    return result;
+}
+
+/**
+ * 为元素添加css样式
+ * @param {Object} element 目标元素
+ * @param {Object} props   css属性对象
+ */
+export function addPrefixCss(element, props) {
+    const formatedProps = formatCss(props);
+    for (const key in formatedProps) {
+        if (formatedProps.hasOwnProperty(key)) {
+            element.style[key] = formatedProps[key];
+        }
+    }
+}

test/functional/DatePicker_spec.js

@@ -24,6 +24,17 @@ function delay(time) {
 }
 
 describe('DatePicker.js', () => {
+
+    describe('Lifecycle', () => {
+        it ('should update value of state when parent component value of props update', () => {
+            const datePicker = mount(
+                <DatePicker {...DEFAULT_PROPS} />
+            );
+            datePicker.setProps({ value: new Date(2016, 8, 15) });
+            expect(datePicker.state('value').getTime()).to.equals(new Date(2016, 8, 15).getTime());
+        });
+    });
+
     describe('logic', () => {
         var datePicker;
         var yearPicker;

test/functional/prefix.spec.js

@@ -0,0 +1,66 @@
+
+import { expect } from 'chai';
+import { formatCss, addPrefixCss } from '../../lib/prefix.js';
+
+
+describe('prefix.js', () => {
+
+    describe('formatCss', () => {
+        it('should return correct formated css property when contain "transform"', function () {
+            const date = {
+                transform: 'translate(100px, 100px, 100px)',
+                margin: '10px',
+            };
+
+            expect(formatCss(date)).to.eql({
+                WebkitTransform: 'translate(100px, 100px, 100px)',
+                MozTransform: 'translate(100px, 100px, 100px)',
+                MsTransform: 'translate(100px, 100px, 100px)',
+                transform: 'translate(100px, 100px, 100px)',
+                margin: '10px',
+            });
+        });
+
+        it('should return correct formated css property when contain "transition"', function () {
+            const date = {
+                transition: 'transform 2s',
+                padding: 0,
+                margin: '10px',
+            };
+
+            expect(formatCss(date)).to.eql({
+                WebkitTransition: '-webkit-transform 2s',
+                MozTransition: '-moz-transform 2s',
+                MsTransition: '-ms-transform 2s',
+                transition: 'transform 2s',
+                padding: 0,
+                margin: '10px',
+            });
+        });
+    });
+
+    describe('addPrefixCss', () => {
+        it('should set correct style', () => {
+            const mock = {
+                style: {}
+            };
+
+            const props = {
+                transition: 'transform 2s',
+                padding: 0,
+                margin: '10px',
+            };
+
+            addPrefixCss(mock, props);
+
+            expect(mock.style).to.eql({
+                WebkitTransition: '-webkit-transform 2s',
+                MozTransition: '-moz-transform 2s',
+                MsTransition: '-ms-transform 2s',
+                transition: 'transform 2s',
+                padding: 0,
+                margin: '10px',
+            });
+        });
+    });
+})