This repository has been archived by the owner on Mar 30, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* update storybook * update readme and add logo * initial work on react-select fork * initial import of react-select code * fix tabs versus spaces madness * refactor in progress * refactoring fork * refactoring select * convert Select/Value to es6 class * convert Select/Option to es6 class * refactoring to uikit * refactoring creation of options * refactor styling * wip
- Loading branch information
Showing
14 changed files
with
1,536 additions
and
31 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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,21 @@ | ||
| import classNames from 'classnames' | ||
| import { PropTypes } from 'react' | ||
|
|
||
| const CreateOption = ({ isFocused, addLabelText, children }) => ( | ||
| <li className={classNames({ 'uk-active': isFocused })}> | ||
| <a> | ||
| {addLabelText} | ||
| <span className="uk-text-bold"> | ||
| {children} | ||
| </span> | ||
| </a> | ||
| </li> | ||
| ) | ||
|
|
||
| CreateOption.propTypes = { | ||
| isFocused: PropTypes.bool.isRequired, | ||
| addLabelText: PropTypes.node.isRequired, | ||
| children: PropTypes.node.isRequired, | ||
| } | ||
|
|
||
| export default CreateOption |
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,100 @@ | ||
| import classNames from 'classnames' | ||
| import { Component, PropTypes } from 'react' | ||
|
|
||
| export default class Option extends Component { | ||
| static propTypes = { | ||
| addLabelText: PropTypes.string, // text to display with value while creating | ||
| children: PropTypes.node, | ||
| className: PropTypes.string, // className (based on mouse position) | ||
| instancePrefix: PropTypes.string.isRequired, // unique prefix for the ids (used for aria) | ||
| isDisabled: PropTypes.bool, // the option is disabled | ||
| isFocused: PropTypes.bool, // the option is focused | ||
| isSelected: PropTypes.bool, // the option is selected | ||
| onFocus: PropTypes.func, // method to handle mouseEnter on option | ||
| onSelect: PropTypes.func, // method to handle click on option element | ||
| onUnfocus: PropTypes.func, // method to handle mouseLeave on option | ||
| option: PropTypes.object.isRequired, // object that is base for that option | ||
| optionIndex: PropTypes.number, // index of the option, used to generate | ||
| } | ||
|
|
||
| onFocus = (event) => { | ||
| if (!this.props.isFocused) { | ||
| this.props.onFocus(this.props.option, event) | ||
| } | ||
| } | ||
|
|
||
| handleBlockEvent = event => { | ||
| event.preventDefault() | ||
| event.stopPropagation() | ||
| } | ||
|
|
||
| handleMouseDown = (event) => { | ||
| event.preventDefault() | ||
| event.stopPropagation() | ||
| this.props.onSelect(this.props.option, event) | ||
| } | ||
|
|
||
| handleMouseEnter = (event) => { | ||
| this.onFocus(event) | ||
| } | ||
|
|
||
| handleMouseMove = (event) => { | ||
| this.onFocus(event) | ||
| } | ||
|
|
||
| handleTouchEnd= (event) => { | ||
| // Check if the view is being dragged, In this case | ||
| // we don't want to fire the click event (because the user only wants to scroll) | ||
| if (this.dragging) return | ||
|
|
||
| this.handleMouseDown(event) | ||
| } | ||
|
|
||
| handleTouchMove = () => { | ||
| // Set a flag that the view is being dragged | ||
| this.dragging = true | ||
| } | ||
|
|
||
| handleTouchStart = () => { | ||
| // Set a flag that the view is not being dragged | ||
| this.dragging = false | ||
| } | ||
|
|
||
| render() { | ||
| const { option, instancePrefix, optionIndex } = this.props | ||
| let className = classNames(this.props.className, option.className) | ||
| return option.disabled ? ( | ||
| <li | ||
| className={className} | ||
| onMouseDown={this.handleBlockEvent} | ||
| onClick={this.handleBlockEvent} | ||
| > | ||
| <a> | ||
| {this.props.children} | ||
| </a> | ||
| </li> | ||
| ) : ( | ||
| <li | ||
| className={className} | ||
| style={option.style} | ||
| role="option" | ||
| onMouseDown={this.handleMouseDown} | ||
| onMouseEnter={this.handleMouseEnter} | ||
| onMouseMove={this.handleMouseMove} | ||
| onTouchStart={this.handleTouchStart} | ||
| onTouchMove={this.handleTouchMove} | ||
| onTouchEnd={this.handleTouchEnd} | ||
| id={`${instancePrefix}-option-${optionIndex}`} | ||
| title={option.title} | ||
| > | ||
| <a> | ||
| { | ||
| option.create ? | ||
| this.props.addLabelText.replace('{label}', option.label) : | ||
| this.props.children | ||
| } | ||
| </a> | ||
| </li> | ||
| ) | ||
| } | ||
| } |
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,104 @@ | ||
| import classNames from 'classnames' | ||
| import { Component, PropTypes } from 'react' | ||
|
|
||
| export default class Value extends Component { | ||
|
|
||
| static propTypes = { | ||
| children: PropTypes.node, | ||
| disabled: PropTypes.bool, // disabled prop passed to ReactSelect | ||
| id: PropTypes.string, // Unique id for the value - used for aria | ||
| onClick: PropTypes.func, // method to handle click on value label | ||
| onRemove: PropTypes.func, // method to handle removal of the value | ||
| value: PropTypes.object.isRequired, // the option object for this value | ||
| } | ||
|
|
||
| handleRemove = event => { | ||
| event.preventDefault() | ||
| event.stopPropagation() | ||
| this.props.onRemove(this.props.value) | ||
| } | ||
|
|
||
| handleMouseDown = event => { | ||
| if (event.type === 'mousedown' && event.button !== 0) { | ||
| return | ||
| } | ||
| if (this.props.onClick) { | ||
| event.stopPropagation() | ||
| this.props.onClick(this.props.value, event) | ||
| return | ||
| } | ||
| if (this.props.value.href) { | ||
| event.stopPropagation() | ||
| } | ||
| } | ||
|
|
||
| handleTouchEndRemove = event => { | ||
| // Check if the view is being dragged, In this case | ||
| // we don't want to fire the click event (because the user only wants to scroll) | ||
| if (this.dragging) return | ||
|
|
||
| // Fire the mouse events | ||
| this.onRemove(event) | ||
| } | ||
|
|
||
| handleTouchMove = () => { | ||
| // Set a flag that the view is being dragged | ||
| this.dragging = true | ||
| } | ||
|
|
||
| handleTouchStart = () => { | ||
| // Set a flag that the view is not being dragged | ||
| this.dragging = false | ||
| } | ||
|
|
||
| renderRemoveIcon() { | ||
| if (this.props.disabled || !this.props.onRemove) { | ||
| return false | ||
| } | ||
| return ( | ||
| <span | ||
| className="Select-value-icon" | ||
| aria-hidden="true" | ||
| onMouseDown={this.handleRemove} | ||
| onTouchEnd={this.handleTouchEndRemove} | ||
| onTouchStart={this.handleTouchStart} | ||
| onTouchMove={this.handleTouchMove} | ||
| > | ||
| × | ||
| </span> | ||
| ) | ||
| } | ||
|
|
||
| renderLabel() { | ||
| let className = 'Select-value-label' | ||
| return this.props.onClick || this.props.value.href ? ( | ||
| <a | ||
| className={className} | ||
| href={this.props.value.href} | ||
| target={this.props.value.target} | ||
| onMouseDown={this.handleMouseDown} | ||
| onTouchEnd={this.handleMouseDown} | ||
| > | ||
| {this.props.children} | ||
| </a> | ||
| ) : ( | ||
| <span className={className} role="option" aria-selected="true" id={this.props.id}> | ||
| {this.props.children} | ||
| </span> | ||
| ) | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div | ||
| className={classNames('uk-component-select__value', this.props.value.className)} | ||
| style={this.props.value.style} | ||
| title={this.props.value.title} | ||
| > | ||
| {this.renderRemoveIcon()} | ||
| {this.renderLabel()} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.