tntd 3.0.41 → 3.0.42-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (163) hide show
  1. package/es/form/style/index.less +5 -5
  2. package/es/index.js +7 -0
  3. package/es/index.js.map +1 -1
  4. package/es/query-form/Field/Checkbox.js +1 -1
  5. package/es/query-form/Field/Checkbox.js.map +1 -1
  6. package/es/query-form/Field/Composition/FieldPopover.js +361 -0
  7. package/es/query-form/Field/Composition/FieldPopover.js.map +1 -0
  8. package/es/query-form/Field/Composition/FieldPopover.less +35 -0
  9. package/es/query-form/Field/Composition/Select.js +157 -0
  10. package/es/query-form/Field/Composition/Select.js.map +1 -0
  11. package/es/query-form/Field/Composition/SelectInput.js +34 -0
  12. package/es/query-form/Field/Composition/SelectInput.js.map +1 -0
  13. package/es/query-form/Field/Composition/ValueTag.js +162 -0
  14. package/es/query-form/Field/Composition/ValueTag.js.map +1 -0
  15. package/es/query-form/Field/Composition/index.js +337 -0
  16. package/es/query-form/Field/Composition/index.js.map +1 -0
  17. package/es/query-form/Field/Composition/index.less +145 -0
  18. package/es/query-form/Field/Composition/utils.js +169 -0
  19. package/es/query-form/Field/Composition/utils.js.map +1 -0
  20. package/es/query-form/Field/SelectInput.js +21 -6
  21. package/es/query-form/Field/SelectInput.js.map +1 -1
  22. package/es/query-form/Field/fieldsMap.js +2 -2
  23. package/es/query-form/Field/fieldsMap.js.map +1 -1
  24. package/es/query-form/Field/index.js +3 -1
  25. package/es/query-form/Field/index.js.map +1 -1
  26. package/es/query-form/index.js +226 -357
  27. package/es/query-form/index.js.map +1 -1
  28. package/es/query-form/index.less +26 -60
  29. package/es/query-form-v2/index.less +133 -0
  30. package/es/query-list-scene/List.js +16 -3
  31. package/es/query-list-scene/List.js.map +1 -1
  32. package/es/query-list-scene/QueryForm.js +35 -13
  33. package/es/query-list-scene/QueryForm.js.map +1 -1
  34. package/es/query-list-scene/index.js +2 -1
  35. package/es/query-list-scene/index.js.map +1 -1
  36. package/es/scroll-bar/Bar.js +91 -0
  37. package/es/scroll-bar/Bar.js.map +1 -0
  38. package/es/scroll-bar/Context.js +13 -0
  39. package/es/scroll-bar/Context.js.map +1 -0
  40. package/es/scroll-bar/ScrollBar.js +97 -0
  41. package/es/scroll-bar/ScrollBar.js.map +1 -0
  42. package/es/scroll-bar/Thumb.js +125 -0
  43. package/es/scroll-bar/Thumb.js.map +1 -0
  44. package/es/scroll-bar/index.js +10 -0
  45. package/es/scroll-bar/index.js.map +1 -0
  46. package/es/scroll-bar/scrollBar.less +59 -0
  47. package/es/scroll-bar/util.js +39 -0
  48. package/es/scroll-bar/util.js.map +1 -0
  49. package/es/table/hooks/use-column-setting.js.map +1 -1
  50. package/es/table/resizableTable/index.js +34 -5
  51. package/es/table/resizableTable/index.js.map +1 -1
  52. package/es/table/resizableTable/index.less +9 -1
  53. package/es/table/table.js +8 -2
  54. package/es/table/table.js.map +1 -1
  55. package/es/tntd-cascader/rc-cascader/OptionList/Column.js +4 -4
  56. package/es/tntd-cascader/rc-cascader/OptionList/Column.js.map +1 -1
  57. package/es/tntd-select/index.js.map +1 -1
  58. package/es/tntd-virtual-tree/index.js +0 -3
  59. package/es/tntd-virtual-tree/index.js.map +1 -1
  60. package/lib/form/style/index.less +5 -5
  61. package/lib/index.d.ts +1 -0
  62. package/lib/index.d.ts.map +1 -1
  63. package/lib/index.js +7 -0
  64. package/lib/index.js.map +1 -1
  65. package/lib/query-form/Field/Checkbox.js +1 -1
  66. package/lib/query-form/Field/Checkbox.js.map +1 -1
  67. package/lib/query-form/Field/Composition/FieldPopover.d.ts +19 -0
  68. package/lib/query-form/Field/Composition/FieldPopover.d.ts.map +1 -0
  69. package/lib/query-form/Field/Composition/FieldPopover.js +457 -0
  70. package/lib/query-form/Field/Composition/FieldPopover.js.map +1 -0
  71. package/lib/query-form/Field/Composition/FieldPopover.less +35 -0
  72. package/lib/query-form/Field/Composition/Select.d.ts +4 -0
  73. package/lib/query-form/Field/Composition/Select.d.ts.map +1 -0
  74. package/lib/query-form/Field/Composition/Select.js +253 -0
  75. package/lib/query-form/Field/Composition/Select.js.map +1 -0
  76. package/lib/query-form/Field/Composition/SelectInput.d.ts +3 -0
  77. package/lib/query-form/Field/Composition/SelectInput.d.ts.map +1 -0
  78. package/lib/query-form/Field/Composition/SelectInput.js +111 -0
  79. package/lib/query-form/Field/Composition/SelectInput.js.map +1 -0
  80. package/lib/query-form/Field/Composition/ValueTag.d.ts +13 -0
  81. package/lib/query-form/Field/Composition/ValueTag.d.ts.map +1 -0
  82. package/lib/query-form/Field/Composition/ValueTag.js +239 -0
  83. package/lib/query-form/Field/Composition/ValueTag.js.map +1 -0
  84. package/lib/query-form/Field/Composition/index.d.ts +15 -0
  85. package/lib/query-form/Field/Composition/index.d.ts.map +1 -0
  86. package/lib/query-form/Field/Composition/index.js +441 -0
  87. package/lib/query-form/Field/Composition/index.js.map +1 -0
  88. package/lib/query-form/Field/Composition/index.less +145 -0
  89. package/lib/query-form/Field/Composition/utils.d.ts +21 -0
  90. package/lib/query-form/Field/Composition/utils.d.ts.map +1 -0
  91. package/lib/query-form/Field/Composition/utils.js +173 -0
  92. package/lib/query-form/Field/Composition/utils.js.map +1 -0
  93. package/lib/query-form/Field/SelectInput.d.ts.map +1 -1
  94. package/lib/query-form/Field/SelectInput.js +21 -6
  95. package/lib/query-form/Field/SelectInput.js.map +1 -1
  96. package/lib/query-form/Field/fieldsMap.d.ts +6 -3
  97. package/lib/query-form/Field/fieldsMap.d.ts.map +1 -1
  98. package/lib/query-form/Field/fieldsMap.js +2 -2
  99. package/lib/query-form/Field/fieldsMap.js.map +1 -1
  100. package/lib/query-form/Field/index.d.ts.map +1 -1
  101. package/lib/query-form/Field/index.js +3 -1
  102. package/lib/query-form/Field/index.js.map +1 -1
  103. package/lib/query-form/index.d.ts +1 -36
  104. package/lib/query-form/index.d.ts.map +1 -1
  105. package/lib/query-form/index.js +262 -397
  106. package/lib/query-form/index.js.map +1 -1
  107. package/lib/query-form/index.less +26 -60
  108. package/lib/query-form-v2/index.less +133 -0
  109. package/lib/query-list-scene/List.d.ts.map +1 -1
  110. package/lib/query-list-scene/List.js +16 -3
  111. package/lib/query-list-scene/List.js.map +1 -1
  112. package/lib/query-list-scene/QueryForm.d.ts +5 -4
  113. package/lib/query-list-scene/QueryForm.d.ts.map +1 -1
  114. package/lib/query-list-scene/QueryForm.js +35 -13
  115. package/lib/query-list-scene/QueryForm.js.map +1 -1
  116. package/lib/query-list-scene/index.d.ts.map +1 -1
  117. package/lib/query-list-scene/index.js +2 -1
  118. package/lib/query-list-scene/index.js.map +1 -1
  119. package/lib/scroll-bar/Bar.d.ts +4 -0
  120. package/lib/scroll-bar/Bar.d.ts.map +1 -0
  121. package/lib/scroll-bar/Bar.js +168 -0
  122. package/lib/scroll-bar/Bar.js.map +1 -0
  123. package/lib/scroll-bar/Context.d.ts +7 -0
  124. package/lib/scroll-bar/Context.d.ts.map +1 -0
  125. package/lib/scroll-bar/Context.js +17 -0
  126. package/lib/scroll-bar/Context.js.map +1 -0
  127. package/lib/scroll-bar/ScrollBar.d.ts +4 -0
  128. package/lib/scroll-bar/ScrollBar.d.ts.map +1 -0
  129. package/lib/scroll-bar/ScrollBar.js +132 -0
  130. package/lib/scroll-bar/ScrollBar.js.map +1 -0
  131. package/lib/scroll-bar/Thumb.d.ts +3 -0
  132. package/lib/scroll-bar/Thumb.d.ts.map +1 -0
  133. package/lib/scroll-bar/Thumb.js +202 -0
  134. package/lib/scroll-bar/Thumb.js.map +1 -0
  135. package/lib/scroll-bar/index.d.ts +3 -0
  136. package/lib/scroll-bar/index.d.ts.map +1 -0
  137. package/lib/scroll-bar/index.js +14 -0
  138. package/lib/scroll-bar/index.js.map +1 -0
  139. package/lib/scroll-bar/scrollBar.less +59 -0
  140. package/lib/scroll-bar/util.d.ts +40 -0
  141. package/lib/scroll-bar/util.d.ts.map +1 -0
  142. package/lib/scroll-bar/util.js +66 -0
  143. package/lib/scroll-bar/util.js.map +1 -0
  144. package/lib/segmented/index.d.ts +1 -1
  145. package/lib/table/hooks/use-column-setting.d.ts +1 -0
  146. package/lib/table/hooks/use-column-setting.d.ts.map +1 -1
  147. package/lib/table/hooks/use-column-setting.js.map +1 -1
  148. package/lib/table/resizableTable/index.d.ts +3 -0
  149. package/lib/table/resizableTable/index.d.ts.map +1 -1
  150. package/lib/table/resizableTable/index.js +34 -5
  151. package/lib/table/resizableTable/index.js.map +1 -1
  152. package/lib/table/resizableTable/index.less +9 -1
  153. package/lib/table/table.d.ts.map +1 -1
  154. package/lib/table/table.js +8 -2
  155. package/lib/table/table.js.map +1 -1
  156. package/lib/tntd-cascader/rc-cascader/OptionList/Column.d.ts.map +1 -1
  157. package/lib/tntd-cascader/rc-cascader/OptionList/Column.js +4 -4
  158. package/lib/tntd-cascader/rc-cascader/OptionList/Column.js.map +1 -1
  159. package/lib/tntd-select/index.d.ts.map +1 -1
  160. package/lib/tntd-select/index.js.map +1 -1
  161. package/lib/tntd-virtual-tree/index.js +0 -3
  162. package/lib/tntd-virtual-tree/index.js.map +1 -1
  163. package/package.json +2 -1
@@ -11,6 +11,7 @@ var _Toolbar = _interopRequireDefault(require("./Toolbar"));
11
11
  var _List = _interopRequireDefault(require("./List"));
12
12
  var _createActions = _interopRequireDefault(require("./createActions"));
13
13
  var _useActions = _interopRequireDefault(require("./useActions"));
14
+ var _Field = _interopRequireDefault(require("../query-form/Field"));
14
15
  require("./index.less");
15
16
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
16
17
  var QueryForm = exports.QueryForm = _QueryForm["default"];
@@ -20,7 +21,7 @@ _QueryListScene["default"].Title = _Title["default"];
20
21
  _QueryListScene["default"].QueryForm = _QueryForm["default"];
21
22
  _QueryListScene["default"].Toolbar = _Toolbar["default"];
22
23
  _QueryListScene["default"].QueryList = _List["default"];
23
- _QueryListScene["default"].Field = _QueryForm["default"].Field;
24
+ _QueryListScene["default"].Field = _Field["default"];
24
25
  _QueryListScene["default"].useActions = _useActions["default"];
25
26
  _QueryListScene["default"].createActions = createActions;
26
27
  var _default = exports["default"] = _QueryListScene["default"];
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/query-list-scene/index.js"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,IAAI,MAAM,QAAQ,CAAA;AACzB,OAAO,OAAO,MAAM,iBAAiB,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;AAC7B,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;AAC7B,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAA;AAEpC,cAAc,CAAC,KAAK,GAAG,KAAK,CAAA;AAC5B,cAAc,CAAC,SAAS,GAAG,IAAI,CAAA;AAC/B,cAAc,CAAC,OAAO,GAAG,OAAO,CAAA;AAChC,cAAc,CAAC,SAAS,GAAG,IAAI,CAAA;AAC/B,cAAc,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;AAEjC,cAAc,CAAC,UAAU,GAAG,UAAU,CAAA;AACtC,cAAc,CAAC,aAAa,GAAG,aAAa,CAAA;AAE5C,eAAe,cAAc,CAAA","sourcesContent":["import QueryListScene from './QueryListScene'\nimport Title from './Title'\nimport Form from './QueryForm'\nimport Toolbar from './Toolbar'\nimport List from './List'\nimport Actions from './createActions'\nimport useActions from './useActions'\nimport './index.less'\n\nexport const QueryForm = Form\nexport const QueryList = List\nexport const createActions = Actions\n\nQueryListScene.Title = Title\nQueryListScene.QueryForm = Form\nQueryListScene.Toolbar = Toolbar\nQueryListScene.QueryList = List\nQueryListScene.Field = Form.Field\n\nQueryListScene.useActions = useActions\nQueryListScene.createActions = createActions\n\nexport default QueryListScene\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/query-list-scene/index.js"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAA;AAC7C,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,IAAI,MAAM,aAAa,CAAA;AAC9B,OAAO,OAAO,MAAM,WAAW,CAAA;AAC/B,OAAO,IAAI,MAAM,QAAQ,CAAA;AACzB,OAAO,OAAO,MAAM,iBAAiB,CAAA;AACrC,OAAO,UAAU,MAAM,cAAc,CAAA;AACrC,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,cAAc,CAAA;AAErB,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;AAC7B,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAA;AAC7B,MAAM,CAAC,MAAM,aAAa,GAAG,OAAO,CAAA;AAEpC,cAAc,CAAC,KAAK,GAAG,KAAK,CAAA;AAC5B,cAAc,CAAC,SAAS,GAAG,IAAI,CAAA;AAC/B,cAAc,CAAC,OAAO,GAAG,OAAO,CAAA;AAChC,cAAc,CAAC,SAAS,GAAG,IAAI,CAAA;AAC/B,cAAc,CAAC,KAAK,GAAG,KAAK,CAAA;AAE5B,cAAc,CAAC,UAAU,GAAG,UAAU,CAAA;AACtC,cAAc,CAAC,aAAa,GAAG,aAAa,CAAA;AAE5C,eAAe,cAAc,CAAA","sourcesContent":["import QueryListScene from './QueryListScene'\nimport Title from './Title'\nimport Form from './QueryForm'\nimport Toolbar from './Toolbar'\nimport List from './List'\nimport Actions from './createActions'\nimport useActions from './useActions'\nimport Field from '../query-form/Field';\nimport './index.less'\n\nexport const QueryForm = Form\nexport const QueryList = List\nexport const createActions = Actions\n\nQueryListScene.Title = Title\nQueryListScene.QueryForm = Form\nQueryListScene.Toolbar = Toolbar\nQueryListScene.QueryList = List\nQueryListScene.Field = Field\n\nQueryListScene.useActions = useActions\nQueryListScene.createActions = createActions\n\nexport default QueryListScene\n"]}
@@ -0,0 +1,91 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _Context = _interopRequireDefault(require("./Context"));
10
+ var _Thumb = _interopRequireDefault(require("./Thumb"));
11
+ var _util = require("./util");
12
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
13
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
15
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
16
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
17
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
18
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
19
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
20
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
21
+ var _default = exports["default"] = (0, _react.forwardRef)(function (props, ref) {
22
+ var _useContext = (0, _react.useContext)(_Context["default"]),
23
+ wrapElement = _useContext.wrapElement;
24
+ var _useState = (0, _react.useState)(0),
25
+ _useState2 = _slicedToArray(_useState, 2),
26
+ moveX = _useState2[0],
27
+ setMoveX = _useState2[1];
28
+ var _useState3 = (0, _react.useState)(0),
29
+ _useState4 = _slicedToArray(_useState3, 2),
30
+ moveY = _useState4[0],
31
+ setMoveY = _useState4[1];
32
+ var _useState5 = (0, _react.useState)(0),
33
+ _useState6 = _slicedToArray(_useState5, 2),
34
+ sizeWidth = _useState6[0],
35
+ setSizeWidth = _useState6[1];
36
+ var _useState7 = (0, _react.useState)(0),
37
+ _useState8 = _slicedToArray(_useState7, 2),
38
+ sizeHeight = _useState8[0],
39
+ setSizeHeight = _useState8[1];
40
+ var _useState9 = (0, _react.useState)(1),
41
+ _useState10 = _slicedToArray(_useState9, 2),
42
+ ratioX = _useState10[0],
43
+ setRatioX = _useState10[1];
44
+ var _useState11 = (0, _react.useState)(1),
45
+ _useState12 = _slicedToArray(_useState11, 2),
46
+ ratioY = _useState12[0],
47
+ setRatioY = _useState12[1];
48
+ (0, _react.useImperativeHandle)(ref, function () {
49
+ return {
50
+ update: update,
51
+ handleScroll: handleScroll
52
+ };
53
+ });
54
+ function handleScroll() {
55
+ var wrap = wrapElement.current;
56
+ if (!wrap) return;
57
+ var offsetHeight = wrap.offsetHeight - _util.GAP;
58
+ var offsetWidth = wrap.offsetWidth - _util.GAP;
59
+ setMoveY(wrap.scrollTop * 100 / offsetHeight * ratioY);
60
+ setMoveX(wrap.scrollLeft * 100 / offsetWidth * ratioX);
61
+ }
62
+ function update() {
63
+ var wrap = wrapElement.current;
64
+ if (!wrap) return;
65
+ // 滚动窗口的高度
66
+ var offsetHeight = wrap.offsetHeight - _util.GAP;
67
+ var offsetWidth = wrap.offsetWidth - _util.GAP;
68
+ // 滚动条的逻辑高度
69
+ var originalHeight = Math.pow(offsetHeight, 2) / wrap.scrollHeight;
70
+ var originalWidth = Math.pow(offsetWidth, 2) / wrap.scrollWidth;
71
+ // 滚动条的实际高度,因为如果内容太长会导致滚动条非常短,可能难以点击拖拽,所以设置了最小高度
72
+ var height = Math.max(originalHeight, props.minSize);
73
+ var width = Math.max(originalWidth, props.minSize);
74
+ setRatioY(originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height)));
75
+ setRatioX(originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width)));
76
+ setSizeHeight(height + _util.GAP < offsetHeight ? height : 0);
77
+ setSizeWidth(width + _util.GAP < offsetWidth ? width : 0);
78
+ }
79
+ return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_Thumb["default"], {
80
+ always: props.always,
81
+ move: moveX,
82
+ size: sizeWidth,
83
+ ratio: ratioX
84
+ }), _react["default"].createElement(_Thumb["default"], {
85
+ always: props.always,
86
+ move: moveY,
87
+ size: sizeHeight,
88
+ ratio: ratioY,
89
+ vertical: true
90
+ }));
91
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Bar.js","sourceRoot":"","sources":["../../src/scroll-bar/Bar.js"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, useContext, useImperativeHandle, useState } from 'react'\nimport Context from './Context'\nimport Thumb from './Thumb'\nimport { GAP } from './util'\n\nexport default forwardRef((props, ref) => {\n const { wrapElement } = useContext(Context)\n\n const [moveX, setMoveX] = useState(0)\n const [moveY, setMoveY] = useState(0)\n const [sizeWidth, setSizeWidth] = useState(0)\n const [sizeHeight, setSizeHeight] = useState(0)\n const [ratioX, setRatioX] = useState(1)\n const [ratioY, setRatioY] = useState(1)\n\n useImperativeHandle(ref, () => ({\n update,\n handleScroll,\n }))\n\n function handleScroll() {\n const wrap = wrapElement.current\n if (!wrap) return\n const offsetHeight = wrap.offsetHeight - GAP\n const offsetWidth = wrap.offsetWidth - GAP\n setMoveY(((wrap.scrollTop * 100) / offsetHeight) * ratioY)\n setMoveX(((wrap.scrollLeft * 100) / offsetWidth) * ratioX)\n }\n\n function update() {\n const wrap = wrapElement.current\n if (!wrap) return\n // 滚动窗口的高度\n const offsetHeight = wrap.offsetHeight - GAP\n const offsetWidth = wrap.offsetWidth - GAP\n // 滚动条的逻辑高度\n const originalHeight = offsetHeight ** 2 / wrap.scrollHeight\n const originalWidth = offsetWidth ** 2 / wrap.scrollWidth\n // 滚动条的实际高度,因为如果内容太长会导致滚动条非常短,可能难以点击拖拽,所以设置了最小高度\n const height = Math.max(originalHeight, props.minSize)\n const width = Math.max(originalWidth, props.minSize)\n\n setRatioY(originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height)))\n setRatioX(originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width)))\n setSizeHeight(height + GAP < offsetHeight ? height : 0)\n setSizeWidth(width + GAP < offsetWidth ? width : 0)\n }\n\n return (\n <>\n <Thumb always={props.always} move={moveX} size={sizeWidth} ratio={ratioX} />\n <Thumb always={props.always} move={moveY} size={sizeHeight} ratio={ratioY} vertical />\n </>\n )\n})\n"]}
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
9
+ var Context = _react["default"].createContext({
10
+ scrollbarElement: null,
11
+ wrapElement: null
12
+ });
13
+ var _default = exports["default"] = Context;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Context.js","sourceRoot":"","sources":["../../src/scroll-bar/Context.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,OAAO,GAAG,KAAK,CAAC,aAAa,CAAC;IAClC,gBAAgB,EAAE,IAAI;IACtB,WAAW,EAAE,IAAI;CAClB,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA","sourcesContent":["import React from 'react'\n\nconst Context = React.createContext({\n scrollbarElement: null,\n wrapElement: null,\n})\n\nexport default Context\n"]}
@@ -0,0 +1,97 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _classnames = _interopRequireDefault(require("classnames"));
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _Bar = _interopRequireDefault(require("./Bar"));
11
+ var _Context = _interopRequireDefault(require("./Context"));
12
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
14
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
15
+ var __rest = void 0 && (void 0).__rest || function (s, e) {
16
+ var t = {};
17
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
18
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
19
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ var _default = exports["default"] = (0, _react.forwardRef)(function (_a, ref) {
24
+ var children = _a.children,
25
+ _a$minSize = _a.minSize,
26
+ minSize = _a$minSize === void 0 ? 20 : _a$minSize,
27
+ props = __rest(_a, ["children", "minSize"]);
28
+ var scrollbarElement = (0, _react.useRef)();
29
+ var wrapElement = (0, _react.useRef)();
30
+ wrapElement = ref || wrapElement;
31
+ var resizeRef = (0, _react.useRef)();
32
+ var barRef = (0, _react.useRef)();
33
+ (0, _react.useEffect)(function () {
34
+ var wrapDom = wrapElement.current;
35
+ var resizeDom = resizeRef.current;
36
+ // 监听容器尺寸变化,因为尺寸可以设置类似height:100vh之类样式,高度并不是固定的
37
+ var observerCallback = function observerCallback() {
38
+ return requestAnimationFrame(function () {
39
+ var _a;
40
+ update();
41
+ (_a = barRef.current) === null || _a === void 0 ? void 0 : _a.handleScroll();
42
+ });
43
+ };
44
+ var observer = new ResizeObserver(observerCallback);
45
+ observer.observe(wrapDom);
46
+ observer.observe(resizeDom);
47
+ return function () {
48
+ observer.unobserve(wrapDom);
49
+ observer.unobserve(resizeDom);
50
+ };
51
+ }, []);
52
+ (0, _react.useEffect)(function () {
53
+ var _a;
54
+ if (!props["native"]) {
55
+ update();
56
+ (_a = barRef.current) === null || _a === void 0 ? void 0 : _a.handleScroll();
57
+ }
58
+ }, [props["native"]]);
59
+ function update() {
60
+ var _a;
61
+ (_a = barRef.current) === null || _a === void 0 ? void 0 : _a.update();
62
+ }
63
+ function handleScroll(e) {
64
+ var _a, _b;
65
+ (_a = barRef.current) === null || _a === void 0 ? void 0 : _a.handleScroll();
66
+ (_b = props.onScroll) === null || _b === void 0 ? void 0 : _b.call(props, e);
67
+ }
68
+ var wrapStyle = {
69
+ height: props.height,
70
+ maxHeight: props.maxHeight
71
+ };
72
+ var wrapClassName = (0, _classnames["default"])('tntd-scroll-bar-wrap', {
73
+ 'tntd-scroll-bar-wrap-hidden-default': !props["native"]
74
+ });
75
+ return _react["default"].createElement(_Context["default"].Provider, {
76
+ value: {
77
+ scrollbarElement: scrollbarElement,
78
+ wrapElement: wrapElement
79
+ }
80
+ }, _react["default"].createElement("div", {
81
+ style: props.style,
82
+ className: (0, _classnames["default"])('tntd-scroll-bar', props.className),
83
+ ref: scrollbarElement
84
+ }, _react["default"].createElement("div", {
85
+ style: wrapStyle,
86
+ className: wrapClassName,
87
+ ref: wrapElement,
88
+ onScroll: handleScroll
89
+ }, _react["default"].createElement("div", {
90
+ className: "tntd-scroll-bar-view",
91
+ ref: resizeRef
92
+ }, children)), !props["native"] && _react["default"].createElement(_Bar["default"], {
93
+ ref: barRef,
94
+ always: props.always,
95
+ minSize: minSize
96
+ })));
97
+ });
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ScrollBar.js","sourceRoot":"","sources":["../../src/scroll-bar/ScrollBar.js"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'classnames'\nimport React, { forwardRef, useEffect, useRef } from 'react'\nimport Bar from './Bar'\nimport Context from './Context'\n\nexport default forwardRef(({ children, minSize = 20, ...props }, ref) => {\n const scrollbarElement = useRef()\n let wrapElement = useRef()\n wrapElement = ref || wrapElement\n const resizeRef = useRef()\n const barRef = useRef()\n\n useEffect(() => {\n const wrapDom = wrapElement.current\n const resizeDom = resizeRef.current\n // 监听容器尺寸变化,因为尺寸可以设置类似height:100vh之类样式,高度并不是固定的\n const observerCallback = () =>\n requestAnimationFrame(() => {\n update()\n barRef.current?.handleScroll()\n })\n const observer = new ResizeObserver(observerCallback)\n observer.observe(wrapDom)\n observer.observe(resizeDom)\n return () => {\n observer.unobserve(wrapDom)\n observer.unobserve(resizeDom)\n }\n }, [])\n useEffect(() => {\n if (!props.native) {\n update()\n barRef.current?.handleScroll()\n }\n }, [props.native])\n\n function update() {\n barRef.current?.update()\n }\n\n function handleScroll(e) {\n barRef.current?.handleScroll()\n props.onScroll?.(e)\n }\n\n const wrapStyle = { height: props.height, maxHeight: props.maxHeight }\n const wrapClassName = clsx('tntd-scroll-bar-wrap', {\n 'tntd-scroll-bar-wrap-hidden-default': !props.native,\n })\n\n return (\n <Context.Provider value={{ scrollbarElement, wrapElement }}>\n <div\n style={props.style}\n className={clsx('tntd-scroll-bar', props.className)}\n ref={scrollbarElement}\n >\n <div style={wrapStyle} className={wrapClassName} ref={wrapElement} onScroll={handleScroll}>\n <div className=\"tntd-scroll-bar-view\" ref={resizeRef}>\n {children}\n </div>\n </div>\n {!props.native && <Bar ref={barRef} always={props.always} minSize={minSize} />}\n </div>\n </Context.Provider>\n )\n})\n"]}
@@ -0,0 +1,125 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = Thumb;
8
+ var _classnames = _interopRequireDefault(require("classnames"));
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _Context = _interopRequireDefault(require("./Context"));
11
+ var _util = require("./util");
12
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
14
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
15
+ function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
16
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
17
+ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
18
+ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
19
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
20
+ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
21
+ function Thumb(props) {
22
+ var _useContext = (0, _react.useContext)(_Context["default"]),
23
+ scrollbarElement = _useContext.scrollbarElement,
24
+ wrapElement = _useContext.wrapElement;
25
+ var instance = (0, _react.useRef)();
26
+ var thumb = (0, _react.useRef)();
27
+ var _useState = (0, _react.useState)(false),
28
+ _useState2 = _slicedToArray(_useState, 2),
29
+ visible = _useState2[0],
30
+ setVisible = _useState2[1];
31
+ // 当作非响应式变量使用
32
+ var thumbState = (0, _react.useRef)({});
33
+ var cursorDown = (0, _react.useRef)(false);
34
+ var cursorLeave = (0, _react.useRef)(false);
35
+ var originalOnSelectStart = (0, _react.useRef)(document.onselectstart);
36
+ var bar = _util.BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
37
+ (0, _react.useEffect)(function () {
38
+ var element = scrollbarElement.current;
39
+ element.addEventListener('mousemove', mouseMoveScrollbarHandler);
40
+ element.addEventListener('mouseleave', mouseLeaveScrollbarHandler);
41
+ return function () {
42
+ restoreOnselectstart();
43
+ document.removeEventListener('mouseup', mouseUpDocumentHandler);
44
+ element.removeEventListener('mousemove', mouseMoveScrollbarHandler);
45
+ element.removeEventListener('mouseleave', mouseLeaveScrollbarHandler);
46
+ };
47
+ }, []);
48
+ function mouseMoveScrollbarHandler() {
49
+ cursorLeave.current = false;
50
+ setVisible(true);
51
+ }
52
+ function mouseLeaveScrollbarHandler() {
53
+ cursorLeave.current = true;
54
+ setVisible(cursorDown.current);
55
+ }
56
+ function getOffsetRatio() {
57
+ return Math.pow(instance.current[bar.offset], 2) / wrapElement.current[bar.scrollSize] / props.ratio / thumb.current[bar.offset];
58
+ }
59
+ function clickTrackHandler(e) {
60
+ if (!thumb.current || !instance.current || !wrapElement.current) return;
61
+ // 鼠标点击的坐标距离顶端的距离
62
+ var offset = Math.abs(e.target.getBoundingClientRect()[bar.direction] - e[bar.client]);
63
+ var thumbHalf = thumb.current[bar.offset] / 2;
64
+ var thumbPositionPercentage = (offset - thumbHalf) * 100 * getOffsetRatio() / instance.current[bar.offset];
65
+ // 直接给scrollTop赋值,就会调用bar组件的handleScroll函数
66
+ wrapElement.current[bar.scroll] = thumbPositionPercentage * wrapElement.current[bar.scrollSize] / 100;
67
+ }
68
+ function clickThumbHandler(e) {
69
+ var _a;
70
+ e.stopPropagation();
71
+ if (e.ctrlKey || [1, 2].includes(e.button)) return;
72
+ (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
73
+ startDrag(e);
74
+ var el = e.currentTarget;
75
+ if (!el) return;
76
+ thumbState.current[bar.axis] = el[bar.offset] - (e[bar.client] - el.getBoundingClientRect()[bar.direction]);
77
+ }
78
+ function startDrag(e) {
79
+ e.persist();
80
+ cursorDown.current = true;
81
+ document.addEventListener('mousemove', mouseMoveDocumentHandler);
82
+ document.addEventListener('mouseup', mouseUpDocumentHandler);
83
+ originalOnSelectStart.current = document.onselectstart;
84
+ document.onselectstart = function () {
85
+ return false;
86
+ };
87
+ }
88
+ function mouseMoveDocumentHandler(e) {
89
+ if (!instance.current || !thumb.current) return;
90
+ if (cursorDown.current === false) return;
91
+ var prevPage = thumbState.current[bar.axis];
92
+ if (!prevPage) return;
93
+ var offset = (instance.current.getBoundingClientRect()[bar.direction] - e[bar.client]) * -1;
94
+ var thumbClickPosition = thumb.current[bar.offset] - prevPage;
95
+ var thumbPositionPercentage = (offset - thumbClickPosition) * 100 * getOffsetRatio() / instance.current[bar.offset];
96
+ wrapElement.current[bar.scroll] = thumbPositionPercentage * wrapElement.current[bar.scrollSize] / 100;
97
+ }
98
+ function mouseUpDocumentHandler() {
99
+ cursorDown.current = false;
100
+ thumbState.current[bar.axis] = 0;
101
+ document.removeEventListener('mousemove', mouseMoveDocumentHandler);
102
+ document.removeEventListener('mouseup', mouseUpDocumentHandler);
103
+ restoreOnselectstart();
104
+ if (cursorLeave.current) setVisible(false);
105
+ }
106
+ function restoreOnselectstart() {
107
+ if (document.onselectstart !== originalOnSelectStart.current) document.onselectstart = originalOnSelectStart.current;
108
+ }
109
+ var thumbStyle = (0, _util.renderThumbStyle)({
110
+ size: props.size,
111
+ move: props.move,
112
+ bar: bar
113
+ });
114
+ return _react["default"].createElement("div", {
115
+ hidden: !(props.always || visible),
116
+ className: (0, _classnames["default"])('tntd-scroll-bar-bar', bar.key),
117
+ ref: instance,
118
+ onMouseDown: clickTrackHandler
119
+ }, _react["default"].createElement("div", {
120
+ className: "tntd-scroll-bar-thumb",
121
+ style: thumbStyle,
122
+ ref: thumb,
123
+ onMouseDown: clickThumbHandler
124
+ }));
125
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Thumb.js","sourceRoot":"","sources":["../../src/scroll-bar/Thumb.js"],"names":[],"mappings":"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","sourcesContent":["import clsx from 'classnames'\nimport React, { useContext, useEffect, useRef, useState } from 'react'\nimport Context from './Context'\nimport { BAR_MAP, renderThumbStyle } from './util'\n\nexport default function Thumb(props) {\n const { scrollbarElement, wrapElement } = useContext(Context)\n const instance = useRef()\n const thumb = useRef()\n const [visible, setVisible] = useState(false)\n // 当作非响应式变量使用\n const thumbState = useRef({})\n const cursorDown = useRef(false)\n const cursorLeave = useRef(false)\n const originalOnSelectStart = useRef(document.onselectstart)\n const bar = BAR_MAP[props.vertical ? 'vertical' : 'horizontal']\n\n useEffect(() => {\n const element = scrollbarElement.current\n element.addEventListener('mousemove', mouseMoveScrollbarHandler)\n element.addEventListener('mouseleave', mouseLeaveScrollbarHandler)\n return () => {\n restoreOnselectstart()\n document.removeEventListener('mouseup', mouseUpDocumentHandler)\n element.removeEventListener('mousemove', mouseMoveScrollbarHandler)\n element.removeEventListener('mouseleave', mouseLeaveScrollbarHandler)\n }\n }, [])\n\n function mouseMoveScrollbarHandler() {\n cursorLeave.current = false\n setVisible(true)\n }\n\n function mouseLeaveScrollbarHandler() {\n cursorLeave.current = true\n setVisible(cursorDown.current)\n }\n\n function getOffsetRatio() {\n return (\n instance.current[bar.offset] ** 2 /\n wrapElement.current[bar.scrollSize] /\n props.ratio /\n thumb.current[bar.offset]\n )\n }\n\n function clickTrackHandler(e) {\n if (!thumb.current || !instance.current || !wrapElement.current) return\n // 鼠标点击的坐标距离顶端的距离\n const offset = Math.abs(e.target.getBoundingClientRect()[bar.direction] - e[bar.client])\n const thumbHalf = thumb.current[bar.offset] / 2\n const thumbPositionPercentage =\n ((offset - thumbHalf) * 100 * getOffsetRatio()) / instance.current[bar.offset]\n // 直接给scrollTop赋值,就会调用bar组件的handleScroll函数\n wrapElement.current[bar.scroll] =\n (thumbPositionPercentage * wrapElement.current[bar.scrollSize]) / 100\n }\n\n function clickThumbHandler(e) {\n e.stopPropagation()\n if (e.ctrlKey || [1, 2].includes(e.button)) return\n window.getSelection()?.removeAllRanges()\n startDrag(e)\n\n const el = e.currentTarget\n if (!el) return\n thumbState.current[bar.axis] =\n el[bar.offset] - (e[bar.client] - el.getBoundingClientRect()[bar.direction])\n }\n\n function startDrag(e) {\n e.persist()\n cursorDown.current = true\n document.addEventListener('mousemove', mouseMoveDocumentHandler)\n document.addEventListener('mouseup', mouseUpDocumentHandler)\n originalOnSelectStart.current = document.onselectstart\n document.onselectstart = () => false\n }\n\n function mouseMoveDocumentHandler(e) {\n if (!instance.current || !thumb.current) return\n if (cursorDown.current === false) return\n const prevPage = thumbState.current[bar.axis]\n if (!prevPage) return\n\n const offset = (instance.current.getBoundingClientRect()[bar.direction] - e[bar.client]) * -1\n const thumbClickPosition = thumb.current[bar.offset] - prevPage\n const thumbPositionPercentage =\n ((offset - thumbClickPosition) * 100 * getOffsetRatio()) / instance.current[bar.offset]\n wrapElement.current[bar.scroll] =\n (thumbPositionPercentage * wrapElement.current[bar.scrollSize]) / 100\n }\n\n function mouseUpDocumentHandler() {\n cursorDown.current = false\n thumbState.current[bar.axis] = 0\n document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n document.removeEventListener('mouseup', mouseUpDocumentHandler)\n restoreOnselectstart()\n if (cursorLeave.current) setVisible(false)\n }\n\n function restoreOnselectstart() {\n if (document.onselectstart !== originalOnSelectStart.current)\n document.onselectstart = originalOnSelectStart.current\n }\n\n const thumbStyle = renderThumbStyle({\n size: props.size,\n move: props.move,\n bar: bar,\n })\n\n return (\n <div\n hidden={!(props.always || visible)}\n className={clsx('tntd-scroll-bar-bar', bar.key)}\n ref={instance}\n onMouseDown={clickTrackHandler}\n >\n <div\n className=\"tntd-scroll-bar-thumb\"\n style={thumbStyle}\n ref={thumb}\n onMouseDown={clickThumbHandler}\n />\n </div>\n )\n}\n"]}
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+ var _ScrollBar = _interopRequireDefault(require("./ScrollBar"));
8
+ require("./scrollBar.less");
9
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
10
+ var _default = exports["default"] = _ScrollBar["default"];
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/scroll-bar/index.js"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,aAAa,CAAA;AACnC,OAAO,kBAAkB,CAAA;AAEzB,eAAe,SAAS,CAAA","sourcesContent":["import ScrollBar from './ScrollBar'\nimport './scrollBar.less'\n\nexport default ScrollBar\n"]}
@@ -0,0 +1,59 @@
1
+ .tntd-scroll-bar {
2
+ position: relative;
3
+ height: 100%;
4
+ overflow: hidden;
5
+ }
6
+ .tntd-scroll-bar-wrap {
7
+ height: 100%;
8
+ overflow: auto;
9
+ }
10
+ .tntd-scroll-bar-wrap-hidden-default {
11
+ scrollbar-width: none;
12
+ &::-webkit-scrollbar {
13
+ display: none;
14
+ }
15
+ }
16
+ .tntd-scroll-bar-view {
17
+ width: fit-content;
18
+ min-width: 100%;
19
+ }
20
+ .tntd-scroll-bar-bar {
21
+ position: absolute;
22
+ right: 2px;
23
+ bottom: 2px;
24
+ z-index: 1;
25
+ border-radius: 4px;
26
+
27
+ &.vertical {
28
+ top: 2px;
29
+ width: 6px;
30
+
31
+ > div {
32
+ width: 100%;
33
+ }
34
+ }
35
+
36
+ &.horizontal {
37
+ left: 2px;
38
+ height: 6px;
39
+
40
+ > div {
41
+ height: 100%;
42
+ }
43
+ }
44
+ }
45
+ .tntd-scroll-bar-thumb {
46
+ position: relative;
47
+ display: block;
48
+ width: 0;
49
+ height: 0;
50
+ cursor: pointer;
51
+ background-color: #909399;
52
+ border-radius: inherit;
53
+ opacity: 0.3;
54
+ transition: 0.3s background-color;
55
+
56
+ &:hover {
57
+ opacity: 0.5;
58
+ }
59
+ }
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.renderThumbStyle = exports.GAP = exports.BAR_MAP = void 0;
7
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
8
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
9
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
10
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
11
+ var GAP = exports.GAP = 4; // top 2 + bottom 2 of bar instance
12
+ var BAR_MAP = exports.BAR_MAP = {
13
+ vertical: {
14
+ offset: 'offsetHeight',
15
+ scroll: 'scrollTop',
16
+ scrollSize: 'scrollHeight',
17
+ size: 'height',
18
+ key: 'vertical',
19
+ axis: 'Y',
20
+ client: 'clientY',
21
+ direction: 'top'
22
+ },
23
+ horizontal: {
24
+ offset: 'offsetWidth',
25
+ scroll: 'scrollLeft',
26
+ scrollSize: 'scrollWidth',
27
+ size: 'width',
28
+ key: 'horizontal',
29
+ axis: 'X',
30
+ client: 'clientX',
31
+ direction: 'left'
32
+ }
33
+ };
34
+ var renderThumbStyle = exports.renderThumbStyle = function renderThumbStyle(_ref) {
35
+ var move = _ref.move,
36
+ size = _ref.size,
37
+ bar = _ref.bar;
38
+ return _defineProperty(_defineProperty({}, bar.size, size), "transform", "translate".concat(bar.axis, "(").concat(move, "%)"));
39
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/scroll-bar/util.js"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,CAAA,CAAC,mCAAmC;AAExD,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,QAAQ,EAAE;QACR,MAAM,EAAE,cAAc;QACtB,MAAM,EAAE,WAAW;QACnB,UAAU,EAAE,cAAc;QAC1B,IAAI,EAAE,QAAQ;QACd,GAAG,EAAE,UAAU;QACf,IAAI,EAAE,GAAG;QACT,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,KAAK;KACjB;IACD,UAAU,EAAE;QACV,MAAM,EAAE,aAAa;QACrB,MAAM,EAAE,YAAY;QACpB,UAAU,EAAE,aAAa;QACzB,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,YAAY;QACjB,IAAI,EAAE,GAAG;QACT,MAAM,EAAE,SAAS;QACjB,SAAS,EAAE,MAAM;KAClB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC;IACxD,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI;IAChB,SAAS,EAAE,YAAY,GAAG,CAAC,IAAI,IAAI,IAAI,IAAI;CAC5C,CAAC,CAAA","sourcesContent":["export const GAP = 4 // top 2 + bottom 2 of bar instance\n\nexport const BAR_MAP = {\n vertical: {\n offset: 'offsetHeight',\n scroll: 'scrollTop',\n scrollSize: 'scrollHeight',\n size: 'height',\n key: 'vertical',\n axis: 'Y',\n client: 'clientY',\n direction: 'top',\n },\n horizontal: {\n offset: 'offsetWidth',\n scroll: 'scrollLeft',\n scrollSize: 'scrollWidth',\n size: 'width',\n key: 'horizontal',\n axis: 'X',\n client: 'clientX',\n direction: 'left',\n },\n}\n\nexport const renderThumbStyle = ({ move, size, bar }) => ({\n [bar.size]: size,\n transform: `translate${bar.axis}(${move}%)`,\n})\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"use-column-setting.js","sourceRoot":"","sources":["../../../src/table/hooks/use-column-setting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG1D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAwB/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,OAAyB,EACzB,UAAmB,EAKnB,EAAE;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,uBAAuB,CAAkB,UAAU,EAAE,EAAE,CAAC,CAAA;IAClG,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;YAChD,OAAO,OAAO,CAAA;SACf;QAED,OAAO,OAAO;aACX,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC;aAC/E,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACb,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAA;YACrE,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAA;YAErE,OAAO,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,CAAC,CAAC,GAAG,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,CAAC,CAAC,CAAA;QACpD,CAAC,CAAC,CAAA;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAA;IAE5B,OAAO,CAAC,cAAc,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAAA;AAC1D,CAAC,CAAA","sourcesContent":["import { useLocalStorageMayEmpty } from '@stellaris/hooks'\nimport type { ColumnProps as AntdColumnProps } from 'antd/es/table'\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useMemo } from 'react'\n\nexport interface ColumnSetting {\n key: string\n order: number\n enable: boolean\n}\n\nexport type ColumnProps<T> = AntdColumnProps<T> & {\n placement?:\n | 'top'\n | 'left'\n | 'right'\n | 'bottom'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom'\n}\n\nexport const useColumnSetting = <T>(\n columns: ColumnProps<T>[],\n storageKey?: string\n): [\n ColumnProps<T>[],\n ColumnSetting[] | undefined,\n Dispatch<SetStateAction<ColumnSetting[] | undefined>>\n] => {\n const [columnSetting, setColumnSetting] = useLocalStorageMayEmpty<ColumnSetting[]>(storageKey, [])\n const displayColumns = useMemo(() => {\n if (!columnSetting || columnSetting.length === 0) {\n return columns\n }\n\n return columns\n .filter((column) => columnSetting.some((setting) => setting.key === column.key))\n .sort((a, b) => {\n const aIndex = columnSetting.find((setting) => setting.key === a.key)\n const bIndex = columnSetting.find((setting) => setting.key === b.key)\n\n return (aIndex?.order || 0) - (bIndex?.order || 0)\n })\n }, [columnSetting, columns])\n\n return [displayColumns, columnSetting, setColumnSetting]\n}\n"]}
1
+ {"version":3,"file":"use-column-setting.js","sourceRoot":"","sources":["../../../src/table/hooks/use-column-setting.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAA;AAG1D,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAyB/B,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,OAAyB,EACzB,UAAmB,EAKnB,EAAE;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,uBAAuB,CAAkB,UAAU,EAAE,EAAE,CAAC,CAAA;IAClG,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,IAAI,CAAC,aAAa,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;YAChD,OAAO,OAAO,CAAA;SACf;QAED,OAAO,OAAO;aACX,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC;aAC/E,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;YACb,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAA;YACrE,MAAM,MAAM,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,GAAG,CAAC,CAAA;YAErE,OAAO,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,CAAC,CAAC,GAAG,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,CAAC,CAAC,CAAA;QACpD,CAAC,CAAC,CAAA;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,CAAA;IAE5B,OAAO,CAAC,cAAc,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAAA;AAC1D,CAAC,CAAA","sourcesContent":["import { useLocalStorageMayEmpty } from '@stellaris/hooks'\nimport type { ColumnProps as AntdColumnProps } from 'antd/es/table'\nimport type { Dispatch, SetStateAction } from 'react'\nimport { useMemo } from 'react'\n\nexport interface ColumnSetting {\n key: string\n order: number\n enable: boolean\n}\n\nexport type ColumnProps<T> = AntdColumnProps<T> & {\n resizeKey?: number | string\n placement?:\n | 'top'\n | 'left'\n | 'right'\n | 'bottom'\n | 'topLeft'\n | 'topRight'\n | 'bottomLeft'\n | 'bottomRight'\n | 'leftTop'\n | 'leftBottom'\n | 'rightTop'\n | 'rightBottom'\n}\n\nexport const useColumnSetting = <T>(\n columns: ColumnProps<T>[],\n storageKey?: string\n): [\n ColumnProps<T>[],\n ColumnSetting[] | undefined,\n Dispatch<SetStateAction<ColumnSetting[] | undefined>>\n] => {\n const [columnSetting, setColumnSetting] = useLocalStorageMayEmpty<ColumnSetting[]>(storageKey, [])\n const displayColumns = useMemo(() => {\n if (!columnSetting || columnSetting.length === 0) {\n return columns\n }\n\n return columns\n .filter((column) => columnSetting.some((setting) => setting.key === column.key))\n .sort((a, b) => {\n const aIndex = columnSetting.find((setting) => setting.key === a.key)\n const bIndex = columnSetting.find((setting) => setting.key === b.key)\n\n return (aIndex?.order || 0) - (bIndex?.order || 0)\n })\n }, [columnSetting, columns])\n\n return [displayColumns, columnSetting, setColumnSetting]\n}\n"]}
@@ -34,9 +34,12 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
34
34
  var ResizableTitle = function ResizableTitle(props) {
35
35
  var onResize = props.onResize,
36
36
  width = props.width,
37
- restProps = __rest(props, ["onResize", "width"]);
37
+ titleTip = props.titleTip,
38
+ restProps = __rest(props, ["onResize", "width", "titleTip"]);
38
39
  if (!width) {
39
- return _react["default"].createElement("th", Object.assign({}, restProps));
40
+ return _react["default"].createElement("th", Object.assign({
41
+ title: titleTip
42
+ }, restProps));
40
43
  }
41
44
  return _react["default"].createElement(_reactResizable.Resizable, {
42
45
  width: width,
@@ -51,7 +54,9 @@ var ResizableTitle = function ResizableTitle(props) {
51
54
  draggableOpts: {
52
55
  enableUserSelectHack: false
53
56
  }
54
- }, _react["default"].createElement("th", Object.assign({}, restProps)));
57
+ }, _react["default"].createElement("th", Object.assign({
58
+ title: titleTip
59
+ }, restProps)));
55
60
  };
56
61
  var MyComponent = function MyComponent(props, ref) {
57
62
  var _useState = (0, _react.useState)([]),
@@ -59,13 +64,20 @@ var MyComponent = function MyComponent(props, ref) {
59
64
  columns = _useState2[0],
60
65
  setColumns = _useState2[1];
61
66
  var dataRef = (0, _react.useRef)([]);
67
+ var _useState3 = (0, _react.useState)(0),
68
+ _useState4 = _slicedToArray(_useState3, 2),
69
+ renderKey = _useState4[0],
70
+ setRenderKey = _useState4[1];
71
+ var renderKeyRef = (0, _react.useRef)(renderKey);
62
72
  var handleResize = function handleResize(index, minWidth) {
63
73
  return (0, _throttle2["default"])(function (e, _ref) {
64
74
  var size = _ref.size;
65
75
  var updatedColumns = dataRef.current || [];
76
+ var width = Math.max(size.width, minWidth || 52);
66
77
  setColumns(updatedColumns.map(function (column, idx) {
67
78
  return idx === index ? Object.assign(Object.assign({}, column), {
68
- width: Math.max(size.width, minWidth || 40)
79
+ width: width,
80
+ resizeKey: width
69
81
  }) : column;
70
82
  }));
71
83
  }, 25);
@@ -76,7 +88,19 @@ var MyComponent = function MyComponent(props, ref) {
76
88
  if (typeof (column === null || column === void 0 ? void 0 : column.width) === 'string' && ((_a = column === null || column === void 0 ? void 0 : column.width) === null || _a === void 0 ? void 0 : _a.includes('%'))) {
77
89
  return column;
78
90
  }
91
+ var titleTip;
92
+ if (column && typeof column.title === 'string') {
93
+ titleTip = column.title;
94
+ }
79
95
  return Object.assign(Object.assign({}, column), {
96
+ render: typeof (column === null || column === void 0 ? void 0 : column.render) === 'function' ? function () {
97
+ var _a2;
98
+ var _a;
99
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
100
+ args[_key] = arguments[_key];
101
+ }
102
+ return (_a = column === null || column === void 0 ? void 0 : column.render) === null || _a === void 0 ? void 0 : (_a2 = _a).call.apply(_a2, [column].concat(args, [renderKeyRef.current]));
103
+ } : column === null || column === void 0 ? void 0 : column.render,
80
104
  onHeaderCell: function onHeaderCell(column) {
81
105
  var width = column.width;
82
106
  var minWidth = column.minWidth;
@@ -88,7 +112,12 @@ var MyComponent = function MyComponent(props, ref) {
88
112
  }
89
113
  return {
90
114
  width: width,
91
- onResize: handleResize(index, minWidth)
115
+ titleTip: titleTip,
116
+ onResize: handleResize(index, minWidth),
117
+ onMouseUp: function onMouseUp() {
118
+ renderKeyRef.current += 1;
119
+ setRenderKey(renderKeyRef.current);
120
+ }
92
121
  };
93
122
  }
94
123
  });