diff --git a/example/src/LayoutExample.js b/example/src/LayoutExample.js deleted file mode 100644 index e03b63b91..000000000 --- a/example/src/LayoutExample.js +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from "react"; -import { View } from "react-native"; -import { - StarRating, - Surface, - ScreenContainer, - Divider, - Center, - Circle, - withTheme, -} from "@draftbit/ui"; -import Section from "./Section"; - -function Box({ width = 50, height = 50 }) { - return ( - - ); -} - -function LayoutExample({ theme }) { - return ( - -
- - - -
- -
-
- - - -
-
- - -
- -
-
- ); -} - -export default withTheme(LayoutExample); diff --git a/example/src/LayoutExample.tsx b/example/src/LayoutExample.tsx new file mode 100644 index 000000000..b96d1576a --- /dev/null +++ b/example/src/LayoutExample.tsx @@ -0,0 +1,79 @@ +import * as React from "react"; +import { Text } from "react-native"; +import { + AspectRatio, + HStack, + VStack, + ZStack, + Center, + Circle, + Square, +} from "@draftbit/ui"; +import Section, { Container } from "./Section"; + +const LayoutExample = () => { + return ( + +
+
+ Centered Text +
+
+
+ +
+
+ +
+
+ +
+
+ + HStack 1 + HStack 2 + +
+
+ + VStack 1 + VStack 2 + +
+
+ + ZStack 1 + ZStack 2 + +
+
+ ); +}; + +export default LayoutExample; diff --git a/packages/core/src/components/Layout/AspectRatio.tsx b/packages/core/src/components/Layout/AspectRatio.tsx new file mode 100644 index 000000000..1769dee91 --- /dev/null +++ b/packages/core/src/components/Layout/AspectRatio.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { View, ViewProps } from "react-native"; + +interface AspectRatioProps extends ViewProps { + aspectRatio?: number; +} + +const AspectRatio: React.FC = ({ + aspectRatio = 1, + style, + ...rest +}) => { + return ; +}; + +export default AspectRatio; diff --git a/packages/core/src/components/Layout/Center.tsx b/packages/core/src/components/Layout/Center.tsx new file mode 100644 index 000000000..9d3a86cd1 --- /dev/null +++ b/packages/core/src/components/Layout/Center.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { View, ViewProps, StyleSheet } from "react-native"; + +const Center: React.FC = ({ style, ...rest }) => { + return ; +}; + +const styles = StyleSheet.create({ + center: { + alignItems: "center", + justifyContent: "center", + }, +}); + +export default Center; diff --git a/packages/core/src/components/Layout/Circle.tsx b/packages/core/src/components/Layout/Circle.tsx new file mode 100644 index 000000000..8b930be72 --- /dev/null +++ b/packages/core/src/components/Layout/Circle.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import { ViewProps, StyleSheet } from "react-native"; +import Square from "./Square"; + +interface CircleProps extends ViewProps { + size?: number; +} + +const Circle: React.FC = ({ size, style, ...rest }) => { + return ; +}; + +const styles = StyleSheet.create({ + circle: { + borderRadius: 1000, // Border radius maxes out as a circle, use an overly large number to ensure circle in all cases + }, +}); + +export default Circle; diff --git a/packages/core/src/components/Layout/HStack.tsx b/packages/core/src/components/Layout/HStack.tsx new file mode 100644 index 000000000..6c7ebdad6 --- /dev/null +++ b/packages/core/src/components/Layout/HStack.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { View, ViewProps, StyleSheet } from "react-native"; + +const HStack: React.FC = ({ style, ...rest }) => { + return ; +}; + +const styles = StyleSheet.create({ + hStack: { + flexDirection: "row", + }, +}); + +export default HStack; diff --git a/packages/core/src/components/Layout/Square.tsx b/packages/core/src/components/Layout/Square.tsx new file mode 100644 index 000000000..493d7f18b --- /dev/null +++ b/packages/core/src/components/Layout/Square.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { ViewProps } from "react-native"; +import Center from "./Center"; + +interface SquareProps extends ViewProps { + size?: number; +} + +const Square: React.FC = ({ size, style, onLayout, ...rest }) => { + const [calculatedSize, setCalculatedSize] = React.useState(0); + + return ( +
{ + const layout = e.nativeEvent.layout; + setCalculatedSize(Math.max(layout.width, layout.height)); + onLayout?.(e); + }} + {...rest} + style={[ + style, + size != undefined ? { width: size, height: size } : {}, + calculatedSize > 0 + ? { + width: calculatedSize, + height: calculatedSize, + } + : {}, + ]} + /> + ); +}; + +export default Square; diff --git a/packages/core/src/components/Layout/VStack.tsx b/packages/core/src/components/Layout/VStack.tsx new file mode 100644 index 000000000..035112cf2 --- /dev/null +++ b/packages/core/src/components/Layout/VStack.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { View, ViewProps, StyleSheet } from "react-native"; + +const VStack: React.FC = ({ style, ...rest }) => { + return ; +}; + +const styles = StyleSheet.create({ + vStack: { + flexDirection: "column", + }, +}); + +export default VStack; diff --git a/packages/core/src/components/Layout/ZStack.tsx b/packages/core/src/components/Layout/ZStack.tsx new file mode 100644 index 000000000..086acafdb --- /dev/null +++ b/packages/core/src/components/Layout/ZStack.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import { View, ViewProps } from "react-native"; + +interface ZStackProps extends ViewProps { + reversed?: boolean; +} + +const ZStack: React.FC = ({ reversed, children, ...rest }) => { + const absoluteChildren = React.useMemo(() => { + let childrenArray = React.Children.toArray( + children + ) as React.ReactElement[]; + + if (reversed) { + childrenArray = childrenArray.reverse(); + } + + return childrenArray.map((child, index) => { + const props = child.props || {}; + return React.cloneElement( + child, + { + ...props, + style: { position: "absolute", zIndex: index + 1, ...props.style }, + }, + props.children + ); + }); + }, [children, reversed]); + + return {absoluteChildren}; +}; + +export default ZStack; diff --git a/packages/core/src/components/Layout/index.tsx b/packages/core/src/components/Layout/index.tsx new file mode 100644 index 000000000..c771d3611 --- /dev/null +++ b/packages/core/src/components/Layout/index.tsx @@ -0,0 +1,7 @@ +export { default as AspectRatio } from "./AspectRatio"; +export { default as Circle } from "./Circle"; +export { default as Center } from "./Center"; +export { default as HStack } from "./HStack"; +export { default as VStack } from "./VStack"; +export { default as ZStack } from "./ZStack"; +export { default as Square } from "./Square"; diff --git a/packages/core/src/components/Layout.tsx b/packages/core/src/deprecated-components/Layout.tsx similarity index 95% rename from packages/core/src/components/Layout.tsx rename to packages/core/src/deprecated-components/Layout.tsx index fed4b5790..97cbb2223 100644 --- a/packages/core/src/components/Layout.tsx +++ b/packages/core/src/deprecated-components/Layout.tsx @@ -3,6 +3,9 @@ import { View, StyleProp, ViewStyle } from "react-native"; // @ts-ignore import type { ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet"; +/** + * @deprecated DEPRECATED + */ export function Center({ width = 240, height = 200, @@ -36,6 +39,9 @@ export function Center({ ); } +/** + * @deprecated DEPRECATED + */ export function Circle({ size = 50, bgColor, @@ -65,6 +71,9 @@ export function Circle({ ); } +/** + * @deprecated DEPRECATED + */ export function Square({ size = 50, bgColor, @@ -122,6 +131,9 @@ export function Row({ ); } +/** + * @deprecated DEPRECATED + */ export function Spacer({ top = 8, right = 8, diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx index 5386d77bd..8ee669220 100644 --- a/packages/core/src/index.tsx +++ b/packages/core/src/index.tsx @@ -25,7 +25,6 @@ export { ActionSheetCancel, } from "./components/ActionSheet"; export { Swiper, SwiperItem } from "./components/Swiper"; -export { Center, Circle, Square, Spacer } from "./components/Layout"; export { RadioButton, RadioButtonGroup, @@ -64,6 +63,15 @@ export { CodeInputCell, CodeInputText, } from "./components/CodeInput"; +export { + AspectRatio, + Circle, + Center, + HStack, + VStack, + ZStack, + Square, +} from "./components/Layout"; /* Deprecated: Fix or Delete! */ export { default as AccordionItem } from "./deprecated-components/AccordionItem"; @@ -77,7 +85,14 @@ export { default as CircleImage } from "./deprecated-components/CircleImage"; export { default as Container } from "./deprecated-components/Container"; export { default as FAB } from "./deprecated-components/FAB"; export { default as FieldSearchBarFull } from "./deprecated-components/FieldSearchBarFull"; -export { Row, Stack } from "./components/Layout"; +export { + Center as DeprecatedCenter, + Circle as DeprecatedCircle, + Square as DeprecatedSquare, + Spacer, + Row, + Stack, +} from "./deprecated-components/Layout"; export { default as ToggleButton } from "./deprecated-components/ToggleButton"; export { default as ProgressBar } from "./deprecated-components/ProgressBar"; export { default as ProgressCircle } from "./deprecated-components/ProgressCircle"; diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx index 9787f303b..6cdb8f7e9 100644 --- a/packages/ui/src/index.tsx +++ b/packages/ui/src/index.tsx @@ -62,6 +62,10 @@ export { CodeInput, CodeInputCell, CodeInputText, + AspectRatio, + HStack, + VStack, + ZStack, } from "@draftbit/core"; /**