@itcase/ui 1.9.65 → 1.9.67

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -1,121 +1,12 @@
-import { useMemo } from 'react';
-import camelCase from 'lodash/camelCase';
-import castArray from 'lodash/castArray';
-import upperFirst from 'lodash/upperFirst';
-import { useUserDeviceContext } from '../../context';
-import { getStyleAttributeKey } from '../index.helpers';
-import styleAttributes from '../useStyles/styleAttributes';
-function useDevicePropsGenerator(componentProps, appearanceConfig) {
-    /** Get or generate(classname) a prop depending on the user's device.
-     * Props:
-     *   - "componentProps" - original "props" from component
-     *   - "appearanceConfig" - special appearance dictionary with styles presets
-     *
-     * Usage for create class value:
-     *   const appearanceConfig = (
-     *     appearance && componentConfig.appearance && componentConfig.appearance[appearance]
-     *   )
-     *   const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
-     *   ---------
-     *   const fillClass = propsGenerator.getClassName('fill')
-     *   "fillClass" - is "surface-secondary"
-     *   ---------
-     *   const fillClass = propsGenerator.getClassName('fill', { prefix: 'fill_' })
-     *   "fillClass" - is "fill_surface-secondary"
-     *   ---------
-     *   const fillClass = propsGenerator.fillClass
-     *   "fillClass" - is "surface-secondary"
-     *   ---------
-     *   const { fillClass } = propsGenerator
-     *   "fillClass" - is "surface-secondary"
-     *
-     * Usage for props value for device:
-     *   const { titleTextSize } = propsGenerator / const titleTextSize = propsGenerator.titleTextSize
-     *
-     *   "titleTextSize" - contain some value from props:
-     *     - titleTextSize
-     *     - titleTextSizeMobile
-     *     - titleTextSizeTablet
-     *     - titleTextSizeDesktop
-     *   ---------
-     **/
-    const { deviceCurrentMainType } = useUserDeviceContext();
-    const devicePropsGenerator = useMemo(() => {
-        const propsGenerator = {
-            getProp(propKey) {
-                const propsForDeviceKey = `${propKey}${upperFirst(deviceCurrentMainType)}`;
-                const valueForDevice = componentProps[propsForDeviceKey];
-                const valueDefault = componentProps[propKey];
-                const appearanceForDevice = appearanceConfig?.[propsForDeviceKey];
-                const appearanceDefault = appearanceConfig?.[propKey];
-                // prettier-ignore
-                const targetPropsValue = (
-                // Value for device from props is first priority
-                valueForDevice ||
-                    // Value without device from props is second priority
-                    valueDefault ||
-                    // Value for device from appearance config is third priority
-                    appearanceForDevice ||
-                    // Value without device from appearance config is last priority
-                    appearanceDefault);
-                return targetPropsValue;
-            },
-            // eslint-disable-next-line perfectionist/sort-objects
-            getClassName(propKey, params) {
-                const { prefix = '', replace = [/([A-Z])/g, '-$1'] } = params || {};
-                const targetClassValue = this.getProp(String(propKey));
-                const styleAttributeKeys = styleAttributes.map((attr) => getStyleAttributeKey(attr));
-                if (styleAttributeKeys.includes(String(propKey)) &&
-                    (typeof targetClassValue === 'number' ||
-                        (typeof targetClassValue === 'string' &&
-                            !isNaN(parseFloat(targetClassValue))))) {
-                    return '';
-                }
-                if (targetClassValue) {
-                    let cleanClassValue = String(targetClassValue);
-                    if (!cleanClassValue.includes('.')) {
-                        cleanClassValue = camelCase(cleanClassValue);
-                    }
-                    if (replace) {
-                        const replaceList = castArray(replace);
-                        cleanClassValue = cleanClassValue.replace(replaceList[0], 
-                        // @ts-expect-error
-                        replaceList[1] || '');
-                    }
-                    // prettier-ignore
-                    return `${prefix}${cleanClassValue}`.toLowerCase();
-                }
-                // If target key not exists in props and appearance config - return empty class
-                return '';
-            },
-        };
-        const generatorProxyHandler = {
-            get(target, propKey, receiver, ...args) {
-                if (typeof propKey === 'string') {
-                    // If object does not have the property being retrieved
-                    if (!Reflect.has(target, propKey)) {
-                        // And property ended on "Class" keyword
-                        if (propKey.endsWith('Class')) {
-                            // prettier-ignore
-                            const shortProp = propKey.substring(0, propKey.lastIndexOf('Class'));
-                            // Return prop from props for device as formatted class name
-                            return target.getClassName(shortProp);
-                        }
-                        // Return prop from props for device
-                        return target.getProp(propKey);
-                    }
-                    // Return object property. Original "get".
-                    // @ts-expect-error
-                    return Reflect.get(target, propKey, receiver, ...args);
-                }
-                // In some cases, like in Chrome browser, sometime "prop" is not string.
-                // We return this object as is.
-                return propKey;
-            },
-        };
-        return new Proxy(propsGenerator, generatorProxyHandler);
-        // TODO: componentProps(react) and appearanceConfig(not memoized) is always new. maybe better check Object.values?
-    }, [componentProps, appearanceConfig, deviceCurrentMainType]);
-    return devicePropsGenerator;
-}
-export { useDevicePropsGenerator };
+import 'react';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+export { a as useDevicePropsGenerator } from '../../primitives_es_C7NgMhaK.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'uuid';
+import '@itcase/common';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'react-inlinesvg';

package/dist/hooks/useDevicePropsGenerator.js

@@ -1,4 +1,4 @@
-export { a as useDevicePropsGenerator } from '../primitives_es_dSATude_.js';
+export { a as useDevicePropsGenerator } from '../primitives_es_C7NgMhaK.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';

package/dist/hooks/useDeviceTargetClass.js

@@ -1,47 +1,62 @@
 import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
 import castArray from 'lodash/castArray';
-import { useUserDeviceContext } from '../context/UIContext';
+import { e as useUserDeviceContext } from '../primitives_es_C7NgMhaK.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'lodash/upperFirst';
+import 'uuid';
+import '@itcase/common';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'react-inlinesvg';
+
 /** TODO:
  * Hook is still used in "itcase-forms".
  * Need replace with "useDevicePropsGenerator" and delete this.
  */
 function useDeviceTargetClass(componentProps, hookProps) {
-    /** Generate a class depending on the user's device.
-     *
-     * Usage:
-     *  const sizeClass = useDeviceTargetClass(props, {
-     *    prefix: 'some-item_size_',
-     *    propsKey: 'size',
-     *  })
-     * Return: "some-item_size_m" (or "s", or "l", or something else)
-     *
-     * "componentProps" - "props" from component
-     * "hookProps" - special props for generating class
-     **/
-    const { prefix = '', propsKey, replace = [/([A-Z])/g, '-$1'] } = hookProps;
-    const { isMobile, isTablet, isDesktop } = useUserDeviceContext();
-    const targetClassValue = useMemo(() => {
-        // prettier-ignore
-        const deviceCurrentMainType = ((isMobile && 'Mobile') ||
-            (isTablet && 'Tablet') ||
-            (isDesktop && 'Desktop') ||
-            '');
-        const valueForDevice = componentProps[`${propsKey}${deviceCurrentMainType}`];
-        const valueDefault = componentProps[propsKey];
-        return valueForDevice || valueDefault;
-    }, [isMobile, isTablet, isDesktop, componentProps, propsKey]);
-    const targetClass = useMemo(() => {
-        if (targetClassValue) {
-            let cleanClassValue = camelCase(String(targetClassValue));
-            if (replace) {
-                const replaceList = castArray(replace);
-                cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
-            }
-            return `${prefix}${cleanClassValue}`.toLowerCase();
-        }
-        return null;
-    }, [targetClassValue, prefix, replace]);
-    return targetClass;
+  /** Generate a class depending on the user's device.
+   *
+   * Usage:
+   *  const sizeClass = useDeviceTargetClass(props, {
+   *    prefix: 'some-item_size_',
+   *    propsKey: 'size',
+   *  })
+   * Return: "some-item_size_m" (or "s", or "l", or something else)
+   *
+   * "componentProps" - "props" from component
+   * "hookProps" - special props for generating class
+   **/
+  const {
+    prefix = '',
+    propsKey,
+    replace = [/([A-Z])/g, '-$1']
+  } = hookProps;
+  const {
+    isMobile,
+    isTablet,
+    isDesktop
+  } = useUserDeviceContext();
+  const targetClassValue = useMemo(() => {
+    // prettier-ignore
+    const deviceCurrentMainType = isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';
+    const valueForDevice = componentProps[`${propsKey}${deviceCurrentMainType}`];
+    const valueDefault = componentProps[propsKey];
+    return valueForDevice || valueDefault;
+  }, [isMobile, isTablet, isDesktop, componentProps, propsKey]);
+  const targetClass = useMemo(() => {
+    if (targetClassValue) {
+      let cleanClassValue = camelCase(String(targetClassValue));
+      if (replace) {
+        const replaceList = castArray(replace);
+        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+      }
+      return `${prefix}${cleanClassValue}`.toLowerCase();
+    }
+    return null;
+  }, [targetClassValue, prefix, replace]);
+  return targetClass;
 }
+
 export { useDeviceTargetClass };