index.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. var __assign = (this && this.__assign) || function () {
  2. __assign = Object.assign || function(t) {
  3. for (var s, i = 1, n = arguments.length; i < n; i++) {
  4. s = arguments[i];
  5. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
  6. t[p] = s[p];
  7. }
  8. return t;
  9. };
  10. return __assign.apply(this, arguments);
  11. };
  12. import { useEvent, useMemo, useRef, useState, useComponent, } from 'functional-mini/component';
  13. import '../_util/assert-component2';
  14. import { mountComponent } from '../_util/component';
  15. import { useComponentEvent } from '../_util/hooks/useComponentEvent';
  16. import { useMixState } from '../_util/hooks/useMixState';
  17. import { SliderController } from './controller';
  18. import { sliderDefaultProps, SliderFunctionalProps, } from './props';
  19. var useSliderController = function (props) {
  20. var controllerRef = useRef();
  21. if (!controllerRef.current) {
  22. controllerRef.current = new SliderController(0, props);
  23. }
  24. return controllerRef.current;
  25. };
  26. var Slider = function (props) {
  27. var component = useComponent();
  28. var sliderController = useSliderController(props);
  29. var _a = useMixState(props.defaultValue, {
  30. value: props.value,
  31. postState: function (value) {
  32. return {
  33. valid: true,
  34. value: sliderController.formatValue(value),
  35. };
  36. },
  37. }), value = _a[0], _b = _a[1], update = _b.update, isControlled = _b.isControlled;
  38. var _c = useState({
  39. changingStart: false,
  40. changingEnd: false,
  41. }), moveStatus = _c[0], setMoveStatus = _c[1];
  42. var triggerEvent = useComponentEvent(props).triggerEvent;
  43. sliderController.updateProps(props);
  44. sliderController.updateValue(value);
  45. sliderController.updateMoveStatus(moveStatus);
  46. sliderController.onChange(function (v, moveStatus, _a) {
  47. var valueChange = _a.valueChange, moveStatusChange = _a.moveStatusChange, type = _a.type, event = _a.event;
  48. if (!isControlled) {
  49. update(v);
  50. }
  51. if (valueChange) {
  52. triggerEvent('change', v);
  53. }
  54. if (moveStatusChange) {
  55. setMoveStatus(function (v2) { return (__assign(__assign({}, v2), moveStatus)); });
  56. }
  57. if (value && type === 'end') {
  58. triggerEvent('afterChange', v, event);
  59. }
  60. });
  61. useEvent('handleTrackTouchStart', function (e) {
  62. return sliderController.handleMove(component, e, 'start');
  63. });
  64. useEvent('handleTrackTouchMove', function (e) {
  65. return sliderController.handleMove(component, e, 'move');
  66. });
  67. useEvent('handleTrackTouchEnd', function (e) {
  68. return sliderController.handleMove(component, e, 'end');
  69. });
  70. var tickList = useMemo(function () {
  71. var step = props.step, min = props.min, max = props.max, showTicks = props.showTicks;
  72. if (!showTicks) {
  73. return [];
  74. }
  75. var tickList = [];
  76. var stepCount = (max - min) / step;
  77. for (var i = 0; i <= stepCount; i += 1) {
  78. tickList.push({
  79. left: i * (100 / stepCount),
  80. value: i * step + min,
  81. });
  82. }
  83. return tickList;
  84. }, [props]);
  85. var _d = useMemo(function () {
  86. var _a, _b;
  87. var roundedValue = value;
  88. var leftValue = 0;
  89. var rightValue = 0;
  90. var max = (_a = props.max) !== null && _a !== void 0 ? _a : sliderDefaultProps.max;
  91. var min = (_b = props.min) !== null && _b !== void 0 ? _b : sliderDefaultProps.min;
  92. if (roundedValue !== undefined) {
  93. if (typeof roundedValue === 'number') {
  94. leftValue = min;
  95. rightValue = roundedValue;
  96. }
  97. else {
  98. leftValue = roundedValue[0];
  99. rightValue = roundedValue[1];
  100. }
  101. }
  102. // FIX_ME when min and max is equal
  103. var width = ((rightValue - leftValue) / (max - min)) * 100;
  104. var left = ((leftValue - min) / (max - min)) * 100;
  105. return {
  106. sliderLeft: left,
  107. sliderWidth: width,
  108. };
  109. }, [value]), sliderLeft = _d.sliderLeft, sliderWidth = _d.sliderWidth;
  110. return __assign({ mixin: {
  111. value: value,
  112. }, tickList: tickList, sliderLeft: sliderLeft, sliderWidth: sliderWidth }, moveStatus);
  113. };
  114. mountComponent(Slider, SliderFunctionalProps);