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

UI change as mentioned in bitshares/bitshares-ui#2357 #2

Open
twksos wants to merge 2 commits into
base: master
Choose a base branch
from
Open

UI change as mentioned in bitshares/bitshares-ui#2357 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d110052
bitshares/bitshares-ui#2357 add save button for DatePicker
twksos Mar 13, 2019
219587a
build for bitshare-ui
twksos Mar 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ At this point you can import react-datepicker2 and its styles in your applicatio
import DatePicker from 'react-datepicker2';

// Be sure to include styles at some point, probably during your bootstrapping
import 'react-datepicker2/dist/react-datepicker2.min.css';
import 'react-datepicker2/dist/react-datepicker2.css';
```

Below is a simple example on how to use the Datepicker in a React view. You will also need to require the css file from this package (or provide your own). The example below shows how to include the css from this package if your build system supports requiring css files (webpack is one that does).
Expand All @@ -35,7 +35,7 @@ import React from 'react'
import moment from 'moment-jalaali'
import DatePicker from 'react-datepicker2';

import 'react-datepicker2/dist/react-datepicker2.min.css';
import 'react-datepicker2/dist/react-datepicker2.css';

export default React.createClass({
getInitialState() {
Expand Down
162 changes: 83 additions & 79 deletions dist/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6629,12 +6629,6 @@ var DatePicker = function (_Component) {
}, {
key: 'setOpen',
value: function setOpen(isOpen) {
var momentValue = this.state.momentValue;

if (momentValue && this.props.onChange) {
this.handleChange(momentValue);
}

this.setState({ isOpen: isOpen });
}
}, {
Expand All @@ -6661,38 +6655,36 @@ var DatePicker = function (_Component) {
}
}, {
key: 'handleChange',
value: function handleChange(value) {
value: function handleChange() {
var momentValue = this.state.momentValue;

if (!this.lastValueChange || !this.lastValueChange.valueOf) {
// console.log('change 1');
this.lastValueChange = value;
this.props.onChange(value);
this.lastValueChange = momentValue;
this.props.onChange(momentValue);
this.close();
return;
}

if (value.valueOf && value.valueOf() !== this.lastValueChange.valueOf()) {
// console.log('change 2');
this.lastValueChange = value;
this.props.onChange(value);
if (momentValue.valueOf && momentValue.valueOf() !== this.lastValueChange.valueOf()) {
this.lastValueChange = momentValue;
this.props.onChange(momentValue);
this.close();
}
}
}, {
key: 'setMomentValue',
value: function setMomentValue(momentValue, doChange) {
var _state = this.state,
inputFormat = _state.inputFormat,
timePicker = _state.timePicker;


if (doChange !== false && this.props.onChange) {
this.handleChange(momentValue);
key: 'handleInputChangeOnEnter',
value: function handleInputChangeOnEnter(event) {
if (event.key === 'Enter') {
return this.handleChange();
}

// const inputValue = momentValue.format(inputFormat);
}
}, {
key: 'setMomentValue',
value: function setMomentValue(momentValue) {
var timePicker = this.state.timePicker;

var inputValue = this.getValue(momentValue, timePicker);

this.setState({ momentValue: momentValue, inputValue: inputValue });
this.setState({ momentValue: (0, _moment2.default)(momentValue), inputValue: inputValue });
}
}, {
key: 'handleFocus',
Expand All @@ -6703,27 +6695,31 @@ var DatePicker = function (_Component) {
key: 'handleBlur',
value: function handleBlur(event) {
var onBlur = this.props.onBlur;
var _state2 = this.state,
isOpen = _state2.isOpen,
momentValue = _state2.momentValue,
inputFormat = _state2.inputFormat;
var isOpen = this.state.isOpen;


if (isOpen) {
this.refs.input.focus();
} else if (onBlur) {
onBlur(event);
} else {
this.close();
if (onBlur) {
onBlur(event);
}
}
}
}, {
key: 'close',
value: function close() {
var value = this.props.value;
var timePicker = this.state.timePicker;

if (momentValue) {
var inputValue = momentValue.format(inputFormat);
this.setState({ inputValue: inputValue });
}
this.setState({ inputValue: this.getValue(value, timePicker) });
this.setOpen(false);
}
}, {
key: 'handleClickOutsideCalendar',
value: function handleClickOutsideCalendar() {
this.setOpen(false);
this.close();
}
}, {
key: 'handleSelectDay',
Expand Down Expand Up @@ -6766,9 +6762,9 @@ var DatePicker = function (_Component) {
}, {
key: 'renderInput',
value: function renderInput() {
var _state3 = this.state,
isOpen = _state3.isOpen,
inputValue = _state3.inputValue;
var _state = this.state,
isOpen = _state.isOpen,
inputValue = _state.inputValue;


var className = (0, _classnames3.default)(this.props.className, (0, _defineProperty3.default)({}, outsideClickIgnoreClass, isOpen));
Expand All @@ -6780,6 +6776,7 @@ var DatePicker = function (_Component) {
className: 'datepicker-input ' + className,
type: 'text',
ref: 'input',
onKeyUp: this.handleInputChangeOnEnter.bind(this),
onFocus: this.handleFocus.bind(this),
onBlur: this.handleBlur.bind(this),
onChange: this.handleInputChange.bind(this),
Expand All @@ -6791,11 +6788,10 @@ var DatePicker = function (_Component) {
}, {
key: 'renderCalendar',
value: function renderCalendar() {
var _state4 = this.state,
momentValue = _state4.momentValue,
TimePicker = _state4.timePickerComponent;
var _state2 = this.state,
momentValue = _state2.momentValue,
TimePicker = _state2.timePickerComponent;
var _props = this.props,
onChange = _props.onChange,
min = _props.min,
max = _props.max,
defaultMonth = _props.defaultMonth,
Expand All @@ -6814,28 +6810,36 @@ var DatePicker = function (_Component) {
selectedDay: momentValue,
defaultMonth: defaultMonth,
onSelect: this.handleSelectDay.bind(this),
onClickOutside: this.handleClickOutsideCalendar.bind(this),
onClickOutside: this.close.bind(this),
outsideClickIgnoreClass: outsideClickIgnoreClass,
styles: styles,
containerProps: calendarContainerProps
},
TimePicker ? _react2.default.createElement(TimePicker, {
min: min,
max: max,
momentValue: momentValue,
setMomentValue: this.setMomentValue.bind(this)
}) : null
_react2.default.createElement(
'div',
{ className: 'picker-header' },
_react2.default.createElement(
'div',
{ className: 'save-button-container' },
_react2.default.createElement(
'button',
{ className: 'save-button', onClick: this.handleChange.bind(this) },
'Save'
)
),
TimePicker ? _react2.default.createElement(TimePicker, {
min: min,
max: max,
momentValue: momentValue,
setMomentValue: this.setMomentValue.bind(this)
}) : _react2.default.createElement('div', { className: 'time-picker-container' })
)
)
);
}
}, {
key: 'removeDate',
value: function removeDate() {
var onChange = this.props.onChange;

if (onChange) {
onChange('');
}
this.setState({
input: '',
inputValue: ''
Expand Down Expand Up @@ -30180,28 +30184,28 @@ return Tether;
/* 304 */
/***/ (function(module, exports) {

module.exports = function(module) {
if(!module.webpackPolyfill) {
module.deprecate = function() {};
module.paths = [];
// module.parent = undefined by default
if(!module.children) module.children = [];
Object.defineProperty(module, "loaded", {
enumerable: true,
get: function() {
return module.l;
}
});
Object.defineProperty(module, "id", {
enumerable: true,
get: function() {
return module.i;
}
});
module.webpackPolyfill = 1;
}
return module;
};
module.exports = function(module) {
if(!module.webpackPolyfill) {
module.deprecate = function() {};
module.paths = [];
// module.parent = undefined by default
if(!module.children) module.children = [];
Object.defineProperty(module, "loaded", {
enumerable: true,
get: function() {
return module.l;
}
});
Object.defineProperty(module, "id", {
enumerable: true,
get: function() {
return module.i;
}
});
module.webpackPolyfill = 1;
}
return module;
};


/***/ })
Expand Down
12 changes: 10 additions & 2 deletions dist/react-datepicker2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,12 +172,20 @@
color: #ffffff;
}

.picker-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.save-button-container {
flex: 1;
}

/*time picker style*/

.time-picker-container {
margin-bottom: 10
flex: 3;
}

.time-picker-container>.time-label {
float: left;
line-height: 30px;
Expand Down
1 change: 0 additions & 1 deletion dist/react-datepicker2.min.css
View file
Open in desktop

This file was deleted.

21 changes: 14 additions & 7 deletions docs/css/react-datepicker2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,23 +181,30 @@
float: right;
}

.picker-header {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.save-button-container {
flex: 1;
}

/*time picker style*/

.time-picker-container {
margin-bottom: 10
display: flex;
flex: 3;
}

.time-picker-container>.time-label {
float: left;
flex: 1;
line-height: 30px;
width: 50%;
text-align: center;
text-align: right;
}

.time-picker-container>.time-picker-panel {
float: right;
width: 50%;
flex: 2;
}

.time-picker-container.jalaali>.time-label {
Expand Down Expand Up @@ -376,4 +383,4 @@ li.rc-time-picker-panel-select-option-disabled {
li.rc-time-picker-panel-select-option-disabled:hover {
background: transparent;
cursor: not-allowed;
}
}
Loading