stepper.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { SuperComponent, wxComponent } from '../common/src/index';
  8. import config from '../common/config';
  9. import props from './props';
  10. const { prefix } = config;
  11. const name = `${prefix}-stepper`;
  12. let Stepper = class Stepper extends SuperComponent {
  13. constructor() {
  14. super(...arguments);
  15. this.externalClasses = [`${prefix}-class`, `${prefix}-class-input`, `${prefix}-class-minus`, `${prefix}-class-plus`];
  16. this.options = {
  17. addGlobalClass: true,
  18. };
  19. this.properties = Object.assign({}, props);
  20. this.controlledProps = [
  21. {
  22. key: 'value',
  23. event: 'change',
  24. },
  25. ];
  26. this.observers = {
  27. value(v) {
  28. this.setData({
  29. currentValue: Number(v),
  30. });
  31. },
  32. };
  33. this.data = {
  34. currentValue: 0,
  35. classPrefix: name,
  36. prefix,
  37. };
  38. }
  39. attached() {
  40. const { value, min } = this.properties;
  41. this.setData({
  42. currentValue: value ? Number(value) : min,
  43. });
  44. }
  45. isDisabled(type) {
  46. const { min, max, disabled } = this.properties;
  47. const { currentValue } = this.data;
  48. if (disabled) {
  49. return true;
  50. }
  51. if (type === 'minus' && currentValue <= min) {
  52. return true;
  53. }
  54. if (type === 'plus' && currentValue >= max) {
  55. return true;
  56. }
  57. return false;
  58. }
  59. format(value) {
  60. const { min, max } = this.properties;
  61. return Math.max(Math.min(max, value, Number.MAX_SAFE_INTEGER), min, Number.MIN_SAFE_INTEGER);
  62. }
  63. setValue(value) {
  64. this._trigger('change', { value });
  65. }
  66. minusValue() {
  67. if (this.isDisabled('minus')) {
  68. this.triggerEvent('overlimit', { type: 'minus' });
  69. return false;
  70. }
  71. const { currentValue, step } = this.data;
  72. this.setValue(this.format(currentValue - step));
  73. }
  74. plusValue() {
  75. if (this.isDisabled('plus')) {
  76. this.triggerEvent('overlimit', { type: 'plus' });
  77. return false;
  78. }
  79. const { currentValue, step } = this.data;
  80. this.setValue(this.format(currentValue + step));
  81. }
  82. changeValue(e) {
  83. const value = String(e.detail.value)
  84. .split('.')[0]
  85. .replace(/[^-0-9]/g, '') || 0;
  86. this.setValue(this.format(Number(value)));
  87. return value;
  88. }
  89. focusHandle(e) {
  90. const value = this.changeValue(e);
  91. this.triggerEvent('focus', { value });
  92. }
  93. inputHandle(e) {
  94. const value = this.changeValue(e);
  95. this.triggerEvent('input', { value });
  96. }
  97. blurHandle(e) {
  98. const value = this.changeValue(e);
  99. this.triggerEvent('blur', { value });
  100. }
  101. };
  102. Stepper = __decorate([
  103. wxComponent()
  104. ], Stepper);
  105. export default Stepper;