weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
235 lines (201 loc) • 8.73 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('nuke-view');
var _nukeView2 = _interopRequireDefault(_nukeView);
var _nukeTouchable = require('nuke-touchable');
var _nukeTouchable2 = _interopRequireDefault(_nukeTouchable);
var _nukeThemeProvider = require('nuke-theme-provider');
var _nukeIcon = require('nuke-icon');
var _nukeIcon2 = _interopRequireDefault(_nukeIcon);
var _styles = require('../styles');
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; }
/**
* Radio
* @description 单选框
*/
var Radio = function (_Component) {
_inherits(Radio, _Component);
function Radio(props) {
_classCallCheck(this, Radio);
var _this = _possibleConstructorReturn(this, (Radio.__proto__ || Object.getPrototypeOf(Radio)).call(this, props));
_this.onChange = _this.onChange.bind(_this);
var checked = props.checked || false;
_this.state = {
checked: checked,
value: props.value || ''
};
return _this;
}
_createClass(Radio, [{
key: 'componentWillMount',
value: function componentWillMount() {
if (this.context.__group__ && !this.props.ignoreContext && this.context.selectedValue === this.props.value) {
this.state = {
checked: true
};
}
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps, nextContext) {
if (nextContext.__group__ && !this.props.ignoreContext) {
if ((typeof nextContext === 'undefined' ? 'undefined' : _typeof(nextContext)) === 'object' && nextContext.selectedValue === nextProps.value) {
this.setState({ checked: true });
} else {
this.setState({ checked: false });
}
} else if ('checked' in nextProps) {
if (nextProps.checked !== this.props.checked) {
this.setState({
checked: nextProps.checked
});
}
}
}
}, {
key: 'onChange',
value: function onChange(e) {
var _props = this.props,
onChange = _props.onChange,
value = _props.value,
disabled = _props.disabled;
if (disabled) return;
var tmp = this.state.checked;
if (this.context.__group__ && !this.props.ignoreContext) {
this.context.onChange(value, e);
} else if (!('checked' in this.props)) {
this.setState({
checked: !tmp
});
}
onChange(!tmp);
e.stopPropagation && e.stopPropagation();
}
}, {
key: 'renderInner',
value: function renderInner(props) {
var style = props.style,
disabled = props.disabled,
themeStyle = props.themeStyle,
checkedStyle = props.checkedStyle,
type = props.type,
disabledStyle = props.disabledStyle,
size = props.size;
if (!this.state.checked) return null;
if (type === 'dot') {
var dotStyle = Object.assign({}, themeStyle['dot-inner'], themeStyle['dot-inner-' + size], checkedStyle && checkedStyle.color ? { backgroundColor: checkedStyle.color } : {});
if (disabled) {
dotStyle = Object.assign({}, dotStyle, themeStyle['dot-inner-disabled'], {
backgroundColor: disabledStyle && disabledStyle.color || themeStyle['dot-inner-disabled'].backgroundColor
});
}
return (0, _rax.createElement)(_nukeView2.default, { style: dotStyle });
}
var innerStyle = Object.assign({}, themeStyle['icon-' + size], themeStyle[type + '-inner'], { color: style && style.color || themeStyle[type + '-inner-checked'].color }, disabled ? {
color: disabledStyle && disabledStyle.color || themeStyle[type + '-inner-disabled'].color
} : {});
return (0, _rax.createElement)(_nukeIcon2.default, { style: innerStyle, name: 'right', onClick: this.onChange });
}
}, {
key: 'render',
value: function render() {
var _props2 = this.props,
size = _props2.size,
style = _props2.style,
disabled = _props2.disabled,
type = _props2.type,
themeStyle = _props2.themeStyle,
checkedStyle = _props2.checkedStyle,
disabledStyle = _props2.disabledStyle,
touchStyle = _props2.touchStyle;
var checked = this.state.checked;
var elementTouchStyle = Object.assign({}, themeStyle['touch-' + size], touchStyle);
var wrapStyle = Object.assign({}, themeStyle['wrap-' + size], themeStyle['wrap-' + type], checked ? Object.assign({}, themeStyle['wrap-' + type + '-checked'], checkedStyle) : {}, disabled ? Object.assign({}, themeStyle['wrap-' + type + '-disabled'], disabledStyle) : {}, checked && disabled ? Object.assign({}, themeStyle['wrap-' + type + '-checked-disabled']) : {}, style);
return (0, _rax.createElement)(
_nukeTouchable2.default,
{ style: elementTouchStyle, onPress: this.onChange },
(0, _rax.createElement)(
_nukeView2.default,
{ style: wrapStyle },
this.renderInner(this.props)
)
);
}
}]);
return Radio;
}(_rax.Component);
Radio.displayName = 'Radio';
Radio.propTypes = {
/**
* 受控选择 controlled select
*/
checked: _rax.PropTypes.boolean,
/**
* 单选尺寸 size of radio
* @enumdesc small,medium
*/
size: _rax.PropTypes.oneOf(['small', 'medium']),
/**
* 受控禁用 controlled disabled
*/
disabled: _rax.PropTypes.boolean,
/**
* 状态变更回调 status change callback
*/
onChange: _rax.PropTypes.func,
/**
* 外观类型 appearance type
* @enumdesc normal,list,empty,dot
*/
type: _rax.PropTypes.oneOf(['normal', 'list', 'empty', 'dot']),
/**
* 单选group的选中值，配合DataSource使用
* value of radio group.
*/
value: _rax.PropTypes.string,
/**
* 选中样式，选中状态下会覆盖style
*/
checkedStyle: _rax.PropTypes.object,
/**
* 禁用样式，禁用状态下会覆盖style
*/
disabledStyle: _rax.PropTypes.object,
/**
* 点击区域样式，通常点击区域要大于外观区域
*/
touchStyle: _rax.PropTypes.object,
/**
* 忽略上层父级 context，当 radio.group 的子级存在非 group 模式的 radio 时需设置为 false
* ignore context passing. usually use the nested with radio group
*/
ignoreContext: _rax.PropTypes.boolean
};
Radio.defaultProps = {
size: 'medium',
disabled: false,
onChange: function onChange() {},
type: 'normal',
value: '',
checkedStyle: {},
disabledStyle: {},
touchStyle: {},
ignoreContext: false
};
Radio.contextTypes = {
onChange: _rax.PropTypes.func,
__group__: _rax.PropTypes.bool,
selectedValue: _rax.PropTypes.any
};
exports.default = (0, _nukeThemeProvider.connectStyle)(_styles2.default)(Radio);
module.exports = exports['default'];