Switch.js 4.3 KB

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