app-studio 0.2.2 → 0.2.4

package/dist/appstudio.esm.js

@@ -763,7 +763,106 @@ const generateCssRules = (selector, styles, getColor, mediaQueries) => {
   return rules;
 };
 // Function to apply styles to a component
-const applyStyle = (props, getColor, mediaQueries, devices) => {
+const computeStyleProps = (props, getColor, mediaQueries, devices) => {
+  const styleProps = {};
+  const keyframesList = [];
+  // Gestion de la taille de l'élément
+  const size = props.height !== undefined && props.width !== undefined && props.height === props.width ? props.height : props.size ? props.size : null;
+  if (size) {
+    styleProps.height = styleProps.width = size;
+  }
+  // Gestion du padding et de la marge
+  if (props.paddingHorizontal) {
+    styleProps.paddingLeft = props.paddingHorizontal;
+    styleProps.paddingRight = props.paddingHorizontal;
+  }
+  if (props.marginHorizontal) {
+    styleProps.marginLeft = props.marginHorizontal;
+    styleProps.marginRight = props.marginHorizontal;
+  }
+  if (props.paddingVertical) {
+    styleProps.paddingTop = props.paddingVertical;
+    styleProps.paddingBottom = props.paddingVertical;
+  }
+  if (props.marginVertical) {
+    styleProps.marginTop = props.marginVertical;
+    styleProps.marginBottom = props.marginVertical;
+  }
+  // Application des ombres si spécifié
+  if (props.shadow) {
+    if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
+      const shadowValue = typeof props.shadow === 'number' && Shadows[props.shadow] !== undefined ? props.shadow : 2;
+      if (Shadows[shadowValue]) {
+        const shadowColor = Color.hex.rgb(Shadows[shadowValue].shadowColor) || [];
+        styleProps['boxShadow'] = `${Shadows[shadowValue].shadowOffset.height}px ${Shadows[shadowValue].shadowOffset.width}px ${Shadows[shadowValue].shadowRadius}px rgba(${shadowColor.join(',')},${Shadows[shadowValue].shadowOpacity})`;
+      }
+    } else {
+      const shadowColor = Color.hex.rgb(props.shadow.shadowColor) || [];
+      styleProps['boxShadow'] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor.join(',')},${props.shadow.shadowOpacity})`;
+    }
+  }
+  // Gestion des animations
+  if (props.animate) {
+    const animation = props.animate;
+    const {
+      keyframesName,
+      keyframes
+    } = generateKeyframes(animation);
+    if (keyframes) {
+      keyframesList.push(keyframes);
+    }
+    styleProps.animationName = keyframesName;
+    styleProps.animationDuration = animation.duration || '1s';
+    styleProps.animationTimingFunction = animation.timingFunction || 'ease';
+    styleProps.animationDelay = animation.delay || '0s';
+    styleProps.animationIterationCount = `${animation.iterationCount || '1'}`;
+    styleProps.animationDirection = animation.direction || 'normal';
+    styleProps.animationFillMode = animation.fillMode || 'both';
+    styleProps.animationPlayState = animation.playState || 'running';
+  }
+  Object.keys(props).forEach(property => {
+    if (property !== 'style' && (isStyleProp(property) || extraKeys.has(property))) {
+      const value = props[property];
+      if (typeof value === 'object' && value !== null) {
+        // For other nested styles, exclude 'on' and 'media'
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {
+          on,
+          media,
+          ...nestedProps
+        } = value;
+        const nestedResult = applyStyle(nestedProps, getColor, mediaQueries, devices);
+        styleProps[property] = nestedResult.styleProps;
+        keyframesList.push(...(nestedResult.keyframes || []));
+      } else {
+        // Simple style property
+        styleProps[property] = value;
+      }
+    }
+  });
+  return {
+    styleProps,
+    keyframes: keyframesList
+  };
+};
+// Function to apply styles to a component
+const applyStyle = function (props, getColor, mediaQueries, devices, depth,
+// Add a depth parameter
+maxDepth // Set a maximum depth
+) {
+  if (depth === void 0) {
+    depth = 0;
+  }
+  if (maxDepth === void 0) {
+    maxDepth = 10;
+  }
+  if (depth > maxDepth) {
+    console.error('Maximum recursion depth reached in applyStyle');
+    return {
+      styleProps: {},
+      keyframes: []
+    };
+  }
   const styleProps = {};
   const keyframesList = [];
   // Gestion de la taille de l'élément
@@ -820,24 +919,20 @@ const applyStyle = (props, getColor, mediaQueries, devices) => {
     styleProps.animationFillMode = animation.fillMode || 'both';
     styleProps.animationPlayState = animation.playState || 'running';
   }
-  // Traitement des propriétés de style
   Object.keys(props).forEach(property => {
     if (property !== 'style' && (isStyleProp(property) || extraKeys.has(property))) {
       const value = props[property];
       if (typeof value === 'object' && value !== null) {
-        // Pour les propriétés comme 'on', 'media'
         if (property === 'on') {
-          // Pseudo-sélecteurs
           for (const event in value) {
             if (!styleProps[`&:${event}`]) {
               styleProps[`&:${event}`] = {};
             }
-            const nestedResult = applyStyle(value[event], getColor, mediaQueries, devices);
+            const nestedResult = computeStyleProps(value[event], getColor, mediaQueries, devices);
             Object.assign(styleProps[`&:${event}`], nestedResult.styleProps);
             keyframesList.push(...(nestedResult.keyframes || []));
           }
         } else if (property === 'media') {
-          // Media queries
           for (const screenOrDevices in value) {
             const mediaValue = value[screenOrDevices];
             if (mediaQueries[screenOrDevices]) {
@@ -845,7 +940,7 @@ const applyStyle = (props, getColor, mediaQueries, devices) => {
               if (!styleProps[mediaQuery]) {
                 styleProps[mediaQuery] = {};
               }
-              const nestedResult = applyStyle(mediaValue, getColor, mediaQueries, devices);
+              const nestedResult = computeStyleProps(mediaValue, getColor, mediaQueries, devices);
               Object.assign(styleProps[mediaQuery], nestedResult.styleProps);
               keyframesList.push(...(nestedResult.keyframes || []));
             } else if (devices[screenOrDevices]) {
@@ -856,7 +951,7 @@ const applyStyle = (props, getColor, mediaQueries, devices) => {
                   if (!styleProps[mediaQuery]) {
                     styleProps[mediaQuery] = {};
                   }
-                  const nestedResult = applyStyle(mediaValue, getColor, mediaQueries, devices);
+                  const nestedResult = computeStyleProps(mediaValue, getColor, mediaQueries, devices);
                   Object.assign(styleProps[mediaQuery], nestedResult.styleProps);
                   keyframesList.push(...(nestedResult.keyframes || []));
                 }
@@ -864,13 +959,19 @@ const applyStyle = (props, getColor, mediaQueries, devices) => {
             }
           }
         } else {
-          // Styles imbriqués
-          const nestedResult = applyStyle(value, getColor, mediaQueries, devices);
+          // For other nested styles, exclude 'on' and 'media'
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const {
+            on,
+            media,
+            ...nestedProps
+          } = value;
+          const nestedResult = computeStyleProps(nestedProps, getColor, mediaQueries, devices);
           styleProps[property] = nestedResult.styleProps;
           keyframesList.push(...(nestedResult.keyframes || []));
         }
       } else {
-        // Propriété de style simple
+        // Simple style property
         styleProps[property] = value;
       }
     }