Skip to content
This repository was archived by the owner on May 15, 2022. It is now read-only.

Commit 604ab2a

Browse files
clausclaus
committed
bump version 0.0.7
1 parent 9778679 commit 604ab2a

File tree

6 files changed

+73
-23
lines changed

6 files changed

+73
-23
lines changed

‎build/react-dat-gui.js

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@ Object.defineProperty(exports, 'DatButton', {
4444
}
4545
});
4646

47+
var _classnames = require('classnames');
48+
49+
var _classnames2 = _interopRequireDefault(_classnames);
50+
4751
var _lodash = require('lodash');
4852

4953
var _react = (window.React);
@@ -88,6 +92,7 @@ var Dat = function (_React$Component) {
8892
var _props2 = this.props;
8993
var children = _props2.children;
9094
var data = _props2.data;
95+
var labelWidth = _props2.labelWidth;
9196

9297
return _react2.default.Children.toArray(children).map(function (child, i) {
9398
var liveUpdate = (0, _lodash.isUndefined)(child.props.liveUpdate) ? _this2.props.liveUpdate : child.props.liveUpdate;
@@ -96,16 +101,21 @@ var Dat = function (_React$Component) {
96101
key: i,
97102
data: data,
98103
liveUpdate: liveUpdate,
104+
_labelWidth: labelWidth,
99105
_onUpdateValue: _this2.handleUpdateValue
100106
});
101107
});
102108
}
103109
}, {
104110
key: 'render',
105111
value: function render() {
112+
var _props$style = this.props.style;
113+
var style = _props$style === undefined ? {} : _props$style;
114+
115+
var className = (0, _classnames2.default)('react-dat-gui', this.props.className);
106116
return _react2.default.createElement(
107117
'div',
108-
{ className: 'react-dat-gui' },
118+
{ className: className, style: style },
109119
_react2.default.createElement(
110120
'ul',
111121
{ className: 'dg main' },
@@ -122,14 +132,17 @@ Dat.propTypes = {
122132
data: _react.PropTypes.object.isRequired,
123133
children: _react.PropTypes.node.isRequired,
124134
onUpdate: _react.PropTypes.func.isRequired,
125-
liveUpdate: _react.PropTypes.bool
135+
liveUpdate: _react.PropTypes.bool,
136+
className: _react.PropTypes.string,
137+
style: _react.PropTypes.object,
138+
labelWidth: _react.PropTypes.number
126139
};
127140
Dat.defaultProps = {
128141
liveUpdate: true
129142
};
130143
exports.default = Dat;
131144

132-
},{"./components/DatBoolean":2,"./components/DatButton":3,"./components/DatNumber":4,"./components/DatString":5,"lodash":7}],2:[function(require,module,exports){
145+
},{"./components/DatBoolean":2,"./components/DatButton":3,"./components/DatNumber":4,"./components/DatString":5,"classnames":6,"lodash":7}],2:[function(require,module,exports){
133146
'use strict';
134147

135148
Object.defineProperty(exports, "__esModule", {
@@ -396,7 +409,7 @@ var DatNumber = function (_React$Component) {
396409
}, {
397410
key: 'shouldComponentUpdate',
398411
value: function shouldComponentUpdate(nextProps, nextState) {
399-
return nextProps.id !== this.props.id || nextProps.path !== this.props.path || nextProps.label !== this.props.label || nextProps.min !== this.props.value || nextProps.max !== this.props.value || nextProps.step !== this.props.value || nextState.value !== this.state.value;
412+
return nextProps.id !== this.props.id || nextProps.path !== this.props.path || nextProps.label !== this.props.label || nextProps._labelWidth !== this.props._labelWidth || nextProps.min !== this.props.value || nextProps.max !== this.props.value || nextProps.step !== this.props.value || nextState.value !== this.state.value;
400413
}
401414
}, {
402415
key: 'getValue',
@@ -533,12 +546,16 @@ var DatNumber = function (_React$Component) {
533546
var id = _props3.id;
534547
var min = _props3.min;
535548
var max = _props3.max;
549+
var _labelWidth = _props3._labelWidth;
536550
var _state = this.state;
537551
var value = _state.value;
538552
var isSliderActive = _state.isSliderActive;
539553

540554
var label = (0, _lodash.isString)(this.props.label) ? this.props.label : this.props.path;
541555
var hasSlider = (0, _lodash.isFinite)(min) && (0, _lodash.isFinite)(min);
556+
var labelStyle = _labelWidth ? { width: _labelWidth + '%' } : {};
557+
var sliderStyle = _labelWidth ? { width: 2 * (100 - _labelWidth) / 3 + '%' } : {};
558+
var inputStyle = _labelWidth ? { width: (hasSlider ? (100 - _labelWidth) / 3 : 100 - _labelWidth) + '%' } : {};
542559
var sliderPercent = (this.applyConstraints(value) - min) * 100 / (max - min);
543560
var sliderBarStyle = hasSlider ? { maxWidth: sliderPercent + '%' } : {};
544561
var sliderClassName = (0, _classnames2.default)('slider', { 'is-active': isSliderActive });
@@ -548,17 +565,18 @@ var DatNumber = function (_React$Component) {
548565
{ className: className },
549566
_react2.default.createElement(
550567
'label',
551-
{ htmlFor: id },
568+
{ htmlFor: id, style: labelStyle },
552569
label
553570
),
554571
_react2.default.createElement(
555572
'div',
556-
{ className: sliderClassName, ref: 'slider', onMouseDown: this.handleMouseDown },
573+
{ className: sliderClassName, style: sliderStyle, ref: 'slider', onMouseDown: this.handleMouseDown },
557574
_react2.default.createElement('div', { className: 'slider-bar', style: sliderBarStyle })
558575
),
559576
_react2.default.createElement('input', {
560577
type: 'text',
561578
inputMode: 'numeric',
579+
style: inputStyle,
562580
id: id,
563581
value: value,
564582
onChange: this.handleChange,
@@ -579,6 +597,7 @@ DatNumber.propTypes = {
579597
liveUpdate: _react.PropTypes.bool,
580598
onUpdate: _react.PropTypes.func,
581599
_onUpdateValue: _react.PropTypes.func,
600+
_labelWidth: _react.PropTypes.number,
582601
min: _react.PropTypes.number,
583602
max: _react.PropTypes.number,
584603
step: _react.PropTypes.number
@@ -639,7 +658,7 @@ var DatString = function (_React$Component) {
639658
}, {
640659
key: 'shouldComponentUpdate',
641660
value: function shouldComponentUpdate(nextProps, nextState) {
642-
return nextProps.id !== this.props.id || nextProps.path !== this.props.path || nextProps.label !== this.props.label || nextState.value !== this.state.value;
661+
return nextProps.id !== this.props.id || nextProps.path !== this.props.path || nextProps.label !== this.props.label || nextProps._labelWidth !== this.props._labelWidth || nextState.value !== this.state.value;
643662
}
644663
}, {
645664
key: 'getValue',
@@ -675,22 +694,27 @@ var DatString = function (_React$Component) {
675694
}, {
676695
key: 'render',
677696
value: function render() {
678-
var id = this.props.id;
697+
var _props = this.props;
698+
var id = _props.id;
699+
var _labelWidth = _props._labelWidth;
679700
var value = this.state.value;
680701

681702
var label = (0, _lodash.isString)(this.props.label) ? this.props.label : this.props.path;
703+
var labelStyle = _labelWidth ? { width: _labelWidth + '%' } : {};
704+
var inputStyle = _labelWidth ? { width: 100 - _labelWidth + '%' } : {};
682705
return _react2.default.createElement(
683706
'li',
684707
{ className: 'cr string' },
685708
_react2.default.createElement(
686709
'label',
687-
{ htmlFor: id },
710+
{ htmlFor: id, style: labelStyle },
688711
label
689712
),
690713
_react2.default.createElement('input', {
691714
type: 'text',
692715
id: id,
693716
value: value,
717+
style: inputStyle,
694718
onChange: this.handleChange,
695719
onBlur: this.handleBlur })
696720
);
@@ -707,7 +731,8 @@ DatString.propTypes = {
707731
label: _react.PropTypes.string,
708732
liveUpdate: _react.PropTypes.bool,
709733
onUpdate: _react.PropTypes.func,
710-
_onUpdateValue: _react.PropTypes.func
734+
_onUpdateValue: _react.PropTypes.func,
735+
_labelWidth: _react.PropTypes.number
711736
};
712737
exports.default = DatString;
713738
module.exports = exports['default'];

‎build/react-dat-gui.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/react-dat.gui.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example-es6/build/app.js

Lines changed: 32 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20463,6 +20463,10 @@
2046320463
}
2046420464
});
2046520465

20466+
var _classnames = __webpack_require__(173);
20467+
20468+
var _classnames2 = _interopRequireDefault(_classnames);
20469+
2046620470
var _lodash = __webpack_require__(170);
2046720471

2046820472
var _react = __webpack_require__(1);
@@ -20507,6 +20511,7 @@
2050720511
var _props2 = this.props;
2050820512
var children = _props2.children;
2050920513
var data = _props2.data;
20514+
var labelWidth = _props2.labelWidth;
2051020515

2051120516
return _react2.default.Children.toArray(children).map(function (child, i) {
2051220517
var liveUpdate = (0, _lodash.isUndefined)(child.props.liveUpdate) ? _this2.props.liveUpdate : child.props.liveUpdate;
@@ -20515,16 +20520,21 @@
2051520520
key: i,
2051620521
data: data,
2051720522
liveUpdate: liveUpdate,
20523+
_labelWidth: labelWidth,
2051820524
_onUpdateValue: _this2.handleUpdateValue
2051920525
});
2052020526
});
2052120527
}
2052220528
}, {
2052320529
key: 'render',
2052420530
value: function render() {
20531+
var _props$style = this.props.style;
20532+
var style = _props$style === undefined ? {} : _props$style;
20533+
20534+
var className = (0, _classnames2.default)('react-dat-gui', this.props.className);
2052520535
return _react2.default.createElement(
2052620536
'div',
20527-
{ className: 'react-dat-gui' },
20537+
{ className: className, style: style },
2052820538
_react2.default.createElement(
2052920539
'ul',
2053020540
{ className: 'dg main' },
@@ -20541,7 +20551,10 @@
2054120551
data: _react.PropTypes.object.isRequired,
2054220552
children: _react.PropTypes.node.isRequired,
2054320553
onUpdate: _react.PropTypes.func.isRequired,
20544-
liveUpdate: _react.PropTypes.bool
20554+
liveUpdate: _react.PropTypes.bool,
20555+
className: _react.PropTypes.string,
20556+
style: _react.PropTypes.object,
20557+
labelWidth: _react.PropTypes.number
2054520558
};
2054620559
Dat.defaultProps = {
2054720560
liveUpdate: true
@@ -20640,22 +20653,27 @@
2064020653
}, {
2064120654
key: 'render',
2064220655
value: function render() {
20643-
var id = this.props.id;
20656+
var _props = this.props;
20657+
var id = _props.id;
20658+
var _labelWidth = _props._labelWidth;
2064420659
var value = this.state.value;
2064520660

2064620661
var label = (0, _lodash.isString)(this.props.label) ? this.props.label : this.props.path;
20662+
var labelStyle = _labelWidth ? { width: _labelWidth + '%' } : {};
20663+
var inputStyle = _labelWidth ? { width: 100 - _labelWidth + '%' } : {};
2064720664
return _react2.default.createElement(
2064820665
'li',
2064920666
{ className: 'cr string' },
2065020667
_react2.default.createElement(
2065120668
'label',
20652-
{ htmlFor: id },
20669+
{ htmlFor: id, style: labelStyle },
2065320670
label
2065420671
),
2065520672
_react2.default.createElement('input', {
2065620673
type: 'text',
2065720674
id: id,
2065820675
value: value,
20676+
style: inputStyle,
2065920677
onChange: this.handleChange,
2066020678
onBlur: this.handleBlur })
2066120679
);
@@ -20672,7 +20690,8 @@
2067220690
label: _react.PropTypes.string,
2067320691
liveUpdate: _react.PropTypes.bool,
2067420692
onUpdate: _react.PropTypes.func,
20675-
_onUpdateValue: _react.PropTypes.func
20693+
_onUpdateValue: _react.PropTypes.func,
20694+
_labelWidth: _react.PropTypes.number
2067620695
};
2067720696
exports.default = DatString;
2067820697

@@ -37309,12 +37328,16 @@
3730937328
var id = _props3.id;
3731037329
var min = _props3.min;
3731137330
var max = _props3.max;
37331+
var _labelWidth = _props3._labelWidth;
3731237332
var _state = this.state;
3731337333
var value = _state.value;
3731437334
var isSliderActive = _state.isSliderActive;
3731537335

3731637336
var label = (0, _lodash.isString)(this.props.label) ? this.props.label : this.props.path;
3731737337
var hasSlider = (0, _lodash.isFinite)(min) && (0, _lodash.isFinite)(min);
37338+
var labelStyle = _labelWidth ? { width: _labelWidth + '%' } : {};
37339+
var sliderStyle = _labelWidth ? { width: 2 * (100 - _labelWidth) / 3 + '%' } : {};
37340+
var inputStyle = _labelWidth ? { width: (hasSlider ? (100 - _labelWidth) / 3 : 100 - _labelWidth) + '%' } : {};
3731837341
var sliderPercent = (this.applyConstraints(value) - min) * 100 / (max - min);
3731937342
var sliderBarStyle = hasSlider ? { maxWidth: sliderPercent + '%' } : {};
3732037343
var sliderClassName = (0, _classnames2.default)('slider', { 'is-active': isSliderActive });
@@ -37324,17 +37347,18 @@
3732437347
{ className: className },
3732537348
_react2.default.createElement(
3732637349
'label',
37327-
{ htmlFor: id },
37350+
{ htmlFor: id, style: labelStyle },
3732837351
label
3732937352
),
3733037353
_react2.default.createElement(
3733137354
'div',
37332-
{ className: sliderClassName, ref: 'slider', onMouseDown: this.handleMouseDown },
37355+
{ className: sliderClassName, style: sliderStyle, ref: 'slider', onMouseDown: this.handleMouseDown },
3733337356
_react2.default.createElement('div', { className: 'slider-bar', style: sliderBarStyle })
3733437357
),
3733537358
_react2.default.createElement('input', {
3733637359
type: 'text',
3733737360
inputMode: 'numeric',
37361+
style: inputStyle,
3733837362
id: id,
3733937363
value: value,
3734037364
onChange: this.handleChange,
@@ -37355,6 +37379,7 @@
3735537379
liveUpdate: _react.PropTypes.bool,
3735637380
onUpdate: _react.PropTypes.func,
3735737381
_onUpdateValue: _react.PropTypes.func,
37382+
_labelWidth: _react.PropTypes.number,
3735837383
min: _react.PropTypes.number,
3735937384
max: _react.PropTypes.number,
3736037385
step: _react.PropTypes.number

‎example-es6/build/app.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-dat-gui",
3-
"version": "0.0.6",
3+
"version": "0.0.7",
44
"description": "dat.GUI reimagined for React",
55
"main": "lib/Dat.js",
66
"style": "lib/Dat.css",

0 commit comments

Comments
 (0)