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

chore: render array tesing with light dom

This commit is contained in:
dntzhang 2020-05-02 11:04:21 +08:00
parent 6eeb45981f
commit 30358bcf22
7 changed files with 2005 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/transition-group/src/index.js
View File

@ -272,6 +272,7 @@ var TransitionGroup = /** @class */ (function (_super) {
};
TransitionGroup.prototype.render = function (props) {
console.error(props.list);
console.error(props.renderItem);
return props.list.map(props.renderItem);
};
TransitionGroup.propTypes = {
@ -310,7 +311,7 @@ var TestTG = /** @class */ (function (_super) {
{ name: 'ItemC' }
];
_this.removeItem = function (item, index) {
_this.list.splice(index, index);
_this.list.splice(index, 1);
//立即更新
_this.update();
};
@ -324,10 +325,9 @@ var TestTG = /** @class */ (function (_super) {
return _this;
}
TestTG.prototype.render = function () {
var _this = this;
return (omi_1.h("div", null,
omi_1.h("ul", null,
omi_1.h("o-transition-group", { list: this.list, renderItem: this.renderItem, ref: function (_) { return _this.tg = _; }, name: "fade", delay: 300 })),
omi_1.h("o-transition-group", { list: this.list, renderItem: this.renderItem, name: "fade", delay: 300 })),
omi_1.h("button", { onClick: this.addItem }, "+")));
};
TestTG.css = "\n .fade-leave-to, .fade-enter {\n opacity: 0;\n transform: translateX(15px);\n }\n\n .fade-leave-active, .fade-enter-active {\n transition: all 500ms ease-in;\n }";

2
components/transition-group/src/index.js.map
View File

File diff suppressed because one or more lines are too long

10
components/transition-group/src/index.tsx
View File

@ -199,8 +199,13 @@ export default class TransitionGroup extends WeElement<Props>{
render(props) {
console.error(props.list)
console.error(props.renderItem)
return props.list.map(props.renderItem)
}
// render(props) {
// return props.list.map(props.renderItem)
// }
}
function insertChildAtIndex(parent, child, index) {
@ -232,7 +237,7 @@ class TestTG extends WeElement {
]
removeItem = (item, index) => {
this.list.splice(index, index)
this.list.splice(index, 1)
//立即更新
this.update()
}
@ -241,7 +246,6 @@ class TestTG extends WeElement {
}
tg
renderItem = (item, index) => {
return <li key={item.name}>{item.name}<button onClick={_ => { this.removeItem(item, index) }}>☓</button></li>
@ -251,7 +255,7 @@ class TestTG extends WeElement {
return (
<div>
<ul>
<o-transition-group list={this.list} renderItem={this.renderItem} ref={_ => this.tg = _} name="fade" delay={300}></o-transition-group>
<o-transition-group list={this.list} renderItem={this.renderItem} name="fade" delay={300}></o-transition-group>
</ul>
<button onClick={this.addItem}>+</button>
</div>

1935
packages/omi/examples/render-array6/b.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
packages/omi/examples/render-array6/b.js.map Normal file
View File

File diff suppressed because one or more lines are too long

10
packages/omi/examples/render-array6/index.html Normal file
View File

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

48
packages/omi/examples/render-array6/main.js Normal file
View File

@ -0,0 +1,48 @@
import { define, render, WeElement } from '../../src/omi'
define('t-g', class extends WeElement {
static isLightDom = true
render(props) {
return props.list.map(props.renderItem)
}
})
define('my-app', class extends WeElement {
list = [{
name: 'abc'
}, {
name: 'bcd'
}]
clickHandler = () => {
this.list.splice(0, 1)
this.update()
}
removeItem = (item, index) => {
this.list.splice(index, 1)
this.update()
}
renderItem = (item, index) => {
return <li>{index}: {item.name}<button onClick={_ => this.removeItem(item, index)}>-</button></li>
}
render() {
return <div>
<ul>
<t-g list={this.list} renderItem={this.renderItem}></t-g>
</ul>
<button onClick={this.clickHandler}>+</button>
</div>
}
})
render(<my-app />, 'body')