65 lines
No EOL
1.7 KiB
TypeScript
65 lines
No EOL
1.7 KiB
TypeScript
import Roact from "@rbxts/roact"
|
|
import Canvas from "./canvas"
|
|
import Acrylic from "./acrylic"
|
|
import Fill from "./fill"
|
|
import { BindingOrValue } from "ReplicatedStorage/utils/bindingUtil"
|
|
|
|
interface surfaceProps extends Roact.JsxInstanceProperties<Frame> {
|
|
size: BindingOrValue<UDim2>
|
|
position: BindingOrValue<UDim2>
|
|
ratio?: BindingOrValue<number>
|
|
color?: BindingOrValue<Color3>
|
|
anchor?: Vector2
|
|
[Roact.Children]?: Roact.Children
|
|
|
|
Event?: Roact.JsxInstanceEvents<Frame>
|
|
Change?: Roact.JsxInstanceChangeEvents<Frame>
|
|
}
|
|
|
|
function surface(props: surfaceProps): Roact.Element {
|
|
const { size, position, ratio, color, anchor } = props
|
|
|
|
const spreadableProps = { ...props } as Partial<surfaceProps>
|
|
delete spreadableProps.size
|
|
delete spreadableProps.position
|
|
delete spreadableProps.ratio
|
|
delete spreadableProps.color
|
|
delete spreadableProps.anchor
|
|
delete spreadableProps[Roact.Children]
|
|
|
|
return (
|
|
<Canvas
|
|
{...spreadableProps}
|
|
Key={"surface container"}
|
|
size={size}
|
|
position={position}
|
|
anchor={anchor}
|
|
>
|
|
<>
|
|
{
|
|
ratio !== undefined && <uiaspectratioconstraint AspectRatio={ratio}/>
|
|
}
|
|
</>
|
|
|
|
<Acrylic
|
|
Key={"acrylic"}
|
|
radius={5}
|
|
distance={0.001}
|
|
/>
|
|
|
|
<Fill
|
|
color={color ? color : Color3.fromHex("#1e1e2e")}
|
|
transparency={.3}
|
|
radius={5}
|
|
/>
|
|
|
|
<Canvas
|
|
Key={"inner content"}
|
|
>
|
|
{props[Roact.Children]}
|
|
</Canvas>
|
|
</Canvas>
|
|
)
|
|
}
|
|
|
|
export default surface |