Styling hooks (#806)

* fix focusItem

* feat: add showPlaceholderWithValues

closes #796

* fix: datetimepicker inputProps.readOnly takes precendence over readOnly

closes #785 closes#721

* bump react

.prettierignore

@@ -0,0 +1,2 @@
+**/src/**/*.less
+**/node_modules/

packages/localizer-date-fns/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc.js"
+}

packages/localizer-globalize/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc.js"
+}

packages/localizer-moment/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc.js"
+}

packages/localizer-simple-number/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc.js"
+}

packages/material-ui/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc.js"
+}

packages/material-ui/package.json

@@ -22,8 +22,8 @@
     "@babel/cli": "^7.0.0-beta.42",
     "@babel/core": "^7.0.0-beta.42",
     "cpy-cli": "^2.0.0",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
     "react-widgets": "^4.2.5"
   },
   "author": "Jason Quense",

packages/react-widgets/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.babelrc.js"
+}

packages/react-widgets/package.json

@@ -87,8 +87,8 @@
     "less-plugin-autoprefix": "^1.5.1",
     "lodash": "^4.17.5",
     "node-sass": "^4.8.3",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
     "rimraf": "^2.6.2",
     "sinon": "^5.0.10",
     "webpack": "^3.0.0",

packages/react-widgets/src/Combobox.js

@@ -62,6 +62,9 @@ let propTypes = {
 
   placeholder: PropTypes.string,
 
+  /** Adds a css class to the input container element. */
+  containerClassName: PropTypes.string,
+
   inputProps: PropTypes.object,
   listProps: PropTypes.object,
 
@@ -134,6 +137,8 @@ class Combobox extends React.Component {
     let { value, data, messages, filter, minLength, caseSensitive } = nextProps
 
     let accessors = getAccessors(nextProps)
+    const valueChanged = value !== prevState.lastValue
+
     let index = accessors.indexOf(data, value)
     let dataItem = index === -1 ? value : data[index]
 
@@ -171,11 +176,14 @@ class Combobox extends React.Component {
       data,
       list,
       accessors,
+      lastValue: value,
       messages: getMessages(messages),
-      selectedItem: list.nextEnabled(data[index]),
-      focusedItem: list.nextEnabled(
-        ~focusedIndex ? data[focusedIndex] : data[0]
-      ),
+      selectedItem: valueChanged
+        ? list.nextEnabled(data[index])
+        : prevState.selectedItem,
+      focusedItem: valueChanged
+        ? list.nextEnabled(~focusedIndex ? data[focusedIndex] : data[0])
+        : prevState.focusedItem,
     }
   }
 
@@ -363,7 +371,15 @@ class Combobox extends React.Component {
   }
 
   render() {
-    let { isRtl, className, popupTransition, busy, dropUp, open } = this.props
+    let {
+      isRtl,
+      className,
+      popupTransition,
+      busy,
+      dropUp,
+      open,
+      containerClassName,
+    } = this.props
 
     let { focused, messages } = this.state
 
@@ -387,7 +403,7 @@ class Combobox extends React.Component {
         onKeyDown={this.handleKeyDown}
         className={cn(className, 'rw-combobox')}
       >
-        <WidgetPicker>
+        <WidgetPicker className={containerClassName}>
           {this.renderInput()}
           <Select
             bordered

packages/react-widgets/src/DateTimePicker.js

@@ -162,6 +162,8 @@ let propTypes = {
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
 
+  /** Adds a css class to the input container element. */
+  containerClassName: PropTypes.string,
   inputProps: PropTypes.object,
   isRtl: PropTypes.bool,
   messages: PropTypes.shape({
@@ -342,6 +344,7 @@ class DateTimePicker extends React.Component {
     } = this.props
 
     let { focused } = this.state
+    let inputReadOnly = inputProps ? inputProps.readOnly : null
 
     let activeId = null
     if (open === 'time') {
@@ -357,12 +360,12 @@ class DateTimePicker extends React.Component {
         ref={this.attachInputRef}
         role="combobox"
         name={name}
+        value={value}
         tabIndex={tabIndex}
         autoFocus={autoFocus}
         placeholder={placeholder}
         disabled={disabled}
-        readOnly={readOnly}
-        value={value}
+        readOnly={inputReadOnly != null ? inputReadOnly : readOnly}
         format={getFormat(this.props)}
         editFormat={editFormat}
         editing={focused}
@@ -506,7 +509,16 @@ class DateTimePicker extends React.Component {
   }
 
   render() {
-    let { className, date, time, open, disabled, readOnly, dropUp } = this.props
+    let {
+      className,
+      date,
+      time,
+      open,
+      disabled,
+      readOnly,
+      dropUp,
+      containerClassName,
+    } = this.props
 
     let { focused } = this.state
 
@@ -535,7 +547,7 @@ class DateTimePicker extends React.Component {
         onFocus={this.focusManager.handleFocus}
         className={cn(className, 'rw-datetime-picker')}
       >
-        <WidgetPicker>
+        <WidgetPicker className={containerClassName}>
           {this.renderInput(owns.trim())}
 
           {this.renderButtons()}

packages/react-widgets/src/DropdownList.js

@@ -110,6 +110,9 @@ class DropdownList extends React.Component {
     disabled: CustomPropTypes.disabled.acceptsArray,
     readOnly: CustomPropTypes.disabled,
 
+    /** Adds a css class to the input container element. */
+    containerClassName: PropTypes.string,
+
     inputProps: PropTypes.object,
     listProps: PropTypes.object,
 
@@ -163,7 +166,8 @@ class DropdownList extends React.Component {
     } = nextProps
 
     const accessors = getAccessors(nextProps)
-    let initialIdx = accessors.indexOf(data, value)
+    const valueChanged = value !== prevState.lastValue
+    let initialIdx = valueChanged && accessors.indexOf(data, value)
 
     if (open)
       data = Filter.filter(data, {
@@ -180,9 +184,14 @@ class DropdownList extends React.Component {
       data,
       list,
       accessors,
+      lastValue: value,
       messages: getMessages(messages),
-      selectedItem: list.nextEnabled(data[initialIdx]),
-      focusedItem: list.nextEnabled(data[initialIdx] || data[0]),
+      selectedItem: valueChanged
+        ? list.nextEnabled(data[initialIdx])
+        : prevState.selectedItem,
+      focusedItem: valueChanged
+        ? list.nextEnabled(data[initialIdx] || data[0])
+        : prevState.focusedItem,
     }
   }
 
@@ -413,6 +422,7 @@ class DropdownList extends React.Component {
       isRtl,
       filter,
       inputProps,
+      containerClassName,
       valueComponent,
     } = this.props
 
@@ -456,7 +466,10 @@ class DropdownList extends React.Component {
         className={cn(className, 'rw-dropdown-list')}
         ref={this.attachInputRef}
       >
-        <WidgetPicker onClick={this.handleClick} className="rw-widget-input">
+        <WidgetPicker
+          onClick={this.handleClick}
+          className={cn(containerClassName, 'rw-widget-input')}
+        >
           <DropdownListInput
             {...inputProps}
             value={valueItem}

packages/react-widgets/src/Multiselect.js

@@ -101,11 +101,17 @@ let propTypes = {
   dropUp: PropTypes.bool,
   popupTransition: CustomPropTypes.elementType,
 
+  /** Adds a css class to the input container element. */
+  containerClassName: PropTypes.string,
   inputProps: PropTypes.object,
   listProps: PropTypes.object,
 
   autoFocus: PropTypes.bool,
   placeholder: PropTypes.string,
+
+  /** Continue to show the input placeholder even if tags are selected */
+  showPlaceholderWithValues: PropTypes.bool,
+
   disabled: CustomPropTypes.disabled.acceptsArray,
   readOnly: CustomPropTypes.disabled,
 
@@ -155,6 +161,7 @@ class Multiselect extends React.Component {
     value: [],
     searchTerm: '',
     listComponent: List,
+    showPlaceholderWithValues: false,
   }
 
   constructor(...args) {
@@ -190,9 +197,12 @@ class Multiselect extends React.Component {
     let { focusedItem, focusedTag } = prevState
 
     let accessors = getAccessors(nextProps)
+    let valueChanged = nextProps.value !== prevState.lastValue
 
     let values = makeArray(nextProps.value)
-    let dataItems = values.map(item => accessors.findOrSelf(data, item))
+    let dataItems = valueChanged
+      ? values.map(item => accessors.findOrSelf(data, item))
+      : prevState.dataItems
 
     data = data.filter(i => !values.some(v => accessors.matches(i, v)))
 
@@ -220,13 +230,14 @@ class Multiselect extends React.Component {
       tagList,
       accessors,
       lengthWithoutValues,
+      lastValue: nextProps.value,
       messages: getMessages(messages),
-      focusedTag: list.nextEnabled(
-        ~dataItems.indexOf(focusedTag) ? focusedTag : null
-      ),
-      focusedItem: list.nextEnabled(
-        ~data.indexOf(focusedItem) ? focusedItem : data[0]
-      ),
+      focusedTag: valueChanged
+        ? list.nextEnabled(~dataItems.indexOf(focusedTag) ? focusedTag : null)
+        : prevState.focusedTag,
+      focusedItem: valueChanged
+        ? list.nextEnabled(~data.indexOf(focusedItem) ? focusedItem : data[0])
+        : prevState.focusedItem,
     }
   }
 
@@ -520,6 +531,7 @@ class Multiselect extends React.Component {
       dropUp,
       open,
       searchTerm,
+      containerClassName,
       popupTransition,
     } = this.props
 
@@ -554,10 +566,10 @@ class Multiselect extends React.Component {
       >
         {this.renderNotificationArea(messages)}
         <WidgetPicker
-          className="rw-widget-input"
           onClick={this.handleClick}
-          onDoubleClick={this.handleDoubleClick}
           onTouchEnd={this.handleClick}
+          onDoubleClick={this.handleDoubleClick}
+          className={cn(containerClassName, 'rw-widget-input')}
         >
           <div>
             {shouldRenderTags && this.renderTags(messages)}
@@ -684,8 +696,12 @@ class Multiselect extends React.Component {
   }
 
   getPlaceholder() {
-    let { value, placeholder } = this.props
-    return (value && value.length ? '' : placeholder) || ''
+    let { value, placeholder, showPlaceholderWithValues } = this.props
+    return (
+      (value && value.length && !showPlaceholderWithValues
+        ? ''
+        : placeholder) || ''
+    )
   }
 }
 

packages/react-widgets/src/NumberPicker.js

@@ -121,6 +121,9 @@ class NumberPicker extends React.Component {
     disabled: CustomPropTypes.disabled,
     readOnly: CustomPropTypes.disabled,
 
+    /** Adds a css class to the input container element. */
+    containerClassName: PropTypes.string,
+
     inputProps: PropTypes.object,
     isRtl: PropTypes.bool,
     messages: PropTypes.shape({
@@ -266,7 +269,15 @@ class NumberPicker extends React.Component {
   }
 
   render() {
-    let { className, disabled, readOnly, value, min, max } = this.props
+    let {
+      className,
+      containerClassName,
+      disabled,
+      readOnly,
+      value,
+      min,
+      max,
+    } = this.props
 
     let { focused, messages } = this.state
     let elementProps = Props.pickElementProps(this)
@@ -284,7 +295,7 @@ class NumberPicker extends React.Component {
         onFocus={this.focusManager.handleFocus}
         className={cn(className, 'rw-number-picker')}
       >
-        <WidgetPicker>
+        <WidgetPicker className={containerClassName}>
           {this.renderInput(value)}
           <Select bordered>
             <Button

packages/react-widgets/src/TimeList.js

@@ -103,6 +103,9 @@ class TimeList extends React.Component {
     let { value, currentDate, step } = nextProps
     let data = getDates(nextProps)
     let currentValue = value || currentDate
+    let valueChanged =
+      !prevState.lastValue ||
+      !dates.eq(currentValue, prevState.lastValue, 'minutes')
 
     const list = reduceToListState(data, prevState.list, {
       nextProps,
@@ -119,8 +122,13 @@ class TimeList extends React.Component {
     return {
       data,
       list,
+      lastValue: currentValue,
       selectedItem: list.nextEnabled(selectedItem),
-      focusedItem: list.nextEnabled(selectedItem || closestDate || data[0]),
+      focusedItem: valueChanged
+        ? list.nextEnabled(selectedItem || closestDate || data[0])
+        : find(data, t =>
+            dates.eq(t.date, prevState.focusedItem.date, 'minutes')
+          ),
     }
   }