diff --git a/mwdb/web/src/components/RichAttribute/builtinLambdas.tsx b/mwdb/web/src/components/RichAttribute/builtinLambdas.tsx index 6387ea52..fd1e4444 100644 --- a/mwdb/web/src/components/RichAttribute/builtinLambdas.tsx +++ b/mwdb/web/src/components/RichAttribute/builtinLambdas.tsx @@ -217,32 +217,48 @@ const indicator = lambdaRenderer(function ( ); }); -const paginatedList = lambdaRenderer(function ( +const paginatedHeader = lambdaRenderer(function ( text: any, options: LambdaRendererOptions ) { + // TODO: This removes also indentation that may be necessary + options.context.lambdaContext["paginatedHeader"] = options + .mustacheRenderer(text) + .trim(); + return ""; +}); + +const paginated = lambdaRenderer(function ( + text: any, + options: LambdaRendererOptions +) { + const header = options.context.lambdaContext["paginatedHeader"]; return () => { const [limit, setLimit] = useState(5); + if (!Array.isArray(this)) return []; - const elements = this.slice(0, limit).map((element, index) => { - return ( -
  • - {options.renderer(text, element)} -
  • - ); + const elements = this.slice(0, limit).map((element) => { + // TODO: This removes also indentation that may be necessary + return options.mustacheRenderer(text, element).trim(); }); - if (limit < this.length) { - elements.push( + const partialElement = options.markdownRenderer( + (header ? header + "\n" : "") + elements.join("\n") + ); + return [ + partialElement, + limit < this.length ? (
    setLimit((limit) => limit + 10)} > - More ( - {this.length - limit} elements) + + More ({this.length - limit})
    - ); - } - return ; + ) : ( + [] + ), + ]; }; }); @@ -266,5 +282,6 @@ export const builtinLambdas: LambdaSet = { if: _if, then: _then, else: _else, - paginatedList: paginatedList, + "paginated.header": paginatedHeader, + paginated: paginated, };