@powerhousedao/network-admin 0.0.54 → 0.0.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/document-models/network-profile/src/reducers/network-profile-management.d.ts.map +1 -1
- package/dist/document-models/network-profile/src/reducers/network-profile-management.js +12 -2
- package/dist/editors/network-profile/editor.d.ts.map +1 -1
- package/dist/editors/network-profile/editor.js +16 -10
- package/dist/style.css +5 -0
- package/package.json +1 -1
package/dist/document-models/network-profile/src/reducers/network-profile-management.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"network-profile-management.d.ts","sourceRoot":"","sources":["../../../../../document-models/network-profile/src/reducers/network-profile-management.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gDAAgD,EAAE,MAAM,8DAA8D,CAAC;AAErI,eAAO,MAAM,gDAAgD,EAAE,
|
|
1
|
+
{"version":3,"file":"network-profile-management.d.ts","sourceRoot":"","sources":["../../../../../document-models/network-profile/src/reducers/network-profile-management.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gDAAgD,EAAE,MAAM,8DAA8D,CAAC;AAErI,eAAO,MAAM,gDAAgD,EAAE,gDA6C5D,CAAC"}
|
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
export const networkProfileNetworkProfileManagementOperations = {
|
|
2
2
|
setIconOperation(state, action) {
|
|
3
|
-
|
|
3
|
+
if (action.input.icon !== undefined) {
|
|
4
|
+
state.icon = action.input.icon || "";
|
|
5
|
+
}
|
|
6
|
+
if (action.input.darkThemeIcon !== undefined) {
|
|
7
|
+
state.darkThemeIcon = action.input.darkThemeIcon || "";
|
|
8
|
+
}
|
|
4
9
|
},
|
|
5
10
|
setLogoOperation(state, action) {
|
|
6
|
-
|
|
11
|
+
if (action.input.logo !== undefined) {
|
|
12
|
+
state.logo = action.input.logo || "";
|
|
13
|
+
}
|
|
14
|
+
if (action.input.darkThemeLogo !== undefined) {
|
|
15
|
+
state.darkThemeLogo = action.input.darkThemeLogo || "";
|
|
16
|
+
}
|
|
7
17
|
},
|
|
8
18
|
setLogoBigOperation(state, action) {
|
|
9
19
|
state.logoBig = action.input.logoBig || "";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/network-profile/editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAoBlD,MAAM,MAAM,MAAM,GAAG,WAAW,CAAC;
|
|
1
|
+
{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../editors/network-profile/editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAoBlD,MAAM,MAAM,MAAM,GAAG,WAAW,CAAC;AAgSjC,MAAM,CAAC,OAAO,UAAU,MAAM,mDA+Q7B"}
|
|
@@ -42,12 +42,20 @@ function ImageModal({ isOpen, onClose, imageUrl, imageAlt, }) {
|
|
|
42
42
|
return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm", onClick: onClose, children: _jsxs("div", { className: "relative bg-gray-900 rounded-lg shadow-2xl border-2 border-gray-700", style: getModalSize(), children: [_jsx("button", { onClick: onClose, className: "absolute -top-3 -right-3 z-10 w-8 h-8 bg-gray-800 hover:bg-gray-900 rounded-full flex items-center justify-center text-white transition-all duration-200 shadow-lg", children: _jsx(Icon, { name: "ArrowLeft", size: 16 }) }), _jsx("div", { className: "w-full h-full flex items-center justify-center p-8", children: _jsx("img", { src: imageUrl, alt: imageAlt, className: `max-w-full max-h-full object-contain rounded-lg ${imageLoaded ? "opacity-100" : "opacity-0"} transition-opacity duration-200`, onClick: (e) => e.stopPropagation(), onLoad: handleImageLoad }) })] }) }));
|
|
43
43
|
}
|
|
44
44
|
// Image URL input component with preview
|
|
45
|
-
function ImageUrlInput({ label, value, onChange, placeholder,
|
|
45
|
+
function ImageUrlInput({ label, value, onChange, placeholder, }) {
|
|
46
46
|
const [imageError, setImageError] = useState(false);
|
|
47
47
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
48
|
-
//
|
|
48
|
+
// Initialize with the current value prop to ensure it's set correctly on mount
|
|
49
|
+
const [inputValue, setInputValue] = useState(() => value || "");
|
|
50
|
+
// Sync input value with prop value when it changes externally
|
|
51
|
+
// This is important when toggling between light/dark modes or when state updates
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
setInputValue(value || "");
|
|
54
|
+
}, [value]);
|
|
55
|
+
// Reset image error when value changes (important for dark mode toggle and new URLs)
|
|
49
56
|
useEffect(() => {
|
|
50
57
|
setImageError(false);
|
|
58
|
+
// Force image reload by clearing any cached error state
|
|
51
59
|
}, [value]);
|
|
52
60
|
const handleImageClick = () => {
|
|
53
61
|
if (value &&
|
|
@@ -63,10 +71,12 @@ function ImageUrlInput({ label, value, onChange, placeholder, fileSize = "200KB"
|
|
|
63
71
|
: ""}`, onClick: handleImageClick, children: value &&
|
|
64
72
|
!imageError &&
|
|
65
73
|
(value.startsWith("http://") ||
|
|
66
|
-
value.startsWith("https://")) ? (_jsx("img", { src: value, alt: `${label} preview`, className: "w-full h-full object-cover", onError: () => setImageError(true), onLoad: () => setImageError(false) })) : (_jsx(Icon, { name: "Image", size: 24, className: "text-gray-400" })) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm font-medium text-gray-900", children: value || placeholder || `${label.replace(":", "")}.jpg` }), _jsxs("div", { className: "text-xs text-gray-500", children: [
|
|
74
|
+
value.startsWith("https://")) ? (_jsx("img", { src: value, alt: `${label} preview`, className: "w-full h-full object-cover", onError: () => setImageError(true), onLoad: () => setImageError(false) }, value)) : (_jsx(Icon, { name: "Image", size: 24, className: "text-gray-400" })) }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm font-medium text-gray-900", children: value || placeholder || `${label.replace(":", "")}.jpg` }), _jsxs("div", { className: "text-xs text-gray-500", children: [imageError && value && (_jsx("div", { className: "text-red-500 mt-1", children: "\u26A0 Failed to load image" })), value &&
|
|
67
75
|
!imageError &&
|
|
68
76
|
(value.startsWith("http://") ||
|
|
69
|
-
value.startsWith("https://")) && (_jsx("div", { className: "text-blue-600 mt-1", children: "\uD83D\uDCA1 Click image to view full size" }))] })] })] }), _jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center", children: _jsx(Icon, { name: "Image", size: 16, className: "text-gray-600" }) }) })] }), _jsx("div", { className: "mt-3", children: _jsx(
|
|
77
|
+
value.startsWith("https://")) && (_jsx("div", { className: "text-blue-600 mt-1", children: "\uD83D\uDCA1 Click image to view full size" }))] })] })] }), _jsx("div", { className: "flex-shrink-0", children: _jsx("div", { className: "w-6 h-6 rounded-full bg-gray-200 flex items-center justify-center", children: _jsx(Icon, { name: "Image", size: 16, className: "text-gray-600" }) }) })] }), _jsx("div", { className: "mt-3", children: _jsx("input", { type: "text", className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", value: inputValue, onChange: (e) => {
|
|
78
|
+
setInputValue(e.target.value);
|
|
79
|
+
}, onBlur: (e) => {
|
|
70
80
|
if (e.target.value !== value) {
|
|
71
81
|
onChange(e.target.value);
|
|
72
82
|
}
|
|
@@ -75,7 +85,7 @@ function ImageUrlInput({ label, value, onChange, placeholder, fileSize = "200KB"
|
|
|
75
85
|
// Toggle-enabled image input component for light/dark theme switching
|
|
76
86
|
function ToggleableImageInput({ label, lightValue, darkValue, onLightChange, onDarkChange, lightPlaceholder, darkPlaceholder, fileSize = "200KB", }) {
|
|
77
87
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
|
78
|
-
return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: label }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("span", { className: `text-xs font-medium ${!isDarkMode ? "text-gray-900" : "text-gray-500"}`, children: "Light" }), _jsx("button", { type: "button", onClick: () => setIsDarkMode(!isDarkMode), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${isDarkMode ? "bg-gray-700" : "bg-gray-300"}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isDarkMode ? "translate-x-6" : "translate-x-1"}` }) }), _jsx("span", { className: `text-xs font-medium ${isDarkMode ? "text-gray-900" : "text-gray-500"}`, children: "Dark" })] })] }),
|
|
88
|
+
return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("label", { className: "block text-sm font-medium text-gray-700", children: label }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("span", { className: `text-xs font-medium ${!isDarkMode ? "text-gray-900" : "text-gray-500"}`, children: "Light" }), _jsx("button", { type: "button", onClick: () => setIsDarkMode(!isDarkMode), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${isDarkMode ? "bg-gray-700" : "bg-gray-300"}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${isDarkMode ? "translate-x-6" : "translate-x-1"}` }) }), _jsx("span", { className: `text-xs font-medium ${isDarkMode ? "text-gray-900" : "text-gray-500"}`, children: "Dark" })] })] }), _jsx(ImageUrlInput, { label: "", value: isDarkMode ? darkValue : lightValue, onChange: isDarkMode ? onDarkChange : onLightChange, placeholder: isDarkMode ? darkPlaceholder : lightPlaceholder }, isDarkMode ? "dark" : "light")] }));
|
|
79
89
|
}
|
|
80
90
|
export default function Editor() {
|
|
81
91
|
// Getting dispatch from selected document
|
|
@@ -101,24 +111,20 @@ export default function Editor() {
|
|
|
101
111
|
case "icon":
|
|
102
112
|
action = actions.setIcon({
|
|
103
113
|
icon: value,
|
|
104
|
-
darkThemeIcon: state?.darkThemeIcon || "",
|
|
105
114
|
});
|
|
106
115
|
break;
|
|
107
116
|
case "darkThemeIcon":
|
|
108
117
|
action = actions.setIcon({
|
|
109
|
-
icon: state?.icon || "",
|
|
110
118
|
darkThemeIcon: value,
|
|
111
119
|
});
|
|
112
120
|
break;
|
|
113
121
|
case "logo":
|
|
114
122
|
action = actions.setLogo({
|
|
115
123
|
logo: value,
|
|
116
|
-
darkThemeLogo: state?.darkThemeLogo || "",
|
|
117
124
|
});
|
|
118
125
|
break;
|
|
119
126
|
case "darkThemeLogo":
|
|
120
127
|
action = actions.setLogo({
|
|
121
|
-
logo: state?.logo || "",
|
|
122
128
|
darkThemeLogo: value,
|
|
123
129
|
});
|
|
124
130
|
break;
|
|
@@ -164,7 +170,7 @@ export default function Editor() {
|
|
|
164
170
|
if (e.target.value !== state?.name) {
|
|
165
171
|
handleFieldChange("name", e.target.value);
|
|
166
172
|
}
|
|
167
|
-
}, placeholder: "Enter network name" })] }), _jsx(ToggleableImageInput, { label: "Icon:", lightValue: state?.icon || "", darkValue: state?.darkThemeIcon || "", onLightChange: (value) => handleFieldChange("icon", value), onDarkChange: (value) => handleFieldChange("darkThemeIcon", value), lightPlaceholder: "
|
|
173
|
+
}, placeholder: "Enter network name" })] }), _jsx(ToggleableImageInput, { label: "Icon:", lightValue: state?.icon || "", darkValue: state?.darkThemeIcon || "", onLightChange: (value) => handleFieldChange("icon", value), onDarkChange: (value) => handleFieldChange("darkThemeIcon", value), lightPlaceholder: "icon.jpg", darkPlaceholder: "icon-dark.jpg", fileSize: "200KB" }), _jsx(ToggleableImageInput, { label: "Logo:", lightValue: state?.logo || "", darkValue: state?.darkThemeLogo || "", onLightChange: (value) => handleFieldChange("logo", value), onDarkChange: (value) => handleFieldChange("darkThemeLogo", value), lightPlaceholder: "logo.jpg", darkPlaceholder: "logo-dark.jpg", fileSize: "2MB" }), _jsx(ImageUrlInput, { label: "Large Logo:", value: state?.logoBig || "", onChange: (value) => handleFieldChange("logoBig", value), placeholder: "LargeLogo.jpg" }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Website:" }), _jsx(TextInput, { className: "w-full", defaultValue: state?.website || "", onBlur: (e) => {
|
|
168
174
|
const value = e.target.value || null;
|
|
169
175
|
if (value !== state?.website) {
|
|
170
176
|
handleFieldChange("website", value);
|
package/dist/style.css
CHANGED
|
@@ -1423,6 +1423,11 @@
|
|
|
1423
1423
|
}
|
|
1424
1424
|
}
|
|
1425
1425
|
}
|
|
1426
|
+
.focus\:border-blue-500 {
|
|
1427
|
+
&:focus {
|
|
1428
|
+
border-color: var(--color-blue-500);
|
|
1429
|
+
}
|
|
1430
|
+
}
|
|
1426
1431
|
.focus\:ring-2 {
|
|
1427
1432
|
&:focus {
|
|
1428
1433
|
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|