-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
RC #291 - Adding FacetTimeline component; Adding "actions" prop to Fa…
…cetSlider component; Moving ModalContext to shared package (breaking)
- Loading branch information
1 parent
92980ea
commit b3b55de
Showing
34 changed files
with
827 additions
and
141 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| // @flow | ||
|
|
||
| import clsx from 'clsx'; | ||
| import React from 'react'; | ||
| import _ from 'underscore'; | ||
| import type { Event as EventType } from '../types/Event'; | ||
| import EventUtils from '../utils/Event'; | ||
|
|
||
| type Props = { | ||
| /** | ||
| * (Optional) class name to apply to the root element. | ||
| */ | ||
| className?: string, | ||
|
|
||
| /** | ||
| * If `true`, the event description will be displayed on the card. | ||
| */ | ||
| description?: boolean, | ||
|
|
||
| /** | ||
| * The list of events records to display. | ||
| */ | ||
| events: Array<EventType>, | ||
|
|
||
| /** | ||
| * Callback that returns `true` if the passed event is selected. | ||
| */ | ||
| isSelected?: (event: EventType) => boolean, | ||
|
|
||
| /** | ||
| * Callback fired when the event row is clicked. | ||
| */ | ||
| onClick?: (event: EventType) => void | ||
| }; | ||
|
|
||
| const EventsList = (props: Props) => ( | ||
| <ul | ||
| className={props.className} | ||
| > | ||
| { _.map(props.events, (event) => ( | ||
| <li> | ||
| <div | ||
| className='min-h-[5.5em] border-b flex flex-col justify-start' | ||
| > | ||
| <button | ||
| className={clsx( | ||
| 'py-3', | ||
| 'px-4', | ||
| 'flex-grow', | ||
| 'text-left', | ||
| 'inline-flex', | ||
| 'flex-col', | ||
| 'rounded-none', | ||
| { 'hover:bg-event-selected': props.isSelected(event) }, | ||
| { 'text-white': props.isSelected(event) }, | ||
| { 'bg-event-selected': props.isSelected(event) } | ||
| )} | ||
| onClick={() => props.onClick(event)} | ||
| type='button' | ||
| > | ||
| <div | ||
| className='flex justify-between w-full items-center' | ||
| > | ||
| <div | ||
| className='flex-grow' | ||
| > | ||
| <div> | ||
| { EventUtils.getDateView(event) } | ||
| </div> | ||
| <h2 | ||
| className='text-xl font-bold' | ||
| > | ||
| { event.name } | ||
| </h2> | ||
| </div> | ||
| </div> | ||
| { props.description && ( | ||
| <p | ||
| className={clsx( | ||
| 'py-2', | ||
| { 'text-muted': !props.isSelected(event) } | ||
| )} | ||
| > | ||
| { event.description } | ||
| </p> | ||
| )} | ||
| </button> | ||
| </div> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
|
|
||
| EventsList.defaultProps = { | ||
| isSelected: () => false, | ||
| onClick: () => {} | ||
| }; | ||
|
|
||
| export default EventsList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.