rc-checkbox模块
'use strict'; 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; }; // _createClass(Constructor,protoProps,staticProps) 创建构造函数,定义静态方法、原型属性和方法 // protoProps用以定义Constructor.prototype 各属性、方法的访问器属性 // staticProps用以定义Constructor 各属性、方法的访问器属性,[{key,enumerable,configurable,value}]形式 var _createClass = (function () {// 利用自执行匿名函数优化defineProperties书写 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); // classnames函数参数为字符串或数值时,拼接样式并返回;为对象时,拼接键并返回 // 为数组时,根据数组元素项的不同获取样式 var _classnames = require('classnames'); var _classnames2 = _interopRequireDefault(_classnames); 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; } // 构造函数只能使用new关键字调用 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { // 构造函数未曾实例化,ReferenceError引用错误 Uncaught ReferenceError:XXXX is not defined 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; } // 继承,设置subClass.prototype为{constuctor:subClass},{constuctor:subClass}的原型是superClass.prototype // subClass.__proto__为superClass 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); } // 实例可访问原型属性或方法,构造函数不能 // Object.create创建对象,首参为该对象的原型prototype,次参为对象的自有属性,并设置属性描述符 subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); // Object.setPrototypeOf(subClass, superClass),设置subClass.__proto__为superClass // Object.getPrototypeOf(subClass),获取subClass.__proto__ // 构造函数可访问,实例不能 if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /*var props={ name, prefixCls,// 样式类前缀 style, type,// input类型设置"checkbox|radio" readOnly, disabled, className, defaultChecked,// defaultChecked、checked无差别,没法设置不可控组件 checked, onFocus(e),// 获得焦点时触发执行函数 onBlur(e),// 失去焦点时触发执行函数 onChange(target,stopPropagation,preventDefault)// 多选框值改变时触发执行函数 }; <Checkbox {...props}>text</Checkbox>*/ var Checkbox = function (_React$Component) { _inherits(Checkbox, _React$Component); function Checkbox(props) { _classCallCheck(this, Checkbox); var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Checkbox).call(this, props)); _initialiseProps.call(_this); var checked = false; if ('checked' in props) { checked = props.checked; } else { checked = props.defaultChecked; } _this.state = { checked: checked, focus: false }; return _this; } _createClass(Checkbox, [{ key: 'componentWillReceiveProps', value: function componentWillReceiveProps(nextProps) { if ('checked' in nextProps) { this.setState({ checked: nextProps.checked }); } } }, { key: 'render', value: function render() { var _classNames; var props = _extends({}, this.props); // checkbox需要是可控组件props.checked或不可控组件props.defaultChecked delete props.defaultChecked; var state = this.state; var prefixCls = props.prefixCls; var checked = state.checked; if (typeof checked === 'boolean') { checked = checked ? 1 : 0; } var className = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, props.className, !!props.className), _defineProperty(_classNames, prefixCls, 1), _defineProperty(_classNames, prefixCls + '-checked', checked), _defineProperty(_classNames, prefixCls + '-checked-' + checked, !!checked), _defineProperty(_classNames, prefixCls + '-focused', state.focus), _defineProperty(_classNames, prefixCls + '-disabled', props.disabled), _classNames) ); return _react2["default"].createElement( 'span', { className: className, style: props.style }, _react2["default"].createElement('span', { className: prefixCls + '-inner' }), _react2["default"].createElement('input', { name: props.name, type: props.type, readOnly: props.readOnly, disabled: props.disabled, className: prefixCls + '-input', checked: !!checked, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange }) ); } }]); return Checkbox; }(_react2["default"].Component); // 为代码书写的清晰性,_initialiseProps函数用于分离事件函数,也可在_createClass函数设为Checkbox的原型方法 var _initialiseProps = function _initialiseProps() { var _this2 = this; this.handleFocus = function (e) { _this2.setState({ focus: true }); _this2.props.onFocus(e); }; this.handleBlur = function (e) { _this2.setState({ focus: false }); _this2.props.onBlur(e); }; this.handleChange = function (e) { var checked = _this2.state.checked; if (!('checked' in _this2.props)) { _this2.setState({ checked: !checked }); } _this2.props.onChange({// 为什么不传入e??? target: _extends({}, _this2.props, { checked: !checked }), stopPropagation: function stopPropagation() { e.stopPropagation(); }, preventDefault: function preventDefault() { e.preventDefault(); } }); }; }; exports["default"] = Checkbox; Checkbox.propTypes = { name: _react2["default"].PropTypes.string, prefixCls: _react2["default"].PropTypes.string, style: _react2["default"].PropTypes.object, type: _react2["default"].PropTypes.string, className: _react2["default"].PropTypes.string, defaultChecked: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.number, _react2["default"].PropTypes.bool]), checked: _react2["default"].PropTypes.oneOfType([_react2["default"].PropTypes.number, _react2["default"].PropTypes.bool]), onFocus: _react2["default"].PropTypes.func, onBlur: _react2["default"].PropTypes.func, onChange: _react2["default"].PropTypes.func }; Checkbox.defaultProps = { prefixCls: 'rc-checkbox', style: {}, type: 'checkbox', className: '', defaultChecked: false, onFocus: function onFocus() {}, onBlur: function onBlur() {}, onChange: function onChange() {} }; module.exports = exports['default'];
Checkbox.js
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _rcCheckbox = require('rc-checkbox'); var _rcCheckbox2 = _interopRequireDefault(_rcCheckbox); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _Group = require('./Group'); var _Group2 = _interopRequireDefault(_Group); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } /*var props={ name, prefixCls,// 样式类前缀 style, type,// input类型设置"checkbox|radio" readOnly, disabled, className, defaultChecked,// defaultChecked、checked无差别,没法设置不可控组件 checked, onFocus(e),// 获得焦点时触发执行函数 onBlur(e),// 失去焦点时触发执行函数 onChange(target,stopPropagation,preventDefault)// 多选框值改变时触发执行函数 }; <Checkbox {...props}>text</Checkbox>*/ var Checkbox = _react2.default.createClass({ displayName: 'Checkbox', getDefaultProps: function getDefaultProps() { return { prefixCls: 'ant-checkbox' }; }, render: function render() { return _react2.default.createElement(_rcCheckbox2.default, this.props); } }); Checkbox.Group = _Group2.default; exports.default = Checkbox; module.exports = exports['default'];
CheckeboxGroup.js
'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _react = require('react'); var _react2 = _interopRequireDefault(_react); // Checkbox组件 var _index = require('./index'); var _index2 = _interopRequireDefault(_index); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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); } } /*var props={ options,// 内容[{label:"",value:""}] onChange(value),// 多选框值改变时调用函数,value为被点击多选框的值 value, defaultValue }; <CheckboxGroup {...props}/>*/ exports.default = _react2.default.createClass({ displayName: 'Group', getDefaultProps: function getDefaultProps() { return { options: [], defaultValue: [], onChange: function onChange() {} }; }, propTypes: { defaultValue: _react2.default.PropTypes.array, value: _react2.default.PropTypes.array, options: _react2.default.PropTypes.array.isRequired, onChange: _react2.default.PropTypes.func }, getInitialState: function getInitialState() { var props = this.props; var value = void 0; if ('value' in props) { value = props.value; } else if ('defaultValue' in props) { value = props.defaultValue; } return { value: value }; }, componentWillReceiveProps: function componentWillReceiveProps(nextProps) { if ('value' in nextProps) { this.setState({ value: nextProps.value || [] }); } }, toggleOption: function toggleOption(option) { var optionIndex = this.state.value.indexOf(option); var value = [].concat(_toConsumableArray(this.state.value)); if (optionIndex === -1) { value.push(option); } else { value.splice(optionIndex, 1); } if (!('value' in this.props)) { this.setState({ value: value }); } this.props.onChange(value); }, render: function render() { var _this = this; var options = this.props.options; return _react2.default.createElement( 'div', { className: 'ant-checkbox-group' }, options.map(function (option) { return _react2.default.createElement( 'label', { className: 'ant-checkbox-group-item', key: option }, _react2.default.createElement( _index2.default, { disabled: _this.props.disabled, checked: _this.state.value.indexOf(option) !== -1, onChange: _this.toggleOption.bind(_this, option) } ), option// 多选框对应text值 ); }) ); } });