swoop-common 2.1.23 → 2.1.25

package/dist/rendering/components/ComponentPicker.d.ts

@@ -5,6 +5,7 @@ interface ComponentPickerModalProps {
     onClose: () => void;
     onSelect: (component: DTOComponentRead) => void;
     selectedComponent?: DTOComponentRead | null;
+    parentIdsFilter?: Array<string>;
 }
-export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, }: ComponentPickerModalProps): React.JSX.Element;
+export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, parentIdsFilter }: ComponentPickerModalProps): React.JSX.Element;
 export {};

package/dist/rendering/components/ComponentPicker.js

@@ -13,7 +13,7 @@ import { Search as SearchIcon, Clear as ClearIcon, FilterList as FilterIcon, } f
 import { PARTNER_REGION_READABLE } from "../consts/region";
 import { fetchComponents, getAllPartners } from "../util/api";
 import { InternalServices } from "../../api/init";
-export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, }) {
+export default function ComponentPickerModal({ open, onClose, onSelect, selectedComponent, parentIdsFilter }) {
     const [searchTerm, setSearchTerm] = useState("");
     const [selectedRegion, setSelectedRegion] = useState("");
     const [selectedPartner, setSelectedPartner] = useState("");
@@ -91,6 +91,9 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
                 query.partners = selectedPartner;
             if (selectedTemplate)
                 query.templateId = selectedTemplate;
+            // Parent ids overwrites templateid filter
+            if (parentIdsFilter === null || parentIdsFilter === void 0 ? void 0 : parentIdsFilter.length)
+                query.templateId = parentIdsFilter.join(",");
             const { data, pagination } = yield fetchComponents(query);
             setComponents(data || []);
             setTotalCount(pagination.total || 0);
@@ -149,12 +152,13 @@ export default function ComponentPickerModal({ open, onClose, onSelect, selected
                 React.createElement(TextField, { select: true, size: "small", label: "Partner", value: selectedPartner, onChange: (e) => setSelectedPartner(e.target.value), sx: { minWidth: 160 } },
                     React.createElement(MenuItem, { value: "" }, "All Partners"),
                     usedPartners.map((partner) => (React.createElement(MenuItem, { key: partner.id, value: partner.id }, partner.name)))),
-                React.createElement(TextField, { select: true, size: "small", label: "Type", value: selectedTemplate, onChange: (e) => setSelectedTemplate(e.target.value), sx: { minWidth: 160 } },
-                    React.createElement(MenuItem, { value: "" }, "All Types"),
-                    usedTemplates.map((template) => (React.createElement(MenuItem, { key: template.id, value: template.id },
-                        template.name,
-                        " v",
-                        template.revision))))),
+                !(parentIdsFilter === null || parentIdsFilter === void 0 ? void 0 : parentIdsFilter.length) &&
+                    React.createElement(TextField, { select: true, size: "small", label: "Type", value: selectedTemplate, onChange: (e) => setSelectedTemplate(e.target.value), sx: { minWidth: 160 } },
+                        React.createElement(MenuItem, { value: "" }, "All Types"),
+                        usedTemplates.map((template) => (React.createElement(MenuItem, { key: template.id, value: template.id },
+                            template.name,
+                            " v",
+                            template.revision))))),
             React.createElement(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1 },
                 React.createElement(Typography, { variant: "body2", color: "text.secondary" },
                     totalCount,

package/dist/rendering/contexts/ComponentPickerContext.js

@@ -20,9 +20,11 @@ export const ComponentPickerProvider = ({ children }) => {
     const [open, setOpen] = useState(false);
     const changeProp = useRef(() => { });
     const closeProp = useRef(() => { });
-    const getSelectedComponent = () => __awaiter(void 0, void 0, void 0, function* () {
+    const [parentIds, setParentIds] = useState([]);
+    const getSelectedComponent = (...args_1) => __awaiter(void 0, [...args_1], void 0, function* (parentIds = []) {
         setOpen(true);
         return new Promise((res, rej) => {
+            setParentIds(parentIds);
             // In case of old refs being called (so i dont need to explicitly remove them)
             let done = false;
             changeProp.current = (value) => {
@@ -42,6 +44,6 @@ export const ComponentPickerProvider = ({ children }) => {
         });
     });
     return (React.createElement(ComponentSelectorContext.Provider, { value: { get: getSelectedComponent } },
-        React.createElement(ComponentPickerModal, { open: open, onClose: closeProp.current, onSelect: changeProp.current }),
+        React.createElement(ComponentPickerModal, { parentIdsFilter: parentIds.length ? parentIds : undefined, open: open, onClose: closeProp.current, onSelect: changeProp.current }),
         children));
 };

package/dist/rendering/renderers/ComponentPicker.js

@@ -18,11 +18,28 @@ const FormComponentPicker = ({ components, selectedComponent, onChange, template
     const selected = components.find(c => c.id === selectedComponent) || null;
     const { get } = useComponentPicker();
     return (React.createElement(Paper, { component: "form", sx: { display: 'flex', flexDirection: 'column', gap: 1, p: 2, mb: 1 }, noValidate: true, autoComplete: "off" },
-        React.createElement(Button, { onClick: (e) => {
+        React.createElement(Button, { onClick: () => {
                 get()
-                    .then((comp) => onChange(comp.id))
-                    .finally(() => { });
-            } }, (selected === null || selected === void 0 ? void 0 : selected.name) || label)));
+                    .then((comp) => {
+                    onChange(comp.id);
+                })
+                    .catch(() => { });
+            }, variant: "outlined", fullWidth: true, sx: {
+                height: 56,
+                fontSize: "1rem",
+                fontWeight: 500,
+                borderRadius: 1,
+                textTransform: "none",
+                justifyContent: "flex-start",
+                px: 2,
+                // Red if not selected
+                color: !selectedComponent ? "error.main" : "text.primary",
+                borderColor: !selectedComponent ? "error.main" : "divider",
+                "&:hover": {
+                    borderColor: !selectedComponent ? "error.dark" : undefined,
+                    backgroundColor: !selectedComponent ? "rgba(211, 47, 47, 0.04)" : undefined,
+                },
+            } }, selectedComponent ? selected === null || selected === void 0 ? void 0 : selected.name : "Select " + label + " Component")));
 };
 const FormRendererComponentPicker = ({ data, handleChange, path, label, enabled, schema }) => {
     const [components, setComponents] = useState([]);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "swoop-common",
-    "version": "2.1.23",
+    "version": "2.1.25",
     "main": "dist/api/index.js",
     "types": "dist/api/index.d.ts",
     "exports": {