DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

omi - add tree demo in single shadow root

This commit is contained in:
dntzhang 2019-03-07 10:39:43 +08:00
parent ba3ecc8f2b
commit d5c38fd17a
5 changed files with 1866 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1733
packages/omi/examples/tree2/b.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
packages/omi/examples/tree2/b.js.map Normal file
View File

File diff suppressed because one or more lines are too long

21
packages/omi/examples/tree2/index.html Normal file
View File

@ -0,0 +1,21 @@
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<style>
body {
font-family: Menlo, Consolas, monospace;
color: #444;
}
</style>
</head>
<body>
<a href="https://github.com/Tencent/omi/blob/master/packages/omi/examples/tree/main.js" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
<script src="b.js"></script>
</body>
</html>

110
packages/omi/examples/tree2/main.js Normal file
View File

@ -0,0 +1,110 @@
import { define, render, WeElement } from '../../src/omi'
define('my-tree', class extends WeElement {
open = (path) => {
const node = this.getNodeByPath(path)
node.open = !node.open
this.update()
}
getNodeByPath(path) {
if (path === '#') {
return this.props.node
}
const arr = path.split('-')
arr.shift()
let current = this.props.node
let item
while (item = arr.pop()) {
current = current.children[item]
}
return current
}
extend(path) {
const node = this.getNodeByPath(path)
if (!node.children) {
node.children = [{
name: 'new child'
}]
} else {
node.children.push({
name: 'new child'
})
}
node.open = true
this.update()
}
addChild = (path) => {
const node = this.getNodeByPath(path)
node.children.push({ name: 'new child' })
this.update()
}
render(props) {
return (
<ul>
{this.createNode(props.node, '#')}
</ul>
)
}
static css = `
h4{
cursor:pointer;
}
.add{
cursor:pointer;
}
`
createNode(node, path) {
const children = node.children
const canOpen = children && children.length
return (
<li>
<h4 ondblclick={e => this.extend(path)}>
{node.name}
{canOpen && <span onclick={e => this.open(path)}>[{node.open ? '-' : '+'}]</span>}
</h4>
{canOpen && node.open && (
<ul>
{children.map((child, index) => {
return this.createNode(child, path + '-' + index)
})}
<li class="add" onclick={e => this.addChild(path)}>
+
</li>
</ul>
)}
</li>
)
}
})
const node = {
name: 'my-tree',
data: { x: 1 },
open: true,
children: [
{
name: 'a-1'
},
{
name: 'a-2',
children: [
{
name: 'a-2-1'
}
]
}
]
}
render(<my-tree node={node} />, 'body')

1
packages/omi/package.json
View File

@ -21,6 +21,7 @@
"receive-props": "rollup -c config/rollup.example.js --watch",
"rpx": "rollup -c config/rollup.example.js --watch",
"tree": "rollup -c config/rollup.example.js --watch",
"tree2": "rollup -c config/rollup.example.js --watch",
"todo-app": "rollup -c config/rollup.example.js --watch",
"tick": "rollup -c config/rollup.example.js --watch",
"observe": "rollup -c config/rollup.example.js --watch",