list now support 'readonly', forbid editting

This commit is contained in:
FateRiddle
2019-11-30 12:12:03 +08:00
parent 12a63823e9
commit bb4a83e60a
2 changed files with 75 additions and 69 deletions

View File

@@ -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>
);
}

View File

@@ -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>
);
}