Skip to content

Commit bc3d10d

Browse files
RedonAllaRedonAlla
committed
feat(layout): add new layout component package
Introduced a new `@flexnative/layout` package in the project to provide a set of components for screen layout management in React Native applications. This includes the `Block` component, which supports flexible layout properties such as flex, alignment, and gap spacing. The implementation is supported by appropriate TypeScript interfaces and configuration, enhancing modularity and reusability within the application. Additionally, updated existing package files to reflect this inclusion.
1 parent 44e612e commit bc3d10d

File tree

6 files changed

+202
-3
lines changed

6 files changed

+202
-3
lines changed

‎npm-packages/package-lock.json

Lines changed: 13 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎npm-packages/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
"src/packages/components/ra-tags",
1515
"src/packages/components/ra-inputs",
1616
"src/shared/ui-constants",
17-
"src/packages/components/navigation"
17+
"src/packages/components/navigation",
18+
"src/packages/components/layout"
1819
],
1920
"version": "0.0.1",
2021
"description": "React Native Framework",

‎npm-packages/src/packages/components/layout/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "@flexnative/layout",
3+
"version": "0.0.1",
4+
"description": "A set of horizontal and vertical lines that divide the mobile app screen into columns and rows.",
5+
"main": "dist/index.js",
6+
"types": "dist/index.d.ts",
7+
"files": [
8+
"dist/**/*"
9+
],
10+
"exports": {
11+
".": "./dist/index.js"
12+
},
13+
"scripts": {
14+
"build": "tsc",
15+
"prepare": "npm run build",
16+
"test": "echo \"Error: no test specified\" && exit 1"
17+
},
18+
"repository": {
19+
"type": "git",
20+
"url": "git+https://github.com/RedonAlla/flexnative.git",
21+
"directory": "npm-packages/src/packages/layout"
22+
},
23+
"keywords": [
24+
"react",
25+
"react-native",
26+
"layout"
27+
],
28+
"author": "Redon Alla",
29+
"license": "MIT",
30+
"bugs": {
31+
"url": "https://github.com/RedonAlla/flexnative/issues"
32+
},
33+
"homepage": "https://redonalla.github.io/flexnative/"
34+
}

‎npm-packages/src/packages/components/layout/src/block/block.props.ts

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/**
2+
* @ Author: Redon Alla
3+
* @ Create Time: 2024-12-16 21:53:03
4+
* @ Modified by: Redon Alla
5+
* @ Modified time: 2024-12-16 22:56:29
6+
* @ Description: Define an interface BlockProps which extends properties from ViewProps.
7+
*/
8+
9+
import { ColorValue, ViewProps, ViewStyle } from "react-native";
10+
11+
12+
/**
13+
* Define an interface BlockProps which extends properties from ViewProps.
14+
*/
15+
export interface BlockProps extends ViewProps {
16+
/**
17+
* Optional property to set flex-grow, flex-shrink, and flex-basis for a component.
18+
*/
19+
flex?: ViewStyle["flex"];
20+
21+
/**
22+
* Optional property to define justification of content along the main axis.
23+
*/
24+
justify?: ViewStyle["justifyContent"];
25+
26+
/**
27+
* Alternative optional property name for justify content along the main axis.
28+
*/
29+
justifyContent?: ViewStyle["justifyContent"];
30+
31+
/**
32+
* Optional property to set alignment of items along the cross-axis.
33+
*/
34+
align?: ViewStyle["alignItems"];
35+
36+
/**
37+
* Alternative optional property name for aligning items along the cross-axis.
38+
*/
39+
alignItems?: ViewStyle["alignItems"];
40+
41+
/**
42+
* Optional property to define alignment of content when there is extra space in the cross-axis.
43+
*/
44+
content?: ViewStyle["alignContent"];
45+
46+
/**
47+
* Alternative optional property name for alignment of content along the cross-axis.
48+
*/
49+
alignContent?: ViewStyle["alignContent"];
50+
51+
/**
52+
* Optional property to specify the width of the component.
53+
*/
54+
width?: ViewStyle["width"];
55+
56+
/**
57+
* Optional property to specify the height of the component.
58+
*/
59+
height?: ViewStyle["height"];
60+
61+
/**
62+
* Optional property to control if children should wrap onto multiple lines.
63+
*/
64+
wrap?: ViewStyle["flexWrap"];
65+
66+
/**
67+
* Optional property to specify the gap between rows or column in grid layout.
68+
*/
69+
gap?: ViewStyle["rowGap" | "gap"];
70+
71+
/**
72+
* Optional boolean property to determine if the layout should be in a row format.
73+
* If set to true, it likely indicates that the component's children should be displayed horizontally.
74+
*/
75+
row?: boolean;
76+
77+
/**
78+
* Optional property 'backgroundColor' of type 'ColorValue'.
79+
*/
80+
backgroundColor?: ColorValue;
81+
82+
/**
83+
* Optional ReactNode representing the child nodes or elements within the component.
84+
*/
85+
children?: React.ReactNode;
86+
}

‎npm-packages/src/packages/components/layout/src/block/index.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* @ Author: Redon Alla
3+
* @ Create Time: 2024-12-16 22:06:38
4+
* @ Modified by: Redon Alla
5+
* @ Modified time: 2024-12-16 23:01:29
6+
* @ Description: This code defines a `Block` component in TypeScript using React and React Native. The `Block` component extends `React.PureComponent`, which optimizes the component by preventing unnecessary re-renders when the props haven't changed.
7+
*/
8+
9+
import React from "react";
10+
import { BlockProps } from "./block.props";
11+
import { StyleProp, View, ViewStyle } from "react-native";
12+
13+
14+
export default class Block extends React.PureComponent<BlockProps> {
15+
render(): React.ReactNode {
16+
const {
17+
flex,
18+
row,
19+
justify,
20+
justifyContent,
21+
align,
22+
alignItems,
23+
content,
24+
alignContent,
25+
wrap,
26+
width,
27+
height,
28+
backgroundColor,
29+
gap,
30+
style,
31+
children,
32+
...rest
33+
} = this.props;
34+
35+
const blockStyle: StyleProp<ViewStyle> = [
36+
flex !== undefined && { flex },
37+
row && { flexDirection: "row" },
38+
Boolean(row && gap) && { rowGap: gap },
39+
Boolean(!row && gap) && { columnGap: gap },
40+
justify !== undefined && { justifyContent: justify },
41+
justifyContent !== undefined && { justifyContent },
42+
align !== undefined && { alignItems: align },
43+
alignItems !== undefined && { alignItems },
44+
content !== undefined && { alignContent: content },
45+
alignContent !== undefined && { alignContent },
46+
wrap !== undefined && { flexWrap: wrap },
47+
width !== undefined && { width },
48+
height !== undefined && { height },
49+
{ backgroundColor: backgroundColor || 'transparent' },
50+
style
51+
];
52+
53+
return (
54+
<View style={blockStyle} {...rest}>
55+
{children}
56+
</View>
57+
);
58+
}
59+
}

‎npm-packages/src/packages/components/layout/tsconfig.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"extends": "../../../../tsconfig.json",
3+
"compilerOptions": {
4+
"outDir": "dist",
5+
"rootDir": "src",
6+
},
7+
"include": ["src"]
8+
}

0 commit comments

Comments
 (0)