@topconsultnpm/sdkui-react-beta 6.6.86 → 6.6.88

package/lib/components/base/TMDeviceProvider.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+declare enum DeviceType {
+    MOBILE = "mobile",
+    TABLET = "tablet",
+    DESKTOP = "desktop"
+}
+interface DeviceContextProps {
+    deviceType?: DeviceType;
+}
+declare const DeviceContext: React.Context<DeviceContextProps | undefined>;
+declare const TMDeviceProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+declare const useDeviceType: () => DeviceType | undefined;
+export { DeviceContextProps, DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

package/lib/components/base/TMDeviceProvider.js

@@ -0,0 +1,41 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, createContext, useMemo, useContext } from 'react';
+var DeviceType;
+(function (DeviceType) {
+    DeviceType["MOBILE"] = "mobile";
+    DeviceType["TABLET"] = "tablet";
+    DeviceType["DESKTOP"] = "desktop";
+})(DeviceType || (DeviceType = {}));
+const DESKTOP_BREAKPOINT = 1024;
+const TABLET_BREAKPOINT = 768;
+const DeviceContext = createContext(undefined);
+const TMDeviceProvider = ({ children }) => {
+    const [deviceType, setDeviceType] = useState(DeviceType.DESKTOP);
+    const updateDeviceType = () => {
+        const width = window.innerWidth;
+        if (width >= DESKTOP_BREAKPOINT) {
+            setDeviceType(DeviceType.DESKTOP);
+        }
+        else if (width >= TABLET_BREAKPOINT) {
+            setDeviceType(DeviceType.TABLET);
+        }
+        else {
+            setDeviceType(DeviceType.MOBILE);
+        }
+    };
+    useEffect(() => {
+        updateDeviceType();
+        window.addEventListener('resize', updateDeviceType);
+        return () => window.removeEventListener('resize', updateDeviceType);
+    }, []);
+    const contextValue = useMemo(() => ({ deviceType }), [deviceType]);
+    return (_jsxs(DeviceContext.Provider, { value: contextValue, children: [" ", children, " "] }));
+};
+const useDeviceType = () => {
+    const context = useContext(DeviceContext);
+    if (!context) {
+        throw new Error('DeviceProvider does not exsist');
+    }
+    return context.deviceType;
+};
+export { DeviceType, useDeviceType, TMDeviceProvider, DeviceContext };

package/lib/components/editors/TMDateBox.js

@@ -102,7 +102,7 @@ const TMDateBox = (props) => {
     //     </DateBox>
     //     <TMVilViewer vil={props.validationItems} />
     // </>
-    _jsxs("div", { style: { display: 'flex', alignItems: 'center' }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '5px' }, children: [_jsx(DateBox, { ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onKeyUp: (e) => {
+    _jsxs("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [props.icon && (_jsx("span", { style: { marginRight: '8px', display: 'flex', alignItems: 'center' }, children: props.icon })), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '5px', width: '100%' }, children: [_jsx(DateBox, { ref: dateBoxRef, showClearButton: props.showClearButton, dateSerializationFormat: props.useDateSerializationFormat ? 'yyyy-MM-ddTHH:mm:ss' : undefined, disabled: props.disabled, displayFormat: props.displayFormat ?? Globalization.getDateDisplayFormat(props.dateDisplayType), dropDownOptions: dropDownOptions, label: props.label, labelMode: 'static', type: getType(), useMaskBehavior: true, height: '28px', value: props.value, width: props.width, valueChangeEvent: 'keyup input change', onValueChange: (e) => { props.onValueChange?.(e); }, onKeyUp: (e) => {
                             if (e.event?.code == "Space") {
                                 const currentDate = new Date();
                                 currentDate.setHours(0, 0, 0, 0);

package/lib/components/index.d.ts

@@ -46,3 +46,4 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+export * from "./base/TMDeviceProvider";

package/lib/components/index.js

@@ -61,3 +61,5 @@ export { default as SettingsAppearance } from "./settings/SettingsAppearance";
 export * from "./viewers/TMTidViewer";
 export * from "./viewers/TMMidViewer";
 export * from "./viewers/TMDataListItemViewer";
+//TMDeviceProvider
+export * from "./base/TMDeviceProvider";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@topconsultnpm/sdkui-react-beta",
-    "version": "6.6.86",
+    "version": "6.6.88",
     "description": "",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",