From c4ef359b75f4fe495efe56bb60ec06b82c21345c Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Tue, 28 Nov 2017 16:20:41 +0530 Subject: [PATCH 01/10] =?UTF-8?q?Github=20issue#1349,=20Move=20enhanceDrop?= =?UTF-8?q?down=20HOC=20to=20Dropdown=20component=20in=20react-components?= =?UTF-8?q?=20=E2=80=94=20Adding=20enhanceDropdown=20component=20to=20reac?= =?UTF-8?q?t-components=20repo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Dropdown/enhanceDropdown.js | 100 +++++++++++++++++++++++++ exports.coffee | 2 + 2 files changed, 102 insertions(+) create mode 100644 components/Dropdown/enhanceDropdown.js diff --git a/components/Dropdown/enhanceDropdown.js b/components/Dropdown/enhanceDropdown.js new file mode 100644 index 000000000..ad07d67b6 --- /dev/null +++ b/components/Dropdown/enhanceDropdown.js @@ -0,0 +1,100 @@ +import React, { Component } from 'react' + +export const enhanceDropdown = (CompositeComponent) => class extends Component { + constructor(props) { + super(props) + this.state = { isOpen: false } + this.handleClick = this.handleClick.bind(this) + this.onSelect = this.onSelect.bind(this) + this.onClickOutside = this.onClickOutside.bind(this) + this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this) + this.refreshEventHandlers = this.refreshEventHandlers.bind(this) + } + + refreshEventHandlers() { + if (this.state.isOpen) { + document.addEventListener('click', this.onClickOutside) + document.addEventListener('dropdownClicked', this.onClickOtherDropdown) + } else { + document.removeEventListener('click', this.onClickOutside) + document.removeEventListener('dropdownClicked', this.onClickOtherDropdown) + } + } + + handleClick() { + const dropdownClicked = document.createEvent('Event') + dropdownClicked.initEvent('dropdownClicked', true, false) + + document.dispatchEvent(dropdownClicked) + + this.setState({ isOpen: !this.state.isOpen }, () => { + this.refreshEventHandlers() + }) + } + + onSelect(value) { + this.handleClick() + if (this.props.onSelect) this.props.onSelect(value) + } + + onClickOutside(evt) { + let currNode = evt.target + let isDropdown = false + console.log('onClickOutside') + + do { + if (currNode.className + && currNode.className.indexOf + && currNode.className.indexOf('dropdown-wrap') > -1) { + isDropdown = true + break + } + + currNode = currNode.parentNode + + if (!currNode) + break + } while (currNode.tagName) + + if (!isDropdown) { + this.setState({ isOpen: false }, () => { + this.refreshEventHandlers() + }) + } + } + + onClickOtherDropdown() { + this.setState({ isOpen: false }, () => { + this.refreshEventHandlers() + }) + } + + componentDidMount() { + document.removeEventListener('click', this.onClickOutside) + document.removeEventListener('dropdownClicked', this.onClickOtherDropdown) + + if (this.state.isOpen) { + document.addEventListener('click', this.onClickOutside) + document.addEventListener('dropdownClicked', this.onClickOtherDropdown) + } + } + + componentWillUnmount() { + document.removeEventListener('click', this.onClickOutside) + document.removeEventListener('dropdownClicked', this.onClickOtherDropdown) + } + + render() { + const { isOpen } = this.state + return ( +
e.stopPropagation()} className="dropdown-wrap"> + +
+ ) + } +} \ No newline at end of file diff --git a/exports.coffee b/exports.coffee index b07cb8444..46f4ea51c 100644 --- a/exports.coffee +++ b/exports.coffee @@ -16,6 +16,7 @@ Tooltip = require './components/Tooltip/Tooltip' Avatar = require './components/Avatar/Avatar' Carousel = require './components/Carousel/Carousel' Checkbox = require './components/Checkbox/Checkbox' +enhanceDropdown = require './components/Dropdown/enhanceDropdown' Dropdown = require './components/Dropdown/Dropdown' DropdownItem = require './components/Dropdown/DropdownItem' SelectDropdown = require './components/SelectDropdown/SelectDropdown' @@ -61,6 +62,7 @@ module.exports = Avatar : Avatar.default Carousel : Carousel.default Checkbox : Checkbox.default + enhanceDropdown : enhanceDropdown.default Dropdown : Dropdown.default DropdownItem : DropdownItem.default SelectDropdown : SelectDropdown.default From 9c78d03933d196778c7a7efbf1eaa3ab12bacc52 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Tue, 28 Nov 2017 16:26:42 +0530 Subject: [PATCH 02/10] Fixed lint errors --- components/Dropdown/enhanceDropdown.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/Dropdown/enhanceDropdown.js b/components/Dropdown/enhanceDropdown.js index ad07d67b6..475138e0d 100644 --- a/components/Dropdown/enhanceDropdown.js +++ b/components/Dropdown/enhanceDropdown.js @@ -84,10 +84,14 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component { document.removeEventListener('dropdownClicked', this.onClickOtherDropdown) } + stopEventPropagation(e) { + e.stopPropagation() + } + render() { const { isOpen } = this.state return ( -
e.stopPropagation()} className="dropdown-wrap"> +
Date: Tue, 28 Nov 2017 17:51:52 +0530 Subject: [PATCH 03/10] =?UTF-8?q?Github=20issue#1349,=20Move=20enhanceDrop?= =?UTF-8?q?down=20HOC=20to=20Dropdown=20component=20in=20react-components?= =?UTF-8?q?=20=E2=80=94=20Fixed=20export?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Dropdown/enhanceDropdown.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/Dropdown/enhanceDropdown.js b/components/Dropdown/enhanceDropdown.js index 475138e0d..b88f5d486 100644 --- a/components/Dropdown/enhanceDropdown.js +++ b/components/Dropdown/enhanceDropdown.js @@ -1,6 +1,6 @@ import React, { Component } from 'react' -export const enhanceDropdown = (CompositeComponent) => class extends Component { +const enhanceDropdown = (CompositeComponent) => class extends Component { constructor(props) { super(props) this.state = { isOpen: false } @@ -101,4 +101,6 @@ export const enhanceDropdown = (CompositeComponent) => class extends Component {
) } -} \ No newline at end of file +} + +export default enhanceDropdown \ No newline at end of file From 4dabb4aa9d46498b7166d8505b5436fc2ceb288d Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 14:56:43 +0530 Subject: [PATCH 04/10] =?UTF-8?q?Github=20issue#1349,=20Move=20enhanceDrop?= =?UTF-8?q?down=20HOC=20to=20Dropdown=20component=20in=20react-components?= =?UTF-8?q?=20=E2=80=94=20Use=20enhanceDropdown=20HOC=20to=20get=20dropdow?= =?UTF-8?q?n=20behaviour=20in=20react-components/Dropdown?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Dropdown/Dropdown.jsx | 117 ++++++------------------- components/Dropdown/enhanceDropdown.js | 10 +-- 2 files changed, 33 insertions(+), 94 deletions(-) diff --git a/components/Dropdown/Dropdown.jsx b/components/Dropdown/Dropdown.jsx index dc7391841..6aee3f6b8 100644 --- a/components/Dropdown/Dropdown.jsx +++ b/components/Dropdown/Dropdown.jsx @@ -2,105 +2,44 @@ require('./Dropdown.scss') import React, { Component, PropTypes } from 'react' import classNames from 'classnames' - -class Dropdown extends Component { - constructor(props) { - super(props) - - this.state = { isHidden: true } - - this.onClickOutside = this.onClickOutside.bind(this) - this.onClick = this.onClick.bind(this) - this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this) - } - - onClickOutside(evt) { - let currNode = evt.target - let isDropdown = false - - do { - if(currNode.className - && currNode.className.indexOf - && currNode.className.indexOf('dropdown-wrap') > -1) { - isDropdown = true - break +import enhanceDropdown from './enhanceDropdown' + +function Dropdown(props) { + const { className, pointerShadow, noPointer, pointerLeft, isOpen, theme } = props + const ddClasses = classNames('dropdown-wrap', { + [`${className}`] : true, + [`${ theme }`] : true + }) + const ndClasses = classNames('Dropdown', { + 'pointer-shadow' : pointerShadow, + 'pointer-hide' : noPointer, + 'pointer-left' : pointerLeft, + hide : !isOpen + }) + + return ( +
+ { + props.children.map((child) => { + if (child.props.className.indexOf('dropdown-menu-header') > -1) + return child + }) } - currNode = currNode.parentNode - - if(!currNode) - break - } while(currNode.tagName) - - if(!isDropdown) { - this.setState({ isHidden: true }) - } - } - - onClick(evt) { - const dropdownClicked = document.createEvent('Event') - dropdownClicked.initEvent('dropdownClicked', true, false) - - document.dispatchEvent(dropdownClicked) - - this.setState({ isHidden: !this.state.isHidden }) - evt.stopPropagation() - } - - onClickOtherDropdown() { - this.setState({ isHidden: true }) - } - - componentDidMount() { - document.removeEventListener('click', this.onClickOutside) - document.removeEventListener('dropdownClicked', this.onClickOtherDropdown) - - document.addEventListener('click', this.onClickOutside) - document.addEventListener('dropdownClicked', this.onClickOtherDropdown) - } - - componentWillUnmount() { - document.removeEventListener('click', this.onClickOutside) - document.removeEventListener('dropdownClicked', this.onClickOtherDropdown) - } - - render() { - const { className, pointerShadow, noPointer, pointerLeft } = this.props - const ddClasses = classNames('dropdown-wrap', { - [`${className}`] : true, - [`${ this.props.theme }`] : true - }) - const ndClasses = classNames('Dropdown', { - 'pointer-shadow' : pointerShadow, - 'pointer-hide' : noPointer, - 'pointer-left' : pointerLeft, - hide : this.state.isHidden - }) - - return ( -
+
{ - this.props.children.map((child) => { - if (child.props.className.indexOf('dropdown-menu-header') > -1) + props.children.map((child) => { + if (child.props.className.indexOf('dropdown-menu-list') > -1) return child }) } - -
- { - this.props.children.map((child) => { - if (child.props.className.indexOf('dropdown-menu-list') > -1) - return child - }) - } -
- ) - } +
+ ) } Dropdown.propTypes = { children: PropTypes.array.isRequired } -export default Dropdown +export default enhanceDropdown(Dropdown) diff --git a/components/Dropdown/enhanceDropdown.js b/components/Dropdown/enhanceDropdown.js index b88f5d486..ccc07a4c3 100644 --- a/components/Dropdown/enhanceDropdown.js +++ b/components/Dropdown/enhanceDropdown.js @@ -32,10 +32,10 @@ const enhanceDropdown = (CompositeComponent) => class extends Component { }) } - onSelect(value) { - this.handleClick() - if (this.props.onSelect) this.props.onSelect(value) - } + // onSelect(value) { + // this.handleClick() + // if (this.props.onSelect) this.props.onSelect(value) + // } onClickOutside(evt) { let currNode = evt.target @@ -96,7 +96,7 @@ const enhanceDropdown = (CompositeComponent) => class extends Component { { ...this.props } isOpen={isOpen} handleClick={this.handleClick} - onSelect={this.onSelect} + // onSelect={this.onSelect} />
) From 4014bfa915f2e9adb5b803526db1adddbcff2360 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 14:57:25 +0530 Subject: [PATCH 05/10] =?UTF-8?q?Github=20issue#1348,=20Move=20SliderInput?= =?UTF-8?q?=20to=20react-components/formsy=20=E2=80=94=20Moved=20to=20reac?= =?UTF-8?q?t-components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Formsy/FormFields.scss | 42 ++++++++++++ components/Formsy/SliderRadioGroup.jsx | 95 +++++++------------------- 2 files changed, 65 insertions(+), 72 deletions(-) diff --git a/components/Formsy/FormFields.scss b/components/Formsy/FormFields.scss index 3047a4e95..6dc66d69d 100644 --- a/components/Formsy/FormFields.scss +++ b/components/Formsy/FormFields.scss @@ -269,3 +269,45 @@ a.tiled-group-item { width: 15px; } } + +.SliderRadioGroup { + margin: 25px auto 0px auto; + .rc-slider-dot, + .rc-slider-handle { + background: $tc-white; + border: 4px solid $tc-gray-10; + border-radius: 18px; + width: 20px; + height: 20px; + bottom: -7px; + } + + .rc-slider-handle { + border-color: $tc-dark-blue-90; + margin-left: -4px; + bottom: -2px; + display: none; + } + + &:not(.null-value) .rc-slider-dot-active { + border: none; + background: $tc-dark-blue-90 url('../../../assets/images/check-white.svg') no-repeat 6px 7px; + // bottom: -2px; + // margin-left: -5px; + } + + .rc-slider-track, + .rc-slider-rail { + background-color: $tc-gray-10; + } + + .rc-slider-mark { + top: -30px; + .rc-slider-mark-text { + @include tc-label-lg; + line-height: 5 * $base_unit; + color: $tc-gray-80; + letter-spacing: 0; + } + } +} diff --git a/components/Formsy/SliderRadioGroup.jsx b/components/Formsy/SliderRadioGroup.jsx index f1555dad0..abba84e3a 100644 --- a/components/Formsy/SliderRadioGroup.jsx +++ b/components/Formsy/SliderRadioGroup.jsx @@ -1,36 +1,28 @@ 'use strict' import React, { Component, PropTypes } from 'react' +import Slider from 'rc-slider' +import 'rc-slider/assets/index.css' import cn from 'classnames' import _ from 'lodash' import { HOC as hoc } from 'formsy-react' +import './SliderRadioGroup.scss' class SliderRadioGroup extends Component { constructor(props) { super(props) - this.onSlide = this.onSlide.bind(this) + this.onChange = this.onChange.bind(this) } - componentWillMount() { - const idx = Math.max(this.getIndexFromValue(this.props.getValue()), 0) - this.setState({value: idx}) - } - - onChange(idx) { - idx = parseInt(idx) + onChange(value) { const {name, options} = this.props - const newValue = options[idx].value - this.setState({value: idx}) + const newValue = options[value].value this.props.setValue(newValue) this.props.onChange(name, newValue) } noOp() {} - onSlide(event) { - this.onChange(event.target.value) - } - getIndexFromValue(val) { return _.findIndex(this.props.options, (t) => t.value === val) } @@ -39,66 +31,25 @@ class SliderRadioGroup extends Component { const { options, min, max, step} = this.props const value = this.props.getValue() const valueIdx = this.getIndexFromValue(value) - // creating a function to render each type title + desc - const itemFunc = (item, index) => { - // handle active class - const itemClassnames = cn( 'selector', { - active: value === item.value - }) - const idx = this.getIndexFromValue(item.value) - const handleClick = this.onChange.bind(this, idx) - return ( -
-

{item.title}

- {item.desc} -
- ) - } - - // function to render item info - const itemInfoFunc = (item, index) => { - // handle active class - const itemClassnames = cn({active: value === item.value}) - const idx = this.getIndexFromValue(item.value) - const handleClick = this.onChange.bind(this, idx) - return ( - - ) + const marks = {} + for(let i=0; i < options.length; i++) { + marks[i] = options[i].title } return ( - /** - * TODO Using onInput trigger instead of onChange. - * onChange is showing some funky behavior at least in Chrome. - * This functionality should be tested in other browsers - * onChange={this.noOp} - */
- -
- -
- -
- {options.map(itemFunc)} -
- -
- {options.map(itemInfoFunc)} -
- +
) } @@ -113,4 +64,4 @@ SliderRadioGroup.propTypes = { SliderRadioGroup.defaultProps = { onChange: () => {} } -export default hoc(SliderRadioGroup) +export default hoc(SliderRadioGroup) \ No newline at end of file From ff006e72a3f760d1dcb0d702a6c654e8a58ebad3 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 15:01:26 +0530 Subject: [PATCH 06/10] lint fix --- components/Dropdown/Dropdown.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Dropdown/Dropdown.jsx b/components/Dropdown/Dropdown.jsx index 6aee3f6b8..f82e64757 100644 --- a/components/Dropdown/Dropdown.jsx +++ b/components/Dropdown/Dropdown.jsx @@ -1,6 +1,6 @@ require('./Dropdown.scss') -import React, { Component, PropTypes } from 'react' +import React, { PropTypes } from 'react' import classNames from 'classnames' import enhanceDropdown from './enhanceDropdown' From 13bd19e1b1d1fa1a97d2b5840e9cf96ba2be8bb3 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 15:04:26 +0530 Subject: [PATCH 07/10] css import fix --- components/Formsy/SliderRadioGroup.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/Formsy/SliderRadioGroup.jsx b/components/Formsy/SliderRadioGroup.jsx index abba84e3a..941d9ad17 100644 --- a/components/Formsy/SliderRadioGroup.jsx +++ b/components/Formsy/SliderRadioGroup.jsx @@ -6,7 +6,6 @@ import 'rc-slider/assets/index.css' import cn from 'classnames' import _ from 'lodash' import { HOC as hoc } from 'formsy-react' -import './SliderRadioGroup.scss' class SliderRadioGroup extends Component { constructor(props) { From e8c870071becb4f7cbe4e575877a501a22d56414 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 15:14:41 +0530 Subject: [PATCH 08/10] Added missing check image --- components/Forms/images/check-white.svg | 16 ++++++++++++++++ components/Formsy/FormFields.scss | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 components/Forms/images/check-white.svg diff --git a/components/Forms/images/check-white.svg b/components/Forms/images/check-white.svg new file mode 100644 index 000000000..bd787b05a --- /dev/null +++ b/components/Forms/images/check-white.svg @@ -0,0 +1,16 @@ + + + + Fill 89 + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/components/Formsy/FormFields.scss b/components/Formsy/FormFields.scss index 6dc66d69d..8cd787af6 100644 --- a/components/Formsy/FormFields.scss +++ b/components/Formsy/FormFields.scss @@ -291,7 +291,7 @@ a.tiled-group-item { &:not(.null-value) .rc-slider-dot-active { border: none; - background: $tc-dark-blue-90 url('../../../assets/images/check-white.svg') no-repeat 6px 7px; + background: $tc-dark-blue-90 url('./images/check-white.svg') no-repeat 6px 7px; // bottom: -2px; // margin-left: -5px; } From 56739b742b8a7350d01ee0cdb9e2f0572dc4f9cc Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 15:19:49 +0530 Subject: [PATCH 09/10] Cleaning leftover with enhanceDropdown --- components/Dropdown/enhanceDropdown.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Dropdown/enhanceDropdown.js b/components/Dropdown/enhanceDropdown.js index ccc07a4c3..16cfee7d3 100644 --- a/components/Dropdown/enhanceDropdown.js +++ b/components/Dropdown/enhanceDropdown.js @@ -5,7 +5,7 @@ const enhanceDropdown = (CompositeComponent) => class extends Component { super(props) this.state = { isOpen: false } this.handleClick = this.handleClick.bind(this) - this.onSelect = this.onSelect.bind(this) + // this.onSelect = this.onSelect.bind(this) this.onClickOutside = this.onClickOutside.bind(this) this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this) this.refreshEventHandlers = this.refreshEventHandlers.bind(this) From 4d325b6a85bc6cfd66690e3a64719f5d81cdb327 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 14:56:43 +0530 Subject: [PATCH 10/10] =?UTF-8?q?Github=20issue#1349,=20Move=20enhanceDrop?= =?UTF-8?q?down=20HOC=20to=20Dropdown=20component=20in=20react-components?= =?UTF-8?q?=20=E2=80=94=20Use=20enhanceDropdown=20HOC=20to=20get=20dropdow?= =?UTF-8?q?n=20behaviour=20in=20react-components/Dropdown?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Github issue#1348, Move SliderInput to react-components/formsy — Moved to react-components lint fix css import fix Added missing check image Cleaning leftover with enhanceDropdown --- components/Dropdown/Dropdown.jsx | 119 ++++++------------------ components/Dropdown/enhanceDropdown.js | 12 +-- components/Forms/images/check-white.svg | 16 ++++ components/Formsy/FormFields.scss | 42 +++++++++ components/Formsy/SliderRadioGroup.jsx | 94 +++++-------------- 5 files changed, 115 insertions(+), 168 deletions(-) create mode 100644 components/Forms/images/check-white.svg diff --git a/components/Dropdown/Dropdown.jsx b/components/Dropdown/Dropdown.jsx index dc7391841..f82e64757 100644 --- a/components/Dropdown/Dropdown.jsx +++ b/components/Dropdown/Dropdown.jsx @@ -1,106 +1,45 @@ require('./Dropdown.scss') -import React, { Component, PropTypes } from 'react' +import React, { PropTypes } from 'react' import classNames from 'classnames' - -class Dropdown extends Component { - constructor(props) { - super(props) - - this.state = { isHidden: true } - - this.onClickOutside = this.onClickOutside.bind(this) - this.onClick = this.onClick.bind(this) - this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this) - } - - onClickOutside(evt) { - let currNode = evt.target - let isDropdown = false - - do { - if(currNode.className - && currNode.className.indexOf - && currNode.className.indexOf('dropdown-wrap') > -1) { - isDropdown = true - break +import enhanceDropdown from './enhanceDropdown' + +function Dropdown(props) { + const { className, pointerShadow, noPointer, pointerLeft, isOpen, theme } = props + const ddClasses = classNames('dropdown-wrap', { + [`${className}`] : true, + [`${ theme }`] : true + }) + const ndClasses = classNames('Dropdown', { + 'pointer-shadow' : pointerShadow, + 'pointer-hide' : noPointer, + 'pointer-left' : pointerLeft, + hide : !isOpen + }) + + return ( +
+ { + props.children.map((child) => { + if (child.props.className.indexOf('dropdown-menu-header') > -1) + return child + }) } - currNode = currNode.parentNode - - if(!currNode) - break - } while(currNode.tagName) - - if(!isDropdown) { - this.setState({ isHidden: true }) - } - } - - onClick(evt) { - const dropdownClicked = document.createEvent('Event') - dropdownClicked.initEvent('dropdownClicked', true, false) - - document.dispatchEvent(dropdownClicked) - - this.setState({ isHidden: !this.state.isHidden }) - evt.stopPropagation() - } - - onClickOtherDropdown() { - this.setState({ isHidden: true }) - } - - componentDidMount() { - document.removeEventListener('click', this.onClickOutside) - document.removeEventListener('dropdownClicked', this.onClickOtherDropdown) - - document.addEventListener('click', this.onClickOutside) - document.addEventListener('dropdownClicked', this.onClickOtherDropdown) - } - - componentWillUnmount() { - document.removeEventListener('click', this.onClickOutside) - document.removeEventListener('dropdownClicked', this.onClickOtherDropdown) - } - - render() { - const { className, pointerShadow, noPointer, pointerLeft } = this.props - const ddClasses = classNames('dropdown-wrap', { - [`${className}`] : true, - [`${ this.props.theme }`] : true - }) - const ndClasses = classNames('Dropdown', { - 'pointer-shadow' : pointerShadow, - 'pointer-hide' : noPointer, - 'pointer-left' : pointerLeft, - hide : this.state.isHidden - }) - - return ( -
+
{ - this.props.children.map((child) => { - if (child.props.className.indexOf('dropdown-menu-header') > -1) + props.children.map((child) => { + if (child.props.className.indexOf('dropdown-menu-list') > -1) return child }) } - -
- { - this.props.children.map((child) => { - if (child.props.className.indexOf('dropdown-menu-list') > -1) - return child - }) - } -
- ) - } +
+ ) } Dropdown.propTypes = { children: PropTypes.array.isRequired } -export default Dropdown +export default enhanceDropdown(Dropdown) diff --git a/components/Dropdown/enhanceDropdown.js b/components/Dropdown/enhanceDropdown.js index b88f5d486..16cfee7d3 100644 --- a/components/Dropdown/enhanceDropdown.js +++ b/components/Dropdown/enhanceDropdown.js @@ -5,7 +5,7 @@ const enhanceDropdown = (CompositeComponent) => class extends Component { super(props) this.state = { isOpen: false } this.handleClick = this.handleClick.bind(this) - this.onSelect = this.onSelect.bind(this) + // this.onSelect = this.onSelect.bind(this) this.onClickOutside = this.onClickOutside.bind(this) this.onClickOtherDropdown = this.onClickOtherDropdown.bind(this) this.refreshEventHandlers = this.refreshEventHandlers.bind(this) @@ -32,10 +32,10 @@ const enhanceDropdown = (CompositeComponent) => class extends Component { }) } - onSelect(value) { - this.handleClick() - if (this.props.onSelect) this.props.onSelect(value) - } + // onSelect(value) { + // this.handleClick() + // if (this.props.onSelect) this.props.onSelect(value) + // } onClickOutside(evt) { let currNode = evt.target @@ -96,7 +96,7 @@ const enhanceDropdown = (CompositeComponent) => class extends Component { { ...this.props } isOpen={isOpen} handleClick={this.handleClick} - onSelect={this.onSelect} + // onSelect={this.onSelect} />
) diff --git a/components/Forms/images/check-white.svg b/components/Forms/images/check-white.svg new file mode 100644 index 000000000..bd787b05a --- /dev/null +++ b/components/Forms/images/check-white.svg @@ -0,0 +1,16 @@ + + + + Fill 89 + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/components/Formsy/FormFields.scss b/components/Formsy/FormFields.scss index 3047a4e95..8cd787af6 100644 --- a/components/Formsy/FormFields.scss +++ b/components/Formsy/FormFields.scss @@ -269,3 +269,45 @@ a.tiled-group-item { width: 15px; } } + +.SliderRadioGroup { + margin: 25px auto 0px auto; + .rc-slider-dot, + .rc-slider-handle { + background: $tc-white; + border: 4px solid $tc-gray-10; + border-radius: 18px; + width: 20px; + height: 20px; + bottom: -7px; + } + + .rc-slider-handle { + border-color: $tc-dark-blue-90; + margin-left: -4px; + bottom: -2px; + display: none; + } + + &:not(.null-value) .rc-slider-dot-active { + border: none; + background: $tc-dark-blue-90 url('./images/check-white.svg') no-repeat 6px 7px; + // bottom: -2px; + // margin-left: -5px; + } + + .rc-slider-track, + .rc-slider-rail { + background-color: $tc-gray-10; + } + + .rc-slider-mark { + top: -30px; + .rc-slider-mark-text { + @include tc-label-lg; + line-height: 5 * $base_unit; + color: $tc-gray-80; + letter-spacing: 0; + } + } +} diff --git a/components/Formsy/SliderRadioGroup.jsx b/components/Formsy/SliderRadioGroup.jsx index f1555dad0..941d9ad17 100644 --- a/components/Formsy/SliderRadioGroup.jsx +++ b/components/Formsy/SliderRadioGroup.jsx @@ -1,6 +1,8 @@ 'use strict' import React, { Component, PropTypes } from 'react' +import Slider from 'rc-slider' +import 'rc-slider/assets/index.css' import cn from 'classnames' import _ from 'lodash' import { HOC as hoc } from 'formsy-react' @@ -8,29 +10,18 @@ import { HOC as hoc } from 'formsy-react' class SliderRadioGroup extends Component { constructor(props) { super(props) - this.onSlide = this.onSlide.bind(this) + this.onChange = this.onChange.bind(this) } - componentWillMount() { - const idx = Math.max(this.getIndexFromValue(this.props.getValue()), 0) - this.setState({value: idx}) - } - - onChange(idx) { - idx = parseInt(idx) + onChange(value) { const {name, options} = this.props - const newValue = options[idx].value - this.setState({value: idx}) + const newValue = options[value].value this.props.setValue(newValue) this.props.onChange(name, newValue) } noOp() {} - onSlide(event) { - this.onChange(event.target.value) - } - getIndexFromValue(val) { return _.findIndex(this.props.options, (t) => t.value === val) } @@ -39,66 +30,25 @@ class SliderRadioGroup extends Component { const { options, min, max, step} = this.props const value = this.props.getValue() const valueIdx = this.getIndexFromValue(value) - // creating a function to render each type title + desc - const itemFunc = (item, index) => { - // handle active class - const itemClassnames = cn( 'selector', { - active: value === item.value - }) - const idx = this.getIndexFromValue(item.value) - const handleClick = this.onChange.bind(this, idx) - return ( -
-

{item.title}

- {item.desc} -
- ) - } - - // function to render item info - const itemInfoFunc = (item, index) => { - // handle active class - const itemClassnames = cn({active: value === item.value}) - const idx = this.getIndexFromValue(item.value) - const handleClick = this.onChange.bind(this, idx) - return ( - - ) + const marks = {} + for(let i=0; i < options.length; i++) { + marks[i] = options[i].title } return ( - /** - * TODO Using onInput trigger instead of onChange. - * onChange is showing some funky behavior at least in Chrome. - * This functionality should be tested in other browsers - * onChange={this.noOp} - */
- -
- -
- -
- {options.map(itemFunc)} -
- -
- {options.map(itemInfoFunc)} -
- +
) } @@ -113,4 +63,4 @@ SliderRadioGroup.propTypes = { SliderRadioGroup.defaultProps = { onChange: () => {} } -export default hoc(SliderRadioGroup) +export default hoc(SliderRadioGroup) \ No newline at end of file