-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
da0017d
commit 838159a
Showing
9 changed files
with
141 additions
and
78 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,3 +11,5 @@ dist/ | |
| docs/build | ||
| docs/app/docgenInfo.json | ||
| dll/ | ||
| .DS_Store | ||
| .idea | ||
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
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 |
|---|---|---|
| @@ -1,70 +1,121 @@ | ||
| import _ from 'lodash' | ||
| import classNames from 'classnames' | ||
| import React, { Component, PropTypes, Children } from 'react' | ||
| import React, { PropTypes, Children } from 'react' | ||
| import cx from 'classnames' | ||
|
|
||
| import META from '../../utils/Meta' | ||
| import { getUnhandledProps } from '../../utils/propUtils' | ||
| import * as sui from '../../utils/semanticUtils' | ||
| import { | ||
| getUnhandledProps, | ||
| useKeyOnly, | ||
| } from '../../utils/propUtils' | ||
| import Icon from '../../elements/Icon/Icon' | ||
|
|
||
| export default class Input extends Component { | ||
| static propTypes = { | ||
| children: PropTypes.node, | ||
| className: PropTypes.string, | ||
| icon: PropTypes.string, | ||
| type: PropTypes.string, | ||
| } | ||
|
|
||
| static defaultProps = { | ||
| type: 'text', | ||
| } | ||
|
|
||
| static _meta = { | ||
| library: META.library.semanticUI, | ||
| name: 'Input', | ||
| type: META.type.element, | ||
| } | ||
|
|
||
| render() { | ||
| const { className, children, icon, type } = this.props | ||
| // Semantic supports actions and labels on either side of an input. | ||
| // The element must be on the same side as the indicated class. | ||
| // We first determine the left/right classes for each type of child, | ||
| // then we extract the children and place them on the correct side | ||
| // of the input. | ||
| const isLeftAction = _.includes(className, 'left action') | ||
| const isRightAction = !isLeftAction && _.includes(className, 'action') | ||
| const isRightLabeled = _.includes(className, 'right labeled') | ||
| const isLeftLabeled = !isRightLabeled && _.includes(className, 'labeled') | ||
|
|
||
| const labelChildren = [] | ||
| const actionChildren = [] | ||
|
|
||
| Children.forEach(children, child => { | ||
| const isAction = _.includes(['Button', 'Dropdown', 'Select'], child.type._meta.name) | ||
| const isLabel = child.type._meta.name === 'Label' | ||
|
|
||
| if (isAction) { | ||
| actionChildren.push(child) | ||
| } else if (isLabel) { | ||
| labelChildren.push(child) | ||
| } | ||
| }) | ||
|
|
||
| const classes = classNames( | ||
| 'ui', | ||
| className, | ||
| 'input' | ||
| ) | ||
| const props = getUnhandledProps(Input, this.props) | ||
|
|
||
| return ( | ||
| <div className={classes}> | ||
| {isLeftLabeled && labelChildren} | ||
| {isLeftAction && actionChildren} | ||
| <input {...props} type={type} /> | ||
| {icon && <Icon className={icon} />} | ||
| {isRightLabeled && labelChildren} | ||
| {isRightAction && actionChildren} | ||
| </div> | ||
| ) | ||
| } | ||
| function Input(props) { | ||
| const { | ||
| disabled, error, fluid, inverted, loading, size, transparent, | ||
| icon, type, children, className, | ||
| } = props | ||
|
|
||
| // Semantic supports actions and labels on either side of an input. | ||
| // The element must be on the same side as the indicated class. | ||
| // We first determine the left/right classes for each type of child, | ||
| // then we extract the children and place them on the correct side | ||
| // of the input. | ||
| const isLeftAction = _.includes(className, 'left action') | ||
| const isRightAction = !isLeftAction && _.includes(className, 'action') | ||
| const isRightLabeled = _.includes(className, 'right labeled') | ||
| const isLeftLabeled = !isRightLabeled && _.includes(className, 'labeled') | ||
|
|
||
| const labelChildren = [] | ||
| const actionChildren = [] | ||
|
|
||
| Children.forEach(children, child => { | ||
| const isButton = child.type.name === 'Button' | ||
| const isDropdown = child.type.name === 'Dropdown' | ||
| // TODO: use child.type.name === 'Label' once Label component is merged. | ||
| const isLabel = _.isString(child.props.className) && !!child.props.className.match(/ui.*label$/) | ||
| const childIsAction = !isLabel && isButton || isDropdown | ||
|
|
||
| if (childIsAction) { | ||
| actionChildren.push(child) | ||
| } else if (isLabel) { | ||
| labelChildren.push(child) | ||
| } | ||
| }) | ||
|
|
||
| const classes = cx('ui', | ||
| size, | ||
| useKeyOnly(disabled, 'disabled'), | ||
| useKeyOnly(error, 'error'), | ||
| useKeyOnly(fluid, 'fluid'), | ||
| useKeyOnly(inverted, 'inverted'), | ||
| useKeyOnly(loading, 'loading'), | ||
| useKeyOnly(transparent, 'transparent'), | ||
| icon && 'icon', | ||
| className, | ||
| 'input', | ||
| ) | ||
|
|
||
| const rest = getUnhandledProps(Input, props) | ||
|
|
||
| return ( | ||
| <div className={classes}> | ||
| {isLeftLabeled && labelChildren} | ||
| {isLeftAction && actionChildren} | ||
| <input type={type} {...rest} /> | ||
| {icon && <Icon className={icon} />} | ||
| {isRightLabeled && labelChildren} | ||
| {isRightAction && actionChildren} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| Input._meta = { | ||
| library: META.library.semanticUI, | ||
| name: 'Input', | ||
| type: META.type.element, | ||
| props: { | ||
| size: sui.sizes, | ||
| }, | ||
| } | ||
|
|
||
| Input.propTypes = { | ||
| /** Body of the component. */ | ||
| children: PropTypes.node, | ||
|
|
||
| /** Class names for custom styling. */ | ||
| className: PropTypes.string, | ||
|
|
||
| /** An input field can show that it is disabled */ | ||
| disabled: PropTypes.bool, | ||
|
|
||
| /** An input field can show the data contains errors */ | ||
| error: PropTypes.bool, | ||
|
|
||
| /** Take on the size of it's container */ | ||
| fluid: PropTypes.bool, | ||
|
|
||
| /** Optional icon to display in input */ | ||
| icon: PropTypes.string, | ||
|
|
||
| /** Format to appear on dark backgrounds */ | ||
| inverted: PropTypes.bool, | ||
|
|
||
| /** An icon input field can show that it is currently loading data */ | ||
| loading: PropTypes.bool, | ||
|
|
||
| /** An input can vary in size */ | ||
| size: PropTypes.oneOf(Input._meta.props.size), | ||
|
|
||
| /** Transparent input has no background */ | ||
| transparent: PropTypes.bool, | ||
|
|
||
| /** Specifies the type of <input> element to display */ | ||
| type: PropTypes.string, | ||
| } | ||
|
|
||
| Input.defaultProps = { | ||
| type: 'text', | ||
| } | ||
|
|
||
| export default Input |
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