tuya-panel-kit
Version:
a functional component library for developing tuya device panels!
291 lines (237 loc) • 10.6 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.PickerModal = undefined;
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/popup/picker.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 _reactNative = require('react-native');
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _utils = require('../../utils');
var _pickerView = require('../picker-view');
var _pickerView2 = _interopRequireDefault(_pickerView);
var _withSkeleton = require('./withSkeleton');
var _withSkeleton2 = _interopRequireDefault(_withSkeleton);
var _styled = require('./styled');
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 _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); } }
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 get = _utils.CoreUtils.get;
var getTheme = _utils.ThemeUtils.getTheme,
ThemeConsumer = _utils.ThemeUtils.ThemeConsumer;
var cx = _utils.RatioUtils.convertX,
isIos = _utils.RatioUtils.isIos;
var PickerPopup = function (_React$PureComponent) {
_inherits(PickerPopup, _React$PureComponent);
function PickerPopup(props) {
_classCallCheck(this, PickerPopup);
var _this = _possibleConstructorReturn(this, (PickerPopup.__proto__ || Object.getPrototypeOf(PickerPopup)).call(this, props));
_initialiseProps.call(_this);
var hasValue = typeof props.value !== 'undefined';
var value = void 0;
if (_this.props.singlePicker) {
value = hasValue ? props.value : get(props, 'dataSource[0].value');
} else {
value = hasValue ? props.value : props.dataSource.map(function (data) {
return data[0].value;
});
}
_this.state = {
value: value,
width: 0,
height: 0
};
props._onDataChange(_this.state.value, 0);
return _this;
}
_createClass(PickerPopup, [{
key: 'render',
value: function render() {
var _props = this.props,
switchValue = _props.switchValue,
pickerWrapperStyle = _props.pickerWrapperStyle;
return _react2.default.createElement(
_styled.StyledPickerContainer,
{
style: pickerWrapperStyle,
onLayout: this.onLayout,
disabled: !switchValue,
pointerEvents: !switchValue ? 'none' : 'auto',
__source: {
fileName: _jsxFileName,
lineNumber: 207
}
},
this.renderPickers()
);
}
}]);
return PickerPopup;
}(_react2.default.PureComponent);
PickerPopup.propTypes = {
switchValue: _propTypes2.default.bool.isRequired,
label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),
spacing: _propTypes2.default.number,
labelOffset: _propTypes2.default.number,
pickerWrapperStyle: _reactNative.ViewPropTypes.style,
pickerStyle: _reactNative.ViewPropTypes.style,
value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.bool, _propTypes2.default.array]),
dataSource: _propTypes2.default.array,
singlePicker: _propTypes2.default.bool,
pickerFontColor: _reactNative.ColorPropType,
pickerUnitColor: _reactNative.ColorPropType,
onValueChange: _propTypes2.default.func,
_onDataChange: _propTypes2.default.func
};
PickerPopup.defaultProps = {
label: '',
spacing: 60,
labelOffset: 22,
pickerWrapperStyle: null,
pickerStyle: null,
value: '',
dataSource: [],
singlePicker: true,
pickerFontColor: null,
pickerUnitColor: null,
onValueChange: function onValueChange() {},
_onDataChange: function _onDataChange() {}
};
var _initialiseProps = function _initialiseProps() {
var _this2 = this;
this.onLayout = function (e) {
_this2.setState({
height: e.nativeEvent.layout.height,
width: e.nativeEvent.layout.width
});
};
this.onValueChange = function (v, idx) {
var _props2 = _this2.props,
singlePicker = _props2.singlePicker,
onValueChange = _props2.onValueChange,
_onDataChange = _props2._onDataChange;
var newValue = v;
if (!singlePicker) {
newValue = [].concat(_toConsumableArray(_this2.state.value));
newValue.splice(idx, 1, v);
_this2.setState({ value: newValue });
}
onValueChange && onValueChange(newValue, idx);
_onDataChange && _onDataChange(newValue, idx);
};
this.renderLabel = function (data, idx, allDatas) {
var _props3 = _this2.props,
label = _props3.label,
labelOffset = _props3.labelOffset,
pickerUnitColor = _props3.pickerUnitColor;
var _state = _this2.state,
height = _state.height,
width = _state.width;
if (!label) return null;
if (!height || !width) return null;
var realLabel = Array.isArray(label) ? label[idx] : label;
var left = (width - 60) / (2 * allDatas.length) + labelOffset;
return _react2.default.createElement(
_styled.StyledPickerUnit,
{ style: { height: height, left: left, zIndex: 2 }, __source: {
fileName: _jsxFileName,
lineNumber: 133
}
},
_react2.default.createElement(
_styled.StyledPickerUnitText,
{ pickerUnitColor: pickerUnitColor, __source: {
fileName: _jsxFileName,
lineNumber: 134
}
},
realLabel
)
);
};
this.renderPickerItem = function (data) {
return data.map(function (item) {
var value = item.value,
label = item.label;
return _react2.default.createElement(_pickerView2.default.Item, { key: value, label: label || value, value: value, __source: {
fileName: _jsxFileName,
lineNumber: 142
}
});
});
};
this.renderPickers = function () {
var _props4 = _this2.props,
spacing = _props4.spacing,
dataSource = _props4.dataSource,
singlePicker = _props4.singlePicker,
pickerWrapperStyle = _props4.pickerWrapperStyle,
pickerStyle = _props4.pickerStyle,
pickerFontColor = _props4.pickerFontColor,
props = _objectWithoutProperties(_props4, ['spacing', 'dataSource', 'singlePicker', 'pickerWrapperStyle', 'pickerStyle', 'pickerFontColor']);
var pickerDatas = singlePicker ? [dataSource] : dataSource;
var pickerFontSize = cx(30);
if (pickerDatas.length < 3) {
pickerFontSize = cx(30);
} else if (pickerDatas.length === 3) {
pickerFontSize = cx(27);
} else {
pickerFontSize = cx(24);
}
return _react2.default.createElement(
ThemeConsumer,
{
__source: {
fileName: _jsxFileName,
lineNumber: 166
}
},
function (globalTheme) {
var pickerTheme = _extends({}, _this2.props, { theme: globalTheme });
var pickerColor = pickerFontColor || getTheme(pickerTheme, 'popup.cellFontColor');
return pickerDatas.map(function (data, idx) {
return _react2.default.createElement(
_styled.StyledPickerContainer,
{
style: [!isIos && { height: cx(254), paddingTop: cx(32), paddingBottom: cx(32) }, pickerWrapperStyle],
key: idx,
__source: {
fileName: _jsxFileName,
lineNumber: 173
}
},
_this2.renderLabel(data, idx, pickerDatas),
_react2.default.createElement(
_pickerView2.default,
_extends({
theme: { fontColor: pickerColor, fontSize: pickerFontSize }
}, props, {
selectedValue: singlePicker ? _this2.state.value : _this2.state.value[idx],
onValueChange: function onValueChange(v) {
return _this2.onValueChange(v, idx);
},
style: _reactNative.StyleSheet.flatten([pickerStyle, {
width: (_utils.RatioUtils.winWidth - spacing) / pickerDatas.length,
backgroundColor: getTheme(pickerTheme, 'popup.cellBg') || '#fff'
}]),
__source: {
fileName: _jsxFileName,
lineNumber: 181
}
}),
_this2.renderPickerItem(data, idx, pickerDatas)
)
);
});
}
);
};
};
var PickerModal = exports.PickerModal = (0, _withSkeleton2.default)(PickerPopup, true);
exports.default = (0, _withSkeleton2.default)(PickerPopup);