Merge pull request #16 from b12io/the-last-update

Pull in the latest code from the closed-source repository

Author: junusheva

components/Icons.es6.js

@@ -26,7 +26,7 @@ class CheckboxMultipleSelect extends React.Component {
     })
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     this.overrideStateFromProps(nextProps)
   }
 

components/form/checkbox-multiple-select/CheckboxMultipleSelect.es6.js

@@ -36,6 +36,12 @@ class DatetimePicker extends React.Component<Props, State> {
   // event from firing.
   textInput: ?boolean
 
+  componentDidUpdate(prevProps: Props) {
+    if(prevProps.value !== this.props.value) {
+      this.setState({datetime: this.props.value});
+    }
+  }
+
   handleChange = (datetime: moment$Moment): void => {
     const { dateOnly, timeOnly, updateDatetime } = this.props
 

components/form/datetime-picker/DatetimePicker.es6.js

@@ -118,6 +118,7 @@ class FileUpload extends React.Component<Props> {
           label={buttonLabel}
           icon={buttonIcon}
           small={buttonSmall}
+          loading={loading}
           // $FlowFixMe: Not sure how to type this.dropzoneRef
           onClick={(e) => { e.preventDefault(); this.dropzoneRef.open(); } }
         />}

components/form/file-upload/FileUpload.es6.js

@@ -35,7 +35,7 @@ class FilterOption extends React.Component<Props, State> {
     filters: []
   }
 
-  componentWillReceiveProps ({ isOpened }: Props) {
+  UNSAFE_componentWillReceiveProps ({ isOpened }: Props) {
     if (isOpened !== this.state.isOpened) {
       this.setState({ isOpened })
     }

components/form/filter-option/FilterOption.es6.js

@@ -1,13 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-function Radio ({disabled, label, name, value, checked, onChange}) {
+function Radio ({ className, disabled, label, name, value, checked, onChange, tabIndex }) {
   return (
-    <div className="ds-form-group">
+    <div className={classnames('ds-form-group', className)}>
       <label className="ds-form-control-radio">
         <input type="checkbox"
           value={value}
           name={name}
+          tabIndex={tabIndex}
           disabled={disabled}
           checked={checked}
           onChange={() => {
@@ -21,20 +23,24 @@ function Radio ({disabled, label, name, value, checked, onChange}) {
 }
 
 Radio.defaultProps = {
+  className: '',
   label: '',
   value: '',
   name: '',
+  tabIndex: 0,
   checked: false,
   disabled: false,
   onChange: () => {}
 }
 
 Radio.propTypes = {
+  className: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.element
   ]),
   name: PropTypes.string,
+  tabIndex: PropTypes.number,
   value: PropTypes.string,
   checked: PropTypes.bool,
   disabled: PropTypes.bool,

components/form/radio/Radio.es6.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { isEmpty } from 'lodash'
 
-import { Help, Search, Close } from '../../Icons.es6.js'
+import { Help, Search, Close, RemoveCircle } from '../../Icons.es6.js'
 import Option from '../option/Option.es6.js'
 
 class Select extends React.Component {
@@ -19,24 +19,31 @@ class Select extends React.Component {
     this.state = {
       isOpened: false,
       query: '',
-      filteredOptions: props.search ? props.filter(this.options, '') : this.options
+      filteredOptions: props.search ? props.filter(this.options, '') : this.options,
+      initialPlaceholder: '',
+      hasInitialPlaceholderChanged: false
     }
   }
 
   componentDidMount () {
+    this.setState({ initialPlaceholder: this.props.placeholder })
     document.addEventListener('click', this.handleDocumentClick, false)
     document.addEventListener('touchend', this.handleDocumentClick, false)
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     const {children, search, filter} = nextProps
     this.options = this.updateOptions(children)
     this.setState({
       filteredOptions: search ? filter(this.options, this.state.query) : this.options
     })
   }
 
-  componentDidUpdate () {
+  componentDidUpdate (prevProps) {
+    const { placeholder, search } = this.props
+    if ((prevProps.placeholder !== placeholder) && (placeholder !== this.state.initialPlaceholder)) {
+      this.setState({ hasInitialPlaceholderChanged: true })
+    }
     if (this.props.search && this.state.isOpened && this.searchInput) {
       this.searchInput.focus()
     }
@@ -117,8 +124,43 @@ class Select extends React.Component {
     })
   }
 
+  renderCloseIcon = (query) => {
+    return (
+      <div
+        className={classnames('ds-form-control-select__search-clear', {
+          'is-hidden': !query
+        })}
+        onClick={this.handleClearSearch}
+      >
+        <Close color="#ddd" />
+      </div>
+    )
+  }
+
+  resetHandler = () => {
+    this.handleClearSearch()
+    this.props.onResetClick()
+    this.setState({ hasInitialPlaceholderChanged: false })
+  }
+
+  renderResetIcon = () => {
+    return (
+      <div
+        className={classnames('ds-form-control-select__reset', {
+          'is-hidden': !this.state.hasInitialPlaceholderChanged
+        })}
+        onClick={this.resetHandler}
+      >
+        <RemoveCircle color="#ddd" />
+      </div>
+    )
+  }
+
   render () {
-    const {error, disabled, className, label, preview, inlineSearch, placeholder, search, help} = this.props
+    const {
+      error, disabled, className, label, preview, showResetIcon,
+      inlineSearch, placeholder, search, help
+    } = this.props
     const {query, filteredOptions, isOpened} = this.state
     return (
       <div className={classnames({
@@ -146,6 +188,7 @@ class Select extends React.Component {
             {inlineSearch && <Search color="#ddd" />}
             {inlineSearch && query ? query : placeholder}
             {preview && <img src={preview} alt={placeholder} />}
+            {showResetIcon && this.renderResetIcon()}
           </div>
 
           {/* Options */}
@@ -159,16 +202,8 @@ class Select extends React.Component {
                 ref={(node) => { this.searchInput = node }}
                 onChange={(e) => this.onSearch(e.target.value)}
               />
-              {inlineSearch && <div
-                className={classnames('ds-form-control-select__search-clear', {
-                  'is-hidden': !query
-                })}
-                onClick={this.handleClearSearch}
-              >
-                <Close color="#ddd" />
-              </div>}
+              {inlineSearch && this.renderCloseIcon(query)}
             </div>}
-
             <div className="ds-form-control-select__dropdown-options">
               {filteredOptions}
             </div>
@@ -201,6 +236,7 @@ Select.defaultProps = {
   children: [],
   keepOpen: () => {},
   inlineSearch: false,
+  showResetIcon: false,
   onSearchQueryClear: () => {},
   fillSelectedQuery: false
 }
@@ -226,8 +262,10 @@ Select.propTypes = {
   search: PropTypes.bool,
   preview: PropTypes.string,
   keepOpen: PropTypes.func,
+  showResetIcon: PropTypes.bool,
   inlineSearch: PropTypes.bool,
   onSearchQueryClear: PropTypes.func,
+  onResetClick: PropTypes.func,
   fillSelectedQuery: PropTypes.bool
 }
 

components/form/select/Select.es6.js

@@ -12,7 +12,7 @@ class Switch extends React.Component {
     }
   }
 
-  componentWillReceiveProps (nextProps) {
+  UNSAFE_componentWillReceiveProps (nextProps) {
     this.setState({
       selected: nextProps.selected,
       buttons: this.updateButtons(nextProps.children, nextProps.selected)

components/form/switch/Switch.es6.js

@@ -11,6 +11,7 @@ type Props = {|
   key?: Key,
   label: string,
   onOptionClick: (event: SyntheticEvent<HTMLDivElement>, value: string) => *,
+  onFocus: (event: SyntheticEvent<HTMLDivElement>, value: string) => *,
   selected: boolean,
   thumbnail: string,
   thumbnailCover: boolean,
@@ -22,7 +23,8 @@ type Props = {|
   text?: string,
   value: string,
   children?: Node,
-  className?: string | Object
+  className?: string | Object,
+  tabIndex?: number
 |}
 
 type ImageThumbnailType = {|
@@ -44,9 +46,9 @@ function ImageThumbnail ({ thumbnail, thumbnailCover, label }: ImageThumbnailTyp
   )
 }
 
-function ThumbnailOption ({ label, onOptionClick, selected, thumbnail,
+function ThumbnailOption ({ label, onOptionClick, onFocus, selected, thumbnail,
   thumbnailCover, value, isVideo, videoType, videoUrl, rounded,
-  shadowed, text, className, children }: Props) {
+  shadowed, text, tabIndex, className, children }: Props) {
   return (
     <div className={classnames({
       'ds-thumbnail-option': true,
@@ -55,6 +57,8 @@ function ThumbnailOption ({ label, onOptionClick, selected, thumbnail,
       'ds-thumbnail-option--shadowed': shadowed
     }, className)}
     onClick={(event) => onOptionClick(event, value)}
+    onFocus={(event) => onFocus(event, value)}
+    tabIndex={tabIndex}
     >
       <div className="ds-thumbnail-option__thumbnail-container">
         {isVideo ? (
@@ -101,14 +105,16 @@ function ThumbnailOption ({ label, onOptionClick, selected, thumbnail,
 ThumbnailOption.defaultProps = {
   label: '',
   onOptionClick: () => {},
+  onFocus: () => {},
   selected: false,
   thumbnail: '',
   thumbnailCover: false,
   isVideo: false,
   rounded: false,
   shadowed: false,
   text: '',
-  value: ''
+  value: '',
+  tabIndex: 0
 }
 
 export default ThumbnailOption

components/form/thumbnail-option/ThumbnailOption.es6.js

@@ -139,7 +139,7 @@ function Breadcrumbs ({ entries, onClick, maxEntryWidth = 90 }: Props) {
           <div className="ds-tabbed-nav__breadcrumbs-container ds-tabbed-nav__breadcrumbs-container--not-calculated">
             {entries.map((entry: Entry, index: number) => (
               <BreadcrumbEntry
-                key={entry.label}
+                key={`${entry.label}-${index}`}
                 showSeparator={index !== 0}
                 label={entry.label}
                 ref={entriesRefs[index]}
@@ -178,11 +178,11 @@ function Breadcrumbs ({ entries, onClick, maxEntryWidth = 90 }: Props) {
                     'ds-tabbed-nav__breadcrumbs-entry-menu': true,
                     'ds-tabbed-nav__breadcrumbs-entry-menu--opened': isMenuOpened
                   })}>
-                    {hiddenEntries.map((entry: IndexedEntry) => (
+                    {hiddenEntries.map((entry: IndexedEntry, index: number) => (
                       <div
                         className="ds-tabbed-nav__breadcrumbs-entry-menu-item"
                         onClick={onClickEntryWithIndex(entry.index)}
-                        key={entry.entry.label}
+                        key={`${entry.entry.label}-${index}`}
                       >
                         {entry.entry.label}
                       </div>
@@ -205,7 +205,7 @@ function Breadcrumbs ({ entries, onClick, maxEntryWidth = 90 }: Props) {
                 width={maxEntryWidth}
                 showTooltip={(maxEntryWidth < entry.width)}
                 showSeparator={index !== 0}
-                key={entry.entry.label}
+                key={`${entry.entry.label}-${index}`}
                 label={entry.entry.label}
                 onClick={onClickEntryWithIndex(entry.index)}
               />