From cc61c16c1d5091dbf10456c19b3f52b6444eac4a Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 19 Sep 2016 13:32:39 +0530 Subject: [PATCH] use Date.getTime() instead Date.valueOf(). --- dist/components/types/Date-style.js | 8 +++ dist/components/types/Date.js | 88 +++++++++++++++++++++++++++++ dist/components/types/index.js | 7 ++- dist/index.js | 6 ++ src/index.js | 4 +- 5 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 dist/components/types/Date-style.js create mode 100644 dist/components/types/Date.js diff --git a/dist/components/types/Date-style.js b/dist/components/types/Date-style.js new file mode 100644 index 00000000000..52742bd5cc6 --- /dev/null +++ b/dist/components/types/Date-style.js @@ -0,0 +1,8 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +var style = "\n .rdt {\n position: relative;\n }\n .rdtPicker {\n display: none;\n position: absolute;\n width: 200px;\n padding: 4px;\n margin-top: 1px;\n z-index: 99999 !important;\n background: #fff;\n box-shadow: 0 1px 3px rgba(0,0,0,.1);\n border: 1px solid #f9f9f9;\n }\n .rdtOpen .rdtPicker {\n display: block;\n }\n .rdtStatic .rdtPicker {\n box-shadow: none;\n position: static;\n }\n \n .rdtPicker .rdtTimeToggle {\n text-align: center;\n font-size:11px;\n }\n \n .rdtPicker table {\n width: 100%;\n margin: 0;\n }\n .rdtPicker td,\n .rdtPicker th {\n text-align: center;\n height: 28px;\n }\n .rdtPicker td {\n cursor: pointer;\n }\n .rdtPicker td.rdtDay:hover,\n .rdtPicker td.rdtHour:hover,\n .rdtPicker td.rdtMinute:hover,\n .rdtPicker td.rdtSecond:hover,\n .rdtPicker .rdtTimeToggle:hover {\n background: #eeeeee;\n cursor: pointer;\n }\n .rdtPicker td.rdtOld,\n .rdtPicker td.rdtNew {\n color: #999999;\n }\n .rdtPicker td.rdtToday {\n position: relative;\n }\n .rdtPicker td.rdtToday:before {\n content: '';\n display: inline-block;\n border-left: 7px solid transparent;\n border-bottom: 7px solid #428bca;\n border-top-color: rgba(0, 0, 0, 0.2);\n position: absolute;\n bottom: 4px;\n right: 4px;\n }\n .rdtPicker td.rdtActive,\n .rdtPicker td.rdtActive:hover {\n background-color: #428bca;\n color: #fff;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);\n }\n .rdtPicker td.rdtActive.rdtToday:before {\n border-bottom-color: #fff;\n }\n .rdtPicker td.rdtDisabled,\n .rdtPicker td.rdtDisabled:hover {\n background: none;\n color: #999999;\n cursor: not-allowed;\n }\n \n .rdtPicker td span.rdtOld {\n color: #999999;\n }\n .rdtPicker td span.rdtDisabled,\n .rdtPicker td span.rdtDisabled:hover {\n background: none;\n color: #999999;\n cursor: not-allowed;\n }\n .rdtPicker th {\n border-bottom: 1px solid #f9f9f9;\n }\n .rdtPicker .dow {\n width: 14.2857%;\n font-size: 11px;\n border-bottom: none;\n }\n .rdtPicker th.rdtSwitch {\n width: 100px;\n font-size: 11px;\n }\n .rdtPicker th.rdtNext,\n .rdtPicker th.rdtPrev {\n font-size: 11px;\n vertical-align: top;\n }\n \n .rdtPrev span,\n .rdtNext span {\n display: block;\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Chrome/Safari/Opera */\n -khtml-user-select: none; /* Konqueror */\n -moz-user-select: none; /* Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none;\n }\n \n .rdtPicker th.rdtDisabled,\n .rdtPicker th.rdtDisabled:hover {\n background: none;\n color: #999999;\n cursor: not-allowed;\n }\n .rdtPicker thead tr:first-child th {\n cursor: pointer;\n }\n .rdtPicker thead tr:first-child th:hover {\n background: #eeeeee;\n }\n \n .rdtPicker tfoot {\n border-top: 1px solid #f9f9f9;\n }\n \n .rdtPicker button {\n border: none;\n background: none;\n cursor: pointer;\n }\n .rdtPicker button:hover {\n background-color: #eee;\n }\n \n .rdtPicker thead button {\n width: 100%;\n height: 100%;\n }\n \n td.rdtMonth,\n td.rdtYear {\n height: 50px;\n width: 25%;\n cursor: pointer;\n }\n td.rdtMonth:hover,\n td.rdtYear:hover {\n background: #eee;\n }\n \n td.rdtDay {\n font-size: 11px\n }\n \n .rdtCounters {\n display: inline-block;\n }\n \n .rdtCounters > div {\n float: left;\n }\n \n .rdtCounter {\n height: 100px;\n }\n \n .rdtCounter {\n width: 40px;\n }\n \n .rdtCounterSeparator {\n line-height: 100px;\n }\n \n .rdtCounter .rdtBtn {\n height: 40%;\n line-height: 40px;\n cursor: pointer;\n display: block;\n font-size: 11px;\n \n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Chrome/Safari/Opera */\n -khtml-user-select: none; /* Konqueror */\n -moz-user-select: none; /* Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none;\n }\n .rdtCounter .rdtBtn:hover {\n background: #eee;\n }\n .rdtCounter .rdtCount {\n height: 20%;\n font-size: 11px;\n }\n \n .rdtMilli {\n vertical-align: middle;\n padding-left: 8px;\n width: 48px;\n }\n \n .rdtMilli input {\n width: 100%;\n font-size: 11px;\n margin-top: 37px;\n }\n"; + +exports.default = style; \ No newline at end of file diff --git a/dist/components/types/Date.js b/dist/components/types/Date.js new file mode 100644 index 00000000000..600562c1854 --- /dev/null +++ b/dist/components/types/Date.js @@ -0,0 +1,88 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of'); + +var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf); + +var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _createClass2 = require('babel-runtime/helpers/createClass'); + +var _createClass3 = _interopRequireDefault(_createClass2); + +var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = require('babel-runtime/helpers/inherits'); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _reactDatetime = require('react-datetime'); + +var _reactDatetime2 = _interopRequireDefault(_reactDatetime); + +var _insertCss = require('insert-css'); + +var _insertCss2 = _interopRequireDefault(_insertCss); + +var _DateStyle = require('./Date-style'); + +var _DateStyle2 = _interopRequireDefault(_DateStyle); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +(0, _insertCss2.default)(_DateStyle2.default); + +var DateType = function (_React$Component) { + (0, _inherits3.default)(DateType, _React$Component); + + function DateType() { + (0, _classCallCheck3.default)(this, DateType); + return (0, _possibleConstructorReturn3.default)(this, (DateType.__proto__ || (0, _getPrototypeOf2.default)(DateType)).apply(this, arguments)); + } + + (0, _createClass3.default)(DateType, [{ + key: 'render', + value: function render() { + var _props = this.props; + var knob = _props.knob; + var _onChange = _props.onChange; + + return _react2.default.createElement(_reactDatetime2.default, { + id: knob.name, + value: new Date(knob.value), + type: 'date', + onChange: function onChange(date) { + return _onChange(date.valueOf()); + } + }); + } + }]); + return DateType; +}(_react2.default.Component); + +DateType.propTypes = { + knob: _react2.default.PropTypes.object, + onChange: _react2.default.PropTypes.func +}; + +DateType.serialize = function (value) { + return String(value); +}; + +DateType.deserialize = function (value) { + return parseFloat(value); +}; + +exports.default = DateType; \ No newline at end of file diff --git a/dist/components/types/index.js b/dist/components/types/index.js index 0685c05e629..17951290ff5 100644 --- a/dist/components/types/index.js +++ b/dist/components/types/index.js @@ -24,6 +24,10 @@ var _Select = require('./Select'); var _Select2 = _interopRequireDefault(_Select); +var _Date = require('./Date'); + +var _Date2 = _interopRequireDefault(_Date); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } exports.default = { @@ -31,5 +35,6 @@ exports.default = { number: _Number2.default, boolean: _Boolean2.default, object: _Object2.default, - select: _Select2.default + select: _Select2.default, + date: _Date2.default }; \ No newline at end of file diff --git a/dist/index.js b/dist/index.js index 6c9982e1d8d..bbd5d34639d 100644 --- a/dist/index.js +++ b/dist/index.js @@ -9,6 +9,7 @@ exports.boolean = boolean; exports.number = number; exports.object = object; exports.select = select; +exports.date = date; exports.withKnobs = withKnobs; var _storybookAddons = require('@kadira/storybook-addons'); @@ -47,6 +48,11 @@ function select(name, options, value) { return manager.knob(name, { type: 'select', options: options, value: value }); } +function date(name, value) { + var timestamp = manager.knob(name, { type: 'date', value: value.getTime() }); + return new Date(timestamp); +} + function withKnobs(storyFn, context) { var channel = _storybookAddons2.default.getChannel(); return manager.wrapStory(channel, storyFn, context); diff --git a/src/index.js b/src/index.js index 1a9ea65cf97..68ef3d96c3c 100644 --- a/src/index.js +++ b/src/index.js @@ -28,8 +28,8 @@ export function select(name, options, value) { } export function date(name, value) { - const r = manager.knob(name, { type: 'date', value: value.valueOf() }); - return new Date(r); + const timestamp = manager.knob(name, { type: 'date', value: value.getTime() }); + return new Date(timestamp); } export function withKnobs(storyFn, context) {