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

omis 

* Fix value of event handler undefined error
* Add tree example
This commit is contained in:
dntzhang 2019-07-21 11:07:49 +08:00
parent cd3f4fe58d
commit 0160958414
9 changed files with 2613 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1189
packages/omis/examples/css/b.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
packages/omis/examples/css/b.js.map Normal file
View File

File diff suppressed because one or more lines are too long

10
packages/omis/examples/css/index.html Normal file
View File

@ -0,0 +1,10 @@
<html>
<head></head>
<body>
<script src="b.js"></script>
</body>
</html>

42
packages/omis/examples/css/main.js Normal file
View File

@ -0,0 +1,42 @@
import { render } from '../../src/omi'
//逻辑store外置，UI只负责渲染
const Counter = (props, store) => {
return (
<div>
<button onClick={store.sub}>-</button>
<text>{store.count}</text>
<button onClick={store.add}>+</button>
</div>
)
}
Counter.store = _ => {
return {
count: 1,
add(e) {
this.count++
this.update()
},
sub() {
this.count--
this.update()
}
}
}
render(<Counter />, 'body')
//or
// const App = (props, store) => {
// return <div>
// <div>Hello Omis</div>
// <Counter></Counter>
// </div>
// }
// App.store = _ => {
// }
// render(<App />, 'body')

1245
packages/omis/examples/tree/b.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
packages/omis/examples/tree/b.js.map Normal file
View File

File diff suppressed because one or more lines are too long

10
packages/omis/examples/tree/index.html Normal file
View File

@ -0,0 +1,10 @@
<html>
<head></head>
<body>
<script src="b.js"></script>
</body>
</html>

114
packages/omis/examples/tree/main.js Normal file
View File

@ -0,0 +1,114 @@
import { render } from '../../src/omi'
const TreeNode = (props, store) => {
return <ul>
{createNode(store.data, '#', store)}
</ul>
}
function createNode(node, path, store) {
const children = node.children
const canOpen = children && children.length
return (
<li>
<h4 ondblclick={e => store.extend(path)}>
{node.name}
{canOpen && <span onclick={e => store.open(path)}>[{node.open ? '-' : '+'}]</span>}
</h4>
{canOpen && node.open && (
<ul>
{children.map((child, index) => {
return createNode(child, path + '-' + index, store)
})}
<li class="add" onclick={e => store.addChild(path)}>
+
</li>
</ul>
)}
</li>
)
}
TreeNode.store = _ => {
return {
data: {
name: 'my-tree',
data: { x: 1 },
open: true,
children: [
{
name: 'a-1'
},
{
name: 'a-2',
children: [
{
name: 'a-2-1'
}
]
}
]
},
open(path) {
console.log(path)
const node = this.getNodeByPath(path)
node.open = !node.open
this.update()
},
getNodeByPath(path) {
if (path === '#') {
return this.data
}
const arr = path.split('-')
arr.shift()
let current = this.data
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()
}
}
}
TreeNode.css = `
h4{
cursor:pointer;
}
.add{
cursor:pointer;
}
`
render(<TreeNode />, 'body')

2
packages/omis/src/dom/index.js
View File

@ -102,7 +102,7 @@ export function setAccessor(node, name, old, value, isSvg, store) {
else {
node.removeEventListener(name, eventProxy, useCapture);
}
(node._listeners || (node._listeners = {}))[name] = value.bind(store);
(node._listeners || (node._listeners = {}))[name] = value ? value.bind(store) : value;
}
else if (name!=='list' && name!=='type' && !isSvg && name in node) {
// Attempt to set a DOM property to the given value.