mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP] owl: update to v0.23.0
This commit is contained in:
Géry Debongnie
+84
-24
@@ -1,5 +1,5 @@
|
||||
import { SAMPLES } from "./samples.js";
|
||||
const {useState, useRef} = owl.hooks;
|
||||
const { useState, useRef, onMounted, onWillUnmount } = owl.hooks;
|
||||
//------------------------------------------------------------------------------
|
||||
// Constants, helpers, utils
|
||||
//------------------------------------------------------------------------------
|
||||
@@ -150,6 +150,51 @@ Promise.all([loadTemplates(), owl.utils.whenReady()]).then(start);
|
||||
return zip.generateAsync({ type: "blob" });
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// SAMPLES
|
||||
//------------------------------------------------------------------------------
|
||||
function loadSamples() {
|
||||
let result = SAMPLES.slice();
|
||||
const localSample = localStorage.getItem("owl-playground-local-sample");
|
||||
if (localSample) {
|
||||
const { js, css, xml } = JSON.parse(localSample);
|
||||
result.unshift({
|
||||
description: "Local Storage Code",
|
||||
code: js,
|
||||
xml,
|
||||
css
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function saveLocalSample(js, css, xml) {
|
||||
const str = JSON.stringify({ js, css, xml });
|
||||
localStorage.setItem("owl-playground-local-sample", str);
|
||||
}
|
||||
|
||||
function deleteLocalSample() {
|
||||
localStorage.removeItem("owl-playground-local-sample");
|
||||
}
|
||||
|
||||
function useSamples() {
|
||||
const samples = loadSamples();
|
||||
const component = owl.Component.current;
|
||||
let interval;
|
||||
|
||||
onMounted(() => {
|
||||
const state = component.state;
|
||||
interval = setInterval(() => {
|
||||
if (component.isDirty) {
|
||||
saveLocalSample(state.js, state.css, state.xml);
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
clearInterval(interval);
|
||||
});
|
||||
return samples;
|
||||
}
|
||||
//------------------------------------------------------------------------------
|
||||
// Tabbed editor
|
||||
//------------------------------------------------------------------------------
|
||||
@@ -157,13 +202,14 @@ class TabbedEditor extends owl.Component {
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
this.state = useState({
|
||||
currentTab: props.js ? "js" : props.xml ? "xml" : "css"
|
||||
currentTab: props.js !== false ? "js" : props.xml ? "xml" : "css"
|
||||
});
|
||||
this.setTab = owl.utils.debounce(this.setTab, 250, true);
|
||||
|
||||
this.sessions = {};
|
||||
this._setupSessions(props);
|
||||
this.editorNode = useRef("editor");
|
||||
this._updateCode = this._updateCode.bind(this);
|
||||
}
|
||||
|
||||
mounted() {
|
||||
@@ -175,18 +221,14 @@ class TabbedEditor extends owl.Component {
|
||||
this.editor.setSession(this.sessions[this.state.currentTab]);
|
||||
const tabSize = this.state.currentTab === "xml" ? 2 : 4;
|
||||
this.editor.session.setOption("tabSize", tabSize);
|
||||
this.editor.on("blur", () => {
|
||||
const editorValue = this.editor.getValue();
|
||||
const propsValue = this.props[this.state.currentTab];
|
||||
if (editorValue !== propsValue) {
|
||||
this.trigger("updateCode", {
|
||||
type: this.state.currentTab,
|
||||
value: editorValue
|
||||
});
|
||||
}
|
||||
});
|
||||
this.editor.on("blur", this._updateCode);
|
||||
this.interval = setInterval(this._updateCode, 3000);
|
||||
}
|
||||
|
||||
willUnmount() {
|
||||
clearInterval(this.interval);
|
||||
this.editor.off("blur", this._updateCode);
|
||||
}
|
||||
willUpdateProps(nextProps) {
|
||||
this._setupSessions(nextProps);
|
||||
}
|
||||
@@ -195,13 +237,15 @@ class TabbedEditor extends owl.Component {
|
||||
const session = this.sessions[this.state.currentTab];
|
||||
let content = this.props[this.state.currentTab];
|
||||
if (content === false) {
|
||||
const tab = this.props.js ? "js" : this.props.xml ? "xml" : "css";
|
||||
const tab = this.props.js !== false ? "js" : this.props.xml ? "xml" : "css";
|
||||
content = this.props[tab];
|
||||
this.state.currentTab = tab;
|
||||
}
|
||||
session.setValue(content, -1);
|
||||
this.editor.setSession(session);
|
||||
this.editor.resize();
|
||||
if (this.editor.getValue() !== content) {
|
||||
session.setValue(content, -1);
|
||||
this.editor.setSession(session);
|
||||
this.editor.resize();
|
||||
}
|
||||
}
|
||||
|
||||
setTab(tab) {
|
||||
@@ -230,7 +274,7 @@ class TabbedEditor extends owl.Component {
|
||||
|
||||
_setupSessions(props) {
|
||||
for (let tab of ["js", "xml", "css"]) {
|
||||
if (props[tab] && !this.sessions[tab]) {
|
||||
if (props[tab] !== false && !this.sessions[tab]) {
|
||||
this.sessions[tab] = new ace.EditSession(props[tab], MODES[tab]);
|
||||
this.sessions[tab].setOption("useWorker", false);
|
||||
const tabSize = tab === "xml" ? 2 : 4;
|
||||
@@ -239,6 +283,17 @@ class TabbedEditor extends owl.Component {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_updateCode() {
|
||||
const editorValue = this.editor.getValue();
|
||||
const propsValue = this.props[this.state.currentTab];
|
||||
if (editorValue !== propsValue) {
|
||||
this.trigger("updateCode", {
|
||||
type: this.state.currentTab,
|
||||
value: editorValue
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
@@ -248,12 +303,13 @@ class App extends owl.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
this.version = owl.__info__.version;
|
||||
this.SAMPLES = SAMPLES;
|
||||
this.SAMPLES = useSamples();
|
||||
this.isDirty = false;
|
||||
|
||||
this.state = useState({
|
||||
js: SAMPLES[0].code,
|
||||
css: SAMPLES[0].css || "",
|
||||
xml: SAMPLES[0].xml || DEFAULT_XML,
|
||||
js: this.SAMPLES[0].code,
|
||||
css: this.SAMPLES[0].css || "",
|
||||
xml: this.SAMPLES[0].xml || DEFAULT_XML,
|
||||
error: false,
|
||||
displayWelcome: true,
|
||||
splitLayout: true,
|
||||
@@ -302,10 +358,12 @@ class App extends owl.Component {
|
||||
}
|
||||
|
||||
setSample(ev) {
|
||||
const sample = SAMPLES.find(s => s.description === ev.target.value);
|
||||
const sample = this.SAMPLES.find(s => s.description === ev.target.value);
|
||||
this.state.js = sample.code;
|
||||
this.state.css = sample.css || "";
|
||||
this.state.xml = sample.xml || DEFAULT_XML;
|
||||
deleteLocalSample();
|
||||
this.isDirty = false;
|
||||
}
|
||||
|
||||
get leftPaneStyle() {
|
||||
@@ -338,7 +396,10 @@ class App extends owl.Component {
|
||||
});
|
||||
}
|
||||
updateCode(ev) {
|
||||
this.state[ev.detail.type] = ev.detail.value;
|
||||
if (this.state[ev.detail.type] !== ev.detail.value) {
|
||||
this.state[ev.detail.type] = ev.detail.value;
|
||||
this.isDirty = true;
|
||||
}
|
||||
}
|
||||
toggleLayout() {
|
||||
this.state.splitLayout = !this.state.splitLayout;
|
||||
@@ -363,7 +424,6 @@ class App extends owl.Component {
|
||||
}
|
||||
App.components = { TabbedEditor };
|
||||
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Application initialization
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
+151
-92
@@ -318,6 +318,66 @@ const HOOKS_CSS = `button {
|
||||
font-size: 16px;
|
||||
}`;
|
||||
|
||||
const CONTEXT_JS = `// In this example, we show how components can use the Context and 'useContext'
|
||||
// hook to share information between them.
|
||||
const { Component, Context } = owl;
|
||||
const { useContext } = owl.hooks;
|
||||
|
||||
class ToolbarButton extends Component {
|
||||
theme = useContext(this.env.themeContext);
|
||||
|
||||
get style () {
|
||||
const theme = this.theme;
|
||||
return \`background-color: \${theme.background}; color: \${theme.foreground}\`;
|
||||
}
|
||||
}
|
||||
|
||||
class Toolbar extends Component {
|
||||
static components = { ToolbarButton };
|
||||
}
|
||||
|
||||
// Main root component
|
||||
class App extends Component {
|
||||
static components = { Toolbar };
|
||||
|
||||
toggleTheme() {
|
||||
const { background, foreground } = this.env.themeContext.state;
|
||||
this.env.themeContext.state.background = foreground;
|
||||
this.env.themeContext.state.foreground = background;
|
||||
}
|
||||
}
|
||||
|
||||
// Application setup
|
||||
const themeContext = new Context({
|
||||
background: '#000',
|
||||
foreground: '#fff',
|
||||
});
|
||||
const env = {
|
||||
qweb: new owl.QWeb(TEMPLATES),
|
||||
themeContext: themeContext,
|
||||
};
|
||||
const app = new App(env);
|
||||
app.mount(document.body);
|
||||
`;
|
||||
|
||||
const CONTEXT_XML = `<templates>
|
||||
<button t-name="ToolbarButton" t-att-style="style">
|
||||
<t t-esc="props.name"/>
|
||||
</button>
|
||||
|
||||
<div t-name="Toolbar">
|
||||
<ToolbarButton name="'A'"/>
|
||||
<ToolbarButton name="'B'"/>
|
||||
<ToolbarButton name="'C'"/>
|
||||
</div>
|
||||
|
||||
<div t-name="App">
|
||||
<button t-on-click="toggleTheme">Toggle Mode</button>
|
||||
<Toolbar/>
|
||||
</div>
|
||||
</templates>
|
||||
`;
|
||||
|
||||
const TODO_APP_STORE = `// This example is an implementation of the TodoList application, from the
|
||||
// www.todomvc.com project. This is a non trivial application with some
|
||||
// interesting user interactions. It uses the local storage for persistence.
|
||||
@@ -325,99 +385,94 @@ const TODO_APP_STORE = `// This example is an implementation of the TodoList app
|
||||
// In this implementation, we use the owl Store class to manage the state. It
|
||||
// is very similar to the VueX store.
|
||||
const { Component, useState } = owl;
|
||||
const { useRef } = owl.hooks;
|
||||
const { useRef, useStore, useDispatch, onPatched, onMounted } = owl.hooks;
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Constants, helpers
|
||||
//------------------------------------------------------------------------------
|
||||
const ENTER_KEY = 13;
|
||||
const ESC_KEY = 27;
|
||||
const LOCALSTORAGE_KEY = "todomvc";
|
||||
|
||||
function useAutofocus(name) {
|
||||
let ref = useRef(name);
|
||||
let isInDom = false;
|
||||
function updateFocus() {
|
||||
if (!isInDom && ref.el) {
|
||||
isInDom = true;
|
||||
const current = ref.el.value;
|
||||
ref.el.value = "";
|
||||
ref.el.focus();
|
||||
ref.el.value = current;
|
||||
} else if (isInDom && !ref.el) {
|
||||
isInDom = false;
|
||||
}
|
||||
}
|
||||
onPatched(updateFocus);
|
||||
onMounted(updateFocus);
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Store Definition
|
||||
// Store
|
||||
//------------------------------------------------------------------------------
|
||||
const initialState = { todos: [], nextId: 1};
|
||||
|
||||
const actions = {
|
||||
addTodo({ state }, title) {
|
||||
state.todos.push({
|
||||
const todo = {
|
||||
id: state.nextId++,
|
||||
title,
|
||||
completed: false
|
||||
});
|
||||
}
|
||||
state.todos.push(todo);
|
||||
},
|
||||
removeTodo({ state }, id) {
|
||||
const index = state.todos.findIndex(t => t.id === id);
|
||||
state.todos.splice(index, 1);
|
||||
},
|
||||
toggleTodo({ state, dispatch }, id) {
|
||||
updateTodo({state, dispatch}, {id, title}) {
|
||||
const value = title.trim();
|
||||
if (!value) {
|
||||
dispatch('removeTodo', id);
|
||||
} else {
|
||||
const todo = state.todos.find(t => t.id === id);
|
||||
todo.title = value;
|
||||
}
|
||||
},
|
||||
toggleTodo({ state }, id) {
|
||||
const todo = state.todos.find(t => t.id === id);
|
||||
dispatch("editTodo", { id, completed: !todo.completed });
|
||||
todo.completed = !todo.completed;
|
||||
},
|
||||
clearCompleted({ state, dispatch }) {
|
||||
state.todos
|
||||
.filter(todo => todo.completed)
|
||||
.forEach(todo => {
|
||||
for (let todo of state.todos) {
|
||||
if (todo.completed) {
|
||||
dispatch("removeTodo", todo.id);
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
toggleAll({ state, dispatch }, completed) {
|
||||
state.todos.forEach(todo => {
|
||||
dispatch("editTodo", {
|
||||
id: todo.id,
|
||||
completed
|
||||
});
|
||||
});
|
||||
},
|
||||
editTodo({ state }, { id, title, completed }) {
|
||||
const todo = state.todos.find(t => t.id === id);
|
||||
if (title !== undefined) {
|
||||
todo.title = title;
|
||||
}
|
||||
if (completed !== undefined) {
|
||||
for (let todo of state.todos) {
|
||||
todo.completed = completed;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
function saveState(state) {
|
||||
const str = JSON.stringify(state);
|
||||
window.localStorage.setItem(LOCALSTORAGE_KEY, str);
|
||||
}
|
||||
|
||||
function loadState() {
|
||||
const localState = window.localStorage.getItem(LOCALSTORAGE_KEY);
|
||||
return localState ? JSON.parse(localState) : { todos: [], nextId: 1};
|
||||
}
|
||||
|
||||
function makeStore() {
|
||||
const state = loadState();
|
||||
const store = new owl.store.Store({ state, actions });
|
||||
store.on("update", null, () => saveState(store.state));
|
||||
return store;
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// TodoItem
|
||||
//------------------------------------------------------------------------------
|
||||
class TodoItem extends Component {
|
||||
state = useState({ isEditing: false });
|
||||
inputRef = useRef("input");
|
||||
dispatch = useDispatch();
|
||||
|
||||
removeTodo() {
|
||||
this.env.store.dispatch("removeTodo", this.props.id);
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
useAutofocus("input");
|
||||
}
|
||||
|
||||
toggleTodo() {
|
||||
this.env.store.dispatch("toggleTodo", this.props.id);
|
||||
}
|
||||
|
||||
async editTodo() {
|
||||
editTodo() {
|
||||
this.state.isEditing = true;
|
||||
}
|
||||
|
||||
focusInput() {
|
||||
this.inputRef.el.value = "";
|
||||
this.inputRef.el.focus();
|
||||
this.inputRef.el.value = this.props.title;
|
||||
}
|
||||
|
||||
handleKeyup(ev) {
|
||||
if (ev.keyCode === ENTER_KEY) {
|
||||
this.updateTitle(ev.target.value);
|
||||
@@ -433,48 +488,34 @@ class TodoItem extends Component {
|
||||
}
|
||||
|
||||
updateTitle(title) {
|
||||
const value = title.trim();
|
||||
if (!value) {
|
||||
this.removeTodo(this.props.id);
|
||||
} else {
|
||||
this.env.store.dispatch("editTodo", {
|
||||
id: this.props.id,
|
||||
title: value
|
||||
});
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
this.dispatch("updateTodo", {title, id: this.props.id});
|
||||
this.state.isEditing = false;
|
||||
}
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// TodoApp
|
||||
//------------------------------------------------------------------------------
|
||||
class TodoApp extends owl.store.ConnectedComponent {
|
||||
class TodoApp extends Component {
|
||||
static components = { TodoItem };
|
||||
state = useState({ filter: "all" });
|
||||
todos = useStore(state => state.todos);
|
||||
dispatch = useDispatch();
|
||||
|
||||
static mapStoreToProps(state) {
|
||||
return {
|
||||
todos: state.todos
|
||||
};
|
||||
}
|
||||
get visibleTodos() {
|
||||
let todos = this.storeProps.todos;
|
||||
if (this.state.filter === "active") {
|
||||
todos = todos.filter(t => !t.completed);
|
||||
switch (this.state.filter) {
|
||||
case "active": return this.todos.filter(t => !t.completed);
|
||||
case "completed": return this.todos.filter(t => t.completed);
|
||||
case "all": return this.todos;
|
||||
}
|
||||
if (this.state.filter === "completed") {
|
||||
todos = todos.filter(t => t.completed);
|
||||
}
|
||||
return todos;
|
||||
}
|
||||
|
||||
get allChecked() {
|
||||
return this.storeProps.todos.every(todo => todo.completed);
|
||||
return this.todos.every(todo => todo.completed);
|
||||
}
|
||||
|
||||
get remaining() {
|
||||
return this.storeProps.todos.filter(todo => !todo.completed).length;
|
||||
return this.todos.filter(todo => !todo.completed).length;
|
||||
}
|
||||
|
||||
get remainingText() {
|
||||
@@ -500,12 +541,25 @@ class TodoApp extends owl.store.ConnectedComponent {
|
||||
//------------------------------------------------------------------------------
|
||||
// App Initialization
|
||||
//------------------------------------------------------------------------------
|
||||
const store = makeStore();
|
||||
const qweb = new owl.QWeb(TEMPLATES);
|
||||
const env = {
|
||||
qweb,
|
||||
store,
|
||||
};
|
||||
function saveState(state) {
|
||||
const str = JSON.stringify(state);
|
||||
window.localStorage.setItem(LOCALSTORAGE_KEY, str);
|
||||
}
|
||||
|
||||
function loadState() {
|
||||
const localState = window.localStorage.getItem(LOCALSTORAGE_KEY);
|
||||
return localState ? JSON.parse(localState) : initialState;
|
||||
}
|
||||
|
||||
function makeEnv() {
|
||||
const state = loadState();
|
||||
const store = new owl.Store({ state, actions });
|
||||
store.on("update", null, () => saveState(store.state));
|
||||
const qweb = new owl.QWeb(TEMPLATES);
|
||||
return { qweb, store };
|
||||
}
|
||||
|
||||
const env = makeEnv();
|
||||
const app = new TodoApp(env);
|
||||
app.mount(document.body);
|
||||
`;
|
||||
@@ -516,7 +570,7 @@ const TODO_APP_STORE_XML = `<templates>
|
||||
<h1>todos</h1>
|
||||
<input class="new-todo" autofocus="true" autocomplete="off" placeholder="What needs to be done?" t-on-keyup="addTodo"/>
|
||||
</header>
|
||||
<section class="main" t-if="storeProps.todos.length">
|
||||
<section class="main" t-if="todos.length">
|
||||
<input class="toggle-all" id="toggle-all" type="checkbox" t-att-checked="allChecked" t-on-click="dispatch('toggleAll', !allChecked)"/>
|
||||
<label for="toggle-all"></label>
|
||||
<ul class="todo-list">
|
||||
@@ -525,7 +579,7 @@ const TODO_APP_STORE_XML = `<templates>
|
||||
</t>
|
||||
</ul>
|
||||
</section>
|
||||
<footer class="footer" t-if="storeProps.todos.length">
|
||||
<footer class="footer" t-if="todos.length">
|
||||
<span class="todo-count">
|
||||
<strong>
|
||||
<t t-esc="remaining"/>
|
||||
@@ -543,7 +597,7 @@ const TODO_APP_STORE_XML = `<templates>
|
||||
<a t-on-click="setFilter('completed')" t-att-class="{selected: state.filter === 'completed'}">Completed</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="clear-completed" t-if="storeProps.todos.length gt remaining" t-on-click="dispatch('clearCompleted')">
|
||||
<button class="clear-completed" t-if="todos.length gt remaining" t-on-click="dispatch('clearCompleted')">
|
||||
Clear completed
|
||||
</button>
|
||||
</footer>
|
||||
@@ -551,13 +605,13 @@ const TODO_APP_STORE_XML = `<templates>
|
||||
|
||||
<li t-name="TodoItem" class="todo" t-att-class="{completed: props.completed, editing: state.isEditing}">
|
||||
<div class="view">
|
||||
<input class="toggle" type="checkbox" t-on-change="toggleTodo" t-att-checked="props.completed"/>
|
||||
<input class="toggle" type="checkbox" t-on-change="dispatch('toggleTodo', props.id)" t-att-checked="props.completed"/>
|
||||
<label t-on-dblclick="editTodo">
|
||||
<t t-esc="props.title"/>
|
||||
</label>
|
||||
<button class="destroy" t-on-click="removeTodo"></button>
|
||||
<button class="destroy" t-on-click="dispatch('removeTodo', props.id)"></button>
|
||||
</div>
|
||||
<input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.title" t-on-keyup="handleKeyup" t-mounted="focusInput" t-on-blur="handleBlur"/>
|
||||
<input class="edit" t-ref="input" t-if="state.isEditing" t-att-value="props.title" t-on-keyup="handleKeyup" t-on-blur="handleBlur"/>
|
||||
</li>
|
||||
</templates>`;
|
||||
|
||||
@@ -1655,6 +1709,11 @@ export const SAMPLES = [
|
||||
xml: HOOKS_DEMO_XML,
|
||||
css: HOOKS_CSS
|
||||
},
|
||||
{
|
||||
description: "Context",
|
||||
code: CONTEXT_JS,
|
||||
xml: CONTEXT_XML,
|
||||
},
|
||||
{
|
||||
description: "Todo List App (with store)",
|
||||
code: TODO_APP_STORE,
|
||||
|
||||
Reference in New Issue
Block a user