native-pytech 1.0.87 → 1.0.89

package/dist/libs/colorPage/index.d.ts

@@ -1,3 +1,2 @@
 export { default } from './src/Page';
-export { default as ColorPageProps } from './src/Page/types';
-export { default as renderItemProps } from './src/Item/types';
+export { default as ColorPageProps, renderGradientProps } from './src/Page/types';

package/dist/libs/colorPage/src/Content/index.android.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type Props from './types';
-declare const _default: React.MemoExoticComponent<({ colorRows, renderItem, ...pageProps }: Props) => React.JSX.Element>;
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ colorRows, renderGradient, ...pageProps }: Props) => React.JSX.Element>;
 export default _default;

package/dist/libs/colorPage/src/Content/index.android.js

@@ -1,11 +1,49 @@
-import { Host, Column, Row } from '@expo/ui/jetpack-compose';
 import React, { memo } from 'react';
-export default memo(({ colorRows, renderItem, ...pageProps }) => {
+import { Shape, Surface, Box, Host, Column, Row } from '@expo/ui/jetpack-compose';
+import { background, clip, Shapes, clickable, paddingAll, alpha, size as sizeModifier, fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';
+import { colors } from '../../../../libs/components/Gradient';
+export default memo(({ colorRows, renderGradient, ...pageProps }) => {
     return (<Host style={{ flex: 1 }}>
-			<Column verticalArrangement={{ spacedBy: 16 }}>
-				{colorRows.map((row, index) => (<Row key={index} verticalArrangement="spaceEvenly">
-						{row.map((color, indexColor) => (renderItem?.({ color, size: 55, ...pageProps })))}
+			<Column verticalArrangement={{ spacedBy: 2 }}>
+				{colorRows.map((row, index) => (<Row key={index} horizontalArrangement="spaceEvenly" verticalArrangement="center" modifiers={[fillMaxWidth()]}>
+						{row.map((color, indexColor) => renderGradient == null ? null : (<ItemRenderer key={color} color={color} size={55} renderGradient={renderGradient} {...pageProps}/>))}
 					</Row>))}
 			</Column>
 		</Host>);
 });
+const ItemRenderer = memo(({ color, size, selectedColor, onSelectColor, renderGradient, }) => {
+    if (!renderGradient)
+        return null;
+    const isSelected = color === selectedColor;
+    const innerBorderWidth = 2;
+    const outerBorderWidth = 3;
+    return (<Surface color='#00000000' shape={Shape.RoundedCorner({
+            cornerRadii: {
+                topStart: size,
+                topEnd: size,
+                bottomStart: size,
+                bottomEnd: size,
+            },
+        })} border={{ width: outerBorderWidth, color: isSelected ? colors[color].middle : '#00000000' }} modifiers={[clip(Shapes.Circle)]}>
+            <Box contentAlignment="center" modifiers={[
+            background('#00000000'),
+            paddingAll(outerBorderWidth * 2),
+            clip(Shapes.Circle),
+            clickable(() => onSelectColor?.(color))
+        ]}>
+
+                <Box contentAlignment="center" modifiers={[sizeModifier(size, size)]}>
+
+                    {!isSelected &&
+            <Box contentAlignment="center" modifiers={[sizeModifier(size, size)]}>
+                            {React.createElement(renderGradient, { color, size })}
+                            <Box modifiers={[sizeModifier(size, size), alpha(0.25), background('#FFFFFF')]}/>
+                        </Box>}
+
+					{React.createElement(renderGradient, { color, size: size - (!isSelected ? innerBorderWidth * 2 : 0) })}
+
+                </Box>
+
+            </Box>
+        </Surface>);
+});

package/dist/libs/colorPage/src/Content/types.d.ts

@@ -1,5 +1,5 @@
 import type { ColorsType } from '../../../../libs/components/Gradient';
-import PropsPage from '../Page/types';
+import PropsPage, { renderGradientProps } from '../Page/types';
 type Props = PropsPage & {
     /**
         List of rows of colors to display.
@@ -7,4 +7,5 @@ type Props = PropsPage & {
     */
     colorRows: ColorsType[][];
 };
+export type DecoratorProps = renderGradientProps & PropsPage;
 export default Props;

package/dist/libs/colorPage/src/Page/types.d.ts

@@ -1,5 +1,4 @@
 import type { ColorsType } from '../../../../libs/components/Gradient';
-import type itemProps from '../Item/types';
 export type BaseProps = {
     /**
         Title of the date picker.
@@ -11,10 +10,20 @@ export type BaseProps = {
     */
     onSelectColor?: (color: ColorsType) => void;
 };
+export type renderGradientProps = {
+    /**
+        Color to display.
+    */
+    color: ColorsType;
+    /**
+        Size of the item.
+    */
+    size: number;
+};
 type Props = BaseProps & {
     /**
         Function to render the item.
     */
-    renderItem?: (props: itemProps) => React.ReactNode;
+    renderGradient?: (props: renderGradientProps) => React.ReactNode;
 };
 export default Props;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "native-pytech",
-  "version": "1.0.87",
+  "version": "1.0.89",
   "description": "Libreria de React Native Pytech",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",