native-pytech 1.0.88 → 1.0.90

package/dist/app/colorPage.d.ts

@@ -1,2 +1 @@
 export { default } from '../libs/colorPage';
-export * from '../libs/colorPage';

package/dist/app/colorPage.js

@@ -1,2 +1 @@
 export { default } from '../libs/colorPage';
-export * from '../libs/colorPage';

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

@@ -1,3 +1 @@
 export { default } from './src/Page';
-export { default as ColorPageProps } from './src/Page/types';
-export { default as renderItemProps } from './src/Item/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, ...pageProps }: Props) => React.JSX.Element>;
 export default _default;

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

@@ -1,12 +1,12 @@
+import React, { memo } from 'react';
 import { Host, Column, Row } from '@expo/ui/jetpack-compose';
-import React, { Fragment, memo } from 'react';
-export default memo(({ colorRows, renderItem, ...pageProps }) => {
+import { fillMaxWidth } from '@expo/ui/jetpack-compose/modifiers';
+import Item from '../Item';
+export default memo(({ colorRows, ...pageProps }) => {
     return (<Host style={{ flex: 1 }}>
-			<Column verticalArrangement={{ spacedBy: 16 }}>
-				{colorRows.map((row, index) => (<Row key={index} verticalArrangement="spaceEvenly">
-						{row.map((color, indexColor) => renderItem == null ? null : (<Fragment key={indexColor}>
-								{React.createElement(renderItem, { color, size: 55, ...pageProps })}
-							</Fragment>))}
+			<Column verticalArrangement={{ spacedBy: 2 }}>
+				{colorRows.map((row, index) => (<Row key={index} horizontalArrangement="spaceEvenly" verticalArrangement="center" modifiers={[fillMaxWidth()]}>
+						{row.map((color, indexColor) => (<Item key={color} color={color} size={55} {...pageProps}/>))}
 					</Row>))}
 			</Column>
 		</Host>);

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import Props from './types';
+declare const _default: React.MemoExoticComponent<({ color, size, selectedColor, onSelectColor, renderGradient, }: Props) => React.JSX.Element>;
+export default _default;

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

@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+import { Shape, Surface, Box } from '@expo/ui/jetpack-compose';
+import { background, clip, Shapes, clickable, paddingAll, alpha, size as sizeModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { colors } from '../../../../libs/components/Gradient';
+export default 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/Item/types.d.ts

@@ -1,6 +1,6 @@
 import type { ColorsType } from '../../../../libs/components/Gradient';
-import { BaseProps } from '../Page/types';
-type Props = BaseProps & {
+import PropsPage from '../Page/types';
+type Props = PropsPage & {
     /**
         Color to display.
     */

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

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

package/package.json

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