diff --git a/plugin/src/components/Home.luau b/plugin/src/components/Home.luau index eeeec4f..660e3b8 100644 --- a/plugin/src/components/Home.luau +++ b/plugin/src/components/Home.luau @@ -2,13 +2,12 @@ local React = require("@pkg/React") local types = require("@root/types") local LoadingSpinner = require("./LoadingSpinner") local ExtensionsList = require("./ExtensionsList") +local Searchbar = require("./Searchbar") local getLayoutOrder = require("./getLayoutOrder") local useCombinedSize = require("./useCombinedSize") type PublishedExtension = types.PublishedExtension -type ExtensionTheme = types.ExtensionTheme -local useCallback = React.useCallback local useMemo = React.useMemo local PADDING = UDim.new(0, 8) @@ -27,12 +26,6 @@ local function Home(props: Props) return #props.extensions == 0 and not props.err end, { props.extensions, props.err }) - local onSearch = useCallback(function(rbx: TextBox, enterPressed: boolean) - if enterPressed and rbx.Text ~= "" then - props.onSearch(rbx.Text) - end - end, {}) - local combinedSize = useCombinedSize() return React.createElement("Frame", { @@ -52,32 +45,15 @@ local function Home(props: Props) PaddingLeft = PADDING, }), - SearchForm = React.createElement("Frame", { + SearchbarWrapper = React.createElement("Frame", { LayoutOrder = getLayoutOrder(), - Size = UDim2.fromScale(1, 0), - AutomaticSize = Enum.AutomaticSize.Y, + AutomaticSize = Enum.AutomaticSize.XY, BackgroundTransparency = 1, [React.Tag] = combinedSize.tag, }, { - Input = React.createElement("TextBox", { - Text = if props.searchTerm then props.searchTerm else "", - PlaceholderText = "Search themes...", - Size = UDim2.fromScale(1, 0), - TextColor3 = Color3.fromRGB(255, 255, 255), - PlaceholderColor3 = Color3.fromRGB(200, 200, 200), - TextSize = 16, - Font = Enum.Font.Gotham, - AutomaticSize = Enum.AutomaticSize.Y, - BorderSizePixel = 0, - BackgroundColor3 = Color3.fromRGB(100, 100, 100), - [React.Event.FocusLost] = onSearch, - }, { - Padding = React.createElement("UIPadding", { - PaddingTop = PADDING, - PaddingRight = PADDING, - PaddingBottom = PADDING, - PaddingLeft = PADDING, - }), + Searchbar = React.createElement(Searchbar, { + searchTerm = props.searchTerm, + onSearch = props.onSearch, }), }), diff --git a/plugin/src/components/Searchbar.luau b/plugin/src/components/Searchbar.luau new file mode 100644 index 0000000..2e23a67 --- /dev/null +++ b/plugin/src/components/Searchbar.luau @@ -0,0 +1,53 @@ +local React = require("@pkg/React") + +local useCallback = React.useCallback + +local PADDING = UDim.new(0, 8) + +export type Props = { + searchTerm: string?, + onSearch: (searchTerm: string) -> (), + LayoutOrder: number?, +} + +local function Searchbar(props: Props) + local onSearch = useCallback(function(rbx: TextBox, enterPressed: boolean) + if enterPressed and rbx.Text ~= "" then + props.onSearch(rbx.Text) + end + end, { props.onSearch }) + + return React.createElement("Frame", { + LayoutOrder = props.LayoutOrder, + Size = UDim2.fromScale(1, 0), + AutomaticSize = Enum.AutomaticSize.Y, + BackgroundTransparency = 1, + }, { + Input = React.createElement("TextBox", { + Text = if props.searchTerm then props.searchTerm else "", + PlaceholderText = "Search themes...", + Size = UDim2.fromScale(1, 0), + TextColor3 = Color3.fromRGB(255, 255, 255), + PlaceholderColor3 = Color3.fromRGB(200, 200, 200), + TextSize = 16, + Font = Enum.Font.Gotham, + AutomaticSize = Enum.AutomaticSize.Y, + BorderSizePixel = 0, + BackgroundColor3 = Color3.fromRGB(100, 100, 100), + [React.Event.FocusLost] = onSearch, + }, { + BorderRadius = React.createElement("UICorner", { + CornerRadius = PADDING, + }), + + Padding = React.createElement("UIPadding", { + PaddingTop = PADDING, + PaddingRight = PADDING, + PaddingBottom = PADDING, + PaddingLeft = PADDING, + }), + }), + }) +end + +return Searchbar diff --git a/plugin/src/components/Searchbar.story.luau b/plugin/src/components/Searchbar.story.luau new file mode 100644 index 0000000..7cb8664 --- /dev/null +++ b/plugin/src/components/Searchbar.story.luau @@ -0,0 +1,15 @@ +local React = require("@pkg/React") +local Searchbar = require("./Searchbar") + +local useState = React.useState + +return { + story = function() + local searchTerm, setSearchTerm = useState(nil :: string?) + + return React.createElement(Searchbar, { + searchTerm = searchTerm, + onSearch = setSearchTerm, + }) + end, +}