stepper.js 3.4 KB

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