app-studio 0.1.21 → 0.1.23

package/dist/app-studio.cjs.development.js

@@ -569,6 +569,60 @@ const isStyleProp = property => {
   return StyleProps[property] !== undefined;
 };
 
+const defaultBreakpointsConfig = {
+  xs: 0,
+  sm: 340,
+  md: 560,
+  lg: 1080,
+  xl: 1300
+};
+const defaultDeviceConfig = {
+  mobile: ['xs', 'sm'],
+  tablet: ['md', 'lg'],
+  desktop: ['lg', 'xl']
+};
+const getMediaQueries = b => {
+  const defaultKeys = Object.keys(b);
+  const breakpointValue = defaultKeys.map(breakpoint => {
+    const value = {
+      breakpoint: breakpoint,
+      min: b[breakpoint],
+      max: 0
+    };
+    return value;
+  }).sort((a, b) => a.min - b.min);
+  breakpointValue.reduce((a, b) => {
+    if (b) a.max = b.min;
+    return b;
+  });
+  const query = {};
+  breakpointValue.map(sizeScreen => {
+    query[sizeScreen.breakpoint] = `only screen ${sizeScreen.min && sizeScreen.min >= 0 ? 'and (min-width:' + sizeScreen.min + 'px)' : ''} ${sizeScreen.max && sizeScreen.max >= 0 ? 'and (max-width:' + sizeScreen.max + 'px)' : ''}`;
+  });
+  return query;
+};
+const defaultScreenConfig = {
+  breakpoints: defaultBreakpointsConfig,
+  devices: defaultDeviceConfig,
+  mediaQueries: /*#__PURE__*/getMediaQueries(defaultBreakpointsConfig)
+};
+const ResponsiveContext = /*#__PURE__*/React.createContext(defaultScreenConfig);
+const useResponsiveContext = () => React.useContext(ResponsiveContext);
+const ResponsiveProvider = _ref => {
+  let {
+    breakpoints = defaultBreakpointsConfig,
+    devices = defaultDeviceConfig,
+    children
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(ResponsiveContext.Provider, {
+    value: {
+      breakpoints,
+      devices,
+      mediaQueries: getMediaQueries(breakpoints)
+    }
+  }, children);
+};
+
 const NumberPropsStyle = {};
 const NumberProps = ['numberOfLines', 'fontWeight', 'timeStamp', 'flex', 'flexGrow', 'flexShrink', 'order', 'zIndex', 'aspectRatio', 'shadowOpacity', 'shadowRadius', 'scale', 'opacity', 'min', 'max', 'now'];
 NumberProps.map(property => {
@@ -577,8 +631,12 @@ NumberProps.map(property => {
 const setSize = (newSize, styleProps) => {
   styleProps.height = styleProps.width = newSize;
 };
-const applyStyle = props => {
+const applyStyle = oldProps => {
   //console.log({ applyStyle: props });
+  // eslint-disable-next-line prefer-const
+  let {
+    ...props
+  } = oldProps;
   const {
     getColor
   } = useTheme();
@@ -586,7 +644,10 @@ const applyStyle = props => {
     mediaQueries,
     devices
   } = useResponsiveContext();
-  const styleProps = {};
+  // eslint-disable-next-line prefer-const
+  let styleProps = {
+    native: {}
+  };
   //const otherProps: any = {};
   if (props.onClick && styleProps.cursor == undefined) {
     styleProps.cursor = 'pointer';
@@ -622,6 +683,7 @@ const applyStyle = props => {
       const shadowColor = Color.hex.rgb(props.shadow.shadowColor).join(',');
       styleProps['boxShadow'] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor},${props.shadow.shadowOpacity})`;
     }
+    delete props['shadow'];
   }
   if (props.only) {
     const {
@@ -639,39 +701,43 @@ const applyStyle = props => {
     });
   }
   Object.keys(props).map(property => {
-    if (isStyleProp(property) || property == 'on' || property == 'media') {
-      if (typeof props[property] === 'object') {
-        if (property === 'on') {
-          for (const event in props[property]) {
-            styleProps['&:' + event] = applyStyle(props[property][event]);
-          }
-        } else if (property === 'media') {
-          for (const screenOrDevices in props[property]) {
-            //  console.log(screenOrDevices, mediaQueries[screenOrDevices]);
-            if (mediaQueries[screenOrDevices] !== undefined && props[property][screenOrDevices] !== undefined) {
-              styleProps['@media ' + mediaQueries[screenOrDevices]] = applyStyle(props[property][screenOrDevices]);
-            } else if (devices[screenOrDevices] !== undefined) {
-              // console.log(screen, devices[screenOrDevices], 'screen');
-              for (const deviceScreen in devices[screenOrDevices]) {
-                if (mediaQueries[devices[screenOrDevices][deviceScreen]] !== undefined && props[property][screenOrDevices] !== undefined) {
-                  // console.log(
-                  //   screenOrDevices,
-                  //   props[property][screenOrDevices]
-                  // );
-                  styleProps['@media ' + mediaQueries[devices[screenOrDevices][deviceScreen]]] = applyStyle(props[property][screenOrDevices]);
+    if (property !== 'shadow' && property !== 'size') {
+      if (isStyleProp(property) || property == 'on' || property == 'media') {
+        if (typeof props[property] === 'object') {
+          if (property === 'on') {
+            for (const event in props[property]) {
+              styleProps['&:' + event] = applyStyle(props[property][event]);
+            }
+          } else if (property === 'media') {
+            for (const screenOrDevices in props[property]) {
+              //  console.log(screenOrDevices, mediaQueries[screenOrDevices]);
+              if (mediaQueries[screenOrDevices] !== undefined && props[property][screenOrDevices] !== undefined) {
+                styleProps['@media ' + mediaQueries[screenOrDevices]] = applyStyle(props[property][screenOrDevices]);
+              } else if (devices[screenOrDevices] !== undefined) {
+                // console.log(screen, devices[screenOrDevices], 'screen');
+                for (const deviceScreen in devices[screenOrDevices]) {
+                  if (mediaQueries[devices[screenOrDevices][deviceScreen]] !== undefined && props[property][screenOrDevices] !== undefined) {
+                    // console.log(
+                    //   screenOrDevices,
+                    //   props[property][screenOrDevices]
+                    // );
+                    styleProps['@media ' + mediaQueries[devices[screenOrDevices][deviceScreen]]] = applyStyle(props[property][screenOrDevices]);
+                  }
                 }
               }
             }
+          } else {
+            styleProps[property] = applyStyle(props[property]);
           }
+        } else if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
+          styleProps[property] = props[property] + 'px';
+        } else if (property.toLowerCase().indexOf('color') !== -1) {
+          styleProps[property] = getColor(props[property]);
         } else {
-          styleProps[property] = applyStyle(props[property]);
+          styleProps[property] = props[property];
         }
-      } else if (typeof props[property] === 'number' && NumberPropsStyle[property] === undefined) {
-        styleProps[property] = props[property] + 'px';
-      } else if (property.toLowerCase().indexOf('color') !== -1) {
-        styleProps[property] = getColor(props[property]);
       } else {
-        styleProps[property] = props[property];
+        styleProps['native'][property] = props[property];
       }
     }
   });
@@ -720,17 +786,23 @@ const applyStyle = props => {
 //     .join('\n');
 //   return mediaQueries;
 // };
-const dynamicStyle = props => applyStyle(props);
-const ElementComponent = styled.div`
-  ${dynamicStyle};
+const getElementComponent = cssData => styled.div`
+  ${cssData}
 `;
-class Element extends React__default.PureComponent {
-  render() {
-    return /*#__PURE__*/React__default.createElement(ElementComponent, Object.assign({}, this.props, {
-      onClick: this.props.onPress !== undefined ? this.props.onPress : this.props.onClick
-    }));
-  }
-}
+const Element = props => {
+  // Utilisez useMemo pour mémoriser le résultat de `applyStyle`
+  const {
+    native = {},
+    ...cssData
+  } = React.useMemo(() => applyStyle(props), [props]);
+  // Mémoriser le composant stylisé pour éviter de le recréer inutilement
+  const ElementComponent = React.useMemo(() => getElementComponent(cssData), [cssData]);
+  // Gérer le clic en un seul endroit pour éviter la duplication et l'incohérence
+  const handleClick = props.onPress !== undefined ? props.onPress : props.onClick;
+  return /*#__PURE__*/React__default.createElement(ElementComponent, Object.assign({}, native, {
+    onClick: handleClick
+  }));
+};
 
 const View = props => /*#__PURE__*/React__default.createElement(Element, Object.assign({}, props));
 const Div = View;
@@ -837,60 +909,6 @@ function isMobile() {
   return navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i);
 }
 
-const defaultBreakpointsConfig = {
-  xs: 0,
-  sm: 340,
-  md: 560,
-  lg: 1080,
-  xl: 1300
-};
-const defaultDeviceConfig = {
-  mobile: ['xs', 'sm'],
-  tablet: ['md', 'lg'],
-  desktop: ['lg', 'xl']
-};
-const getMediaQueries = b => {
-  const defaultKeys = Object.keys(b);
-  const breakpointValue = defaultKeys.map(breakpoint => {
-    const value = {
-      breakpoint: breakpoint,
-      min: b[breakpoint],
-      max: 0
-    };
-    return value;
-  }).sort((a, b) => a.min - b.min);
-  breakpointValue.reduce((a, b) => {
-    if (b) a.max = b.min;
-    return b;
-  });
-  const query = {};
-  breakpointValue.map(sizeScreen => {
-    query[sizeScreen.breakpoint] = `only screen ${sizeScreen.min && sizeScreen.min >= 0 ? 'and (min-width:' + sizeScreen.min + 'px)' : ''} ${sizeScreen.max && sizeScreen.max >= 0 ? 'and (max-width:' + sizeScreen.max + 'px)' : ''}`;
-  });
-  return query;
-};
-const defaultScreenConfig = {
-  breakpoints: defaultBreakpointsConfig,
-  devices: defaultDeviceConfig,
-  mediaQueries: /*#__PURE__*/getMediaQueries(defaultBreakpointsConfig)
-};
-const ResponsiveContext = /*#__PURE__*/React.createContext(defaultScreenConfig);
-const useResponsiveContext = () => React.useContext(ResponsiveContext);
-const ResponsiveProvider = _ref => {
-  let {
-    breakpoints = defaultBreakpointsConfig,
-    devices = defaultDeviceConfig,
-    children
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement(ResponsiveContext.Provider, {
-    value: {
-      breakpoints,
-      devices,
-      mediaQueries: getMediaQueries(breakpoints)
-    }
-  }, children);
-};
-
 const useMount = callback => {
   React.useEffect(() => {
     callback();