Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix tether and dropdown-direction compatibility with bootstrap #187

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Fix tether and dropdown-direction compatibility with bootstrap #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ec0510
Quick hack to get dropdown-menu working with bootstrap
Mar 8, 2017
d64b1a9
Fix tests broken by dropdown-menu hack
Mar 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 30 additions & 30 deletions src/DropdownMenu.ls
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# prelude ls
# prelude ls
{filter, id, map} = require \prelude-ls

{is-equal-to-object} = require \prelude-extension
Expand Down Expand Up @@ -27,25 +27,25 @@ module.exports = class DropdownMenu extends React.PureComponent
on-option-click: ((uid) !->) # (Eq e) => e -> ()
on-scroll-lock-change: ((scroll-lock) !-> ) # Boolean -> ()
options: [] # [Item]

# render-no-results-found :: () -> ReactElement
render-no-results-found: ->
render-no-results-found: ->
div class-name: \no-results-found, "No results found"

# render-group-title :: Int -> Group -> ReactElement
render-group-title: (index, {group-id, title}?) ->
div do
class-name: \simple-group-title
key: group-id
title

# render-option :: Int -> Item -> ReactElement
render-option: ({label, new-option, selectable}?) ->
is-selectable = (typeof selectable == \undefined) or selectable
div do
div do
class-name: "simple-option #{if is-selectable then '' else 'not-selectable'}"
span null, if !!new-option then "Add #{label} ..." else label

scroll-lock: false
style: {}
tether: false
Expand All @@ -67,7 +67,7 @@ module.exports = class DropdownMenu extends React.PureComponent
tethered: @props.tether

# (TETHERED / ANIMATED / SIMPLE) DROPDOWN
if @props.tether
if @props.tether
ReactTether do
{} <<< @props.tether-props <<<
options:
Expand All @@ -84,10 +84,10 @@ module.exports = class DropdownMenu extends React.PureComponent
# render-animated-dropdown :: ComputedState -> ReactElement
render-animated-dropdown: ({dynamic-class-name}:computed-state) ->
if [email protected] or [email protected]
ReactCSSTransitionGroup do
ReactCSSTransitionGroup do
ref: \dropdownMenuWrapper
component: \div
transition-name: \custom
transition-name: \custom
transition-enter: @props.transition-enter
transition-leave: @props.transition-leave
transition-enter-timeout: @props.transition-enter-timeout
Expand All @@ -104,7 +104,7 @@ module.exports = class DropdownMenu extends React.PureComponent
option = options[index]
uid = @props.uid option

# OPTION WRAPPER
# OPTION WRAPPER
OptionWrapper do
{
uid
Expand All @@ -113,12 +113,12 @@ module.exports = class DropdownMenu extends React.PureComponent
item: option
highlight: @props.highlighted-uid `is-equal-to-object` uid
selectable: option?.selectable
on-mouse-move: ({current-target}) !~>

on-mouse-move: ({current-target}) !~>
if @props.scroll-lock
@props.on-scroll-lock-change false
on-mouse-out: !~>

on-mouse-out: !~>
if [email protected]
<~ @props.on-highlighted-uid-change undefined

Expand All @@ -127,44 +127,44 @@ module.exports = class DropdownMenu extends React.PureComponent
switch
| (typeof option?.selectable == \boolean) and !option.selectable => on-click: cancel-event
| _ =>
on-click: !~>
on-click: !~>
if [email protected]
<~ @props.on-highlighted-uid-change uid
@props.on-option-click @props.highlighted-uid
on-mouse-over: ({current-target}) !~>
on-mouse-over: ({current-target}) !~>
if 'ontouchstart' of window => return false
if [email protected]
<~ @props.on-highlighted-uid-change uid

# render-dropdown :: ComputedState -> ReactElement
render-dropdown: ({dynamic-class-name}) ->
if @props.open

# DROPDOWN
DivWrapper do
class-name: "dropdown-menu #{dynamic-class-name}"
DivWrapper do
class-name: "rs-dropdown-menu #{dynamic-class-name}"
ref: (element) !~> !!element && @dropdown-menu = element

# on-height-change :: Number -> ()
on-height-change: (height) !~>
on-height-change: (height) !~>
if @refs.dropdown-menu-wrapper
find-DOM-node @refs.dropdown-menu-wrapper .style.height = "#{height}px"

# NO RESULT FOUND
# NO RESULT FOUND
if @props.options.length == 0
@props.render-no-results-found!

else if @props?.groups?.length > 0

# convert [Group] to [{index: Int, group: Group, options: [Item]}]
groups = [0 til @props.groups.length] |> map (index) ~>
groups = [0 til @props.groups.length] |> map (index) ~>
{group-id}:group = @props.groups[index]
options = @props.options |> filter ~> (@props.group-id it) == group-id
{index, group, options}

# GROUPS
div class-name: "groups #{if [email protected] then 'as-columns' else ''}",
groups
groups
|> filter (.options.length > 0)
|> map ({index, {group-id}:group, options}) ~>

Expand All @@ -173,7 +173,7 @@ module.exports = class DropdownMenu extends React.PureComponent
@props.render-group-title index, group, options

# OPTIONS
div do
div do
class-name: \options
@render-options options

Expand All @@ -189,10 +189,10 @@ module.exports = class DropdownMenu extends React.PureComponent
component-did-update: (prev-props) !->
if prev-props.dropdown-direction !== @props.dropdown-direction and @props.open
dropdown-menu = find-DOM-node @refs.dropdown-menu-wrapper ? @dropdown-menu
..?.style.bottom = switch
| @props.dropdown-direction == -1 =>
..?.style.bottom = switch
| @props.dropdown-direction == -1 =>
"#{@props.bottom-anchor!.offset-height + dropdown-menu.style.margin-bottom}px"

| _ => ""

# highlight-and-scroll-to-option :: Int, (() -> ())? -> ()
Expand Down Expand Up @@ -226,7 +226,7 @@ module.exports = class DropdownMenu extends React.PureComponent

# highlight-and-scroll-to-selectable-option :: Int, Int, (Boolean -> ())? -> ()
highlight-and-scroll-to-selectable-option: (index, direction, callback = (->)) !->

# end recursion if the index violates the bounds
if index < 0 or index >= @props.options.length
<~ @props.on-highlighted-uid-change undefined
Expand Down
Loading