make ids friendly for server rendering

Author: claus

src/Dat.jsx

@@ -4,11 +4,6 @@ import cloneDeep from 'lodash.clonedeep';
 import isUndefined from 'lodash.isundefined';
 import React, { PropTypes, cloneElement } from 'react';
 
-function uuid(a) {
-    // https://gist.github.com/jed/982883
-    return a ? (a^Math.random()*16>>a/4).toString(16) : ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, uuid);
-}
-
 class Dat extends React.Component {
 
     static propTypes = {
@@ -25,6 +20,7 @@ class Dat extends React.Component {
         liveUpdate: true,
     };
 
+
     constructor(props, context) {
         super(props, context);
         this.handleUpdateValue = this.handleUpdateValue.bind(this);
@@ -41,7 +37,6 @@ class Dat extends React.Component {
         return React.Children.toArray(children).map((child, i) => {
             const liveUpdate = isUndefined(child.props.liveUpdate) ? this.props.liveUpdate : child.props.liveUpdate;
             return cloneElement(child, {
-                id: uuid(),
                 key: i,
                 data,
                 liveUpdate,

src/components/DatBoolean.jsx

@@ -2,11 +2,11 @@ import result from 'lodash.result';
 import isFinite from 'lodash.isfinite';
 import isString from 'lodash.isstring';
 import React, { PropTypes } from 'react';
+import { createId } from '../utils';
 
 class DatBoolean extends React.Component {
 
     static propTypes = {
-        id: PropTypes.string,
         data: PropTypes.object,
         path: PropTypes.string,
         label: PropTypes.string,
@@ -25,6 +25,7 @@ class DatBoolean extends React.Component {
 
     componentWillMount() {
         this.setState({
+            id: createId(),
             value: this.getValue()
         });
     }
@@ -52,8 +53,7 @@ class DatBoolean extends React.Component {
     }
 
     render() {
-        const { id } = this.props;
-        const { value } = this.state;
+        const { value, id } = this.state;
         const label = isString(this.props.label) ? this.props.label : this.props.path;
         return (
             <li className="cr boolean">

src/components/DatNumber.jsx

@@ -4,11 +4,11 @@ import result from 'lodash.result';
 import isFinite from 'lodash.isfinite';
 import isString from 'lodash.isstring';
 import React, { PropTypes } from 'react';
+import { createId } from '../utils';
 
 class DatNumber extends React.Component {
 
     static propTypes = {
-        id: PropTypes.string,
         data: PropTypes.object,
         path: PropTypes.string,
         label: PropTypes.string,
@@ -31,13 +31,13 @@ class DatNumber extends React.Component {
         this.handleMouseMove = this.handleMouseMove.bind(this);
         this.handleMouseUp = this.handleMouseUp.bind(this);
         this.state = {
-            value: 0,
             isSliderActive: false,
         };
     }
 
     componentWillMount() {
         this.setState({
+            id : createId(),
             value: this.getValue()
         });
     }
@@ -144,8 +144,8 @@ class DatNumber extends React.Component {
     }
 
     render() {
-        const { id, min, max, _labelWidth } = this.props;
-        const { value, isSliderActive } = this.state;
+        const { min, max, _labelWidth } = this.props;
+        const { value, isSliderActive, id } = this.state;
         const label = isString(this.props.label) ? this.props.label : this.props.path;
         const hasSlider = isFinite(min) && isFinite(min);
         const labelStyle = _labelWidth ? { width: `${_labelWidth}%` } : {};

src/components/DatString.jsx

@@ -1,11 +1,11 @@
 import result from 'lodash.result';
 import isString from 'lodash.isstring';
 import React, { PropTypes } from 'react';
+import { createId } from '../utils';
 
 class DatString extends React.Component {
 
     static propTypes = {
-        id: PropTypes.string,
         data: PropTypes.object,
         path: PropTypes.string,
         label: PropTypes.string,
@@ -23,6 +23,7 @@ class DatString extends React.Component {
 
     componentWillMount() {
         this.setState({
+            id: createId(),
             value: this.getValue()
         });
     }
@@ -56,8 +57,8 @@ class DatString extends React.Component {
     }
 
     render() {
-        const { id, _labelWidth } = this.props;
-        const { value } = this.state;
+        const { _labelWidth } = this.props;
+        const { value, id } = this.state;
         const label = isString(this.props.label) ? this.props.label : this.props.path;
         const labelStyle = _labelWidth ? { width: `${_labelWidth}%` } : {};
         const inputStyle = _labelWidth ? { width: `${100 - _labelWidth}%` } : {};

src/utils/index.js

@@ -0,0 +1,3 @@
+let currentId = 0;
+
+export const createId = () => `__react_dat_gui_${currentId++}__`;