piral-modals 1.0.0-pre.2296 → 1.0.0

package/src/actions.test.ts

@@ -1,19 +1,20 @@
-import { Atom, deref } from '@dbeining/react-atom';
+import create from 'zustand';
+import { createListener } from 'piral-base';
+import { createActions } from 'piral-core';
 import { registerModal, unregisterModal, openModal, closeModal } from './actions';
-import { createActions, createListener } from 'piral-core';
 
 describe('Modals Actions Module', () => {
   it('registerModal and unregisterModal', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
       registry: {
         foo: 5,
         modals: {},
       },
-    });
+    }));
     const ctx = createActions(state, createListener({}));
     registerModal(ctx, 'foo', 10);
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,
@@ -23,7 +24,7 @@ describe('Modals Actions Module', () => {
       },
     });
     unregisterModal(ctx, 'foo');
-    expect(deref(state)).toEqual({
+    expect(state.getState()).toEqual({
       foo: 5,
       registry: {
         foo: 5,
@@ -33,28 +34,28 @@ describe('Modals Actions Module', () => {
   });
 
   it('openModal adds a new modal', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
-      modals: ['b'],
-    });
+      modals: [{ id: 'b' }],
+    }));
     const ctx = createActions(state, createListener({}));
-    openModal(ctx, 'a');
-    expect(deref(state)).toEqual({
+    openModal(ctx, { id: 'a' });
+    expect(state.getState()).toEqual({
       foo: 5,
-      modals: ['a', 'b'],
+      modals: [{ id: 'a' }, { id: 'b' }],
     });
   });
 
   it('closeModal removes an existing modal', () => {
-    const state = Atom.of({
+    const state: any = create(() => ({
       foo: 5,
-      modals: ['a', 'b', 'c'],
-    });
+      modals: [{ id: 'a' }, { id: 'b' }, { id: 'c' }],
+    }));
     const ctx = createActions(state, createListener({}));
-    closeModal(ctx, 'b');
-    expect(deref(state)).toEqual({
+    closeModal(ctx, { id: 'b' });
+    expect(state.getState()).toEqual({
       foo: 5,
-      modals: ['a', 'c'],
+      modals: [{ id: 'a' }, { id: 'c' }],
     });
   });
 });

package/src/actions.ts

@@ -1,4 +1,4 @@
-import { withKey, withoutKey, prependItem, excludeItem, GlobalStateContext } from 'piral-core';
+import { withKey, withoutKey, prependItem, excludeOn, GlobalStateContext } from 'piral-core';
 import { ModalRegistration, OpenModalDialog } from './types';
 
 export function openModal(ctx: GlobalStateContext, dialog: OpenModalDialog) {
@@ -11,7 +11,7 @@ export function openModal(ctx: GlobalStateContext, dialog: OpenModalDialog) {
 export function closeModal(ctx: GlobalStateContext, dialog: OpenModalDialog) {
   ctx.dispatch((state) => ({
     ...state,
-    modals: excludeItem(state.modals, dialog),
+    modals: excludeOn(state.modals, (modal) => modal.id === dialog.id),
   }));
 }
 

package/src/components.tsx

@@ -1,6 +1,4 @@
-import * as React from 'react';
 import { getPiralComponent } from 'piral-core';
-import { ModalsHostProps, ModalsDialogProps } from './types';
 
-export const PiralModalsHost: React.ComponentType<ModalsHostProps> = getPiralComponent('ModalsHost');
-export const PiralModalsDialog: React.ComponentType<ModalsDialogProps> = getPiralComponent('ModalsDialog');
+export const PiralModalsHost = getPiralComponent('ModalsHost');
+export const PiralModalsDialog = getPiralComponent('ModalsDialog');

package/src/create.test.ts

@@ -1,4 +1,4 @@
-import { Atom, swap } from '@dbeining/react-atom';
+import create from 'zustand';
 import { createElement, FC } from 'react';
 import { createModalsApi } from './create';
 
@@ -6,7 +6,11 @@ const StubComponent: FC = (props) => createElement('div', props);
 StubComponent.displayName = 'StubComponent';
 
 function createMockContainer() {
-  const state = Atom.of({});
+  const state = create(() => ({
+    registry: {
+      extensions: {},
+    },
+  }));
   return {
     context: {
       on: jest.fn(),
@@ -19,7 +23,7 @@ function createMockContainer() {
       },
       state,
       dispatch(update) {
-        swap(state, update);
+        state.setState(update(state.getState()));
       },
     } as any,
     api: {} as any,

package/src/create.ts

@@ -1,8 +1,9 @@
 import * as actions from './actions';
 import { ComponentType } from 'react';
-import { withApi, buildName, PiralPlugin, Dict } from 'piral-core';
+import { withApi, buildName, PiralPlugin, Dict, withRootExtension, withAll, GlobalState } from 'piral-core';
 import { DefaultHost, DefaultDialog } from './default';
-import { PiletModalsApi, ModalRegistration, BareModalComponentProps } from './types';
+import { Modals } from './Modals';
+import { PiletModalsApi, ModalRegistration, BareModalComponentProps, ModalLayoutOptions } from './types';
 
 export interface InitialModalDialog {
   /**
@@ -16,7 +17,11 @@ export interface InitialModalDialog {
   /**
    * The default options for the modal dialog.
    */
-  defaults: any;
+  defaults?: any;
+  /**
+   * The layout options for the modal dialog.
+   */
+  layout?: ModalLayoutOptions;
 }
 
 /**
@@ -27,69 +32,84 @@ export interface ModalsConfig {
    * The initial modal dialogs.
    */
   dialogs?: Array<InitialModalDialog>;
+  /**
+   * Defines how the next ID for the key is selected.
+   * By default a random number is used.
+   *
+   * @param name The name of the modal dialog.
+   */
+  selectId?(name: string): string;
 }
 
 function getModalDialogs(dialogs: Array<InitialModalDialog>) {
   const modals: Dict<ModalRegistration> = {};
 
-  for (const { name, component, defaults } of dialogs) {
+  for (const { name, component, defaults, layout = {} } of dialogs) {
     modals[`global-${name}`] = {
       pilet: undefined,
       name,
       component,
       defaults,
+      layout,
     };
   }
 
   return modals;
 }
 
+function withModals(modals: Dict<ModalRegistration>) {
+  return (state: GlobalState): GlobalState => ({
+    ...state,
+    components: {
+      ModalsHost: DefaultHost,
+      ModalsDialog: DefaultDialog,
+      ...state.components,
+    },
+    registry: {
+      ...state.registry,
+      modals,
+    },
+    modals: [],
+  });
+}
+
 /**
  * Creates new Pilet API extensions for support modal dialogs.
  */
 export function createModalsApi(config: ModalsConfig = {}): PiralPlugin<PiletModalsApi> {
-  const { dialogs = [] } = config;
+  const { dialogs = [], selectId = (name) => `${name}-${~~(Math.random() * 10000)}` } = config;
 
   return (context) => {
     context.defineActions(actions);
 
-    context.dispatch((state) => ({
-      ...state,
-      components: {
-        ModalsHost: DefaultHost,
-        ModalsDialog: DefaultDialog,
-        ...state.components,
-      },
-      registry: {
-        ...state.registry,
-        modals: getModalDialogs(dialogs),
-      },
-      modals: [],
-    }));
+    context.dispatch(withAll(withModals(getModalDialogs(dialogs)), withRootExtension('piral-modals', Modals)));
 
     return (api, target) => {
       const pilet = target.name;
 
       return {
-        showModal(name, options) {
+        showModal(simpleName, options) {
+          const name = buildName(pilet, simpleName);
           const dialog = {
-            name: buildName(pilet, name),
-            alternative: name,
+            id: selectId(name),
+            name,
+            alternative: simpleName,
             options,
             close() {
-              setTimeout(() => context.closeModal(dialog), 0);
+              context.closeModal(dialog);
             },
           };
           context.openModal(dialog);
           return dialog.close;
         },
-        registerModal(name, arg, defaults) {
+        registerModal(name, arg, defaults, layout = {}) {
           const id = buildName(pilet, name);
           context.registerModal(id, {
             pilet,
             name,
             component: withApi(context, arg, api, 'modal'),
             defaults,
+            layout,
           });
           return () => api.unregisterModal(name);
         },

package/src/default.tsx

@@ -3,7 +3,7 @@ import { defaultRender } from 'piral-core';
 import { ModalsHostProps, ModalsDialogProps } from './types';
 
 export const DefaultHost: React.FC<ModalsHostProps> = (props) => (
-  <div className="piral-modals-host" key="default_modals">
+  <div className="piral-modals-host">
     {props.open && <div className="piral-modals-overlay">{props.children}</div>}
   </div>
 );

package/src/types.ts

@@ -1,5 +1,5 @@
-import { ComponentType } from 'react';
-import {
+import type { ComponentType, ReactNode } from 'react';
+import type {
   Dict,
   WrappedComponent,
   BaseComponentProps,
@@ -75,9 +75,31 @@ export interface ModalsHostProps {
    * Callback to invoke closing the modal dialog.
    */
   close(): void;
+  /**
+   * The dialogs to display.
+   */
+  children?: ReactNode;
 }
 
-export interface ModalsDialogProps extends OpenModalDialog {}
+export interface ModalsDialogProps extends OpenModalDialog {
+  /**
+   * The layout options given for the current dialog.
+   */
+  layout: ModalLayoutOptions;
+  /**
+   * The provided default options.
+   */
+  defaults: any;
+  /**
+   * The content of the dialog to display.
+   */
+  children?: ReactNode;
+}
+
+/**
+ * The options provided for the dialog layout.
+ */
+export interface ModalLayoutOptions {}
 
 /**
  * The error used when a registered modal dialog crashed.
@@ -95,9 +117,17 @@ export interface ModalErrorInfoProps {
    * Callback for closing the modal programmatically.
    */
   onClose(): void;
+  /**
+   * The name of the pilet emitting the error.
+   */
+  pilet?: string;
 }
 
 export interface OpenModalDialog {
+  /**
+   * Gets the ID of the modal to open. For tracking its state.
+   */
+  id: string;
   /**
    * Specifies the fully qualified name of the dialog to show.
    */
@@ -131,6 +161,7 @@ export interface ModalRegistration extends BaseRegistration {
   name: string;
   component: WrappedComponent<ModalComponentProps<any>>;
   defaults: any;
+  layout: ModalLayoutOptions;
 }
 
 export interface BaseModalOptions {}
@@ -162,11 +193,13 @@ export interface PiletModalsApi {
    * @param name The name of the modal to register.
    * @param Component The component to render the page.
    * @param defaults Optionally, sets the default values for the inserted options.
+   * @param layout Optionally, sets the layout options for the dialog wrapper.
    */
   registerModal<T>(
     name: T extends string ? T : string,
     Component: AnyComponent<ModalComponentProps<T>>,
     defaults?: ModalOptions<T>,
+    layout?: ModalLayoutOptions,
   ): RegistrationDisposer;
   /**
    * Unregisters a modal by its name.