@irontec/ivoz-ui 1.7.9 → 1.7.10

package/components/layout/Header/Header.js

@@ -29,10 +29,10 @@ export default function Header(props) {
     };
     return (_jsxs(Box, Object.assign({ className: className }, { children: [_jsx(Box, Object.assign({ className: 'start' }, { children: _jsx(Breadcrumbs, { desktop: desktop, routeMap: routeMap }) })), _jsxs(Box, Object.assign({ className: 'end' }, { children: [desktop && (_jsxs(_Fragment, { children: [_jsx(Settings, {}), _jsxs(Avatar, { children: [_jsx(MenuItem, Object.assign({ onClick: handleModal }, { children: _jsx(Typography, Object.assign({ textAlign: 'center' }, { children: _('About') })) }), 'about'), _jsx(MenuItem, Object.assign({ onClick: handleLogout }, { children: _jsx(Typography, Object.assign({ textAlign: 'center' }, { children: _('Logout') })) }), 'logout')] })] })), !desktop && (_jsx(LightButton, Object.assign({ onClick: () => {
                             toggleVisibility();
-                        } }, { children: _jsx(MenuIcon, {}) }))), open && (_jsxs(Dialog, Object.assign({ open: open, onClose: handleModal, keepMounted: true, "aria-labelledby": 'dialog-about', "aria-describedby": 'dialog-about' }, { children: [_jsx(CloseRoundedIcon, { className: 'close-icon', onClick: handleModal }), _jsxs(DialogContent, Object.assign({ className: 'dialog-about' }, { children: [_jsx("p", { children: _jsx("img", { src: logo || './logo.svg', className: 'logo' }) }), _jsxs("p", { children: [_('Version'), ": ", version, " (", commit, ") ", _jsx("br", {}), _('Last update'), ": ", lastUpdated] }), _jsx("p", { children: _jsxs(Box, Object.assign({ sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                gap: 1,
-                                            }, className: 'logo' }, { children: ["Powered by ", _jsx(Logo, {})] })) }), _jsx("p", { children: "\u00A92025 Irontec | All rights reserved" })] })), _jsx(DialogActions, { children: _jsx(SolidButton, Object.assign({ onClick: handleModal, sx: { width: '100%' } }, { children: _('ACCEPT') })) })] })))] }))] })));
+                        } }, { children: _jsx(MenuIcon, {}) }))), open && (_jsxs(Dialog, Object.assign({ open: open, onClose: handleModal, keepMounted: true, "aria-labelledby": 'dialog-about', "aria-describedby": 'dialog-about' }, { children: [_jsx(CloseRoundedIcon, { className: 'close-icon', onClick: handleModal }), _jsxs(DialogContent, Object.assign({ className: 'dialog-about' }, { children: [_jsx("img", { src: logo || './logo.svg', className: 'logo' }), _jsxs("p", { children: [_('Version'), ": ", version, " (", commit, ") ", _jsx("br", {}), _('Last update'), ": ", lastUpdated] }), _jsxs(Box, Object.assign({ sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            gap: 1,
+                                        }, className: 'logo' }, { children: ["Powered by ", _jsx(Logo, {})] })), _jsx("p", { children: "\u00A92025 Irontec | All rights reserved" })] })), _jsx(DialogActions, { children: _jsx(SolidButton, Object.assign({ onClick: handleModal, sx: { width: '100%' } }, { children: _('ACCEPT') })) })] })))] }))] })));
 }

package/components/shared/ConfirmDialog.styles.d.ts

@@ -10,8 +10,8 @@ export declare const StyledDialogContentText: import("@emotion/styled").StyledCo
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | "align" | ("color" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/css/main.css

@@ -323,12 +323,12 @@ code {
 .MuiDialog-paper .MuiDialogActions-root button {
   flex-grow: 1;
 }
-.MuiDialog-paper .logo img {
-  height: 50px;
-}
 .MuiDialog-paper .logo svg {
   height: 12px;
 }
+.MuiDialog-paper img.logo {
+  height: 50px;
+}
 
 :root {
   /** COLORS **/

package/entities/DefaultEntityBehavior/Form/useMultilangSync.d.ts

@@ -0,0 +1,12 @@
+import { Language } from 'store/i18n';
+import { useFormikType } from 'services';
+import { FormOnChangeEvent } from 'entities';
+declare type Params = {
+    formik?: useFormikType;
+    languages: Array<Language>;
+    changeHandler: (e: FormOnChangeEvent) => void;
+};
+export declare const useMultilangSync: ({ formik, languages, changeHandler, }: Params) => {
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+};
+export {};

package/entities/DefaultEntityBehavior/Form/useMultilangSync.js

@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+export const useMultilangSync = ({ formik, languages, changeHandler, }) => {
+    const propagateTimeoutRef = useRef(null);
+    const latestTypingRef = useRef(null);
+    const handleChange = (e) => {
+        changeHandler(e);
+        const [fieldKey, currentLang] = e.target.name.split('.');
+        const currentValue = e.target.value;
+        latestTypingRef.current = { lang: currentLang, value: currentValue };
+        if (propagateTimeoutRef.current) {
+            clearTimeout(propagateTimeoutRef.current);
+        }
+        propagateTimeoutRef.current = setTimeout(() => {
+            if (!latestTypingRef.current) {
+                return;
+            }
+            const { lang: typingLang, value: typingValue } = latestTypingRef.current;
+            const updatedValues = {};
+            languages.forEach((lng) => {
+                var _a, _b, _c;
+                const locale = (_b = (_a = lng.locale) === null || _a === void 0 ? void 0 : _a.split('-')[0]) !== null && _b !== void 0 ? _b : 'en';
+                const existingVal = (_c = formik === null || formik === void 0 ? void 0 : formik.values[fieldKey]) === null || _c === void 0 ? void 0 : _c[locale];
+                updatedValues[locale] =
+                    locale === typingLang || !(existingVal === null || existingVal === void 0 ? void 0 : existingVal.trim())
+                        ? typingValue
+                        : existingVal;
+            });
+            formik === null || formik === void 0 ? void 0 : formik.setFieldValue(fieldKey, updatedValues);
+        }, 1800);
+    };
+    return { handleChange };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.9",
+  "version": "1.7.10",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",
@@ -46,7 +46,6 @@
   },
   "dependencies": {
     "@date-io/date-fns": "^2.10.8",
-    "@irontec/ivoz-ui": "^1.7.8",
     "@types/react-color": "^3.0.12",
     "axios": "^0.21.1",
     "date-fns": "^2.21.1",

package/services/form/Field/Multilang.js

@@ -3,12 +3,18 @@ import { Box } from '@mui/material';
 import { useStoreState } from 'store';
 import { StyledFieldset, StyledFieldsetRoot, } from './CustomComponentWrapper.styles';
 import { StyledMultilangTextField } from './TextField/TextField.styles';
+import { useMultilangSync } from '../../../entities/DefaultEntityBehavior/Form/useMultilangSync';
 const Multilang = (props) => {
     const { _columnName, disabled, properties, formik, inputProps, onBlur, changeHandler, } = props;
     let { InputProps } = props;
     const languages = useStoreState((state) => state.i18n.languages);
     const mlValue = (formik === null || formik === void 0 ? void 0 : formik.values[_columnName]) || {};
     const rootProperty = properties[_columnName];
+    const { handleChange } = useMultilangSync({
+        formik,
+        languages,
+        changeHandler,
+    });
     return (_jsx(StyledFieldsetRoot, Object.assign({ label: rootProperty.label, hasChanged: false, required: rootProperty.required, disabled: disabled, className: 'multilang' }, { children: _jsx(StyledFieldset, { children: _jsx(Box, { children: languages === null || languages === void 0 ? void 0 : languages.map((lng) => {
                     var _a, _b, _c;
                     const locale = (_a = lng.locale.split('-').shift()) !== null && _a !== void 0 ? _a : 'en';
@@ -22,7 +28,7 @@ const Multilang = (props) => {
                     const error = formik === null || formik === void 0 ? void 0 : formik.errors[name];
                     InputProps = InputProps !== null && InputProps !== void 0 ? InputProps : {};
                     InputProps.startAdornment = (_jsx("span", Object.assign({ className: 'preffix' }, { children: lng.name.substring(0, 3).toUpperCase() })));
-                    return (_jsx(StyledMultilangTextField, { name: name, type: 'text', multiline: multiline, value: value, disabled: disabled, label: undefined, required: required, onChange: changeHandler, onBlur: onBlur, error: touched && Boolean(error), errorMsg: touched && error, helperText: property.helpText, InputProps: Object.assign({}, InputProps), inputProps: inputProps, hasChanged: false, margin: 'dense', size: 'small' }, name));
+                    return (_jsx(StyledMultilangTextField, { name: name, type: 'text', multiline: multiline, value: value, disabled: disabled, label: undefined, required: required, onChange: handleChange, onBlur: onBlur, error: touched && Boolean(error), errorMsg: touched && error, helperText: property.helpText, InputProps: Object.assign({}, InputProps), inputProps: inputProps, hasChanged: false, margin: 'dense', size: 'small' }, name));
                 }) }) }) })));
 };
 export default Multilang;