nodejs 014: React.FC 与 Evergreen(常青树) React UI 框架的的Dialog组件

React.FC

• React.FC是React中用于定义函数组件“Function Component”的类型。它代表，可以帮助你在TypeScript中提供类型检查和自动补全。使用React.FC时，可以明确指定组件的props类型，并且它会自动推导children属性。下面是一个使用 React.FC 定义函数组件的示例：

import React from 'react';

interface MyComponentProps {
  title: string;
  count: number;
}

// 用React.FC声明一个函数组件
const MyComponent: React.FC<MyComponentProps> = ({ title, count, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>Count: {count}</p>
      {children}
    </div>
  );
};

// 使用示例
const App: React.FC = () => {
  return (
    <MyComponent title="Hello World" count={5}>
      <p>This is a child element!</p>
    </MyComponent>
  );
};

export default App;

• 使用效果：
  

Evergreen(常青树) 的Dialog组件声明

• Evergreen代码中export declare const Dialog: React.FC<DialogProps> 定义了一个 React 函数组件 Dialog，该组件使用 DialogProps 接口定义的属性。这使得开发者在使用该组件时，可以根据需要传入相应的属性，以实现不同的功能和样式。

// 这段代码定义了一个 TypeScript 接口 `DialogProps`，它描述了一个对话框（Dialog）组件的所有可配置属性。
export interface DialogProps {
  // children: 可以是字符串、React 节点或一个接受 `{ close }` 参数的函数。若为字符串，则用 `<Paragraph />` 包裹
  children?: React.ReactNode | (({ close }: { close: () => void }) => void)
  
  // The intent of the Dialog. Used for the button. Defaults to none.
  intent?: IntentTypes
  
  // 一个布尔值，指示对话框是否显示。默认为 `false`
  isShown?: boolean
  
  // 对话框的标题 Title of the Dialog. Titles should use Title Case.
  title?: React.ReactNode
  
  // When true, the header with the title and close icon button is shown.Defaults to true.
  hasHeader?: boolean
  
  // 自定义的头部内容，可以是 React 节点或接受 `{ close }` 参数的函数。
  header?: React.ReactNode | (({ close }: { close: () => void }) => void)
  
  // When true, the footer with the cancel and confirm button is shown.Defaults to true
  hasFooter?: boolean
  
  // You can override the default footer with your own custom component.
  footer?: React.ReactNode | (({ close }: { close: () => void }) => void)
  
  // When true, the cancel button is shown. Defaults to true.
  hasCancel?: boolean
  
  // When true, the close button is shown. Defaults to true.
  hasClose?: boolean
  
  // 当退出过渡完成时调用的函数。
  onCloseComplete?: () => void
  
  // **onOpenComplete**: 当进入过渡完成时调用的函数。
  onOpenComplete?: () => void
  
  // **onConfirm**: 当确认按钮被点击时调用的函数，传入一个 `close` 函数，默认行为是关闭对话框。
  onConfirm?: (close: () => void) => void
  
  // **confirmLabel**: 确认按钮的标签，默认为“Confirm”。
  confirmLabel?: string
  
  // When true, the confirm button is set to loading. Defaults to false.
  isConfirmLoading?: boolean
  
  // When true, the confirm button is set to disabled. Defaults to false.
  isConfirmDisabled?: boolean
  
  // Function that will be called when the cancel button is clicked.This closes the Dialog by default./
  onCancel?: (close: () => void) => void
  
  // **cancelLabel**: 取消按钮的标签，默认为“Cancel”。
  cancelLabel?: string
  
  // Boolean indicating if clicking the overlay should close the overlay.Defaults to true.
  shouldCloseOnOverlayClick?: boolean
  
  // Boolean indicating if pressing the esc key should close the overlay.Defaults to true.
  shouldCloseOnEscapePress?: boolean
  
  // Width of the Dialog.
  width?: string | number
  
  // The space above the dialog. 
  topOffset?: string | number
  
  // The space on the left/right sides of the dialog when there isn't enough horizontal space available on screen.
  sideOffset?: string | number
  
  // The min height of the body content.Makes it less weird when only showing little content.
  minHeightContent?: string | number
  
  // Props that are passed to the dialog container.
  containerProps?: React.ComponentProps<typeof Pane>
  
  // Props that are passed to the content container.
  contentContainerProps?: React.ComponentProps<typeof Pane>
  
  // Whether or not to prevent scrolling in the outer body. Defaults to false.
  preventBodyScrolling?: boolean
}

export declare const Dialog: React.FC<DialogProps>

Dialog组件示例代码

• https://evergreen.segment.com/components/dialog

import React from "react";
import ReactDOM from "react-dom";
import { Pane, Dialog, Button } from "evergreen-ui";

function DefaultDialogExample() {
  //使用数组解构赋值来定义一个状态变量和更新函数
  const [isShown, setIsShown] = React.useState(false);

  return (
    <Pane>
      <Dialog
        isShown={isShown}
        title="Dialog title"
        onCloseComplete={() => {
          setIsShown(false);
        }}
        confirmLabel="Custom Label"
      >
        Dialog content
      </Dialog>

      <Button
        onClick={() => {
          setIsShown(true);
        }}
      >
        Show Dialog
      </Button>
    </Pane>
  );
}

ReactDOM.render(<DefaultDialogExample />, document.getElementById("root"));

CG

• UI-Box是一个基于React的低级别组件库。Evergreen(常青树) 的Button等组件通过BoxComponent实现，代码需要 import { extractStyles as boxExtractStyles, BoxProps, BoxComponent, PolymorphicBoxProps } from 'ui-box'