From 1a43328749d6e72334c7c86e6da6447e7a6dd47f Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Fri, 30 Oct 2020 17:17:26 +0100 Subject: [PATCH 1/5] WIP --- src/widgets/panel/panel.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/widgets/panel/panel.tsx b/src/widgets/panel/panel.tsx index 8488b421f0..669d6f92c3 100644 --- a/src/widgets/panel/panel.tsx +++ b/src/widgets/panel/panel.tsx @@ -79,9 +79,11 @@ export type PanelTemplates = { export type PanelRenderOptions< TWidget extends WidgetFactory > = RenderOptions & { - widgetRenderState: ReturnType< - Exclude['getWidgetRenderState'], undefined> - >; + widgetRenderState: ReturnType['getWidgetRenderState'] extends ( + renderOptions: any + ) => infer TRenderState + ? TRenderState + : unknown; }; export type PanelWidgetOptions> = { @@ -132,12 +134,12 @@ const renderer = ({ }; export type PanelWidget = >( - params?: PanelWidgetOptions + widgetParams?: PanelWidgetOptions ) => < - TWidgetOptions extends { container: HTMLElement | string; [key: string]: any } + TWidgetParams extends { container: HTMLElement | string; [key: string]: any } >( - widgetFactory: (widgetOptions: TWidgetOptions) => Widget -) => (widgetOptions: TWidgetOptions) => Widget; + widgetFactory: TWidget +) => (widgetOptions: TWidgetParams) => Widget; /** * The panel widget wraps other widgets in a consistent panel design. @@ -260,8 +262,7 @@ const panel: PanelWidget = widgetParams => { const options = { ...renderOptions, - widgetRenderState: (widget.getWidgetRenderState?.(renderOptions) || - {}) as any, + widgetRenderState: widget.getWidgetRenderState?.(renderOptions) || {}, }; renderPanel({ From aa6fc62e6842865575c7cebc317a9ec493bae420 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Fri, 30 Oct 2020 17:33:11 +0100 Subject: [PATCH 2/5] now it works --- src/widgets/panel/__tests__/panel-test.ts | 4 ++-- src/widgets/panel/panel.tsx | 22 ++++++++++------------ stories/panel.stories.ts | 8 +++++--- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/widgets/panel/__tests__/panel-test.ts b/src/widgets/panel/__tests__/panel-test.ts index d88a4ebc92..4f9e7cef12 100644 --- a/src/widgets/panel/__tests__/panel-test.ts +++ b/src/widgets/panel/__tests__/panel-test.ts @@ -55,8 +55,8 @@ describe('Usage', () => { test('with `hidden` as boolean warns', () => { expect(() => { - // @ts-ignore wrong option type panel({ + // @ts-expect-error wrong option type hidden: true, }); }).toWarnDev( @@ -66,8 +66,8 @@ describe('Usage', () => { test('with `collapsed` as boolean warns', () => { expect(() => { - // @ts-ignore wrong option type panel({ + // @ts-expect-error wrong option type collapsed: true, }); }).toWarnDev( diff --git a/src/widgets/panel/panel.tsx b/src/widgets/panel/panel.tsx index 669d6f92c3..766085321a 100644 --- a/src/widgets/panel/panel.tsx +++ b/src/widgets/panel/panel.tsx @@ -59,16 +59,16 @@ export type PanelCSSClasses = { footer?: string | string[]; }; -export type PanelTemplates = { +export type PanelTemplates> = { /** * Template to use for the header. */ - header?: Template; + header?: Template>; /** * Template to use for the footer. */ - footer?: Template; + footer?: Template>; /** * Template to use for collapse button. @@ -78,13 +78,11 @@ export type PanelTemplates = { export type PanelRenderOptions< TWidget extends WidgetFactory -> = RenderOptions & { - widgetRenderState: ReturnType['getWidgetRenderState'] extends ( - renderOptions: any - ) => infer TRenderState - ? TRenderState - : unknown; -}; +> = RenderOptions & ReturnType['getWidgetRenderState'] extends ( + renderOptions: any +) => infer TRenderState + ? TRenderState + : Record; export type PanelWidgetOptions> = { /** @@ -102,7 +100,7 @@ export type PanelWidgetOptions> = { /** * The templates to use for the widget. */ - templates?: PanelTemplates; + templates?: PanelTemplates; /** * The CSS classes to override. @@ -261,8 +259,8 @@ const panel: PanelWidget = widgetParams => { const [renderOptions] = args; const options = { + ...(widget.getWidgetRenderState?.(renderOptions) || {}), ...renderOptions, - widgetRenderState: widget.getWidgetRenderState?.(renderOptions) || {}, }; renderPanel({ diff --git a/stories/panel.stories.ts b/stories/panel.stories.ts index 8f628a3087..14ce8b19c9 100644 --- a/stories/panel.stories.ts +++ b/stories/panel.stories.ts @@ -151,11 +151,13 @@ storiesOf('Basics/Panel', module) withHits( ({ search, container }) => { const breadcrumbInPanel = panel({ - collapsed({ widgetRenderState }) { - return widgetRenderState.canRefine; + collapsed({ canRefine }) { + return canRefine === false; }, templates: { - header: 'Collapsible panel', + header({ items }) { + return `Breadcrumb with ${items?.length} items`; + }, footer: 'The panel collapses if it cannot refine. Click "Home". This panel will collapse and you will not see this footer anymore.', }, From e923fa177f0c6161815789cac451b5bc82818d26 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Fri, 30 Oct 2020 17:38:09 +0100 Subject: [PATCH 3/5] better example --- stories/panel.stories.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stories/panel.stories.ts b/stories/panel.stories.ts index 14ce8b19c9..156e5f624e 100644 --- a/stories/panel.stories.ts +++ b/stories/panel.stories.ts @@ -155,8 +155,8 @@ storiesOf('Basics/Panel', module) return canRefine === false; }, templates: { - header({ items }) { - return `Breadcrumb with ${items?.length} items`; + header({ canRefine }) { + return `Breadcrumb that can${canRefine ? '' : "'t "} refine`; }, footer: 'The panel collapses if it cannot refine. Click "Home". This panel will collapse and you will not see this footer anymore.', From 881562c883eddae257c9969660929fe865bec741 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Fri, 30 Oct 2020 17:50:16 +0100 Subject: [PATCH 4/5] revert for lower ts used here --- src/widgets/panel/__tests__/panel-test.ts | 4 ++-- src/widgets/panel/panel.tsx | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/widgets/panel/__tests__/panel-test.ts b/src/widgets/panel/__tests__/panel-test.ts index 4f9e7cef12..d88a4ebc92 100644 --- a/src/widgets/panel/__tests__/panel-test.ts +++ b/src/widgets/panel/__tests__/panel-test.ts @@ -55,8 +55,8 @@ describe('Usage', () => { test('with `hidden` as boolean warns', () => { expect(() => { + // @ts-ignore wrong option type panel({ - // @ts-expect-error wrong option type hidden: true, }); }).toWarnDev( @@ -66,8 +66,8 @@ describe('Usage', () => { test('with `collapsed` as boolean warns', () => { expect(() => { + // @ts-ignore wrong option type panel({ - // @ts-expect-error wrong option type collapsed: true, }); }).toWarnDev( diff --git a/src/widgets/panel/panel.tsx b/src/widgets/panel/panel.tsx index 766085321a..a1d6d34478 100644 --- a/src/widgets/panel/panel.tsx +++ b/src/widgets/panel/panel.tsx @@ -259,7 +259,9 @@ const panel: PanelWidget = widgetParams => { const [renderOptions] = args; const options = { - ...(widget.getWidgetRenderState?.(renderOptions) || {}), + ...(widget.getWidgetRenderState + ? widget.getWidgetRenderState(renderOptions) + : {}), ...renderOptions, }; From 9a8b4db4ff68e20c900ca5a34ad699238cd2a883 Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Fri, 30 Oct 2020 17:56:25 +0100 Subject: [PATCH 5/5] gotta be more generic --- src/components/Panel/Panel.tsx | 10 ++++++---- src/widgets/panel/panel.tsx | 6 +++--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/Panel/Panel.tsx b/src/components/Panel/Panel.tsx index edfe266dc4..8decc8a6a0 100644 --- a/src/components/Panel/Panel.tsx +++ b/src/components/Panel/Panel.tsx @@ -5,7 +5,7 @@ import { useState, useEffect, useRef } from 'preact/hooks'; import cx from 'classnames'; import Template from '../Template/Template'; import { PanelCSSClasses, PanelTemplates } from '../../widgets/panel/panel'; -import { RenderOptions } from '../../types'; +import { RenderOptions, WidgetFactory } from '../../types'; type PanelComponentCSSClasses = Required< Omit< @@ -17,17 +17,19 @@ type PanelComponentCSSClasses = Required< > >; -type PanelProps = { +type PanelProps> = { hidden: boolean; collapsible: boolean; isCollapsed: boolean; data: RenderOptions; cssClasses: PanelComponentCSSClasses; - templates: Required; + templates: Required>; bodyElement: HTMLElement; }; -function Panel(props: PanelProps) { +function Panel>( + props: PanelProps +) { const [isCollapsed, setIsCollapsed] = useState(props.isCollapsed); const [isControlled, setIsControlled] = useState(false); const bodyRef = useRef(null); diff --git a/src/widgets/panel/panel.tsx b/src/widgets/panel/panel.tsx index a1d6d34478..dd638e09d7 100644 --- a/src/widgets/panel/panel.tsx +++ b/src/widgets/panel/panel.tsx @@ -111,14 +111,14 @@ export type PanelWidgetOptions> = { const withUsage = createDocumentationMessageGenerator({ name: 'panel' }); const suit = component('Panel'); -const renderer = ({ +const renderer = >({ containerNode, bodyContainerNode, cssClasses, templates, }) => ({ options, hidden, collapsible, collapsed }) => { render( - cssClasses={cssClasses} hidden={hidden} collapsible={collapsible} @@ -222,7 +222,7 @@ const panel: PanelWidget = widgetParams => { `, }; - const renderPanel = renderer({ + const renderPanel = renderer({ containerNode: getContainerNode(container), bodyContainerNode, cssClasses,