@dtjoy/dt-design 1.0.0 → 1.0.2

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 (161) hide show
  1. package/esm/_util/gapSize.d.ts +3 -0
  2. package/esm/_util/gapSize.js +10 -0
  3. package/esm/_util/hooks/index.d.ts +1 -0
  4. package/esm/_util/hooks/index.js +1 -0
  5. package/esm/_util/hooks/useOrientation.d.ts +2 -0
  6. package/esm/_util/hooks/useOrientation.js +19 -0
  7. package/esm/_util/isNonNullable.d.ts +2 -0
  8. package/esm/_util/isNonNullable.js +4 -0
  9. package/esm/_util/type.d.ts +2 -1
  10. package/esm/blockHeader/index.d.ts +1 -1
  11. package/esm/blockHeader/index.js +13 -10
  12. package/esm/blockHeader/style/index.d.ts +2 -0
  13. package/esm/blockHeader/style/index.js +2 -0
  14. package/esm/blockHeader/{style.less → style/index.less} +143 -141
  15. package/esm/button/index.d.ts +10 -0
  16. package/esm/button/index.js +29 -0
  17. package/esm/button/style/index.d.ts +2 -0
  18. package/esm/button/style/index.js +2 -0
  19. package/esm/button/style/index.less +134 -0
  20. package/esm/button/style/mixin.less +47 -0
  21. package/esm/collapsible/index.d.ts +97 -0
  22. package/esm/collapsible/index.js +234 -0
  23. package/esm/collapsible/style/index.d.ts +1 -0
  24. package/esm/collapsible/style/index.js +1 -0
  25. package/esm/collapsible/style/index.less +24 -0
  26. package/esm/collapsibleActionItems/index.d.ts +24 -0
  27. package/esm/collapsibleActionItems/index.js +74 -0
  28. package/esm/collapsibleActionItems/style/index.d.ts +2 -0
  29. package/esm/collapsibleActionItems/style/index.js +2 -0
  30. package/esm/collapsibleActionItems/style/index.less +7 -0
  31. package/esm/flex/index.d.ts +7 -0
  32. package/esm/flex/index.js +62 -0
  33. package/esm/flex/interface.d.ts +16 -0
  34. package/esm/flex/interface.js +1 -0
  35. package/esm/flex/style/index.d.ts +2 -0
  36. package/esm/flex/style/index.js +2 -0
  37. package/esm/flex/style/index.less +77 -0
  38. package/esm/flex/utils.d.ts +7 -0
  39. package/esm/flex/utils.js +33 -0
  40. package/esm/index.d.ts +10 -1
  41. package/esm/index.js +8 -7
  42. package/esm/resize/index.d.ts +8 -0
  43. package/esm/resize/index.js +29 -0
  44. package/esm/splitter/Panel.d.ts +7 -0
  45. package/esm/splitter/Panel.js +38 -0
  46. package/esm/splitter/SplitBar.d.ts +24 -0
  47. package/esm/splitter/SplitBar.js +185 -0
  48. package/esm/splitter/Splitter.d.ts +5 -0
  49. package/esm/splitter/Splitter.js +215 -0
  50. package/esm/splitter/hooks/sizeUtil.d.ts +3 -0
  51. package/esm/splitter/hooks/sizeUtil.js +63 -0
  52. package/esm/splitter/hooks/useItems.d.ts +14 -0
  53. package/esm/splitter/hooks/useItems.js +44 -0
  54. package/esm/splitter/hooks/useResizable.d.ts +10 -0
  55. package/esm/splitter/hooks/useResizable.js +73 -0
  56. package/esm/splitter/hooks/useResize.d.ts +6 -0
  57. package/esm/splitter/hooks/useResize.js +158 -0
  58. package/esm/splitter/hooks/useSizes.d.ts +4 -0
  59. package/esm/splitter/hooks/useSizes.js +80 -0
  60. package/esm/splitter/index.d.ts +8 -0
  61. package/esm/splitter/index.js +5 -0
  62. package/esm/splitter/interface.d.ts +68 -0
  63. package/esm/splitter/interface.js +1 -0
  64. package/esm/splitter/style/index.d.ts +2 -0
  65. package/esm/splitter/style/index.js +2 -0
  66. package/esm/splitter/style/index.less +312 -0
  67. package/esm/statusTag/index.d.ts +28 -0
  68. package/esm/statusTag/index.js +122 -0
  69. package/esm/statusTag/style/index.d.ts +2 -0
  70. package/esm/statusTag/style/index.js +2 -0
  71. package/esm/statusTag/style/index.less +70 -0
  72. package/esm/statusTag/style/mixin.less +39 -0
  73. package/esm/style/index.d.ts +1 -0
  74. package/esm/style/index.js +1 -0
  75. package/esm/style/index.less +1 -0
  76. package/esm/style/mixins/index.less +0 -0
  77. package/esm/style/themes/index.less +2 -0
  78. package/esm/style/themes/variable.less +1 -0
  79. package/lib/_util/gapSize.d.ts +3 -0
  80. package/lib/_util/gapSize.js +17 -0
  81. package/lib/_util/hooks/index.d.ts +1 -0
  82. package/lib/_util/hooks/index.js +16 -0
  83. package/lib/_util/hooks/useOrientation.d.ts +2 -0
  84. package/lib/_util/hooks/useOrientation.js +26 -0
  85. package/lib/_util/isNonNullable.d.ts +2 -0
  86. package/lib/_util/isNonNullable.js +10 -0
  87. package/lib/_util/type.d.ts +2 -1
  88. package/lib/blockHeader/index.d.ts +1 -1
  89. package/lib/blockHeader/index.js +13 -11
  90. package/lib/blockHeader/style/index.d.ts +2 -0
  91. package/lib/blockHeader/style/index.js +4 -0
  92. package/lib/blockHeader/{style.less → style/index.less} +143 -141
  93. package/lib/button/index.d.ts +10 -0
  94. package/lib/button/index.js +33 -0
  95. package/lib/button/style/index.d.ts +2 -0
  96. package/lib/button/style/index.js +4 -0
  97. package/lib/button/style/index.less +134 -0
  98. package/lib/button/style/mixin.less +47 -0
  99. package/lib/collapsible/index.d.ts +97 -0
  100. package/lib/collapsible/index.js +199 -0
  101. package/lib/collapsible/style/index.d.ts +1 -0
  102. package/lib/collapsible/style/index.js +3 -0
  103. package/lib/collapsible/style/index.less +24 -0
  104. package/lib/collapsibleActionItems/index.d.ts +24 -0
  105. package/lib/collapsibleActionItems/index.js +68 -0
  106. package/lib/collapsibleActionItems/style/index.d.ts +2 -0
  107. package/lib/collapsibleActionItems/style/index.js +4 -0
  108. package/lib/collapsibleActionItems/style/index.less +7 -0
  109. package/lib/flex/index.d.ts +7 -0
  110. package/lib/flex/index.js +60 -0
  111. package/lib/flex/interface.d.ts +16 -0
  112. package/lib/flex/interface.js +5 -0
  113. package/lib/flex/style/index.d.ts +2 -0
  114. package/lib/flex/style/index.js +4 -0
  115. package/lib/flex/style/index.less +77 -0
  116. package/lib/flex/utils.d.ts +7 -0
  117. package/lib/flex/utils.js +39 -0
  118. package/lib/index.d.ts +10 -1
  119. package/lib/index.js +72 -1
  120. package/lib/resize/index.d.ts +8 -0
  121. package/lib/resize/index.js +38 -0
  122. package/lib/splitter/Panel.d.ts +7 -0
  123. package/lib/splitter/Panel.js +44 -0
  124. package/lib/splitter/SplitBar.d.ts +24 -0
  125. package/lib/splitter/SplitBar.js +179 -0
  126. package/lib/splitter/Splitter.d.ts +5 -0
  127. package/lib/splitter/Splitter.js +202 -0
  128. package/lib/splitter/hooks/sizeUtil.d.ts +3 -0
  129. package/lib/splitter/hooks/sizeUtil.js +56 -0
  130. package/lib/splitter/hooks/useItems.d.ts +14 -0
  131. package/lib/splitter/hooks/useItems.js +46 -0
  132. package/lib/splitter/hooks/useResizable.d.ts +10 -0
  133. package/lib/splitter/hooks/useResizable.js +83 -0
  134. package/lib/splitter/hooks/useResize.d.ts +6 -0
  135. package/lib/splitter/hooks/useResize.js +142 -0
  136. package/lib/splitter/hooks/useSizes.d.ts +4 -0
  137. package/lib/splitter/hooks/useSizes.js +62 -0
  138. package/lib/splitter/index.d.ts +8 -0
  139. package/lib/splitter/index.js +12 -0
  140. package/lib/splitter/interface.d.ts +68 -0
  141. package/lib/splitter/interface.js +5 -0
  142. package/lib/splitter/style/index.d.ts +2 -0
  143. package/lib/splitter/style/index.js +4 -0
  144. package/lib/splitter/style/index.less +312 -0
  145. package/lib/statusTag/index.d.ts +28 -0
  146. package/lib/statusTag/index.js +125 -0
  147. package/lib/statusTag/style/index.d.ts +2 -0
  148. package/lib/statusTag/style/index.js +4 -0
  149. package/lib/statusTag/style/index.less +70 -0
  150. package/lib/statusTag/style/mixin.less +39 -0
  151. package/lib/style/index.d.ts +1 -0
  152. package/lib/style/index.js +3 -0
  153. package/lib/style/index.less +1 -0
  154. package/lib/style/mixins/index.less +0 -0
  155. package/lib/style/themes/index.less +2 -0
  156. package/lib/style/themes/variable.less +1 -0
  157. package/package.json +142 -141
  158. package/esm/styles/entry.less +0 -6
  159. package/esm/styles/variables.less +0 -1
  160. package/lib/styles/entry.less +0 -6
  161. package/lib/styles/variables.less +0 -1
@@ -0,0 +1,77 @@
1
+ @import '../../style/themes/index.less';
2
+
3
+ @flex-prefix-cls: ~'@{ant-prefix}-flex';
4
+
5
+ // 属性与值的映射
6
+ @align-items-values: {
7
+ stretch: stretch;
8
+ flex-start: flex-start;
9
+ center: center;
10
+ flex-end: flex-end;
11
+ baseline: baseline;
12
+ };
13
+
14
+ @justify-content-values: {
15
+ flex-start: flex-start;
16
+ center: center;
17
+ flex-end: flex-end;
18
+ space-between: space-between;
19
+ space-around: space-around;
20
+ space-evenly: space-evenly;
21
+ };
22
+
23
+ @flex-wrap-values: {
24
+ nowrap: nowrap;
25
+ wrap: wrap;
26
+ wrap-reverse: wrap-reverse;
27
+ };
28
+
29
+ .@{flex-prefix-cls} {
30
+ display: flex;
31
+ margin: 0;
32
+ padding: 0;
33
+
34
+ // 方向
35
+ &-vertical {
36
+ flex-direction: column;
37
+ }
38
+ &-rtl {
39
+ direction: rtl;
40
+ }
41
+ &:empty {
42
+ display: none;
43
+ }
44
+
45
+ // 间距 (Gap)
46
+ &-gap-small {
47
+ gap: @padding-xs;
48
+ }
49
+ &-gap-middle {
50
+ gap: @padding-md;
51
+ }
52
+ &-gap-large {
53
+ gap: @padding-lg;
54
+ }
55
+
56
+ // 使用 Loops/Each 抽象重复代码
57
+ // flex-wrap
58
+ each(@flex-wrap-values, .(@value, @key) {
59
+ &-wrap-@{key} {
60
+ flex-wrap: @value;
61
+ }
62
+ });
63
+
64
+ // align-items
65
+ each(@align-items-values, .(@value, @key) {
66
+ &-align-@{key} {
67
+ align-items: @value;
68
+ }
69
+ });
70
+
71
+ // justify-content
72
+ each(@justify-content-values, .(@value, @key) {
73
+ &-justify-@{key} {
74
+ justify-content: @value;
75
+ }
76
+ });
77
+ }
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import type { FlexProps } from './interface';
3
+ export declare const flexWrapValues: React.CSSProperties['flexWrap'][];
4
+ export declare const justifyContentValues: React.CSSProperties['justifyContent'][];
5
+ export declare const alignItemsValues: React.CSSProperties['alignItems'][];
6
+ declare const createFlexClassNames: (prefixCls: string, props: FlexProps) => string;
7
+ export default createFlexClassNames;
@@ -0,0 +1,33 @@
1
+ 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); }
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ 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); }
7
+ import { clsx } from 'clsx';
8
+ export var flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
9
+ export var justifyContentValues = ['flex-start', 'flex-end', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'left', 'right'];
10
+ export var alignItemsValues = ['center', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'baseline', 'normal', 'stretch'];
11
+ var genClsWrap = function genClsWrap(prefixCls, props) {
12
+ var wrap = props.wrap === true ? 'wrap' : props.wrap;
13
+ return _defineProperty({}, "".concat(prefixCls, "-wrap-").concat(wrap), wrap && flexWrapValues.includes(wrap));
14
+ };
15
+ var genClsAlign = function genClsAlign(prefixCls, props) {
16
+ var alignCls = {};
17
+ alignItemsValues.forEach(function (cssKey) {
18
+ alignCls["".concat(prefixCls, "-align-").concat(cssKey)] = props.align === cssKey;
19
+ });
20
+ alignCls["".concat(prefixCls, "-align-stretch")] = !props.align && !!props.vertical;
21
+ return alignCls;
22
+ };
23
+ var genClsJustify = function genClsJustify(prefixCls, props) {
24
+ var justifyCls = {};
25
+ justifyContentValues.forEach(function (cssKey) {
26
+ justifyCls["".concat(prefixCls, "-justify-").concat(cssKey)] = props.justify === cssKey;
27
+ });
28
+ return justifyCls;
29
+ };
30
+ var createFlexClassNames = function createFlexClassNames(prefixCls, props) {
31
+ return clsx(_objectSpread(_objectSpread(_objectSpread({}, genClsWrap(prefixCls, props)), genClsAlign(prefixCls, props)), genClsJustify(prefixCls, props)));
32
+ };
33
+ export default createFlexClassNames;
package/esm/index.d.ts CHANGED
@@ -1,3 +1,12 @@
1
1
  import '@dtinsight/react-icons/dist/index.css';
2
- import './styles/entry.less';
3
2
  export { default as BlockHeader } from './blockHeader';
3
+ export type { ButtonProps } from './button';
4
+ export { default as Button } from './button';
5
+ export { default as Flex } from './flex';
6
+ export type { FlexProps } from './flex/interface';
7
+ export { default as CollapsibleActionItems } from './collapsibleActionItems';
8
+ export { default as Resize } from './resize';
9
+ export { default as Splitter } from './splitter';
10
+ export * from './splitter';
11
+ export { default as Collapsible } from './collapsible';
12
+ export { default as StatusTag } from './statusTag';
package/esm/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import '@dtinsight/react-icons/dist/index.css';
2
- import "./styles/entry.less";
3
2
  export { default as BlockHeader } from "./blockHeader";
4
- // export { default as Button } from './button';
3
+ export { default as Button } from "./button";
4
+ export { default as Flex } from "./flex";
5
5
  // export { default as Catalogue } from './catalogue';
6
6
  // export { default as Chat } from './chat';
7
- // export { default as CollapsibleActionItems } from './collapsibleActionItems';
7
+ export { default as CollapsibleActionItems } from "./collapsibleActionItems";
8
8
  // export { default as ConfigProvider } from './configProvider';
9
9
  // export { default as ContentLayout } from './contentLayout';
10
10
  // export { default as ContextMenu } from './contextMenu';
@@ -34,11 +34,12 @@ export { default as BlockHeader } from "./blockHeader";
34
34
  // export { default as NotFound } from './notFound';
35
35
  // export { default as ProgressBar } from './progressBar';
36
36
  // export { default as ProgressLine } from './progressLine';
37
- // export { default as Resize } from './resize';
38
- // export { default as Splitter } from './splitter';
39
- // export * from './splitter';
37
+ export { default as Resize } from "./resize";
38
+ export { default as Splitter } from "./splitter";
39
+ export * from "./splitter";
40
40
  // export { default as SpreadSheet } from './spreadSheet';
41
- // export { default as StatusTag } from './statusTag';
41
+ export { default as Collapsible } from "./collapsible";
42
+ export { default as StatusTag } from "./statusTag";
42
43
  // export { default as Table } from './table';
43
44
  // export { default as TinyTag } from './tinyTag';
44
45
  // export { default as useCookieListener } from './useCookieListener';
@@ -0,0 +1,8 @@
1
+ import React, { ReactNode } from 'react';
2
+ export interface ResizeProps {
3
+ observerEle?: HTMLElement | null;
4
+ children?: ReactNode;
5
+ onResize?: () => void;
6
+ }
7
+ declare const Resize: React.FC<ResizeProps>;
8
+ export default Resize;
@@ -0,0 +1,29 @@
1
+ import React, { useEffect, useRef } from 'react';
2
+ var Resize = function Resize(_ref) {
3
+ var observerEle = _ref.observerEle,
4
+ onResize = _ref.onResize,
5
+ children = _ref.children;
6
+ var resizeEventRef = useRef(onResize);
7
+ resizeEventRef.current = onResize;
8
+ useEffect(function () {
9
+ var onResizeProxy = function onResizeProxy() {
10
+ if (typeof resizeEventRef.current === 'function') {
11
+ resizeEventRef.current();
12
+ }
13
+ };
14
+ if (!observerEle) {
15
+ window.addEventListener('resize', onResizeProxy, false);
16
+ return function () {
17
+ window.removeEventListener('resize', onResizeProxy, false);
18
+ };
19
+ } else {
20
+ var resizeObserver = new ResizeObserver(onResizeProxy);
21
+ resizeObserver.observe(observerEle);
22
+ return function () {
23
+ resizeObserver.unobserve(observerEle);
24
+ };
25
+ }
26
+ }, [observerEle]);
27
+ return /*#__PURE__*/React.createElement(React.Fragment, null, children);
28
+ };
29
+ export default Resize;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { InternalPanelProps, PanelProps } from './interface';
3
+ export declare const InternalPanel: React.ForwardRefExoticComponent<InternalPanelProps & {
4
+ children?: React.ReactNode;
5
+ } & React.RefAttributes<HTMLDivElement>>;
6
+ declare const Panel: React.FC<React.PropsWithChildren<PanelProps>>;
7
+ export default Panel;
@@ -0,0 +1,38 @@
1
+ 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); }
2
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ 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); }
7
+ import React, { forwardRef, useContext } from 'react';
8
+ import { ConfigContext } from 'antd/es/config-provider';
9
+ import classNames from 'classnames';
10
+ export var InternalPanel = /*#__PURE__*/forwardRef(function (props, ref) {
11
+ var customizePrefixCls = props.prefixCls,
12
+ className = props.className,
13
+ children = props.children,
14
+ size = props.size,
15
+ _props$style = props.style,
16
+ style = _props$style === void 0 ? {} : _props$style;
17
+ var _useContext = useContext(ConfigContext),
18
+ getPrefixCls = _useContext.getPrefixCls;
19
+ var prefixCls = getPrefixCls('splitter', customizePrefixCls);
20
+ var panelClassName = classNames("".concat(prefixCls, "-panel"), _defineProperty({}, "".concat(prefixCls, "-panel-hidden"), size === 0), className);
21
+ var hasSize = size !== undefined;
22
+ return /*#__PURE__*/React.createElement("div", {
23
+ ref: ref,
24
+ className: panelClassName,
25
+ style: _objectSpread(_objectSpread({}, style), {}, {
26
+ // Use auto when start from ssr
27
+ flexBasis: hasSize ? size : 'auto',
28
+ flexGrow: hasSize ? 0 : 1
29
+ })
30
+ }, children);
31
+ });
32
+ if (process.env.NODE_ENV !== 'production') {
33
+ InternalPanel.displayName = 'Panel';
34
+ }
35
+ var Panel = function Panel() {
36
+ return null;
37
+ };
38
+ export default Panel;
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ export declare type ShowCollapsibleIconMode = boolean | 'auto';
3
+ export interface SplitBarProps {
4
+ index: number;
5
+ active: boolean;
6
+ prefixCls: string;
7
+ resizable: boolean;
8
+ startCollapsible: boolean;
9
+ endCollapsible: boolean;
10
+ showStartCollapsibleIcon: ShowCollapsibleIconMode;
11
+ showEndCollapsibleIcon: ShowCollapsibleIconMode;
12
+ onOffsetStart: (index: number) => void;
13
+ onOffsetUpdate: (index: number, offsetX: number, offsetY: number, lazyEnd?: boolean) => void;
14
+ onOffsetEnd: (lazyEnd?: boolean) => void;
15
+ onCollapse: (index: number, type: 'start' | 'end') => void;
16
+ vertical: boolean;
17
+ ariaNow: number;
18
+ ariaMin: number;
19
+ ariaMax: number;
20
+ lazy?: boolean;
21
+ containerSize: number;
22
+ }
23
+ declare const SplitBar: React.FC<SplitBarProps>;
24
+ export default SplitBar;
@@ -0,0 +1,185 @@
1
+ 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); }
2
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
3
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
4
+ 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); }
5
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
6
+ 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."); }
7
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
8
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
9
+ 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; } }
10
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
11
+ import React, { useState } from 'react';
12
+ import { DownOutlined, LeftOutlined, RightOutlined, UpOutlined } from '@dtinsight/react-icons';
13
+ import classNames from 'classnames';
14
+ import useEvent from 'rc-util/lib/hooks/useEvent';
15
+ import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
16
+ function getValidNumber(num) {
17
+ return typeof num === 'number' && !Number.isNaN(num) && Number.isFinite(num) ? Math.round(num) : 0;
18
+ }
19
+ var SplitBar = function SplitBar(props) {
20
+ var prefixCls = props.prefixCls,
21
+ vertical = props.vertical,
22
+ index = props.index,
23
+ active = props.active,
24
+ ariaNow = props.ariaNow,
25
+ ariaMin = props.ariaMin,
26
+ ariaMax = props.ariaMax,
27
+ resizable = props.resizable,
28
+ startCollapsible = props.startCollapsible,
29
+ endCollapsible = props.endCollapsible,
30
+ onOffsetStart = props.onOffsetStart,
31
+ onOffsetUpdate = props.onOffsetUpdate,
32
+ onOffsetEnd = props.onOffsetEnd,
33
+ onCollapse = props.onCollapse,
34
+ lazy = props.lazy,
35
+ containerSize = props.containerSize,
36
+ showStartCollapsibleIcon = props.showStartCollapsibleIcon,
37
+ showEndCollapsibleIcon = props.showEndCollapsibleIcon;
38
+ var splitBarPrefixCls = "".concat(prefixCls, "-bar");
39
+ var _useState = useState(null),
40
+ _useState2 = _slicedToArray(_useState, 2),
41
+ startPos = _useState2[0],
42
+ setStartPos = _useState2[1];
43
+ var _useState3 = useState(0),
44
+ _useState4 = _slicedToArray(_useState3, 2),
45
+ constrainedOffset = _useState4[0],
46
+ setConstrainedOffset = _useState4[1];
47
+ var constrainedOffsetX = vertical ? 0 : constrainedOffset;
48
+ var constrainedOffsetY = vertical ? constrainedOffset : 0;
49
+ var onMouseDown = function onMouseDown(e) {
50
+ if (resizable && e.currentTarget) {
51
+ setStartPos([e.pageX, e.pageY]);
52
+ onOffsetStart(index);
53
+ }
54
+ };
55
+ var onTouchStart = function onTouchStart(e) {
56
+ if (resizable && e.touches.length === 1) {
57
+ var touch = e.touches[0];
58
+ setStartPos([touch.pageX, touch.pageY]);
59
+ onOffsetStart(index);
60
+ }
61
+ };
62
+ var getConstrainedOffset = function getConstrainedOffset(rawOffset) {
63
+ var currentPos = containerSize * ariaNow / 100;
64
+ var newPos = currentPos + rawOffset;
65
+ var minAllowed = Math.max(0, containerSize * ariaMin / 100);
66
+ var maxAllowed = Math.min(containerSize, containerSize * ariaMax / 100);
67
+ var clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos));
68
+ return clampedPos - currentPos;
69
+ };
70
+ var handleLazyMove = useEvent(function (offsetX, offsetY) {
71
+ var constrainedOffsetValue = getConstrainedOffset(vertical ? offsetY : offsetX);
72
+ setConstrainedOffset(constrainedOffsetValue);
73
+ });
74
+ var handleLazyEnd = useEvent(function () {
75
+ onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
76
+ setConstrainedOffset(0);
77
+ onOffsetEnd(true);
78
+ });
79
+ var getVisibilityClass = function getVisibilityClass(mode) {
80
+ switch (mode) {
81
+ case true:
82
+ return "".concat(splitBarPrefixCls, "-collapse-bar-always-visible");
83
+ case false:
84
+ return "".concat(splitBarPrefixCls, "-collapse-bar-always-hidden");
85
+ case 'auto':
86
+ return "".concat(splitBarPrefixCls, "-collapse-bar-hover-only");
87
+ }
88
+ };
89
+ useLayoutEffect(function () {
90
+ if (!startPos) {
91
+ return;
92
+ }
93
+ var onMouseMove = function onMouseMove(e) {
94
+ var pageX = e.pageX,
95
+ pageY = e.pageY;
96
+ var offsetX = pageX - startPos[0];
97
+ var offsetY = pageY - startPos[1];
98
+ if (lazy) {
99
+ handleLazyMove(offsetX, offsetY);
100
+ } else {
101
+ onOffsetUpdate(index, offsetX, offsetY);
102
+ }
103
+ };
104
+ var onMouseUp = function onMouseUp() {
105
+ if (lazy) {
106
+ handleLazyEnd();
107
+ } else {
108
+ onOffsetEnd();
109
+ }
110
+ setStartPos(null);
111
+ };
112
+ var handleTouchMove = function handleTouchMove(e) {
113
+ if (e.touches.length === 1) {
114
+ var touch = e.touches[0];
115
+ var _offsetX = touch.pageX - startPos[0];
116
+ var _offsetY = touch.pageY - startPos[1];
117
+ if (lazy) {
118
+ handleLazyMove(_offsetX, _offsetY);
119
+ } else {
120
+ onOffsetUpdate(index, _offsetX, _offsetY);
121
+ }
122
+ }
123
+ };
124
+ var handleTouchEnd = function handleTouchEnd() {
125
+ if (lazy) {
126
+ handleLazyEnd();
127
+ } else {
128
+ onOffsetEnd();
129
+ }
130
+ setStartPos(null);
131
+ };
132
+ var eventHandlerMap = {
133
+ mousemove: onMouseMove,
134
+ mouseup: onMouseUp,
135
+ touchmove: handleTouchMove,
136
+ touchend: handleTouchEnd
137
+ };
138
+ for (var _i = 0, _Object$entries = Object.entries(eventHandlerMap); _i < _Object$entries.length; _i++) {
139
+ var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
140
+ event = _Object$entries$_i[0],
141
+ handler = _Object$entries$_i[1];
142
+ window.addEventListener(event, handler);
143
+ }
144
+ return function () {
145
+ for (var _i2 = 0, _Object$entries2 = Object.entries(eventHandlerMap); _i2 < _Object$entries2.length; _i2++) {
146
+ var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
147
+ _event = _Object$entries2$_i[0],
148
+ _handler = _Object$entries2$_i[1];
149
+ window.removeEventListener(_event, _handler);
150
+ }
151
+ };
152
+ }, [startPos, index, lazy]);
153
+ var transformStyle = _defineProperty({}, "--".concat(splitBarPrefixCls, "-preview-offset"), "".concat(constrainedOffset, "px"));
154
+ var StartIcon = vertical ? UpOutlined : LeftOutlined;
155
+ var EndIcon = vertical ? DownOutlined : RightOutlined;
156
+ return /*#__PURE__*/React.createElement("div", {
157
+ className: splitBarPrefixCls,
158
+ role: "separator",
159
+ "aria-valuenow": getValidNumber(ariaNow),
160
+ "aria-valuemin": getValidNumber(ariaMin),
161
+ "aria-valuemax": getValidNumber(ariaMax)
162
+ }, lazy && /*#__PURE__*/React.createElement("div", {
163
+ className: classNames("".concat(splitBarPrefixCls, "-preview"), _defineProperty({}, "".concat(splitBarPrefixCls, "-preview-active"), !!constrainedOffset)),
164
+ style: transformStyle
165
+ }), /*#__PURE__*/React.createElement("div", {
166
+ className: classNames("".concat(splitBarPrefixCls, "-dragger"), _defineProperty(_defineProperty({}, "".concat(splitBarPrefixCls, "-dragger-disabled"), !resizable), "".concat(splitBarPrefixCls, "-dragger-active"), active)),
167
+ onMouseDown: onMouseDown,
168
+ onTouchStart: onTouchStart
169
+ }), startCollapsible && /*#__PURE__*/React.createElement("div", {
170
+ className: classNames("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-start"), getVisibilityClass(showStartCollapsibleIcon)),
171
+ onClick: function onClick() {
172
+ return onCollapse(index, 'start');
173
+ }
174
+ }, /*#__PURE__*/React.createElement(StartIcon, {
175
+ className: classNames("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-start"))
176
+ })), endCollapsible && /*#__PURE__*/React.createElement("div", {
177
+ className: classNames("".concat(splitBarPrefixCls, "-collapse-bar"), "".concat(splitBarPrefixCls, "-collapse-bar-end"), getVisibilityClass(showEndCollapsibleIcon)),
178
+ onClick: function onClick() {
179
+ return onCollapse(index, 'end');
180
+ }
181
+ }, /*#__PURE__*/React.createElement(EndIcon, {
182
+ className: classNames("".concat(splitBarPrefixCls, "-collapse-icon"), "".concat(splitBarPrefixCls, "-collapse-end"))
183
+ })));
184
+ };
185
+ export default SplitBar;
@@ -0,0 +1,5 @@
1
+ import React from 'react';
2
+ import type { SplitterProps } from './interface';
3
+ import './style/index.less';
4
+ declare const Splitter: React.FC<React.PropsWithChildren<SplitterProps>>;
5
+ export default Splitter;