mirror of
https://github.com/zhigang1992/form-render.git
synced 2026-06-16 18:40:04 +08:00
list now support 'readonly', forbid editting
This commit is contained in:
@@ -51,7 +51,7 @@ class ListItem extends React.Component {
|
||||
render() {
|
||||
const { item, p = {}, name, fold } = this.props;
|
||||
const descProps = { ...p, index: name };
|
||||
const { options = {} } = p;
|
||||
const { options = {}, readonly } = p;
|
||||
const { foldable: canFold, hideDelete } = options;
|
||||
// 只有当items为object时才做收起(fold)处理
|
||||
const isObj = p.schema.items && p.schema.items.type == 'object';
|
||||
@@ -72,8 +72,8 @@ class ListItem extends React.Component {
|
||||
style={{ position: 'absolute', top: 12, right: 36 }}
|
||||
/>
|
||||
)}
|
||||
<DragHandle />
|
||||
{!((canFold && fold) || hideDelete) && (
|
||||
{!readonly && <DragHandle />}
|
||||
{!((canFold && fold) || hideDelete || readonly) && (
|
||||
<Button
|
||||
className="self-end"
|
||||
type="dashed"
|
||||
@@ -105,6 +105,7 @@ class FieldList extends React.Component {
|
||||
|
||||
render() {
|
||||
const { p, foldList = [], toggleFoldItem } = this.props;
|
||||
const { readonly } = p;
|
||||
const list = p.value || [];
|
||||
return (
|
||||
<ul className="pl0 ma0">
|
||||
@@ -127,37 +128,39 @@ class FieldList extends React.Component {
|
||||
})}
|
||||
/>
|
||||
))}
|
||||
<div className="tr">
|
||||
<Button className="" icon="file-add" onClick={this.handleAddClick}>
|
||||
新增
|
||||
</Button>
|
||||
{p.extraButtons &&
|
||||
p.extraButtons.length > 0 &&
|
||||
p.extraButtons.map(item => (
|
||||
<Button
|
||||
className="ml2"
|
||||
icon={item.icon}
|
||||
onClick={() => {
|
||||
if (item.callback === 'clearAll') {
|
||||
p.onChange(p.name, []);
|
||||
return;
|
||||
}
|
||||
if (item.callback === 'copyLast') {
|
||||
const value = [...p.value];
|
||||
const lastIndex = value.length - 1;
|
||||
value.push(lastIndex > -1 ? value[lastIndex] : p.newItem);
|
||||
p.onChange(p.name, value);
|
||||
return;
|
||||
}
|
||||
if (typeof window[item.callback] === 'function') {
|
||||
window[item.callback].call(); // eslint-disable-line
|
||||
}
|
||||
}}
|
||||
>
|
||||
{item.text}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
{!readonly && (
|
||||
<div className="tr">
|
||||
<Button className="" icon="file-add" onClick={this.handleAddClick}>
|
||||
新增
|
||||
</Button>
|
||||
{p.extraButtons &&
|
||||
p.extraButtons.length > 0 &&
|
||||
p.extraButtons.map(item => (
|
||||
<Button
|
||||
className="ml2"
|
||||
icon={item.icon}
|
||||
onClick={() => {
|
||||
if (item.callback === 'clearAll') {
|
||||
p.onChange(p.name, []);
|
||||
return;
|
||||
}
|
||||
if (item.callback === 'copyLast') {
|
||||
const value = [...p.value];
|
||||
const lastIndex = value.length - 1;
|
||||
value.push(lastIndex > -1 ? value[lastIndex] : p.newItem);
|
||||
p.onChange(p.name, value);
|
||||
return;
|
||||
}
|
||||
if (typeof window[item.callback] === 'function') {
|
||||
window[item.callback].call(); // eslint-disable-line
|
||||
}
|
||||
}}
|
||||
>
|
||||
{item.text}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ class ListItem extends React.Component {
|
||||
render() {
|
||||
const { item, p = {}, name, fold } = this.props;
|
||||
const descProps = { ...p, index: name };
|
||||
const { options = {} } = p;
|
||||
const { options = {}, readonly } = p;
|
||||
const { foldable: canFold, hideDelete } = options;
|
||||
// 只有当items为object时才做收起(fold)处理
|
||||
const isObj = p.schema.items && p.schema.items.type == 'object';
|
||||
@@ -69,8 +69,8 @@ class ListItem extends React.Component {
|
||||
style={{ position: 'absolute', top: 12, right: 36 }}
|
||||
/>
|
||||
)}
|
||||
<DragHandle />
|
||||
{!((canFold && fold) || hideDelete) && (
|
||||
{!readonly && <DragHandle />}
|
||||
{!((canFold && fold) || hideDelete || readonly) && (
|
||||
<Button
|
||||
className="self-end"
|
||||
onClick={() => {
|
||||
@@ -100,6 +100,7 @@ class FieldList extends React.Component {
|
||||
|
||||
render() {
|
||||
const { p, foldList = [], toggleFoldItem } = this.props;
|
||||
const { readonly } = p;
|
||||
const list = p.value || [];
|
||||
return (
|
||||
<ul className="pl0 ma0">
|
||||
@@ -122,38 +123,40 @@ class FieldList extends React.Component {
|
||||
})}
|
||||
/>
|
||||
))}
|
||||
<div className="tr">
|
||||
<Button className="" onClick={this.handleAddClick}>
|
||||
<Icon type="add" />
|
||||
新增
|
||||
</Button>
|
||||
{p.extraButtons &&
|
||||
p.extraButtons.length > 0 &&
|
||||
p.extraButtons.map(item => (
|
||||
<Button
|
||||
className="ml2"
|
||||
onClick={() => {
|
||||
if (item.callback === 'clearAll') {
|
||||
p.onChange(p.name, []);
|
||||
return;
|
||||
}
|
||||
if (item.callback === 'copyLast') {
|
||||
const value = [...p.value];
|
||||
const lastIndex = value.length - 1;
|
||||
value.push(lastIndex > -1 ? value[lastIndex] : p.newItem);
|
||||
p.onChange(p.name, value);
|
||||
return;
|
||||
}
|
||||
if (typeof window[item.callback] === 'function') {
|
||||
window[item.callback].call(); // eslint-disable-line
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon type={item.icon} />
|
||||
{item.text}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
{!readonly && (
|
||||
<div className="tr">
|
||||
<Button className="" onClick={this.handleAddClick}>
|
||||
<Icon type="add" />
|
||||
新增
|
||||
</Button>
|
||||
{p.extraButtons &&
|
||||
p.extraButtons.length > 0 &&
|
||||
p.extraButtons.map(item => (
|
||||
<Button
|
||||
className="ml2"
|
||||
onClick={() => {
|
||||
if (item.callback === 'clearAll') {
|
||||
p.onChange(p.name, []);
|
||||
return;
|
||||
}
|
||||
if (item.callback === 'copyLast') {
|
||||
const value = [...p.value];
|
||||
const lastIndex = value.length - 1;
|
||||
value.push(lastIndex > -1 ? value[lastIndex] : p.newItem);
|
||||
p.onChange(p.name, value);
|
||||
return;
|
||||
}
|
||||
if (typeof window[item.callback] === 'function') {
|
||||
window[item.callback].call(); // eslint-disable-line
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon type={item.icon} />
|
||||
{item.text}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user