@qn-pandora/pandora-component 3.1.1 → 4.0.0

package/lib/components/DateTimePicker/Base/style.less

@@ -2,15 +2,9 @@
 @import 'antd/lib/date-picker/style/index.less';
 @import '../../../style/theme.less';
 
-.@{sdk-prefix}-datetime-pick-title {
-  padding: 8px 16px 6px;
-  border-bottom: 1px solid @normal-color;
-  color: @font-color-3;
-  font-size: 14px;
-  background-color: @gray-bg-color;
-}
+@button-default-preset: #e9f0fa;
 
-.@{sdk-prefix}-datetime-pick-panel {
+.@{sdk-prefix}-panel.@{sdk-prefix}-datetime-pick-panel {
   margin-bottom: 0;
 
   &:last-child {
@@ -18,34 +12,44 @@
       border-bottom: none;
     }
   }
-}
 
-.@{sdk-prefix}-datetime-pick-preset {
-  padding: 12px;
-  text-align: left;
-  .@{sdk-prefix}-datetime-pick-item {
-    display: inline-block;
-    width: 96px;
-    line-height: 28px;
-    margin: 4px;
-    color: @theme-color;
-    background: #e9f0fa;
-    text-align: center;
-    font-size: 12px;
-    cursor: pointer;
-    border-radius: @border-radius-base;
-    &.active {
-      background: @theme-color;
-      color: @normal-color;
-      pointer-events: none;
+  .@{sdk-prefix}-datetime-pick-title {
+    padding: 8px 16px 6px;
+    border-bottom: 1px solid @normal-color;
+    color: @font-color-3;
+    font-size: 14px;
+    background-color: @gray-bg-color;
+  }
+
+  .@{sdk-prefix}-datetime-pick-preset {
+    padding: 12px;
+    text-align: left;
+    .@{sdk-prefix}-datetime-pick-item {
+      display: inline-block;
+      width: 96px;
+      line-height: 28px;
+      margin: 4px;
+      color: @theme-color;
+      background: @button-default-preset;
+      text-align: center;
+      font-size: 12px;
+      cursor: pointer;
+      border-radius: @border-radius-base;
+      &.active {
+        background: @theme-color;
+        color: @normal-color;
+        pointer-events: none;
+      }
     }
   }
+
+  .@{sdk-prefix}-datetime-pick-panel-content {
+    padding: 0;
+  }
 }
+
 .@{sdk-prefix}-datetime-pick-content {
   padding: 16px;
-  .range-picker {
-    width: 100% !important;
-  }
   .@{ant-prefix}-calendar-range-picker-input {
     width: calc(50% - 14px);
   }
@@ -78,6 +82,9 @@
     flex: 1;
     margin-left: 8px;
     margin-right: 12px;
+    &.range-picker {
+      width: 100%;
+    }
   }
 }
 
@@ -89,10 +96,6 @@
   }
 }
 
-.@{sdk-prefix}-datetime-pick-panel-content {
-  padding: 0;
-}
-
 .@{sdk-prefix}-datetime-pick-relative-root {
   position: relative;
   flex: 1;
@@ -140,9 +143,6 @@
   margin-top: 30px;
 }
 
-.@{sdk-prefix}-quarter-datetime-pick-panel {
-  width: 360px;
-}
 .@{sdk-prefix}-datetime-pick-quarter-content {
   padding-right: 12px;
   padding-left: 12px;
@@ -153,10 +153,6 @@
     flex: 1;
     min-width: 120px;
     border-left: 1px solid @normal-color;
-    .@{ant-prefix}-select-selection {
-      background: #ebf0fd !important;
-      border-radius: 2px;
-    }
   }
   .@{sdk-prefix}-selector & .@{sdk-prefix}-selector {
     margin-left: 18px;

package/lib/components/DateTimePicker/BaseMobile/style.css

@@ -21,9 +21,9 @@
   visibility: hidden;
 }
 .pandora-sdk-datetime-mobile-picker .am-picker-popup-content .am-picker-popup-body .am-picker-popup-header {
-  border-bottom: none !important;
-  background-image: none !important;
-  background-position: none !important;
-  background-size: none !important;
+  border-bottom: none;
+  background-image: none;
+  background-position: unset;
+  background-size: unset;
   position: initial;
 }

package/lib/components/DateTimePicker/BaseMobile/style.less

@@ -21,10 +21,10 @@
   .am-picker-popup-content {
     .am-picker-popup-body {
       .am-picker-popup-header {
-        border-bottom: none !important;
-        background-image: none !important;
-        background-position: none !important;
-        background-size: none !important;
+        border-bottom: none;
+        background-image: none;
+        background-position: unset;
+        background-size: unset;
         position: initial;
       }
     }

package/lib/components/DateTimePicker/DisplayInput/style.css

@@ -17,6 +17,7 @@
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
@@ -26,12 +27,20 @@
 }
 .ant-input-affix-wrapper::-webkit-input-placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .ant-input-affix-wrapper::-ms-input-placeholder {
   color: #bfbfbf;
+  -ms-user-select: none;
+      user-select: none;
 }
 .ant-input-affix-wrapper::placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .ant-input-affix-wrapper:placeholder-shown {
   text-overflow: ellipsis;
@@ -46,11 +55,11 @@
 }
 .ant-input-affix-wrapper:focus,
 .ant-input-affix-wrapper-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-input-rtl .ant-input-affix-wrapper:focus,
 .ant-input-rtl .ant-input-affix-wrapper-focused {
@@ -60,6 +69,9 @@
 .ant-input-affix-wrapper-disabled {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -70,6 +82,9 @@
 .ant-input-affix-wrapper[disabled] {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -159,7 +174,7 @@ textarea.ant-input-affix-wrapper {
   margin-left: 4px;
 }
 .anticon.ant-input-clear-icon {
-  margin: 0 4px;
+  margin: 0;
   color: rgba(0, 0, 0, 0.25);
   font-size: 12px;
   vertical-align: -1px;
@@ -176,8 +191,8 @@ textarea.ant-input-affix-wrapper {
 .anticon.ant-input-clear-icon-hidden {
   visibility: hidden;
 }
-.anticon.ant-input-clear-icon:last-child {
-  margin-right: 0;
+.anticon.ant-input-clear-icon-has-suffix {
+  margin: 0 4px;
 }
 .ant-input-affix-wrapper-textarea-with-clear-btn {
   padding: 0 !important;
@@ -213,18 +228,27 @@ textarea.ant-input-affix-wrapper {
   border-radius: 2px;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
+  /* stylelint-disable-next-line selector-no-vendor-prefix */
 }
 .ant-input::-moz-placeholder {
   opacity: 1;
 }
 .ant-input::-webkit-input-placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .ant-input::-ms-input-placeholder {
   color: #bfbfbf;
+  -ms-user-select: none;
+      user-select: none;
 }
 .ant-input::placeholder {
   color: #bfbfbf;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 .ant-input:placeholder-shown {
   text-overflow: ellipsis;
@@ -239,11 +263,11 @@ textarea.ant-input-affix-wrapper {
 }
 .ant-input:focus,
 .ant-input-focused {
-  border-color: #528cde;
+  border-color: #9ca0a6;
+  -webkit-box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
+          box-shadow: 0 0 0 2px rgba(122, 134, 154, 0.2);
   border-right-width: 1px !important;
   outline: 0;
-  -webkit-box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
-          box-shadow: 0 0 0 2px rgba(44, 109, 210, 0.2);
 }
 .ant-input-rtl .ant-input:focus,
 .ant-input-rtl .ant-input-focused {
@@ -253,6 +277,9 @@ textarea.ant-input-affix-wrapper {
 .ant-input-disabled {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -263,6 +290,9 @@ textarea.ant-input-affix-wrapper {
 .ant-input[disabled] {
   color: rgba(0, 0, 0, 0.25);
   background-color: #f5f5f5;
+  border-color: #bfbfbf;
+  -webkit-box-shadow: none;
+          box-shadow: none;
   cursor: not-allowed;
   opacity: 1;
 }
@@ -450,10 +480,6 @@ textarea.ant-input {
 .ant-input-group-sm .ant-select-single .ant-select-selector {
   height: 26px;
 }
-.ant-input-group .ant-input-affix-wrapper:not(:first-child) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
 .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
@@ -462,6 +488,11 @@ textarea.ant-input {
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
 }
+.ant-input-group .ant-input-affix-wrapper:not(:first-child),
+.ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:first-child) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
 .ant-input-group.ant-input-group-compact {
   display: block;
 }
@@ -716,9 +747,9 @@ textarea.ant-input {
 .ant-input-textarea-rtl.ant-input-textarea-show-count::after {
   text-align: left;
 }
-.ant-input-affix-wrapper-rtl .ant-input-clear-icon:last-child {
-  margin-right: 4px;
-  margin-left: 0;
+.ant-input-affix-wrapper-rtl .ant-input-clear-icon-has-suffix {
+  margin-right: 0;
+  margin-left: 4px;
 }
 .ant-input-affix-wrapper-rtl .ant-input-clear-icon {
   right: auto;

package/lib/components/DateTimePicker/constants.d.ts

@@ -207,7 +207,7 @@ export interface ITimeRange {
     rangePreset?: RangePreset;
     quarterTime?: IQuarterTime;
 }
-export declare const enum TimeShiftUnit {
+export declare enum TimeShiftUnit {
     Second = "seconds",
     Minute = "minutes",
     Hour = "hours",

package/lib/components/DateTimePicker/constants.js

@@ -330,29 +330,40 @@ exports.QuartersMap = {
         endMonth: 0
     }
 };
+var TimeShiftUnit;
+(function (TimeShiftUnit) {
+    TimeShiftUnit["Second"] = "seconds";
+    TimeShiftUnit["Minute"] = "minutes";
+    TimeShiftUnit["Hour"] = "hours";
+    TimeShiftUnit["Day"] = "days";
+    TimeShiftUnit["Week"] = "weeks";
+    TimeShiftUnit["Month"] = "months";
+    TimeShiftUnit["Quarter"] = "quarters";
+    TimeShiftUnit["Year"] = "years";
+})(TimeShiftUnit = exports.TimeShiftUnit || (exports.TimeShiftUnit = {}));
 exports.TimeShiftUnitOptions = [
     {
-        value: "seconds" /* Second */,
+        value: TimeShiftUnit.Second,
         text: '秒'
     },
     {
-        value: "minutes" /* Minute */,
+        value: TimeShiftUnit.Minute,
         text: '分钟'
     },
     {
-        value: "hours" /* Hour */,
+        value: TimeShiftUnit.Hour,
         text: '小时'
     },
     {
-        value: "days" /* Day */,
+        value: TimeShiftUnit.Day,
         text: '天'
     },
     {
-        value: "months" /* Month */,
+        value: TimeShiftUnit.Month,
         text: '月'
     },
     {
-        value: "years" /* Year */,
+        value: TimeShiftUnit.Year,
         text: '年'
     }
 ];

package/lib/components/DateTimePicker/index.js

@@ -97,7 +97,7 @@ var DateTimePicker = /** @class */ (function (_super) {
         var ismobile = env_1.isMobileDevice() && showTimeType && showTimeType.length;
         return (React.createElement("div", null,
             ismobile && (React.createElement(BaseMobile_1.default, __assign({}, restProps, { showTimeType: showTimeType, buttonType: constants_1.EButtonType.Normal, value: value || this.props.defaultValue, onChange: this.handleChange }))),
-            !ismobile && (React.createElement(antd_1.Popover, { placement: this.props.placement, trigger: "click", visible: this.visible, openClassName: overlayClassName, getPopupContainer: getPopupContainer, onVisibleChange: this.setVisible, getTooltipContainer: this.props.getPopupContainer, content: React.createElement(Base_1.default, __assign({}, restProps, { showTimeType: showTimeType, onChange: this.handleChange, className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-popover", timeClassName), getPopupContainer: getPopupContainer, value: value || this.props.defaultValue })) }, children || (React.createElement(DisplayInput_1.default, { value: value || this.props.defaultValue, timeFormat: this.props.timeFormat, presets: this.props.presets, className: contentClassName }))))));
+            !ismobile && (React.createElement(antd_1.Popover, { placement: this.props.placement, trigger: "click", visible: this.visible, overlayClassName: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-popover-root", overlayClassName), getPopupContainer: getPopupContainer, onVisibleChange: this.setVisible, getTooltipContainer: this.props.getPopupContainer, content: React.createElement(Base_1.default, __assign({}, restProps, { showTimeType: showTimeType, onChange: this.handleChange, className: classnames_1.default(style_1.SDK_PREFIX + "-datetime-pick-popover", timeClassName), getPopupContainer: getPopupContainer, value: value || this.props.defaultValue })) }, children || (React.createElement(DisplayInput_1.default, { value: value || this.props.defaultValue, timeFormat: this.props.timeFormat, presets: this.props.presets, className: contentClassName }))))));
     };
     DateTimePicker.Base = Base_1.default;
     DateTimePicker.BaseMobile = BaseMobile_1.default;

package/lib/components/DateTimePicker/style.css

@@ -326,15 +326,15 @@
 .ant-btn-sm {
   padding: 0 7px;
 }
-.pandora-sdk-datetime-pick-popover {
-  width: 650px;
-}
-.ant-popover-inner-content {
-  padding: 0 !important;
+.pandora-sdk-datetime-pick-popover-root .ant-popover-inner-content {
+  padding: 0;
 }
-.ant-btn {
+.pandora-sdk-datetime-pick-popover-root .ant-btn {
   line-height: 1.499;
 }
-.ant-table {
+.pandora-sdk-datetime-pick-popover-root .ant-table {
   line-height: 1.5;
 }
+.pandora-sdk-datetime-pick-popover {
+  width: 650px;
+}

package/lib/components/DateTimePicker/style.less

@@ -1,17 +1,19 @@
 @import 'antd/lib/popover/style/index.less';
 @import '../../style/theme.less';
 
-.@{sdk-prefix}-datetime-pick-popover {
-  width: 650px;
-}
+.@{sdk-prefix}-datetime-pick-popover-root {
+  .@{ant-prefix}-popover-inner-content {
+    padding: 0;
+  }
+  .@{ant-prefix}-btn {
+    line-height: 1.499;
+  }
 
-.@{ant-prefix}-popover-inner-content {
-  padding: 0 !important;
-}
-.@{ant-prefix}-btn {
-  line-height: 1.499;
+  .@{ant-prefix}-table {
+    line-height: 1.5;
+  }
 }
 
-.@{ant-prefix}-table {
-  line-height: 1.5;
+.@{sdk-prefix}-datetime-pick-popover {
+  width: 650px;
 }

package/lib/components/DateTimePicker/transform.d.ts

@@ -1,3 +1,7 @@
 import { ITimeRange, ITime } from './constants';
 export declare function transformToTime(time: ITimeRange): ITime;
 export declare function transformToTimeRange(time: ITime): ITimeRange;
+export declare function calcFullTime(time?: ITimeRange): {
+    start: number | undefined;
+    end: number | undefined;
+} | undefined;

package/lib/components/DateTimePicker/transform.js

@@ -1,10 +1,23 @@
 "use strict";
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var moment_1 = __importDefault(require("moment"));
 var lodash_1 = require("lodash");
+var constants_1 = require("./constants");
+var time_1 = __importDefault(require("./time"));
 function transformToTime(time) {
     return {
         preset: time.preset,
@@ -27,3 +40,43 @@ function transformToTimeRange(time) {
     };
 }
 exports.transformToTimeRange = transformToTimeRange;
+function getTimeShiftUnit(time) {
+    var e_1, _a;
+    try {
+        for (var TimeShiftUnitOptions_1 = __values(constants_1.TimeShiftUnitOptions), TimeShiftUnitOptions_1_1 = TimeShiftUnitOptions_1.next(); !TimeShiftUnitOptions_1_1.done; TimeShiftUnitOptions_1_1 = TimeShiftUnitOptions_1.next()) {
+            var item = TimeShiftUnitOptions_1_1.value;
+            if (time.endsWith(item.value)) {
+                return item.value;
+            }
+        }
+    }
+    catch (e_1_1) { e_1 = { error: e_1_1 }; }
+    finally {
+        try {
+            if (TimeShiftUnitOptions_1_1 && !TimeShiftUnitOptions_1_1.done && (_a = TimeShiftUnitOptions_1.return)) _a.call(TimeShiftUnitOptions_1);
+        }
+        finally { if (e_1) throw e_1.error; }
+    }
+    return constants_1.TimeShiftUnit.Second;
+}
+function getRelativeTime(timeShift, time) {
+    var timeShiftValue = parseFloat(timeShift) || 0;
+    var timeShiftUnit = getTimeShiftUnit(timeShift);
+    if (time) {
+        return moment_1.default(time).subtract(timeShiftValue, timeShiftUnit);
+    }
+}
+function calcFullTime(time) {
+    if (!time) {
+        return;
+    }
+    var timeShift = time.timeShift;
+    var _a = new time_1.default(transformToTime(time)).toDate(), start = _a.start, end = _a.end;
+    var relativeStart = timeShift && start ? getRelativeTime(timeShift, start) : start;
+    var relativeEnd = timeShift && end ? getRelativeTime(timeShift, end) : end;
+    return {
+        start: relativeStart && relativeStart.valueOf(),
+        end: relativeEnd && relativeEnd.valueOf()
+    };
+}
+exports.calcFullTime = calcFullTime;