-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #60 from helloqian12138/generator
refactor: split render method of components in attributes form
- Loading branch information
Showing
33 changed files
with
824 additions
and
325 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
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
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
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
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,100 @@ | ||
| --- | ||
| order: 1 | ||
| title: Refs引用 | ||
| --- | ||
|
|
||
| # Refs引用 | ||
|
|
||
| > 引用实例，利用 `refs` 引用可以在外部主动获取 `drip-table-generator` 的状态以及配置信息。 | ||
| ## 一、获取编辑器实例 | ||
|
|
||
| 利用 `react` 的 `refs` 属性可以获取表格编辑器内部开放的状态和函数从而获取 `drip-table-generator` 状态 | ||
|
|
||
| > hook写法 | ||
| ```js | ||
| const generator = useRef(null); | ||
| ``` | ||
|
|
||
| > component 写法: | ||
| ```js | ||
| const generator = React.createRef(); | ||
|
|
||
| <DripTableGenerator refs={generator}> | ||
| ``` | ||
|
|
||
| ## 二、开放函数 | ||
|
|
||
| ### getSchemaValue | ||
| - 描述: `获取最新的列表配置信息` | ||
| - 类型: `function(): DripTableSchema` | ||
| - 返回值: `DripTableSchema` | ||
| 主动调用 `drip-table-generator` 实例的 `getSchemaValue` 函数可以从组件外部获得当前用户配置好的列表 `JSON Schema` 配置。 | ||
|
|
||
| ### getDataSource | ||
| - 描述: `获取最新的列表数据信息` | ||
| - 类型: `function(): Record<string, unknown>[]` | ||
| - 返回值: `Record<string, unknown>[]` | ||
| 主动调用 `drip-table-generator` 实例的 `getDataSource` 函数可以从组件外部获得当前用户配置的表格数据。 | ||
|
|
||
|
|
||
| ## 三、代码演示 | ||
|
|
||
| ```tsx | ||
| /** | ||
| * transform: true | ||
| * defaultShowCode: true | ||
| * hideActions: ["CSB"] | ||
| */ | ||
| import React from 'react'; | ||
| import { DripTableSchema } from 'drip-table'; | ||
| import DripTableDriverAntDesign from 'drip-table-driver-antd'; | ||
| import DripTableGenerator, { DripTableGeneratorHandler } from 'drip-table-generator'; | ||
| import 'antd/dist/antd.css'; | ||
| import 'drip-table-generator/index.css'; | ||
|
|
||
| const { Row, Col, Button, message } = DripTableDriverAntDesign.components; | ||
|
|
||
| const Demo = () => { | ||
| const generator: React.MutableRefObject<DripTableGeneratorHandler | null> = React.useRef(null); | ||
|
|
||
| const getSchemaValue = () => { | ||
| const value = generator.current?.getSchemaValue(); | ||
| const aux = document.createElement('input'); | ||
| aux.setAttribute('value', value ? JSON.stringify(value) : ''); | ||
| document.body.append(aux); | ||
| aux.select(); | ||
| document.execCommand('copy'); | ||
| aux.remove(); | ||
| message.success('Schema复制成功'); | ||
| } | ||
|
|
||
| const getDataSource = () => { | ||
| const value = generator.current?.getDataSource(); | ||
| const aux = document.createElement('input'); | ||
| aux.setAttribute('value', value ? JSON.stringify(value) : ''); | ||
| document.body.append(aux); | ||
| aux.select(); | ||
| document.execCommand('copy'); | ||
| aux.remove(); | ||
| message.success('DataSource复制成功'); | ||
| } | ||
|
|
||
| return ( | ||
| <React.Fragment> | ||
| <Row style={{ borderBottom: '1px solid #2190ff', padding: '8px 0' }}> | ||
| <Button type="primary" onClick={getSchemaValue}>获取列表配置</Button> | ||
| <Button style={{ marginLeft: '12px' }} type="primary" onClick={getDataSource}>获取表格数据</Button> | ||
| </Row> | ||
| <DripTableGenerator | ||
| ref={generator} | ||
| driver={DripTableDriverAntDesign} | ||
| dataSource={[]} | ||
| /> | ||
| </React.Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| export default Demo; | ||
| ``` |
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
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
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
File renamed without changes.
File renamed without changes.
66 changes: 66 additions & 0 deletions
66
packages/drip-table-generator/src/components/CustomForm/components/auto-complete/index.tsx
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,66 @@ | ||
| /** | ||
| * This file is part of the jd-mkt5 launch. | ||
| * @link : https://ace.jd.com/ | ||
| * @author : qianjing29 (qianjing29@jd.com) | ||
| * @modifier : qianjing29 (qianjing29@jd.com) | ||
| * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd. | ||
| */ | ||
| import React from 'react'; | ||
| import { AutoComplete, Select } from 'antd'; | ||
| import { StringDataSchema } from 'drip-table'; | ||
| import { DTGComponentPropertySchema } from '@/typing'; | ||
|
|
||
| interface Props { | ||
| schema: DTGComponentPropertySchema; | ||
| value?: string; | ||
| onChange?: (value: string) => void; | ||
| onValidate?: (errorMessage: string) => void; | ||
| } | ||
|
|
||
| type LabeledValue = React.ComponentProps<typeof Select>['options']; | ||
|
|
||
| export default class AutoCompleteComponent extends React.PureComponent<Props> { | ||
| private transform(value: string) { | ||
| const transform = (this.props.schema as StringDataSchema).transform; | ||
| if (transform) { | ||
| transform.forEach((transformType) => { | ||
| if (transformType === 'trim') { | ||
| value = value.trim(); | ||
| } else if (transformType === 'toLowerCase') { | ||
| value = value.toLowerCase(); | ||
| } else if (transformType === 'toUpperCase') { | ||
| value = value.toUpperCase(); | ||
| } | ||
| }); | ||
| } | ||
| return value; | ||
| } | ||
|
|
||
| public render() { | ||
| const config = this.props.schema; | ||
| const uiProps = this.props.schema['ui:props'] || {}; | ||
|
|
||
| return ( | ||
| <AutoComplete | ||
| value={this.props.value as string} | ||
| placeholder={uiProps.placeholder as string} | ||
| disabled={uiProps.disabled as boolean} | ||
| style={{ width: 420, ...uiProps.style }} | ||
| options={uiProps.options as LabeledValue} | ||
| onChange={(value) => { | ||
| const formattedValue = this.transform(value); | ||
| this.props.onChange?.(formattedValue); | ||
| if (config.validate) { | ||
| const res = config.validate(formattedValue); | ||
| (res instanceof Promise ? res : Promise.resolve(res)) | ||
| .then((message) => { | ||
| this.props.onValidate?.(message); | ||
| return message; | ||
| }) | ||
| .catch((error) => { throw error; }); | ||
| } | ||
| }} | ||
| /> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.