From 085c03b28ef46f5c6c6119120d08b2c1c156689f Mon Sep 17 00:00:00 2001 From: Jan Varho Date: Wed, 30 Nov 2016 06:16:58 +0200 Subject: [PATCH 1/4] Add formatPlaceholder prop for e.g. localization --- lib/index.js | 7 +++++-- src/index.jsx | 9 +++++++-- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/lib/index.js b/lib/index.js index 04f36fc..db274cb 100644 --- a/lib/index.js +++ b/lib/index.js @@ -217,6 +217,7 @@ exports.default = _react2.default.createClass({ style: _react2.default.PropTypes.object, cellPadding: _react2.default.PropTypes.string, placeholder: _react2.default.PropTypes.string, + formatPlaceholder: _react2.default.PropTypes.string, dayLabels: _react2.default.PropTypes.array, monthLabels: _react2.default.PropTypes.array, onChange: _react2.default.PropTypes.func, @@ -517,10 +518,12 @@ exports.default = _react2.default.createClass({ monthLabels: this.props.monthLabels, dateFormat: this.props.dateFormat }); + var placeholder = this.state.focused ? this.props.formatPlaceholder || this.props.dateFormat : this.state.placeholder; + var control = this.props.customControl ? _react2.default.cloneElement(this.props.customControl, { onKeyDown: this.handleKeyDown, value: this.state.inputValue || '', - placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder, + placeholder: placeholder, ref: 'input', disabled: this.props.disabled, onFocus: this.handleFocus, @@ -537,7 +540,7 @@ exports.default = _react2.default.createClass({ style: this.props.style, autoFocus: this.props.autoFocus, disabled: this.props.disabled, - placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder, + placeholder: placeholder, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleInputChange diff --git a/src/index.jsx b/src/index.jsx index 540f1a8..64017ec 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -175,6 +175,7 @@ export default React.createClass({ style: React.PropTypes.object, cellPadding: React.PropTypes.string, placeholder: React.PropTypes.string, + formatPlaceholder: React.PropTypes.string, dayLabels: React.PropTypes.array, monthLabels: React.PropTypes.array, onChange: React.PropTypes.func, @@ -499,11 +500,15 @@ export default React.createClass({ monthLabels={this.props.monthLabels} dateFormat={this.props.dateFormat} />; + const placeholder = this.state.focused + ? this.props.formatPlaceholder || this.props.dateFormat + : this.state.placeholder + const control = this.props.customControl ? React.cloneElement(this.props.customControl, { onKeyDown: this.handleKeyDown, value: this.state.inputValue || '', - placeholder: this.state.focused ? this.props.dateFormat : this.state.placeholder, + placeholder, ref: 'input', disabled: this.props.disabled, onFocus: this.handleFocus, @@ -521,7 +526,7 @@ export default React.createClass({ style={this.props.style} autoFocus={this.props.autoFocus} disabled={this.props.disabled} - placeholder={this.state.focused ? this.props.dateFormat : this.state.placeholder} + placeholder={placeholder} onFocus={this.handleFocus} onBlur={this.handleBlur} onChange={this.handleInputChange} From 9f8af9243fef621919589d06d36f6258408356d6 Mon Sep 17 00:00:00 2001 From: Jan Varho Date: Wed, 30 Nov 2016 06:37:16 +0200 Subject: [PATCH 2/4] Test the different placeholder cases --- test/core.test.jsx | 47 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) diff --git a/test/core.test.jsx b/test/core.test.jsx index e2e7e54..5344f26 100755 --- a/test/core.test.jsx +++ b/test/core.test.jsx @@ -840,4 +840,51 @@ describe("Date Picker", function() { assert.equal(inputElement.style.backgroundColor, backgroundColor); ReactDOM.unmountComponentAtNode(container); })); + it("should set the plaheholder", co.wrap(function *(){ + const App = React.createClass({ + render: function(){ + return
+ +
; + } + }); + yield new Promise(function(resolve, reject){ + ReactDOM.render(, container, resolve); + }); + const inputElement = document.querySelector("input.form-control"); + assert.equal(inputElement.placeholder, "foo"); + ReactDOM.unmountComponentAtNode(container); + })); + it("should show dateFormat as placeholder when focused", co.wrap(function *(){ + const App = React.createClass({ + render: function(){ + return
+ +
; + } + }); + yield new Promise(function(resolve, reject){ + ReactDOM.render(, container, resolve); + }); + const inputElement = document.querySelector("input.form-control"); + TestUtils.Simulate.focus(inputElement); + assert.equal(inputElement.placeholder, "YYYY-MM-DD"); + ReactDOM.unmountComponentAtNode(container); + })); + it("should show formatPlaceholder when focused", co.wrap(function *(){ + const App = React.createClass({ + render: function(){ + return
+ +
; + } + }); + yield new Promise(function(resolve, reject){ + ReactDOM.render(, container, resolve); + }); + const inputElement = document.querySelector("input.form-control"); + TestUtils.Simulate.focus(inputElement); + assert.equal(inputElement.placeholder, "bar"); + ReactDOM.unmountComponentAtNode(container); + })); }); From 8f3e0dc9b9c82c1847c7e0c2b7accb0f30aaf472 Mon Sep 17 00:00:00 2001 From: Jan Varho Date: Wed, 30 Nov 2016 07:06:08 +0200 Subject: [PATCH 3/4] Document placeholder props in README --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index b78a8bd..2e1bbec 100755 --- a/README.md +++ b/README.md @@ -130,6 +130,14 @@ DatePicker component. Renders as a [React-Bootstrap InputGroup](https://react-bo * **Optional** * **Type:** `string` * **Examples:** `"MM/DD/YYYY"`, `"YYYY/MM/DD"`, `"MM-DD-YYYY"`, or `"DD MM YYYY"` + * `placeholder` - Placeholder to show for empty non-focused input. + * **Optional** + * **Type:** `string` + * **Examples:** `"Event date"` + * `formatPlaceholder` - Placeholder to show for focused input. + * **Optional** + * **Type:** `string` + * **Examples:** `"month/day/year"` * `clearButtonElement` - Character or component to use for the clear button. * **Optional** * **Type:** `string` or `ReactClass` From e614c1058c97113f0a444f981d3963fa28bacaf5 Mon Sep 17 00:00:00 2001 From: Jan Varho Date: Wed, 30 Nov 2016 07:17:02 +0200 Subject: [PATCH 4/4] Examples for autoFocus (was missing) and formatPlaceholder --- example/app.jsx | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/example/app.jsx b/example/app.jsx index 36e0d9e..0029cfa 100755 --- a/example/app.jsx +++ b/example/app.jsx @@ -97,6 +97,30 @@ const App = React.createClass({ + + +

Auto Focus

+ + +

Different placeholder on focus

+ + + + + + Auto-focused + + Help + + + + + With format placeholder + + Help + + +

Styles