local D=script:FindFirstAncestor("\084\101\120\116\069\100\105\116\111\114")local o=require(D.Packages.Roact)local m=require(script.Parent.Parent.StudioThemeContext)local c=o.Component:extend("\068\114\111\112\100\111\119\110\073\116\101\109")c.defaultProps={Text="\112\114\111\112\115\046\084\101\120\116";TextSize=14;selected=false;height=15}function c.init(D)D:setState({hovered=false})end function c.render(D)return o.createElement(m.Consumer,{render=function(m)local c=Enum.StudioStyleGuideModifier.Default if D.props.selected then c=Enum.StudioStyleGuideModifier.Selected elseif D.state.hovered then c=Enum.StudioStyleGuideModifier.Hover end return o.createElement("\084\101\120\116\066\117\116\116\111\110",{AutoButtonColor=false;BackgroundColor3=m:GetColor(Enum.StudioStyleGuideColor.Item,c),BorderSizePixel=0,Size=UDim2.new(1,0,0,D.props.height);Font=Enum.Font.SourceSans,Text=D.props.Text,TextSize=D.props.TextSize;TextXAlignment=Enum.TextXAlignment.Left;TextColor3=m:GetColor(Enum.StudioStyleGuideColor.MainText);[o.Event.MouseEnter]=function()D:setState({hovered=true})end,[o.Event.MouseLeave]=function()D:setState({hovered=false})end,[o.Event.Activated]=function()D.props.OnSelected(D.props.Text)end})end})end return c
-- Dropdown with an editable TextBox to type option
local TextEditor = script:FindFirstAncestor("TextEditor")
local Roact = require(TextEditor.Packages.Roact)

local StudioThemeContext = require(script.Parent.Parent.StudioThemeContext)
local DropdownItem = Roact.Component:extend("DropdownItem")

DropdownItem.defaultProps = {
  Text = "props.Text",
  TextSize = 14,
  selected = false,
  height = 15,
}

function DropdownItem:init()
  self:setState({
    hovered = false,
  })
end

function DropdownItem:render()
  return Roact.createElement(StudioThemeContext.Consumer, {
    render = function(theme)
      local state = Enum.StudioStyleGuideModifier.Default
      if self.props.selected then
        state = Enum.StudioStyleGuideModifier.Selected
      elseif self.state.hovered then
        state = Enum.StudioStyleGuideModifier.Hover
      end

      return Roact.createElement("TextButton", {
        AutoButtonColor = false,
        BackgroundColor3 = theme:GetColor(Enum.StudioStyleGuideColor.Item, state),
        BorderSizePixel = 0,
        Size = UDim2.new(1, 0, 0, self.props.height),
        Font = Enum.Font.SourceSans,
        Text = self.props.Text,
        TextSize = self.props.TextSize,
        TextXAlignment = Enum.TextXAlignment.Left,
        TextColor3 = theme:GetColor(Enum.StudioStyleGuideColor.MainText),

        [Roact.Event.MouseEnter] = function()
          self:setState({ hovered = true })
        end,

        [Roact.Event.MouseLeave] = function()
          self:setState({ hovered = false })
        end,

        [Roact.Event.Activated] = function()
          self.props.OnSelected(self.props.Text)
        end,
      })
    end
  })
end

return DropdownItem