Switch.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
  3. import _extends from 'babel-runtime/helpers/extends';
  4. import { switchPropTypes } from './PropTypes';
  5. import BaseMixin from '../_util/BaseMixin';
  6. import { hasProp, getOptionProps, getComponentFromProp, getListeners } from '../_util/props-util';
  7. // function noop () {
  8. // }
  9. export default {
  10. name: 'VcSwitch',
  11. mixins: [BaseMixin],
  12. model: {
  13. prop: 'checked',
  14. event: 'change'
  15. },
  16. props: _extends({}, switchPropTypes, {
  17. prefixCls: switchPropTypes.prefixCls.def('rc-switch')
  18. // onChange: switchPropTypes.onChange.def(noop),
  19. // onClick: switchPropTypes.onClick.def(noop),
  20. }),
  21. data: function data() {
  22. var checked = false;
  23. if (hasProp(this, 'checked')) {
  24. checked = !!this.checked;
  25. } else {
  26. checked = !!this.defaultChecked;
  27. }
  28. return {
  29. stateChecked: checked
  30. };
  31. },
  32. watch: {
  33. checked: function checked(val) {
  34. this.stateChecked = val;
  35. }
  36. },
  37. mounted: function mounted() {
  38. var _this = this;
  39. this.$nextTick(function () {
  40. var autoFocus = _this.autoFocus,
  41. disabled = _this.disabled;
  42. if (autoFocus && !disabled) {
  43. _this.focus();
  44. }
  45. });
  46. },
  47. methods: {
  48. setChecked: function setChecked(checked, e) {
  49. if (this.disabled) {
  50. return;
  51. }
  52. if (!hasProp(this, 'checked')) {
  53. this.stateChecked = checked;
  54. }
  55. this.$emit('change', checked, e);
  56. },
  57. handleClick: function handleClick(e) {
  58. var checked = !this.stateChecked;
  59. this.setChecked(checked, e);
  60. this.$emit('click', checked, e);
  61. },
  62. handleKeyDown: function handleKeyDown(e) {
  63. if (e.keyCode === 37) {
  64. // Left
  65. this.setChecked(false, e);
  66. } else if (e.keyCode === 39) {
  67. // Right
  68. this.setChecked(true, e);
  69. }
  70. },
  71. handleMouseUp: function handleMouseUp(e) {
  72. if (this.$refs.refSwitchNode) {
  73. this.$refs.refSwitchNode.blur();
  74. }
  75. this.$emit('mouseup', e);
  76. },
  77. focus: function focus() {
  78. this.$refs.refSwitchNode.focus();
  79. },
  80. blur: function blur() {
  81. this.$refs.refSwitchNode.blur();
  82. }
  83. },
  84. render: function render() {
  85. var _switchClassName;
  86. var h = arguments[0];
  87. var _getOptionProps = getOptionProps(this),
  88. prefixCls = _getOptionProps.prefixCls,
  89. disabled = _getOptionProps.disabled,
  90. loadingIcon = _getOptionProps.loadingIcon,
  91. tabIndex = _getOptionProps.tabIndex,
  92. restProps = _objectWithoutProperties(_getOptionProps, ['prefixCls', 'disabled', 'loadingIcon', 'tabIndex']);
  93. var checked = this.stateChecked;
  94. var switchClassName = (_switchClassName = {}, _defineProperty(_switchClassName, prefixCls, true), _defineProperty(_switchClassName, prefixCls + '-checked', checked), _defineProperty(_switchClassName, prefixCls + '-disabled', disabled), _switchClassName);
  95. var spanProps = {
  96. props: _extends({}, restProps),
  97. on: _extends({}, getListeners(this), {
  98. keydown: this.handleKeyDown,
  99. click: this.handleClick,
  100. mouseup: this.handleMouseUp
  101. }),
  102. attrs: {
  103. type: 'button',
  104. role: 'switch',
  105. 'aria-checked': checked,
  106. disabled: disabled,
  107. tabIndex: tabIndex
  108. },
  109. 'class': switchClassName,
  110. ref: 'refSwitchNode'
  111. };
  112. return h(
  113. 'button',
  114. spanProps,
  115. [loadingIcon, h(
  116. 'span',
  117. { 'class': prefixCls + '-inner' },
  118. [checked ? getComponentFromProp(this, 'checkedChildren') : getComponentFromProp(this, 'unCheckedChildren')]
  119. )]
  120. );
  121. }
  122. };