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

prettier

This commit is contained in:
dntzhang 2018-10-29 22:58:36 +08:00
parent 603a361daa
commit 0e1902ae5f
13 changed files with 151 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/omi/examples/counter/main.js
View File

@ -1,10 +1,8 @@
import { render, WeElement, tag, observe } from "../../src/omi"
import { render, WeElement, tag, observe } from '../../src/omi'
@observe
@tag("my-counter")
@tag('my-counter')
class MyApp extends WeElement {
data = {
count: 0
}
@ -28,4 +26,4 @@ class MyApp extends WeElement {
}
}
render(<my-counter />, "body")
render(<my-counter />, 'body')

21
packages/omi/examples/css3transform/main.js
View File

@ -1,12 +1,12 @@
import { render, WeElement, tag } from "../../src/omi"
import "omi-transform"
import { render, WeElement, tag } from '../../src/omi'
import 'omi-transform'
@tag("my-app")
@tag('my-app')
class MyApp extends WeElement {
install() {
this.data.rotateZ = 30
this.linkRef = (e) => {
this.linkRef = e => {
this.animDiv = e
}
}
@ -34,22 +34,15 @@ class MyApp extends WeElement {
this.animDiv.rotateZ += 2
//sync for update call of any scenario
this.data.rotateZ = this.animDiv.rotateZ
}, 16)
}
render(props, data) {
return (
<css3-transform rotateZ={data.rotateZ} translateX={0} perspective={0} >
<div ref={this.linkRef}>
omi-transform
</div>
<css3-transform rotateZ={data.rotateZ} translateX={0} perspective={0}>
<div ref={this.linkRef}>omi-transform</div>
</css3-transform>
)
}
}
render(<my-app />, "body")
render(<my-app />, 'body')

44
packages/omi/examples/mobx/main.js
View File

@ -1,7 +1,7 @@
import { render, WeElement, tag } from "../../src/omi"
import { observe } from "./omi-mobx"
import { render, WeElement, tag } from '../../src/omi'
import { observe } from './omi-mobx'
@tag("todo-list")
@tag('todo-list')
class TodoList extends WeElement {
render(props) {
return (
@ -15,10 +15,10 @@ class TodoList extends WeElement {
}
@observe
@tag("todo-app")
@tag('todo-app')
class TodoApp extends WeElement {
static get data() {
return { items: [], text: "" }
return { items: [], text: '' }
}
render() {
@ -33,29 +33,27 @@ class TodoApp extends WeElement {
onChange={this.handleChange}
value={this.data.text}
/>
<button>
Add #{this.data.items.length + 1}
</button>
<button>Add #{this.data.items.length + 1}</button>
</form>
</div>
)
}
handleChange = e => {
this.data.text = e.target.value
};
handleChange = e => {
this.data.text = e.target.value
}
handleSubmit = e => {
e.preventDefault()
if (!this.data.text.trim().length) {
return
}
this.data.items.push({
text: this.data.text,
id: Date.now()
})
this.data.text = ""
};
handleSubmit = e => {
e.preventDefault()
if (!this.data.text.trim().length) {
return
}
this.data.items.push({
text: this.data.text,
id: Date.now()
})
this.data.text = ''
}
}
render(<todo-app />, "body")
render(<todo-app />, 'body')

4
packages/omi/examples/mobx/omi-mobx.js
View File

@ -1,5 +1,5 @@
import { observable, autorun } from "mobx"
import { options } from "../../src/omi"
import { observable, autorun } from 'mobx'
import { options } from '../../src/omi'
/*!
* Copyright 2015 Google Inc. All rights reserved.

42
packages/omi/examples/observe/main.js
View File

@ -1,6 +1,6 @@
import { render, WeElement, tag, observe } from "../../src/omi"
import { render, WeElement, tag, observe } from '../../src/omi'
@tag("todo-list")
@tag('todo-list')
class TodoList extends WeElement {
render(props) {
return (
@ -14,10 +14,10 @@ class TodoList extends WeElement {
}
@observe
@tag("todo-app")
@tag('todo-app')
class TodoApp extends WeElement {
static get data() {
return { items: [], text: "" }
return { items: [], text: '' }
}
render() {
@ -32,29 +32,27 @@ class TodoApp extends WeElement {
onChange={this.handleChange}
value={this.data.text}
/>
<button>
Add #{this.data.items.length + 1}
</button>
<button>Add #{this.data.items.length + 1}</button>
</form>
</div>
)
}
handleChange = e => {
this.data.text = e.target.value
};
handleChange = e => {
this.data.text = e.target.value
}
handleSubmit = e => {
e.preventDefault()
if (!this.data.text.trim().length) {
return
}
this.data.items.push({
text: this.data.text,
id: Date.now()
})
this.data.text = ""
};
handleSubmit = e => {
e.preventDefault()
if (!this.data.text.trim().length) {
return
}
this.data.items.push({
text: this.data.text,
id: Date.now()
})
this.data.text = ''
}
}
render(<todo-app />, "body")
render(<todo-app />, 'body')

14
packages/omi/examples/pure/main.js
View File

@ -1,7 +1,7 @@
import { render, tag } from "../../src/omi"
import { render, tag } from '../../src/omi'
//Do not use pure element in browsers that do not support Reflect, such as ie11.
tag('my-ele', function (props) {
tag('my-ele', function(props) {
return (
<ul>
{props.items.map(item => (
@ -11,9 +11,7 @@ tag('my-ele', function (props) {
)
})
render((
<my-ele
items={[{ text: 'Omi', id: 1 }, { text: "Tencent", id: 2 }]}
/>
), "body")
render(
<my-ele items={[{ text: 'Omi', id: 1 }, { text: 'Tencent', id: 2 }]} />,
'body'
)

19
packages/omi/examples/render-array/main.js
View File

@ -1,24 +1,17 @@
import { tag, render, WeElement } from "../../src/omi"
import { tag, render, WeElement } from '../../src/omi'
@tag("hello-element")
@tag('hello-element')
class HelloElement extends WeElement {
render() {
return [
<div>Hello</div>,
<div>Element</div>
]
return [<div>Hello</div>, <div>Element</div>]
}
}
@tag("my-app")
@tag('my-app')
class MyApp extends WeElement {
render() {
return [
<hello-element></hello-element>,
<hello-element></hello-element>,
<div>abc</div>
]
return [<hello-element />, <hello-element />, <div>abc</div>]
}
}
render(<my-app />, "body")
render(<my-app />, 'body')

16
packages/omi/examples/simple/hello-element.js
View File

@ -1,14 +1,14 @@
import { WeElement, tag } from "../../src/omi"
import { WeElement, tag } from '../../src/omi'
@tag("hello-element")
@tag('hello-element')
class HelloElement extends WeElement {
static get props() {
return {
propFromParent: {
value: "9"
value: '9'
},
msg: {
value: ""
value: ''
},
num: {
value: 10
@ -27,9 +27,9 @@ class HelloElement extends WeElement {
onClick = evt => {
//trigger CustomEvent
this.fire("abc", { name: "dntzhang", age: 12 })
this.fire('abc', { name: 'dntzhang', age: 12 })
evt.stopPropagation()
};
}
installed() {
setTimeout(() => {
@ -49,9 +49,9 @@ class HelloElement extends WeElement {
render(props, data) {
return (
<div onClick={this.onClick}>
Hello {props.msg} {props.propFromParent}
Hello {props.msg} {props.propFromParent}
<div>
Click Me!
Click Me!
{props.num}
</div>
<div>data: {data.a}</div>

18
packages/omi/examples/simple/main.js
View File

@ -1,19 +1,19 @@
import { render, WeElement, tag } from "../../src/omi"
import "./hello-element"
import { render, WeElement, tag } from '../../src/omi'
import './hello-element'
@tag("my-app")
@tag('my-app')
class MyApp extends WeElement {
onClick = evt => { };
onClick = evt => {}
static get data() {
return { abc: "abc", passToChild: 123 }
return { abc: 'abc', passToChild: 123 }
}
onAbc = evt => {
this.data.abc = " by " + evt.detail.name
this.data.abc = ' by ' + evt.detail.name
this.data.passToChild = 1234
this.update()
};
}
css() {
return `
@ -25,7 +25,7 @@ class MyApp extends WeElement {
render(props, data) {
return (
<div onClick={this.onClick}>
Hello {props.name} {data.abc}
Hello {props.name} {data.abc}
<hello-element
onAbc={this.onAbc}
prop-from-parent={data.passToChild}
@ -36,4 +36,4 @@ class MyApp extends WeElement {
}
}
render(<my-app name="Omi v4.0" />, "body")
render(<my-app name="Omi v4.0" />, 'body')

8
packages/omi/examples/slot/main.js
View File

@ -1,6 +1,6 @@
import { tag, render, WeElement } from "../../src/omi"
import { tag, render, WeElement } from '../../src/omi'
@tag("hello-element")
@tag('hello-element')
class HelloElement extends WeElement {
render() {
return (
@ -13,7 +13,7 @@ class HelloElement extends WeElement {
}
}
@tag("my-app")
@tag('my-app')
class MyApp extends WeElement {
render() {
return (
@ -26,4 +26,4 @@ class MyApp extends WeElement {
}
}
render(<my-app />, "body")
render(<my-app />, 'body')

80
packages/omi/examples/store/main.js
View File

@ -1,6 +1,6 @@
import { render, WeElement, tag } from "../../src/omi"
import { render, WeElement, tag } from '../../src/omi'
@tag("todo-list", true)
@tag('todo-list', true)
class TodoList extends WeElement {
render(props) {
return (
@ -13,7 +13,7 @@ class TodoList extends WeElement {
}
}
@tag("todo-app")
@tag('todo-app')
class TodoApp extends WeElement {
static get data() {
return {
@ -38,57 +38,57 @@ class TodoApp extends WeElement {
)
}
handleChange = e => {
this.store.data.text = e.target.value
};
handleChange = e => {
this.store.data.text = e.target.value
}
handleSubmit = e => {
e.preventDefault()
this.store.add()
};
handleSubmit = e => {
e.preventDefault()
this.store.add()
}
installed() {
setTimeout(() => {
this.store.rename()
}, 2000)
installed() {
setTimeout(() => {
this.store.rename()
}, 2000)
setTimeout(() => {
this.store.data.items.push({ text: "abc" })
}, 4000)
setTimeout(() => {
this.store.data.items.push({ text: 'abc' })
}, 4000)
setTimeout(() => {
this.store.data.items[2].text = "changed"
}, 6000)
setTimeout(() => {
this.store.data.items[2].text = 'changed'
}, 6000)
setTimeout(() => {
this.store.data.items.splice(1, 1)
}, 8000)
setTimeout(() => {
this.store.data.items.splice(1, 1)
}, 8000)
setTimeout(() => {
this.store.data.showList = false
}, 10000)
setTimeout(() => {
this.store.data.showList = false
}, 10000)
setTimeout(() => {
this.store.data.showList = true
}, 12000)
}
setTimeout(() => {
this.store.data.showList = true
}, 12000)
}
}
const store = {
data: {
showList: true,
items: [{ text: "Omi", id: Date.now() }, { text: "JSX", id: Date.now() }],
text: "",
firstName: "dnt",
lastName: "zhang",
fullName: function () {
items: [{ text: 'Omi', id: Date.now() }, { text: 'JSX', id: Date.now() }],
text: '',
firstName: 'dnt',
lastName: 'zhang',
fullName: function() {
return this.firstName + this.lastName
}
},
rename: function () {
this.data.firstName = "Dnt"
rename: function() {
this.data.firstName = 'Dnt'
},
add: function () {
add: function() {
if (!this.data.text.trim().length) {
return
}
@ -96,8 +96,8 @@ const store = {
text: this.data.text,
id: Date.now()
})
this.data.text = ""
this.data.text = ''
}
}
render(<todo-app />, "body", store)
render(<todo-app />, 'body', store)

10
packages/omi/examples/tap/main.js
View File

@ -1,7 +1,7 @@
import { render, WeElement, tag } from "../../src/omi"
import "omi-tap"
import { render, WeElement, tag } from '../../src/omi'
import 'omi-tap'
@tag("my-app")
@tag('my-app')
class MyApp extends WeElement {
onTap = () => {
console.log('tap')
@ -22,11 +22,11 @@ class MyApp extends WeElement {
render() {
return (
<omi-tap onTap={this.onTap} >
<omi-tap onTap={this.onTap}>
<div>Tap Me!</div>
</omi-tap>
)
}
}
render(<my-app />, "body")
render(<my-app />, 'body')

40
packages/omi/examples/todo-app/main.js
View File

@ -1,6 +1,6 @@
import { render, WeElement, tag } from "../../src/omi"
import { render, WeElement, tag } from '../../src/omi'
@tag("todo-list")
@tag('todo-list')
class TodoList extends WeElement {
render(props) {
return (
@ -13,10 +13,10 @@ class TodoList extends WeElement {
}
}
@tag("todo-app")
@tag('todo-app')
class TodoApp extends WeElement {
static get data() {
return { items: [], text: "" }
return { items: [], text: '' }
}
render() {
@ -36,22 +36,22 @@ class TodoApp extends WeElement {
)
}
handleChange = e => {
this.data.text = e.target.value
};
handleChange = e => {
this.data.text = e.target.value
}
handleSubmit = e => {
e.preventDefault()
if (!this.data.text.trim().length) {
return
}
this.data.items.push({
text: this.data.text,
id: Date.now()
})
this.data.text = ""
this.update()
};
handleSubmit = e => {
e.preventDefault()
if (!this.data.text.trim().length) {
return
}
this.data.items.push({
text: this.data.text,
id: Date.now()
})
this.data.text = ''
this.update()
}
}
render(<todo-app />, "body")
render(<todo-app />, 'body')