@contentstack/live-preview-utils/dist/modern/visualBuilder/components/FieldLocationAppList.cjs.map

Contentstack provides the Live Preview SDK to establish a communication channel between the various Contentstack SDKs and your website, transmitting live changes to the preview pane.

{"version":3,"sources":["../../../../src/visualBuilder/components/FieldLocationAppList.tsx"],"sourcesContent":["import React, { useState, useEffect, useMemo } from \"preact/compat\";\nimport { EmptyAppIcon } from \"./icons/EmptyAppIcon\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport classNames from \"classnames\";\nimport { CslpData } from \"../../utils/cslpdata\";\n\ninterface App {\n    app_installation_uid: string;\n    app_uid: string;\n    contentTypeUid: string;\n    entryUid: string;\n    fieldDataType: string;\n    fieldDisplayName: string;\n    fieldPath: string;\n    icon?: string;\n    locale: string;\n    manifest: {\n        uid: string;\n        name: string;\n        description: string;\n        icon: string;\n        visibility: string;\n    };\n    title: string;\n    uid: string;\n}\n\ninterface FieldLocationAppListProps {\n    apps: App[];\n    position: \"left\" | \"right\";\n    toolbarRef: React.RefObject<HTMLDivElement>;\n    domEditStack:CslpData[]\n    setDisplayAllApps: (displayAllApps: boolean) => void;\n    displayAllApps: boolean;\n}\n\nconst normalize = (text: string) =>\n    text\n        .toLowerCase()\n        .replace(/[^a-z0-9 ]/gi, \"\")\n        .trim();\n\nexport const FieldLocationAppList = ({\n    apps,\n    position,\n    toolbarRef,\n    domEditStack,\n    setDisplayAllApps,\n}: FieldLocationAppListProps) => {\n    const remainingApps = apps.filter((app, index) => index !== 0);\n    const [search, setSearch] = useState(\"\");\n\n    const filteredApps = useMemo(() => {\n        if (!search.trim()) return remainingApps;\n\n        const normalizedSearch = normalize(search);\n        return remainingApps.filter((app) => {\n            return (\n                normalize(app.title).includes(normalizedSearch) \n            );\n        });\n    }, [search, remainingApps]);\n\n    const handleAppClick = (app: App) => {\n        visualBuilderPostMessage?.send(\n            VisualBuilderPostMessageEvents.FIELD_LOCATION_SELECTED_APP,\n            {\n                app: app,\n                position: toolbarRef.current?.getBoundingClientRect(),\n                DomEditStack:domEditStack\n            }\n        );\n        setDisplayAllApps(false);\n    };\n\n    return (\n        <div\n            className={classNames(\n                visualBuilderStyles()[\n                    \"visual-builder__field-location-app-list\"\n                ],\n                {\n                    [visualBuilderStyles()[\n                        \"visual-builder__field-location-app-list--left\"\n                    ]]: position === \"left\",\n                    [visualBuilderStyles()[\n                        \"visual-builder__field-location-app-list--right\"\n                    ]]: position === \"right\",\n                }\n            )}\n        >\n            <div\n                className={\n                    visualBuilderStyles()[\n                        \"visual-builder__field-location-app-list__search-container\"\n                    ]\n                }\n            >\n                <svg\n                    width=\"14\"\n                    height=\"14\"\n                    viewBox=\"0 0 14 14\"\n                    fill=\"none\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    className={classNames(\n                        \"Search__search-icon Icon--mini\",\n                        visualBuilderStyles()[\n                            \"visual-builder__field-location-app-list__search-icon\"\n                        ]\n                    )}\n                >\n                    <path\n                        d=\"M12.438 12.438L9.624 9.624M6.25 10.75a4.5 4.5 0 100-9 4.5 4.5 0 000 9z\"\n                        stroke=\"#A9B6CB\"\n                        strokeWidth=\"2\"\n                        strokeMiterlimit=\"10\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                    ></path>\n                </svg>\n                <input\n                    type=\"text\"\n                    value={search}\n                    onInput={(e) =>\n                        setSearch((e.target as HTMLInputElement).value)\n                    }\n                    placeholder=\"Search for Apps\"\n                    className={\n                        visualBuilderStyles()[\n                            \"visual-builder__field-location-app-list__search-input\"\n                        ]\n                    }\n                />\n            </div>\n\n            <div\n                className={\n                    visualBuilderStyles()[\n                        \"visual-builder__field-location-app-list__content\"\n                    ]\n                }\n            >\n                {filteredApps.length === 0 && (\n                    <div\n                        className={\n                            visualBuilderStyles()[\n                                \"visual-builder__field-location-app-list__no-results\"\n                            ]\n                        }\n                    >\n                        <span\n                            className={\n                                visualBuilderStyles()[\n                                    \"visual-builder__field-location-app-list__no-results-text\"\n                                ]\n                            }\n                        >\n                            No matching results found!\n                        </span>\n                    </div>\n                )}\n                {filteredApps.map((app) => (\n                    <div\n                        key={app.uid}\n                        className={\n                            visualBuilderStyles()[\n                                \"visual-builder__field-location-app-list__item\"\n                            ]\n                        }\n                        onClick={() => handleAppClick(app)}\n                    >\n                        <div\n                            className={\n                                visualBuilderStyles()[\n                                    \"visual-builder__field-location-app-list__item-icon-container\"\n                                ]\n                            }\n                        >\n                            {app.icon ? (\n                                <img\n                                    src={app.icon}\n                                    alt={app.title}\n                                    className={\n                                        visualBuilderStyles()[\n                                            \"visual-builder__field-location-app-list__item-icon\"\n                                        ]\n                                    }\n                                />\n                            ) : (\n                                <EmptyAppIcon id={app.app_installation_uid} />\n                            )}\n                        </div>\n                        <span\n                            className={\n                                visualBuilderStyles()[\n                                    \"visual-builder__field-location-app-list__item-title\"\n                                ]\n                            }\n                        >\n                            {app.title}\n                        </span>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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","names":["visualBuilderPostMessage","classNames"]}