diff --git a/components/Carousel/Carousel.jsx b/components/Carousel/Carousel.jsx index 78aaacd7b..4e158f7a0 100644 --- a/components/Carousel/Carousel.jsx +++ b/components/Carousel/Carousel.jsx @@ -8,27 +8,30 @@ import IconArrowMinimalLeft from '../Icons/IconArrowMinimalLeft' import IconArrowMinimalRight from '../Icons/IconArrowMinimalRight' export default class Carousel extends Component { - componentWillMount() { - this.handleResize = this.handleResize.bind(this) - window.addEventListener('resize', this.handleResize) + constructor(props) { + super(props) this.handlePageUp = this.handlePageUp.bind(this) this.handlePageDown = this.handlePageDown.bind(this) - this.setState({firstVisibleItem: this.props.firstVisibleItem || 0}) + this.handleResize = this.handleResize.bind(this) + this.state = { + firstVisibleItem: this.props.firstVisibleItem || 0 + } } - componentWillUnmount() { - window.removeEventListener('resize', this.handleResize) + componentDidMount() { + window.addEventListener('resize', this.handleResize) + this.validatePagers() } - handleResize() { + componentDidUpdate() { this.validatePagers() } - componentDidMount() { - this.validatePagers() + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize) } - componentDidUpdate() { + handleResize() { this.validatePagers() } @@ -118,4 +121,4 @@ export default class Carousel extends Component { ) } -} \ No newline at end of file +} diff --git a/components/Drawer/Drawer.jsx b/components/Drawer/Drawer.jsx index e667986c7..6a16fa064 100644 --- a/components/Drawer/Drawer.jsx +++ b/components/Drawer/Drawer.jsx @@ -1,4 +1,5 @@ -import React, { PropTypes } from 'react' +import React from 'react' +import PropTypes from 'prop-types' import MuiDrawer from 'material-ui/Drawer' import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' @@ -110,4 +111,4 @@ Drawer.propTypes = { zDepth: PropTypes.number } -export default Drawer \ No newline at end of file +export default Drawer diff --git a/components/ExampleNav/ExampleNavContainer.js b/components/ExampleNav/ExampleNavContainer.js index 59da67274..ecdf59ea9 100644 --- a/components/ExampleNav/ExampleNavContainer.js +++ b/components/ExampleNav/ExampleNavContainer.js @@ -78,9 +78,9 @@ class ExampleNavContainer extends Component { const { onClick, onBack } = this if (root) { - return React.createElement(ExampleNav, { links, onClick }) + return } else { - return React.createElement(ExampleNav, { links, onBack }) + return } } } diff --git a/components/FilePicker/FilePicker.jsx b/components/FilePicker/FilePicker.jsx index 5c5b58933..10ba1a6c3 100644 --- a/components/FilePicker/FilePicker.jsx +++ b/components/FilePicker/FilePicker.jsx @@ -15,12 +15,25 @@ class FilePicker extends React.Component { this.onChange = this.onChange.bind(this) } - onChange(event) { - this.props.onSuccess(this.props.options.multiple ? event.fpfiles : event.fpfile) + static getDerivedStateFromProps(nextProps, prevState){ + const dragText = nextProps.options.dragText + // every setState will invoke this, so cache dragText + if(prevState.preDragText === undefined) { + return { + preDragText: nextProps.options.dragText + } + } + + // if props change + if (nextProps.options.dragText !== prevState.preDragText) { + prevState.preDragText = dragText + prevState.dragText = dragText + } + return prevState } - componentWillReceiveProps(nextProps) { - this.setState({dragText: nextProps.options.dragText}) + onChange(event) { + this.props.onSuccess(this.props.options.multiple ? event.fpfiles : event.fpfile) } componentDidMount() { diff --git a/components/FilePicker/FilePickerExample.jsx b/components/FilePicker/FilePickerExample.jsx index 37cce574e..a9a010761 100644 --- a/components/FilePicker/FilePickerExample.jsx +++ b/components/FilePicker/FilePickerExample.jsx @@ -3,7 +3,7 @@ import FilePicker from './FilePicker' const FilePickerExample = () => { const onFileUpload = (files) => { - alert(JSON.strinigify(files, null, 2)) + alert(JSON.stringify(files, null, 2)) } const FILE_PICKER_API_KEY = process.env.FILE_PICKER_API_KEY_DEV @@ -36,4 +36,4 @@ const FilePickerExample = () => { } -module.exports = FilePickerExample \ No newline at end of file +module.exports = FilePickerExample diff --git a/components/Formsy/CheckboxGroup.jsx b/components/Formsy/CheckboxGroup.jsx index 5d0954897..9912653d7 100644 --- a/components/Formsy/CheckboxGroup.jsx +++ b/components/Formsy/CheckboxGroup.jsx @@ -73,7 +73,7 @@ class CheckboxGroup extends Component { } } -CheckboxGroup.PropTypes = { +CheckboxGroup.propTypes = { options: PropTypes.arrayOf(PropTypes.object).isRequired } diff --git a/components/Formsy/FormsySelect.jsx b/components/Formsy/FormsySelect.jsx index c1a7c6b77..f271ddead 100644 --- a/components/Formsy/FormsySelect.jsx +++ b/components/Formsy/FormsySelect.jsx @@ -9,6 +9,7 @@ import './FormsySelect.scss' * This component is a formsy wrapper for the React Select component * @param {Object} props Component props */ + const FormsySelect = props => { const { onChange, wrapperClass, label } = props const selectedOption = props.getValue() @@ -22,12 +23,19 @@ const FormsySelect = props => { return (
-
) } -FormsySelect.PropTypes = { +FormsySelect.propTypes = { onChange: PropTypes.func, setValueOnly: PropTypes.bool, options: PropTypes.array.isRequired diff --git a/components/Formsy/FormsySelect.scss b/components/Formsy/FormsySelect.scss index 5127c28de..40616d65c 100644 --- a/components/Formsy/FormsySelect.scss +++ b/components/Formsy/FormsySelect.scss @@ -1,6 +1,14 @@ @import "~tc-ui/src/styles/tc-includes"; :global { + .basic-single-select{ + .select__input { + input { + height: 10px; + } + } + + } .formsySelectComponent { .Select-control > .Select-input > input, .Select-control > .Select-input > input:focus { diff --git a/components/Formsy/PasswordInput.jsx b/components/Formsy/PasswordInput.jsx index 8253f05f5..86513c7c4 100644 --- a/components/Formsy/PasswordInput.jsx +++ b/components/Formsy/PasswordInput.jsx @@ -12,7 +12,7 @@ class PasswordInput extends Component { constructor(props) { super(props) - + this.changeValue = this.changeValue.bind(this) this.toggleShowHide = this.toggleShowHide.bind(this) this.isValidInput= this.isValidInput.bind(this) @@ -76,7 +76,7 @@ class PasswordInput extends Component { className={classes} type={this.state.type} placeholder={placeholder} - value={this.props.getValue()} + value={this.props.getValue() || ''} disabled={disabled} onChange={this.changeValue} maxLength={maxLength} diff --git a/components/Formsy/RadioGroup.jsx b/components/Formsy/RadioGroup.jsx index 217052455..66310f108 100644 --- a/components/Formsy/RadioGroup.jsx +++ b/components/Formsy/RadioGroup.jsx @@ -37,7 +37,7 @@ class RadioGroup extends Component { const price = (radio.quoteUp || 0) - (selectedOption.quoteUp || 0) return (price < 0 ? '-' : '+') + ' $' + numberWithCommas(Math.abs(price)) } - const checked = (selectedOption && selectedOption.value === radio.value) + const checked = (selectedOption && selectedOption.value === radio.value) || false const disabled = this.props.isFormDisabled() || radio.disabled || this.props.disabled const rClass = cn('radio', { disabled, selected: checked }) const id = name+'-opt-'+key @@ -81,7 +81,7 @@ class RadioGroup extends Component { } -RadioGroup.PropTypes = { +RadioGroup.propTypes = { options: PropTypes.arrayOf(PropTypes.object).isRequired } diff --git a/components/Formsy/TextInput.jsx b/components/Formsy/TextInput.jsx index 25efe8765..ceb68b128 100644 --- a/components/Formsy/TextInput.jsx +++ b/components/Formsy/TextInput.jsx @@ -67,7 +67,7 @@ class TextInput extends Component { className={classes} type={type} placeholder={placeholder} - value={value} + value={value || ''} disabled={disabled} onChange={this.changeValue} maxLength={maxLength} diff --git a/components/Formsy/TimezoneInput.jsx b/components/Formsy/TimezoneInput.jsx index e4c6cbde7..b9fd4d513 100644 --- a/components/Formsy/TimezoneInput.jsx +++ b/components/Formsy/TimezoneInput.jsx @@ -54,7 +54,7 @@ class TimezoneInput extends React.Component { } } -TimezoneInput.PropTypes = { +TimezoneInput.propTypes = { render: PropTypes.func.isRequired } diff --git a/components/ImageViewer/ImageViewerContainer.coffee b/components/ImageViewer/ImageViewerContainer.coffee index 60ce37966..a607229c8 100644 --- a/components/ImageViewer/ImageViewerContainer.coffee +++ b/components/ImageViewer/ImageViewerContainer.coffee @@ -26,7 +26,7 @@ class ImageViewer extends React.Component this.updateArrowsState = this.updateArrowsState.bind this this.toggleZoom = this.toggleZoom.bind this - componentWillMount: -> + componentDidMount: -> this.props.onFileChange({file: this.state.file}) if this.props.onFileChange componentWillUpdate: -> @@ -76,4 +76,4 @@ class ImageViewer extends React.Component selectFile: this.selectFile toggleZoom: this.toggleZoom -module.exports = ImageViewer \ No newline at end of file +module.exports = ImageViewer diff --git a/components/ImageViewer/ImageViewerExamples.cjsx b/components/ImageViewer/ImageViewerExamples.cjsx index b24e6163c..f1459be13 100644 --- a/components/ImageViewer/ImageViewerExamples.cjsx +++ b/components/ImageViewer/ImageViewerExamples.cjsx @@ -20,8 +20,8 @@ ImageViewerExamples = ->

With Files (Required)

- +
-module.exports = ImageViewerExamples \ No newline at end of file +module.exports = ImageViewerExamples diff --git a/components/LoginScreen/LoginScreenExamples.jsx b/components/LoginScreen/LoginScreenExamples.jsx index 997432275..1c7cec735 100644 --- a/components/LoginScreen/LoginScreenExamples.jsx +++ b/components/LoginScreen/LoginScreenExamples.jsx @@ -3,7 +3,7 @@ import LoginScreen from './index.jsx' const LoginScreenExamples = () => (
- + {}}}/>
) diff --git a/components/MenuBar/MenuBar.jsx b/components/MenuBar/MenuBar.jsx index c91ca9ae9..957f4a7ff 100644 --- a/components/MenuBar/MenuBar.jsx +++ b/components/MenuBar/MenuBar.jsx @@ -7,9 +7,17 @@ import NavLink from '../NavLink/NavLink' require('./MenuBar.scss') export default class MenuBar extends Component { - componentWillMount() { + constructor(props) { + super(props) + this.handleResize = this.handleResize.bind(this) - this.handleResize() + + this.state = { + mobile : window.innerWidth <= this.props.mobileBreakPoint + } + } + + componentDidMount() { window.addEventListener('resize', this.handleResize) } @@ -21,7 +29,6 @@ export default class MenuBar extends Component { this.setState({ mobile: window.innerWidth <= this.props.mobileBreakPoint }) } - renderLinkDom(item, linkContent, itemClass, linkTarget) { // _.self forces a full page refresh using underlying Link linkTarget = item.target || null diff --git a/components/RegistrationScreen/index.jsx b/components/RegistrationScreen/index.jsx index 004b9a88e..5c563ef9b 100644 --- a/components/RegistrationScreen/index.jsx +++ b/components/RegistrationScreen/index.jsx @@ -243,7 +243,7 @@ class RegistrationScreen extends Component { label={renderRequired('Country')} name="country" value="" - options={countryList} + options={countryList || []} onChange={this.onCountryChange} required placeholder="- Select country -" diff --git a/components/RichDataTable/RichDataTableExample.jsx b/components/RichDataTable/RichDataTableExample.jsx index 23f209509..1df7e286e 100644 --- a/components/RichDataTable/RichDataTableExample.jsx +++ b/components/RichDataTable/RichDataTableExample.jsx @@ -3,7 +3,15 @@ require('./RichDataTableExample.scss') import React from'react' import RichDataTableHeader from './RichDataTableHeader' -const columns = ['Type', 'Projects', 'Status', 'Status Date', 'Customer', 'Copilot'] +const columns = [ + {key: 'Type'}, + {key: 'Projects'}, + {key: 'Status'}, + {key: 'Status Date'}, + {key: 'Customer'}, + {key: 'Copilot'} +] + const sortColumns = { Projects: [ { diff --git a/components/SearchBar/SearchBar.jsx b/components/SearchBar/SearchBar.jsx index 303a39e91..0af7d2fd8 100644 --- a/components/SearchBar/SearchBar.jsx +++ b/components/SearchBar/SearchBar.jsx @@ -9,10 +9,16 @@ import classNames from 'classnames' //states: empty, filled, focused + + +const getQueryStringValue = (key) => { + return unescape(window.location.href.replace(new RegExp('^(?:.*[&\\?]' + escape(key).replace(/[\.\+\*]/g, '\\$&') + '(?:\\=([^&]*))?)?.*$', 'i'), '$1')) +} + class SearchBar extends Component { constructor(props) { super(props) - const initialTerm = this.getQueryStringValue(props.searchTermKey) + const initialTerm = getQueryStringValue(props.searchTermKey) this.state = { searchState: initialTerm.length > 0 ? 'filled' : 'empty', suggestions: [], @@ -30,8 +36,28 @@ class SearchBar extends Component { this.handleSuggestionsUpdate = this.handleSuggestionsUpdate.bind(this) } - getQueryStringValue (key) { - return unescape(window.location.href.replace(new RegExp('^(?:.*[&\\?]' + escape(key).replace(/[\.\+\*]/g, '\\$&') + '(?:\\=([^&]*))?)?.*$', 'i'), '$1')) + + static getDerivedStateFromProps(nextProps, prevState) { + const searchVal = getQueryStringValue(nextProps.searchTermKey) + // every setState will invoke this, so cache preSearchVal + if(prevState.preSearchVal === undefined) { + return { + preSearchVal: searchVal + } + } + // if props change + if (searchVal !== prevState.preSearchVal) { + if(searchVal !== prevState.searchVal) { + return { + searchState: 'filled', + searchValue: searchVal, + preSearchVal: searchVal + } + } + //cache preSearchVal + prevState.preSearchVal = searchVal + } + return prevState } componentDidMount() { @@ -42,12 +68,6 @@ class SearchBar extends Component { window.removeEventListener('click', this.handleOutsideClick) } - componentWillReceiveProps(nextProps) { - const searchVal = this.getQueryStringValue(nextProps.searchTermKey) - if (searchVal !== this.state.searchValue) { - this.setState({ searchState: 'filled', searchValue: searchVal }) - } - } handleOutsideClick(evt) { let t = evt.target @@ -121,7 +141,7 @@ class SearchBar extends Component { this.refs.searchValue.value = '' this.setState({ searchValue: this.refs.searchValue.value, finalTerm: '' }) this.setState({ searchState: 'empty' }) - this.setState({ suggestions: false }) + this.setState({ suggestions: [] }) this.props.onClearSearch() } diff --git a/components/StepRow/StatusSelect.cjsx b/components/StepRow/StatusSelect.cjsx index efd378566..c97c2dca3 100644 --- a/components/StepRow/StatusSelect.cjsx +++ b/components/StepRow/StatusSelect.cjsx @@ -1,10 +1,8 @@ 'use strict' -require 'react-select/dist/react-select.css' - React = require 'react' +import Select from 'react-select' PropTypes = require 'prop-types' -Select = require 'react-select' find = require 'lodash/find' statuses = [ @@ -21,27 +19,32 @@ statuses = [ value: 'CLOSED' ] -StepRow = ({ +StepRow = ({ formProps editable isNew }) -> label = find(statuses, (t) -> t.value == formProps.value)?.label + if typeof formProps.value == 'string' + formProps.value = {value:formProps.value, label: label } + if editable + + +renderDateTime = (field) -> + + +renderStepTypeSelect = (field) -> + + + +renderStatusSelect = (field) -> + + +StepRow = ({ handleSubmit submitting dirty @@ -32,40 +49,47 @@ StepRow = ({ { if editable
- - + - + + + + + -
else if isNew
- - + - + - + + +
else
-

{name.value}

-

{startsAt.value}

-

{details.submissionsDueBy.value}

+ + + -

{endsAt.value}

+ + +
} - - + + + + { if editable && (dirty || isNew) @@ -76,7 +100,6 @@ StepRow = ({ StepRow.propTypes = - fields : PropTypes.object.isRequired handleSubmit : PropTypes.func.isRequired submitting : PropTypes.bool.isRequired permissions : PropTypes.array.isRequired diff --git a/components/StepRow/StepTypeSelect.cjsx b/components/StepRow/StepTypeSelect.cjsx index 30acd5690..4c7c84158 100644 --- a/components/StepRow/StepTypeSelect.cjsx +++ b/components/StepRow/StepTypeSelect.cjsx @@ -1,10 +1,9 @@ 'use strict' -require 'react-select/dist/react-select.css' +import Select from 'react-select' React = require 'react' PropTypes = require 'prop-types' -Select = require 'react-select' find = require 'lodash/find' types = [ @@ -24,27 +23,32 @@ types = [ value: 'codeFinalFixes' ] -StepRow = ({ +StepRow = ({ formProps isNew editable }) -> typeLabel = find(types, (t) -> t.value == formProps.value)?.label + if typeof formProps.value == 'string' + formProps.value = {value:formProps.value, label: typeLabel } + if isNew if editable +