@houssemdi2000/design-system 1.4.9 → 1.5.0

package/dist/components/EditableField/EditableField.d.ts

@@ -15,5 +15,4 @@ export interface EditableFieldProps {
     focusShadow?: string;
     style?: React.CSSProperties;
 }
-declare const EditableField: React.FC<EditableFieldProps>;
-export default EditableField;
+export declare const EditableField: React.FC<EditableFieldProps>;

package/dist/index.esm.js

@@ -972,5 +972,37 @@ const AccordionPanel = ({ item, isOpen, toggle, iconColor, }) => {
 var css_248z = ".input-field{background:#fff;border:1px solid var(--in-border-color,#ccc);border-radius:6px;font-size:15px;outline:none;padding:10px 12px;transition:.2s ease-in-out}.input-field.dark-mode{background:#333!important;color:#fff!important}.input-field:focus,.input-field:hover{border-color:var(--in-focus-border,#007bff)}.input-field:focus{box-shadow:0 0 3px var(--in-focus-shadow,rgba(0,123,255,.4))}.input-field.error{border-color:#e63946!important;box-shadow:0 0 2px rgba(230,57,70,.4)}.input-field:disabled{background:#f0f0f0;cursor:not-allowed;opacity:.7}.input-error{background-color:#f44343;border-radius:4px;color:#ece6e6;font-family:sans-serif;font-size:12px;margin-top:4px;padding:8px}";
 styleInject(css_248z);
 
-export { Accordion, Avatar, Bloc, Button, Card, CardSheet, Center, Checkbox, Colors, Column, Container, Divider, DragDrop, Footer, FormBuilder, Grid, Layout, Loading, Modal, Navbar, Pagination, ProfileMenu, QuicklyLogin, Radio, Row, SecureText, Select, Sidebar, SmartCarousel, SmartTable, SmartTimeline, Spacer, TableFilterBar, Tag, Text, TextField, ThemeProvider, ToastProvider, tco, useTheme, useToast };
+const EditableField = ({ label, value, error, editable = true, icon, onSave, renderValue, isDarkMode = false, borderColor = "#ccc", focusBorder = "#007bff", focusShadow = "rgba(0, 123, 255, 0.4)", fullWidth = false, style = {}, }) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const [draft, setDraft] = useState(value);
+    const startEditing = () => {
+        if (!editable)
+            return;
+        setDraft(value);
+        setIsEditing(true);
+    };
+    const save = () => {
+        if (draft !== value) {
+            onSave(draft);
+        }
+        setIsEditing(false);
+    };
+    const cancel = () => {
+        setDraft(value);
+        setIsEditing(false);
+    };
+    return (jsxs("div", { style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px",
+            fontFamily: "sans-serif",
+        }, children: [label && label, jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: isEditing ? (jsx("input", { value: draft, autoFocus: true, onChange: (e) => setDraft(e.target.value), className: `input-field ${error ? "error" : ""} ${isDarkMode ? "dark-mode" : ""}`, style: Object.assign(Object.assign({}, style), { ["--in-border-color"]: isDarkMode ? "black" : borderColor, ["--in-focus-border"]: focusBorder, ["--in-focus-shadow"]: focusShadow }), onBlur: save, onKeyDown: (e) => {
+                        if (e.key === "Enter")
+                            save();
+                        if (e.key === "Escape")
+                            cancel();
+                    } })) : (jsxs(Fragment, { children: [jsx("div", { style: { flex: 1 }, children: renderValue ? renderValue(value) : value }), editable && (jsx("span", { style: { cursor: "pointer", opacity: 0.7 }, onClick: startEditing, children: icon !== null && icon !== void 0 ? icon : "✏️" }))] })) })] }));
+};
+
+export { Accordion, Avatar, Bloc, Button, Card, CardSheet, Center, Checkbox, Colors, Column, Container, Divider, DragDrop, EditableField, Footer, FormBuilder, Grid, Layout, Loading, Modal, Navbar, Pagination, ProfileMenu, QuicklyLogin, Radio, Row, SecureText, Select, Sidebar, SmartCarousel, SmartTable, SmartTimeline, Spacer, TableFilterBar, Tag, Text, TextField, ThemeProvider, ToastProvider, tco, useTheme, useToast };
 //# sourceMappingURL=index.esm.js.map