plain-design 1.0.0-beta.4 → 1.0.0-beta.40

package/src/packages/components/useMessage/Message.tsx

@@ -2,6 +2,7 @@ import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, Pro
 import {closeMessageServiceHook, iMessageServiceOption} from "./message.service.utils";
 import Icon from "../Icon";
 import './message.scss';
+import {useStyle} from "../../uses/useStyle";
 
 export const Message = designComponent({
   name: 'message-service',
@@ -16,9 +17,12 @@ export const Message = designComponent({
 
     onMounted(() => emit.onReady());
 
+    const { styleComputed } = useStyle();
+
     const classes = useClasses(() => [
       getComponentCls('message'),
-      `message-status-${props.option.status}`
+      `message-status-${props.option.status}`,
+      `message-size-${styleComputed.value.size}`
     ]);
     const styles = { zIndex: nextIndex() };
 

package/src/packages/components/useMessage/message.scss

@@ -128,7 +128,7 @@
     }
     .message-close {
       @include prefix(icon) {
-        color: white;
+       color: plv(pbfc);
       }
 
       &:after {
@@ -142,4 +142,8 @@
       }
     }
   }
+
+  @include sizeMixin(message, (font-size)) {
+    padding: calc(#{plv(dropdown-size-#{$name}-padding-y)} * 2);
+  }
 }

package/src/packages/components/useNotice/notice.scss

@@ -65,7 +65,7 @@
     cursor: pointer;
 
     @include prefix(icon) {
-      color: white;
+      color: plv(pbfc);
       position: relative;
       z-index: 1;
 
@@ -111,7 +111,7 @@
     font-size: plv(notice-content-font-size);
     padding-top: 16px;
     color: plv(text-2);
-    line-height: 1.5715;
+    line-height: plv(line-height);
   }
 
   .notice-foot {

package/src/packages/components/usePopup/PopupItem.tsx

@@ -1,4 +1,4 @@
-import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
+import {designComponent, getComponentCls, iHTMLDivElement, iHTMLElement, iMouseEvent, iTransitionEvent, nextIndex, onBeforeUnmount, onMounted, Portal, PropType, reactive, SimpleFunction, useClassCache, useRefs, useStyleCache} from "plain-design-composition";
 import {ePopupAnimation, iPopupOption, iPopupRefs, PopupItemProvide} from "./utils/popup.utils";
 import {createEffects} from "plain-utils/utils/createEffects";
 import {delay} from "plain-utils/utils/delay";
@@ -82,6 +82,7 @@ export const PopupItem = designComponent({
         'popup-item-is-dark': !application.value.theme.dark && !state.option.status && !!state.option.dark,
         [`popup-item-status-${state.option.status}`]: !!state.option.status,
         'popup-item-dark-app': application.value.theme.dark,
+        'popup-item-no-interactive': !state.option.interactive,
       }
     ]);
 
@@ -193,7 +194,7 @@ export const PopupItem = designComponent({
             clearTimeout(timer);
             timer = null;
           }
-          methods.refresh(true);
+          methods.refresh(state.option.transformRefreshOnScroll);
           timer = setTimeout(() => {
             methods.refresh();
           }, 100);
@@ -262,6 +263,14 @@ export const PopupItem = designComponent({
         };
         return check;
       })(),
+      /**
+       * 阻止点击popup的事件冒泡，如果有div包裹popup几点，在react中即使popup不是这个div的子节点也会导致事件冒泡到div上
+       * @author  韦胜健
+       * @date    2023/8/10 11:27
+       */
+      onClickPopup: (e: iMouseEvent) => {
+        e.stopPropagation();
+      },
     };
 
     onMounted(async () => {
@@ -361,34 +370,44 @@ export const PopupItem = designComponent({
     PopupItemProvide.provide(state);
 
     return () => (
-      !!state.option.reference && <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
-        <div
-          data-id={state.option.id}
-          ref={onRef.popup}
-          className={classes.value}
-          data-popup-show={String(state.isShow)}
-          onTransitionEnd={handler.onTransitionend}
-          style={styles.value}
-        >
-          {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
-          {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
-          <div
-            ref={onRef.body}
-            className="popup-item-body"
-          >
-            {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
-            {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+      !!state.option.reference && (
+        (() => {
+          const content = (
             <div
-              ref={onRef.content}
-              style={contentStyles.value}
-              className="popup-item-content"
+              data-id={state.option.id}
+              ref={onRef.popup}
+              className={classes.value}
+              data-popup-show={String(state.isShow)}
               onTransitionEnd={handler.onTransitionend}
+              style={styles.value}
+              onClick={handler.onClickPopup}
             >
-              {slots.default.isExist() ? slots.default() : state.option.render()}
+              {/*slide的情况下，arrow得放body外面，避免被overflow:hidden*/}
+              {!!state.option.arrowSize && !state.option.noArrow && state.option.animation !== ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+              <div
+                ref={onRef.body}
+                className="popup-item-body"
+              >
+                {/*scale的情况下，arrow得放body里边，一遍能够继承body的transform:scale*/}
+                {!!state.option.arrowSize && !state.option.noArrow && state.option.animation === ePopupAnimation.scale && (<div className="popup-item-arrow" ref={onRef.arrow}/>)}
+                <div
+                  ref={onRef.content}
+                  style={contentStyles.value}
+                  className="popup-item-content"
+                  onTransitionEnd={handler.onTransitionend}
+                >
+                  {slots.default.isExist() ? slots.default() : state.option.render()}
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      </Portal>
+          );
+          return state.option.appendToBody ? (
+            <Portal to={`.${getComponentCls(APPLICATION_SERVICE_CONTAINER_CLASS)}`}>
+              {content}
+            </Portal>
+          ) : content;
+        })()
+      )
     );
   },
 });

package/src/packages/components/usePopup/popup-item.scss

@@ -97,7 +97,7 @@
 
   &.popup-item-is-dark {
     --#{componentName('popup-item-background')}: rgba(0, 0, 0, 0.88);
-    color: white;
+    color: plv(pbfc);
     filter: none;
   }
 
@@ -112,6 +112,10 @@
   &.popup-item-no-border {
     filter: none !important;
   }
+
+  &.popup-item-no-interactive {
+    pointer-events: none;
+  }
   /*---------------------------------------animation-------------------------------------------*/
 
   &.popup-item-animation-fade {

package/src/packages/components/usePopup/usePopupManager.tsx

@@ -62,7 +62,8 @@ export function usePopupManager({ getSize }: { getSize: () => typeof ThemeSize.T
         trigger: ePopupTrigger.hover,
         animation: ePopupAnimation.fade,
         destroyOnClose: true,
-        to: 'body',
+        appendToBody: true,
+        transformRefreshOnScroll: true,
         offset: 0,
         offsetAlign: 0,
         autoSwitchDirection: true,

package/src/packages/components/usePopup/utils/popup.utils.ts

@@ -62,7 +62,8 @@ export interface iPopupDefaultOption {
   trigger: iPopupTrigger,                     // 触发类型
   animation: iPopupAnimation,                 // 动画类型
   destroyOnClose: boolean,                    // 关闭的时候销毁popup
-  to: string,                                 // 挂载到某个dom节点下
+  appendToBody: boolean,                      // 挂载到某个dom节点下
+  transformRefreshOnScroll: boolean,          // scroll的时候refresh使用transform来优化
   offset: number,                             // 在direction方向上的距离
   offsetAlign: number,                        // 在align方向上的偏移距离
   autoSwitchDirection: boolean,               // 当空间不够时，是否自动切换direction

package/src/packages/components/usePopupManager/index.ts

@@ -0,0 +1,5 @@
+import {usePopupManager} from "../usePopup/usePopupManager";
+
+export default usePopupManager;
+
+export {usePopupManager};

package/src/packages/components/usePopupTrigger/index.tsx

@@ -0,0 +1,5 @@
+import {usePopupTrigger} from '../usePopup/trigger/usePopupTrigger';
+
+export default usePopupTrigger;
+
+export {usePopupTrigger};

package/src/packages/components/useReferenceTrigger/index.tsx

@@ -0,0 +1,5 @@
+import {useReferenceTrigger} from '../usePopup/trigger/useReferenceTrigger';
+
+export default useReferenceTrigger;
+
+export {useReferenceTrigger};

package/src/packages/components/useTooltip/index.tsx

@@ -46,6 +46,8 @@ export function createTooltip(option: iTooltipServiceOption, popup: iPopupServic
         if (option.overflow) {
           if (staticState.reference!.scrollWidth > staticState.reference!.offsetWidth) {
             state.isOverflow = true;
+          } else {
+            state.isOverflow = false;
           }
         }
       },

package/src/packages/components/useWatchAutoClear/index.ts

@@ -0,0 +1,5 @@
+import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
+
+export {useWatchAutoClear};
+
+export default useWatchAutoClear;

package/src/packages/entry.tsx

@@ -1,4 +1,5 @@
 import {setComponentPrefix} from "plain-design-composition";
+import packageJson from '../../package.json';
 
 export {Application} from "./components/Application";
 export type {iApplicationConfiguration} from './components/Application/utils/application.utils';
@@ -27,13 +28,14 @@ export {RadioGroup} from "./components/RadioGroup";
 export {DropdownOption} from "./components/DropdownOption";
 export {Dropdown} from "./components/Dropdown";
 export {DropdownGroup} from "./components/DropdownGroup";
+export {DropdownSeparator} from "./components/DropdownSeparator";
 export {VirtualList} from "./components/VirtualList";
 export {Segment} from "./components/Segment";
 export {SegmentGroup} from "./components/SegmentGroup";
 export {InputGroup} from "./components/InputGroup";
 export {Card} from "./components/Card";
+export {CarouselItem} from "./components/CarouselItem";
 export {Carousel} from "./components/Carousel";
-export {CarouselGroup} from "./components/CarouselGroup";
 export {CollapseGroup} from "./components/CollapseGroup";
 export {Collapse} from "./components/Collapse";
 export {ProgressBar} from "./components/ProgressBar";
@@ -54,6 +56,7 @@ export {TabGroup} from './components/TabGroup';
 export {Tab} from './components/Tab';
 export {Tag} from './components/Tag';
 export {Tree} from './components/Tree';
+export {TreeNodeWithMenu} from './components/TreeNodeWithMenu';
 export {ColorPicker} from './components/ColorPicker';
 export {TimePicker} from './components/TimePicker';
 export {DatePicker} from './components/DatePicker';
@@ -85,9 +88,32 @@ export {CascadePanel} from './components/CascadePanel';
 export {usePopup} from './components/usePopup';
 export {Popup} from './components/Popup';
 export {createPopup} from './components/createPopup';
+export type {
+  iPopupAlign,
+  iPopupAnimation,
+  iPopupBoundary,
+  iPopupCustomOption,
+  iPopupDefaultOption,
+  iPopupDirection,
+  iPopupManager,
+  iPopupOption,
+  iPopupPlacement,
+  iPopupRects,
+  iPopupRefreshBuildParams,
+  iPopupRefreshParams,
+  iPopupRefs,
+  iPopupTrigger,
+  iPopupUseOption,
+} from './components/usePopup/utils/popup.utils';
 export {createScrollUtils} from './components/createScrollUtils';
 export {useAutoScrollUtils} from './components/useAutoScrollUtils';
 export {ClientZoom} from './components/ClientZoom';
+export {Layout} from './components/Layout';
+export {LayoutSection} from './components/LayoutSection';
+export {$previewer} from './components/$previewer';
+export {StackCard} from './components/StackCard';
+export {StackCardItem} from './components/StackCardItem';
+export {SortList} from './components/SortList';
 
 export {VirtualTable} from './components/VirtualTable';
 export {Table} from './components/Table';
@@ -127,12 +153,18 @@ export type {iOvMeta} from './components/$ov/ov.utils';
 export {$configuration} from './components/$configuration';
 export {createAddressService} from './components/createAddressService';
 export {createHttp} from './components/createHttp';
+export type {
+  iHttpRequestConfig,
+  iPlainResponseDataType,
+  iHttpResponseDataType
+} from './components/createHttp/http.utils';
 
 export {Address} from './components/Address';
 export {AddressCascade} from './components/AddressCascade';
 export {eAddressTypeEnum} from './components/$address/address.utils';
 export type {iAddressSyncMeta, iAddressLazyMeta} from './components/$address/address.utils';
 export type {iPlainAddressData} from './components/createPlainAddressService';
+export {Empty} from './components/Empty';
 
 export {FormInput} from './components/FormInput';
 export {FormSelect} from './components/FormSelect';
@@ -162,6 +194,20 @@ export type {
   iTableOptionCacheRegistryConfig,
   iTableOptionGetCacheParam
 } from './components/AutoTable/use/useTableOption.cache.utils';
-export {PageThemeUtils, ThemePrimaryColors} from './components/PageThemeUtils';
+export {PageThemeUtils} from './components/PageThemeUtils';
+export {ThemePrimaryColors} from './components/ThemePrimaryColors';
+export {ThemeEditor} from './components/ThemeEditor';
+export {useReferenceTrigger} from './components/useReferenceTrigger';
+export {usePopupTrigger} from './components/usePopupTrigger';
+export {useWatchAutoClear} from './components/useWatchAutoClear';
+export {nextPopupId} from './components/nextPopupId';
+export {createProvider} from './components/createProvider';
+export {usePopupManager} from './components/usePopupManager';
+export {useEdit, EditProps, EDIT_PROVIDER} from './uses/useEdit';
+export type {tEditComputed, tEditControl, EditProvideData} from './uses/useEdit';
+export {useStyle, StyleProps, ThemeShape, ThemeSize, ThemeStatus} from './uses/useStyle';
+export type {tStyleComputed, UseStyleProvideData} from './uses/useStyle';
 
 setComponentPrefix(globalComponentPrefix);
+
+export const version = packageJson.version;

package/src/packages/i18n/lang/en-us.ts

@@ -244,4 +244,40 @@ export const EnUsLocale: tZhCnLocale = {
     queryTotal: 'query total',
     columnTitle: 'column title',
   },
+  theme: {
+    inputMode: 'INPUT MODE',
+    inputModeFlat: 'flat',
+    inputModelStroke: 'stroke',
+    primaryColor: 'PRIMARY COLOR',
+    size: 'SIZE',
+    sizeLarge: 'large',
+    sizeNormal: 'normal',
+    sizeSmall: 'small',
+    sizeMini: 'mini',
+    darkMode: 'DARK MODE',
+    darkModeOn: 'dark',
+    darkModeOff: 'light',
+    radiusMode: 'RADIUS MODE',
+    radiusModeRound: 'round',
+    radiusModeNormal: 'filet',
+    radiusModeNone: 'none',
+    scale: 'SCALE'
+  },
+  colorName: {
+    默认主题: 'Default',
+    薄暮: 'Twilight',
+    火山: 'Volcano',
+    日暮: 'Sunset',
+    金盏花: 'MarigoldFlower',
+    日出: 'sunrise',
+    青柠: 'GreenLime',
+    极光绿: 'AuroraGreen',
+    明青: 'MingQing',
+    拂晓蓝: 'FuXiaolan',
+    极客蓝: 'GeekBlue',
+    酱紫: 'SaucePurple',
+    洋红: 'Magenta',
+    极昼: 'Light',
+    黑夜: 'Dark',
+  }
 };

package/src/packages/i18n/lang/zh-cn.ts

@@ -242,6 +242,42 @@ export const ZhCnLocale = {
     queryTotal: '查询总数',
     columnTitle: '列标题',
   },
+  theme: {
+    inputMode: '输入框类型',
+    inputModeFlat: '填充',
+    inputModelStroke: '描边',
+    primaryColor: '主题色',
+    size: '大小尺寸',
+    sizeLarge: '大尺寸',
+    sizeNormal: '中等尺寸',
+    sizeSmall: '小尺寸',
+    sizeMini: '极小尺寸',
+    darkMode: '黑白主题',
+    darkModeOn: '黑色主题',
+    darkModeOff: '白色主题',
+    radiusMode: '圆角类型',
+    radiusModeRound: '圆角',
+    radiusModeNormal: '小圆角',
+    radiusModeNone: '无圆角',
+    scale: '大小缩放'
+  },
+  colorName: {
+    默认主题: '默认主题',
+    薄暮: '薄暮',
+    火山: '火山',
+    日暮: '日暮',
+    金盏花: '金盏花',
+    日出: '日出',
+    青柠: '青柠',
+    极光绿: '极光绿',
+    明青: '明青',
+    拂晓蓝: '拂晓蓝',
+    极客蓝: '极客蓝',
+    酱紫: '酱紫',
+    洋红: '洋红',
+    极昼: '极昼',
+    黑夜: '黑夜',
+  }
 } as const;
 
 type ZhCnLocaleUtils<T> = { [k in keyof T]: T[k] extends string ? string : ZhCnLocaleUtils<T[k]> }

package/src/packages/uses/useDragHorizontalScroll.ts

@@ -0,0 +1,82 @@
+import {createEffects} from "plain-utils/utils/createEffects";
+import {ClientZoom} from "../utils/ClientZoom";
+import {watch} from "plain-design-composition";
+
+export function useDragHorizontalScroll(getEl: () => HTMLElement | null | undefined, config?: { onDragStart: () => void, onDragEnd: () => void }) {
+
+  const staticState = {
+    isDragging: false,
+    el: null as null | undefined | HTMLElement,
+    start: {
+      x: 0,
+      left: 0,
+      width: 0,
+    },
+    move: {
+      x: 0
+    }
+  };
+
+  const { effects } = createEffects();
+
+  const handler = {
+    mousedown: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
+      staticState.isDragging = false;
+      staticState.start = {
+        x: clientX,
+        left: staticState.el!.scrollLeft,
+        width: staticState.el!.scrollWidth,
+      };
+      document.documentElement.addEventListener('mousemove', handler.mousemove, true);
+      document.documentElement.addEventListener('mouseup', handler.mouseup, true);
+    },
+    mousemove: (e: MouseEvent) => {
+      const { clientX } = ClientZoom.getClientPosition(e);
+      staticState.move.x = clientX;
+      const durX = staticState.move.x - staticState.start.x;
+      if (!staticState.isDragging) {
+        if (Math.abs(durX) > 5) {
+          staticState.isDragging = true;
+          config?.onDragStart();
+        }
+      }
+      if (!staticState.isDragging) {
+        return;
+      }
+      staticState.el!.scrollLeft = staticState.start.left - durX;
+    },
+    mouseup: () => {
+      config?.onDragEnd();
+      document.documentElement.removeEventListener('mousemove', handler.mousemove, true);
+      document.documentElement.removeEventListener('mouseup', handler.mouseup, true);
+    },
+    onWheel: (e: WheelEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const el = e.currentTarget as HTMLElement;
+      const delta = e.deltaX + e.deltaY;
+      el.scrollLeft += delta;
+    },
+  };
+
+  effects.push(watch(() => getEl(), el => {
+    if (!!staticState.el) {
+      staticState.el.removeEventListener('mousedown', handler.mousedown);
+      staticState.el.removeEventListener('wheel', handler.onWheel);
+    }
+    staticState.el = el;
+    if (!staticState.el) {return;}
+    staticState.el.addEventListener('mousedown', handler.mousedown);
+    staticState.el.addEventListener('wheel', handler.onWheel);
+  }));
+
+  effects.push(() => {
+    if (!!staticState.el) {
+      staticState.el.removeEventListener('mousedown', handler.mousedown);
+      staticState.el.removeEventListener('wheel', handler.onWheel);
+    }
+  });
+
+  return effects.clear;
+}

package/src/packages/uses/useEdit.ts

@@ -14,7 +14,7 @@ export const EditProps = {
   multiple: { type: Boolean },                                            // 是否多选
 } as const;
 
-interface EditProvideData {
+export interface EditProvideData {
   disabled: boolean | null,
   readonly: boolean | null,
   loading: boolean | null,
@@ -74,6 +74,10 @@ export const useEdit = useFunctionWrapper(
       }
     }
 
+    onBeforeUnmount(() => {
+      editComputed.effect.stop();
+    });
+
     return {
       editState,
       editComputed,

package/src/packages/uses/useStyle.tsx

@@ -1,4 +1,4 @@
-import {computed, inject, PropType, provide} from "plain-design-composition";
+import {computed, inject, onBeforeUnmount, PropType, provide} from "plain-design-composition";
 import {useFunctionWrapper} from "./useFunctionWrapper";
 import {createEnum} from "plain-utils/utils/createEnum";
 import {ApplicationConfigurationProvider} from "../components/Application/utils/application.utils";
@@ -19,7 +19,7 @@ export const StyleProps = {
   status: { type: String as PropType<typeof ThemeStatus.TYPE> },                    //  'secondary', 'primary', 'success', 'warn', 'error'
 } as const;
 
-interface UseStyleProvideData {
+export interface UseStyleProvideData {
   shape: typeof ThemeShape.TYPE,
   size: typeof ThemeSize.TYPE,
   status?: typeof ThemeStatus.TYPE,
@@ -62,6 +62,14 @@ export const useStyle = useFunctionWrapper('style', (ctx, option: UseStyleOption
 
   provide(USE_STYLE_PROVIDER, styleComputed);
 
+  onBeforeUnmount(() => {
+    setTimeout(() => {
+      (styleComputed.value as any).ctx = null;
+      (styleComputed.value as any).parent = null;
+      styleComputed.effect.stop();
+    });
+  });
+
   return { styleComputed };
 });
 

package/src/packages/utils/ClientZoom.ts

@@ -1,8 +1,10 @@
+import {iMouseEvent} from 'plain-design-composition';
+
 export const ClientZoom = (() => {
   let zoom: '' | number = '';
   return {
-    get: () => {
-      return zoom;
+    get: (): number => {
+      return zoom === '' ? 1 : zoom;
     },
     set: (_zoom: number | null) => {
       const __zoom = _zoom == null ? '' : _zoom;
@@ -24,5 +26,25 @@ export const ClientZoom = (() => {
         };
       }
     },
+    getClientPosition: (e: iMouseEvent | MouseEvent): { clientX: number, clientY: number, offsetX: number, offsetY: number, } => {
+      const { clientX, clientY, offsetX, offsetY } = 'nativeEvent' in e ? e.nativeEvent : e;
+      return {
+        clientX: ClientZoom.formatClientValue(clientX),
+        clientY: ClientZoom.formatClientValue(clientY),
+        offsetX: ClientZoom.formatClientValue(offsetX),
+        offsetY: ClientZoom.formatClientValue(offsetY),
+      };
+    },
+    formatClientValue: (val: number) => {
+      return ClientZoom.zoomPosition(val);
+    },
+    zoomPosition(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val / zoom).toFixed(2));
+    },
+    zoomSize(val: number) {
+      const zoom = ClientZoom.get();
+      return Number((val * zoom).toFixed(2));
+    },
   };
 })();

package/src/packages/utils/ComponentUtils.ts

@@ -0,0 +1,10 @@
+export const ComponentUtils = {
+  /**
+   * 适配taro ui的一些写法
+   * @author  韦胜健
+   * @date    2024/1/3 16:48
+   */
+  getElInfo: async (selector: string) => {
+    return document.querySelector(selector)!.getBoundingClientRect();
+  },
+};

package/src/packages/utils/buildCycleIndexList.ts

@@ -0,0 +1,31 @@
+export function buildCycleIndexList({ length, current }: { length: number, current: number }) {
+
+  const sourceList = new Array(length).fill(null).map((_, index) => index);
+  const cycleIndexList = (() => {
+
+    if (sourceList.length <= 2) {
+      return sourceList;
+    }
+
+    const leftList = sourceList.slice(0, current);
+    const rightList = sourceList.slice(current + 1);
+
+    while (Math.abs(leftList.length - rightList.length) >= 2) {
+      if (leftList.length > rightList.length) {
+        rightList.push(leftList.shift()!);
+      } else {
+        leftList.unshift(rightList.pop()!);
+      }
+    }
+    return [...leftList, current, ...rightList];
+  })();
+
+  const currentIndexInCycle = cycleIndexList.indexOf(current);
+
+  const index2distance = cycleIndexList.reduce((prev, item, cycleIndex) => {
+    prev[item] = cycleIndex - currentIndexInCycle;
+    return prev;
+  }, {} as Record<number, number>);
+
+  return { cycleIndexList, currentIndexInCycle, index2distance };
+}