@skedulo/sked-ui 21.3.0 → 21.4.0

package/dist/components/datepicker/DateTime.d.ts

@@ -2,9 +2,17 @@
 export interface IDateTimeProps {
     dateTime?: Date;
     /**
-     * The time as it is selected by the user
+     * The date and time as it is selected by the user
      */
     onChange?: (value: Date) => void;
+    /**
+     * The date as it is selected by the user
+     */
+    onDateChange?: (value: Date) => void;
+    /**
+     * The time as it is selected by the user
+     */
+    onTimeChange?: (value: string) => void;
     /**
      * The incremental time to add for each selectable time window, by minutes
      */
@@ -13,10 +21,6 @@ export interface IDateTimeProps {
      * Used for setting aria-labelledby
      */
     id?: string;
-    /**
-     * Any suffix to add after the time input
-     */
-    timeSuffix?: string;
     /**
      * Is this input disabled?
      */
@@ -48,4 +52,4 @@ export declare const convertTimeStringTo24Hr: (value: string) => {
     hours: number;
     minutes: number;
 };
-export declare const DateTime: ({ timeIncrement, onChange, dateTime, disabled, openToDate, dateFormat, timeValueSelection, timePlaceholder, datePlaceholder, id }: IDateTimeProps) => JSX.Element;
+export declare const DateTime: ({ timeIncrement, onChange, onDateChange, onTimeChange, dateTime, disabled, openToDate, dateFormat, timeValueSelection, timePlaceholder, datePlaceholder, id }: IDateTimeProps) => JSX.Element;

package/dist/index.js

@@ -53611,12 +53611,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(23);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(460);
-/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(lodash_noop__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var date_fns_format__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(270);
-/* harmony import */ var date_fns_isValid__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(271);
-/* harmony import */ var _Time__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(677);
-/* harmony import */ var _Datepicker__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(305);
+/* harmony import */ var date_fns_format__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(270);
+/* harmony import */ var date_fns_isValid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(271);
+/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(460);
+/* harmony import */ var lodash_noop__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(lodash_noop__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _Datepicker__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(305);
+/* harmony import */ var _Time__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(677);
 
 
 
@@ -53645,7 +53645,11 @@ var DateTime = function DateTime(_ref) {
   var _ref$timeIncrement = _ref.timeIncrement,
       timeIncrement = _ref$timeIncrement === void 0 ? 5 : _ref$timeIncrement,
       _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? lodash_noop__WEBPACK_IMPORTED_MODULE_2___default.a : _ref$onChange,
+      onChange = _ref$onChange === void 0 ? lodash_noop__WEBPACK_IMPORTED_MODULE_4___default.a : _ref$onChange,
+      _ref$onDateChange = _ref.onDateChange,
+      onDateChange = _ref$onDateChange === void 0 ? lodash_noop__WEBPACK_IMPORTED_MODULE_4___default.a : _ref$onDateChange,
+      _ref$onTimeChange = _ref.onTimeChange,
+      onTimeChange = _ref$onTimeChange === void 0 ? lodash_noop__WEBPACK_IMPORTED_MODULE_4___default.a : _ref$onTimeChange,
       _ref$dateTime = _ref.dateTime,
       dateTime = _ref$dateTime === void 0 ? null : _ref$dateTime,
       disabled = _ref.disabled,
@@ -53660,7 +53664,7 @@ var DateTime = function DateTime(_ref) {
       _ref$datePlaceholder = _ref.datePlaceholder,
       datePlaceholder = _ref$datePlaceholder === void 0 ? 'Select date' : _ref$datePlaceholder,
       id = _ref.id;
-  var timeString = dateTime && Object(date_fns_isValid__WEBPACK_IMPORTED_MODULE_4__["default"])(dateTime) ? Object(date_fns_format__WEBPACK_IMPORTED_MODULE_3__["default"])(dateTime, "h:mmaaaaa'm") : '';
+  var timeString = dateTime && Object(date_fns_isValid__WEBPACK_IMPORTED_MODULE_3__["default"])(dateTime) ? Object(date_fns_format__WEBPACK_IMPORTED_MODULE_2__["default"])(dateTime, "h:mmaaaaa'm") : '';
 
   var _React$useState = react__WEBPACK_IMPORTED_MODULE_1___default.a.useState(),
       _React$useState2 = _babel_runtime_helpers_slicedToArray__WEBPACK_IMPORTED_MODULE_0___default()(_React$useState, 2),
@@ -53674,7 +53678,7 @@ var DateTime = function DateTime(_ref) {
 
   var dateTimeResult = react__WEBPACK_IMPORTED_MODULE_1___default.a.useRef();
 
-  var dateChange = function dateChange() {
+  var dateTimeChange = function dateTimeChange() {
     var _Date, _dateTimeResult$curre;
 
     // if the current value isn't null and the user sets the date or time to be null, return null
@@ -53694,7 +53698,7 @@ var DateTime = function DateTime(_ref) {
 
     var dateCreated = new Date((_Date = new Date(date)) === null || _Date === void 0 ? void 0 : _Date.setHours(hours, minutes, 0));
 
-    if (!Object(date_fns_isValid__WEBPACK_IMPORTED_MODULE_4__["default"])(dateCreated)) {
+    if (!Object(date_fns_isValid__WEBPACK_IMPORTED_MODULE_3__["default"])(dateCreated)) {
       return;
     }
 
@@ -53705,10 +53709,15 @@ var DateTime = function DateTime(_ref) {
   };
 
   react__WEBPACK_IMPORTED_MODULE_1___default.a.useEffect(function () {
-    dateChange();
-  }, [date === null || date === void 0 ? void 0 : date.toString(), time]);
+    onDateChange === null || onDateChange === void 0 ? void 0 : onDateChange(date);
+    dateTimeChange();
+  }, [date === null || date === void 0 ? void 0 : date.toString()]);
   react__WEBPACK_IMPORTED_MODULE_1___default.a.useEffect(function () {
-    if (!dateTime || !Object(date_fns_isValid__WEBPACK_IMPORTED_MODULE_4__["default"])(dateTime)) {
+    onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(time);
+    dateTimeChange();
+  }, [time]);
+  react__WEBPACK_IMPORTED_MODULE_1___default.a.useEffect(function () {
+    if (!dateTime || !Object(date_fns_isValid__WEBPACK_IMPORTED_MODULE_3__["default"])(dateTime)) {
       return;
     }
 
@@ -53721,14 +53730,14 @@ var DateTime = function DateTime(_ref) {
     "aria-labelledby": id
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement("div", {
     className: "sk-pr-2"
-  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Datepicker__WEBPACK_IMPORTED_MODULE_6__["Datepicker"], {
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Datepicker__WEBPACK_IMPORTED_MODULE_5__["Datepicker"], {
     placeholderText: datePlaceholder,
     onChange: setDate,
     selected: date,
     disabled: disabled,
     openToDate: openToDate,
     dateFormat: dateFormat
-  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Time__WEBPACK_IMPORTED_MODULE_5__["Time"], {
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1___default.a.createElement(_Time__WEBPACK_IMPORTED_MODULE_6__["Time"], {
     placeholder: timePlaceholder,
     disabled: disabled,
     value: time,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skedulo/sked-ui",
-  "version": "21.3.0",
+  "version": "21.4.0",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",