From 64a891b8026efcc346392b77a162900a8f970ab1 Mon Sep 17 00:00:00 2001 From: Jonathan Holmes Date: Thu, 10 Aug 2023 12:25:10 +1200 Subject: [PATCH] Layout and padding changes --- package.json | 2 +- src/Layouts/RowView.tsx | 118 +++++++++++++++++++++++++++++++++------- src/Utility/Padding.tsx | 52 +++++++++--------- src/Utility/Types.ts | 5 ++ src/Views/ListView.tsx | 14 +---- 5 files changed, 131 insertions(+), 60 deletions(-) diff --git a/package.json b/package.json index 679f4ea..3af4f60 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@rbxts/zenui-core", - "version": "0.7.0", + "version": "0.8.0", "description": "", "main": "out/init.lua", "scripts": { diff --git a/src/Layouts/RowView.tsx b/src/Layouts/RowView.tsx index 2e0b927..4e61ce9 100644 --- a/src/Layouts/RowView.tsx +++ b/src/Layouts/RowView.tsx @@ -1,6 +1,6 @@ import Roact from "@rbxts/roact"; import Padding, { UPaddingDim } from "../Utility/Padding"; -import { InferEnumNames, RoactEnum } from "../Utility/Types"; +import { InferEnumNames, WritablePropertiesOf, RoactEnum } from "../Utility/Types"; import { View } from "../Views/View"; export interface RowProps { @@ -13,6 +13,12 @@ export interface RowProps { * The maximum height of this row */ readonly MaxHeight?: number; + + // /** + // * Automatic Height + // */ + // readonly AutomaticHeight?: boolean; + /** * The minimum height of this row */ @@ -46,6 +52,11 @@ export function Row(props: Roact.PropsWithChildren) { return <>{props[Roact.Children]}; } +type ScrollingFrameProperties = WritablePropertiesOf< + Omit, + keyof GuiObject +>; + interface RowViewDefaultProps { /** * The size of this row view container @@ -56,6 +67,11 @@ interface RowViewDefaultProps { * The width of the rows (if not set, will be automatic) */ readonly RowWidth: UDim; + + /** + * Whether or not this `RowView` scrols + */ + readonly Scrolling: boolean | Partial; } export interface RowViewProps extends RowViewDefaultProps { @@ -66,7 +82,7 @@ export interface RowViewProps extends RowViewDefaultProps { /** * The amount of padding around the column view */ - readonly Padding?: Padding | UPaddingDim; + readonly Padding?: UPaddingDim; /** * The horizontal alignment of the row @@ -93,11 +109,30 @@ export interface RowViewProps extends RowViewDefaultProps { * etc. */ export class RowView extends Roact.Component { + public contentsSize: Roact.Binding; + public setContentSize: Roact.BindingFunction; + public static defaultProps: RowViewDefaultProps = { RowWidth: new UDim(), Size: new UDim2(1, 0, 1, 0), + Scrolling: false, }; + private layoutRef = Roact.createRef(); + + public constructor(props: RowViewProps) { + super(props); + [this.contentsSize, this.setContentSize] = Roact.createBinding(new Vector2()); + } + + protected didMount(): void { + const layoutRef = this.layoutRef.getValue(); + + if (layoutRef !== undefined) { + this.setContentSize(layoutRef.AbsoluteContentSize); + } + } + /** * Represents a Row in a `` ({@link RowView}) */ @@ -138,6 +173,7 @@ export class RowView extends Roact.Component { for (const [key, child] of children) { if (child.component === Row) { const props = child.props as RowProps; + containerMap.set( key, { } } - return ( - - - {(this.props.MinSize !== undefined || this.props.MaxSize !== undefined) && ( - >({ + ScrollBarThickness: 5, + ScrollBarImageColor3: Color3.fromRGB(0, 0, 0), + }); + const properties = typeIs(this.props.Scrolling, "boolean") + ? defaultProperties + : { ...defaultProperties, ...this.props.Scrolling }; + + return ( + new UDim2(0, size.X, 0, size.Y))} + > + - )} - {padding && } - {containerMap} - - ); + {(this.props.MinSize !== undefined || this.props.MaxSize !== undefined) && ( + + )} + {padding && } + {containerMap} + + ); + } else { + return ( + + + {(this.props.MinSize !== undefined || this.props.MaxSize !== undefined) && ( + + )} + {padding && } + {containerMap} + + ); + } } } diff --git a/src/Utility/Padding.tsx b/src/Utility/Padding.tsx index fa549c8..740207a 100644 --- a/src/Utility/Padding.tsx +++ b/src/Utility/Padding.tsx @@ -132,6 +132,10 @@ export class UPaddingDim { return new UPaddingDim(new UDim(), udim, new UDim(), udim); } + public static uniform(this: void, scale: number, offset: number) { + return UPaddingDim.axis(new UDim(scale, offset), new UDim(scale, offset)); + } + /** @deprecated */ public static fromScale(this: void, scale: Padding) { const { Left = 0, Right = 0, Top = 0, Bottom = 0, Vertical = 0, Horizontal = 0 } = scale; @@ -161,13 +165,22 @@ export class UPaddingDim { this.Bottom.sub(other.Bottom), ); } + + public Into(): Omit { + return { + PaddingLeft: this.Left, + PaddingTop: this.Top, + PaddingRight: this.Right, + PaddingBottom: this.Bottom, + } as Omit; + } } /** @deprecated Now `UPaddingDim` */ export const PaddingDim = UPaddingDim; export type PaddingDim = UPaddingDim; -export default interface Padding { +export interface Padding { Left?: number; Top?: number; Right?: number; @@ -176,37 +189,22 @@ export default interface Padding { Horizontal?: number; } export interface PaddingProps { - Padding: Padding | UPaddingDim; - /** @deprecated */ - ForwardRef?: (rbx: UIPadding, padding: Padding) => void; + Padding: UPaddingDim | Padding; } -export default function Padding({ Padding: padding, ForwardRef: forwardRef }: PaddingProps) { - if (padding instanceof UPaddingDim) { - return ( - - ); +export function Padding(props: PaddingProps) { + if (!(props.Padding instanceof UPaddingDim)) { + props.Padding = UPaddingDim.fromOffset(props.Padding); } - const { Left = 0, Right = 0, Top = 0, Bottom = 0, Vertical = 0, Horizontal = 0 } = padding; - + const padding = props.Padding; return ( { - forwardRef(ref, padding); - } - : undefined - } - PaddingBottom={new UDim(0, Bottom + Vertical)} - PaddingTop={new UDim(0, Top + Vertical)} - PaddingRight={new UDim(0, Right + Horizontal)} - PaddingLeft={new UDim(0, Left + Horizontal)} + PaddingLeft={padding.Left} + PaddingTop={padding.Top} + PaddingRight={padding.Right} + PaddingBottom={padding.Bottom} /> ); } + +export default Padding; diff --git a/src/Utility/Types.ts b/src/Utility/Types.ts index f46c237..84b1d3f 100644 --- a/src/Utility/Types.ts +++ b/src/Utility/Types.ts @@ -27,3 +27,8 @@ export interface ElementOf extends Roact.Element { /** @internal */ export const isArray = t.array(t.any); + +export type WritablePropertiesOf< + TInstance extends Instance, + TExcludeProps extends keyof TInstance = keyof Instance, +> = WritableProperties, symbol>>; diff --git a/src/Views/ListView.tsx b/src/Views/ListView.tsx index f428fcb..b6de57e 100644 --- a/src/Views/ListView.tsx +++ b/src/Views/ListView.tsx @@ -1,5 +1,5 @@ import Roact from "@rbxts/roact"; -import Padding from "../Utility/Padding"; +import Padding, { UPaddingDim } from "../Utility/Padding"; import { InferEnumNames } from "../Utility/Types"; import { View, ViewProps } from "./View"; @@ -18,7 +18,7 @@ export interface ListViewProps extends Pick; readonly VerticalAlignment?: InferEnumNames; - readonly Padding?: Padding; + readonly Padding?: UPaddingDim; } /** @@ -94,15 +94,7 @@ export class ListView extends Roact.Component { }, }} /> - {padding !== undefined && ( - { - const { Left = 0, Right = 0, Top = 0, Bottom = 0, Vertical = 0, Horizontal = 0 } = padding; - this.setPadding(new Vector2(Left + Right + Horizontal * 2, Top + Bottom + Vertical * 2)); - }} - /> - )} + {padding !== undefined && } {this.props[Roact.Children]} );