vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Run build

old
Javi Velasco 2016-11-01 14:26:45 +01:00
parent cbe6fae23d
commit d4587d982b
60 changed files with 1260 additions and 611 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
lib/ThemeProvider.js Normal file
View File

@ -0,0 +1,54 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getProperty = undefined;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require('styled-components');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var getProperty = function getProperty(name) {
return function (props) {
var value = name.split('.').reduce(function (current, next) {
return current[next];
}, props.theme.reactToolbox);
return value;
};
};
var defaultTheme = {
animationCurveDefault: 'cubic-bezier(0.4, 0, 0.2, 1)',
animationCurveFastOutLinearIn: 'cubic-bezier(0.4, 0, 0.2, 1)',
primaryColor: 'rgba(63, 81, 181, 1)',
primaryColorContrast: 'rgba(255, 255, 255, 1)',
accentColor: 'rgba(255, 64, 129, 1)',
accentColorContrast: 'rgba(255, 255, 255, 1)',
shadow2p: '\n 0 2px 2px 0 rgba(0, 0, 0, 0.14),\n 0 3px 1px -2px rgba(0, 0, 0, 0.2),\n 0 1px 5px 0 rgba(0, 0, 0, 0.12);\n '
};
var ReactToolboxThemeProvider = function ReactToolboxThemeProvider(props) {
var theme = {
reactToolbox: Object.assign({}, defaultTheme, props.theme)
};
return _react2.default.createElement(
_styledComponents.ThemeProvider,
{ theme: theme },
props.children
);
};
ReactToolboxThemeProvider.propTypes = {
children: _react.PropTypes.node,
theme: _react.PropTypes.object
};
exports.default = ReactToolboxThemeProvider;
exports.getProperty = getProperty;

21
lib/app_bar/AppBar.js
View File

@ -51,9 +51,8 @@ var factory = function factory(IconButton) {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = AppBar.__proto__ || Object.getPrototypeOf(AppBar)).call.apply(_ref, [this].concat(args))), _this), _this.state = { hidden: false, height: 0 }, _this.initializeScroll = function () {
window.addEventListener('scroll', _this.handleScroll);
var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect();
var height = _this$rootNode$getBou.height;
var _this$rootNode$getBou = _this.rootNode.getBoundingClientRect(),
height = _this$rootNode$getBou.height;
_this.curScroll = window.scrollY;
_this.setState({ height: height });
@ -98,14 +97,14 @@ var factory = function factory(IconButton) {
var _classnames,
_this2 = this;
var _props = this.props;
var children = _props.children;
var leftIcon = _props.leftIcon;
var onLeftIconClick = _props.onLeftIconClick;
var onRightIconClick = _props.onRightIconClick;
var rightIcon = _props.rightIcon;
var theme = _props.theme;
var title = _props.title;
var _props = this.props,
children = _props.children,
leftIcon = _props.leftIcon,
onLeftIconClick = _props.onLeftIconClick,
onRightIconClick = _props.onRightIconClick,
rightIcon = _props.rightIcon,
theme = _props.theme,
title = _props.title;
var className = (0, _classnames3.default)(theme.appBar, (_classnames = {}, _defineProperty(_classnames, theme.fixed, this.props.fixed), _defineProperty(_classnames, theme.flat, this.props.flat), _defineProperty(_classnames, theme.scrollHide, this.state.hidden), _classnames), this.props.className);

56
lib/autocomplete/Autocomplete.js
View File

@ -189,10 +189,9 @@ var factory = function factory(Chip, Input) {
try {
for (var _iterator = source[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var _step$value = _slicedToArray(_step.value, 2);
var key = _step$value[0];
var value = _step$value[1];
var _step$value = _slicedToArray(_step.value, 2),
key = _step$value[0],
value = _step$value[1];
if (!values.has(key) && this.matches(value.toLowerCase().trim(), query)) {
suggest.set(key, value);
@ -221,10 +220,9 @@ var factory = function factory(Chip, Input) {
try {
for (var _iterator2 = source[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _step2$value = _slicedToArray(_step2.value, 2);
var key = _step2$value[0];
var value = _step2$value[1];
var _step2$value = _slicedToArray(_step2.value, 2),
key = _step2$value[0],
value = _step2$value[1];
if (this.matches(value.toLowerCase().trim(), query)) {
suggest.set(key, value);
@ -295,10 +293,9 @@ var factory = function factory(Chip, Input) {
try {
for (var _iterator3 = this.source()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
var _step3$value = _slicedToArray(_step3.value, 2);
var k = _step3$value[0];
var v = _step3$value[1];
var _step3$value = _slicedToArray(_step3.value, 2),
k = _step3$value[0],
v = _step3$value[1];
if (vals.indexOf(k) !== -1) valueMap.set(k, v);
}
@ -335,10 +332,9 @@ var factory = function factory(Chip, Input) {
if (this.props.multiple) {
var selectedItems = [].concat(_toConsumableArray(this.values())).map(function (_ref2) {
var _ref3 = _slicedToArray(_ref2, 2);
var key = _ref3[0];
var value = _ref3[1];
var _ref3 = _slicedToArray(_ref2, 2),
key = _ref3[0],
value = _ref3[1];
return _react2.default.createElement(
Chip,
@ -367,10 +363,9 @@ var factory = function factory(Chip, Input) {
var theme = this.props.theme;
var suggestions = [].concat(_toConsumableArray(this.suggestions())).map(function (_ref4) {
var _ref5 = _slicedToArray(_ref4, 2);
var key = _ref5[0];
var value = _ref5[1];
var _ref5 = _slicedToArray(_ref4, 2),
key = _ref5[0],
value = _ref5[1];
var className = (0, _classnames5.default)(theme.suggestion, _defineProperty({}, theme.active, _this3.state.active === key));
return _react2.default.createElement(
@ -396,17 +391,16 @@ var factory = function factory(Chip, Input) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var allowCreate = _props.allowCreate;
var error = _props.error;
var label = _props.label;
var source = _props.source;
var suggestionMatch = _props.suggestionMatch;
var selectedPosition = _props.selectedPosition;
var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
var theme = _props.theme;
var other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
var _props = this.props,
allowCreate = _props.allowCreate,
error = _props.error,
label = _props.label,
source = _props.source,
suggestionMatch = _props.suggestionMatch,
selectedPosition = _props.selectedPosition,
showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet,
theme = _props.theme,
other = _objectWithoutProperties(_props, ['allowCreate', 'error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme']);
var className = (0, _classnames5.default)(theme.autocomplete, _defineProperty({}, theme.focus, this.state.focus), this.props.className);

17
lib/avatar/Avatar.js
View File

@ -29,15 +29,14 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
var factory = function factory(FontIcon) {
var Avatar = function Avatar(_ref) {
var children = _ref.children;
var className = _ref.className;
var cover = _ref.cover;
var icon = _ref.icon;
var image = _ref.image;
var theme = _ref.theme;
var title = _ref.title;
var other = _objectWithoutProperties(_ref, ['children', 'className', 'cover', 'icon', 'image', 'theme', 'title']);
var children = _ref.children,
className = _ref.className,
cover = _ref.cover,
icon = _ref.icon,
image = _ref.image,
theme = _ref.theme,
title = _ref.title,
other = _objectWithoutProperties(_ref, ['children', 'className', 'cover', 'icon', 'image', 'theme', 'title']);
return _react2.default.createElement(
'div',

31
lib/button/BrowseButton.js
View File

@ -72,22 +72,21 @@ var factory = function factory(ripple, FontIcon) {
value: function render() {
var _classnames;
var _props = this.props;
var accent = _props.accent;
var children = _props.children;
var className = _props.className;
var flat = _props.flat;
var floating = _props.floating;
var icon = _props.icon;
var inverse = _props.inverse;
var label = _props.label;
var mini = _props.mini;
var neutral = _props.neutral;
var primary = _props.primary;
var theme = _props.theme;
var raised = _props.raised;
var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
var _props = this.props,
accent = _props.accent,
children = _props.children,
className = _props.className,
flat = _props.flat,
floating = _props.floating,
icon = _props.icon,
inverse = _props.inverse,
label = _props.label,
mini = _props.mini,
neutral = _props.neutral,
primary = _props.primary,
theme = _props.theme,
raised = _props.raised,
others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
var element = 'label';
var level = primary ? 'primary' : accent ? 'accent' : 'neutral';

33
lib/button/Button.js
View File

@ -70,23 +70,22 @@ var factory = function factory(ripple, FontIcon) {
value: function render() {
var _classnames;
var _props = this.props;
var accent = _props.accent;
var children = _props.children;
var className = _props.className;
var flat = _props.flat;
var floating = _props.floating;
var href = _props.href;
var icon = _props.icon;
var inverse = _props.inverse;
var label = _props.label;
var mini = _props.mini;
var neutral = _props.neutral;
var primary = _props.primary;
var theme = _props.theme;
var raised = _props.raised;
var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'href', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
var _props = this.props,
accent = _props.accent,
children = _props.children,
className = _props.className,
flat = _props.flat,
floating = _props.floating,
href = _props.href,
icon = _props.icon,
inverse = _props.inverse,
label = _props.label,
mini = _props.mini,
neutral = _props.neutral,
primary = _props.primary,
theme = _props.theme,
raised = _props.raised,
others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'flat', 'floating', 'href', 'icon', 'inverse', 'label', 'mini', 'neutral', 'primary', 'theme', 'raised']);
var element = href ? 'a' : 'button';
var level = primary ? 'primary' : accent ? 'accent' : 'neutral';

23
lib/button/IconButton.js
View File

@ -70,18 +70,17 @@ var factory = function factory(ripple, FontIcon) {
value: function render() {
var _classnames;
var _props = this.props;
var accent = _props.accent;
var children = _props.children;
var className = _props.className;
var href = _props.href;
var icon = _props.icon;
var inverse = _props.inverse;
var neutral = _props.neutral;
var primary = _props.primary;
var theme = _props.theme;
var others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme']);
var _props = this.props,
accent = _props.accent,
children = _props.children,
className = _props.className,
href = _props.href,
icon = _props.icon,
inverse = _props.inverse,
neutral = _props.neutral,
primary = _props.primary,
theme = _props.theme,
others = _objectWithoutProperties(_props, ['accent', 'children', 'className', 'href', 'icon', 'inverse', 'neutral', 'primary', 'theme']);
var element = href ? 'a' : 'button';
var level = primary ? 'primary' : accent ? 'accent' : 'neutral';

184
lib/button/NuButton.js Normal file
View File

@ -0,0 +1,184 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _templateObject = _taggedTemplateLiteral(['\n align-content: center;\n align-items: center;\n border: 0;\n cursor: pointer;\n display: inline-block;\n flex-direction: row;\n font-size: ', ';\n font-weight: 500;\n height: ', ';\n justify-content: center;\n letter-spacing: 0;\n line-height: ', ';\n outline: none;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-transform: uppercase;\n transition:\n box-shadow 0.2s ', ',\n background-color 0.2s ', ',\n color 0.2s ', ';\n white-space: nowrap;\n &::-moz-focus-inner {\n border: 0;\n }\n &:visited {\n color: inherit;\n }\n & > svg {\n display: inline-block;\n fill: currentColor;\n font-size: 120%;\n height: ', ';\n vertical-align: top;\n width: 1em;\n }\n & > i {\n font-size: 120%;\n display: inline-block;\n line-height: ', ';\n vertical-align: top;\n }\n'], ['\n align-content: center;\n align-items: center;\n border: 0;\n cursor: pointer;\n display: inline-block;\n flex-direction: row;\n font-size: ', ';\n font-weight: 500;\n height: ', ';\n justify-content: center;\n letter-spacing: 0;\n line-height: ', ';\n outline: none;\n position: relative;\n text-align: center;\n text-decoration: none;\n text-transform: uppercase;\n transition:\n box-shadow 0.2s ', ',\n background-color 0.2s ', ',\n color 0.2s ', ';\n white-space: nowrap;\n &::-moz-focus-inner {\n border: 0;\n }\n &:visited {\n color: inherit;\n }\n & > svg {\n display: inline-block;\n fill: currentColor;\n font-size: 120%;\n height: ', ';\n vertical-align: top;\n width: 1em;\n }\n & > i {\n font-size: 120%;\n display: inline-block;\n line-height: ', ';\n vertical-align: top;\n }\n']),
_templateObject2 = _taggedTemplateLiteral(['\n background: ', ' ;\n border-radius: 2px;\n box-shadow: ', ';\n color: ', ' ;\n min-width: 90px;\n padding: 0 12px;\n &:hover {\n background: ', ';\n }\n &:focus:not(:active) {\n box-shadow:\n 0 0 8px rgba(0, 0, 0, 0.18),\n 0 8px 16px rgba(0, 0, 0, 0.36);\n }\n & > i,\n & > svg {\n margin-right: 5px;\n }\n '], ['\n background: ', ' ;\n border-radius: 2px;\n box-shadow: ', ';\n color: ', ' ;\n min-width: 90px;\n padding: 0 12px;\n &:hover {\n background: ', ';\n }\n &:focus:not(:active) {\n box-shadow:\n 0 0 8px rgba(0, 0, 0, 0.18),\n 0 8px 16px rgba(0, 0, 0, 0.36);\n }\n & > i,\n & > svg {\n margin-right: 5px;\n }\n ']),
_templateObject3 = _taggedTemplateLiteral(['\n background: transparent;\n border-radius: 2px;\n color: ', ';\n min-width: 90px;\n padding: 0 12px;\n &:focus:not(:active) {\n background: ', ';\n }\n &:hover {\n background: ', ';\n }\n '], ['\n background: transparent;\n border-radius: 2px;\n color: ', ';\n min-width: 90px;\n padding: 0 12px;\n &:focus:not(:active) {\n background: ', ';\n }\n &:hover {\n background: ', ';\n }\n ']),
_templateObject4 = _taggedTemplateLiteral(['\n background: ', ' ;\n border-radius: 50%;\n box-shadow:\n 0 1px 1.5px 0 rgba(0, 0, 0, 0.12),\n 0 1px 1px 0 rgba(0, 0, 0, 0.24);\n color: ', ';\n font-size: 24px;\n height: 56px;\n width: 56px;\n &:focus:not(:active) {\n box-shadow:\n 0 0 8px rgba(0, 0, 0, 0.18),\n 0 8px 16px rgba(0, 0, 0, 0.36);\n }\n '], ['\n background: ', ' ;\n border-radius: 50%;\n box-shadow:\n 0 1px 1.5px 0 rgba(0, 0, 0, 0.12),\n 0 1px 1px 0 rgba(0, 0, 0, 0.24);\n color: ', ';\n font-size: 24px;\n height: 56px;\n width: 56px;\n &:focus:not(:active) {\n box-shadow:\n 0 0 8px rgba(0, 0, 0, 0.18),\n 0 8px 16px rgba(0, 0, 0, 0.36);\n }\n ']),
_templateObject5 = _taggedTemplateLiteral(['\n background: transparent;\n border-radius: 50%;\n color: ', ';\n width: ', ';\n &:focus:not(:active) {\n background: ', ';\n }\n'], ['\n background: transparent;\n border-radius: 50%;\n color: ', ';\n width: ', ';\n &:focus:not(:active) {\n background: ', ';\n }\n']),
_templateObject6 = _taggedTemplateLiteral(['\n background-color: ', ';\n color: ', ';\n &:hover {\n background: ', ';\n }\n '], ['\n background-color: ', ';\n color: ', ';\n &:hover {\n background: ', ';\n }\n ']),
_templateObject7 = _taggedTemplateLiteral(['\n color: ', ';\n &:focus:not(:active) {\n background: ', ';\n }\n &:hover {\n background: ', ';\n }\n '], ['\n color: ', ';\n &:focus:not(:active) {\n background: ', ';\n }\n &:hover {\n background: ', ';\n }\n ']),
_templateObject8 = _taggedTemplateLiteral(['\n color: ', ';\n &:focus:not(:active) {\n background: ', ';\n }\n '], ['\n color: ', ';\n &:focus:not(:active) {\n background: ', ';\n }\n ']),
_templateObject9 = _taggedTemplateLiteral(['\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n '], ['\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ', '\n ']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _font_icon = require('../font_icon');
var _font_icon2 = _interopRequireDefault(_font_icon);
var _ThemeProvider = require('../ThemeProvider');
var _styleUtils = require('../styleUtils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var button = (0, _styledComponents.css)(_templateObject, (0, _styleUtils.unit)(1.4), (0, _styleUtils.unit)(3.6), (0, _styleUtils.unit)(3.6), (0, _ThemeProvider.getProperty)('animationCurveDefault'), (0, _ThemeProvider.getProperty)('animationCurveDefault'), (0, _ThemeProvider.getProperty)('animationCurveDefault'), (0, _styleUtils.unit)(3.6), (0, _styleUtils.unit)(3.6));
var raised = function raised(props) {
var color = props.inverse ? 'rgba(255, 255, 255, 1)' : 'rgba(33, 33, 33, 1)';
var background = props.inverse ? 'rgba(33, 33, 33, 1)' : 'rgba(255, 255, 255, 1)';
return (0, _styledComponents.css)(_templateObject2, background, (0, _ThemeProvider.getProperty)('shadow2p'), color, (0, _styleUtils.alpha)(background, 0.8));
};
var flat = function flat(props) {
var color = props.inverse ? 'rgba(255, 255, 255, 1)' : 'rgba(33, 33, 33, 1)';
return (0, _styledComponents.css)(_templateObject3, color, (0, _styleUtils.alpha)('rgba(33, 33, 33, 1)', 0.2), (0, _styleUtils.alpha)('rgba(33, 33, 33, 1)', 0.2));
};
var floating = function floating(props) {
var color = props.inverse ? 'rgba(255, 255, 255, 1)' : 'rgba(33, 33, 33, 1)';
var background = props.inverse ? 'rgba(33, 33, 33, 1)' : 'rgba(255, 255, 255, 1)';
return (0, _styledComponents.css)(_templateObject4, background, color);
};
var toggle = (0, _styledComponents.css)(_templateObject5, 'rgba(33, 33, 33, 1)', (0, _styleUtils.unit)(3.6), (0, _styleUtils.alpha)('rgba(33, 33, 33, 1)', 0.2));
var colored = function colored(props, normal, contrast) {
if (props.raised || props.floating) {
return (0, _styledComponents.css)(_templateObject6, normal, contrast, (0, _styleUtils.alpha)(normal, 0.8));
} else if (props.flat) {
return (0, _styledComponents.css)(_templateObject7, normal, (0, _styleUtils.alpha)(normal, 0.2), (0, _styleUtils.alpha)(normal, 0.2));
} else if (props.toggle) {
return (0, _styledComponents.css)(_templateObject8, normal, (0, _styleUtils.alpha)(normal, 0.2));
}
};
var primary = function primary(props) {
return colored(props, (0, _ThemeProvider.getProperty)('primaryColor'), (0, _ThemeProvider.getProperty)('primaryColorContrast'));
};
var accent = function accent(props) {
return colored(props, (0, _ThemeProvider.getProperty)('accentColor'), (0, _ThemeProvider.getProperty)('accentColorContrast'));
};
var getButtonElement = function getButtonElement(tagName) {
return (0, _styledComponents2.default)(tagName)(_templateObject9, button, function (props) {
return props.flat && flat;
}, function (props) {
return props.floating && floating;
}, function (props) {
return props.raised && raised;
}, function (props) {
return props.toggle && toggle;
}, function (props) {
return props.primary && primary(props);
}, function (props) {
return props.accent && accent(props);
});
};
var factory = function factory(_ref) {
var FontIcon = _ref.FontIcon;
var InnerLink = getButtonElement('a');
var InnerButton = getButtonElement('button');
var Button = function (_Component) {
_inherits(Button, _Component);
function Button() {
var _ref2;
var _temp, _this, _ret;
_classCallCheck(this, Button);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Button.__proto__ || Object.getPrototypeOf(Button)).call.apply(_ref2, [this].concat(args))), _this), _this.handleMouseUp = function (event) {
_this.rootNode.refs.button.blur();
if (_this.props.onMouseUp) {
_this.props.onMouseUp(event);
}
}, _this.handleMouseLeave = function (event) {
_this.rootNode.refs.button.blur();
if (_this.props.onMouseLeave) {
_this.props.onMouseLeave(event);
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Button, [{
key: 'render',
value: function render() {
var _this2 = this;
var ButtonElement = this.props.href ? InnerLink : InnerButton;
var _props = this.props,
children = _props.children,
icon = _props.icon,
label = _props.label,
others = _objectWithoutProperties(_props, ['children', 'icon', 'label']);
return _react2.default.createElement(
ButtonElement,
_extends({}, others, {
onMouseUp: this.handleMouseUp,
onMouseLeave: this.handleMouseLeave,
innerRef: 'button',
ref: function ref(node) {
_this2.rootNode = node;
}
}),
icon && _react2.default.createElement(FontIcon, { value: icon }),
label,
children
);
}
}]);
return Button;
}(_react.Component);
Button.propTypes = {
children: _react.PropTypes.node,
href: _react.PropTypes.string,
icon: _react.PropTypes.string,
label: _react.PropTypes.string,
onMouseLeave: _react.PropTypes.func,
onMouseUp: _react.PropTypes.func
};
return Button;
};
var Button = factory({ FontIcon: _font_icon2.default });
exports.default = Button;

16
lib/button/theme.scss
View File

@ -8,14 +8,16 @@
position: relative;
> input {
width: 0.1px !important;
height: 0.1px !important;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: 0 !important;
padding: 0 !important;
margin: 0 !important;
top: 0;
left:0;
z-index: 0;
width: 0.1px;
height: 0.1px;
padding: 0;
margin: 0;
overflow: hidden;
opacity: 0;
}
}

11
lib/card/Card.js
View File

@ -26,12 +26,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var Card = function Card(_ref) {
var children = _ref.children;
var className = _ref.className;
var raised = _ref.raised;
var theme = _ref.theme;
var other = _objectWithoutProperties(_ref, ['children', 'className', 'raised', 'theme']);
var children = _ref.children,
className = _ref.className,
raised = _ref.raised,
theme = _ref.theme,
other = _objectWithoutProperties(_ref, ['children', 'className', 'raised', 'theme']);
var classes = (0, _classnames3.default)(theme.card, _defineProperty({}, theme.raised, raised), className);

9
lib/card/CardActions.js
View File

@ -24,11 +24,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var CardActions = function CardActions(_ref) {
var children = _ref.children;
var className = _ref.className;
var theme = _ref.theme;
var other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
var children = _ref.children,
className = _ref.className,
theme = _ref.theme,
other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
return _react2.default.createElement(
'div',

17
lib/card/CardMedia.js
View File

@ -26,15 +26,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var CardMedia = function CardMedia(_ref) {
var aspectRatio = _ref.aspectRatio;
var children = _ref.children;
var className = _ref.className;
var color = _ref.color;
var contentOverlay = _ref.contentOverlay;
var image = _ref.image;
var theme = _ref.theme;
var other = _objectWithoutProperties(_ref, ['aspectRatio', 'children', 'className', 'color', 'contentOverlay', 'image', 'theme']);
var aspectRatio = _ref.aspectRatio,
children = _ref.children,
className = _ref.className,
color = _ref.color,
contentOverlay = _ref.contentOverlay,
image = _ref.image,
theme = _ref.theme,
other = _objectWithoutProperties(_ref, ['aspectRatio', 'children', 'className', 'color', 'contentOverlay', 'image', 'theme']);
var classes = (0, _classnames4.default)(theme.cardMedia, _defineProperty({}, theme[aspectRatio], aspectRatio), className);

9
lib/card/CardText.js
View File

@ -24,11 +24,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var CardText = function CardText(_ref) {
var children = _ref.children;
var className = _ref.className;
var theme = _ref.theme;
var other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
var children = _ref.children,
className = _ref.className,
theme = _ref.theme,
other = _objectWithoutProperties(_ref, ['children', 'className', 'theme']);
return _react2.default.createElement(
'div',

15
lib/card/CardTitle.js
View File

@ -33,14 +33,13 @@ var factory = function factory(Avatar) {
var CardTitle = function CardTitle(_ref) {
var _classnames;
var avatar = _ref.avatar;
var children = _ref.children;
var className = _ref.className;
var subtitle = _ref.subtitle;
var theme = _ref.theme;
var title = _ref.title;
var other = _objectWithoutProperties(_ref, ['avatar', 'children', 'className', 'subtitle', 'theme', 'title']);
var avatar = _ref.avatar,
children = _ref.children,
className = _ref.className,
subtitle = _ref.subtitle,
theme = _ref.theme,
title = _ref.title,
other = _objectWithoutProperties(_ref, ['avatar', 'children', 'className', 'subtitle', 'theme', 'title']);
var classes = (0, _classnames3.default)(theme.cardTitle, (_classnames = {}, _defineProperty(_classnames, theme.small, avatar), _defineProperty(_classnames, theme.large, !avatar), _classnames), className);

10
lib/checkbox/Check.js
View File

@ -18,11 +18,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var factory = function factory(ripple) {
var Check = function Check(_ref) {
var checked = _ref.checked;
var children = _ref.children;
var onMouseDown = _ref.onMouseDown;
var theme = _ref.theme;
var style = _ref.style;
var checked = _ref.checked,
children = _ref.children,
onMouseDown = _ref.onMouseDown,
theme = _ref.theme,
style = _ref.style;
return _react2.default.createElement(
'div',
{

11
lib/checkbox/Checkbox.js
View File

@ -77,12 +77,11 @@ var factory = function factory(Check) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var onChange = _props.onChange;
var theme = _props.theme;
var style = _props.style;
var others = _objectWithoutProperties(_props, ['onChange', 'theme', 'style']); //eslint-disable-line no-unused-vars
var _props = this.props,
onChange = _props.onChange,
theme = _props.theme,
style = _props.style,
others = _objectWithoutProperties(_props, ['onChange', 'theme', 'style']); //eslint-disable-line no-unused-vars
var className = (0, _classnames3.default)(theme.field, _defineProperty({}, theme.disabled, this.props.disabled), this.props.className);

13
lib/chip/Chip.js
View File

@ -33,13 +33,12 @@ var factory = function factory(Avatar) {
var Chip = function Chip(_ref) {
var _classnames;
var children = _ref.children;
var className = _ref.className;
var deletable = _ref.deletable;
var onDeleteClick = _ref.onDeleteClick;
var theme = _ref.theme;
var other = _objectWithoutProperties(_ref, ['children', 'className', 'deletable', 'onDeleteClick', 'theme']);
var children = _ref.children,
className = _ref.className,
deletable = _ref.deletable,
onDeleteClick = _ref.onDeleteClick,
theme = _ref.theme,
other = _objectWithoutProperties(_ref, ['children', 'className', 'deletable', 'onDeleteClick', 'theme']);
var hasAvatar = false;
if (_react2.default.Children.count(children)) {

35
lib/date_picker/DatePicker.js
View File

@ -115,24 +115,23 @@ var factory = function factory(Input, DatePickerDialog) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var active = _props.active;
var onDismiss = _props.onDismiss;
var autoOk = _props.autoOk;
var cancelLabel = _props.cancelLabel;
var inputClassName = _props.inputClassName;
var inputFormat = _props.inputFormat;
var locale = _props.locale;
var maxDate = _props.maxDate;
var minDate = _props.minDate;
var okLabel = _props.okLabel;
var onEscKeyDown = _props.onEscKeyDown;
var onOverlayClick = _props.onOverlayClick;
var readonly = _props.readonly;
var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
var value = _props.value;
var others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
var _props = this.props,
active = _props.active,
onDismiss = _props.onDismiss,
autoOk = _props.autoOk,
cancelLabel = _props.cancelLabel,
inputClassName = _props.inputClassName,
inputFormat = _props.inputFormat,
locale = _props.locale,
maxDate = _props.maxDate,
minDate = _props.minDate,
okLabel = _props.okLabel,
onEscKeyDown = _props.onEscKeyDown,
onOverlayClick = _props.onOverlayClick,
readonly = _props.readonly,
sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek,
value = _props.value,
others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
var finalInputFormat = inputFormat || _time2.default.formatDate;
var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;

12
lib/drawer/Drawer.js
View File

@ -31,12 +31,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var factory = function factory(Overlay) {
var Drawer = function Drawer(_ref) {
var active = _ref.active;
var children = _ref.children;
var className = _ref.className;
var onOverlayClick = _ref.onOverlayClick;
var theme = _ref.theme;
var type = _ref.type;
var active = _ref.active,
children = _ref.children,
className = _ref.className,
onOverlayClick = _ref.onOverlayClick,
theme = _ref.theme,
type = _ref.type;
var _className = (0, _classnames3.default)([theme.drawer, theme[type]], _defineProperty({}, theme.active, active), className);

17
lib/dropdown/Dropdown.js
View File

@ -189,15 +189,14 @@ var factory = function factory(Input) {
value: function render() {
var _classnames2;
var _props = this.props;
var template = _props.template;
var theme = _props.theme;
var source = _props.source;
var allowBlank = _props.allowBlank;
var auto = _props.auto;
var required = _props.required;
var others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto', 'required']); //eslint-disable-line no-unused-vars
var _props = this.props,
template = _props.template,
theme = _props.theme,
source = _props.source,
allowBlank = _props.allowBlank,
auto = _props.auto,
required = _props.required,
others = _objectWithoutProperties(_props, ['template', 'theme', 'source', 'allowBlank', 'auto', 'required']); //eslint-disable-line no-unused-vars
var selected = this.getSelectedItem();

9
lib/font_icon/FontIcon.js
View File

@ -20,11 +20,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var FontIcon = function FontIcon(_ref) {
var children = _ref.children;
var className = _ref.className;
var value = _ref.value;
var other = _objectWithoutProperties(_ref, ['children', 'className', 'value']);
var children = _ref.children,
className = _ref.className,
value = _ref.value,
other = _objectWithoutProperties(_ref, ['children', 'className', 'value']);
return _react2.default.createElement(
'span',

13
lib/hoc/ActivableRenderer.js
View File

@ -80,15 +80,14 @@ var ActivableRendererFactory = function ActivableRendererFactory() {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var delay = _props.delay;
var others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
var _props = this.props,
delay = _props.delay,
others = _objectWithoutProperties(_props, ['delay']); // eslint-disable-line no-unused-vars
var _state = this.state;
var active = _state.active;
var rendered = _state.rendered;
var _state = this.state,
active = _state.active,
rendered = _state.rendered;
return rendered ? _react2.default.createElement(ActivableComponent, _extends({}, others, { active: active })) : null;
}

55
lib/input/Input.js
View File

@ -55,10 +55,10 @@ var factory = function factory(FontIcon) {
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Input.__proto__ || Object.getPrototypeOf(Input)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (event) {
var _this$props = _this.props;
var onChange = _this$props.onChange;
var multiline = _this$props.multiline;
var maxLength = _this$props.maxLength;
var _this$props = _this.props,
onChange = _this$props.onChange,
multiline = _this$props.multiline,
maxLength = _this$props.maxLength;
var valueFromEvent = event.target.value;
@ -88,10 +88,10 @@ var factory = function factory(FontIcon) {
}, _this.handleKeyPress = function (event) {
// prevent insertion of more characters if we're a multiline input
// and maxLength exists
var _this$props2 = _this.props;
var multiline = _this$props2.multiline;
var maxLength = _this$props2.maxLength;
var onKeyPress = _this$props2.onKeyPress;
var _this$props2 = _this.props,
multiline = _this$props2.multiline,
maxLength = _this$props2.maxLength,
onKeyPress = _this$props2.onKeyPress;
if (multiline && maxLength) {
// check if smt is selected, in which case the newly added charcter would
@ -154,26 +154,25 @@ var factory = function factory(FontIcon) {
value: function render() {
var _classnames2;
var _props = this.props;
var children = _props.children;
var disabled = _props.disabled;
var error = _props.error;
var floating = _props.floating;
var hint = _props.hint;
var icon = _props.icon;
var name = _props.name;
var labelText = _props.label;
var maxLength = _props.maxLength;
var multiline = _props.multiline;
var required = _props.required;
var theme = _props.theme;
var type = _props.type;
var value = _props.value;
var onKeyPress = _props.onKeyPress;
var _props$rows = _props.rows;
var rows = _props$rows === undefined ? 1 : _props$rows;
var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
var _props = this.props,
children = _props.children,
disabled = _props.disabled,
error = _props.error,
floating = _props.floating,
hint = _props.hint,
icon = _props.icon,
name = _props.name,
labelText = _props.label,
maxLength = _props.maxLength,
multiline = _props.multiline,
required = _props.required,
theme = _props.theme,
type = _props.type,
value = _props.value,
onKeyPress = _props.onKeyPress,
_props$rows = _props.rows,
rows = _props$rows === undefined ? 1 : _props$rows,
others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
var length = maxLength && value ? value.length : 0;
var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));

6
lib/layout/Layout.js
View File

@ -20,9 +20,9 @@ var _identifiers = require('../identifiers.js');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var Layout = function Layout(_ref) {
var className = _ref.className;
var children = _ref.children;
var theme = _ref.theme;
var className = _ref.className,
children = _ref.children,
theme = _ref.theme;
return _react2.default.createElement(
'div',
{ 'data-react-toolbox': 'layout', className: (0, _classnames2.default)(theme.layout, className) },

18
lib/layout/NavDrawer.js
View File

@ -24,15 +24,15 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var NavDrawer = function NavDrawer(_ref) {
var _classnames;
var active = _ref.active;
var children = _ref.children;
var className = _ref.className;
var onOverlayClick = _ref.onOverlayClick;
var permanentAt = _ref.permanentAt;
var pinned = _ref.pinned;
var scrollY = _ref.scrollY;
var theme = _ref.theme;
var width = _ref.width;
var active = _ref.active,
children = _ref.children,
className = _ref.className,
onOverlayClick = _ref.onOverlayClick,
permanentAt = _ref.permanentAt,
pinned = _ref.pinned,
scrollY = _ref.scrollY,
theme = _ref.theme,
width = _ref.width;
var rootClasses = (0, _classnames4.default)([theme.navDrawer], (_classnames = {}, _defineProperty(_classnames, theme[permanentAt + 'Permanent'], permanentAt), _defineProperty(_classnames, theme.wide, width === 'wide'), _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.pinned, pinned), _classnames), className);

10
lib/layout/Panel.js
View File

@ -22,11 +22,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var Panel = function Panel(_ref) {
var children = _ref.children;
var className = _ref.className;
var onScroll = _ref.onScroll;
var scrollY = _ref.scrollY;
var theme = _ref.theme;
var children = _ref.children,
className = _ref.className,
onScroll = _ref.onScroll,
scrollY = _ref.scrollY,
theme = _ref.theme;
var _className = (0, _classnames3.default)(theme.panel, _defineProperty({}, theme.scrollY, scrollY), className);

12
lib/layout/Sidebar.js
View File

@ -22,12 +22,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var Sidebar = function Sidebar(_ref) {
var children = _ref.children;
var className = _ref.className;
var pinned = _ref.pinned;
var scrollY = _ref.scrollY;
var theme = _ref.theme;
var width = _ref.width;
var children = _ref.children,
className = _ref.className,
pinned = _ref.pinned,
scrollY = _ref.scrollY,
theme = _ref.theme,
width = _ref.width;
var wrapperClasses = (0, _classnames4.default)(theme.sidebar, theme['width-' + width], _defineProperty({}, theme.pinned, pinned), className);

17
lib/link/Link.js
View File

@ -30,15 +30,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var Link = function Link(_ref) {
var active = _ref.active;
var children = _ref.children;
var className = _ref.className;
var count = _ref.count;
var icon = _ref.icon;
var label = _ref.label;
var theme = _ref.theme;
var others = _objectWithoutProperties(_ref, ['active', 'children', 'className', 'count', 'icon', 'label', 'theme']);
var active = _ref.active,
children = _ref.children,
className = _ref.className,
count = _ref.count,
icon = _ref.icon,
label = _ref.label,
theme = _ref.theme,
others = _objectWithoutProperties(_ref, ['active', 'children', 'className', 'count', 'icon', 'label', 'theme']);
var _className = (0, _classnames3.default)(theme.link, _defineProperty({}, theme.active, active), className);

20
lib/list/ListCheckbox.js
View File

@ -31,16 +31,16 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
var factory = function factory(Checkbox, ListItemContent) {
var ListCheckbox = function ListCheckbox(_ref) {
var caption = _ref.caption;
var checked = _ref.checked;
var className = _ref.className;
var disabled = _ref.disabled;
var legend = _ref.legend;
var name = _ref.name;
var onBlur = _ref.onBlur;
var onChange = _ref.onChange;
var onFocus = _ref.onFocus;
var theme = _ref.theme;
var caption = _ref.caption,
checked = _ref.checked,
className = _ref.className,
disabled = _ref.disabled,
legend = _ref.legend,
name = _ref.name,
onBlur = _ref.onBlur,
onChange = _ref.onChange,
onFocus = _ref.onFocus,
theme = _ref.theme;
var _className = (0, _classnames3.default)(theme.item, theme.checkboxItem, _defineProperty({}, theme.disabled, disabled), className);

4
lib/list/ListDivider.js
View File

@ -16,8 +16,8 @@ var _identifiers = require('../identifiers.js');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ListDivider = function ListDivider(_ref) {
var inset = _ref.inset;
var theme = _ref.theme;
var inset = _ref.inset,
theme = _ref.theme;
return _react2.default.createElement('hr', { className: inset ? theme.divider + ' ' + theme.inset : theme.divider });
};

26
lib/list/ListItem.js
View File

@ -75,10 +75,9 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
return;
}
var _child$props = child.props;
var listItemIgnore = _child$props.listItemIgnore;
var rest = _objectWithoutProperties(_child$props, ['listItemIgnore']);
var _child$props = child.props,
listItemIgnore = _child$props.listItemIgnore,
rest = _objectWithoutProperties(_child$props, ['listItemIgnore']);
var strippedChild = _extends({}, child, { props: rest });
@ -99,16 +98,15 @@ var factory = function factory(ripple, ListItemLayout, ListItemContent) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var className = _props.className;
var onMouseDown = _props.onMouseDown;
var onTouchStart = _props.onTouchStart;
var to = _props.to;
var onClick = _props.onClick;
var hasRipple = _props.ripple;
var theme = _props.theme;
var other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'onTouchStart', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
var _props = this.props,
className = _props.className,
onMouseDown = _props.onMouseDown,
onTouchStart = _props.onTouchStart,
to = _props.to,
onClick = _props.onClick,
hasRipple = _props.ripple,
theme = _props.theme,
other = _objectWithoutProperties(_props, ['className', 'onMouseDown', 'onTouchStart', 'to', 'onClick', 'ripple', 'theme']); //eslint-disable-line no-unused-vars
var children = this.groupChildren();

10
lib/list/ListItemAction.js
View File

@ -16,11 +16,11 @@ var _identifiers = require('../identifiers.js');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ListItemAction = function ListItemAction(_ref) {
var action = _ref.action;
var theme = _ref.theme;
var _action$props = action.props;
var onClick = _action$props.onClick;
var onMouseDown = _action$props.onMouseDown;
var action = _ref.action,
theme = _ref.theme;
var _action$props = action.props,
onClick = _action$props.onClick,
onMouseDown = _action$props.onMouseDown;
var stopRipple = onClick && !onMouseDown;
var stop = function stop(e) {

6
lib/list/ListItemActions.js
View File

@ -21,9 +21,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var factory = function factory(ListItemAction) {
var ListItemActions = function ListItemActions(_ref) {
var type = _ref.type;
var children = _ref.children;
var theme = _ref.theme;
var type = _ref.type,
children = _ref.children,
theme = _ref.theme;
var validChildren = _react2.default.Children.toArray(children).filter(function (c) {
return _react2.default.isValidElement(c);

20
lib/list/ListItemContent.js
View File

@ -48,11 +48,11 @@ var factory = function factory(ListItemText) {
_createClass(ListItemContent, [{
key: 'getType',
value: function getType() {
var _props = this.props;
var type = _props.type;
var children = _props.children;
var caption = _props.caption;
var legend = _props.legend;
var _props = this.props,
type = _props.type,
children = _props.children,
caption = _props.caption,
legend = _props.legend;
var count = _react2.default.Children.count(children);
@ -66,11 +66,11 @@ var factory = function factory(ListItemText) {
}, {
key: 'render',
value: function render() {
var _props2 = this.props;
var children = _props2.children;
var caption = _props2.caption;
var legend = _props2.legend;
var theme = _props2.theme;
var _props2 = this.props,
children = _props2.children,
caption = _props2.caption,
legend = _props2.legend,
theme = _props2.theme;
var className = (0, _classnames3.default)(theme.itemContentRoot, _defineProperty({}, theme[this.getType()], theme[this.getType()]));

11
lib/list/ListItemText.js
View File

@ -26,12 +26,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var ListItemText = function ListItemText(_ref) {
var className = _ref.className;
var primary = _ref.primary;
var children = _ref.children;
var theme = _ref.theme;
var other = _objectWithoutProperties(_ref, ['className', 'primary', 'children', 'theme']);
var className = _ref.className,
primary = _ref.primary,
children = _ref.children,
theme = _ref.theme,
other = _objectWithoutProperties(_ref, ['className', 'primary', 'children', 'theme']);
var _className = (0, _classnames3.default)(theme.itemText, _defineProperty({}, theme.primary, primary), className);
return _react2.default.createElement(

6
lib/list/ListSubHeader.js
View File

@ -20,9 +20,9 @@ var _identifiers = require('../identifiers.js');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var ListSubHeader = function ListSubHeader(_ref) {
var caption = _ref.caption;
var className = _ref.className;
var theme = _ref.theme;
var caption = _ref.caption,
className = _ref.className,
theme = _ref.theme;
return _react2.default.createElement(
'h5',
{ className: (0, _classnames2.default)(theme.subheader, className) },

46
lib/menu/Menu.js
View File

@ -71,9 +71,9 @@ var factory = function factory(MenuItem) {
_this.setState({ active: false, rippled: false });
}
}, _this.handleSelect = function (item, event) {
var _item$props = item.props;
var value = _item$props.value;
var onClick = _item$props.onClick;
var _item$props = item.props,
value = _item$props.value,
onClick = _item$props.onClick;
if (onClick) event.persist();
_this.setState({ active: false, rippled: _this.props.ripple }, function () {
@ -89,10 +89,9 @@ var factory = function factory(MenuItem) {
var _this2 = this;
this.positionTimeoutHandle = setTimeout(function () {
var _refs$menu$getBoundin = _this2.refs.menu.getBoundingClientRect();
var width = _refs$menu$getBoundin.width;
var height = _refs$menu$getBoundin.height;
var _refs$menu$getBoundin = _this2.refs.menu.getBoundingClientRect(),
width = _refs$menu$getBoundin.width,
height = _refs$menu$getBoundin.height;
var position = _this2.props.position === POSITION.AUTO ? _this2.calculatePosition() : _this2.props.position;
_this2.setState({ position: position, width: width, height: height });
@ -179,17 +178,15 @@ var factory = function factory(MenuItem) {
var parentNode = _reactDom2.default.findDOMNode(this).parentNode;
if (!parentNode) return;
var _parentNode$getBoundi = parentNode.getBoundingClientRect();
var _parentNode$getBoundi = parentNode.getBoundingClientRect(),
top = _parentNode$getBoundi.top,
left = _parentNode$getBoundi.left,
height = _parentNode$getBoundi.height,
width = _parentNode$getBoundi.width;
var top = _parentNode$getBoundi.top;
var left = _parentNode$getBoundi.left;
var height = _parentNode$getBoundi.height;
var width = _parentNode$getBoundi.width;
var _utils$getViewport = _utils.utils.getViewport();
var wh = _utils$getViewport.height;
var ww = _utils$getViewport.width;
var _utils$getViewport = _utils.utils.getViewport(),
wh = _utils$getViewport.height,
ww = _utils$getViewport.width;
var toTop = top < wh / 2 - height / 2;
var toLeft = left < ww / 2 - width / 2;
@ -198,10 +195,10 @@ var factory = function factory(MenuItem) {
}, {
key: 'getMenuStyle',
value: function getMenuStyle() {
var _state = this.state;
var width = _state.width;
var height = _state.height;
var position = _state.position;
var _state = this.state,
width = _state.width,
height = _state.height,
position = _state.position;
if (position !== POSITION.STATIC) {
if (this.state.active) {
@ -245,10 +242,9 @@ var factory = function factory(MenuItem) {
}, {
key: 'show',
value: function show() {
var _refs$menu$getBoundin2 = this.refs.menu.getBoundingClientRect();
var width = _refs$menu$getBoundin2.width;
var height = _refs$menu$getBoundin2.height;
var _refs$menu$getBoundin2 = this.refs.menu.getBoundingClientRect(),
width = _refs$menu$getBoundin2.width,
height = _refs$menu$getBoundin2.height;
this.setState({ active: true, width: width, height: height });
}

19
lib/menu/MenuItem.js
View File

@ -68,16 +68,15 @@ var factory = function factory(ripple) {
value: function render() {
var _classnames;
var _props = this.props;
var icon = _props.icon;
var caption = _props.caption;
var children = _props.children;
var shortcut = _props.shortcut;
var selected = _props.selected;
var disabled = _props.disabled;
var theme = _props.theme;
var others = _objectWithoutProperties(_props, ['icon', 'caption', 'children', 'shortcut', 'selected', 'disabled', 'theme']);
var _props = this.props,
icon = _props.icon,
caption = _props.caption,
children = _props.children,
shortcut = _props.shortcut,
selected = _props.selected,
disabled = _props.disabled,
theme = _props.theme,
others = _objectWithoutProperties(_props, ['icon', 'caption', 'children', 'shortcut', 'selected', 'disabled', 'theme']);
var className = (0, _classnames3.default)(theme.menuItem, (_classnames = {}, _defineProperty(_classnames, theme.selected, selected), _defineProperty(_classnames, theme.disabled, disabled), _classnames), this.props.className);

12
lib/navigation/Navigation.js
View File

@ -31,12 +31,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
var factory = function factory(Button, Link) {
var Navigation = function Navigation(_ref) {
var actions = _ref.actions;
var children = _ref.children;
var className = _ref.className;
var routes = _ref.routes;
var theme = _ref.theme;
var type = _ref.type;
var actions = _ref.actions,
children = _ref.children,
className = _ref.className,
routes = _ref.routes,
theme = _ref.theme,
type = _ref.type;
var _className = (0, _classnames2.default)(theme[type], className);
var buttons = actions.map(function (action, index) {

46
lib/overlay/Overlay.js
View File

@ -37,16 +37,28 @@ var Overlay = function (_Component) {
_inherits(Overlay, _Component);
function Overlay() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Overlay);
return _possibleConstructorReturn(this, (Overlay.__proto__ || Object.getPrototypeOf(Overlay)).apply(this, arguments));
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Overlay.__proto__ || Object.getPrototypeOf(Overlay)).call.apply(_ref, [this].concat(args))), _this), _this.handleEscKey = function (e) {
if (_this.props.active && _this.props.onEscKeyDown && e.which === 27) {
_this.props.onEscKeyDown(e);
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Overlay, [{
key: 'componentDidMount',
value: function componentDidMount() {
if (this.props.active) {
this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
document.body.addEventListener('keydown', this.handleEscKey);
document.body.style.overflow = 'hidden';
}
}
@ -59,38 +71,28 @@ var Overlay = function (_Component) {
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate() {
if (this.props.active && !this.escKeyListener) {
this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
if (this.props.active) {
document.body.addEventListener('keydown', this.handleEscKey);
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (!document.querySelectorAll('[data-react-toolbox="overlay"]')[1]) document.body.style.overflow = '';
if (this.escKeyListener) {
document.body.removeEventListener('keydown', this.handleEscKey);
this.escKeyListener = null;
}
}
}, {
key: 'handleEscKey',
value: function handleEscKey(e) {
if (this.props.active && this.props.onEscKeyDown && e.which === 27) {
this.props.onEscKeyDown(e);
}
document.body.removeEventListener('keydown', this.handleEscKey);
}
}, {
key: 'render',
value: function render() {
var _classnames;
var _props = this.props;
var active = _props.active;
var className = _props.className;
var children = _props.children;
var invisible = _props.invisible;
var onClick = _props.onClick;
var theme = _props.theme;
var _props = this.props,
active = _props.active,
className = _props.className,
children = _props.children,
invisible = _props.invisible,
onClick = _props.onClick,
theme = _props.theme;
var _className = (0, _classnames3.default)(theme.overlay, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.invisible, invisible), _classnames), className);

27
lib/progress_bar/ProgressBar.js
View File

@ -80,10 +80,9 @@ var ProgressBar = function (_Component) {
}, {
key: 'renderLinear',
value: function renderLinear() {
var _linearStyle = this.linearStyle();
var buffer = _linearStyle.buffer;
var value = _linearStyle.value;
var _linearStyle = this.linearStyle(),
buffer = _linearStyle.buffer,
value = _linearStyle.value;
return _react2.default.createElement(
'div',
@ -97,16 +96,16 @@ var ProgressBar = function (_Component) {
value: function render() {
var _classnames;
var _props = this.props;
var className = _props.className;
var disabled = _props.disabled;
var max = _props.max;
var min = _props.min;
var mode = _props.mode;
var multicolor = _props.multicolor;
var type = _props.type;
var theme = _props.theme;
var value = _props.value;
var _props = this.props,
className = _props.className,
disabled = _props.disabled,
max = _props.max,
min = _props.min,
mode = _props.mode,
multicolor = _props.multicolor,
type = _props.type,
theme = _props.theme,
value = _props.value;
var _className = (0, _classnames3.default)(theme[type], (_classnames = {}, _defineProperty(_classnames, theme[mode], mode), _defineProperty(_classnames, theme.multicolor, multicolor), _classnames), className);

9
lib/radio/Radio.js
View File

@ -16,11 +16,10 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
var factory = function factory(ripple) {
var Radio = function Radio(_ref) {
var checked = _ref.checked;
var onMouseDown = _ref.onMouseDown;
var theme = _ref.theme;
var other = _objectWithoutProperties(_ref, ['checked', 'onMouseDown', 'theme']);
var checked = _ref.checked,
onMouseDown = _ref.onMouseDown,
theme = _ref.theme,
other = _objectWithoutProperties(_ref, ['checked', 'onMouseDown', 'theme']);
return _react2.default.createElement('div', _extends({
'data-react-toolbox': 'radio',

25
lib/radio/RadioButton.js
View File

@ -55,10 +55,10 @@ var factory = function factory(Radio) {
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RadioButton.__proto__ || Object.getPrototypeOf(RadioButton)).call.apply(_ref, [this].concat(args))), _this), _this.handleClick = function (event) {
var _this$props = _this.props;
var checked = _this$props.checked;
var disabled = _this$props.disabled;
var onChange = _this$props.onChange;
var _this$props = _this.props,
checked = _this$props.checked,
disabled = _this$props.disabled,
onChange = _this$props.onChange;
if (event.pageX !== 0 && event.pageY !== 0) _this.blur();
if (!disabled && !checked && onChange) onChange(event, _this);
@ -78,15 +78,14 @@ var factory = function factory(Radio) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var className = _props.className;
var checked = _props.checked;
var disabled = _props.disabled;
var label = _props.label;
var theme = _props.theme;
var onChange = _props.onChange;
var others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'label', 'theme', 'onChange']); // eslint-disable-line
var _props = this.props,
className = _props.className,
checked = _props.checked,
disabled = _props.disabled,
label = _props.label,
theme = _props.theme,
onChange = _props.onChange,
others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'label', 'theme', 'onChange']); // eslint-disable-line
var _className = (0, _classnames2.default)(theme[this.props.disabled ? 'disabled' : 'field'], className);

407
lib/ripple/NuRipple.js Normal file
View File

@ -0,0 +1,407 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _templateObject = _taggedTemplateLiteral(['\n bottom: 0;\n left: 0;\n pointer-events: none;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n'], ['\n bottom: 0;\n left: 0;\n pointer-events: none;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 1;\n']),
_templateObject2 = _taggedTemplateLiteral(['\n background-color: currentColor;\n border-radius: 50%;\n left: 50%;\n pointer-events: none;\n position: absolute;\n top: 50%;\n transform-origin: 50% 50%;\n transition-duration: 800ms;\n z-index: 100;\n opacity: ', '\n transition-property: ', ';\n'], ['\n background-color: currentColor;\n border-radius: 50%;\n left: 50%;\n pointer-events: none;\n position: absolute;\n top: 50%;\n transform-origin: 50% 50%;\n transition-duration: 800ms;\n z-index: 100;\n opacity: ', '\n transition-property: ', ';\n']);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _immutabilityHelper = require('immutability-helper');
var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
var _reactCssThemr = require('react-css-themr');
var _styledComponents = require('styled-components');
var _styledComponents2 = _interopRequireDefault(_styledComponents);
var _identifiers = require('../identifiers.js');
var _events = require('../utils/events');
var _events2 = _interopRequireDefault(_events);
var _prefixer = require('../utils/prefixer');
var _prefixer2 = _interopRequireDefault(_prefixer);
var _utils = require('../utils/utils');
var _utils2 = _interopRequireDefault(_utils);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var defaults = {
centered: false,
className: '',
multiple: true,
spread: 2,
theme: {}
};
var RippleWrapper = _styledComponents2.default.span(_templateObject);
var RippleNode = _styledComponents2.default.span(_templateObject2, function (props) {
return props.restarting || props.active ? 0.3 : 0;
}, function (props) {
return props.restarting ? 'none' : props.active ? 'transform' : 'opacity, transform';
});
var rippleFactory = function rippleFactory() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _defaults$options = _extends({}, defaults, options),
defaultCentered = _defaults$options.centered,
defaultClassName = _defaults$options.className,
defaultMultiple = _defaults$options.multiple,
defaultSpread = _defaults$options.spread,
defaultTheme = _defaults$options.theme,
props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
return function (ComposedComponent) {
var RippledComponent = function (_Component) {
_inherits(RippledComponent, _Component);
function RippledComponent() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, RippledComponent);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = RippledComponent.__proto__ || Object.getPrototypeOf(RippledComponent)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
ripples: {}
}, _this.ripples = [], _this.handleMouseDown = function (event) {
if (_this.props.onMouseDown) _this.props.onMouseDown(event);
if (!_this.props.disabled) {
var _events$getMousePosit = _events2.default.getMousePosition(event),
x = _events$getMousePosit.x,
y = _events$getMousePosit.y;
_this.animateRipple(x, y, false);
}
}, _this.handleTouchStart = function (event) {
if (_this.props.onTouchStart) _this.props.onTouchStart(event);
if (!_this.props.disabled) {
var _events$getTouchPosit = _events2.default.getTouchPosition(event),
x = _events$getTouchPosit.x,
y = _events$getTouchPosit.y;
_this.animateRipple(x, y, true);
}
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(RippledComponent, [{
key: 'componentDidUpdate',
value: function componentDidUpdate(prevProps, prevState) {
// If a new ripple was just added, add a remove event listener to its animation
if (Object.keys(prevState.ripples).length < Object.keys(this.state.ripples).length) {
this.addRippleRemoveEventListener(this.getLastKey());
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
var _this2 = this;
// Remove document event listeners for ripple if they still exists
Object.keys(this.state.ripples).forEach(function (key) {
_this2.state.ripples[key].endRipple();
});
}
}, {
key: 'getRef',
value: function getRef(key) {
return this.ripples[key].refs.ripple;
}
/**
* Add an event listener to the reference with given key so when the animation transition
* ends we can be sure that it finished and it can be safely removed from the state.
* This function is called whenever a new ripple is added to the component.
*
* @param {String} rippleKey Is the key of the ripple to add the event.
*/
}, {
key: 'addRippleRemoveEventListener',
value: function addRippleRemoveEventListener(rippleKey) {
var self = this;
_events2.default.addEventListenerOnTransitionEnded(this.getRef(rippleKey), function onOpacityEnd(e) {
if (e.propertyName === 'opacity') {
if (self.props.onRippleEnded) self.props.onRippleEnded(e);
_events2.default.removeEventListenerOnTransitionEnded(self.getRef(rippleKey), onOpacityEnd);
self.setState({ ripples: _utils2.default.removeObjectKey(rippleKey, self.state.ripples) });
}
});
}
/**
* Start a ripple animation on an specific point with touch or mouse events. First
* decides if the animation should trigger. If the ripple is multiple or there is no
* ripple present, it creates a new key. If it's a simple ripple and already exists,
* it just restarts the current ripple. The animation happens in two state changes
* to allow triggering via css.
*
* @param {Number} x Coordinate X on the screen where animation should start
* @param {Number} y Coordinate Y on the screen where animation should start
* @param {Boolean} isTouch Use events from touch or mouse.
*/
}, {
key: 'animateRipple',
value: function animateRipple(x, y, isTouch) {
var _this3 = this;
if (this.rippleShouldTrigger(isTouch)) {
(function () {
var _getDescriptor = _this3.getDescriptor(x, y),
top = _getDescriptor.top,
left = _getDescriptor.left,
width = _getDescriptor.width;
var noRipplesActive = Object.keys(_this3.state.ripples).length === 0;
var key = _this3.props.rippleMultiple || noRipplesActive ? _this3.getNextKey() : _this3.getLastKey();
var endRipple = _this3.addRippleDeactivateEventListener(isTouch, key);
var initialState = { active: false, restarting: true, top: top, left: left, width: width, endRipple: endRipple };
var runningState = { active: true, restarting: false };
_this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
_this3.getRef(key).offsetWidth; //eslint-disable-line no-unused-expressions
_this3.setState((0, _immutabilityHelper2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
});
})();
}
}
/**
* Determine if a ripple should start depending if its a touch event. For mobile both
* touchStart and mouseDown are launched so in case is touch we should always trigger
* but if its not we should check if a touch was already triggered to decide.
*
* @param {Boolean} isTouch True in case a touch event triggered the ripple false otherwise.
* @return {Boolean} True in case the ripple should trigger or false if it shouldn't.
*/
}, {
key: 'rippleShouldTrigger',
value: function rippleShouldTrigger(isTouch) {
var shouldStart = isTouch ? true : !this.touchCache;
this.touchCache = isTouch;
return shouldStart;
}
/**
* Find out a descriptor object for the ripple element being created depending on
* the position where the it was triggered and the component's dimensions.
*
* @param {Number} x Coordinate x in the viewport where ripple was triggered
* @param {Number} y Coordinate y in the viewport where ripple was triggered
* @return {Object} Descriptor element including position and size of the element
*/
}, {
key: 'getDescriptor',
value: function getDescriptor(x, y) {
var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect(),
left = _ReactDOM$findDOMNode.left,
top = _ReactDOM$findDOMNode.top,
height = _ReactDOM$findDOMNode.height,
width = _ReactDOM$findDOMNode.width;
var _props = this.props,
centered = _props.rippleCentered,
spread = _props.rippleSpread;
return {
left: centered ? 0 : x - left - width / 2,
top: centered ? 0 : y - top - height / 2,
width: width * spread
};
}
/**
* Increments and internal counter and returns the next value as a string. It
* is used to assign key references to new ripple elements.
*
* @return {String} Key to be assigned to a ripple.
*/
}, {
key: 'getNextKey',
value: function getNextKey() {
this.currentCount = this.currentCount ? this.currentCount + 1 : 1;
return 'ripple' + this.currentCount;
}
/**
* Return the last generated key for a ripple element. When there is only one ripple
* and to get the reference when a ripple was just created.
*
* @return {String} The last generated ripple key.
*/
}, {
key: 'getLastKey',
value: function getLastKey() {
return 'ripple' + this.currentCount;
}
/**
* Add an event listener to the document needed to deactivate a ripple and make it dissappear.
* Deactivation can happen with a touchend or mouseup depending on the trigger type. The
* ending function is created from a factory function and returned.
*
* @param {Boolean} isTouch True in case the trigger was a touch event false otherwise.
* @param {String} rippleKey It's a key to identify the ripple that should be deactivated.
* @return {Function} Callback function that deactivates the ripple and removes the event listener
*/
}, {
key: 'addRippleDeactivateEventListener',
value: function addRippleDeactivateEventListener(isTouch, rippleKey) {
var eventType = isTouch ? 'touchend' : 'mouseup';
var endRipple = this.createRippleDeactivateCallback(eventType, rippleKey);
document.addEventListener(eventType, endRipple);
return endRipple;
}
/**
* Generates a function that can be called to deactivate a given ripple and remove its finishing
* event listener. If is generated because we need to store it to be called on unmount in case
* the ripple is still running.
*
* @param {String} eventType Is the event type that can be touchend or mouseup
* @param {String} rippleKey Is the key representing the ripple
* @return {Function} Callback function that deactivates the ripple and removes the listener
*/
}, {
key: 'createRippleDeactivateCallback',
value: function createRippleDeactivateCallback(eventType, rippleKey) {
var self = this;
return function endRipple() {
document.removeEventListener(eventType, endRipple);
self.setState({ ripples: (0, _immutabilityHelper2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
};
}
}, {
key: 'renderRipple',
value: function renderRipple(key, className, _ref2) {
var _this4 = this;
var active = _ref2.active,
left = _ref2.left,
restarting = _ref2.restarting,
top = _ref2.top,
width = _ref2.width;
var scale = restarting ? 0 : 1;
var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
return _react2.default.createElement(
RippleWrapper,
_extends({ key: key }, props),
_react2.default.createElement(RippleNode, {
active: active,
innerRef: 'ripple',
ref: function ref(node) {
_this4.ripples[key] = node;
},
restarting: restarting,
style: (0, _prefixer2.default)({ transform: transform }, { width: width, height: width })
})
);
}
}, {
key: 'render',
value: function render() {
var _this5 = this;
var ripples = this.state.ripples;
var _props2 = this.props,
onRippleEnded = _props2.onRippleEnded,
rippleCentered = _props2.rippleCentered,
rippleMultiple = _props2.rippleMultiple,
rippleSpread = _props2.rippleSpread,
children = _props2.children,
ripple = _props2.ripple,
rippleClassName = _props2.rippleClassName,
other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
return _react2.default.createElement(
ComposedComponent,
_extends({}, other, { onMouseDown: this.handleMouseDown, onTouchStart: this.handleTouchStart }),
children,
Object.keys(ripples).map(function (key) {
return _this5.renderRipple(key, rippleClassName, ripples[key]);
})
);
}
}]);
return RippledComponent;
}(_react.Component);
RippledComponent.propTypes = {
children: _react.PropTypes.any,
disabled: _react.PropTypes.bool,
onRippleEnded: _react.PropTypes.func,
ripple: _react.PropTypes.bool,
rippleCentered: _react.PropTypes.bool,
rippleClassName: _react.PropTypes.string,
rippleMultiple: _react.PropTypes.bool,
rippleSpread: _react.PropTypes.number,
theme: _react.PropTypes.shape({
ripple: _react.PropTypes.string,
rippleActive: _react.PropTypes.string,
rippleRestarting: _react.PropTypes.string,
rippleWrapper: _react.PropTypes.string
})
};
RippledComponent.defaultProps = {
disabled: false,
ripple: true,
rippleCentered: defaultCentered,
rippleClassName: defaultClassName,
rippleMultiple: defaultMultiple,
rippleSpread: defaultSpread
};
return (0, _reactCssThemr.themr)(_identifiers.RIPPLE, defaultTheme)(RippledComponent);
};
};
exports.default = rippleFactory;

87
lib/ripple/Ripple.js
View File

@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
@ -63,15 +63,13 @@ var defaults = {
var rippleFactory = function rippleFactory() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _defaults$options = _extends({}, defaults, options);
var defaultCentered = _defaults$options.centered;
var defaultClassName = _defaults$options.className;
var defaultMultiple = _defaults$options.multiple;
var defaultSpread = _defaults$options.spread;
var defaultTheme = _defaults$options.theme;
var props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
var _defaults$options = _extends({}, defaults, options),
defaultCentered = _defaults$options.centered,
defaultClassName = _defaults$options.className,
defaultMultiple = _defaults$options.multiple,
defaultSpread = _defaults$options.spread,
defaultTheme = _defaults$options.theme,
props = _objectWithoutProperties(_defaults$options, ['centered', 'className', 'multiple', 'spread', 'theme']);
return function (ComposedComponent) {
var RippledComponent = function (_Component) {
@ -93,20 +91,18 @@ var rippleFactory = function rippleFactory() {
}, _this.handleMouseDown = function (event) {
if (_this.props.onMouseDown) _this.props.onMouseDown(event);
if (!_this.props.disabled) {
var _events$getMousePosit = _events2.default.getMousePosition(event);
var x = _events$getMousePosit.x;
var y = _events$getMousePosit.y;
var _events$getMousePosit = _events2.default.getMousePosition(event),
x = _events$getMousePosit.x,
y = _events$getMousePosit.y;
_this.animateRipple(x, y, false);
}
}, _this.handleTouchStart = function (event) {
if (_this.props.onTouchStart) _this.props.onTouchStart(event);
if (!_this.props.disabled) {
var _events$getTouchPosit = _events2.default.getTouchPosition(event);
var x = _events$getTouchPosit.x;
var y = _events$getTouchPosit.y;
var _events$getTouchPosit = _events2.default.getTouchPosition(event),
x = _events$getTouchPosit.x,
y = _events$getTouchPosit.y;
_this.animateRipple(x, y, true);
}
@ -172,11 +168,10 @@ var rippleFactory = function rippleFactory() {
if (this.rippleShouldTrigger(isTouch)) {
(function () {
var _getDescriptor = _this3.getDescriptor(x, y);
var top = _getDescriptor.top;
var left = _getDescriptor.left;
var width = _getDescriptor.width;
var _getDescriptor = _this3.getDescriptor(x, y),
top = _getDescriptor.top,
left = _getDescriptor.left,
width = _getDescriptor.width;
var noRipplesActive = Object.keys(_this3.state.ripples).length === 0;
var key = _this3.props.rippleMultiple || noRipplesActive ? _this3.getNextKey() : _this3.getLastKey();
@ -220,15 +215,15 @@ var rippleFactory = function rippleFactory() {
}, {
key: 'getDescriptor',
value: function getDescriptor(x, y) {
var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect();
var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(this).getBoundingClientRect(),
left = _ReactDOM$findDOMNode.left,
top = _ReactDOM$findDOMNode.top,
height = _ReactDOM$findDOMNode.height,
width = _ReactDOM$findDOMNode.width;
var left = _ReactDOM$findDOMNode.left;
var top = _ReactDOM$findDOMNode.top;
var height = _ReactDOM$findDOMNode.height;
var width = _ReactDOM$findDOMNode.width;
var _props = this.props;
var centered = _props.rippleCentered;
var spread = _props.rippleSpread;
var _props = this.props,
centered = _props.rippleCentered,
spread = _props.rippleSpread;
return {
left: centered ? 0 : x - left - width / 2,
@ -307,11 +302,11 @@ var rippleFactory = function rippleFactory() {
value: function renderRipple(key, className, _ref2) {
var _classnames;
var active = _ref2.active;
var left = _ref2.left;
var restarting = _ref2.restarting;
var top = _ref2.top;
var width = _ref2.width;
var active = _ref2.active,
left = _ref2.left,
restarting = _ref2.restarting,
top = _ref2.top,
width = _ref2.width;
var scale = restarting ? 0 : 1;
var transform = 'translate3d(' + (-width / 2 + left) + 'px, ' + (-width / 2 + top) + 'px, 0) scale(' + scale + ')';
@ -333,16 +328,16 @@ var rippleFactory = function rippleFactory() {
var _this4 = this;
var ripples = this.state.ripples;
var _props2 = this.props;
var onRippleEnded = _props2.onRippleEnded;
var rippleCentered = _props2.rippleCentered;
var rippleMultiple = _props2.rippleMultiple;
var rippleSpread = _props2.rippleSpread;
var children = _props2.children;
var ripple = _props2.ripple;
var rippleClassName = _props2.rippleClassName;
var other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
var _props2 = this.props,
onRippleEnded = _props2.onRippleEnded,
rippleCentered = _props2.rippleCentered,
rippleMultiple = _props2.rippleMultiple,
rippleSpread = _props2.rippleSpread,
children = _props2.children,
ripple = _props2.ripple,
rippleClassName = _props2.rippleClassName,
other = _objectWithoutProperties(_props2, ['onRippleEnded', 'rippleCentered', 'rippleMultiple', 'rippleSpread', 'children', 'ripple', 'rippleClassName']);
if (!ripple) return _react2.default.createElement(ComposedComponent, _extends({ children: children }, other));
return _react2.default.createElement(

25
lib/slider/Slider.js
View File

@ -96,10 +96,9 @@ var factory = function factory(ProgressBar, Input) {
}, _this.handleMouseUp = function () {
_this.end(_this.getMouseEventMap());
}, _this.handleResize = function (event, callback) {
var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(_this.refs.progressbar).getBoundingClientRect();
var left = _ReactDOM$findDOMNode.left;
var right = _ReactDOM$findDOMNode.right;
var _ReactDOM$findDOMNode = _reactDom2.default.findDOMNode(_this.refs.progressbar).getBoundingClientRect(),
left = _ReactDOM$findDOMNode.left,
right = _ReactDOM$findDOMNode.right;
var cb = callback || function () {};
_this.setState({ sliderStart: left, sliderLength: right - left }, cb);
@ -189,9 +188,9 @@ var factory = function factory(ProgressBar, Input) {
}, {
key: 'knobOffset',
value: function knobOffset() {
var _props = this.props;
var max = _props.max;
var min = _props.min;
var _props = this.props,
max = _props.max,
min = _props.min;
var translated = this.state.sliderLength * (this.props.value - min) / (max - min);
return translated * 100 / this.state.sliderLength;
@ -205,12 +204,12 @@ var factory = function factory(ProgressBar, Input) {
}, {
key: 'positionToValue',
value: function positionToValue(position) {
var _state = this.state;
var start = _state.sliderStart;
var length = _state.sliderLength;
var _props2 = this.props;
var max = _props2.max;
var min = _props2.min;
var _state = this.state,
start = _state.sliderStart,
length = _state.sliderLength;
var _props2 = this.props,
max = _props2.max,
min = _props2.min;
return this.trimValue((position.x - start) / length * (max - min) + min);
}

18
lib/snackbar/Snackbar.js
View File

@ -76,15 +76,15 @@ var factory = function factory(Overlay, Button) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var action = _props.action;
var active = _props.active;
var children = _props.children;
var icon = _props.icon;
var label = _props.label;
var onClick = _props.onClick;
var theme = _props.theme;
var type = _props.type;
var _props = this.props,
action = _props.action,
active = _props.active,
children = _props.children,
icon = _props.icon,
label = _props.label,
onClick = _props.onClick,
theme = _props.theme,
type = _props.type;
var className = (0, _classnames3.default)([theme.snackbar, theme[type]], _defineProperty({}, theme.active, active), this.props.className);

52
lib/styleUtils.js Normal file
View File

@ -0,0 +1,52 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.unit = exports.alpha = undefined;
var _color = require('color');
var _color2 = _interopRequireDefault(_color);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var ensure = function ensure(args) {
return function (value) {
return typeof value === 'function' ? value(args) : value;
};
};
var anyFunction = function anyFunction(values) {
return values.filter(function (value) {
return typeof value === 'function';
}).length > 0;
};
var withProps = function withProps(fn) {
return function () {
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return anyFunction(args) ? function (props) {
return fn.apply(undefined, _toConsumableArray(args.map(ensure(props))));
} : fn.apply(undefined, args);
};
};
var alpha = function alpha(colorString, alphaValue) {
return (0, _color2.default)(colorString).alpha(alphaValue).rgbaString();
};
var unit = function unit(value) {
return value * 10 + 'px';
};
var alphaWithProps = withProps(alpha);
var unitWithProps = withProps(unit);
exports.alpha = alphaWithProps;
exports.unit = unitWithProps;

15
lib/switch/Switch.js
View File

@ -75,14 +75,13 @@ var factory = function factory(Thumb) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var className = _props.className;
var checked = _props.checked;
var disabled = _props.disabled;
var onChange = _props.onChange;
var theme = _props.theme;
var others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'onChange', 'theme']); //eslint-disable-line no-unused-vars
var _props = this.props,
className = _props.className,
checked = _props.checked,
disabled = _props.disabled,
onChange = _props.onChange,
theme = _props.theme,
others = _objectWithoutProperties(_props, ['className', 'checked', 'disabled', 'onChange', 'theme']); //eslint-disable-line no-unused-vars
var _className = (0, _classnames2.default)(theme[disabled ? 'disabled' : 'field'], className);

7
lib/switch/Thumb.js
View File

@ -16,10 +16,9 @@ function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in ob
var factory = function factory(ripple) {
var Thumb = function Thumb(_ref) {
var onMouseDown = _ref.onMouseDown;
var theme = _ref.theme;
var other = _objectWithoutProperties(_ref, ['onMouseDown', 'theme']);
var onMouseDown = _ref.onMouseDown,
theme = _ref.theme,
other = _objectWithoutProperties(_ref, ['onMouseDown', 'theme']);
return _react2.default.createElement('span', _extends({ role: 'thumb', className: theme.thumb, onMouseDown: onMouseDown }, other));
};

38
lib/table/Table.js
View File

@ -58,9 +58,9 @@ var factory = function factory(TableHead, TableRow) {
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Table.__proto__ || Object.getPrototypeOf(Table)).call.apply(_ref, [this].concat(args))), _this), _this.handleFullSelect = function () {
if (_this.props.onSelect) {
var _this$props = _this.props;
var source = _this$props.source;
var selected = _this$props.selected;
var _this$props = _this.props,
source = _this$props.source,
selected = _this$props.selected;
var newSelected = source.length === selected.length ? [] : source.map(function (i, idx) {
return idx;
@ -97,12 +97,12 @@ var factory = function factory(TableHead, TableRow) {
key: 'renderHead',
value: function renderHead() {
if (this.props.heading) {
var _props = this.props;
var model = _props.model;
var selected = _props.selected;
var source = _props.source;
var selectable = _props.selectable;
var multiSelectable = _props.multiSelectable;
var _props = this.props,
model = _props.model,
selected = _props.selected,
source = _props.source,
selectable = _props.selectable,
multiSelectable = _props.multiSelectable;
var isSelected = selected.length === source.length;
return _react2.default.createElement(TableHead, {
@ -120,13 +120,13 @@ var factory = function factory(TableHead, TableRow) {
value: function renderBody() {
var _this2 = this;
var _props2 = this.props;
var source = _props2.source;
var model = _props2.model;
var onChange = _props2.onChange;
var selectable = _props2.selectable;
var selected = _props2.selected;
var theme = _props2.theme;
var _props2 = this.props,
source = _props2.source,
model = _props2.model,
onChange = _props2.onChange,
selectable = _props2.selectable,
selected = _props2.selected,
theme = _props2.theme;
return _react2.default.createElement(
'tbody',
@ -150,9 +150,9 @@ var factory = function factory(TableHead, TableRow) {
}, {
key: 'render',
value: function render() {
var _props3 = this.props;
var className = _props3.className;
var theme = _props3.theme;
var _props3 = this.props,
className = _props3.className,
theme = _props3.theme;
return _react2.default.createElement(
'table',

12
lib/table/TableHead.js
View File

@ -14,12 +14,12 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
var factory = function factory(Checkbox) {
var TableHead = function TableHead(_ref) {
var model = _ref.model;
var onSelect = _ref.onSelect;
var selectable = _ref.selectable;
var multiSelectable = _ref.multiSelectable;
var selected = _ref.selected;
var theme = _ref.theme;
var model = _ref.model,
onSelect = _ref.onSelect,
selectable = _ref.selectable,
multiSelectable = _ref.multiSelectable,
selected = _ref.selected,
theme = _ref.theme;
var selectCell = void 0;
var contentCells = Object.keys(model).map(function (key) {

23
lib/tabs/Tab.js
View File

@ -68,18 +68,17 @@ var Tab = function (_Component) {
value: function render() {
var _classnames;
var _props = this.props;
var onActive = _props.onActive;
var active = _props.active;
var activeClassName = _props.activeClassName;
var className = _props.className;
var disabled = _props.disabled;
var hidden = _props.hidden;
var label = _props.label;
var icon = _props.icon;
var theme = _props.theme;
var other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'label', 'icon', 'theme']);
var _props = this.props,
onActive = _props.onActive,
active = _props.active,
activeClassName = _props.activeClassName,
className = _props.className,
disabled = _props.disabled,
hidden = _props.hidden,
label = _props.label,
icon = _props.icon,
theme = _props.theme,
other = _objectWithoutProperties(_props, ['onActive', 'active', 'activeClassName', 'className', 'disabled', 'hidden', 'label', 'icon', 'theme']);
var _className = (0, _classnames3.default)(theme.label, (_classnames = {}, _defineProperty(_classnames, theme.active, active), _defineProperty(_classnames, theme.hidden, hidden), _defineProperty(_classnames, theme.withText, label), _defineProperty(_classnames, theme.withIcon, icon), _defineProperty(_classnames, theme.disabled, disabled), _defineProperty(_classnames, activeClassName, active), _classnames), className);

17
lib/tabs/Tabs.js
View File

@ -171,16 +171,15 @@ var factory = function factory(Tab, TabContent) {
value: function render() {
var _classnames;
var _props = this.props;
var className = _props.className;
var theme = _props.theme;
var fixed = _props.fixed;
var inverse = _props.inverse;
var _props = this.props,
className = _props.className,
theme = _props.theme,
fixed = _props.fixed,
inverse = _props.inverse;
var _parseChildren = this.parseChildren();
var headers = _parseChildren.headers;
var contents = _parseChildren.contents;
var _parseChildren = this.parseChildren(),
headers = _parseChildren.headers,
contents = _parseChildren.contents;
var classes = (0, _classnames3.default)(theme.tabs, className, (_classnames = {}, _defineProperty(_classnames, theme.fixed, fixed), _defineProperty(_classnames, theme.inverse, inverse), _classnames));
return _react2.default.createElement(

9
lib/time_picker/Clock.js
View File

@ -62,11 +62,10 @@ var Clock = function (_Component) {
_this.props.onChange(_time2.default.setMinutes(_this.props.time, minutes));
}
}, _this.handleCalculateShape = function () {
var _this$refs$placeholde = _this.refs.placeholder.getBoundingClientRect();
var top = _this$refs$placeholde.top;
var left = _this$refs$placeholde.left;
var width = _this$refs$placeholde.width;
var _this$refs$placeholde = _this.refs.placeholder.getBoundingClientRect(),
top = _this$refs$placeholde.top,
left = _this$refs$placeholde.left,
width = _this$refs$placeholde.width;
_this.setState({
center: { x: left + width / 2 - window.pageXOffset, y: top + width / 2 - window.pageXOffset },

22
lib/time_picker/ClockFace.js
View File

@ -39,12 +39,12 @@ var Face = function (_Component) {
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Face.__proto__ || Object.getPrototypeOf(Face)).call.apply(_ref, [this].concat(args))), _this), _this.renderNumber = function (number, idx) {
var _this$props = _this.props;
var active = _this$props.active;
var radius = _this$props.radius;
var spacing = _this$props.spacing;
var theme = _this$props.theme;
var twoDigits = _this$props.twoDigits;
var _this$props = _this.props,
active = _this$props.active,
radius = _this$props.radius,
spacing = _this$props.spacing,
theme = _this$props.theme,
twoDigits = _this$props.twoDigits;
return _react2.default.createElement(
'span',
@ -78,11 +78,11 @@ var Face = function (_Component) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var numbers = _props.numbers;
var onTouchStart = _props.onTouchStart;
var onMouseDown = _props.onMouseDown;
var theme = _props.theme;
var _props = this.props,
numbers = _props.numbers,
onTouchStart = _props.onTouchStart,
onMouseDown = _props.onMouseDown,
theme = _props.theme;
return _react2.default.createElement(
'div',

14
lib/time_picker/ClockHours.js
View File

@ -96,13 +96,13 @@ var Hours = function (_Component) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var format = _props.format;
var selected = _props.selected;
var radius = _props.radius;
var spacing = _props.spacing;
var center = _props.center;
var onHandMoved = _props.onHandMoved;
var _props = this.props,
format = _props.format,
selected = _props.selected,
radius = _props.radius,
spacing = _props.spacing,
center = _props.center,
onHandMoved = _props.onHandMoved;
var is24hr = format === '24hr';

25
lib/time_picker/TimePicker.js
View File

@ -107,19 +107,18 @@ var factory = function factory(TimePickerDialog, Input) {
}, {
key: 'render',
value: function render() {
var _props = this.props;
var active = _props.active;
var onDismiss = _props.onDismiss;
var cancelLabel = _props.cancelLabel;
var format = _props.format;
var inputClassName = _props.inputClassName;
var okLabel = _props.okLabel;
var onEscKeyDown = _props.onEscKeyDown;
var onOverlayClick = _props.onOverlayClick;
var readonly = _props.readonly;
var value = _props.value;
var others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
var _props = this.props,
active = _props.active,
onDismiss = _props.onDismiss,
cancelLabel = _props.cancelLabel,
format = _props.format,
inputClassName = _props.inputClassName,
okLabel = _props.okLabel,
onEscKeyDown = _props.onEscKeyDown,
onOverlayClick = _props.onOverlayClick,
readonly = _props.readonly,
value = _props.value,
others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
var formattedTime = value ? _time2.default.formatTime(value, format) : '';
return _react2.default.createElement(

75
lib/tooltip/Tooltip.js
View File

@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
@ -64,14 +64,12 @@ var defaults = {
var tooltipFactory = function tooltipFactory() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _defaults$options = _extends({}, defaults, options);
var defaultClassName = _defaults$options.className;
var defaultDelay = _defaults$options.delay;
var defaultHideOnClick = _defaults$options.hideOnClick;
var defaultPosition = _defaults$options.position;
var defaultTheme = _defaults$options.theme;
var _defaults$options = _extends({}, defaults, options),
defaultClassName = _defaults$options.className,
defaultDelay = _defaults$options.delay,
defaultHideOnClick = _defaults$options.hideOnClick,
defaultPosition = _defaults$options.position,
defaultTheme = _defaults$options.theme;
return function (ComposedComponent) {
var TooltippedComponent = function (_Component) {
@ -121,9 +119,9 @@ var tooltipFactory = function tooltipFactory() {
value: function activate(_ref2) {
var _this2 = this;
var top = _ref2.top;
var left = _ref2.left;
var position = _ref2.position;
var top = _ref2.top,
left = _ref2.left,
position = _ref2.position;
if (this.timeout) clearTimeout(this.timeout);
this.setState({ visible: true, position: position });
@ -150,18 +148,16 @@ var tooltipFactory = function tooltipFactory() {
if (tooltipPosition === POSITION.HORIZONTAL) {
var origin = element.getBoundingClientRect();
var _utils$getViewport = _utils2.default.getViewport();
var ww = _utils$getViewport.width;
var _utils$getViewport = _utils2.default.getViewport(),
ww = _utils$getViewport.width;
var toRight = origin.left < ww / 2 - origin.width / 2;
return toRight ? POSITION.RIGHT : POSITION.LEFT;
} else if (tooltipPosition === POSITION.VERTICAL) {
var _origin = element.getBoundingClientRect();
var _utils$getViewport2 = _utils2.default.getViewport();
var wh = _utils$getViewport2.height;
var _utils$getViewport2 = _utils2.default.getViewport(),
wh = _utils$getViewport2.height;
var toBottom = _origin.top < wh / 2 - _origin.height / 2;
return toBottom ? POSITION.BOTTOM : POSITION.TOP;
@ -174,12 +170,11 @@ var tooltipFactory = function tooltipFactory() {
value: function calculatePosition(element) {
var position = this.getPosition(element);
var _element$getBoundingC = element.getBoundingClientRect();
var top = _element$getBoundingC.top;
var left = _element$getBoundingC.left;
var height = _element$getBoundingC.height;
var width = _element$getBoundingC.width;
var _element$getBoundingC = element.getBoundingClientRect(),
top = _element$getBoundingC.top,
left = _element$getBoundingC.left,
height = _element$getBoundingC.height,
width = _element$getBoundingC.width;
var xOffset = window.scrollX || window.pageXOffset;
var yOffset = window.scrollY || window.pageYOffset;
@ -214,24 +209,24 @@ var tooltipFactory = function tooltipFactory() {
value: function render() {
var _classnames;
var _state = this.state;
var active = _state.active;
var left = _state.left;
var top = _state.top;
var position = _state.position;
var visible = _state.visible;
var _state = this.state,
active = _state.active,
left = _state.left,
top = _state.top,
position = _state.position,
visible = _state.visible;
var positionClass = 'tooltip' + (position.charAt(0).toUpperCase() + position.slice(1));
var _props = this.props;
var children = _props.children;
var className = _props.className;
var theme = _props.theme;
var tooltip = _props.tooltip;
var tooltipDelay = _props.tooltipDelay;
var tooltipHideOnClick = _props.tooltipHideOnClick;
var tooltipPosition = _props.tooltipPosition;
var other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition']);
var _props = this.props,
children = _props.children,
className = _props.className,
theme = _props.theme,
tooltip = _props.tooltip,
tooltipDelay = _props.tooltipDelay,
tooltipHideOnClick = _props.tooltipHideOnClick,
tooltipPosition = _props.tooltipPosition,
other = _objectWithoutProperties(_props, ['children', 'className', 'theme', 'tooltip', 'tooltipDelay', 'tooltipHideOnClick', 'tooltipPosition']);
var _className = (0, _classnames3.default)(theme.tooltip, (_classnames = {}, _defineProperty(_classnames, theme.tooltipActive, active), _defineProperty(_classnames, theme[positionClass], theme[positionClass]), _classnames));

4
lib/utils/utils.js
View File

@ -16,8 +16,8 @@ exports.default = {
var start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var stop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
var step = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
var _start = 0;
var _stop = start;
var _start = 0,
_stop = start;
if (stop !== null) {
_start = start;