style: format

Author: mengxinssfd

internal/playground/src/layouts/Error.layout.tsx

@@ -2,10 +2,10 @@ import { useRouteError } from 'react-router-dom';
 import React from 'react';
 
 export function ErrorLayout(): JSX.Element {
-  const err = useRouteError() as Error & {
+  const err = useRouteError() as {
     statusText?: string;
     status?: number;
-  };
+  } & Error;
   return (
     <React.Fragment>
       <strong>Error {err.status || 500}</strong>:{' '}

packages/components/src/collapse-transition/collapse-transition.types.ts

@@ -1,5 +1,5 @@
 import type { TransitionProps } from '../transition';
 
-export type CollapseTransitionProps = TransitionProps & {
+export type CollapseTransitionProps = {
   width?: boolean;
-};
+} & TransitionProps;

packages/components/src/collapse/collapse.types.ts

@@ -14,10 +14,10 @@ export interface CollapseProps extends PropsBase {
   size?: Size;
 }
 
-export type CollapseGroupItem = CollapseProps & {
+export type CollapseGroupItem = {
   children: React.ReactNode;
   key: string | number;
-};
+} & CollapseProps;
 
 export interface CollapseGroupProps extends Omit<PropsBase, 'children'> {
   onChange?: (item: CollapseGroupItem, index: number, active: boolean) => void;

packages/components/src/config-provider/ConfigProvider.tsx

@@ -3,9 +3,9 @@ import { ConfigContext } from './config.context';
 import React from 'react';
 
 export const ConfigProvider: React.FC<
-  Partial<Context> & {
+  {
     children: React.ReactNode;
-  }
+  } & Partial<Context>
 > = ({ locale = {}, children }) => {
   return (
     <ConfigContext.Provider value={{ locale }}>

packages/components/src/dialog/dialog.hooks.ts

@@ -14,8 +14,8 @@ export function useTransitionOrigin(props: DialogProps, show?: boolean) {
     const top = centered
       ? `calc(50% + (${-clientSize[1] / 2 + point[1]}px - ${styleTop || 0}))`
       : styleTop !== undefined
-      ? `calc(${point[1]}px - ${styleTop})`
-      : `calc(${point[1]}px - 50%)`;
+        ? `calc(${point[1]}px - ${styleTop})`
+        : `calc(${point[1]}px - 50%)`;
     return `${left} ${top}`;
   }, [clientSize, point, centered, bodyAttrs]);
 

packages/components/src/message/useMessage.tsx

@@ -6,29 +6,29 @@ import { createRoot } from 'react-dom/client';
 import { nextTick } from '@tool-pack/basic';
 
 type Res = readonly [
-  {
-    open(
-      content: MessagePushOptions['content'],
-      options?: PartialPart<Omit<MessagePushOptions, 'content'>, 'type'>,
-    ): void;
-    clear(): void;
-  } & Record<
+  Record<
     MessagePushOptions['type'],
     (
       content: MessagePushOptions['content'],
       options?: Omit<MessagePushOptions, 'content' | 'type'>,
     ) => void
-  >,
+  > & {
+    open(
+      content: MessagePushOptions['content'],
+      options?: PartialPart<Omit<MessagePushOptions, 'content'>, 'type'>,
+    ): void;
+    clear(): void;
+  },
   React.ReactElement,
 ];
 
 /**
  * @param commonOptions 可以填入公共的duration、icon、showClose参数
  */
 export function useMessageHolder(
-  commonOptions: Omit<MessagePushOptions, 'content' | 'type'> & {
+  commonOptions: {
     containerAttrs?: MessagePushOptions['attrs'];
-  } = {},
+  } & Omit<MessagePushOptions, 'content' | 'type'> = {},
 ): Res {
   const { containerAttrs, ...restOptions } = commonOptions;
   const ref = useRef<MessageQueueRef>(null);

packages/components/src/popover/hooks/useShowController.ts

@@ -45,16 +45,12 @@ export function useShowController(
     };
   }, []);
 
-  useImperativeHandle(
-    visibleControllerRef,
-    () => {
-      return {
-        hide: close,
-        show: open,
-      };
-    },
-    [],
-  );
+  useImperativeHandle(visibleControllerRef, () => {
+    return {
+      hide: close,
+      show: open,
+    };
+  }, []);
 
   // 事件触发启动
   useEffect(() => {

packages/components/src/slider/components/Handlers.tsx

@@ -69,19 +69,15 @@ export const Handlers: React.FC<Props> = (props) => {
   const tooltipVisible = tooltip === 'always' ? true : undefined;
   const tooltipDisabled = tooltip === 'always' ? false : !tooltip;
 
-  useImperativeHandle(
-    controlRef,
-    () => {
-      return {
-        focus(index: number) {
-          (
-            handlersRef.current?.children[index] as HTMLDivElement | undefined
-          )?.focus();
-        },
-      };
-    },
-    [],
-  );
+  useImperativeHandle(controlRef, () => {
+    return {
+      focus(index: number) {
+        (
+          handlersRef.current?.children[index] as HTMLDivElement | undefined
+        )?.focus();
+      },
+    };
+  }, []);
   // 拖动事件
   useEffect(() => {
     const handlersEl = handlersRef.current;

packages/components/src/switch/index.scss

@@ -110,14 +110,12 @@ $r: Name.$switch;
           // margin-left: 4px;
         }
         .#{$r}__handle::before {
-          inset-inline-end: -30%;
-          inset-inline-start: 0;
+          inset-inline: 0 -30%;
         }
       }
       &.#{$r}--checked {
         .#{$r}__handle::before {
-          inset-inline-end: 0;
-          inset-inline-start: -30%;
+          inset-inline: -30% 0;
         }
         .#{$r}__checked {
           // margin-right: 4px;

packages/components/src/tooltip/tooltip.types.ts

@@ -1,5 +1,5 @@
 import type { PopoverProps } from '../popover';
 
-export type TooltipProps = Omit<PopoverProps, 'content'> & {
+export type TooltipProps = {
   title?: Required<PopoverProps>['content'];
-};
+} & Omit<PopoverProps, 'content'>;

packages/components/src/transition-group/hooks/useChildMap.tsx

@@ -5,12 +5,17 @@ import {
   useState,
   Children,
 } from 'react';
+import type {
+  FunctionComponentElement,
+  ReactElement,
+  ReactNode,
+  Key,
+} from 'react';
 import {
   type TransitionProps,
   transitionCBAdapter,
   Transition,
 } from '~/transition';
-import type { RefAttributes, ReactElement, ReactNode, Key } from 'react';
 import type { ChildMapValue, ChildMap } from '../transition-group.types';
 import { useIsInitDep, forwardRefs } from '@pkg/shared';
 
@@ -206,7 +211,10 @@ function cloneChildren(
   return isValidElement(children)
     ? cloneElement(children as ReactElement, {
         ref: (el: HTMLElement) => {
-          forwardRefs(el, (children as RefAttributes<any>).ref);
+          forwardRefs(
+            el,
+            (children as FunctionComponentElement<HTMLElement>).ref,
+          );
           el && (childMapValue.ref = el);
         },
       })

packages/components/src/transition/hooks/useTransition.ts

@@ -16,7 +16,7 @@ export function useTransition(
   { attrs = {} }: Partial<TransitionProps> = {},
 ): React.ReactElement<HTMLElement> | undefined {
   const elRef = useForwardRef(
-    (children as React.RefAttributes<unknown>)?.ref,
+    (children as React.FunctionComponentElement<HTMLElement>)?.ref,
   ) as React.MutableRefObject<HTMLElement | null>;
 
   if (!children) elRef.current = null;
@@ -84,10 +84,10 @@ export function useTransition(
       ref: elRef,
       className,
       style,
-    } as React.HTMLAttributes<HTMLElement> &
-      React.DOMAttributes<HTMLElement> & {
-        attrs: React.HTMLAttributes<HTMLElement>;
-      };
+    } as {
+      attrs: React.HTMLAttributes<HTMLElement>;
+    } & React.HTMLAttributes<HTMLElement> &
+      React.DOMAttributes<HTMLElement>;
 
     if (typeof children.props.attrs === 'object') {
       props.attrs = { ...children.props.attrs, className, style };

packages/shared/src/utils/numToPx.ts

@@ -5,6 +5,6 @@ export function numToPx<T>(
   return value === undefined
     ? defValue
     : typeof value === 'number'
-    ? `${value}px`
-    : value;
+      ? `${value}px`
+      : value;
 }