diff --git a/lib/date_picker/CalendarDay.js b/lib/date_picker/CalendarDay.js index af1b4a94..0fcccb18 100644 --- a/lib/date_picker/CalendarDay.js +++ b/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 + '%' }; } } diff --git a/lib/date_picker/DatePicker.js b/lib/date_picker/DatePicker.js index a14df37a..2d12d8a8 100644 --- a/lib/date_picker/DatePicker.js +++ b/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, diff --git a/lib/date_picker/index.d.ts b/lib/date_picker/index.d.ts index aa9fc3f8..6a8ffe91 100644 --- a/lib/date_picker/index.d.ts +++ b/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. */ diff --git a/lib/dropdown/Dropdown.js b/lib/dropdown/Dropdown.js index e4edc28b..431cf7df 100644 --- a/lib/dropdown/Dropdown.js +++ b/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, diff --git a/lib/input/Input.js b/lib/input/Input.js index 7383da6e..917097e5 100644 --- a/lib/input/Input.js +++ b/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 style = getComputedStyle(element, null); - var heightOffset = style.boxSizing === 'content-box' ? -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)) : parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); + var rows = _this.props.rows; - // resize the input to its content size - element.style.height = 'auto'; - element.style.height = element.scrollHeight + heightOffset + 'px'; + if (typeof rows === 'number' && !isNaN(rows)) { + element.style.height = null; + } 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, diff --git a/lib/input/theme.scss b/lib/input/theme.scss index b6b6c813..9e29b9b4 100644 --- a/lib/input/theme.scss +++ b/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; diff --git a/lib/progress_bar/ProgressBar.js b/lib/progress_bar/ProgressBar.js index f8a16e85..0063b753 100644 --- a/lib/progress_bar/ProgressBar.js +++ b/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']), diff --git a/lib/progress_bar/_config.scss b/lib/progress_bar/_config.scss index f554b346..143a8096 100644 --- a/lib/progress_bar/_config.scss +++ b/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; diff --git a/lib/progress_bar/index.d.ts b/lib/progress_bar/index.d.ts index 7d0096e9..8b0b961e 100644 --- a/lib/progress_bar/index.d.ts +++ b/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 diff --git a/lib/progress_bar/theme.scss b/lib/progress_bar/theme.scss index bcbc64d9..6f5cc2c1 100644 --- a/lib/progress_bar/theme.scss +++ b/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; diff --git a/lib/slider/Slider.js b/lib/slider/Slider.js index 0ec33d19..3943b6c4 100644 --- a/lib/slider/Slider.js +++ b/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, diff --git a/lib/slider/_config.scss b/lib/slider/_config.scss index a5b0799b..6563e301 100644 --- a/lib/slider/_config.scss +++ b/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; diff --git a/lib/slider/index.d.ts b/lib/slider/index.d.ts index 41014b23..3a58538a 100644 --- a/lib/slider/index.d.ts +++ b/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 diff --git a/lib/slider/theme.scss b/lib/slider/theme.scss index bf346815..310e8009 100644 --- a/lib/slider/theme.scss +++ b/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; diff --git a/lib/time_picker/TimePicker.js b/lib/time_picker/TimePicker.js index 20cab415..27fc5901 100644 --- a/lib/time_picker/TimePicker.js +++ b/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,