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

Latest build

old
Javi Velasco 2016-08-06 21:18:44 +02:00
parent 991da710cf
commit 57bb663e94
7 changed files with 65 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/autocomplete/Autocomplete.js
View File

@ -104,7 +104,7 @@ var factory = function factory(Chip, Input) {
var target = _this.state.active;
if (!target) {
target = [].concat(_toConsumableArray(_this.suggestions().keys()))[0];
if (_this.props.create && !target) {
if (!target && _this.props.allowCreate) {
target = _this.state.query;
}
_this.setState({ active: target });
@ -161,8 +161,7 @@ var factory = function factory(Chip, Input) {
}, {
key: 'query',
value: function query(key) {
var value = this.props.create && !this.source().get(key) ? key : this.source().get(key);
return !this.props.multiple && key ? value : '';
return !this.props.multiple && key ? this.source().get(key) : '';
}
}, {
key: 'suggestions',
@ -394,6 +393,7 @@ 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;
@ -401,9 +401,8 @@ var factory = function factory(Chip, Input) {
var selectedPosition = _props.selectedPosition;
var showSuggestionsWhenValueIsSet = _props.showSuggestionsWhenValueIsSet;
var theme = _props.theme;
var create = _props.create;
var other = _objectWithoutProperties(_props, ['error', 'label', 'source', 'suggestionMatch', 'selectedPosition', 'showSuggestionsWhenValueIsSet', 'theme', 'create']);
var 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);
@ -433,6 +432,7 @@ var factory = function factory(Chip, Input) {
}(_react.Component);
Autocomplete.propTypes = {
allowCreate: _react.PropTypes.bool,
className: _react.PropTypes.string,
direction: _react.PropTypes.oneOf(['auto', 'up', 'down']),
disabled: _react.PropTypes.bool,
@ -444,7 +444,6 @@ var factory = function factory(Chip, Input) {
showSuggestionsWhenValueIsSet: _react.PropTypes.bool,
source: _react.PropTypes.any,
suggestionMatch: _react.PropTypes.oneOf(['start', 'anywhere', 'word']),
create: _react.PropTypes.bool,
theme: _react.PropTypes.shape({
active: _react.PropTypes.string,
autocomplete: _react.PropTypes.string,
@ -460,6 +459,7 @@ var factory = function factory(Chip, Input) {
value: _react.PropTypes.any
};
Autocomplete.defaultProps = {
allowCreate: false,
className: '',
direction: 'auto',
selectedPosition: 'above',

1
lib/dropdown/Dropdown.js
View File

@ -206,6 +206,7 @@ var factory = function factory(Input) {
className: theme.value,
onMouseDown: this.handleMouseDown,
readOnly: true,
theme: theme,
type: template && selected ? 'hidden' : null,
value: selected && selected.label ? selected.label : ''
})),

2
lib/dropdown/theme.scss
View File

@ -37,7 +37,7 @@
}
.value {
> input {
> .inputElement {
cursor: pointer;
}
&:after {

2
lib/identifiers.js
View File

@ -29,4 +29,4 @@ var SWITCH = exports.SWITCH = 'RTSwitch';
var TABLE = exports.TABLE = 'RTTable';
var TABS = exports.TABS = 'RTTabs';
var TOOLTIP = exports.TOOLTIP = 'RTTooltip';
var TIMEPICKER = exports.TIMEPICKER = 'RTTimePicker';
var TIME_PICKER = exports.TIME_PICKER = 'RTTimePicker';

8
lib/input/Input.js
View File

@ -79,7 +79,7 @@ var factory = function factory(FontIcon) {
// resize the input to its content size
element.style.height = 'auto';
element.style.height = element.scrollHeight + heightOffset + 'px';
}, _this.onKeyPress = function (event) {
}, _this.handleKeyPress = function (event) {
// prevent insertion of more characters if we're a multiline input
// and maxLength exists
var _this$props2 = _this.props;
@ -190,15 +190,13 @@ var factory = function factory(FontIcon) {
inputElementProps.onKeyPress = onKeyPress;
} else {
inputElementProps.rows = 1;
inputElementProps.onKeyPress = this.onKeyPress;
inputElementProps.onKeyPress = this.handleKeyPress;
}
var InputElement = _react2.default.createElement(multiline ? 'textarea' : 'input', inputElementProps);
return _react2.default.createElement(
'div',
{ 'data-react-toolbox': 'input', className: className },
InputElement,
_react2.default.createElement(multiline ? 'textarea' : 'input', inputElementProps),
icon ? _react2.default.createElement(FontIcon, { className: theme.icon, value: icon }) : null,
_react2.default.createElement('span', { className: theme.bar }),
labelText ? _react2.default.createElement(

68
lib/ripple/Ripple.js
View File

@ -119,6 +119,16 @@ var rippleFactory = function rippleFactory() {
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();
});
}
/**
* Add an event listener to the reference with given key so when the animation transition
@ -159,24 +169,24 @@ var rippleFactory = function rippleFactory() {
}, {
key: 'animateRipple',
value: function animateRipple(x, y, isTouch) {
var _this2 = this;
var _this3 = this;
if (this.rippleShouldTrigger(isTouch)) {
(function () {
var _getDescriptor = _this2.getDescriptor(x, y);
var _getDescriptor = _this3.getDescriptor(x, y);
var top = _getDescriptor.top;
var left = _getDescriptor.left;
var width = _getDescriptor.width;
var noRipplesActive = Object.keys(_this2.state.ripples).length === 0;
var key = _this2.props.rippleMultiple || noRipplesActive ? _this2.getNextKey() : _this2.getLastKey();
var initialState = { active: false, restarting: true, top: top, left: left, width: 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 };
_this2.addRippleDeactivateEventListener(isTouch, key);
_this2.setState((0, _reactAddonsUpdate2.default)(_this2.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
_this2.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
_this2.setState((0, _reactAddonsUpdate2.default)(_this2.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
_this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $set: initialState }) }), function () {
_this3.refs[key].offsetWidth; //eslint-disable-line no-unused-expressions
_this3.setState((0, _reactAddonsUpdate2.default)(_this3.state, { ripples: _defineProperty({}, key, { $merge: runningState }) }));
});
})();
}
@ -256,22 +266,42 @@ var rippleFactory = function rippleFactory() {
}
/**
* Add an event listener to the document needed deactivate a ripple and make it dissappear.
* Deactivation can happen with a touchend or mouseup depending on the trigger type.
* 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 self = this;
var eventType = isTouch ? 'touchend' : 'mouseup';
document.addEventListener(eventType, function endRipple() {
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, _reactAddonsUpdate2.default)(self.state.ripples, _defineProperty({}, rippleKey, { $merge: { active: false } })) });
});
};
}
}, {
key: 'renderRipple',
@ -301,14 +331,14 @@ var rippleFactory = function rippleFactory() {
}, {
key: 'render',
value: function render() {
var _this3 = this;
var _this4 = this;
if (!this.props.ripple) {
return _react2.default.createElement(ComposedComponent, this.props);
} else {
var _ret3 = function () {
var ripples = _this3.state.ripples;
var _props2 = _this3.props;
var ripples = _this4.state.ripples;
var _props2 = _this4.props;
var ripple = _props2.ripple;
var onRippleEnded = _props2.onRippleEnded;
var rippleCentered = _props2.rippleCentered;
@ -322,10 +352,10 @@ var rippleFactory = function rippleFactory() {
return {
v: _react2.default.createElement(
ComposedComponent,
_extends({}, other, { onMouseDown: _this3.handleMouseDown, onTouchStart: _this3.handleTouchStart }),
_extends({}, other, { onMouseDown: _this4.handleMouseDown, onTouchStart: _this4.handleTouchStart }),
children ? children : null,
Object.keys(ripples).map(function (key) {
return _this3.renderRipple(key, className, ripples[key]);
return _this4.renderRipple(key, className, ripples[key]);
})
)
};

4
lib/utils/polyfills.js
View File

@ -4,8 +4,12 @@ require('core-js/fn/array/from');
require('core-js/fn/array/iterator');
require('core-js/fn/array/find-index');
require('core-js/fn/map');
require('core-js/fn/string/starts-with');
require('core-js/fn/string/includes');
require('core-js/fn/symbol');