1// Copyright (C) 2023 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15import m from 'mithril'; 16 17// Check if a mithril component vnode has children 18export function hasChildren<T>({children}: m.Vnode<T>): boolean { 19 return ( 20 Array.isArray(children) && 21 children.length > 0 && 22 children.some((value) => value) 23 ); 24} 25 26// A component which simply passes through it's children. 27// Can be used for having something to attach lifecycle hooks to without having 28// to add an extra HTML element to the DOM. 29export const Passthrough = { 30 view({children}: m.VnodeDOM) { 31 return children; 32 }, 33}; 34 35export interface GateAttrs { 36 open: boolean; 37} 38 39// The gate component is a wrapper which can either be open or closed. 40// - When open, children are rendered inside a div where display = contents. 41// - When closed, children are rendered inside a div where display = none 42// Use this component when we want to conditionally render certain children, 43// but we want to maintain their state. 44export const Gate = { 45 view({attrs, children}: m.VnodeDOM<GateAttrs>) { 46 return m( 47 '', 48 { 49 style: {display: attrs.open ? 'contents' : 'none'}, 50 }, 51 children, 52 ); 53 }, 54}; 55 56/** 57 * Utility function to pre-bind some mithril attrs of a component, and leave 58 * the others unbound and passed at run-time. 59 * Example use case: the Page API Passes to the registered page a PageAttrs, 60 * which is {subpage:string}. Imagine you write a MyPage component that takes 61 * some extra input attrs (e.g. the App object) and you want to bind them 62 * onActivate(). The results looks like this: 63 * 64 * interface MyPageAttrs extends PageAttrs { app: App; } 65 * 66 * class MyPage extends m.classComponent<MyPageAttrs> {... view() {...} } 67 * 68 * onActivate(app: App) { 69 * pages.register(... bindMithrilApps(MyPage, {app: app}); 70 * } 71 * 72 * The return value of bindMithrilApps is a mithril component that takes in 73 * input only a {subpage: string} and passes down to MyPage the combination 74 * of pre-bound and runtime attrs, that is {subpage, app}. 75 */ 76export function bindMithrilAttrs<BaseAttrs, Attrs>( 77 component: m.ComponentTypes<Attrs>, 78 boundArgs: Omit<Attrs, keyof BaseAttrs>, 79): m.Component<BaseAttrs> { 80 return { 81 view(vnode: m.Vnode<BaseAttrs>) { 82 const attrs = {...vnode.attrs, ...boundArgs} as Attrs; 83 const emptyAttrs: m.CommonAttributes<Attrs, {}> = {}; // Keep tsc happy. 84 return m<Attrs, {}>(component, {...attrs, ...emptyAttrs}); 85 }, 86 }; 87} 88