NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] extras: properly indent js playground samples

Browse Source 
closes #75
This commit is contained in:
Géry Debongnie
2019-05-03 11:59:30 +02:00
parent 10ab97e3c6
commit 641adc6e5c
1 changed files with 306 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extras/playground/samples.js
+47 -38
View File
@@ -2,7 +2,7 @@ const CLICK_COUNTER = `class ClickCounter extends owl.Component {
constructor() {
super(...arguments);
this.template = "clickcounter";
this.state = {value: 0};
this.state = { value: 0 };
}
increment() {
@@ -11,7 +11,7 @@ const CLICK_COUNTER = `class ClickCounter extends owl.Component {
}
const qweb = new owl.QWeb(TEMPLATES);
const counter = new ClickCounter({qweb});
const counter = new ClickCounter({ qweb });
counter.mount(document.body);
`;
@@ -30,7 +30,7 @@ const CLICK_COUNTER_CSS = `button {
const CLICK_COUNTER_ESNEXT = `// This example will not work if your browser does not support ESNext class fields
class ClickCounter extends owl.Component {
template = "clickcounter";
state = {value: 0};
state = { value: 0 };
increment() {
this.state.value++;
@@ -38,7 +38,7 @@ class ClickCounter extends owl.Component {
}
const qweb = new owl.QWeb(TEMPLATES);
const counter = new ClickCounter({qweb});
const counter = new ClickCounter({ qweb });
counter.mount(document.body);
`;
@@ -46,7 +46,7 @@ const WIDGET_COMPOSITION = `class ClickCounter extends owl.Component {
constructor(parent, props) {
super(parent, props);
this.template = "clickcounter";
this.state = {value: props.initialState || 0};
this.state = { value: props.initialState || 0 };
}
increment() {
@@ -54,14 +54,13 @@ const WIDGET_COMPOSITION = `class ClickCounter extends owl.Component {
}
}
let nextId = 1;
class App extends owl.Component {
constructor() {
super(...arguments);
this.template = "app";
this.state = {counters: []}
this.state = { counters: [] }
this.widgets = { ClickCounter };
}
@@ -71,8 +70,9 @@ class App extends owl.Component {
}
const qweb = new owl.QWeb(TEMPLATES);
const app = new App({qweb});
app.mount(document.body);`;
const app = new App({ qweb });
app.mount(document.body);
`;
const WIDGET_COMPOSITION_XML = `<templates>
<button t-name="clickcounter" t-on-click="increment">
@@ -95,9 +95,7 @@ const WIDGET_COMPOSITION_CSS = `button {
width: 220px;
}`;
const LIFECYCLE_DEMO = `const { Component, QWeb } = owl;
class HookWidget extends Component {
const LIFECYCLE_DEMO = `class HookWidget extends owl.Component {
constructor() {
super(...arguments);
this.template = "demo.hookwidget";
@@ -127,7 +125,7 @@ class HookWidget extends Component {
}
}
class ParentWidget extends Component {
class ParentWidget extends owl.Component {
constructor() {
super(...arguments);
this.widgets = { HookWidget };
@@ -142,7 +140,7 @@ class ParentWidget extends Component {
}
}
const qweb = new QWeb(TEMPLATES);
const qweb = new owl.QWeb(TEMPLATES);
const widget = new ParentWidget({ qweb });
widget.mount(document.body);
`;
@@ -190,9 +188,7 @@ class Counter extends owl.Component {
constructor(parent, props) {
super(parent, props);
this.template = "counter";
this.state = {
counter: props.initialState || 0
};
this.state = { counter: props.initialState || 0 };
}
increment(delta) {
@@ -225,13 +221,11 @@ class App extends owl.Component {
super(...arguments);
this.template = "root";
this.widgets = { Message };
this.state = {
messages: messages.slice(0, 10)
};
this.state = { messages: messages.slice(0, 10) };
}
setMessageCount(n) {
this.state.messages = messages.slice(0,n);
this.state.messages = messages.slice(0, n);
}
removeMessage(data) {
@@ -368,7 +362,10 @@ const actions = {
},
toggleAll({ state, commit }, completed) {
state.todos.forEach(todo => {
commit("editTodo", { id: todo.id, completed });
commit("editTodo", {
id: todo.id,
completed
});
});
},
editTodo({ commit }, { id, title }) {
@@ -379,7 +376,11 @@ const actions = {
const mutations = {
addTodo({ state }, title) {
const id = state.nextId++;
const todo = { id, title, completed: false };
const todo = {
id,
title,
completed: false
};
state.todos.push(todo);
},
removeTodo({ state }, id) {
@@ -402,8 +403,15 @@ function makeStore() {
window.localStorage.getItem(LOCALSTORAGE_KEY) || "[]"
);
const nextId = Math.max(0, ...todos.map(t => t.id || 0)) + 1;
const state = { todos, nextId };
const store = new owl.Store({ state, actions, mutations });
const state = {
todos,
nextId
};
const store = new owl.Store({
state,
actions,
mutations
});
store.on("update", null, () => {
const state = JSON.stringify(store.state.todos);
window.localStorage.setItem(LOCALSTORAGE_KEY, state);
@@ -467,7 +475,9 @@ class TodoItem extends owl.Component {
// TodoApp
//------------------------------------------------------------------------------
function mapStateToProps(state) {
return { todos: state.todos };
return {
todos: state.todos
};
}
class TodoApp extends owl.Component {
@@ -970,16 +980,14 @@ html .clear-completed:active {
}
`;
const RESPONSIVE = `const { Component, QWeb, utils } = owl;
class SubWidget extends Component {
const RESPONSIVE = `class SubWidget extends owl.Component {
constructor() {
super(...arguments);
this.template = "subwidget";
}
}
class ResponsiveWidget extends Component {
class ResponsiveWidget extends owl.Component {
constructor() {
super(...arguments);
this.template = "responsivewidget";
@@ -992,7 +1000,7 @@ function isMobile() {
}
const env = {
qweb: new QWeb(TEMPLATES),
qweb: new owl.QWeb(TEMPLATES),
isMobile: isMobile()
};
@@ -1001,10 +1009,12 @@ widget.mount(document.body);
window.addEventListener(
"resize",
utils.debounce(function() {
owl.utils.debounce(function() {
const _isMobile = isMobile();
if (_isMobile !== env.isMobile) {
widget.updateEnv({ isMobile: _isMobile });
widget.updateEnv({
isMobile: _isMobile
});
}
}, 20)
);
@@ -1039,13 +1049,12 @@ const RESPONSIVE_CSS = `.info {
margin: 30px;
}`;
const EMPTY = `const {Component, QWeb} = owl;
class Widget extends Component {
const EMPTY = `class App extends owl.Component {
}
const qweb = new QWeb(TEMPLATES);
const widget = new Widget({qweb});
widget.mount(document.body);
const qweb = new owl.QWeb(TEMPLATES);
const app = new App({qweb});
app.mount(document.body);
`;
export const SAMPLES = [