index.js 4.0 KB

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