统一tree编辑图标

This commit is contained in:
catchonme 2019-09-11 10:07:36 +08:00
parent 310927b73f
commit 9738f1b373
9 changed files with 24 additions and 26 deletions

View File

@ -4,6 +4,8 @@
cursor: pointer;
position: relative;
top: 2px;
width: px2rem(16px);
height: px2rem(16px);
margin-left: px2rem(5px);
}
@ -88,6 +90,8 @@
cursor: pointer;
position: relative;
top: 2px;
width: px2rem(16px);
height: px2rem(16px);
margin-left: px2rem(5px);
}
}
@ -116,6 +120,8 @@
> svg {
position: relative;
top: 2px;
width: px2rem(16px);
height: px2rem(16px);
}
> span {
padding-left: px2rem(5px);

View File

@ -63,7 +63,7 @@ interface TreeSelectorProps {
editable?: boolean;
openEditDialog?: Function;
deletable?: boolean;
onDelete?: Function;
onRemove?: Function;
}
interface TreeSelectorState {
@ -343,9 +343,9 @@ export class TreeSelector extends React.Component<TreeSelectorProps, TreeSelecto
}
@autobind
handleDelete(item: Option) {
const {onDelete} = this.props;
onDelete && onDelete(item);
handleRemove(item: Option) {
const {onRemove} = this.props;
onRemove && onRemove(item);
}
@autobind
@ -561,7 +561,7 @@ export class TreeSelector extends React.Component<TreeSelectorProps, TreeSelecto
&& !editItem ? (
<span className={cx('Tree-item-icons')}>
{addable ? <Icon icon="plus" className="icon" onClick={() => this.handleAdd(item, !isLeaf)}/> : null}
{deletable ? <Icon icon="minus" className="icon" onClick={() => this.handleDelete(item)}/> : null}
{deletable ? <Icon icon="minus" className="icon" onClick={() => this.handleRemove(item)}/> : null}
{editable ? <Icon icon="pencil" className="icon" onClick={() => this.handleEdit(item)}/> : null}
</span>
) : null}
@ -570,7 +570,7 @@ export class TreeSelector extends React.Component<TreeSelectorProps, TreeSelecto
<div className={cx('Tree-item--isEdit')}>
<input defaultValue={item['label']} onChange={(e) => this.handleChangeOnEdit(item, e.currentTarget.value)}/>
<Icon icon="check" className="icon" onClick={this.handleConfirmOnEdit}/>
<Icon icon="tree-close" className="icon" onClick={this.handleCancelOnEdit}/>
<Icon icon="close" className="icon" onClick={this.handleCancelOnEdit}/>
</div>
)}
{/* 有children而且为展开状态 或者 添加child时 */}
@ -582,7 +582,7 @@ export class TreeSelector extends React.Component<TreeSelectorProps, TreeSelecto
<li>
<input onChange={(e) => this.handleChangeOnAdd(e.currentTarget.value)}/>
<Icon icon="check" className="icon" onClick={this.handleConfirmOnAdd}/>
<Icon icon="tree-close" className="icon" onClick={this.handleCancelOnAdd}/>
<Icon icon="close" className="icon" onClick={this.handleCancelOnAdd}/>
</li>
) : null}
{childrenItems}
@ -636,7 +636,7 @@ export class TreeSelector extends React.Component<TreeSelectorProps, TreeSelecto
<div className={cx('Tree-addTop-input')}>
<input onChange={(e) => this.handleChangeOnAdd(e.currentTarget.value)}/>
<Icon icon="check" className="icon" onClick={this.handleConfirmOnAdd}/>
<Icon icon="tree-close" className="icon" onClick={this.handleCancelOnAdd}/>
<Icon icon="close" className="icon" onClick={this.handleCancelOnAdd}/>
</div>
) : null}
</div>

View File

@ -33,8 +33,6 @@ import PlusIcon from '../icons/plus.svg';
import MinusIcon from '../icons/minus.svg';
// @ts-ignore
import PencilIcon from '../icons/pencil.svg';
// @ts-ignore
import TreeClose from '../icons/tree-close.svg';
// 兼容原来的用法,后续不直接试用。
// @ts-ignore
@ -84,7 +82,6 @@ registerIcon('check', CheckIcon);
registerIcon('plus', PlusIcon);
registerIcon('minus', MinusIcon);
registerIcon('pencil', PencilIcon);
registerIcon('tree-close', TreeClose);
export function Icon({
icon,

View File

@ -1,3 +1,3 @@
<svg t="1568105259329" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="983" >
<path d="M954.848 323.424q0 22.848-16 38.848l-491.424 491.424q-16 16-38.848 16t-38.848-16l-284.576-284.576q-16-16-16-38.848t16-38.848l77.728-77.728q16-16 38.848-16t38.848 16l168 168.576 374.848-375.424q16-16 38.848-16t38.848 16l77.728 77.728q16 16 16 38.848z" p-id="984" fill="#606670"></path>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3506" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M972.544 175.189333a31.658667 31.658667 0 0 1 15.701333 5.162667 31.872 31.872 0 0 1 7.296 46.976c-0.682667 0.896-1.493333 1.664-2.218666 2.474667L343.082667 876.032a32.341333 32.341333 0 0 1-37.546667 5.589333 37.504 37.504 0 0 1-8.064-6.101333L30.208 597.845333c-0.768-0.810667-1.536-1.621333-2.218667-2.517333a32.256 32.256 0 0 1 14.378667-49.749333 32 32 0 0 1 28.8 3.584c2.474667 1.664 2.944 2.304 5.12 4.309333l244.736 254.250667L948.181333 184.448l2.517334-2.261333a36.693333 36.693333 0 0 1 11.861333-6.016c2.901333-0.725333 3.669333-0.725333 6.613333-1.024l3.370667 0.042666z" p-id="3507"></path>
</svg>

Before

Width:  |  Height:  |  Size: 456 B

After

Width:  |  Height:  |  Size: 759 B

View File

@ -1,3 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="850">
<path d="M911.232 420.565333l0 109.717333q0 22.848-16 38.848t-38.848 16l-694.848 0q-22.848 0-38.848-16t-16-38.848l0-109.717333q0-22.848 16-38.848t38.848-16l694.848 0q22.848 0 38.848 16t16 38.848z" p-id="851" fill="#606670"></path>
</svg>
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1568167473830" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3585" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1024 511.994q0 9-6 15-6 5-14 5-328 0-984 0-11 0-16-7-4-7-4-13 0-7 6-14 6-7 14-7 123 0 369 0 205 0 615 0 8 0 14 6 6 6 6 15z" p-id="3586"></path></svg>

Before

Width:  |  Height:  |  Size: 374 B

After

Width:  |  Height:  |  Size: 527 B

View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="2332">
<path d="M768 0l-128 128 256 256 128-128-256-256zm-256 256l-512 512 0 256 256 0 512-512-256-256z" p-id="2333" fill="#606670"></path>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1208" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M302.026 783.023q-0.761 0-2.282 0.761 88.25 0 352.999 0 6.847 0 11.412 4.565 4.565 4.565 4.565 10.651 0 6.847-4.565 11.412-4.565 4.565-11.412 4.565-156.72 0-470.919 0 0 0-0.761 0 0 0-0.761 0-1.522 0-2.282-0.761 0 0-0.761 0 0 0-0.761 0 0 0 0 0 0 0-0.761-0.761-0.761 0-1.522-0.761-0.761 0-1.522-0.761 0 0-0.761-0.761-0.761-0.761-2.282-2.282-0.761-1.522-1.522-2.282-0.761-0.761-0.761-1.522 0 0 0-0.761 0-0.761-0.761-0.761 0-0.761 0-1.522 0-0.761 0-2.282 0 0 0 0 0 0 0-0.761 0 0 0-0.761 0 0 0-1.522 0 0 0-0.761 0 0 0-0.761 0 0 0.761 0 0 0 0-0.761 7.608-28.909 30.431-115.638 1.522-3.804 4.565-6.847 160.523-159.002 481.57-477.006 4.565-4.565 10.651-4.565 6.847 0 11.412 4.565 4.565 4.565 4.565 10.651 0 6.847-4.565 11.412-159.763 158.241-478.527 473.962-6.086 21.302-23.584 85.968 22.062-5.325 86.728-22.823 119.442-118.681 478.527-473.962 4.565-4.565 10.651-4.565 6.847 0 11.412 4.565 4.565 4.565 4.565 10.651 0 6.847-4.565 11.412-160.523 159.002-482.331 477.006-2.282 3.043-6.847 3.804zM823.918 269.5q0.761-0.761 3.043-3.043 3.043-3.043 6.086-6.847 0.761-0.761 3.043-3.043 22.823-22.062 22.823-53.254 0-31.192-22.823-53.254-22.062-22.062-53.254-22.062-31.192 0-53.254 22.062-4.565 4.565-12.933 12.933 26.627 26.627 107.269 106.508zM166.608 798.999q0 0 0 0.761 0 0 0-0.761zM166.608 796.717q0 0 0 1.522 0 0 0-1.522zM166.608 801.281q0 0 0-1.522 0 0 0 1.522zM167.369 795.195q-0.761 0-0.761 0.761 0 0 0-0.761 0 0 0.761 0z" p-id="1209"></path>
</svg>

Before

Width:  |  Height:  |  Size: 277 B

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="717">
<path d="M914.285714 420.571429v109.714285q0 22.857143-16 38.857143t-38.857143 16h-237.714285v237.714286q0 22.857143-16 38.857143t-38.857143 16H457.142857q-22.857143 0-38.857143-16t-16-38.857143v-237.714286H164.571429q-22.857143 0-38.857143-16t-16-38.857143V420.571429q0-22.857143 16-38.857143t38.857143-16h237.714285V128q0-22.857143 16-38.857143t38.857143-16h109.714286q22.857143 0 38.857143 16t16 38.857143v237.714286h237.714285q22.857143 0 38.857143 16t16 38.857143z" p-id="718" fill="#606670"></path>
<svg t="1568167179945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2417" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M925.313 493.255c0 12.866-10.421 23.285-23.285 23.285h-349.522v349.533c0 12.853-10.421 23.285-23.285 23.285s-23.285-10.432-23.285-23.285v-349.533h-349.522c-12.866 0-23.285-10.421-23.285-23.285 0-12.853 10.421-23.285 23.285-23.285h349.522v-349.522c0-12.866 10.421-23.285 23.285-23.285s23.285 10.421 23.285 23.285v349.522h349.522c12.866 0 23.285 10.432 23.285 23.285z" p-id="2418" fill="#707070"></path>
</svg>

Before

Width:  |  Height:  |  Size: 649 B

After

Width:  |  Height:  |  Size: 586 B

View File

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024" version="1.1" p-id="1775" >
<path d="M853.728 755.424q0 22.848-16 38.848l-77.728 77.728q-16 16-38.848 16t-38.848-16l-168-168-168 168q-16 16-38.848 16t-38.848-16l-77.728-77.728q-16-16-16-38.848t16-38.848l168-168-168-168q-16-16-16-38.848t16-38.848l77.728-77.728q16-16 38.848-16t38.848 16l168 168 168-168q16-16 38.848-16t38.848 16l77.728 77.728q16 16 16 38.848t-16 38.848l-168 168 168 168q16 16 16 38.848z" p-id="1776" fill="#606670"></path>
</svg>

Before

Width:  |  Height:  |  Size: 556 B

View File

@ -72,7 +72,7 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
@autobind
handleEdit(values: PlainObject) {
this.saveRemote(values, 'add');
this.saveRemote(values, 'edit');
}
@autobind
@ -109,7 +109,7 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
}
@autobind
async handleDelete(item: any) {
async handleRemove(item: any) {
const {deleteConfirmText, deleteApi, data, env} = this.props;
const ctx = createObject(data, item);
if (isEffectiveApi(deleteApi, ctx)) {
@ -237,7 +237,7 @@ export default class TreeControl extends React.Component<TreeProps, TreeState> {
editable={isEffectiveApi(editApi)}
onEdit={this.handleEdit}
openEditDialog={this.openEditDialog}
onDelete={this.handleDelete}
onRemove={this.handleRemove}
deletable={isEffectiveApi(deleteApi)}
/>
)}