vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Latest build

old
Javi Velasco 2016-10-22 17:35:55 +02:00
parent 939e713034
commit 2e36de4f67
15 changed files with 79 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
lib/date_picker/CalendarDay.js
View File

@ -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 + '%'
};
}
}

9
lib/date_picker/DatePicker.js
View File

@ -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,

4
lib/date_picker/index.d.ts vendored
View File

@ -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.
*/

2
lib/dropdown/Dropdown.js
View File

@ -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,

27
lib/input/Input.js
View File

@ -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,

6
lib/input/theme.scss
View File

@ -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;

3
lib/progress_bar/ProgressBar.js
View File

@ -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']),

1
lib/progress_bar/_config.scss
View File

@ -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;

5
lib/progress_bar/index.d.ts vendored
View File

@ -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

9
lib/progress_bar/theme.scss
View File

@ -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;

6
lib/slider/Slider.js
View File

@ -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,

1
lib/slider/_config.scss
View File

@ -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;

5
lib/slider/index.d.ts vendored
View File

@ -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

7
lib/slider/theme.scss
View File

@ -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;

7
lib/time_picker/TimePicker.js
View File

@ -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,