@arcblock/ux 2.10.65 → 2.10.67

package/src/Dialog/confirm.jsx

@@ -10,9 +10,9 @@ import Dialog from './dialog';
  * @typedef {{
  *   title: React.ReactNode,
  *   open: boolean,
- *   children: React.ReactNode,
  *   onConfirm: Function,
  *   onCancel: Function,
+ *   children?: React.ReactNode,
  *   showCancelButton?: boolean,
  *   showCloseButton?: boolean,
  *   fullScreen?: boolean,
@@ -113,9 +113,9 @@ export default function Confirm({
 Confirm.propTypes = {
   title: PropTypes.node.isRequired,
   open: PropTypes.bool.isRequired,
-  children: PropTypes.node.isRequired,
   onConfirm: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
+  children: PropTypes.node,
   showCancelButton: PropTypes.bool,
   showCloseButton: PropTypes.bool,
   fullScreen: PropTypes.bool,

package/src/Header/{auto-hidden.jsx → auto-hidden.tsx}

@@ -1,19 +1,18 @@
-import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 
 import { styled } from '../Theme';
 
+export interface AutoHiddenProps extends BoxProps {
+  height: number | string;
+}
+
 /**
  * 一个容器组件, 当子元素 width 超出该容器时自动隐藏子元素, 必须设置明确的 height 值
  */
-function AutoHidden({ height, ...rest }) {
+function AutoHidden({ height, ...rest }: AutoHiddenProps) {
   return <Root height={height} {...rest} />;
 }
 
-AutoHidden.propTypes = {
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-};
-
 const Root = styled(Box)`
   overflow: hidden;
   &:before {

package/src/Header/{header.jsx → header.tsx}

@@ -1,34 +1,52 @@
-import PropTypes from 'prop-types';
-import { Box, Container } from '@mui/material';
+import { Box, Container, type Breakpoint } from '@mui/material';
 import { useRef, useState, useEffect } from 'react';
 import AutoHidden from './auto-hidden';
 import { styled } from '../Theme';
 
+export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** logo img/svg, 可以包裹一个 a 标签 */
+  logo?: React.ReactNode;
+  /** 相当于 Title, 可以包裹一个 a 标签 */
+  brand?: React.ReactNode;
+  /** brand 右侧的内容区域, 可显示一个 badge 或 tag */
+  brandAddon?: React.ReactNode;
+  /** brand 下方的描述 */
+  description?: React.ReactNode;
+  /** 右侧区域, 可以放置 icons/actions/login 等 */
+  addons?: React.ReactNode;
+  /** logo 左侧内容 */
+  prepend?: React.ReactNode;
+  align?: 'left' | 'right';
+  maxWidth?: Breakpoint | false;
+  // eslint-disable-next-line no-unused-vars
+  homeLink?: string | ((brandContent: React.ReactNode) => React.ReactNode);
+}
+
 /**
  * Header 组件
  * TODO: Layout/dashboard 可以复用此处的 header
  */
 function Header({
-  logo,
-  brand,
-  brandAddon,
-  description,
-  children,
-  addons,
-  prepend,
-  align,
+  logo = null,
+  brand = null,
+  brandAddon = null,
+  description = null,
+  children = null,
+  addons = null,
+  prepend = null,
+  align = 'left',
   maxWidth,
-  homeLink,
+  homeLink = '/',
   ...rest
-}) {
-  const logoRef = useRef();
+}: HeaderProps) {
+  const logoRef = useRef<HTMLDivElement>(null);
   const [brandWrapperMinWidth, setBrandWrapperMinWidth] = useState('0px');
   const style = { minWidth: brandWrapperMinWidth };
 
   useEffect(() => {
     const { searchParams } = new URL(window.location.href);
     if (searchParams.get('inviter')) {
-      window.localStorage.setItem('inviter', searchParams.get('inviter'));
+      window.localStorage.setItem('inviter', searchParams.get('inviter')!);
     }
 
     if (logoRef.current) {
@@ -78,38 +96,6 @@ function Header({
   );
 }
 
-Header.propTypes = {
-  // logo img/svg, 可以包裹一个 a 标签
-  logo: PropTypes.node,
-  // 相当于 Title, 可以包裹一个 a 标签
-  brand: PropTypes.node,
-  // brand 右侧的内容区域, 可显示一个 badge 或 tag
-  brandAddon: PropTypes.node,
-  // brand 下方的描述
-  description: PropTypes.node,
-  children: PropTypes.node,
-  // 右侧区域, 可以放置 icons/actions/login 等
-  addons: PropTypes.node,
-  // logo 左侧内容
-  prepend: PropTypes.node,
-  align: PropTypes.oneOf(['left', 'right']),
-  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false])]),
-  homeLink: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-};
-
-Header.defaultProps = {
-  logo: null,
-  brand: null,
-  brandAddon: null,
-  description: null,
-  children: null,
-  addons: null,
-  prepend: null,
-  align: 'left',
-  maxWidth: undefined,
-  homeLink: '/',
-};
-
 const Root = styled(Box)`
   position: relative;
   z-index: ${(props) => props.theme.zIndex.appBar};

package/src/Header/{responsive-header.jsx → responsive-header.tsx}

@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import PropTypes from 'prop-types';
 import { useCreation, useReactive } from 'ahooks';
 import MenuIcon from '@mui/icons-material/Menu';
 import CloseIcon from '@mui/icons-material/Close';
@@ -9,6 +8,13 @@ import useMediaQuery from '@mui/material/useMediaQuery';
 import Drawer from '@mui/material/Drawer';
 import Header from './header';
 import { styled, useTheme } from '../Theme';
+import { type HeaderProps } from './header';
+
+export interface ResponsiveHeaderProps extends Omit<HeaderProps, 'children'> {
+  menu?: React.ReactNode;
+  // eslint-disable-next-line no-unused-vars
+  children?: React.ReactNode | ((props: { isMobile: boolean; closeMenu: () => void }) => React.ReactNode);
+}
 
 /**
  * ResponsiveHeader
@@ -17,7 +23,7 @@ import { styled, useTheme } from '../Theme';
  *
  * 注意: 暂时不要通过 display: none 隐藏 logo, https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
  */
-function ResponsiveHeader({ menu, prepend, children, ...rest }) {
+function ResponsiveHeader({ menu, prepend, children, ...rest }: ResponsiveHeaderProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [drawerOpen, setDrawerOpen] = useState(false);
@@ -85,7 +91,7 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
           ModalProps={{
             disablePortal: false,
             keepMounted: true,
-            BackdropComponent: null,
+            BackdropComponent: undefined,
           }}
           anchor="top"
           sx={{
@@ -106,18 +112,6 @@ function ResponsiveHeader({ menu, prepend, children, ...rest }) {
   );
 }
 
-ResponsiveHeader.propTypes = {
-  ...Header.PropTypes,
-  // 如果是 function, 则
-  // - 会传入一个 isMobile 参数, isMobile 为 true 时, 表示 children 会显示在 menu 中, 可以根据 isMobile 参数调整要渲染的内容, 比如如果 isMobile 为 true 则使用 inline 模式的 NavMenu (适用于移动端)
-  // - 会传入一个 closeMenu 参数, 可以关闭 menu
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-};
-
-ResponsiveHeader.defaultProps = {
-  ...Header.defaultProps,
-};
-
 const Root = styled(Header)`
   .header-menu {
     display: none;

package/src/Icon/{image.jsx → image.tsx}

@@ -1,9 +1,25 @@
-import PropTypes from 'prop-types';
-
 import Img from '../Img';
 import { styled } from '../Theme';
 
-export default function ImageIcon({ name, size, alt, color, style, prefix, showBadge, ...rest }) {
+export interface ImageIconProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  size?: number;
+  color?: string;
+  alt?: string;
+  prefix?: string;
+  showBadge?: boolean;
+}
+
+export default function ImageIcon({
+  name,
+  size = 36,
+  alt = '',
+  color = '#000000',
+  prefix = '/images',
+  showBadge = false,
+  style = {},
+  ...rest
+}: ImageIconProps) {
   const src = `${prefix}/${name}-${color.replace(/^#/, '')}.png`;
   return (
     <Div style={{ width: size, height: size }}>
@@ -20,25 +36,6 @@ export default function ImageIcon({ name, size, alt, color, style, prefix, showB
   );
 }
 
-ImageIcon.propTypes = {
-  name: PropTypes.string.isRequired,
-  size: PropTypes.number,
-  color: PropTypes.string,
-  alt: PropTypes.string,
-  style: PropTypes.object,
-  prefix: PropTypes.string,
-  showBadge: PropTypes.bool,
-};
-
-ImageIcon.defaultProps = {
-  size: 36,
-  color: '#000000',
-  alt: '',
-  style: {},
-  prefix: '/images',
-  showBadge: false,
-};
-
 const Div = styled('div')`
   position: relative;
   .badge-point {

package/src/Icon/{index.jsx → index.tsx}

@@ -1,6 +1,4 @@
 import { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-
 import colors from '../Colors';
 import { styled } from '../Theme';
 import { withDeprecated } from '../Util/deprecate';
@@ -11,8 +9,27 @@ const variants = {
   solid: 'fas',
 };
 
+export interface IconProps extends React.HTMLAttributes<HTMLElement> {
+  name: string;
+  color?: string;
+  size?: number;
+  variant?: 'light' | 'regular' | 'solid';
+  rounded?: boolean;
+  forwardedRef?: React.ForwardedRef<HTMLElement>;
+}
+
 // eslint-disable-next-line react/prop-types
-function Icon({ name, color, size, variant, rounded, style, className, forwardedRef, ...rest }) {
+function Icon({
+  name,
+  color = colors.grey[900],
+  size = 24,
+  variant = 'light',
+  rounded = false,
+  style = {},
+  className = '',
+  forwardedRef,
+  ...rest
+}: IconProps) {
   const content = (
     <i
       ref={forwardedRef}
@@ -32,26 +49,7 @@ function Icon({ name, color, size, variant, rounded, style, className, forwarded
   return content;
 }
 
-Icon.propTypes = {
-  name: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  color: PropTypes.string,
-  rounded: PropTypes.bool,
-  variant: PropTypes.string,
-  size: PropTypes.number,
-  style: PropTypes.object,
-};
-
-Icon.defaultProps = {
-  rounded: false,
-  variant: 'light',
-  color: colors.grey[900],
-  className: '',
-  size: 24,
-  style: {},
-};
-
-const Span = styled('span')`
+const Span = styled('span')<{ size: number; color: string }>`
   width: ${(props) => props.size * 2}px;
   height: ${(props) => props.size * 2}px;
   border-radius: 50%;
@@ -69,6 +67,6 @@ const Span = styled('span')`
 `;
 
 export default withDeprecated(
-  forwardRef((props, ref) => <Icon {...props} forwardedRef={ref} />),
+  forwardRef<HTMLElement, IconProps>((props, ref) => <Icon {...props} forwardedRef={ref} />),
   { name: 'Icon', alternative: 'SVG icons' }
 );