-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
244 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
--- | ||
title: Quick Start | ||
group: | ||
title: Getting Started Quickly | ||
order: 1 | ||
nav: | ||
title: Documentation | ||
order: 1 | ||
--- | ||
|
||
# Quick Start | ||
|
||
ProEditor is positioned as an editor UI framework, aiming to provide rich and easy-to-use basic components and atomic capabilities for the "editing" scenario. | ||
|
||
## Installation | ||
|
||
```bash | ||
# @ant-design/pro-editor is based on antd and antd-style, and needs to be installed in the project | ||
$ npm install antd antd-style -S | ||
$ npm install @ant-design/pro-editor -S | ||
``` | ||
|
||
### Using Components | ||
|
||
ProEditor provides a series of components optimized for the "editing" scenario, including but not limited to "SortableList", "SortableTree", "DraggablePanel", "Highlight", "ContextMenu", and more. For complete component documentation, please refer to: [Basic Components](/components/action-icon) | ||
|
||
Below is a typical array object editing scenario. Our provided ColumnList can help developers quickly implement a high-quality array editing component. | ||
|
||
<code src="./demos/ColumnList/index.tsx" ></code> | ||
|
||
### Component Assembler | ||
|
||
Initially, ProEditor was positioned as a visual configuration framework for components. Therefore, ProEditor provides a series of containers and atomic components for visual component assembly, helping developers quickly implement a visual configuration component. | ||
|
||
See: [ProEditor Assembler Container](/pro-editor) | ||
|
||
## Engineering Capabilities | ||
|
||
### On-Demand Loading | ||
|
||
ProEditor supports tree shaking based on ES modules by default. Directly importing `import { ActionIcon } from '@ant-design/pro-editor';` will achieve on-demand loading. | ||
|
||
### TypeScript | ||
|
||
ProEditor is developed using TypeScript, thus providing complete type definitions. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
--- | ||
title: NextJs | ||
group: | ||
title: Framework Usage | ||
order: 5 | ||
--- | ||
|
||
## Integration with Next.js | ||
|
||
[Next.js](https://nextjs.org/) is a very popular development framework in the community, and integrating ProEditor with Next.js is very easy. | ||
|
||
```bash | ||
npx create-next-app@latest | ||
``` | ||
|
||
### Dependency Installation | ||
|
||
```bash | ||
npm install @ant-design/pro-editor --save | ||
or | ||
pnpm install @ant-design/pro-editor | ||
``` | ||
|
||
Since Next.js is a CSR/SSR isomorphic React framework, and ProChat only provides esm modules by default, after installation, you need to add relevant dependencies to `transpilePackages` in `next.config.(m)js`: | ||
|
||
> In the latest version of NextJS 14 AppRoute, this configuration is no longer needed | ||
```js | ||
/** @type {import('next').NextConfig} */ | ||
const nextConfig = { | ||
// Convert pure esm modules to node-compatible modules | ||
transpilePackages: ['@ant-design/pro-editor'], | ||
}; | ||
``` | ||
|
||
### Usage | ||
|
||
Taking the `SortableList` component as an example, if it is a project created by the default scaffolding, you can simply write the following code in `page.js|tsx` to see it in action. | ||
|
||
```js | ||
'use client'; | ||
import type { ColumnItemList } from '@ant-design/pro-editor'; | ||
import { ColumnList } from '@ant-design/pro-editor'; | ||
import { useState } from 'react'; | ||
|
||
const tableColumnValueOptions = [ | ||
// ... (omitted for brevity) | ||
]; | ||
|
||
type SchemaItem = { | ||
title: string, | ||
valueType: string, | ||
dataIndex: string, | ||
}; | ||
|
||
const INIT_VALUES = [ | ||
// ... (omitted for brevity) | ||
]; | ||
|
||
const columns: ColumnItemList<SchemaItem> = [ | ||
// ... (omitted for brevity) | ||
]; | ||
|
||
export default () => { | ||
const [value, setValue] = useState(INIT_VALUES); | ||
|
||
return ( | ||
<ColumnList | ||
columns={columns} | ||
value={value} | ||
onChange={(values) => { | ||
setValue(values); | ||
console.log('onChange', values); | ||
}} | ||
/> | ||
); | ||
}; | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
--- | ||
title: Umi | ||
group: | ||
title: Framework Usage | ||
order: 5 | ||
--- | ||
|
||
## Integration with Umi | ||
|
||
In the development scene of the middle and back office, [umi](https://umijs.org/) is a very good choice. Integrating `ProEditor` with `umi` is very easy. After installation, you can use it directly. | ||
|
||
```bash | ||
npx create-umi@latest | ||
or | ||
yarn create umi | ||
pnpm dlx create-umi@latest | ||
``` | ||
|
||
### Dependency Installation | ||
|
||
After creating it | ||
|
||
```bash | ||
npm install @ant-design/pro-editor --save | ||
or | ||
pnpm install @ant-design/pro-editor | ||
``` | ||
|
||
### Usage | ||
|
||
```js | ||
import type { ColumnItemList } from '@ant-design/pro-editor'; | ||
import { ColumnList } from '@ant-design/pro-editor'; | ||
import { useState } from 'react'; | ||
|
||
const tableColumnValueOptions = [ | ||
{ label: 'index', value: 'index' }, | ||
{ label: 'indexBorder', value: 'indexBorder' }, | ||
{ label: 'digit', value: 'digit' }, | ||
{ label: 'password', value: 'password' }, | ||
{ label: 'money', value: 'money' }, | ||
{ label: 'text', value: 'text' }, | ||
{ label: 'textarea', value: 'textarea' }, | ||
{ label: 'date', value: 'date' }, | ||
{ label: 'option', value: 'option' }, | ||
{ label: 'dateTime', value: 'dateTime' }, | ||
{ label: 'dateWeek', value: 'dateWeek' }, | ||
{ label: 'dateMonth', value: 'dateMonth' }, | ||
{ label: 'dateQuarter', value: 'dateQuarter' }, | ||
{ label: 'dateYear', value: 'dateYear' }, | ||
{ label: 'dateRange', value: 'dateRange' }, | ||
{ label: 'dateTimeRange', value: 'dateTimeRange' }, | ||
{ label: 'time', value: 'time' }, | ||
{ label: 'timeRange', value: 'timeRange' }, | ||
{ label: 'select', value: 'select' }, | ||
{ label: 'checkbox', value: 'checkbox' }, | ||
{ label: 'rate', value: 'rate' }, | ||
{ label: 'radio', value: 'radio' }, | ||
{ label: 'radioButton', value: 'radioButton' }, | ||
{ label: 'progress', value: 'progress' }, | ||
{ label: 'percent', value: 'percent' }, | ||
{ label: 'second', value: 'second' }, | ||
{ label: 'avatar', value: 'avatar' }, | ||
{ label: 'code', value: 'code' }, | ||
{ label: 'switch', value: 'switch' }, | ||
{ label: 'fromNow', value: 'fromNow' }, | ||
{ label: 'image', value: 'image' }, | ||
{ label: 'jsonCode', value: 'jsonCode' }, | ||
{ label: 'color', value: 'color' }, | ||
]; | ||
|
||
type SchemaItem = { | ||
title: string, | ||
valueType: string, | ||
dataIndex: string, | ||
}; | ||
|
||
const INIT_VALUES = [ | ||
{ title: 'Index', valueType: 'indexBorder', dataIndex: 'index' }, | ||
{ | ||
title: 'Enterprise', | ||
valueType: 'text', | ||
dataIndex: 'name', | ||
}, | ||
{ title: 'Company', valueType: 'text', dataIndex: 'authCompany' }, | ||
]; | ||
|
||
const columns: ColumnItemList<SchemaItem> = [ | ||
{ | ||
title: 'Title', | ||
dataIndex: 'title', | ||
type: 'input', | ||
}, | ||
{ | ||
title: 'ValueType', | ||
dataIndex: 'valueType', | ||
type: 'select', | ||
options: tableColumnValueOptions, | ||
}, | ||
{ | ||
title: 'DataIndex', | ||
dataIndex: 'dataIndex', | ||
type: 'select', | ||
}, | ||
]; | ||
|
||
export default () => { | ||
const [value, setValue] = useState(INIT_VALUES); | ||
|
||
return ( | ||
<ColumnList | ||
columns={columns} | ||
value={value} | ||
onChange={(values) => { | ||
setValue(values); | ||
console.log('onChange', values); | ||
}} | ||
/> | ||
); | ||
}; | ||
``` |