tuya-panel-kit
Version:
a functional component library for developing tuya device panels!
375 lines (327 loc) • 13.8 kB
JavaScript
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 _jsxFileName = 'src/components/slider-progress/index.js';
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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactNative = require('react-native');
var _lodash = require('lodash');
var _lodash2 = _interopRequireDefault(_lodash);
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; }
var SliderProgress = function (_Component) {
_inherits(SliderProgress, _Component);
function SliderProgress(props) {
_classCallCheck(this, SliderProgress);
var _this = _possibleConstructorReturn(this, (SliderProgress.__proto__ || Object.getPrototypeOf(SliderProgress)).call(this, props));
_initialiseProps.call(_this);
_this.isSingle = typeof _this.props.value === 'number';
_this.state = {
maxValue: _this.isSingle ? _this.props.value : props.value[1] > props.max ? props.max : props.value[1],
minValue: _this.isSingle ? props.min : props.value[0] > props.min ? props.value[0] : props.min
};
_this._minPrevious = 0;
_this._maxPrevious = 0;
_this._minCurrent = 0;
_this._maxCurrent = 0;
_this.moveDirection = '';
_this.ifCanMove = true;var style = props.style;
var _StyleSheet$flatten = _reactNative.StyleSheet.flatten([styles.root, style]),
boxHeight = _StyleSheet$flatten.height,
boxWidth = _StyleSheet$flatten.width;
_this.boxSize = { height: boxHeight, width: boxWidth };
_this._panResponder = _reactNative.PanResponder.create({
onStartShouldSetPanResponder: _this._handleStartShouldSetPanResponder.bind(_this),
onMoveShouldSetPanResponder: _this._handleMoveShouldSetPanResponder.bind(_this),
onPanResponderGrant: _this._handlePanResponderGrant.bind(_this),
onPanResponderMove: _this._handleMove.bind(_this),
onPanResponderRelease: _this._handleRelease.bind(_this) });
return _this;
}
_createClass(SliderProgress, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (nextProps.value !== this.props.value) {
if (this.isSingle) {
this.setState({ maxValue: nextProps.value });
} else {
this.setState({ maxValue: nextProps.value[1], minValue: nextProps.value[0] });
}
}
}
}, {
key: '_handleStartShouldSetPanResponder',
value: function _handleStartShouldSetPanResponder() {
if (this.props.disabled) {
return false;
}
return true;
}
}, {
key: '_handleMoveShouldSetPanResponder',
value: function _handleMoveShouldSetPanResponder() {
return false;
}
}, {
key: '_handlePanResponderGrant',
value: function _handlePanResponderGrant(evt) {
if (this.props.disabled) return;
this._getValueByGestureEvent(evt);
}
}, {
key: '_handleMove',
value: function _handleMove(evt, _ref) {
var _this2 = this;
var dx = _ref.dx;
if (this.props.disabled) return;
if (!this.ifCanMove) return;
if (!this.props.ifAllowClick && Math.abs(dx) >= 1 || this.props.ifAllowClick) {
if (this.moveDirection === 'middle') {
if (dx > 0) this.moveDirection = 'max';
if (dx < 0) this.moveDirection = 'min';
}
this['_' + this.moveDirection + 'Current'] = dx;
var left = this['_' + this.moveDirection + 'Previous'] + dx;
var value = this.limitValue(this.mapLeftToValue(left));
this.setState(_defineProperty({}, this.moveDirection + 'Value', value), function () {
if (_this2.isSingle) {
_this2.props.onValueChange(_this2.state.maxValue);
} else {
_this2.props.onValueChange({
minValue: _this2.state.minValue,
maxValue: _this2.state.maxValue
});
}
});
}
}
}, {
key: '_handleRelease',
value: function _handleRelease(evt, _ref2) {
var _this3 = this;
var dx = _ref2.dx;
if (this.props.disabled) return;
if (!this.ifCanMove) return;
if (!this.props.ifAllowClick && Math.abs(this['_' + this.moveDirection + 'Previous'] - this['_' + this.moveDirection + 'Current']) >= 1 || this.props.ifAllowClick) {
var value = 0;
this['_' + this.moveDirection + 'Previous'] += dx;
value = this.limitValue(this.mapLeftToValue(this['_' + this.moveDirection + 'Previous']));
this.setState(_defineProperty({}, this.moveDirection + 'Value', value), function () {
if (_this3.isSingle) {
_this3.props.onComplete(_this3.state.maxValue);
} else {
_this3.props.onComplete({
minValue: _this3.state.minValue,
maxValue: _this3.state.maxValue
});
}
});
}
}
}, {
key: '_getValueByGestureEvent',
value: function _getValueByGestureEvent(_ref3) {
var locationX = _ref3.nativeEvent.locationX;
var ifAllowClick = this.props.ifAllowClick;
var _getWhichMove = this._getWhichMove(locationX),
isMax = _getWhichMove.isMax,
isMin = _getWhichMove.isMin;
if (this.state.maxValue - this.state.minValue <= 5 && !ifAllowClick) {
this._previousMiddle = locationX;
this.moveDirection = 'middle';
this.ifCanMove = true;
} else if (isMin && !isMax && !this.isSingle) {
this._minPrevious = locationX;
this.moveDirection = 'min';
this.ifCanMove = true;
} else if (!isMax && !this.isSingle) {
this.ifCanMove = false;
} else if (isMax) {
this._maxPrevious = locationX;
this.moveDirection = 'max';
this.ifCanMove = true;
}
}
}, {
key: 'mapLeftToValue',
value: function mapLeftToValue(v) {
var left = _lodash2.default.clamp(v, 0, this.boxSize.width);
var _props = this.props,
min = _props.min,
max = _props.max;
var value = Math.round(left / this.boxSize.width * (max - min) + min);
return value;
}
}, {
key: 'mapValueToLeft',
value: function mapValueToLeft(v) {
var _props2 = this.props,
min = _props2.min,
max = _props2.max;
var left = Math.round(this.boxSize.width * [(v - min) / (max - min)] - this.props.thumbWidth);
return left;
}
}, {
key: 'render',
value: function render() {
var _props3 = this.props,
style = _props3.style,
accessibilityLabel = _props3.accessibilityLabel;
return _react2.default.createElement(
_reactNative.View,
{ style: [styles.root, style], accessibilityLabel: accessibilityLabel, __source: {
fileName: _jsxFileName,
lineNumber: 255
}
},
_react2.default.createElement(
_reactNative.View,
_extends({
style: [styles.touchArea, { height: this.boxSize.height, width: this.boxSize.width }]
}, this._panResponder.panHandlers, {
__source: {
fileName: _jsxFileName,
lineNumber: 256
}
}),
this.renderTrackView(),
_react2.default.createElement(_reactNative.View, { style: [styles.track], __source: {
fileName: _jsxFileName,
lineNumber: 261
}
})
)
);
}
}]);
return SliderProgress;
}(_react.Component);
SliderProgress.propTypes = {
accessibilityLabel: _propTypes2.default.string,
min: _propTypes2.default.number,
max: _propTypes2.default.number,
value: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.array]),
style: _propTypes2.default.any,
onValueChange: _propTypes2.default.func,
onComplete: _propTypes2.default.func,
disabled: _propTypes2.default.bool,
thumbWidth: _propTypes2.default.number,
activeColor: _propTypes2.default.string,
inactiveColor: _propTypes2.default.string,
activeBase: _propTypes2.default.number,
ifAllowClick: _propTypes2.default.bool
};
SliderProgress.defaultProps = {
accessibilityLabel: 'SliderProgress',
value: 10,
min: 0,
max: 100,
onValueChange: function onValueChange() {},
onComplete: function onComplete() {},
style: {},
disabled: false,
thumbWidth: 4,
activeColor: '#5E719F',
inactiveColor: 'rgba(94,113,159,0.2)',
activeBase: 4,
ifAllowClick: true
};
var _initialiseProps = function _initialiseProps() {
var _this4 = this;
this.componentDidMount = function () {
_this4._minPrevious = _this4.mapValueToLeft(_this4.state.minValue);
_this4._maxPrevious = _this4.mapValueToLeft(_this4.state.maxValue);
};
this.limitValue = function (value) {
if (_this4.moveDirection === 'max') {
return value > _this4.state.minValue ? value : _this4.state.minValue;
} else if (_this4.moveDirection === 'min') {
return value < _this4.state.maxValue ? value : _this4.state.maxValue;
}
};
this._getWhichMove = function (locationX) {
var isMax = false;
var isMin = false;
var _props4 = _this4.props,
activeBase = _props4.activeBase,
thumbWidth = _props4.thumbWidth,
ifAllowClick = _props4.ifAllowClick,
max = _props4.max,
min = _props4.min;
if (ifAllowClick) {
if (_this4.isSingle) {
isMax = true;
isMin = false;
} else {
isMax = locationX > _this4._maxPrevious;
isMin = locationX < _this4._minPrevious;
}
} else {
isMax = Math.abs(locationX - _this4._maxPrevious) <= activeBase * thumbWidth || _this4.state.maxValue === max && locationX >= _this4.boxSize.width - activeBase * thumbWidth;
isMin = Math.abs(_this4._minPrevious - locationX) <= activeBase * thumbWidth || _this4.state.minValue === min && locationX <= activeBase * thumbWidth;
}
return { isMax: isMax, isMin: isMin };
};
this.renderTrackView = function () {
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
style = _ref4.style;
var _props5 = _this4.props,
thumbWidth = _props5.thumbWidth,
activeColor = _props5.activeColor,
inactiveColor = _props5.inactiveColor,
min = _props5.min,
max = _props5.max;
var _state = _this4.state,
maxValue = _state.maxValue,
minValue = _state.minValue;
var num = Math.floor((_this4.boxSize.width / thumbWidth + 1) / 2);
var arr = new Array(num).fill({}).map(function (item, index) {
var rate = (index + 1) / num;
var keyValue = Math.round((max - min) * rate + min);
var isActive = keyValue <= maxValue && keyValue >= minValue;
return _react2.default.createElement(_reactNative.View, {
key: keyValue,
style: {
height: _this4.boxSize.height,
width: thumbWidth,
backgroundColor: isActive ? activeColor : inactiveColor
},
__source: {
fileName: _jsxFileName,
lineNumber: 225
}
});
});
return _react2.default.createElement(
_reactNative.View,
{
style: [_extends({
flexDirection: 'row',
justifyContent: 'space-between'
}, _reactNative.StyleSheet.absoluteFillObject), style],
pointerEvents: 'box-only',
__source: {
fileName: _jsxFileName,
lineNumber: 237
}
},
arr
);
};
};
exports.default = SliderProgress;
var styles = _reactNative.StyleSheet.create({
root: {
width: 300,
height: 33
},
track: _extends({}, _reactNative.StyleSheet.absoluteFillObject),
touchArea: _extends({}, _reactNative.StyleSheet.absoluteFillObject)
});