react-ui-basics 0.0.159 → 0.0.162

package/Animated.js

@@ -1,10 +1,9 @@
-import CommonFields from "./CommonFields";
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
 import { inherits as _inherits, createSuper as _createSuper, createClass as _createClass, defineProperty as _defineProperty, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
 import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
 import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
-import {className as __className} from "./ReactConstants";
-import {children as __children} from "./ReactConstants";
 import React from 'react';
 import PropTypes from 'prop-types';
 import { setOf, clearTimeout, allPropsExcept, classNames, requestAnimationFrame, setTimeout } from './Tools.js';
@@ -76,14 +75,14 @@ var Animated = function (_PureComponent) {
     _this = _super.call(this, properties);
     var that = _assertThisInitialized(_this);
     that.state = animatedState(!!properties[value]);
-    that[componentDidMount] = function () {
+    that[ReactConstants[0]] = function () {
       var _props = props(that);
       if (!!_props[value]) processMounting(that, _props[mounting], _props[mountingDelay]);
     };
-    that[componentWillUnmount] = function () {
+    that[ReactConstants[1]] = function () {
       clearTimer(that);
     };
-    that[render] = function () {
+    that[ReactConstants[3]] = function () {
       var _state = state(that);
       if (!_state[enabled]) return null;
       var _props = props(that),
@@ -94,13 +93,15 @@ var Animated = function (_PureComponent) {
       var childStyles = styles["default"];
       if (isMounting) childStyles = styles[mounting];else if (isUnMounting) childStyles = styles[unmounting];else if (isMounted) childStyles = styles[mounted] || styles[mounting];
       var otherProps = allPropsExcept(_props, selfProps);
-      return React.Children.map(_props[children], function (child) {
+      return React.Children.map(_props[ReactConstants[4]], function (child) {
         var _objectSpread2$1;
-        return child && React.cloneElement(child, _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, className, classNames(props(child)[className], _props[className], isMounting && mounting, isMounted && mounted, isUnMounting && unmounting)), _defineProperty(_objectSpread2$1, "style", _objectSpread2(_objectSpread2({}, props(child)[CommonFields[4]]), childStyles)), _objectSpread2$1), otherProps));
+        return child && React.cloneElement(child, _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, className, classNames(props(child)[ReactConstants[5]], _props[ReactConstants[5]], isMounting && mounting, isMounted && mounted, isUnMounting && unmounting)), _defineProperty(_objectSpread2$1, "style", _objectSpread2(_objectSpread2({}, __style(props(child))), childStyles)), _objectSpread2$1), otherProps));
       });
     };
-    that[componentDidUpdate] = function () {
-      var _props = props(that),
+    that[ReactConstants[2]] = function () {
+      var p = props;
+      var t = that;
+      var _props = p(t) || props(that),
           _state = state(that),
           v = _props[value],
           mountingDuration = _props[mounting],

package/AutocompleteSelect.js

@@ -1,10 +1,9 @@
-import CommonFields from "./CommonFields";
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, createClass as _createClass, toConsumableArray as _toConsumableArray } from './_virtual/_rollupPluginBabelHelpers.js';
 import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
 import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
-import {className as __className} from "./ReactConstants";
-import {children as __children} from "./ReactConstants";
 import React from 'react';
 import ReactCreateElement from './ReactCreateElement.js';
 import PropTypes from 'prop-types';
@@ -27,11 +26,11 @@ var DummyChild = function DummyChild(_ref) {
   var id = _ref.id,
       label = _ref.label,
       dataConsumer = _ref.dataConsumer,
-      onClick = _ref.onClick;
+      onClick = _ref[ReactConstants[6]];
   orNoop(dataConsumer)(label || id);
   return ReactCreateElement("div", {
-    [__className]: "DummyChild",
-    onClick: onClick
+    [ReactConstants[5]]: "DummyChild",
+    [ReactConstants[6]]: onClick
   }, label || id);
 };
 var prepareSelected = function prepareSelected(value) {
@@ -68,7 +67,7 @@ var AutocompleteSelect = function (_PureComponent) {
     _classCallCheck(this, AutocompleteSelect);
     _this = _super.call(this, props);
     _this.initSelected = function (_ref2, _ref3) {
-      var value = _ref2[CommonFields[8]],
+      var value = __value(_ref2),
           mode = _ref2.mode,
           allowCustom = _ref2.allowCustom;
       var _ref3$filterValue = _ref3.filterValue,
@@ -89,10 +88,10 @@ var AutocompleteSelect = function (_PureComponent) {
       };
     });
     _this.onClickOutside = function () {
-      var _this$props = _this.props,
+      var _this$props = __props(_this),
           allowCustom = _this$props.allowCustom,
           required = _this$props.required;
-      var filterValue = _this.state.filterValue;
+      var filterValue = __state(_this).filterValue;
       if (allowCustom && (!!filterValue || !required)) {
         _this.onSelect();
       }
@@ -102,17 +101,17 @@ var AutocompleteSelect = function (_PureComponent) {
       _this.onCancel();
     };
     _this.onCancel = function () {
-      orNoop(_this.props.onCancel)();
+      orNoop(__props(_this).onCancel)();
     };
     _this.onSelect = function (selectedId) {
-      var _this$props2 = _this.props,
+      var _this$props2 = __props(_this),
           mode = _this$props2.mode,
           required = _this$props2.required,
           allowCustom = _this$props2.allowCustom,
           onSelect = _this$props2.onSelect,
-          onChange = _this$props2.onChange,
+          onChange = _this$props2[ReactConstants[7]],
           defaultValue = _this$props2["default"];
-      var _this$state = _this.state,
+      var _this$state = __state(_this),
           filterValue = _this$state.filterValue,
           currentSelection = _this$state.selected;
       if (selectedId == null && (!!filterValue || !required) && allowCustom && (!_this.input || !_this.input.check())) selectedId = filterValue.trim();
@@ -124,7 +123,7 @@ var AutocompleteSelect = function (_PureComponent) {
       var selected = _objectSpread2({}, currentSelection);
       if (selected[selectedId] && (defaultValue || isMultiSelect)) {
         delete selected[selectedId];
-        if (defaultValue && Object.keys(selected)[CommonFields[5]] === 0) selected[defaultValue] = defaultValue;
+        if (defaultValue && Object.keys(selected).length === 0) selected[defaultValue] = defaultValue;
       } else if (isSelected && isMultiSelect) {
         selected[selectedId] = selectedId;
       } else if (isSelected) {
@@ -150,33 +149,33 @@ var AutocompleteSelect = function (_PureComponent) {
         selected: {},
         filterValue: ''
       });
-      orNoop(_this.props.onSelect)(null);
-      orNoop(_this.props.onChange)([]);
-      _this.initSelected(_this.props, _this.state);
+      orNoop(__props(_this).onSelect)(null);
+      orNoop(__props(_this)[ReactConstants[7]])([]);
+      _this.initSelected(__props(_this), __state(_this));
     };
     _this.remove = function (id) {
-      var result = _objectSpread2(_objectSpread2({}, _this.state), {}, {
-        selected: _objectSpread2({}, _this.state.selected),
+      var result = _objectSpread2(_objectSpread2({}, __state(_this)), {}, {
+        selected: _objectSpread2({}, __state(_this).selected),
         filterValue: ''
       });
       delete result.selected[id];
       _this.setState(result);
-      orNoop(_this.props.onChange)(Object.values(result.selected));
+      orNoop(__props(_this)[ReactConstants[7]])(Object.values(result.selected));
     };
-    _this.onChange = function (event) {
-      var value = event.target[CommonFields[8]];
+    _this[ReactConstants[7]] = function (event) {
+      var value = __target(event).value;
       _this.setState({
         filterValue: value
       });
-      _this.props.onFilterInputChange == null ? void 0 : _this.props.onFilterInputChange(value);
+      __props(_this).onFilterInputChange == null ? void 0 : __props(_this).onFilterInputChange(value);
     };
     var that = _assertThisInitialized(_this);
     that.state = {
-      selected: prepareSelected(props[CommonFields[8]]),
+      selected: prepareSelected(__value(props)),
       isActive: !!props.focused
     };
     that.randomId = getRandomId('acs-');
-    var data = props.data,
+    var data = __data(props),
         getSelected = props.getSelected;
     isFunction(data) && data(function (data) {
       return that.setState({
@@ -184,48 +183,48 @@ var AutocompleteSelect = function (_PureComponent) {
       });
     });
     getSelected && getSelected(function () {
-      return Object.values(that.state.selected);
+      return Object.values(__state(that).selected);
     });
     return _this;
   }
   _createClass(AutocompleteSelect, [{
-    key: "componentDidMount",
+    key: [ReactConstants[0]],
     value: function componentDidMount() {
       var _this2 = this;
       addEventListener(DOCUMENT, 'mousedown', this.listener = function (e) {
-        if (_this2.state.isActive && _this2.el && !_this2.el.contains(e.target)) {
+        if (__state(_this2).isActive && _this2.el && !_this2.el.contains(__target(e))) {
           _this2.onClickOutside();
         }
       });
-      if (this.props.required) {
+      if (__props(this).required) {
         var form = findParent(this.el.parentNode, 'form');
         if (form) {
           addEventListener(this.submitButton = form.querySelector('button[type=submit]'), 'click', this.formSubmitListener = function (e) {
-            var errored = Object.keys(_this2.state.selected)[CommonFields[5]] === 0;
+            var errored = Object.keys(__state(_this2).selected).length === 0;
             _this2.setState({
               errored: errored
             });
           });
         }
       }
-      this.initSelected(this.props, this.state);
+      this.initSelected(__props(this), __state(this));
     }
   }, {
-    key: "componentDidUpdate",
+    key: [ReactConstants[2]],
     value: function componentDidUpdate(prevProps, prevState, snapshot) {
-      if (this.props[CommonFields[8]] !== prevProps[CommonFields[8]]) this.initSelected(this.props, this.state);
+      if (__props(this).value !== __value(prevProps)) this.initSelected(__props(this), __state(this));
     }
   }, {
-    key: "componentWillUnmount",
+    key: [ReactConstants[1]],
     value: function componentWillUnmount() {
       removeEventListener(DOCUMENT, 'mousedown', this.listener);
       removeEventListener(this.submitButton, 'click', this.formSubmitListener);
     }
   }, {
-    key: "render",
+    key: [ReactConstants[3]],
     value: function render() {
       var _this3 = this;
-      var _this$props3 = this.props,
+      var _this$props3 = __props(this),
           childComponent = _this$props3.childComponent,
           childProps = _this$props3.childProps,
           withArrow = _this$props3.withArrow,
@@ -237,44 +236,44 @@ var AutocompleteSelect = function (_PureComponent) {
           mode = _this$props3.mode,
           selectedMode = _this$props3.selectedMode,
           prefilter = _this$props3.prefilter,
-          className = _this$props3[__className],
+          className = _this$props3[ReactConstants[5]],
           scrollToValue = _this$props3.scrollToValue,
           scroll = _this$props3.scroll,
           required = _this$props3.required,
           allowCustom = _this$props3.allowCustom,
           inlineSelected = _this$props3.inlineSelected,
           removeIcon = _this$props3.removeIcon;
-      var id = this.props.id || this.randomId;
-      var selectedComponent = this.props.selectedComponent || childComponent;
-      var _this$state2 = this.state,
+      var id = __props(this).id || this.randomId;
+      var selectedComponent = __props(this).selectedComponent || childComponent;
+      var _this$state2 = __state(this),
           _this$state2$selected = _this$state2.selected,
           selected = _this$state2$selected === void 0 ? {} : _this$state2$selected,
           _this$state2$filterVa = _this$state2.filterValue,
           filterValue = _this$state2$filterVa === void 0 ? '' : _this$state2$filterVa,
           errored = _this$state2.errored;
-      var isActive = this.state.isActive;
-      if (this.props.isActive !== UNDEFINED) {
-        isActive = this.props.isActive;
+      var isActive = __state(this).isActive;
+      if (__props(this).isActive !== UNDEFINED) {
+        isActive = __props(this).isActive;
       }
-      var _this$props4 = this.props,
-          _this$props4$data = _this$props4.data,
+      var _this$props4 = __props(this),
+          _this$props4$data = __data(_this$props4),
           data = _this$props4$data === void 0 ? [] : _this$props4$data,
           _this$props4$labels = _this$props4.labels,
           labels = _this$props4$labels === void 0 ? {} : _this$props4$labels;
-      if (this.state.data) data = this.state.data;
+      if (__state(this).data) data = __state(this).data;
       if (!Array.isArray(data)) data = [];
       var selectedIds = Object.values(selected);
-      var hasSelected = selectedIds[CommonFields[5]] !== 0;
+      var hasSelected = __length(selectedIds) !== 0;
       var setActive = function setActive(e) {
         stopPropagation(e);
         _this3.setState({
           isActive: true
         }, function () {
-          return scrollToValue && selectedIds[CommonFields[5]] > 0 && _this3.list.scrollTo(selectedIds[0]);
+          return scrollToValue && __length(selectedIds) > 0 && _this3.list.scrollTo(selectedIds[0]);
         });
       };
       var toggle = function toggle(e) {
-        if (!_this3.state.isActive) {
+        if (!__state(_this3).isActive) {
           setActive(e);
         } else {
           stopPropagation(e);
@@ -291,32 +290,32 @@ var AutocompleteSelect = function (_PureComponent) {
       var filterFunction = this.createFilter(prefilter, filterValue, filterValueTrimmed.toLowerCase(), filter);
       return ReactCreateElement("div", {
         id: id,
-        [__className]: classNames('AutocompleteSelect', mode, isMultipleSelect(mode) && 'multi', className, withFilter ? 'withFilter' : 'withoutFilter', isActive && 'active', errored && 'errored', inlineSelected && 'inlineSelected', hasSelected && 'hasSelected'),
+        [ReactConstants[5]]: classNames('AutocompleteSelect', mode, isMultipleSelect(mode) && 'multi', className, withFilter ? 'withFilter' : 'withoutFilter', isActive && 'active', errored && 'errored', inlineSelected && 'inlineSelected', hasSelected && 'hasSelected'),
         ref: ref('el', this)
       }, label && ReactCreateElement("label", {
-        [__className]: classNames("label", (hasSelected || filterValue) && 'active', hasSelected && 'hasSelected'),
+        [ReactConstants[5]]: classNames("label", (hasSelected || filterValue) && 'active', hasSelected && 'hasSelected'),
         htmlFor: 'f-' + id,
-        onClick: function onClick() {
+        [ReactConstants[6]]: function onClick() {
           if (mode === MODE_MULTIPLE_MINI_INLINE || !isActive) {
             toggle();
           }
         }
       }, label, required && ' *', withArrow && ReactCreateElement("span", {
-        [__className]: "arrow"
+        [ReactConstants[5]]: "arrow"
       })), (!isActive || mode === MODE_MULTIPLE || mode === MODE_INLINE_MULTIPLE || mode === MODE_MULTIPLE_MINI_INLINE || mode === MODE_MULTIPLE_AUTO || !withFilter) && !inlineSelected && hasSelected && ReactCreateElement("div", {
-        [__className]: classNames('selected', !label && 'nolabel', (mode === MODE_MULTIPLE_MINI || mode === MODE_MINI || mode === MODE_MULTIPLE_MINI_INLINE) && 'clickable', selectedMode),
-        onClick: toggle
+        [ReactConstants[5]]: classNames('selected', !label && 'nolabel', (mode === MODE_MULTIPLE_MINI || mode === MODE_MINI || mode === MODE_MULTIPLE_MINI_INLINE) && 'clickable', selectedMode),
+        [ReactConstants[6]]: toggle
       }, selectedMode === 'full' && selectedIds.map(function (id) {
         return ReactCreateElement("div", {
-          [__className]: "value",
+          [ReactConstants[5]]: "value",
           key: id
         }, React.createElement(selectedComponent, _objectSpread2(_objectSpread2({}, childProps), {}, {
           id: id,
           label: getLabel(labels, id),
-          onClick: setActive
+          [ReactConstants[6]]: setActive
         })), ReactCreateElement("div", {
-          [__className]: "button remove",
-          onClick: function onClick(e) {
+          [ReactConstants[5]]: "button remove",
+          [ReactConstants[6]]: function onClick(e) {
             stopPropagation(e);
             _this3.remove(id);
           }
@@ -327,25 +326,25 @@ var AutocompleteSelect = function (_PureComponent) {
         }, React.createElement(selectedComponent, _objectSpread2(_objectSpread2({}, childProps), {}, {
           id: id,
           label: getLabel(labels, id),
-          onClick: setActive
-        })), id !== selectedIds[selectedIds[CommonFields[5]] - 1] && ', ');
+          [ReactConstants[6]]: setActive
+        })), id !== selectedIds[__length(selectedIds) - 1] && ', ');
       }), !label && withArrow && ReactCreateElement("span", {
-        [__className]: "arrow"
+        [ReactConstants[5]]: "arrow"
       }), withReset && ReactCreateElement(Button, {
-        [__className]: "reset",
+        [ReactConstants[5]]: "reset",
         raised: false,
-        onClick: this.clean
+        [ReactConstants[6]]: this.clean
       }, removeIcon)), inlineSelected && hasSelected && ReactCreateElement(React.Fragment, null, selectedMode === 'full' && selectedIds.map(function (id) {
         return ReactCreateElement("div", {
-          [__className]: "value",
+          [ReactConstants[5]]: "value",
           key: id
         }, React.createElement(selectedComponent, _objectSpread2(_objectSpread2({}, childProps), {}, {
           id: id,
           label: getLabel(labels, id),
-          onClick: setActive
+          [ReactConstants[6]]: setActive
         })), ReactCreateElement("div", {
-          [__className]: "button remove",
-          onClick: function onClick(e) {
+          [ReactConstants[5]]: "button remove",
+          [ReactConstants[6]]: function onClick(e) {
             stopPropagation(e);
             _this3.remove(id);
           }
@@ -356,10 +355,10 @@ var AutocompleteSelect = function (_PureComponent) {
         }, React.createElement(selectedComponent, _objectSpread2(_objectSpread2({}, childProps), {}, {
           id: id,
           label: getLabel(labels, id),
-          onClick: setActive
-        })), id !== selectedIds[selectedIds[CommonFields[5]] - 1] && ', ');
-      })), (isActive || !hasSelected && mode !== MODE_MULTIPLE_MINI_INLINE || mode === MODE_MULTIPLE || mode === MODE_MULTIPLE_AUTO && selectedIds[CommonFields[5]] > 1 || mode === MODE_INLINE_MULTIPLE) && ReactCreateElement("div", {
-        [__className]: "input",
+          [ReactConstants[6]]: setActive
+        })), id !== selectedIds[__length(selectedIds) - 1] && ', ');
+      })), (isActive || !hasSelected && mode !== MODE_MULTIPLE_MINI_INLINE || mode === MODE_MULTIPLE || mode === MODE_MULTIPLE_AUTO && __length(selectedIds) > 1 || mode === MODE_INLINE_MULTIPLE) && ReactCreateElement("div", {
+        [ReactConstants[5]]: "input",
         "data-value": filterValue
       }, withFilter && ReactCreateElement(TextField, {
         autoComplete: "new-password",
@@ -368,13 +367,13 @@ var AutocompleteSelect = function (_PureComponent) {
         focused: isActive,
         value: filterValue,
         label: inputLabel,
-        onChange: this.onChange,
+        [ReactConstants[7]]: this[ReactConstants[7]],
         onFocus: function onFocus(e) {
           return _this3.setState({
             isActive: true
           });
         },
-        check: this.props.filterCheck,
+        check: __props(this).filterCheck,
         onKeyDown: function onKeyDown(e) {
           var keyCode = e.keyCode;
           if (keyCode === 38
@@ -394,8 +393,8 @@ var AutocompleteSelect = function (_PureComponent) {
             _this3.onSelect(_this3.getSelected());
           } else if (keyCode === 8
           ) {
-            if (!filterValue && selectedIds[CommonFields[5]] !== 0 && isMultipleSelect(mode)) {
-              _this3.remove(selectedIds[selectedIds[CommonFields[5]] - 1]);
+            if (!filterValue && __length(selectedIds) !== 0 && isMultipleSelect(mode)) {
+              _this3.remove(selectedIds[__length(selectedIds) - 1]);
             }
             _this3.reset();
           } else if (keyCode === 46
@@ -412,7 +411,7 @@ var AutocompleteSelect = function (_PureComponent) {
           }
         }
       }), !withFilter && inputLabel && ReactCreateElement("label", null, inputLabel)), ReactCreateElement(FilteredList, {
-        [__className]: classNames(isActive && 'visible'),
+        [ReactConstants[5]]: classNames(isActive && 'visible'),
         ref: ref('list', this),
         filter: filterFunction,
         selectSingle: !allowCustom,

package/Button.js

@@ -1,10 +1,9 @@
-import CommonFields from "./CommonFields";
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from './_virtual/_rollupPluginBabelHelpers.js';
 import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
 import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
-import {className as __className} from "./ReactConstants";
-import {children as __children} from "./ReactConstants";
 import 'react';
 import ReactCreateElement from './ReactCreateElement.js';
 import { classNames, createRef, DOCUMENT, addEventListener, orNoop } from './Tools.js';
@@ -23,14 +22,14 @@ var Button = function (_PureComponent) {
     var ripple = createRef();
     var rippleClassName = stateGS(that);
     var onMouseDown = function onMouseDown(e) {
-      if (!_this.props.withRipple) return;
-      var rect = el()[CommonFields[13]]();
+      if (!props(that).withRipple) return;
+      var rect = el().getBoundingClientRect();
       var rippleElement = ripple();
-      var style = rippleElement[CommonFields[4]];
+      var style = __style(rippleElement);
       var body = DOCUMENT.body;
-      style[CommonFields[1]] = style[CommonFields[0]] = Math.max(rect[CommonFields[0]], rect[CommonFields[1]]) + 'px';
-      style[CommonFields[2]] = e[CommonFields[7]] - rect[CommonFields[2]] - rippleElement.offsetHeight / 2 - body[CommonFields[11]] + 'px';
-      style[CommonFields[3]] = e[CommonFields[6]] - rect[CommonFields[3]] - rippleElement.offsetWidth / 2 - body[CommonFields[12]] + 'px';
+      style.height = style.width = Math.max(__width(rect), __height(rect)) + 'px';
+      style.top = __pageY(e) - __top(rect) - rippleElement.offsetHeight / 2 - __scrollTop(body) + 'px';
+      style.left = __pageX(e) - __left(rect) - rippleElement.offsetWidth / 2 - __scrollLeft(body) + 'px';
       rippleClassName('show');
       addEventListener(rippleElement, 'animationend', function () {
         rippleClassName('showed');
@@ -39,37 +38,37 @@ var Button = function (_PureComponent) {
     var onFocus = function onFocus(e) {
       orNoop(props(that).onFocus)(e);
       if (rippleClassName() === 'show') return;
-      var rect = el()[CommonFields[13]]();
-      var style = ripple()[CommonFields[4]];
-      var size = Math.max(rect[CommonFields[0]], rect[CommonFields[1]]) * 0.8;
-      style[CommonFields[1]] = style[CommonFields[0]] = size + 'px';
-      style[CommonFields[2]] = rect[CommonFields[1]] / 2 - size / 2 + 'px';
-      style[CommonFields[3]] = rect[CommonFields[0]] / 2 - size / 2 + 'px';
+      var rect = el().getBoundingClientRect();
+      var style = __style(ripple());
+      var size = Math.max(__width(rect), __height(rect)) * 0.8;
+      style.height = style.width = size + 'px';
+      style.top = __height(rect) / 2 - size / 2 + 'px';
+      style.left = __width(rect) / 2 - size / 2 + 'px';
       rippleClassName('focused');
     };
-    that[render] = function () {
+    that[ReactConstants[3]] = function () {
       var _props = props(that),
-          children = _props[__children],
+          children = _props[ReactConstants[4]],
           type = _props.type,
-          className = _props[__className],
-          onClick = _props.onClick,
+          className = _props[ReactConstants[5]],
+          onClick = _props[ReactConstants[6]],
           flat = _props.flat,
           _props$raised = _props.raised,
           raised = _props$raised === void 0 ? !flat : _props$raised,
           round = _props.round,
-          style = _props[CommonFields[4]],
+          style = __style(_props),
           disabled = _props.disabled;
       return ReactCreateElement("button", {
-        [__className]: classNames('Button', className, disabled && 'disabled', raised && 'raised', flat && 'flat', round && 'round'),
+        [ReactConstants[5]]: classNames('Button', className, disabled && 'disabled', raised && 'raised', flat && 'flat', round && 'round'),
         onFocus: onFocus,
         disabled: disabled,
         style: style,
         type: type,
-        onClick: onClick,
+        [ReactConstants[6]]: onClick,
         onMouseDown: onMouseDown,
         ref: el
       }, children, ReactCreateElement("span", {
-        [__className]: classNames("ripple", rippleClassName()),
+        [ReactConstants[5]]: classNames("ripple", rippleClassName()),
         ref: ripple
       }));
     };
@@ -85,8 +84,8 @@ if (process.env.NODE_ENV !== 'production') {
     disabled: PropTypes.bool,
     withRipple: PropTypes.bool,
     type: PropTypes.oneOf(['button', 'submit', 'reset']),
-    [__className]: PropTypes.string,
-    onClick: PropTypes.func,
+    [ReactConstants[5]]: PropTypes.string,
+    [ReactConstants[6]]: PropTypes.func,
     onFocus: PropTypes.func,
     style: PropTypes.object
   };

package/Checkbox.js

@@ -1,10 +1,9 @@
-import CommonFields from "./CommonFields";
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
 import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, createClass as _createClass } from './_virtual/_rollupPluginBabelHelpers.js';
 import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
 import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
-import {className as __className} from "./ReactConstants";
-import {children as __children} from "./ReactConstants";
 import 'react';
 import ReactCreateElement from './ReactCreateElement.js';
 import { classNames, getRandomId } from './Tools.js';
@@ -20,22 +19,22 @@ var Checkbox = function (_PureComponent) {
     _this = _super.call(this, properties);
     var randomId = getRandomId('cb-');
     var props = propsGetter(_assertThisInitialized(_this));
-    _this[render] = function () {
+    _this[ReactConstants[3]] = function () {
       var _props = props(),
           label = _props.label,
           name = _props.name,
-          onChange = _props.onChange,
-          value = _props[CommonFields[8]],
-          className = _props[__className],
+          onChange = _props[ReactConstants[7]],
+          value = __value(_props),
+          className = _props[ReactConstants[5]],
           disabled = _props.disabled;
       var id = props().id || randomId;
       return ReactCreateElement("div", {
-        [__className]: classNames("Checkbox", className)
+        [ReactConstants[5]]: classNames("Checkbox", className)
       }, ReactCreateElement("input", {
         name: name,
         id: id,
         type: "checkbox",
-        onChange: onChange,
+        [ReactConstants[7]]: onChange,
         checked: value,
         disabled: disabled
       }), ReactCreateElement("label", {
@@ -48,10 +47,10 @@ var Checkbox = function (_PureComponent) {
 }(PureComponent);
 if (process.env.NODE_ENV !== 'production') {
   Checkbox.propTypes = {
-    onChange: PropTypes.func.isRequired,
+    [ReactConstants[7]]: PropTypes.func.isRequired,
     value: PropTypes.bool,
     disabled: PropTypes.bool,
-    [__className]: PropTypes.string,
+    [ReactConstants[5]]: PropTypes.string,
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     name: PropTypes.string,
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number])

package/CircleProgress.js

@@ -1,10 +1,9 @@
-import CommonFields from "./CommonFields";
+import ReactConstants from "./ReactConstants";
+import {clientHeight as __clientHeight, clientWidth as __clientWidth, createAccessor as __createAccessor, data as __data, height as __height, left as __left, length as __length, pageX as __pageX, pageY as __pageY, props as __props, scrollLeft as __scrollLeft, scrollTop as __scrollTop, state as __state, style as __style, target as __target, top as __top, value as __value, width as __width} from "./CommonFields";
 import 'react';
 import {toConsumableArray as __toConsumableArray} from "./_virtual/_rollupPluginBabelHelpers";
 import {extends as __extends} from "./_virtual/_rollupPluginBabelHelpers";
 import {inherits as __inherits} from "./_virtual/_rollupPluginBabelHelpers";
-import {className as __className} from "./ReactConstants";
-import {children as __children} from "./ReactConstants";
 import ReactCreateElement from './ReactCreateElement.js';
 import PropTypes from 'prop-types';
 
@@ -14,14 +13,14 @@ var dashoffset = function dashoffset(percent) {
   return length * (100 - percent) / 100;
 };
 var CircleProgress = function CircleProgress(_ref) {
-  var value = _ref[CommonFields[8]];
+  var value = __value(_ref);
   value = Number.parseFloat(value);
   return ReactCreateElement("div", {
-    [__className]: "CircleProgress"
+    [ReactConstants[5]]: "CircleProgress"
   }, ReactCreateElement("svg", {
     viewBox: "0 0 24 24"
   }, ReactCreateElement("path", {
-    [__className]: "line",
+    [ReactConstants[5]]: "line",
     style: {
       strokeDashoffset: dashoffset(Number.isFinite(value) ? value : 0),
       strokeDasharray: length