feat: Update code

app/js/components/DateViewer/index.tsx

@@ -13,12 +13,7 @@ export type DateViewerProps = HTMLSpanElementProps & {
   placeholder?: React.ReactNode;
 };
 
-export default memo(function DateViewer({
-  value,
-  placeholder,
-  format = 'YYYY-MM-DD HH:mm:ss',
-  ...restProps
-}: DateViewerProps): React.ReactElement | null {
+export default memo(function DateViewer({ value, placeholder, format = 'YYYY-MM-DD HH:mm:ss', ...restProps }: DateViewerProps) {
   const date = dayjs(value);
 
   if (date.isValid()) {

app/js/components/Document/index.tsx

@@ -4,12 +4,12 @@
 
 import zhCN from 'antd/locale/zh_CN';
 import { ConfigProvider } from 'antd';
+import { memo, useMemo } from 'react';
 import { Meta } from '/js/utils/router';
 import useTitle from '/js/hooks/useTitle';
-import React, { memo, useMemo } from 'react';
 import { Outlet, useMatches } from 'react-nest-router';
 
-export default memo(function Document(): React.ReactElement {
+export default memo(function Document() {
   const matches = useMatches<Meta>();
   const title = useMemo(() => {
     let index = matches.length;

app/js/components/FallBack/Error.tsx

@@ -2,11 +2,11 @@
  * @module Error
  */
 
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { Button, Result } from 'antd';
 import { FallbackProps } from 'react-error-boundary';
 
-export default memo(function ErrorFallback({ error, resetErrorBoundary }: FallbackProps): React.ReactElement {
+export default memo(function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   if (__DEV__) {
     return (
       <Result

app/js/components/FallBack/Loading.tsx

@@ -7,7 +7,7 @@ import { Spin, SpinProps } from 'antd';
 
 export interface LoadingFallBackProps extends Pick<SpinProps, 'delay'>, Pick<React.CSSProperties, 'width' | 'height'> {}
 
-export default memo(function LoadingFallBack({ delay = 128, width, height = 360 }: LoadingFallBackProps): React.ReactElement {
+export default memo(function LoadingFallBack({ delay = 128, width, height = 360 }: LoadingFallBackProps) {
   return (
     <Spin delay={delay}>
       <div style={{ width, height }} />

app/js/components/FlexDrawer/index.tsx

@@ -3,12 +3,11 @@
  */
 
 import { isString } from '/js/utils/utils';
+import { memo, useCallback, useRef } from 'react';
 import useMediaQuery from '/js/hooks/useMediaQuery';
-import React, { memo, useCallback, useRef } from 'react';
 import { ConfigProvider, Drawer, DrawerProps } from 'antd';
 
 export interface FlexDrawerProps extends DrawerProps {
-  children?: React.ReactNode;
   breakWidth?: string | number;
   breakHeight?: string | number;
 }
@@ -24,7 +23,7 @@ export default memo(function FlexDrawer({
   breakHeight = '100vh',
   styles = { body: { position: 'relative' } },
   ...restProps
-}: FlexDrawerProps): React.ReactElement {
+}: FlexDrawerProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const isBreakWidth = useMediaQuery(`(max-width: ${isString(width) ? width : `${width}px`})`);
   const isBreakHeight = useMediaQuery(`(max-height: ${isString(height) ? height : `${height}px`})`);

app/js/components/FlexIcon/index.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { ConfigProvider } from 'antd';
 import { Icon } from '/js/utils/router';
 import { isString } from '/js/utils/utils';
-import React, { cloneElement, memo, useContext } from 'react';
+import { cloneElement, memo, useContext } from 'react';
 
 export interface FlexIconProps {
   icon?: Icon;
@@ -15,7 +15,7 @@ export interface FlexIconProps {
 
 const { ConfigContext } = ConfigProvider;
 
-export default memo(function FlexIcon({ className, icon }: FlexIconProps): React.ReactElement | null {
+export default memo(function FlexIcon({ className, icon }: FlexIconProps) {
   const { iconPrefixCls } = useContext(ConfigContext);
 
   if (icon) {

app/js/components/FlexLayout/index.tsx

@@ -9,8 +9,8 @@ import useStyles, { prefixCls } from './style';
 import useMediaQuery from '/js/hooks/useMediaQuery';
 import RouteBreadcrumb from '/js/components/RouteBreadcrumb';
 import LoadingFallBack from '/js/components/FallBack/Loading';
+import { memo, Suspense, useCallback, useRef, useState } from 'react';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
-import React, { memo, Suspense, useCallback, useRef, useState } from 'react';
 import FlexMenu, { FlexMenuProps, RenderHeader } from '/js/components/FlexMenu';
 
 const { Header, Content } = Layout;
@@ -27,7 +27,7 @@ export interface FlexLayoutProps extends Pick<FlexMenuProps, PickProps> {
   renderActionsHeader?: RenderHeader;
 }
 
-export default memo(function FlexLayout(props: FlexLayoutProps): React.ReactElement {
+export default memo(function FlexLayout(props: FlexLayoutProps) {
   const {
     menus,
     children,

app/js/components/FlexMenu/index.tsx

@@ -19,6 +19,10 @@ export interface RenderHeaderProps {
   readonly collapsedWidth: number;
 }
 
+export interface RenderHeader {
+  (props: RenderHeaderProps): React.ReactNode;
+}
+
 export interface FlexMenuProps
   extends Pick<SiderProps, 'trigger' | 'onCollapse'>,
     Omit<RouteMenuProps, 'mode' | 'inlineCollapsed'> {
@@ -31,9 +35,7 @@ export interface FlexMenuProps
 
 export type OnOpenChange = GetProp<FlexMenuProps, 'onOpenChange'>;
 
-export type RenderHeader = (props: RenderHeaderProps) => React.ReactNode;
-
-export default memo(function FlexMenu(props: FlexMenuProps): React.ReactElement {
+export default memo(function FlexMenu(props: FlexMenuProps) {
   const {
     className,
     onCollapse,

app/js/components/FormDrawer/index.tsx

@@ -13,13 +13,14 @@ type DrawerPicked =
   | 'title'
   | 'width'
   | 'height'
+  | 'children'
   | 'keyboard'
   | 'placement'
   | 'forceRender'
   | 'maskClosable'
   | 'destroyOnClose'
   | 'afterOpenChange';
-type FormOmitted = 'title' | 'onError';
+type FormOmitted = 'title' | 'onError' | 'children';
 type SubmitPicked = 'query' | 'method' | 'notify' | 'normalize' | 'onError' | 'onSuccess' | 'onComplete';
 
 function createFormId(id: string): string {
@@ -34,7 +35,6 @@ export interface FormDrawerProps<V extends Values, R>
   onOpen?: () => void;
   onClose?: () => void;
   form?: FormInstance<V>;
-  children?: React.ReactNode;
   requestInit?: Omit<Options<V, R>, SubmitPicked>;
   trigger: React.ReactElement<{ onClick?: (...args: unknown[]) => void }>;
   extra?: (submitting: boolean, form: FormInstance<V>, onClose: () => void) => React.ReactNode;
@@ -83,7 +83,7 @@ function FormDrawer<V extends Values, R>({
   extra = defaultExtra,
   maskClosable = false,
   ...restProps
-}: FormDrawerProps<V, R>): React.ReactElement {
+}: FormDrawerProps<V, R>) {
   const id = useId();
   const [wrapForm] = useForm<V>(form);
   const [open, setOpen] = useState(false);

app/js/components/KeepAlive/index.tsx

@@ -4,7 +4,7 @@
 
 import { createPortal } from 'react-dom';
 import { Outlet, useMatches, useMatchIndex } from 'react-nest-router';
-import { createContext, memo, useContext, useEffect, useMemo } from 'react';
+import React, { createContext, memo, useContext, useEffect, useMemo } from 'react';
 
 export interface KeepAliveProps {
   target: React.ReactNode;
@@ -23,7 +23,7 @@ export function useActiveChange(onChange: (active: boolean) => void): void {
   }, [active]);
 }
 
-export default memo(function KeepAlive({ target, getOutletRoot }: KeepAliveProps): React.ReactElement {
+export default memo(function KeepAlive({ target, getOutletRoot }: KeepAliveProps) {
   const matches = useMatches();
   const index = useMatchIndex();
 

app/js/components/Layout/headers/Actions.tsx

@@ -53,7 +53,7 @@ function getThemeItems(theme: Theme, onThemeClick?: MenuClickEventHandler): Menu
   ];
 }
 
-const ThemeAction = memo(function ThemeAction(): React.ReactElement {
+const ThemeAction = memo(function ThemeAction() {
   const [theme, setTheme] = useTheme();
 
   const onThemeClick = useCallback<MenuClickEventHandler>(({ key }) => {
@@ -74,7 +74,7 @@ const ThemeAction = memo(function ThemeAction(): React.ReactElement {
   );
 });
 
-const LogoutAction = memo(function LogoutAction(): React.ReactElement {
+const LogoutAction = memo(function LogoutAction() {
   const { message } = useApp();
 
   const onClick = useCallback(() => {
@@ -93,7 +93,7 @@ interface UserActionProps {
   isMobile: boolean;
 }
 
-const UserAction = memo(function UserAction({ isMobile }: UserActionProps): React.ReactElement {
+const UserAction = memo(function UserAction({ isMobile }: UserActionProps) {
   const [theme, setTheme] = useTheme();
 
   const onThemeClick = useCallback<MenuClickEventHandler>(({ key }) => {
@@ -142,7 +142,7 @@ const UserAction = memo(function UserAction({ isMobile }: UserActionProps): Reac
   );
 });
 
-export default memo(function ActionsHeader({ isMobile }: RenderHeaderProps): React.ReactElement {
+export default memo(function ActionsHeader({ isMobile }: RenderHeaderProps) {
   const [scope, render] = useStyles();
 
   return render(

app/js/components/Layout/headers/Logo.tsx

@@ -2,15 +2,15 @@
  * @module Logo
  */
 
-import React, { memo } from 'react';
+import { memo } from 'react';
 import classNames from 'classnames';
 import Link from '/js/components/Link';
 import { RenderHeaderProps } from '/js/components/FlexMenu';
 import useStyles, { prefixCls } from '/js/components/Layout/style/logo';
 
 import logo from '/images/logo.svg?url';
 
-export default memo(function LogoHeader({ collapsed }: RenderHeaderProps): React.ReactElement {
+export default memo(function LogoHeader({ collapsed }: RenderHeaderProps) {
   const [scope, render] = useStyles();
 
   return render(

app/js/components/Layout/index.tsx

@@ -7,16 +7,16 @@ import { Route } from '/js/utils/router';
 import useTheme from '/js/hooks/useTheme';
 import { MenuType, Meta } from '/js/router';
 import ActionsHeader from './headers/Actions';
+import { memo, useEffect, useState } from 'react';
 import FlexLayout from '/js/components/FlexLayout';
 import { RenderHeader } from '/js/components/FlexMenu';
-import React, { memo, useEffect, useState } from 'react';
 import { Filter, MenuItem, parse } from '/js/utils/menus';
 import { Outlet, useOutletContext } from 'react-nest-router';
 
 const renderLogoHeader: RenderHeader = props => <LogoHeader {...props} />;
 const renderActionsHeader: RenderHeader = props => <ActionsHeader {...props} />;
 
-export default memo(function Layout(): React.ReactElement {
+export default memo(function Layout() {
   const [theme] = useTheme();
   const routes = useOutletContext<Route<Meta>[]>();
   const [menus, setMenus] = useState<MenuItem[]>([]);

app/js/components/Link/index.tsx

@@ -2,33 +2,33 @@
  * @module index
  */
 
+import { GetProp } from 'antd';
 import { isFunction } from '/js/utils/utils';
 import useLatestRef from '/js/hooks/useLatestRef';
 import React, { memo, useCallback, useMemo } from 'react';
 import { To, useNavigate, useResolve } from 'react-nest-router';
 
 type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
-type ClickEvent = React.MouseEvent<HTMLAnchorElement, MouseEvent>;
 
 export interface LinkProps<S> extends Omit<AnchorProps, 'href'> {
   href: To;
   replace?: boolean;
   state?: S | (() => S);
 }
 
-function isModifiedEvent(e: ClickEvent) {
+function isModifiedEvent(e: React.MouseEvent): boolean {
   return !!(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey);
 }
 
-function Link<S>(props: LinkProps<S>): React.ReactElement {
+function Link<S>(props: LinkProps<S>) {
   const { href: to, state, replace, children, onClick, ...restProps } = props;
 
   const resolve = useResolve();
   const navigate = useNavigate();
   const propsRef = useLatestRef(props);
   const href = useMemo(() => resolve(to), [to]);
 
-  const onLinkClick = useCallback((e: ClickEvent) => {
+  const onLinkClick = useCallback<GetProp<AnchorProps, 'onClick'>>(e => {
     const { current: props } = propsRef;
     const { target = '_self', onClick } = props;
 

app/js/components/NumericViewer/index.tsx

@@ -2,14 +2,14 @@
  * @module index
  */
 
-import React, { memo } from 'react';
+import { memo } from 'react';
 import { formatThousands } from '/js/utils/utils';
 
 export interface NumericViewerProps {
   precision?: number;
   value: string | number | undefined;
 }
 
-export default memo(function NumericViewer({ value, precision }: NumericViewerProps): React.ReactElement {
+export default memo(function NumericViewer({ value, precision }: NumericViewerProps) {
   return <>{formatThousands(value, precision)}</>;
 });

app/js/components/Paper/index.tsx

@@ -11,7 +11,7 @@ export interface PaperProps {
   children?: React.ReactNode;
 }
 
-export default memo(function Paper({ className, children }: PaperProps): React.ReactElement {
+export default memo(function Paper({ className, children }: PaperProps) {
   const [scope, render] = useStyles();
 
   return render(<div className={classNames(scope, prefixCls, className)}>{children}</div>);

app/js/components/RouteBreadcrumb/index.tsx

@@ -61,11 +61,7 @@ function getBreadcrumbItems(matches: IRoute[], showIcon: boolean): BreadcrumbIte
   return items;
 }
 
-export default memo(function RouteBreadcrumb({
-  style,
-  className,
-  icon: showIcon = true
-}: RouteBreadcrumbProps): React.ReactElement {
+export default memo(function RouteBreadcrumb({ style, className, icon: showIcon = true }: RouteBreadcrumbProps) {
   const [scope, render] = useStyles();
   const matches = useMatches() as IRoute[];
   const items = useMemo(() => getBreadcrumbItems(matches, showIcon), [matches, showIcon]);

app/js/components/RouteMenu/index.tsx

@@ -30,7 +30,7 @@ export interface RouteMenuProps extends Omit<MenuProps, OmitProps> {
   onOpenChange?: (openKeys: string[], cachedOpenKeys: string[]) => void;
 }
 
-export default memo(function RouteMenu(props: RouteMenuProps): React.ReactElement {
+export default memo(function RouteMenu(props: RouteMenuProps) {
   const { inlineCollapsed } = props;
   const { items, className, renderItem, rootClassName, defaultOpenKeys, ...restProps } = props;
 

app/js/components/RouteMenu/useItems.tsx

@@ -10,8 +10,11 @@ import { GetProp, MenuProps } from 'antd';
 import { MenuItem } from '/js/utils/menus';
 import FlexIcon from '/js/components/FlexIcon';
 
+export interface RenderItem {
+  (item: MenuItem): React.ReactNode;
+}
+
 export type Item = GetProp<MenuProps, 'items'>[0];
-export type RenderItem = (item: MenuItem) => React.ReactNode;
 
 function renderContent(item: MenuItem, renderItem?: RenderItem): React.ReactNode {
   if (renderItem) {

app/js/components/RouteTabs/index.tsx

@@ -8,7 +8,7 @@ import Link from '/js/components/Link';
 import { IRoute } from '/js/utils/router';
 import FlexIcon from '/js/components/FlexIcon';
 import useStyles, { prefixCls } from './style';
-import React, { memo, Suspense, useMemo } from 'react';
+import { memo, Suspense, useMemo } from 'react';
 import { ConfigProvider, Tabs, TabsProps } from 'antd';
 import LoadingFallBack from '/js/components/FallBack/Loading';
 import { Outlet, useMatch, useMatches, useMatchIndex } from 'react-nest-router';
@@ -38,7 +38,7 @@ export default memo(function RouteTabs({
   tabBarGutter = 16,
   icon: showIcon = true,
   ...restProps
-}: RouteTabsProps): React.ReactElement {
+}: RouteTabsProps) {
   const index = useMatchIndex();
   const [scope, render] = useStyles();
   const match = useMatch() as IRoute<Meta>;

app/js/components/ViewDrawer/index.tsx

@@ -9,7 +9,6 @@ import React, { cloneElement, memo, useCallback, useEffect, useMemo, useState }
 export interface ViewDrawerProps extends Omit<FlexDrawerProps, 'open' | 'extra' | 'footer'> {
   onOpen?: () => void;
   onClose?: () => void;
-  children?: React.ReactNode;
   extra?: (onClose: () => void) => React.ReactNode;
   footer?: (onClose: () => void) => React.ReactNode;
   trigger: React.ReactElement<{ onClick?: (...args: unknown[]) => void }>;
@@ -31,7 +30,7 @@ export default memo(function ViewDrawer({
   children,
   extra = defaultExtra,
   ...restProps
-}: ViewDrawerProps): React.ReactElement {
+}: ViewDrawerProps) {
   const [open, setOpen] = useState(false);
 
   const onCloseHandler = useCallback(() => {