This repository has been archived by the owner on Aug 30, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 10
Dropdown and Checkbox component #49
Merged
Merged
Changes from all commits
Commits
Show all changes
34 commits
Select commit
Hold shift + click to select a range
bfe3b4e
init dropdown component
AlleeX 66f823e
test commit
68a244c
test commit2
d0e4ec8
add react select
AlleeX a2e2a6f
Merge branch 'dropdown' of github.com:AlleeX/travix-ui-kit into dropdown
AlleeX 5a3e147
add styles and examples for dropdown
AlleeX 695375b
added initial unit tests for dropdown
f1d72eb
Merge branch 'master' into dropdown
AlleeX 913bd6c
improve styles for dd
AlleeX e75300a
add checkbox
AlleeX ddd0f7f
add filter mode for dropdown component
AlleeX 604bf2b
Merge branch 'dropdown' of github.com:AlleeX/travix-ui-kit into dropdown
AlleeX ed0a273
delete unnecessary code
AlleeX 441b6c5
resolve conflicts
AlleeX 7bed718
edit md
AlleeX fcee961
add unit tests for checkbox
AlleeX 7110208
updated snapshots and added unit tests
5136372
resolved merge conflict
6f343c8
add unit tests
AlleeX 84efbc2
rollback
AlleeX 685b524
merge conflicts
AlleeX ef5a7f2
resolve merge conflict
AlleeX b8485ed
resolve merge conflict
AlleeX 57a0882
100% dropdown unit tests coverage
AlleeX cbeeefd
remove unneeded properties from checkbox component
AlleeX 9292d7f
fix PR issues
AlleeX f300722
fix unit tests
AlleeX a3eeb71
delete vendors files
AlleeX 251e176
Merge branch 'master' into dropdown
AlleeX 1f7d351
fix building
AlleeX c006d59
fix unit test
AlleeX b38a9f6
improve import
AlleeX 55a458b
refactoring
AlleeX d68bebf
make code more beauty
AlleeX File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
import React, { PropTypes } from 'react'; | ||
import { getClassNamesWithMods } from '../_helpers'; | ||
|
||
/** | ||
* Checkbox component. | ||
*/ | ||
function Checkbox({ | ||
checked, | ||
children, | ||
disabled, | ||
mods = [], | ||
name, | ||
onChange, | ||
}) { | ||
disabled && mods.push('is-disabled'); | ||
const className = getClassNamesWithMods('ui-checkbox', mods); | ||
|
||
return ( | ||
<label className={className} htmlFor={name}> | ||
<input | ||
aria-checked={checked} | ||
checked={checked} | ||
disabled={disabled} | ||
id={name} | ||
onChange={onChange} | ||
role="radio" | ||
type="checkbox" | ||
/> | ||
<span className="ui-checkbox__text"> | ||
{children} | ||
</span> | ||
</label> | ||
); | ||
} | ||
|
||
Checkbox.defaultProps = { | ||
checked: false, | ||
disabled: false, | ||
name: '', | ||
}; | ||
|
||
Checkbox.propTypes = { | ||
/** | ||
* Represents the state of the checkbox. | ||
*/ | ||
checked: PropTypes.bool, | ||
|
||
/** | ||
* Checkbox label. | ||
*/ | ||
children: PropTypes.oneOfType([ | ||
PropTypes.string, | ||
PropTypes.element, | ||
]), | ||
|
||
/** | ||
* Current activity state of the checkbox. | ||
*/ | ||
disabled: PropTypes.bool, | ||
|
||
/** | ||
* You can provide set of custom modifications. | ||
*/ | ||
mods: PropTypes.arrayOf(PropTypes.string), | ||
|
||
/** | ||
* Represents the element's name. | ||
*/ | ||
name: PropTypes.string.isRequired, | ||
|
||
/** | ||
* Represents the callback for onChange event. | ||
*/ | ||
onChange: PropTypes.func, | ||
}; | ||
|
||
export default Checkbox; |
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,16 @@ | ||
Basic checkbox: | ||
|
||
<div> | ||
<div> | ||
<Checkbox name="checkboxTest1" onChange={() => {alert('without text')}}/><br/><br/> | ||
<Checkbox name="checkboxTest2" checked onChange={() => {alert('checked')}}>checked</Checkbox><br/> | ||
<Checkbox name="checkboxTest3" disabled onChange={() => {alert('disabled')}}>disabled</Checkbox><br/> | ||
<Checkbox | ||
name="checkboxTest4" | ||
checked={state.value} | ||
onChange={() => {setState({value: !state.value})}} | ||
inputAttr={{role: "radio"}}> | ||
can toggle | ||
</Checkbox> | ||
</div> | ||
</div> |
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,78 @@ | ||
.ui-checkbox { | ||
cursor: pointer; | ||
display: flex; | ||
font-family: $tx-generic-font-secondary-font-family, $tx-generic-font-secondary-generic-family; | ||
font-weight: $tx-generic-font-primary-weight-regular; | ||
padding: 0; | ||
user-select: none; | ||
|
||
&.ui-checkbox_is-disabled { | ||
cursor: default; | ||
color: rgba($tx-checkbox-text-disabled-color, .3); | ||
} | ||
|
||
input[type="checkbox"] { | ||
display: none; | ||
|
||
& ~ .ui-checkbox__text { | ||
color: $tx-checkbox-text-color; | ||
padding-left: 25px; | ||
position: relative; | ||
-webkit-tap-highlight-color: transparent; | ||
|
||
&:before { | ||
background-color: $tx-checkbox-text-background-color; | ||
border: 2px solid $tx-checkbox-text-border-color; | ||
content: ''; | ||
height: 12px; | ||
left: 0; | ||
position: absolute; | ||
top: 0; | ||
width: 12px; | ||
} | ||
} | ||
|
||
& ~ .ui-checkbox__text:before { | ||
border-radius: 3px; | ||
} | ||
|
||
& ~ .ui-checkbox__text:hover { | ||
color: $tx-checkbox-text-hover-color; | ||
} | ||
|
||
&:checked { | ||
& ~ .ui-checkbox__text { | ||
&:before { | ||
background: $tx-checkbox-text-checked-background-color; | ||
border-color: $tx-checkbox-text-checked-border-color; | ||
border-radius: 3px; | ||
} | ||
|
||
&:after { | ||
background: transparent; | ||
border: 3px solid $tx-checkbox-text-icon-checked-border-color; | ||
border-radius: 3px; | ||
border-right: none; | ||
border-top: none; | ||
content: ''; | ||
height: 4px; | ||
left: 3px; | ||
position: absolute; | ||
top: 3px; | ||
transform: rotate(-45deg); | ||
width: 7px; | ||
} | ||
} | ||
} | ||
|
||
&:disabled { | ||
& ~ .ui-checkbox__text { | ||
color: rgba($tx-checkbox-text-disabled-color, .3); | ||
|
||
&:before { | ||
border-color: rgba($tx-checkbox-text-disabled-border-color, .3); | ||
} | ||
} | ||
} | ||
} | ||
} |
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,169 @@ | ||
import React, { Component, PropTypes } from 'react'; | ||
import Select from 'react-select'; | ||
|
||
import { getClassNamesWithMods } from '../_helpers'; | ||
import DropdownFilterOptionComponent from './dropdownFilterOptionComponent'; | ||
|
||
/** | ||
* DropDown component | ||
*/ | ||
class DropDown extends Component { | ||
constructor(props) { | ||
super(props); | ||
|
||
this.onChange = this.onChange.bind(this); | ||
this.menuRenderer = this.menuRenderer.bind(this); | ||
} | ||
|
||
static optionRef(onOptionRef, isSelected) { | ||
return ref => onOptionRef(ref, isSelected); | ||
} | ||
|
||
/** | ||
* Overriding the internal method of react-select for fix autoscrolling | ||
*/ | ||
menuRenderer({ | ||
focusedOption, | ||
instancePrefix, | ||
onFocus, | ||
onSelect, | ||
optionClassName, | ||
optionComponent, | ||
optionRenderer, | ||
options, | ||
valueArray, | ||
valueKey, | ||
onOptionRef, | ||
}) { | ||
let Option = optionComponent; | ||
|
||
return options.map((option, i) => { | ||
let isSelected = valueArray && valueArray.indexOf(option) > -1; | ||
let isFocused = option === focusedOption; | ||
const classes = ['Select-option']; | ||
|
||
optionClassName && classes.push(optionClassName); | ||
isSelected && classes.push('is-selected'); | ||
isFocused && classes.push('is-focused'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. now, you can use object instead of array, to apply classes based on props: const mods = {
'is-focused': isFocused,
'is-selecte': isSelected
};
<Option classNames={getClassNamesWithMods('Select-option', mods)} /> There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I need class names without concatenation |
||
option.disabled && classes.push('is-disabled'); | ||
const optionClass = classes.join(' '); | ||
|
||
return ( | ||
<Option | ||
className={optionClass} | ||
instancePrefix={instancePrefix} | ||
isDisabled={option.disabled} | ||
isFocused={this.props.filterMode ? false : isFocused} | ||
isSelected={isSelected} | ||
key={`option-${i}-${option[valueKey]}`} | ||
onFocus={onFocus} | ||
onSelect={onSelect} | ||
option={option} | ||
optionIndex={i} | ||
ref={DropDown.optionRef(onOptionRef, isSelected)} | ||
> | ||
{optionRenderer(option, i)} | ||
</Option> | ||
); | ||
}); | ||
} | ||
|
||
/** | ||
* @param {Array} changedOptions | ||
*/ | ||
onChange(changedOptions) { | ||
if (!this.props.filterMode) { | ||
this.props.onChange(changedOptions); | ||
return; | ||
} | ||
|
||
const option = changedOptions[0]; | ||
const optionIndex = this.props.options.findIndex(o => o.value === option.value); | ||
this.props.onChange(option, optionIndex, this.props.filterKey); | ||
} | ||
|
||
render() { | ||
const isFiltermode = this.props.filterMode; | ||
const mods = { | ||
'filter': isFiltermode, | ||
'state-active': isFiltermode && this.props.options.some(option => option.checked), | ||
}; | ||
|
||
const className = getClassNamesWithMods('ui-dropdown', mods); | ||
|
||
return ( | ||
<Select | ||
className={className} | ||
clearable={this.props.clearable} | ||
menuRenderer={this.menuRenderer} | ||
multi={isFiltermode ? true : this.props.multi} | ||
name={this.props.name} | ||
onChange={this.onChange} | ||
optionComponent={isFiltermode ? DropdownFilterOptionComponent : undefined} | ||
options={this.props.options} | ||
placeholder={this.props.placeholder} | ||
scrollMenuIntoView={this.props.scrollMenuIntoView} | ||
searchable={this.props.searchable} | ||
value={this.props.value} | ||
/> | ||
); | ||
} | ||
} | ||
|
||
DropDown.defaultProps = { | ||
clearable: false, | ||
filterMode: false, | ||
multi: false, | ||
placeholder: '', | ||
scrollMenuIntoView: false, | ||
searchable: false, | ||
}; | ||
|
||
DropDown.propTypes = { | ||
/** | ||
* Should it be possible to reset value | ||
*/ | ||
clearable: PropTypes.bool, | ||
/** | ||
* Filter key | ||
*/ | ||
filterKey: PropTypes.string, | ||
/** | ||
* Filter mode | ||
*/ | ||
filterMode: PropTypes.bool, | ||
/** | ||
* Multi-value input | ||
*/ | ||
multi: PropTypes.bool, | ||
/** | ||
* Generates a hidden <input /> tag with this field name for html forms | ||
*/ | ||
name: PropTypes.string, | ||
/** | ||
* onChange handler: function (newValue) {} | ||
*/ | ||
onChange: PropTypes.func.isRequired, | ||
/** | ||
* Array of options | ||
*/ | ||
options: PropTypes.array.isRequired, | ||
/** | ||
* Field placeholder, displayed when there's no value | ||
*/ | ||
placeholder: PropTypes.string, | ||
/** | ||
* Boolean to enable the viewport to shift so that the full menu fully visible when engaged | ||
*/ | ||
scrollMenuIntoView: PropTypes.bool, | ||
/** | ||
* Whether to enable searching feature or not | ||
*/ | ||
searchable: PropTypes.bool, | ||
/** | ||
* Initial field value | ||
*/ | ||
value: PropTypes.any, | ||
}; | ||
|
||
export default DropDown; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lovely ❤️