weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
234 lines (199 loc) • 8.28 kB
JavaScript
/** @jsx createElement */
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
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 _rax = require('rax');
var _nukeView = require('../../View/index.js');
var _nukeView2 = _interopRequireDefault(_nukeView);
var _nukeTouchable = require('../../Touchable/index.js');
var _nukeTouchable2 = _interopRequireDefault(_nukeTouchable);
var _nukeIcon = require('../../Icon/index.js');
var _nukeIcon2 = _interopRequireDefault(_nukeIcon);
var _nukeThemeProvider = require('../../ThemeProvider/index.js');
var _styles = require('../styles/index.js');
var _styles2 = _interopRequireDefault(_styles);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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 TextAttrArr = ['color', 'fontSize', 'fontStyle', 'fontWeight', 'lineHeight'];
/**
* Checkbox
* @description 复选框处理
*/
var Checkbox = function (_Component) {
_inherits(Checkbox, _Component);
function Checkbox(props, context) {
_classCallCheck(this, Checkbox);
var _this = _possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).call(this, props));
_this.onChange = _this.onChange.bind(_this);
var checked = void 0;
if (context.value && context.value.indexOf(props.value) > -1 && !_this.props.ignoreContext) {
checked = props.value;
} else if ('checked' in props) checked = props.checked;else checked = props.defaultChecked;
_this.state = {
checked: checked
};
return _this;
}
_createClass(Checkbox, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps, nextContext) {
if (this.context.__group__ && !this.props.ignoreContext) {
if (_typeof(nextContext.value) === 'object' && nextContext.value.indexOf(nextProps.value) > -1) {
this.setState({
checked: true
});
} else {
this.setState({
checked: false
});
}
} else if ('checked' in nextProps) {
if (nextProps.checked != this.props.checked) {
// if(this.props.disabled)
// return;
this.setState({
checked: nextProps.checked
});
}
}
}
}, {
key: 'onChange',
value: function onChange(e) {
var _props = this.props,
onChange = _props.onChange,
disabled = _props.disabled,
value = _props.value;
if (disabled) return;
var tmp = this.state.checked;
if (this.context && this.context.__group__ && !this.props.ignoreContext) {
this.context.onChange(value, !tmp, value);
} else if (!('checked' in this.props)) {
this.setState({
checked: !tmp
});
}
onChange(!tmp);
e.stopPropagation && e.stopPropagation();
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props,
size = _props2.size,
style = _props2.style,
disabled = _props2.disabled,
type = _props2.type,
checkedStyle = _props2.checkedStyle,
unCheckedStyle = _props2.unCheckedStyle,
touchStyle = _props2.touchStyle,
themeStyle = _props2.themeStyle;
var checked = this.state.checked;
var elementTouchStyle = Object.assign({}, themeStyle['touch-' + size], touchStyle);
var checkedStyleAll = Object.assign({}, themeStyle[size], themeStyle[type + '-checked'], checkedStyle);
var unCheckedStyleAll = Object.assign({}, themeStyle[size], themeStyle['wrap-' + type + '-' + size], style, unCheckedStyle);
var disabledStyle = {};
if (type === 'list') {
// list的disable样式区别于其他两种
disabledStyle = themeStyle['list-disabled'];
} else if (checked) {
disabledStyle = themeStyle['checked-disabled'];
} else {
disabledStyle = themeStyle.disabled;
}
var iconWrapStyle = Object.assign({}, style, unCheckedStyleAll, checked ? checkedStyleAll : {}, disabled ? disabledStyle : {});
var iconStyle = Object.assign({}, checked ? { color: checkedStyleAll.color } : {}, themeStyle[size], disabled ? disabledStyle : {});
TextAttrArr.forEach(function (item) {
if (iconWrapStyle[item]) {
iconStyle[item] = iconWrapStyle[item];
}
});
return (0, _rax.createElement)(
_nukeTouchable2.default,
{ x: 'checkbox', style: elementTouchStyle, onPress: this.onChange },
(0, _rax.createElement)(
_nukeView2.default,
{ style: iconWrapStyle },
checked ? (0, _rax.createElement)(_nukeIcon2.default, { style: iconStyle, name: 'right' }) : null
)
);
}
}]);
return Checkbox;
}(_rax.Component);
Checkbox.displayName = 'Checkbox';
Checkbox.propTypes = {
/**
* 受控下是否选中 controlled select or not
*/
checked: _rax.PropTypes.bool,
/**
* 非受控是否选中 uncontrolled select or not
*/
defaultChecked: _rax.PropTypes.bool,
/**
* 尺寸 size
* @enumdesc small,medium
*/
size: _rax.PropTypes.oneOf(['small', 'medium']),
/**
* 禁用 disable bool
*/
disabled: _rax.PropTypes.bool,
/**
* 点击checkbox的回调 click callback
*/
onChange: _rax.PropTypes.func,
/**
* 显示类型
* @enumdesc normal, list, empty
*/
type: _rax.PropTypes.oneOf(['normal', 'list', 'empty']),
/**
* group选择时的选中value
*/
value: _rax.PropTypes.any,
themeStyle: _rax.PropTypes.object,
/**
* 选中时的默认样式，会覆盖style
*/
checkedStyle: _rax.PropTypes.object,
/**
* 未选中时的默认样式，会覆盖style
*/
unCheckedStyle: _rax.PropTypes.object,
/**
* style样式
*/
style: _rax.PropTypes.object,
/**
* 忽略上层父级 context，当 check.group 的子级存在非 group 模式的 checkbox 时需设置为 false
* ignore context passing. usually use the nested with checkbox group
*/
ignoreContext: _rax.PropTypes.boolean
};
Checkbox.defaultProps = {
size: 'medium',
disabled: false,
defaultChecked: false,
onChange: function onChange() {},
type: 'normal',
value: '',
themeStyle: {},
checkedStyle: {},
unCheckedStyle: {},
style: {},
ignoreContext: false
};
Checkbox.contextTypes = {
onChange: _rax.PropTypes.func,
__group__: _rax.PropTypes.bool,
value: _rax.PropTypes.any
};
exports.default = (0, _nukeThemeProvider.connectStyle)(_styles2.default)(Checkbox);
module.exports = exports['default'];