From c1164baadf343c71242c3d497f54da1ce1c9c229 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 13:13:03 +0530 Subject: [PATCH 1/7] =?UTF-8?q?Github=20issue#1349,=20Move=20enhanceDropdo?= =?UTF-8?q?wn=20HOC=20to=20Dropdown=20component=20in=20react-components=20?= =?UTF-8?q?=E2=80=94=20ProjectStatus,=20editableProjectStatus=20components?= =?UTF-8?q?=20cleanup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProjectStatus/ProjectStatus.jsx | 159 +++--------------- .../ProjectStatus/ProjectStatus.scss | 40 +++-- .../ProjectStatus/editableProjectStatus.js | 64 ++++++- .../components/Projects/ProjectCardBody.jsx | 4 +- 4 files changed, 108 insertions(+), 159 deletions(-) diff --git a/src/components/ProjectStatus/ProjectStatus.jsx b/src/components/ProjectStatus/ProjectStatus.jsx index df842fdd7..33e321c31 100644 --- a/src/components/ProjectStatus/ProjectStatus.jsx +++ b/src/components/ProjectStatus/ProjectStatus.jsx @@ -1,149 +1,44 @@ import React, { Component, PropTypes } from 'react' import cn from 'classnames' -import { PROJECT_STATUS } from '../../config/constants' -import SVGIconImage from '../SVGIconImage' import './ProjectStatus.scss' -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"> - -
- ) - } -} - - /*eslint-enable camelcase */ -const ProjectStatus = ({ canEdit, isOpen, status, handleClick, onSelect, showText, withoutLabel, unifiedHeader = true }) => { - const selected = PROJECT_STATUS.filter((opt) => opt.value === status)[0] +const ProjectStatus = ({ isOpen, status, showText, withoutLabel, unifiedHeader = true }) => { return ( -
-
-
- {showText && ({withoutLabel ? selected.fullName : selected.name})} -
- {isOpen && canEdit &&
-
Project Status
- -
- } +
+
+ {showText && ({withoutLabel ? status.fullName : status.name})}
) } ProjectStatus.propTypes = { - status: PropTypes.oneOf(['draft', 'active', 'in_review', 'reviewed', 'completed', 'paused', 'cancelled']).isRequired + // status: PropTypes.oneOf(['draft', 'active', 'in_review', 'reviewed', 'completed', 'paused', 'cancelled']).isRequired + /** + * Status object, containing name, fullName and value fields + */ + status : PropTypes.arrayOf(PropTypes.object).isRequired, + /** + * Boolean flag to render the status text + */ + showText : PropTypes.boolean, + /** + * Boolean flag to render the more detailed status text (fullName field form the status object). + * Its main use case is the place where we don't show a label like `Project Status` before rendering + * this component. + */ + withoutLabel : PropTypes.boolean, + /** + * Boolean flag to render a unified(with common background color) project status. It is added for backward + * compaitability only. We are not rendering this type of view of project status anymore. + */ + unifiedHeader : PropTypes.boolean } ProjectStatus.defaultProps = { + showText : true, + withoutLabel : false, + unifiedHeader : false } export default ProjectStatus diff --git a/src/components/ProjectStatus/ProjectStatus.scss b/src/components/ProjectStatus/ProjectStatus.scss index 34663c99d..5a0b324bb 100644 --- a/src/components/ProjectStatus/ProjectStatus.scss +++ b/src/components/ProjectStatus/ProjectStatus.scss @@ -19,7 +19,7 @@ $status-height : 20px; } } - .ps-draft { + &.ps-draft { .status-icon { i { background: url('../../assets/images/ps-draft.svg') no-repeat -7px -4px; @@ -28,7 +28,7 @@ $status-height : 20px; } } - .ps-in_review { + &.ps-in_review { .status-icon { i { background: url('../../assets/images/ps-in_review.svg') no-repeat -7px -4px; @@ -37,7 +37,7 @@ $status-height : 20px; } } - .ps-reviewed { + &.ps-reviewed { .status-icon { i { background: url('../../assets/images/ps-reviewed.svg') no-repeat -7px -4px; @@ -46,7 +46,7 @@ $status-height : 20px; } } - .ps-active { + &.ps-active { .status-icon { i { background: url('../../assets/images/ps-active.svg') no-repeat; @@ -55,7 +55,7 @@ $status-height : 20px; } } - .ps-cancelled { + &.ps-cancelled { .status-icon { i { background: url('../../assets/images/ps-cancelled.svg') no-repeat -7px -4px; @@ -64,7 +64,7 @@ $status-height : 20px; } } - .ps-completed { + &.ps-completed { .status-icon { i { background: url('../../assets/images/ps-completed.svg') no-repeat -7px -4px; @@ -73,7 +73,7 @@ $status-height : 20px; } } - .ps-paused { + &.ps-paused { .status-icon { i { background: url('../../assets/images/ps-paused.svg') no-repeat -7px -4px; @@ -82,6 +82,21 @@ $status-height : 20px; } } + .status-label { + position: relative; + @include tc-label-xs; + line-height: $base-unit*4; + height: $base-unit*4; + padding-right: 4 * $base-unit; + margin-left: 10px; + } +} + +.EditableProjectStatus { + + .status-label { + vertical-align: top; + } .status-header { display: flex; // position: absolute; @@ -136,16 +151,7 @@ $status-height : 20px; color: $tc-white; } } - } - - .status-label { - position: relative; - @include tc-label-xs; - line-height: $base-unit*4; - height: $base-unit*4; - padding-right: 4 * $base-unit; - margin-left: 10px; - } + } .status-dropdown { min-width: 110%; diff --git a/src/components/ProjectStatus/editableProjectStatus.js b/src/components/ProjectStatus/editableProjectStatus.js index 2ea599e1a..d3307ab2d 100644 --- a/src/components/ProjectStatus/editableProjectStatus.js +++ b/src/components/ProjectStatus/editableProjectStatus.js @@ -1,9 +1,12 @@ -import React, { Component} from 'react' +import React, { Component, PropTypes } from 'react' import ProjectStatusChangeConfirmation from './ProjectStatusChangeConfirmation' +import ProjectStatus from './ProjectStatus' import cn from 'classnames' import _ from 'lodash' -import { enhanceDropdown} from './ProjectStatus' +import { enhanceDropdown } from 'appirio-tech-react-components' +import SVGIconImage from '../SVGIconImage' import { + PROJECT_STATUS, PROJECT_STATUS_COMPLETED, PROJECT_STATUS_CANCELLED } from '../../config/constants' @@ -50,16 +53,54 @@ const editableProjectStatus = (CompositeComponent) => class extends Component { this.setState({ statusChangeReason : _.get(reason, 'value') }) } + renderDropdown(props) { + const { canEdit, isOpen, handleClick, onSelect, showText, withoutLabel, unifiedHeader, status } = props + const selected = PROJECT_STATUS.filter((opt) => opt.value === status)[0] + return ( +
+
+ + { canEdit && } +
+ { isOpen && canEdit && +
+
Project Status
+ +
+ } +
+ ) + } + render() { const { showStatusChangeDialog, newStatus, statusChangeReason } = this.state - const EnhancedProjectStatus = enhanceDropdown(CompositeComponent) + const { canEdit } = this.props + const ProjectStatusDropdown = canEdit ? enhanceDropdown(this.renderDropdown) : this.renderDropdown return ( -
+
- + { showStatusChangeDialog && class extends Component { } } +editableProjectStatus.propTypes = { + canEdit: PropTypes.boolean, + isOpen: PropTypes.boolean, + handleClick: PropTypes.func, + onSelect : PropTypes.func +} + export default editableProjectStatus \ No newline at end of file diff --git a/src/projects/list/components/Projects/ProjectCardBody.jsx b/src/projects/list/components/Projects/ProjectCardBody.jsx index 0e7fcca0d..2687e7b77 100644 --- a/src/projects/list/components/Projects/ProjectCardBody.jsx +++ b/src/projects/list/components/Projects/ProjectCardBody.jsx @@ -8,6 +8,8 @@ import { PROJECT_STATUS_ACTIVE, PROJECT_ROLE_COPILOT, PROJECT_ROLE_MANAGER } fro import './ProjectCardBody.scss' import _ from 'lodash' +const EnhancedProjectStatus = editableProjectStatus(ProjectStatus) + function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount = 8, onChangeStatus, isSuperUser }) { if (!project) return null @@ -17,8 +19,6 @@ function ProjectCardBody({ project, duration, currentMemberRole, descLinesCount const progress = _.get(process, 'percent', 0) - const EnhancedProjectStatus = canEdit ? editableProjectStatus(ProjectStatus) : ProjectStatus - return (
Date: Wed, 29 Nov 2017 14:45:03 +0530 Subject: [PATCH 2/7] =?UTF-8?q?Github=20issue#1349,=20Move=20enhanceDropdo?= =?UTF-8?q?wn=20HOC=20to=20Dropdown=20component=20in=20react-components=20?= =?UTF-8?q?=E2=80=94=20Use=20Dropdown=20component=20from=20react-component?= =?UTF-8?q?s=20library=20instead=20of=20using=20custom=20one=20hosted=20in?= =?UTF-8?q?=20connect-app=20and=20remove=20the=20one=20exists=20in=20conne?= =?UTF-8?q?ct-app?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dropdown/Dropdown.jsx | 106 ------------ src/components/Dropdown/Dropdown.scss | 158 ------------------ src/components/Dropdown/arrow-dropdown.png | Bin 1057 -> 0 bytes src/components/Dropdown/icon-select.png | Bin 1419 -> 0 bytes .../ProjectStatus/editableProjectStatus.js | 6 +- .../SelectDropdown/SelectDropdown.jsx | 2 +- 6 files changed, 4 insertions(+), 268 deletions(-) delete mode 100644 src/components/Dropdown/Dropdown.jsx delete mode 100644 src/components/Dropdown/Dropdown.scss delete mode 100644 src/components/Dropdown/arrow-dropdown.png delete mode 100644 src/components/Dropdown/icon-select.png diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx deleted file mode 100644 index dc7391841..000000000 --- a/src/components/Dropdown/Dropdown.jsx +++ /dev/null @@ -1,106 +0,0 @@ -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 - } - - 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) - 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 diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss deleted file mode 100644 index 980735e63..000000000 --- a/src/components/Dropdown/Dropdown.scss +++ /dev/null @@ -1,158 +0,0 @@ -@import 'tc-includes'; - - -.dropdown-wrap { - cursor: pointer; - position: relative; -} - -.Dropdown { - background-color: #fff; - box-shadow: 0 2px 7px rgba(0, 0, 0, 0.17); - border-radius: 5px; - display: inline-block; - position: absolute; - left: 0; - top: 5px; - width: 100%; - z-index: 2; - - ul { - height: 100%; - width: 100%; - position: relative; - z-index: 10; - background-color: #fff; - padding: 11px 20px; - border-radius: 5px; - - li { - list-style: none; - } - - li a { - color: #394146; - font-family: "Roboto", Arial, Helvetica, sans-serif; - font-size: 12px; - display: block; - line-height: 26px; - } - } -} - -.dropdown-wrap.default { - border: 1px solid $tc-gray-20; - display: flex; - align-items: center; - padding: calc(2 * #{$base_unit}); - position: relative; - - .Dropdown { - ul.dropdown-menu-list { - padding: 10px 0px; - li { - padding: 0 20px; - @include ellipsis; - } - - li:hover { - background-color: $tc-gray-neutral-dark; - } - } - } -} - -.dropdown-wrap.default::after { - content: " "; - width: 10px; - height: 10px; - display: block; - right: 10px; - top: 50%; - position: absolute; - transform: translateY(-50%) rotate(45deg); - border-bottom: 2px solid $tc-gray-20; - border-right: 2px solid $tc-gray-20; -} - -.Dropdown.hide { - display: none; -} - -.Dropdown.pointer-left:before { - right: initial; - left: 15px; -} - -.UserDropdownMenu .Dropdown.pointer-shadow { - margin-top: 35px; - - &:before { - content: ''; - display: block; - position: absolute; - top: -6px; - right: 24px; - width: 12px; - height: 12px; - background: #FFFFFF; - border-right: 1px solid $tc-gray-20;; - border-bottom: 1px solid $tc-gray-20;; - transform: rotate(-135deg); - z-index:999; - } -} - -.Dropdown.pointer-hide:before { - display: none; -} - -.new-theme { - text-align: left; - height: 30px; - color: $tc-black; - background: $tc-gray-neutral-light; - border: 1px solid $tc-gray-20; - @include roboto; - font-size: 13px; - line-height: 20px; - width: 100%; - border-radius: 2px; - position: relative; - - .dropdown-menu-header { - width: 100%; - border: 0; - height: 28px; - line-height: 28px; - margin: 0; - padding: 0 0 0 10px; - color: $tc-gray-50; - font-size: 13px; - } - &:after{ - display: block; - content: ''; - position: absolute; - width: 10px; - height: 14px; - right: 11px; - top: 50%; - margin-top: -7px; - background: url("./icon-select.png") left top no-repeat; - background-size: 10px 14px; - z-index:2; - } - .Dropdown { - ul.dropdown-menu-list { - padding: 10px 0px; - li { - padding: 0 20px; - @include ellipsis; - } - li:hover { - background-color: $tc-gray-neutral-dark; - } - } - } -} diff --git a/src/components/Dropdown/arrow-dropdown.png b/src/components/Dropdown/arrow-dropdown.png deleted file mode 100644 index 2aa5059e991abe185811ae28f7f01b3b7f17e316..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1057 zcmaJ=O-K|`9AC0SS$DNV+rXRm!SDC`f4twj-q~@w zs=7=yApH24fQ zyIkArw0Ht1q;^3;IxRaGI;We2O=JQ&Q&!RtgFe`=8Gh>XgGUt5R6o_jORQvuU`lHp zwqVzAM_d_BD?XJ9w1DQEKm>G%WsuVc3|q+gse-OR*3L0QfdT}l{nSQM38@o=kOcux zd)*4haiGyhb9_^Shd&NHEXOmfkKtH1%LyDScvw*UC=$(5lR`|46l0N{pGskD3JjCY zX6bALjjVo#^Z9%X>tQ?|H$k}VAp^@fw_(?o6hvq%mS$oN8NgAL`%nh^DU#_%3A(u{ zYuLp$k%loj*C0l)BiNLKxX8WP(tr&^1usqZum7+Q$kUNfM%ljb%fDQPEEk6(d+PoLbMd`)NCp0~ENwa)T>F#c+3+I7hNqAzfF=t}#iuXS%~(mSe_ zyDxVq)EoRSZ*Toavtm8J`}Vh{YttXbmIH$alfTDStM7~*U1Uecd*3b66LaU^uH+Zk z{ODP8HE}bRPtC8nmljs&`NchFX6BCw6Ei=?uFfqiZ`eM}o=96l&fMqp-64PCZz-ZF*)y}LpSJ!nhm6=|e^g#|Vd?8iYXYwvbFY#|7P zWz(^YOcxmrJ3itfWQmZCIS?$!m_Pu>^sg}k!Qn=P!Eh=NKI&Tr=pW)Gckf4@=lMOq zkKCEm2p2{;@rN~@I7Xq7& zQY1s9!8DALGMN*LSSqb3Io(i{Z;%)fxeShV5J12}aXQ#xIcBvH4k@y(OMt!S8b#oB z2$wHKo|($jq{2#?rC^aj9B#mI9FCF*a8Y!GP!t9WF+74_gkd)29 zniGDF*1ftg? z_4TgU*est&o`pBMqm{4OCzt1BRyUtN4jC`J@VP;=p}r5x+dq_qTNXE;NZSpyWoQdEBT>4J>_w`>2cQ! zcioHg*MVbvpg-}uD+YbJN_C3QKz#l{bu}!LWhd4_?f!AKGxzPrflqFXcexi+d=^)h z27hiJO!++ed83jyGdEs3G?e7uTP81EyVim|NV-gV2S4Z6eIkEtc>$d-I^lJCq_fn0 z_vKLW+T#3$KxdAt_?=eMp92>jDR$huAM>RDMIw2IFxc3J#uaKr!VisiLr9PRlN0mUD%u2daSNBu%Q+D kqIK#@>&PM3H(tING&W!6Ps>itd47*-RWkWi{JZ6U115GI9RL6T diff --git a/src/components/ProjectStatus/editableProjectStatus.js b/src/components/ProjectStatus/editableProjectStatus.js index d3307ab2d..ab2d650f0 100644 --- a/src/components/ProjectStatus/editableProjectStatus.js +++ b/src/components/ProjectStatus/editableProjectStatus.js @@ -54,7 +54,7 @@ const editableProjectStatus = (CompositeComponent) => class extends Component { } renderDropdown(props) { - const { canEdit, isOpen, handleClick, onSelect, showText, withoutLabel, unifiedHeader, status } = props + const { canEdit, isOpen, handleClick, onItemSelect, showText, withoutLabel, unifiedHeader, status } = props const selected = PROJECT_STATUS.filter((opt) => opt.value === status)[0] return (
@@ -78,7 +78,7 @@ const editableProjectStatus = (CompositeComponent) => class extends Component { href="javascript:" className={cn('status-option', 'ps-' + item.value, { active: item.value === status })} onClick={(e) => { - onSelect(item.value, e) + onItemSelect(item.value, e) }} > @@ -100,7 +100,7 @@ const editableProjectStatus = (CompositeComponent) => class extends Component { return (
- + { showStatusChangeDialog && Date: Wed, 29 Nov 2017 14:58:48 +0530 Subject: [PATCH 3/7] Fixed lint error --- src/components/ProjectStatus/ProjectStatus.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ProjectStatus/ProjectStatus.jsx b/src/components/ProjectStatus/ProjectStatus.jsx index 33e321c31..a19e95aa8 100644 --- a/src/components/ProjectStatus/ProjectStatus.jsx +++ b/src/components/ProjectStatus/ProjectStatus.jsx @@ -1,9 +1,9 @@ -import React, { Component, PropTypes } from 'react' +import React, { PropTypes } from 'react' import cn from 'classnames' import './ProjectStatus.scss' /*eslint-enable camelcase */ -const ProjectStatus = ({ isOpen, status, showText, withoutLabel, unifiedHeader = true }) => { +const ProjectStatus = ({ status, showText, withoutLabel, unifiedHeader = true }) => { return (
From c26d25219eaf8b492441885ab127be6ea765fbdc Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 15:41:58 +0530 Subject: [PATCH 4/7] =?UTF-8?q?Github=20issue#1348,=20Move=20SliderInput?= =?UTF-8?q?=20to=20react-components/formsy=20=E2=80=94=20Adapted=20code=20?= =?UTF-8?q?to=20point=20to=20new=20moved=20SliderRadioGroup=20component=20?= =?UTF-8?q?from=20react-components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SliderInput/SliderInput.js | 67 ------------------- src/components/SliderInput/SliderInput.scss | 43 ------------ .../SpecQuestionList/SpecQuestionList.scss | 2 +- .../detail/components/SpecQuestions.jsx | 3 +- 4 files changed, 2 insertions(+), 113 deletions(-) delete mode 100644 src/components/SliderInput/SliderInput.js delete mode 100644 src/components/SliderInput/SliderInput.scss diff --git a/src/components/SliderInput/SliderInput.js b/src/components/SliderInput/SliderInput.js deleted file mode 100644 index 030f78610..000000000 --- a/src/components/SliderInput/SliderInput.js +++ /dev/null @@ -1,67 +0,0 @@ -'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 './SliderInput.scss' - -class SliderInput extends Component { - constructor(props) { - super(props) - this.onChange = this.onChange.bind(this) - } - - onChange(value) { - const {name, options} = this.props - const newValue = options[value].value - this.props.setValue(newValue) - this.props.onChange(name, newValue) - } - - noOp() {} - - getIndexFromValue(val) { - return _.findIndex(this.props.options, (t) => t.value === val) - } - - render() { - const { options, min, max, step} = this.props - const value = this.props.getValue() - const valueIdx = this.getIndexFromValue(value) - const marks = {} - for(let i=0; i < options.length; i++) { - marks[i] = options[i].title - } - return ( -
- -
- ) - } -} - -SliderInput.propTypes = { - options: PropTypes.arrayOf(PropTypes.object.isRequired).isRequired, - min: PropTypes.number.isRequired, - max: PropTypes.number.isRequired, - step: PropTypes.number.isRequired -} -SliderInput.defaultProps = { - onChange: () => {} -} -export default hoc(SliderInput) diff --git a/src/components/SliderInput/SliderInput.scss b/src/components/SliderInput/SliderInput.scss deleted file mode 100644 index 95944cd53..000000000 --- a/src/components/SliderInput/SliderInput.scss +++ /dev/null @@ -1,43 +0,0 @@ -@import 'tc-includes'; - -.SliderInput { - 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; - } - } -} \ No newline at end of file diff --git a/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss b/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss index 9ef9735e9..74fff6e03 100644 --- a/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss +++ b/src/projects/detail/components/SpecQuestionList/SpecQuestionList.scss @@ -105,7 +105,7 @@ margin: 15px 30px 15px 0; } - .SliderInput { + .SliderRadioGroup { margin: 40px auto 15px auto; width: 80%; } diff --git a/src/projects/detail/components/SpecQuestions.jsx b/src/projects/detail/components/SpecQuestions.jsx index 03fe77da5..591a6f26c 100644 --- a/src/projects/detail/components/SpecQuestions.jsx +++ b/src/projects/detail/components/SpecQuestions.jsx @@ -8,7 +8,6 @@ import SpecQuestionIcons from './SpecQuestionList/SpecQuestionIcons' import SpecFeatureQuestion from './SpecFeatureQuestion' import ColorSelector from './../../../components/ColorSelector/ColorSelector' import SelectDropdown from './../../../components/SelectDropdown/SelectDropdown' -import SliderInput from './../../../components/SliderInput/SliderInput' // HOC for TextareaInput const SeeAttachedTextareaInput = seeAttachedWrapperField(TCFormFields.Textarea) @@ -141,7 +140,7 @@ const SpecQuestions = ({questions, project, dirtyProject, resetFeatures, showFea }) break case 'slide-radiogroup': - ChildElem = SliderInput + ChildElem = TCFormFields.SliderRadioGroup _.assign(elemProps, { options: q.options, min: 0, From 817752ddf1b742af2e83e951ec0c4de60120286a Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 29 Nov 2017 15:42:23 +0530 Subject: [PATCH 5/7] =?UTF-8?q?Github=20issue#1349,=20Move=20enhanceDropdo?= =?UTF-8?q?wn=20HOC=20to=20Dropdown=20component=20in=20react-components=20?= =?UTF-8?q?=E2=80=94=20Syntax=20fix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/ProjectStatus/ProjectStatus.jsx | 6 +++--- src/components/ProjectStatus/editableProjectStatus.js | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index aa085fc62..6d53577c6 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "webpack-merge": "^4.0.0" }, "dependencies": { - "appirio-tech-react-components": "github:appirio-tech/react-components#feature/connectv2", + "appirio-tech-react-components": "github:appirio-tech/react-components#feature/tech-debt-squashed", "axios": "^0.13.1", "classnames": "^2.2.3", "coffeescript": "^1.12.7", diff --git a/src/components/ProjectStatus/ProjectStatus.jsx b/src/components/ProjectStatus/ProjectStatus.jsx index a19e95aa8..6317df082 100644 --- a/src/components/ProjectStatus/ProjectStatus.jsx +++ b/src/components/ProjectStatus/ProjectStatus.jsx @@ -21,18 +21,18 @@ ProjectStatus.propTypes = { /** * Boolean flag to render the status text */ - showText : PropTypes.boolean, + showText : PropTypes.bool, /** * Boolean flag to render the more detailed status text (fullName field form the status object). * Its main use case is the place where we don't show a label like `Project Status` before rendering * this component. */ - withoutLabel : PropTypes.boolean, + withoutLabel : PropTypes.bool, /** * Boolean flag to render a unified(with common background color) project status. It is added for backward * compaitability only. We are not rendering this type of view of project status anymore. */ - unifiedHeader : PropTypes.boolean + unifiedHeader : PropTypes.bool } ProjectStatus.defaultProps = { diff --git a/src/components/ProjectStatus/editableProjectStatus.js b/src/components/ProjectStatus/editableProjectStatus.js index ab2d650f0..a20d2b1e9 100644 --- a/src/components/ProjectStatus/editableProjectStatus.js +++ b/src/components/ProjectStatus/editableProjectStatus.js @@ -116,10 +116,10 @@ const editableProjectStatus = (CompositeComponent) => class extends Component { } editableProjectStatus.propTypes = { - canEdit: PropTypes.boolean, - isOpen: PropTypes.boolean, - handleClick: PropTypes.func, - onSelect : PropTypes.func + /** + * Boolean flag to control editability of the project status. It does not render the dropdown if it is not editable. + */ + canEdit: PropTypes.bool } export default editableProjectStatus \ No newline at end of file From 761f9569fe05fcb0486494ab9efca108677efa84 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 20 Dec 2017 17:34:03 +0530 Subject: [PATCH 6/7] pointing back the react-components dependency to feature/connectv2 from the specific feature branch clean up from deployable branch list --- circle.yml | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/circle.yml b/circle.yml index 8c97ecdfa..2084eb9ca 100644 --- a/circle.yml +++ b/circle.yml @@ -19,7 +19,7 @@ compile: deployment: development: - branch: [dev, 'feature/move_my_projects_filter_to_primary_toolbar'] + branch: dev owner: appirio-tech commands: - ./deploy.sh DEV diff --git a/package.json b/package.json index 6d53577c6..aa085fc62 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "webpack-merge": "^4.0.0" }, "dependencies": { - "appirio-tech-react-components": "github:appirio-tech/react-components#feature/tech-debt-squashed", + "appirio-tech-react-components": "github:appirio-tech/react-components#feature/connectv2", "axios": "^0.13.1", "classnames": "^2.2.3", "coffeescript": "^1.12.7", From cf2fadcc5c45eb75258d2202cc86f9c4bac7dd34 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Wed, 20 Dec 2017 17:58:44 +0530 Subject: [PATCH 7/7] update for tech debt changes --- npm-shrinkwrap.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 3475b6771..48b143948 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -357,7 +357,7 @@ } }, "appirio-tech-react-components": { - "version": "github:appirio-tech/react-components#923908dbb7ae84b1dabd7d9fe47994e5459e1af5", + "version": "github:appirio-tech/react-components#ac2f6c5474d0334f5bdc0b84ad37f939ba8d7cbf", "requires": { "appirio-tech-api-schemas": "5.0.70", "appirio-tech-client-app-layer": "0.1.3",