diff --git a/.editorconfig b/.editorconfig index 89da123..f8d831f 100644 --- a/.editorconfig +++ b/.editorconfig @@ -4,7 +4,7 @@ root = true end_of_line = lf insert_final_newline = true -[*.{js,jsx,es6}] +[*.{js,jsx,es6,md}] charset = utf-8 indent_style = space indent_size = 4 diff --git a/index.d.ts b/index.d.ts index f6af3c4..b8e789e 100644 --- a/index.d.ts +++ b/index.d.ts @@ -12,7 +12,7 @@ export interface BaseProps extends React.Props { /** * Use other component for composing results: */ - component?: React.ComponentClass | string | any; + component?: React.ReactType; /** * Apply default semantic UI classes for component, for example ui button * @default true @@ -1333,12 +1333,10 @@ export interface CheckboxProps extends BaseProps { checked?: boolean; fitted?: boolean; disabled?: boolean; - indeterminate?: boolean; name?: string; - radio?: boolean; + onClick?: React.MouseEventHandler; readOnly?: boolean; - slider?: boolean; - toggle?: boolean; + type?: "default" | "radio" | "toggle" | "slider"; } export class Checkbox extends React.Component { } @@ -1485,4 +1483,4 @@ export interface ModalProps extends BaseProps { */ onRequestClose: () => void; } -export class Modal extends React.Component { } \ No newline at end of file +export class Modal extends React.Component { } diff --git a/src/components/modules/checkbox/checkbox.jsx b/src/components/modules/checkbox/checkbox.jsx index 3c27139..bb143dc 100644 --- a/src/components/modules/checkbox/checkbox.jsx +++ b/src/components/modules/checkbox/checkbox.jsx @@ -1,67 +1,70 @@ import React, { Component } from 'react'; import classNames from 'classnames'; +import DefaultProps from '../../defaultProps'; export default class Checkbox extends Component { static propTypes = { + ...DefaultProps.propTypes, + + /** + * State checked + */ checked: React.PropTypes.bool, - children: React.PropTypes.node, - className: React.PropTypes.any, - component: React.PropTypes.oneOfType([ - React.PropTypes.element, - React.PropTypes.string - ]), - defaultClasses: React.PropTypes.bool, + /** + * Does not allow user interaction + */ disabled: React.PropTypes.bool, - fitted: React.PropTypes.bool, - indeterminate: React.PropTypes.bool, - name: React.PropTypes.string, - onClick: React.PropTypes.func, - radio: React.PropTypes.bool, + /** + * It does disabled, but does not allow user interaction + */ readOnly: React.PropTypes.bool, - slider: React.PropTypes.bool, - toggle: React.PropTypes.bool + /** + * Callback handler to click checkbox + */ + onClick: React.PropTypes.func, + /** + * Attr name + */ + name: React.PropTypes.string, + /** + * Checkbox - appearance + */ + type: React.PropTypes.oneOf(['default', 'radio', 'toggle', 'slider']), + /** + * A fitted checkbox does not leave padding for a label + */ + fitted: React.PropTypes.bool }; static defaultProps = { - component: 'div', - defaultClasses: true + ...DefaultProps.defaultProps, + type: 'default', + onClick: () => { } }; - constructor(props) { - super(props); + onClick = (event) => { + if (this.props.disabled || this.props.readOnly) return; - this.state = { - active: this.props.checked - } - } - - onClick() { - if (!this.state.active || (this.state.active && !this.props.radio)) { - this.setState({ - active: !this.state.active - }); - } - } + this.props.onClick(event); + }; renderChildren() { /* eslint-disable no-use-before-define */ - let { children, defaultClasses, className, onClick, - radio, slider, toggle, component, readOnly, checked, - disabled, ...other } = this.props; + let { children, defaultClasses, className, onClick, type, + component, readOnly, checked, ...other } = this.props; /* eslint-enable no-use-before-define */ let childElements = [ - React.DOM.input({ - type: 'checkbox', - key: 'input', - className: 'hidden', - checked: this.state.active || this.props.checked, - readOnly: true, - ...other - }), - React.DOM.label({ - key: 'label' - }, this.props.children) + , + ]; return childElements; @@ -69,11 +72,11 @@ export default class Checkbox extends Component { render() { /* eslint-disable no-use-before-define */ - let { component, defaultClasses, name, ...other } = this.props; + let { component, defaultClasses, checked, type, onClick, name, ...other } = this.props; /* eslint-enable no-use-before-define */ other.className = classNames(this.props.className, this.getClasses()); - other.onClick = typeof this.props.onClick === 'function' ? this.props.onClick : this.onClick.bind(this); + other.onClick = this.onClick; return React.createElement( this.props.component, @@ -91,16 +94,16 @@ export default class Checkbox extends Component { // positioning // types - radio: this.props.radio, + radio: this.props.type == 'radio', + slider: this.props.type == 'slider', + toggle: this.props.type == 'toggle', // variations fitted: this.props.fitted, - slider: this.props.slider, - toggle: this.props.toggle, // state 'read-only': this.props.readOnly, - checked: this.state.active || this.props.checked, + checked: this.props.checked, disabled: this.props.disabled, indeterminate: this.props.indeterminate }; diff --git a/src/components/modules/checkbox/examples/checkbox.examples.md b/src/components/modules/checkbox/examples/checkbox.examples.md new file mode 100644 index 0000000..5607bb7 --- /dev/null +++ b/src/components/modules/checkbox/examples/checkbox.examples.md @@ -0,0 +1,27 @@ +A checkbox allows a user to select a value from a small set of options, often binary + +## Types + +```require +./types.jsx +``` + +### Radio - a lot of + +```require +./radios.jsx +``` + +## State + +### Read-only + +```require +./read-only.jsx +``` + +### Disabled + +```require +./disabled.jsx +``` diff --git a/src/components/modules/checkbox/examples/disabled.jsx b/src/components/modules/checkbox/examples/disabled.jsx new file mode 100644 index 0000000..29cc343 --- /dev/null +++ b/src/components/modules/checkbox/examples/disabled.jsx @@ -0,0 +1,73 @@ +import React from 'react'; +import Checkbox from '../checkbox'; +import Form from '../../../collections/form/fields'; +import Field from './../../../collections/form/form'; + +class MyCheckboxes extends React.Component { + constructor(props) { + super(props); + + this.state = { + isCheckbox: false, + isRadio: false, + isSlider: false, + isToggle: false + } + } + + onClickCheckbox(name) { + this.setState({ + [name]: !this.state[name] + }); + } + + render() { + let { isCheckbox, isRadio, isSlider, isToggle } = this.state; + + return ( +
+ + + Disabled, you can test + + + + + Disabled, you can test + + + + + Disabled, you can test + + + + + Disabled, you can test + + +
+ ); + } +} + + diff --git a/src/components/modules/checkbox/examples/radios.jsx b/src/components/modules/checkbox/examples/radios.jsx new file mode 100644 index 0000000..2163df9 --- /dev/null +++ b/src/components/modules/checkbox/examples/radios.jsx @@ -0,0 +1,53 @@ +import React from 'react'; +import Checkbox from '../checkbox'; +import Form from '../../../collections/form/fields'; +import Fields from '../../../collections/form/Fields'; +import Field from './../../../collections/form/form'; + +class MyRadios extends React.Component { + constructor(props) { + super(props); + + this.state = { + value: null + }; + } + + onClickRadio(value) { + this.setState({ + value: value + }); + } + + render() { + let { value } = this.state; + + return ( +
+ + + + + One banana + + + + + Two banana + + + +
+ ); + } +} + + diff --git a/src/components/modules/checkbox/examples/read-only.jsx b/src/components/modules/checkbox/examples/read-only.jsx new file mode 100644 index 0000000..4f8633b --- /dev/null +++ b/src/components/modules/checkbox/examples/read-only.jsx @@ -0,0 +1,73 @@ +import React from 'react'; +import Checkbox from '../checkbox'; +import Form from '../../../collections/form/fields'; +import Field from './../../../collections/form/form'; + +class MyCheckboxes extends React.Component { + constructor(props) { + super(props); + + this.state = { + isCheckbox: false, + isRadio: false, + isSlider: false, + isToggle: false + } + } + + onClickCheckbox(name) { + this.setState({ + [name]: !this.state[name] + }); + } + + render() { + let { isCheckbox, isRadio, isSlider, isToggle } = this.state; + + return ( +
+ + + Read-only, you can test + + + + + Read-only, you can test + + + + + Read-only, you can test + + + + + Read-only, you can test + + +
+ ); + } +} + + diff --git a/src/components/modules/checkbox/examples/types.jsx b/src/components/modules/checkbox/examples/types.jsx new file mode 100644 index 0000000..3eddd26 --- /dev/null +++ b/src/components/modules/checkbox/examples/types.jsx @@ -0,0 +1,69 @@ +import React from 'react'; +import Checkbox from '../checkbox'; +import Form from '../../../collections/form/fields'; +import Field from './../../../collections/form/form'; + +class MyCheckboxes extends React.Component { + constructor(props) { + super(props); + + this.state = { + isCheckbox: false, + isRadio: false, + isSlider: false, + isToggle: false + } + } + + onClickCheckbox(name) { + this.setState({ + [name]: !this.state[name] + }); + } + + render() { + let { isCheckbox, isRadio, isSlider, isToggle } = this.state; + + return ( +
+ + + It Checkbox + + + + + It Radio + + + + + It Slider + + + + + It Toggle + + +
+ ); + } +} + + diff --git a/src/components/modules/dropdown/select.jsx b/src/components/modules/dropdown/select.jsx index 39c2d33..c32ff5a 100644 --- a/src/components/modules/dropdown/select.jsx +++ b/src/components/modules/dropdown/select.jsx @@ -533,7 +533,7 @@ export default class Select extends React.Component { this.menuRef = ref} - style={{ overflow: 'hidden' }} + style={{ overflowX: 'hidden', overflowY: 'auto' }} > {menuChildrens} diff --git a/src/components/radium.jsx b/src/components/radium.jsx index 9cb9f27..ffd2e1c 100644 --- a/src/components/radium.jsx +++ b/src/components/radium.jsx @@ -378,7 +378,7 @@ export { RadiumAccordionTitle as AccordionTitle }; export { RadiumCheckbox as Checkbox }; export { RadiumCheckboxFields as CheckboxFields }; -export { RadiumDimmable as Dimmer }; +export { RadiumDimmer as Dimmer }; export { RadiumDimmable as Dimmable }; export { RadiumDropdownElement as DropdownElement };