# Action

将按钮和各种操作结合在一起，提供了一种统一的方式来处理操作。

## Action

操作的触发器，默认是 ant-design 的 `Button` 组件，并为后续的弹窗或者抽屉提供上下文。

```ts
export interface ActionProps extends ButtonProps {
  /**
   * button title
   */
  title?: string;

  /**
   * custom component, replace the default Button component
   */
  component?: string | ComponentType<any>;

  /**
   * Dynamic rendering of the opened content in conjunction with `Action.Container`.
   */
  openMode?: 'drawer' | 'modal' | 'page';
  /**
   * The size of the pop-up window, only valid when `openMode: 'modal'`
   */
  openSize?: 'small' | 'middle' | 'large';
  /**
   * Customize the position of the pop-up window
   */
  containerRefKey?: string;

  /**
   * Whether to display the popover, only valid when `openMode: 'popover'`
   */
  popover?: boolean;

  /**
   * When the button is clicked, whether a pop-up confirmation is required
   */
  confirm?: false | {
    title: string;
    content: string;
  };
}
```

### Basic Usage

- `ButtonProp`
- title

<code src="./demos/new-demos/basic.tsx"></code>

### Custom Component

- component

<code src="./demos/new-demos/custom-component.tsx"></code>

### Dynamic Props

这里使用了 `x-use-component-props` 的能力，具体可以查看 [x-use-component-props](https://docs.nocobase.com/development/client/ui-schema/what-is-ui-schema#x-component-props-%E5%92%8C-x-use-component-props)。

<code src="./demos/new-demos/dynamic-props.tsx"></code>

### Confirm

- confirm

<code src="./demos/new-demos/confirm.tsx"></code>

## Action.Link

将 `Button` 组件替换为 `a` 标签。

<code src="./demos/new-demos/action-link.tsx"></code>

## Action.Drawer

主要用于在右侧弹出一个抽屉。

```ts
interface ActionDrawer extends DrawerProps {}
```

### Basic Usage

- `DrawerProps`

<code src="./demos/new-demos/drawer-basic.tsx"></code>

### openSize

<code src="./demos/new-demos/drawer-openSize.tsx"></code>

### Footer

Footer 可以放一些按钮，比如取消或者提交等。

其 Schema `x-component` 必须为 `Action.Drawer.Footer` 组件。

<code src="./demos/new-demos/drawer-footer.tsx"></code>

### With Form

<code src="./demos/new-demos/drawer-with-form.tsx"></code>

## Action.Modal

```ts
interface ActionModal extends ModalProps {}
```

其用法和 `Action.Drawer` 类似，这里只举一个例子。

<code src="./demos/new-demos/action-modal.tsx"></code>

## Action.Popover

注意，此时 Action 的 `popover` 属性必须为 `true`。

<code src="./demos/new-demos/action-popover.tsx"></code>

## Action.Container

当根据需要动态渲染内容时，可以使用 `Action.Container` + Action `openMode` 属性动态决定。

<code src="./demos/new-demos/action-container.tsx"></code>

## ActionBar

一般用于区块的顶部的操作按钮，其内部会自动处理布局和渲染 [schema-initializer](/core/ui-schema/schema-initializer)。

```ts
import { SpaceProps } from 'antd'

interface ActionBarProps {
  layout?: 'one-column' | 'two-columns';
  style?: CSSProperties;
  className?: string;
  spaceProps?: SpaceProps;
}
```

### one-column

一列布局，全部靠左。

Schema 中的 `x-action` 是按钮的唯一标识，不能和已有的重复，用于 `ActionInitializer` 的查找和删除。

<code src="./demos/new-demos/actionbar-one-column.tsx"></code>

### two-columns

左右布局，通过 `x-align` 控制。

<code src="./demos/new-demos/actionbar-two-columns.tsx"></code>

## ActionContext

封装在 `Action` 组件内部，用于传递上下文。

```ts
export type OpenSize = 'small' | 'middle' | 'large';
export interface ActionContextProps {
  button?: React.JSX.Element;
  visible?: boolean;
  setVisible?: (v: boolean) => void;
  openMode?: 'drawer' | 'modal' | 'page';
  snapshot?: boolean;
  openSize?: OpenSize;
  /**
   * Customize the position of the pop-up window
   */
  containerRefKey?: string;
  formValueChanged?: boolean;
  setFormValueChanged?: (v: boolean) => void;
  fieldSchema?: Schema;
  drawerProps?: DrawerProps;
  modalProps?: ModalProps;
  submitted?: boolean;
  setSubmitted?: (v: boolean) => void;
}
```

假设 Action 组件无法满足需求，我们可以直接使用 ActionContext 组件进行自定义。

<code src="./demos/new-demos/action-context.tsx"></code>

## ActionSchemaToolbar

用于单个按钮渲染 [SchemaToolbar](/core/ui-schema/schema-toolbar) 和 [SchemaSettings](/core/ui-schema/schema-settings)。

<code src="./demos/new-demos/schema-toolbar.tsx"></code>

## Hooks

### useActionContext()

获取 `ActionContext` 上下文。

```ts
const { visible, setVisible, fieldSchema } = useActionContext();
```