feat(@omiu/tree): support hash route
This commit is contained in:
dntzhang
parent
37aa20ce0a
commit
4cc83770ca
|
|
@ -36,9 +36,10 @@
|
|||
label: '二级 1-1',
|
||||
children: [{
|
||||
sign: 'M',
|
||||
label: '三级 1-1-1',
|
||||
label: '三级 1-1-1(hash改变)',
|
||||
icon: 'accessible-rounded',
|
||||
color: 'red'
|
||||
color: 'red',
|
||||
href: '#abc',
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
|
|
@ -62,8 +63,10 @@
|
|||
label: '二级 3-1',
|
||||
icon: 'accessible-rounded',
|
||||
children: [{
|
||||
label: '三级 3-1-1',
|
||||
icon: 'accessible-rounded'
|
||||
label: '三级 3-1-1(链接跳转)',
|
||||
icon: 'accessible-rounded',
|
||||
href: 'https://tencent.github.io/omi/',
|
||||
target: '_blank',
|
||||
}]
|
||||
}, {
|
||||
label: '二级 3-2',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@omiu/tree",
|
||||
"version": "0.0.11",
|
||||
"version": "0.0.12",
|
||||
"description": "Components that show tree nested data structures.",
|
||||
"docsExtend": {
|
||||
"cnName": "树形控件",
|
||||
|
|
|
|||
|
|
@ -568,3 +568,11 @@
|
|||
|
||||
.o-tree-node__label.is-editing {
|
||||
text-overflow: unset; }
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
color: inherit; }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/**
|
||||
* @omiu/tree v0.0.11 http://omijs.org
|
||||
* @omiu/tree v0.0.12 http://omijs.org
|
||||
* Front End Cross-Frameworks Framework.
|
||||
* By dntzhang https://github.com/dntzhang
|
||||
* Github: https://github.com/Tencent/omi
|
||||
|
|
@ -626,6 +626,14 @@ var css = `:host {
|
|||
|
||||
.o-tree-node__label.is-editing {
|
||||
text-overflow: unset; }
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
color: inherit; }
|
||||
`
|
||||
|
||||
|
||||
|
|
@ -727,7 +735,8 @@ var Tree = /** @class */ (function (_super) {
|
|||
this.prevSelectedNode = node;
|
||||
}
|
||||
this._tempTagName = 'o-icon-' + node.icon;
|
||||
return h("div", __assign({ role: "treeitem", onContextMenu: function (evt) { _this.onContextMenu(evt, node); }, onClick: function (evt) { _this.onNodeClick(evt, node); } }, extractClass({}, 'o-tree-node', {
|
||||
this._nodeTagName = node.href ? 'a' : 'div';
|
||||
return (h(this._nodeTagName, __assign({ href: node.href, target: node.target, role: "treeitem", onContextMenu: function (evt) { _this.onContextMenu(evt, node); }, onClick: function (evt) { _this.onNodeClick(evt, node); } }, extractClass({}, 'o-tree-node', {
|
||||
'is-expanded': node.expanded,
|
||||
'is-current': node.selected,
|
||||
'is-current-blur': node.selectedBlur
|
||||
|
|
@ -750,7 +759,7 @@ var Tree = /** @class */ (function (_super) {
|
|||
_this._tempTagName = 'o-icon-' + actionIcon;
|
||||
return h(_this._tempTagName, { onclick: function (_) { return _this.onActionIcon(_, actionIcon); }, class: "action-icon" });
|
||||
})),
|
||||
(!node.editing && node.sign) && h("span", { style: node.color && { color: node.color }, class: "sign" }, node.sign));
|
||||
(!node.editing && node.sign) && h("span", { style: node.color && { color: node.color }, class: "sign" }, node.sign)));
|
||||
};
|
||||
Tree.prototype.render = function (props) {
|
||||
var _this = this;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -684,3 +684,12 @@
|
|||
.o-tree-node__label.is-editing {
|
||||
text-overflow: unset;
|
||||
}
|
||||
|
||||
a,
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,46 +129,49 @@ export default class Tree extends WeElement<Props>{
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
_nodeTagName: string
|
||||
|
||||
renderNode(node, level) {
|
||||
if (node.selected) {
|
||||
this.prevSelectedNode = node
|
||||
}
|
||||
this._tempTagName = 'o-icon-' + node.icon
|
||||
return <div role="treeitem" onContextMenu={(evt) => { this.onContextMenu(evt, node) }} onClick={(evt) => { this.onNodeClick(evt, node) }}
|
||||
{...extractClass({}, 'o-tree-node', {
|
||||
'is-expanded': node.expanded,
|
||||
'is-current': node.selected,
|
||||
'is-current-blur': node.selectedBlur
|
||||
})}>
|
||||
<div class="o-tree-node__content" style={`padding-left: ${level * this.props.padding}px;`}>
|
||||
{(node.children && node.children.length > 0) ? <svg onClick={_ => this.onNodeArrowClick(node)} viewBox="0 0 1024 1024" {...extractClass({}, 'o-tree-node__expand-icon', {
|
||||
'expanded': node.expanded,
|
||||
})} data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
</svg> : <span class="is-leaf o-tree-node__expand-icon"></span>}
|
||||
<span style={node.color && { color: node.color }} {...extractClass({}, 'o-tree-node__label', {
|
||||
'is-editing': node.editing
|
||||
})} >{node.icon && <this._tempTagName />}
|
||||
{node.editing ? <input value={node.label} onChange={this.onEditInputChange} onBlur={this.onEditInputBlur} ref={_ => this.editInput = _} class="edit-input" onClick={evt => evt.stopPropagation()} /> : node.label}</span>
|
||||
</div>
|
||||
{node.expanded && node.children && node.children.length > 0 && <div role="group" class="o-tree-node__children" style="" aria-expanded="true" data-old-padding-top="" data-old-padding-bottom="" data-old-overflow="">
|
||||
{node.children.map(child => {
|
||||
return this.renderNode(child, level + 1)
|
||||
})}
|
||||
</div>}
|
||||
{
|
||||
(!node.editing && node.actionIcons) &&
|
||||
<div class="action-icons">
|
||||
{node.actionIcons.map(actionIcon => {
|
||||
this._tempTagName = 'o-icon-' + actionIcon
|
||||
return <this._tempTagName onclick={_ => this.onActionIcon(_, actionIcon)} class="action-icon" />
|
||||
})}
|
||||
this._nodeTagName = node.href ? 'a' : 'div'
|
||||
return (
|
||||
<this._nodeTagName href={node.href} target={node.target} role="treeitem" onContextMenu={(evt) => { this.onContextMenu(evt, node) }} onClick={(evt) => { this.onNodeClick(evt, node) }}
|
||||
{...extractClass({}, 'o-tree-node', {
|
||||
'is-expanded': node.expanded,
|
||||
'is-current': node.selected,
|
||||
'is-current-blur': node.selectedBlur
|
||||
})}>
|
||||
<div class="o-tree-node__content" style={`padding-left: ${level * this.props.padding}px;`}>
|
||||
{(node.children && node.children.length > 0) ? <svg onClick={_ => this.onNodeArrowClick(node)} viewBox="0 0 1024 1024" {...extractClass({}, 'o-tree-node__expand-icon', {
|
||||
'expanded': node.expanded,
|
||||
})} data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false">
|
||||
<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
|
||||
</svg> : <span class="is-leaf o-tree-node__expand-icon"></span>}
|
||||
<span style={node.color && { color: node.color }} {...extractClass({}, 'o-tree-node__label', {
|
||||
'is-editing': node.editing
|
||||
})} >{node.icon && <this._tempTagName />}
|
||||
{node.editing ? <input value={node.label} onChange={this.onEditInputChange} onBlur={this.onEditInputBlur} ref={_ => this.editInput = _} class="edit-input" onClick={evt => evt.stopPropagation()} /> : node.label}</span>
|
||||
</div>
|
||||
}
|
||||
{(!node.editing && node.sign) && <span style={node.color && { color: node.color }} class="sign">{node.sign}</span>}
|
||||
</div>
|
||||
{node.expanded && node.children && node.children.length > 0 && <div role="group" class="o-tree-node__children" style="" aria-expanded="true" data-old-padding-top="" data-old-padding-bottom="" data-old-overflow="">
|
||||
{node.children.map(child => {
|
||||
return this.renderNode(child, level + 1)
|
||||
})}
|
||||
</div>}
|
||||
{
|
||||
(!node.editing && node.actionIcons) &&
|
||||
<div class="action-icons">
|
||||
{node.actionIcons.map(actionIcon => {
|
||||
this._tempTagName = 'o-icon-' + actionIcon
|
||||
return <this._tempTagName onclick={_ => this.onActionIcon(_, actionIcon)} class="action-icon" />
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
{(!node.editing && node.sign) && <span style={node.color && { color: node.color }} class="sign">{node.sign}</span>}
|
||||
</this._nodeTagName>
|
||||
)
|
||||
}
|
||||
|
||||
render(props) {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue