amis/examples/components/Form/Custom.jsx
吴多益 430f5a1366
feat: 渲染器支持自动解析参数变量 (#3912)
* feat: 渲染器支持自动解析参数变量

* 改成只要是字符串就处理
2022-03-31 14:33:07 +08:00

233 lines
5.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from 'react';
import {FormItem, Renderer} from '../../../src/index';
@FormItem({
type: 'my-custom'
})
class MyFormItem extends React.Component {
render() {
const {value, onChange} = this.props;
return (
<div>
<p>这个是个自定义组件通过注册渲染器的方式实现</p>
<p>当前值{JSON.stringify(value)}</p>
<a
className="btn btn-default"
onClick={() => onChange(Math.round(Math.random() * 10000))}
>
随机修改
</a>
</div>
);
}
}
@Renderer({
test: /(^|\/)my\-renderer$/,
autoVar: true
})
class CustomRenderer extends React.Component {
render() {
const {tip, source} = this.props;
return source ? (
<div>{`非 FormItem 类型的渲染器注册,通过变量获取 x 的值为:${source}`}</div>
) : (
<div>{tip}</div>
);
}
}
export default {
title: '自定义组件示例',
body: [
{
type: 'form',
mode: 'horizontal',
api: '/api/mock2/form/saveForm?waitSeconds=2',
debug: true,
actions: [
{
type: 'submit',
label: '提交',
primary: true
}
],
body: [
{
label: '姓名',
type: 'text',
name: 'name'
},
{
type: 'divider'
},
{
label: '使用 custom 组件',
name: 'name',
type: 'custom',
onMount: (dom, data, onChange) => {
const button = document.createElement('button');
button.innerText = '点击修改姓名';
button.onclick = event => {
onChange('new name');
event.preventDefault();
};
dom.appendChild(button);
},
onUpdate: (dom, data) => {
console.log('数据有变化', data);
}
},
{
type: 'divider'
},
{
name: 'a',
asFormItem: true,
children: ({value, onChange}) => (
<div>
<p>这是使用 children 的方式也无需注册</p>
<p>当前值{value}</p>
<a
className="btn btn-default"
onClick={() => onChange(Math.round(Math.random() * 10000))}
>
随机修改
</a>
</div>
)
},
{
type: 'divider'
},
{
name: 'b',
type: 'my-custom',
label: '自定义FormItem'
},
{
type: 'divider'
},
{
type: 'control',
body: {
type: 'my-renderer',
source: '${x}'
}
},
{
type: 'divider'
},
{
label: '',
asFormItem: true,
children: ({render}) => (
<div>
<p>组合现有组件</p>
{render(
'formitem',
[
{
type: 'input-text',
name: 'x',
label: 'X',
value: '1'
},
{
type: 'input-text',
name: 'y',
label: 'Y'
}
],
{
formMode: 'normal'
}
)}
</div>
)
},
{
name: 'c',
label: '',
asFormItem: true,
component: ({render, value, onChange, name}) => {
function handleXChange(x) {
value = {
...value,
x
};
onChange(value);
// 一定要 return false
return false;
}
function handleYChange(y) {
value = {
...value,
y
};
onChange(value);
// 一定要 return false
return false;
}
return (
<div>
<p>组合现有组件并控制数据</p>
{render(
'item1',
{
type: 'input-text',
name: 'x',
label: 'X'
},
{
value: value?.x || '',
onChange: handleXChange
}
)}
{render(
'item2',
{
type: 'input-text',
name: 'y',
label: 'Y'
},
{
value: value?.y || '',
onChange: handleYChange
}
)}
</div>
);
}
}
]
},
{
type: 'my-renderer',
tip: '放表单外的情况'
}
]
};