Latest build

lib/date_picker/CalendarDay.js

@@ -54,8 +54,9 @@ var Day = function (_Component) {
     value: function dayStyle() {
       if (this.props.day === 1) {
         var e = this.props.sundayFirstDayOfWeek ? 0 : 1;
+        var firstDay = _time2.default.getFirstWeekDay(this.props.viewDate) - e;
         return {
-          marginLeft: (_time2.default.getFirstWeekDay(this.props.viewDate) - e) * 100 / 7 + '%'
+          marginLeft: (firstDay >= 0 ? firstDay : 6) * 100 / 7 + '%'
         };
       }
     }

lib/date_picker/DatePicker.js

@@ -80,6 +80,9 @@ var factory = function factory(Input, DatePickerDialog) {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
+        if (_this.props.onDismiss) {
+          _this.props.onDismiss();
+        }
       }, _this.handleInputFocus = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
@@ -114,6 +117,7 @@ var factory = function factory(Input, DatePickerDialog) {
       value: function render() {
         var _props = this.props;
         var active = _props.active;
+        var onDismiss = _props.onDismiss;
         var autoOk = _props.autoOk;
         var cancelLabel = _props.cancelLabel;
         var inputClassName = _props.inputClassName;
@@ -128,7 +132,7 @@ var factory = function factory(Input, DatePickerDialog) {
         var sundayFirstDayOfWeek = _props.sundayFirstDayOfWeek;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['active', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
+        var others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'autoOk', 'cancelLabel', 'inputClassName', 'inputFormat', 'locale', 'maxDate', 'minDate', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'sundayFirstDayOfWeek', 'value']);
 
         var finalInputFormat = inputFormat || _time2.default.formatDate;
         var date = Object.prototype.toString.call(value) === '[object Date]' ? value : undefined;
@@ -160,8 +164,8 @@ var factory = function factory(Input, DatePickerDialog) {
             maxDate: maxDate,
             minDate: minDate,
             name: this.props.name,
-            okLabel: okLabel,
             onDismiss: this.handleDismiss,
+            okLabel: okLabel,
             onEscKeyDown: onEscKeyDown || this.handleDismiss,
             onOverlayClick: onOverlayClick || this.handleDismiss,
             onSelect: this.handleSelect,
@@ -193,6 +197,7 @@ var factory = function factory(Input, DatePickerDialog) {
     okLabel: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
+    onDismiss: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,

lib/date_picker/index.d.ts

@@ -134,6 +134,10 @@ interface DatePickerProps extends ReactToolbox.Props {
    * Callback to be invoked when the dialog overlay is clicked.
    */
   onOverlayClick?: Function;
+  /**
+   * The input element will be readonly and look like disabled.
+   */
+  readonly?: boolean;
   /**
    * Classnames object defining the component style.
    */

lib/dropdown/Dropdown.js

@@ -250,7 +250,7 @@ var factory = function factory(Input) {
       errored: _react.PropTypes.string,
       field: _react.PropTypes.string,
       label: _react.PropTypes.string,
-      required: _react.PropTypes.bool,
+      required: _react.PropTypes.string,
       selected: _react.PropTypes.string,
       templateValue: _react.PropTypes.string,
       up: _react.PropTypes.string,

lib/input/Input.js

@@ -72,13 +72,19 @@ var factory = function factory(FontIcon) {
         if (onChange) onChange(value, event);
       }, _this.handleAutoresize = function () {
         var element = _this.refs.input;
-        // compute the height difference between inner height and outer height
+        var rows = _this.props.rows;
-        var style = getComputedStyle(element, null);
-        var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
 
-        // resize the input to its content size
+        if (typeof rows === 'number' && !isNaN(rows)) {
-        element.style.height = 'auto';
+          element.style.height = null;
-        element.style.height = element.scrollHeight + heightOffset + 'px';
+        } else {
+          // compute the height difference between inner height and outer height
+          var style = getComputedStyle(element, null);
+          var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+
+          // resize the input to its content size
+          element.style.height = 'auto';
+          element.style.height = element.scrollHeight + heightOffset + 'px';
+        }
       }, _this.handleKeyPress = function (event) {
         // prevent insertion of more characters if we're a multiline input
         // and maxLength exists
@@ -164,8 +170,10 @@ var factory = function factory(FontIcon) {
         var type = _props.type;
         var value = _props.value;
         var onKeyPress = _props.onKeyPress;
+        var _props$rows = _props.rows;
+        var rows = _props$rows === undefined ? 1 : _props$rows;
 
-        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress']);
+        var others = _objectWithoutProperties(_props, ['children', 'disabled', 'error', 'floating', 'hint', 'icon', 'name', 'label', 'maxLength', 'multiline', 'required', 'theme', 'type', 'value', 'onKeyPress', 'rows']);
 
         var length = maxLength && value ? value.length : 0;
         var labelClassName = (0, _classnames5.default)(theme.label, _defineProperty({}, theme.fixed, !floating));
@@ -189,7 +197,7 @@ var factory = function factory(FontIcon) {
           inputElementProps.maxLength = maxLength;
           inputElementProps.onKeyPress = onKeyPress;
         } else {
-          inputElementProps.rows = 1;
+          inputElementProps.rows = rows;
           inputElementProps.onKeyPress = this.handleKeyPress;
         }
 
@@ -211,7 +219,7 @@ var factory = function factory(FontIcon) {
           ) : null,
           hint ? _react2.default.createElement(
             'span',
-            { className: theme.hint },
+            { hidden: labelText, className: theme.hint },
             hint
           ) : null,
           error ? _react2.default.createElement(
@@ -251,6 +259,7 @@ var factory = function factory(FontIcon) {
     onFocus: _react2.default.PropTypes.func,
     onKeyPress: _react2.default.PropTypes.func,
     required: _react2.default.PropTypes.bool,
+    rows: _react2.default.PropTypes.number,
     theme: _react2.default.PropTypes.shape({
       bar: _react2.default.PropTypes.string,
       counter: _react2.default.PropTypes.string,

lib/input/theme.scss

@@ -46,6 +46,7 @@
       color: $input-text-required-color;
     }
     ~ .hint {
+      display: block;
       opacity: $input-hint-opacity;
     }
     ~ .icon {
@@ -57,6 +58,9 @@
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
     }
+    &.filled ~ .hint {
+      opacity: 0;
+    }
   }
   &.filled ~ .label.fixed, &.filled ~ .hint {
     display: none;
@@ -87,7 +91,7 @@
   line-height: $input-field-font-size;
   color: $input-text-label-color;
   pointer-events: none;
-  opacity: 0;
+  opacity: $input-hint-opacity;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: opacity;

lib/progress_bar/ProgressBar.js

@@ -99,6 +99,7 @@ var ProgressBar = function (_Component) {
 
       var _props = this.props;
       var className = _props.className;
+      var disabled = _props.disabled;
       var max = _props.max;
       var min = _props.min;
       var mode = _props.mode;
@@ -112,6 +113,7 @@ var ProgressBar = function (_Component) {
       return _react2.default.createElement(
         'div',
         {
+          disabled: disabled,
           'data-react-toolbox': 'progress-bar',
           'aria-valuenow': value,
           'aria-valuemin': min,
@@ -129,6 +131,7 @@ var ProgressBar = function (_Component) {
 ProgressBar.propTypes = {
   buffer: _react.PropTypes.number,
   className: _react.PropTypes.string,
+  disabled: _react.PropTypes.bool,
   max: _react.PropTypes.number,
   min: _react.PropTypes.number,
   mode: _react.PropTypes.oneOf(['determinate', 'indeterminate']),

lib/progress_bar/_config.scss

@@ -1,6 +1,7 @@
 $progress-height: .4 * $unit !default;
 $progress-main-color: $color-primary !default;
 $progress-secondary-color: rgba($color-primary-contrast, 0.7) !default;
+$progress-disabled-color: rgba($color-black, 0.26) !default;
 $circle-wrapper-width: 60 !default;
 $circle-radius: 25 !default;
 $scale-ratio: $circle-radius / 20 !default;

lib/progress_bar/index.d.ts

@@ -42,6 +42,11 @@ interface ProgressBarProps extends ReactToolbox.Props {
    * @default 0
    */
   buffer?: number;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Maximum value permitted.
    * @default 100

lib/progress_bar/theme.scss

@@ -32,11 +32,20 @@
   background-color: $progress-main-color;
 }
 
+[disabled] .value {
+  background-color: $progress-disabled-color;
+}
+
 .buffer {
   background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
   linear-gradient(to right, $progress-main-color, $progress-main-color);
 }
 
+[disabled] .buffer {
+  background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
+  linear-gradient(to right, $progress-disabled-color, $progress-disabled-color);
+}
+
 .circular {
   position: relative;
   display: inline-block;

lib/slider/Slider.js

@@ -265,6 +265,7 @@ var factory = function factory(ProgressBar, Input) {
           return _react2.default.createElement(Input, {
             ref: 'input',
             className: this.props.theme.input,
+            disabled: this.props.disabled,
             onFocus: this.handleInputFocus,
             onChange: this.handleInputChange,
             onBlur: this.handleInputBlur,
@@ -280,12 +281,13 @@ var factory = function factory(ProgressBar, Input) {
         var theme = this.props.theme;
 
         var knobStyles = { left: this.knobOffset() + '%' };
-        var className = (0, _classnames3.default)(theme.slider, (_classnames = {}, _defineProperty(_classnames, theme.editable, this.props.editable), _defineProperty(_classnames, theme.pinned, this.props.pinned), _defineProperty(_classnames, theme.pressed, this.state.pressed), _defineProperty(_classnames, theme.ring, this.props.value === this.props.min), _classnames), this.props.className);
+        var className = (0, _classnames3.default)(theme.slider, (_classnames = {}, _defineProperty(_classnames, theme.editable, this.props.editable), _defineProperty(_classnames, theme.disabled, this.props.disabled), _defineProperty(_classnames, theme.pinned, this.props.pinned), _defineProperty(_classnames, theme.pressed, this.state.pressed), _defineProperty(_classnames, theme.ring, this.props.value === this.props.min), _classnames), this.props.className);
 
         return _react2.default.createElement(
           'div',
           {
             className: className,
+            disabled: this.props.disabled,
             'data-react-toolbox': 'slider',
             onBlur: this.handleSliderBlur,
             onFocus: this.handleSliderFocus,
@@ -314,6 +316,7 @@ var factory = function factory(ProgressBar, Input) {
               'div',
               { className: theme.progress },
               _react2.default.createElement(ProgressBar, {
+                disabled: this.props.disabled,
                 ref: 'progressbar',
                 className: theme.innerprogress,
                 max: this.props.max,
@@ -334,6 +337,7 @@ var factory = function factory(ProgressBar, Input) {
 
   Slider.propTypes = {
     className: _react.PropTypes.string,
+    disabled: _react.PropTypes.bool,
     editable: _react.PropTypes.bool,
     max: _react.PropTypes.number,
     min: _react.PropTypes.number,

lib/slider/_config.scss

@@ -1,5 +1,6 @@
 $slider-main-color: $color-primary !default;
 $slider-main-color-contrast: $color-primary-contrast !default;
+$slider-disabled-color: rgba(177, 177, 177, 1) !default;
 $slider-snap-color: $color-black !default;
 $slider-knob-size: 3.2 * $unit !default;
 $slider-inner-knob-size: 1.2 * $unit !default;

lib/slider/index.d.ts

@@ -62,6 +62,11 @@ interface SliderProps extends ReactToolbox.Props {
    * @default false
    */
   editable?: boolean;
+  /**
+   * If true, component will be disabled.
+   * @default false
+   */
+  disabled?: boolean;
   /**
    * Maximum value permitted.
    * @default 100

lib/slider/theme.scss

@@ -111,6 +111,13 @@
     border-radius: 50%;
     opacity: .26;
   }
+  &[disabled] {
+    pointer-events: none;
+    cursor: auto;
+    .innerknob {
+      background-color: $slider-disabled-color;
+    }
+  }
   &.editable {
     display: flex;
     flex-direction: row;

lib/time_picker/TimePicker.js

@@ -72,6 +72,9 @@ var factory = function factory(TimePickerDialog, Input) {
         active: _this.props.active
       }, _this.handleDismiss = function () {
         _this.setState({ active: false });
+        if (_this.props.onDismiss) {
+          _this.props.onDismiss();
+        }
       }, _this.handleInputFocus = function (event) {
         _events2.default.pauseEvent(event);
         _this.setState({ active: true });
@@ -106,6 +109,7 @@ var factory = function factory(TimePickerDialog, Input) {
       value: function render() {
         var _props = this.props;
         var active = _props.active;
+        var onDismiss = _props.onDismiss;
         var cancelLabel = _props.cancelLabel;
         var format = _props.format;
         var inputClassName = _props.inputClassName;
@@ -115,7 +119,7 @@ var factory = function factory(TimePickerDialog, Input) {
         var readonly = _props.readonly;
         var value = _props.value;
 
-        var others = _objectWithoutProperties(_props, ['active', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
+        var others = _objectWithoutProperties(_props, ['active', 'onDismiss', 'cancelLabel', 'format', 'inputClassName', 'okLabel', 'onEscKeyDown', 'onOverlayClick', 'readonly', 'value']);
 
         var formattedTime = value ? _time2.default.formatTime(value, format) : '';
         return _react2.default.createElement(
@@ -166,6 +170,7 @@ var factory = function factory(TimePickerDialog, Input) {
     okLabel: _react.PropTypes.string,
     onChange: _react.PropTypes.func,
     onClick: _react.PropTypes.func,
+    onDismiss: _react.PropTypes.func,
     onEscKeyDown: _react.PropTypes.func,
     onKeyPress: _react.PropTypes.func,
     onOverlayClick: _react.PropTypes.func,