Merge pull request #6 from agility/apps-sdk-v2-marketplace

tweak to modal params

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agility/app-sdk",
-  "version": "2.0.0-rc12",
+  "version": "2.0.0-rc18",
   "description": "JavaScript library for building Agility CMS apps.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

src/lib/getCloseModalID.ts

@@ -0,0 +1,7 @@
+export const getCloseModalID = (): string | null => {
+		if (typeof window === 'undefined') return null
+	const params = window.location.search
+	const urlParams = new URLSearchParams(params)
+	const id = urlParams.get('closeModalID') ?? null
+	return id
+}

src/methods/closeModal.ts

@@ -0,0 +1,36 @@
+import { IAppEventParam, IModalParam } from '../types';
+import { getOperationID } from '../lib/getOperationID';
+import { Subject } from 'rxjs';
+import { addOperation } from '../lib/operationAccess';
+import { getAppID } from '../lib/getAppID';
+import { invokeAppMethod } from '../lib/invokeAppMethod';
+import { getCloseModalID } from '../lib/getCloseModalID';
+
+/**
+ * Closes the current modal and passes the props to the callback.  Only to be used on a modal surface.
+ *
+ * @param {*} props
+ */
+export const closeModal = ( props : any) => {
+
+	const appID = getAppID()
+	const closeModalID = getCloseModalID()
+	if (!appID || !closeModalID) return
+
+	const operationID = getOperationID()
+
+	const arg: IAppEventParam<{ closeModalID: string, props: any }> = {
+		appID,
+		operationID,
+		operationType: "closeModal",
+		arg: {
+			closeModalID,
+			props
+		}
+	}
+
+
+	//call the method in the parent windpow
+	invokeAppMethod(arg)
+
+}

src/methods/index.ts

@@ -4,6 +4,7 @@ export * as assetsMethods from "./assets"
 export * as pageMethods from "./pages"
 export * from './setHeight'
 export * from './openModal'
+export * from './closeModal'
 export * from "./getAppInstall"
 export * from "./refresh"
 export * from "./setVisibility"

src/methods/openModal.ts

@@ -14,20 +14,22 @@ import { invokeAppMethod } from '../lib/invokeAppMethod';
  * @template T
  * @param {Props<T>} { name, props, callback }
  */
-export const openModal = <T>({ title, callback }: IModalParam<T> ) => {
+export const openModal = <T>({ name, title, props, callback }: IModalParam<T> ) => {
 
 	const appID = getAppID()
 	if (!appID) return
 	const operationID = getOperationID()
 	const closeModalID = getOperationID()
 
-	const arg: IAppEventParam<{ closeModalID: string, title: string }> = {
+	const arg: IAppEventParam<{ closeModalID: string, name: string, title: string | null, props: any }> = {
 		appID,
 		operationID,
 		operationType: "openModal",
 		arg: {
 			closeModalID,
-			title
+			title: title || null,
+			name,
+			props
 		}
 	}
 
@@ -36,7 +38,7 @@ export const openModal = <T>({ title, callback }: IModalParam<T> ) => {
 
 	const closeOperation = new Subject<T>();
 	closeOperation.subscribe((ret: any) => {
-		callback(ret)
+		callback(ret?.props)
 		closeOperation.unsubscribe()
 	})
 

src/types/IAppEventParam.ts

@@ -5,6 +5,7 @@ export interface IAppEventParam<T> {
 	| "updateConfigurationValue"
 	| "getContentItem"
 	| "openModal"
+	| "closeModal"
 	| "selectAssets"
 	| "persistData"
 	| "refresh"
@@ -24,8 +25,8 @@ export interface IAppEventParam<T> {
 	| "removeSelectedItemListener"
 	| "setVisibility"
 	| "getPageItem"
-	| "getManagementAPIToken" 
-	| "getAPIKey" 
+	| "getManagementAPIToken"
+	| "getAPIKey"
 	error?: string
 	arg?: T
 }

src/types/IContextParam.ts

@@ -13,4 +13,6 @@ export interface IContextParam {
 	contentItem?: IContentItem
 	contentModel?: IContentModel
 	pageItem?: IPageItem
+	modalProps?: any
+	closeModalID?: string
 }

src/types/IModalParam.ts

@@ -1,5 +1,32 @@
 export interface IModalParam<T> {
+	/**
+	 * The title to show on the model. Include this to have the built-in title bar with close button.  Omit it to do your own title bar.
+	 *
+	 * @type {string}
+	 * @memberof IModalParam
+	 */
 	title: string
+
+	/**
+	 * The name of the modal to show.
+	 *
+	 * @type {string}
+	 * @memberof IModalParam
+	 */
+	name: string
+
+	/**
+	 * The props to pass to the modal.
+	 *
+	 * @type {*}
+	 * @memberof IModalParam
+	 */
 	props?: any
-	callback: (result: T) => void
+
+	/**
+	 * The callback for when the modal is closed.
+	 *
+	 * @memberof IModalParam
+	 */
+	callback: (result?: T) => void
 }

src/useAgilityAppSDK.ts

@@ -17,6 +17,7 @@ export interface AgilityAddSKReturn {
 	contentItem: IContentItem | null,
 	contentModel: IContentModel | null
 	pageItem: IPageItem | null,
+	modalProps: any
 }
 
 /**
@@ -35,6 +36,8 @@ export const useAgilityAppSDK = (): AgilityAddSKReturn => {
 	const [contentItem, setContentItem] = useState<IContentItem | null>(null)
 	const [pageItem, setPageItem] = useState<IPageItem | null>(null)
 
+	const [modalProps, setModalProps] = useState<any>(null)
+
 	useEffect(() => {
 		const appID = getAppID()
 		if (!appID) return
@@ -52,6 +55,7 @@ export const useAgilityAppSDK = (): AgilityAddSKReturn => {
 
 				setContentItem(context.contentItem || null)
 				setContentModel(context.contentModel || null)
+				setModalProps(context.modalProps || null)
 
 				setInitializing(false)
 				operation.unsubscribe()
@@ -85,6 +89,7 @@ export const useAgilityAppSDK = (): AgilityAddSKReturn => {
 		field,
 		contentItem,
 		contentModel,
-		pageItem
+		pageItem,
+		modalProps
 	}
 }