@dtjoy/dt-design 1.0.0 → 1.0.2

package/lib/flex/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _configProvider = require("antd/es/config-provider");
+var _clsx = require("clsx");
+var _lodashEs = require("lodash-es");
+require("./style");
+var _gapSize = require("../_util/gapSize");
+var _hooks = require("../_util/hooks");
+var _isNonNullable = _interopRequireDefault(require("../_util/isNonNullable"));
+var _utils = _interopRequireDefault(require("./utils"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Flex = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    rootClassName,
+    className,
+    style,
+    flex,
+    gap,
+    vertical,
+    orientation,
+    component: Component = 'div',
+    children,
+    ...othersProps
+  } = props;
+  const {
+    direction: ctxDirection
+  } = _react.default.useContext(_configProvider.ConfigContext);
+  const prefixCls = customizePrefixCls || (0, _configProvider.globalConfig)().getPrefixCls('flex');
+  const [mergedVertical] = (0, _hooks.useOrientation)(orientation, vertical);
+  const mergedCls = (0, _clsx.clsx)(className, rootClassName, prefixCls, (0, _utils.default)(prefixCls, props), {
+    [`${prefixCls}-rtl`]: ctxDirection === 'rtl',
+    [`${prefixCls}-gap-${gap}`]: (0, _gapSize.isPresetSize)(gap),
+    [`${prefixCls}-vertical`]: mergedVertical === 'vertical'
+  });
+  const mergedStyle = {
+    ...style
+  };
+  if ((0, _isNonNullable.default)(flex)) {
+    mergedStyle.flex = flex;
+  }
+  if ((0, _isNonNullable.default)(gap) && !(0, _gapSize.isPresetSize)(gap)) {
+    mergedStyle.gap = gap;
+  }
+  return /*#__PURE__*/_react.default.createElement(Component, _extends({
+    ref: ref,
+    className: mergedCls,
+    style: mergedStyle
+  }, (0, _lodashEs.omit)(othersProps, ['justify', 'wrap', 'align'])), children);
+});
+if (process.env.NODE_ENV !== 'production') {
+  Flex.displayName = 'Flex';
+}
+var _default = exports.default = Flex;

package/lib/flex/interface.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import { SizeType } from 'antd/es/config-provider/SizeContext';
+import type { Orientation } from '../_util/hooks';
+import type { AnyObject, CustomComponent, LiteralUnion } from '../_util/type';
+export interface FlexProps<P = AnyObject> extends React.HTMLAttributes<HTMLElement> {
+    prefixCls?: string;
+    rootClassName?: string;
+    vertical?: boolean;
+    orientation?: Orientation;
+    wrap?: boolean | React.CSSProperties['flexWrap'];
+    justify?: React.CSSProperties['justifyContent'];
+    align?: React.CSSProperties['alignItems'];
+    flex?: React.CSSProperties['flex'];
+    gap?: LiteralUnion<SizeType, React.CSSProperties['gap']>;
+    component?: CustomComponent<P>;
+}

package/lib/flex/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/flex/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/lib/flex/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/index.less");
+require("./index.less");

package/lib/flex/style/index.less

@@ -0,0 +1,77 @@
+@import '../../style/themes/index.less';
+
+@flex-prefix-cls: ~'@{ant-prefix}-flex';
+
+// 属性与值的映射
+@align-items-values: {
+    stretch: stretch;
+    flex-start: flex-start;
+    center: center;
+    flex-end: flex-end;
+    baseline: baseline;
+};
+
+@justify-content-values: {
+    flex-start: flex-start;
+    center: center;
+    flex-end: flex-end;
+    space-between: space-between;
+    space-around: space-around;
+    space-evenly: space-evenly;
+};
+
+@flex-wrap-values: {
+    nowrap: nowrap;
+    wrap: wrap;
+    wrap-reverse: wrap-reverse;
+};
+
+.@{flex-prefix-cls} {
+    display: flex;
+    margin: 0;
+    padding: 0;
+
+    // 方向
+    &-vertical {
+        flex-direction: column;
+    }
+    &-rtl {
+        direction: rtl;
+    }
+    &:empty {
+        display: none;
+    }
+
+    // 间距 (Gap)
+    &-gap-small {
+        gap: @padding-xs;
+    }
+    &-gap-middle {
+        gap: @padding-md;
+    }
+    &-gap-large {
+        gap: @padding-lg;
+    }
+
+    // 使用 Loops/Each 抽象重复代码
+    // flex-wrap
+    each(@flex-wrap-values, .(@value, @key) {
+        &-wrap-@{key} {
+            flex-wrap: @value;
+        }
+    });
+
+    // align-items
+    each(@align-items-values, .(@value, @key) {
+        &-align-@{key} {
+            align-items: @value;
+        }
+    });
+
+    // justify-content
+    each(@justify-content-values, .(@value, @key) {
+        &-justify-@{key} {
+            justify-content: @value;
+        }
+    });
+}

package/lib/flex/utils.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FlexProps } from './interface';
+export declare const flexWrapValues: React.CSSProperties['flexWrap'][];
+export declare const justifyContentValues: React.CSSProperties['justifyContent'][];
+export declare const alignItemsValues: React.CSSProperties['alignItems'][];
+declare const createFlexClassNames: (prefixCls: string, props: FlexProps) => string;
+export default createFlexClassNames;

package/lib/flex/utils.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.justifyContentValues = exports.flexWrapValues = exports.default = exports.alignItemsValues = void 0;
+var _clsx = require("clsx");
+const flexWrapValues = exports.flexWrapValues = ['wrap', 'nowrap', 'wrap-reverse'];
+const justifyContentValues = exports.justifyContentValues = ['flex-start', 'flex-end', 'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch', 'normal', 'left', 'right'];
+const alignItemsValues = exports.alignItemsValues = ['center', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'baseline', 'normal', 'stretch'];
+const genClsWrap = (prefixCls, props) => {
+  const wrap = props.wrap === true ? 'wrap' : props.wrap;
+  return {
+    [`${prefixCls}-wrap-${wrap}`]: wrap && flexWrapValues.includes(wrap)
+  };
+};
+const genClsAlign = (prefixCls, props) => {
+  const alignCls = {};
+  alignItemsValues.forEach(cssKey => {
+    alignCls[`${prefixCls}-align-${cssKey}`] = props.align === cssKey;
+  });
+  alignCls[`${prefixCls}-align-stretch`] = !props.align && !!props.vertical;
+  return alignCls;
+};
+const genClsJustify = (prefixCls, props) => {
+  const justifyCls = {};
+  justifyContentValues.forEach(cssKey => {
+    justifyCls[`${prefixCls}-justify-${cssKey}`] = props.justify === cssKey;
+  });
+  return justifyCls;
+};
+const createFlexClassNames = (prefixCls, props) => {
+  return (0, _clsx.clsx)({
+    ...genClsWrap(prefixCls, props),
+    ...genClsAlign(prefixCls, props),
+    ...genClsJustify(prefixCls, props)
+  });
+};
+var _default = exports.default = createFlexClassNames;

package/lib/index.d.ts

@@ -1,3 +1,12 @@
 import '@dtinsight/react-icons/dist/index.css';
-import './styles/entry.less';
 export { default as BlockHeader } from './blockHeader';
+export type { ButtonProps } from './button';
+export { default as Button } from './button';
+export { default as Flex } from './flex';
+export type { FlexProps } from './flex/interface';
+export { default as CollapsibleActionItems } from './collapsibleActionItems';
+export { default as Resize } from './resize';
+export { default as Splitter } from './splitter';
+export * from './splitter';
+export { default as Collapsible } from './collapsible';
+export { default as StatusTag } from './statusTag';

package/lib/index.js

@@ -3,13 +3,84 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  BlockHeader: true,
+  Button: true,
+  Flex: true,
+  CollapsibleActionItems: true,
+  Resize: true,
+  Splitter: true,
+  Collapsible: true,
+  StatusTag: true
+};
 Object.defineProperty(exports, "BlockHeader", {
   enumerable: true,
   get: function () {
     return _blockHeader.default;
   }
 });
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _button.default;
+  }
+});
+Object.defineProperty(exports, "Collapsible", {
+  enumerable: true,
+  get: function () {
+    return _collapsible.default;
+  }
+});
+Object.defineProperty(exports, "CollapsibleActionItems", {
+  enumerable: true,
+  get: function () {
+    return _collapsibleActionItems.default;
+  }
+});
+Object.defineProperty(exports, "Flex", {
+  enumerable: true,
+  get: function () {
+    return _flex.default;
+  }
+});
+Object.defineProperty(exports, "Resize", {
+  enumerable: true,
+  get: function () {
+    return _resize.default;
+  }
+});
+Object.defineProperty(exports, "Splitter", {
+  enumerable: true,
+  get: function () {
+    return _splitter.default;
+  }
+});
+Object.defineProperty(exports, "StatusTag", {
+  enumerable: true,
+  get: function () {
+    return _statusTag.default;
+  }
+});
 require("@dtinsight/react-icons/dist/index.css");
-require("./styles/entry.less");
 var _blockHeader = _interopRequireDefault(require("./blockHeader"));
+var _button = _interopRequireDefault(require("./button"));
+var _flex = _interopRequireDefault(require("./flex"));
+var _collapsibleActionItems = _interopRequireDefault(require("./collapsibleActionItems"));
+var _resize = _interopRequireDefault(require("./resize"));
+var _splitter = _interopRequireWildcard(require("./splitter"));
+Object.keys(_splitter).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _splitter[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _splitter[key];
+    }
+  });
+});
+var _collapsible = _interopRequireDefault(require("./collapsible"));
+var _statusTag = _interopRequireDefault(require("./statusTag"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+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 && Object.prototype.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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/resize/index.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+export interface ResizeProps {
+    observerEle?: HTMLElement | null;
+    children?: ReactNode;
+    onResize?: () => void;
+}
+declare const Resize: React.FC<ResizeProps>;
+export default Resize;

package/lib/resize/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+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 && Object.prototype.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; }
+const Resize = ({
+  observerEle,
+  onResize,
+  children
+}) => {
+  const resizeEventRef = (0, _react.useRef)(onResize);
+  resizeEventRef.current = onResize;
+  (0, _react.useEffect)(() => {
+    const onResizeProxy = () => {
+      if (typeof resizeEventRef.current === 'function') {
+        resizeEventRef.current();
+      }
+    };
+    if (!observerEle) {
+      window.addEventListener('resize', onResizeProxy, false);
+      return () => {
+        window.removeEventListener('resize', onResizeProxy, false);
+      };
+    } else {
+      const resizeObserver = new ResizeObserver(onResizeProxy);
+      resizeObserver.observe(observerEle);
+      return () => {
+        resizeObserver.unobserve(observerEle);
+      };
+    }
+  }, [observerEle]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+};
+var _default = exports.default = Resize;

package/lib/splitter/Panel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { InternalPanelProps, PanelProps } from './interface';
+export declare const InternalPanel: React.ForwardRefExoticComponent<InternalPanelProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const Panel: React.FC<React.PropsWithChildren<PanelProps>>;
+export default Panel;

package/lib/splitter/Panel.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InternalPanel = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _configProvider = require("antd/es/config-provider");
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+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 && Object.prototype.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; }
+const InternalPanel = exports.InternalPanel = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    children,
+    size,
+    style = {}
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_configProvider.ConfigContext);
+  const prefixCls = getPrefixCls('splitter', customizePrefixCls);
+  const panelClassName = (0, _classnames.default)(`${prefixCls}-panel`, {
+    [`${prefixCls}-panel-hidden`]: size === 0
+  }, className);
+  const hasSize = size !== undefined;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref,
+    className: panelClassName,
+    style: {
+      ...style,
+      // Use auto when start from ssr
+      flexBasis: hasSize ? size : 'auto',
+      flexGrow: hasSize ? 0 : 1
+    }
+  }, children);
+});
+if (process.env.NODE_ENV !== 'production') {
+  InternalPanel.displayName = 'Panel';
+}
+const Panel = () => null;
+var _default = exports.default = Panel;

package/lib/splitter/SplitBar.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare type ShowCollapsibleIconMode = boolean | 'auto';
+export interface SplitBarProps {
+    index: number;
+    active: boolean;
+    prefixCls: string;
+    resizable: boolean;
+    startCollapsible: boolean;
+    endCollapsible: boolean;
+    showStartCollapsibleIcon: ShowCollapsibleIconMode;
+    showEndCollapsibleIcon: ShowCollapsibleIconMode;
+    onOffsetStart: (index: number) => void;
+    onOffsetUpdate: (index: number, offsetX: number, offsetY: number, lazyEnd?: boolean) => void;
+    onOffsetEnd: (lazyEnd?: boolean) => void;
+    onCollapse: (index: number, type: 'start' | 'end') => void;
+    vertical: boolean;
+    ariaNow: number;
+    ariaMin: number;
+    ariaMax: number;
+    lazy?: boolean;
+    containerSize: number;
+}
+declare const SplitBar: React.FC<SplitBarProps>;
+export default SplitBar;

package/lib/splitter/SplitBar.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIcons = require("@dtinsight/react-icons");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+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 && Object.prototype.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; }
+function getValidNumber(num) {
+  return typeof num === 'number' && !Number.isNaN(num) && Number.isFinite(num) ? Math.round(num) : 0;
+}
+const SplitBar = props => {
+  const {
+    prefixCls,
+    vertical,
+    index,
+    active,
+    ariaNow,
+    ariaMin,
+    ariaMax,
+    resizable,
+    startCollapsible,
+    endCollapsible,
+    onOffsetStart,
+    onOffsetUpdate,
+    onOffsetEnd,
+    onCollapse,
+    lazy,
+    containerSize,
+    showStartCollapsibleIcon,
+    showEndCollapsibleIcon
+  } = props;
+  const splitBarPrefixCls = `${prefixCls}-bar`;
+  const [startPos, setStartPos] = (0, _react.useState)(null);
+  const [constrainedOffset, setConstrainedOffset] = (0, _react.useState)(0);
+  const constrainedOffsetX = vertical ? 0 : constrainedOffset;
+  const constrainedOffsetY = vertical ? constrainedOffset : 0;
+  const onMouseDown = e => {
+    if (resizable && e.currentTarget) {
+      setStartPos([e.pageX, e.pageY]);
+      onOffsetStart(index);
+    }
+  };
+  const onTouchStart = e => {
+    if (resizable && e.touches.length === 1) {
+      const touch = e.touches[0];
+      setStartPos([touch.pageX, touch.pageY]);
+      onOffsetStart(index);
+    }
+  };
+  const getConstrainedOffset = rawOffset => {
+    const currentPos = containerSize * ariaNow / 100;
+    const newPos = currentPos + rawOffset;
+    const minAllowed = Math.max(0, containerSize * ariaMin / 100);
+    const maxAllowed = Math.min(containerSize, containerSize * ariaMax / 100);
+    const clampedPos = Math.max(minAllowed, Math.min(maxAllowed, newPos));
+    return clampedPos - currentPos;
+  };
+  const handleLazyMove = (0, _useEvent.default)((offsetX, offsetY) => {
+    const constrainedOffsetValue = getConstrainedOffset(vertical ? offsetY : offsetX);
+    setConstrainedOffset(constrainedOffsetValue);
+  });
+  const handleLazyEnd = (0, _useEvent.default)(() => {
+    onOffsetUpdate(index, constrainedOffsetX, constrainedOffsetY, true);
+    setConstrainedOffset(0);
+    onOffsetEnd(true);
+  });
+  const getVisibilityClass = mode => {
+    switch (mode) {
+      case true:
+        return `${splitBarPrefixCls}-collapse-bar-always-visible`;
+      case false:
+        return `${splitBarPrefixCls}-collapse-bar-always-hidden`;
+      case 'auto':
+        return `${splitBarPrefixCls}-collapse-bar-hover-only`;
+    }
+  };
+  (0, _useLayoutEffect.default)(() => {
+    if (!startPos) {
+      return;
+    }
+    const onMouseMove = e => {
+      const {
+        pageX,
+        pageY
+      } = e;
+      const offsetX = pageX - startPos[0];
+      const offsetY = pageY - startPos[1];
+      if (lazy) {
+        handleLazyMove(offsetX, offsetY);
+      } else {
+        onOffsetUpdate(index, offsetX, offsetY);
+      }
+    };
+    const onMouseUp = () => {
+      if (lazy) {
+        handleLazyEnd();
+      } else {
+        onOffsetEnd();
+      }
+      setStartPos(null);
+    };
+    const handleTouchMove = e => {
+      if (e.touches.length === 1) {
+        const touch = e.touches[0];
+        const offsetX = touch.pageX - startPos[0];
+        const offsetY = touch.pageY - startPos[1];
+        if (lazy) {
+          handleLazyMove(offsetX, offsetY);
+        } else {
+          onOffsetUpdate(index, offsetX, offsetY);
+        }
+      }
+    };
+    const handleTouchEnd = () => {
+      if (lazy) {
+        handleLazyEnd();
+      } else {
+        onOffsetEnd();
+      }
+      setStartPos(null);
+    };
+    const eventHandlerMap = {
+      mousemove: onMouseMove,
+      mouseup: onMouseUp,
+      touchmove: handleTouchMove,
+      touchend: handleTouchEnd
+    };
+    for (const [event, handler] of Object.entries(eventHandlerMap)) {
+      window.addEventListener(event, handler);
+    }
+    return () => {
+      for (const [event, handler] of Object.entries(eventHandlerMap)) {
+        window.removeEventListener(event, handler);
+      }
+    };
+  }, [startPos, index, lazy]);
+  const transformStyle = {
+    [`--${splitBarPrefixCls}-preview-offset`]: `${constrainedOffset}px`
+  };
+  const StartIcon = vertical ? _reactIcons.UpOutlined : _reactIcons.LeftOutlined;
+  const EndIcon = vertical ? _reactIcons.DownOutlined : _reactIcons.RightOutlined;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: splitBarPrefixCls,
+    role: "separator",
+    "aria-valuenow": getValidNumber(ariaNow),
+    "aria-valuemin": getValidNumber(ariaMin),
+    "aria-valuemax": getValidNumber(ariaMax)
+  }, lazy && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-preview`, {
+      [`${splitBarPrefixCls}-preview-active`]: !!constrainedOffset
+    }),
+    style: transformStyle
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-dragger`, {
+      [`${splitBarPrefixCls}-dragger-disabled`]: !resizable,
+      [`${splitBarPrefixCls}-dragger-active`]: active
+    }),
+    onMouseDown: onMouseDown,
+    onTouchStart: onTouchStart
+  }), startCollapsible && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-collapse-bar`, `${splitBarPrefixCls}-collapse-bar-start`, getVisibilityClass(showStartCollapsibleIcon)),
+    onClick: () => onCollapse(index, 'start')
+  }, /*#__PURE__*/_react.default.createElement(StartIcon, {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-collapse-icon`, `${splitBarPrefixCls}-collapse-start`)
+  })), endCollapsible && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-collapse-bar`, `${splitBarPrefixCls}-collapse-bar-end`, getVisibilityClass(showEndCollapsibleIcon)),
+    onClick: () => onCollapse(index, 'end')
+  }, /*#__PURE__*/_react.default.createElement(EndIcon, {
+    className: (0, _classnames.default)(`${splitBarPrefixCls}-collapse-icon`, `${splitBarPrefixCls}-collapse-end`)
+  })));
+};
+var _default = exports.default = SplitBar;

package/lib/splitter/Splitter.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SplitterProps } from './interface';
+import './style/index.less';
+declare const Splitter: React.FC<React.PropsWithChildren<SplitterProps>>;
+export default Splitter;