diff --git a/components/vc-checkbox/index.js b/components/vc-checkbox/index.js new file mode 100644 index 000000000..5a67d9fc1 --- /dev/null +++ b/components/vc-checkbox/index.js @@ -0,0 +1 @@ +export { default } from './src/' diff --git a/components/vc-checkbox/src/Checkbox.jsx b/components/vc-checkbox/src/Checkbox.jsx new file mode 100644 index 000000000..0e43b1c99 --- /dev/null +++ b/components/vc-checkbox/src/Checkbox.jsx @@ -0,0 +1,130 @@ + +import PropTypes from '../../_util/vue-types' +import classNames from 'classnames' +import { getOptionProps, hasProp, initDefaultProps } from '../../_util/props-util' +import BaseMixin from '../../_util/BaseMixin' + +export default { + name: 'Checkbox', + mixins: [BaseMixin], + props: initDefaultProps({ + prefixCls: PropTypes.string, + name: PropTypes.string, + id: PropTypes.string, + type: PropTypes.string, + defaultChecked: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]), + checked: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]), + disabled: PropTypes.bool, + // onFocus: PropTypes.func, + // onBlur: PropTypes.func, + // onChange: PropTypes.func, + // onClick: PropTypes.func, + // tabIndex: PropTypes.string, + // readOnly: PropTypes.bool, + // autoFocus: PropTypes.bool, + value: PropTypes.any, + }, { + prefixCls: 'rc-checkbox', + type: 'checkbox', + defaultChecked: false, + }), + data () { + const checked = hasProp(this, 'checked') ? this.checked : this.defaultChecked + return { + sChecked: checked, + } + }, + watch: { + checked (val) { + this.sChecked = val + }, + }, + methods: { + focus () { + this.$refs.input.focus() + }, + + blur () { + this.$refs.input.blur() + }, + + handleChange (e) { + const props = getOptionProps(this) + if (props.disabled) { + return + } + if (!('checked' in props)) { + this.sChecked = e.target.checked + } + + props.onChange({ + target: { + ...props, + checked: e.target.checked, + }, + stopPropagation () { + e.stopPropagation() + }, + preventDefault () { + e.preventDefault() + }, + nativeEvent: e.nativeEvent, + }) + }, + }, + + render () { + const { + prefixCls, + name, + id, + type, + disabled, + readOnly, + tabIndex, + onClick, + onFocus, + onBlur, + autoFocus, + value, + ...others + } = this + + const globalProps = Object.keys(others).reduce((prev, key) => { + if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') { + prev[key] = others[key] + } + return prev + }, {}) + + const { checked } = this.state + const classString = classNames(prefixCls, { + [`${prefixCls}-checked`]: checked, + [`${prefixCls}-disabled`]: disabled, + }) + + return ( + + + + + ) + }, +} diff --git a/components/vc-checkbox/src/index.js b/components/vc-checkbox/src/index.js new file mode 100644 index 000000000..af09e22d1 --- /dev/null +++ b/components/vc-checkbox/src/index.js @@ -0,0 +1,3 @@ +import Checkbox from './Checkbox' + +export default Checkbox