Skip to content

README.md

Latest commit

 

History

History
146 lines (100 loc) · 4.76 KB

README.md

File metadata and controls

146 lines (100 loc) · 4.76 KB

English | 中文 | CHANGELOG

enum-plus for Ant Design

npm version license

Generate Ant Design components like Select, Menu, Table from enums

Introduction

@enum-plus/plugin-antd is a plugin for enum-plus that provides functionality to bind enums to Ant Design components. It allows you to easily convert enums into data sources for UI components like dropdowns, checkboxes, radio buttons, etc., simplifying the process of using enums in front-end applications.

Installation

npm install @enum-plus/plugin-antd

In the entry file of your application, import the @enum-plus/plugin-antd plugin and install it:

import antdPlugin from '@enum-plus/plugin-antd';
import { Enum } from 'enum-plus';

Enum.install(antdPlugin);

Plugin Options

When installing the plugin, you can pass a configuration object to set global options for the plugin:

Enum.install(antdPlugin, {
  toSelect: {
    valueField: 'id', // Sets the field representing the value in the data object generated by the toSelect method
    labelField: 'name', // Sets the field representing the label in the data object generated by the toSelect method
  },
});

API

💎   toSelect

[F]   toSelect(config?: ToSelectConfig): {value, label}[]

toSelect method returns an array of all enum members, containing label and value fields. It also supports inserting a default element at the beginning of the array, typically used as a default option for dropdown components, representing "All", "None", or "Unlimited". You can also customize this default option.

import { Select } from 'antd';

<Select options={WeekEnum.toSelect()} />;

<Select
  options={WeekEnum.toSelect({
    firstOption: { value: '', label: 'All' },
  })}
/>;

You can also set global default options by configuring labelField and valueField when installing the plugin, which modifies the data object generated by the toSelect method.

import antdPlugin from '@enum-plus/plugin-antd';
import { Enum } from 'enum-plus';

Enum.install(antdPlugin, {
  toSelect: { valueField: 'id', labelField: 'name' },
});
WeekEnum.toSelect(); // [{ id: 1, name: 'Monday' }, { id: 2, name: 'Tuesday' }]

💎   toMenu

[F]   toMenu(): { key, label }[]

Returns an array of all enum members that conform Ant Design specifications. It's used to generate the Menu, Dropdown controls, in a single line of code.

import { Menu } from 'antd';

<Menu items={WeekEnum.toMenu()} />;

The data format is:

[
  { key: 0, label: 'Sunday' },
  { key: 1, label: 'Monday' },
];

💎   toFilter

[F]   toFilter(): { text, value }[]

Returns an array of enum members that can be passed directly to the Ant Design Table component as filters property of a column. This is used to add a dropdown filter box in the table header to filter table data. The object structure follows the Ant Design data specification, with the format: { text: string, value: number|string } []

import { Table } from 'antd';

const columns = [
  {
    title: 'week',
    dataIndex: 'week',
    filters: WeekEnum.toFilter(),
  },
];
// Add column filter at table header
<Table columns={columns} />;

💎   toValueMap

[F]   toValueMap(): Record<V, { text: string }>

toValueMap method is used to generate data sources for binding the Ant Design Pro ProFormField series controls, and ProTable. This is a Map-like data structure, with the format: { [key: number|string]: { text: string } }

import { ProFormCheckbox, ProFormRadio, ProFormSelect, ProFormTreeSelect, ProTable } from '@ant-design/pro-components';

<ProFormSelect valueEnum={WeekEnum.toValueMap()} />; // Select
<ProFormCheckbox valueEnum={WeekEnum.toValueMap()} />; // Checkbox
<ProFormRadio.Group valueEnum={WeekEnum.toValueMap()} />; // Radio
<ProFormTreeSelect valueEnum={WeekEnum.toValueMap()} />; // TreeSelect
<ProTable columns={[{ dataIndex: 'week', valueEnum: WeekEnum.toValueMap() }]} />; // ProTable

The data format is:

{
  0: { text: 'Sunday' },
  1: { text: 'Monday' },
}