@qn-pandora/pandora-component 5.1.1 → 5.1.2

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

@@ -1,160 +1,167 @@
-@import 'antd/lib/input-number/style/index.less';
-@import 'antd/lib/date-picker/style/index.less';
-@import '../../../style/theme.less';
-
-@button-default-preset: #e9f0fa;
-
-.@{sdk-prefix}-panel.@{sdk-prefix}-datetime-pick-panel {
-  margin-bottom: 0;
-
-  &:last-child {
-    .@{sdk-prefix}-datetime-pick-title {
-      border-bottom: 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;
-  .@{ant-prefix}-calendar-range-picker-input {
-    width: calc(50% - 14px);
-  }
-
-  .@{ant-prefix}-calendar-selected-start-date,
-  .@{ant-prefix}-calendar-selected-end-date {
-    .@{ant-prefix}-calendar-date {
-      background-color: @theme-color;
-    }
-  }
-
-  .@{ant-prefix}-calendar-range .@{ant-prefix}-calendar-in-range-cell:before {
-    background-color: @theme-color-020;
-  }
-}
-
-.@{sdk-prefix}-error {
-  color: @error-color;
-}
-
-.@{sdk-prefix}-datetime-pick-absolute-content {
-  display: flex;
-  align-items: center;
-
-  .@{sdk-prefix}-datetime-pick-absolute-selector {
-    width: 110px;
-  }
-  .@{sdk-prefix}-datetime-pick-absolute-date-picker {
-    width: 0;
-    flex: 1;
-    margin-left: 8px;
-    margin-right: 12px;
-    &.range-picker {
-      width: 100%;
-    }
-  }
-}
-
-.@{sdk-prefix}-datetime-pick-footer {
-  padding: 0 16px 16px 16px;
-  text-align: right;
-  .@{sdk-prefix}-datetime-pick-footer-botton {
-    border-radius: 2px;
-  }
-}
-
-.@{sdk-prefix}-datetime-pick-relative-root {
-  position: relative;
-  flex: 1;
-}
-
-.@{sdk-prefix}-datetime-pick-relative-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  .@{sdk-prefix}-datetime-pick-unit-selector {
-    flex: 1;
-    border-left: 1px solid @normal-color;
-  }
-
-  .@{sdk-prefix}-datetime-pick-relative-container-to {
-    width: 30px;
-    text-align: center;
-  }
-}
-
-.@{sdk-prefix}-datetime-pick-relative-timepicker {
-  display: flex;
-}
-
-.@{sdk-prefix}-datetime-pick-relative-tip {
-  position: absolute;
-  bottom: -45px;
-  right: 0;
-  a {
-    color: @theme-color;
-    cursor: pointer;
-    margin-left: 8px;
-  }
-}
-
-.@{sdk-prefix}-datetime-pick-relative-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 12px;
-}
-
-.@{sdk-prefix}-datetime-pick-relative-footer-witNow {
-  margin-top: 30px;
-}
-
-.@{sdk-prefix}-datetime-pick-quarter-content {
-  padding-right: 12px;
-  padding-left: 12px;
-  margin-bottom: 12px;
-  display: flex;
-  .@{sdk-prefix}-selector {
-    margin-top: 18px;
-    flex: 1;
-    min-width: 120px;
-    border-left: 1px solid @normal-color;
-  }
-  .@{sdk-prefix}-selector & .@{sdk-prefix}-selector {
-    margin-left: 18px;
-  }
-}
+@import 'antd/lib/input-number/style/index.less';
+@import 'antd/lib/date-picker/style/index.less';
+@import '../../../style/theme.less';
+
+@button-default-preset: #e9f0fa;
+
+.@{sdk-prefix}-panel.@{sdk-prefix}-datetime-pick-panel {
+  margin-bottom: 0;
+
+  &:last-child {
+    .@{sdk-prefix}-datetime-pick-title {
+      border-bottom: 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;
+  .@{ant-prefix}-calendar-range-picker-input {
+    width: calc(50% - 14px);
+  }
+
+  .@{ant-prefix}-calendar-selected-start-date,
+  .@{ant-prefix}-calendar-selected-end-date {
+    .@{ant-prefix}-calendar-date {
+      background-color: @theme-color;
+    }
+  }
+
+  .@{ant-prefix}-calendar-range .@{ant-prefix}-calendar-in-range-cell:before {
+    background-color: @theme-color-020;
+  }
+}
+
+.@{sdk-prefix}-error {
+  color: @error-color;
+}
+
+.@{sdk-prefix}-datetime-pick-absolute-content {
+  display: flex;
+  align-items: center;
+
+  .@{sdk-prefix}-datetime-pick-absolute-selector {
+    width: 110px;
+  }
+  .@{sdk-prefix}-datetime-pick-absolute-date-picker {
+    width: 0;
+    flex: 1;
+    margin-left: 8px;
+    margin-right: 12px;
+    &.range-picker {
+      width: 100%;
+    }
+  }
+}
+
+.@{sdk-prefix}-datetime-pick-footer {
+  padding: 0 16px 16px 16px;
+  text-align: right;
+  .@{sdk-prefix}-datetime-pick-footer-botton {
+    border-radius: 2px;
+  }
+}
+
+.@{sdk-prefix}-datetime-pick-relative-root {
+  position: relative;
+  flex: 1;
+}
+
+.@{sdk-prefix}-datetime-pick-relative-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .@{sdk-prefix}-datetime-pick-unit-selector {
+    flex: 1;
+    border-left: 1px solid @normal-color;
+  }
+
+  .@{sdk-prefix}-datetime-pick-relative-container-to {
+    width: 30px;
+    text-align: center;
+  }
+}
+
+.@{sdk-prefix}-datetime-pick-relative-timepicker {
+  display: flex;
+}
+
+.@{sdk-prefix}-datetime-pick-relative-tip {
+  position: absolute;
+  bottom: -45px;
+  right: 0;
+  a {
+    color: @theme-color;
+    cursor: pointer;
+    margin-left: 8px;
+  }
+}
+
+.@{sdk-prefix}-datetime-pick-relative-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.@{sdk-prefix}-datetime-pick-relative-footer-witNow {
+  margin-top: 30px;
+}
+
+.@{sdk-prefix}-datetime-pick-quarter-content {
+  padding-right: 12px;
+  padding-left: 12px;
+  margin-bottom: 12px;
+  display: flex;
+  .@{sdk-prefix}-selector {
+    margin-top: 18px;
+    flex: 1;
+    min-width: 120px;
+    border-left: 1px solid @normal-color;
+  }
+  .@{sdk-prefix}-selector & .@{sdk-prefix}-selector {
+    margin-left: 18px;
+  }
+}
+
+.@{sdk-prefix}-datetime-pick-trading-day-content {
+  padding: 16px;
+  .@{sdk-prefix}-datetime-pick-trading-day-label {
+    margin-right: 16px;
+  }
+}

package/es/components/DateTimePicker/BaseMobile/Absolute/style.less

@@ -1,35 +1,35 @@
-@import '../../../../style/theme.less';
-.@{sdk-prefix}-datetime-mobile-pick-range-preset-head {
-  display: flex;
-  padding: 10px;
-  position: relative;
-  .@{sdk-prefix}-datetime-mobile-pick-range-preset-head-selector {
-    width: 60%;
-  }
-  .@{sdk-prefix}-datetime-mobile-pick-range-preset-head-button {
-    position: absolute;
-    right: 10px;
-  }
-}
-.@{sdk-prefix}-datetime-mobile-pick-range-sub-title {
-  text-align: left;
-  margin: 8px;
-  padding: 2px 2px 2px 6px;
-  background-color: @time-absolute-sub-title;
-}
-.am-picker-col-indicator {
-  background-color: @time-absolute-am-picker-col-indicator;
-}
-.am-modal-content {
-  border-radius: 12px;
-}
-.@{sdk-prefix}-datetime-mobile-pick-range-div-containter {
-  width: 32px;
-  margin: 0 auto;
-  margin-top: 10px;
-  margin-bottom: 5px;
-  .@{sdk-prefix}-datetime-mobile-pick-range-div {
-    border-radius: 2px;
-    border: 2px solid @time-absolute-picker-title-div;
-  }
-}
+@import '../../../../style/theme.less';
+.@{sdk-prefix}-datetime-mobile-pick-range-preset-head {
+  display: flex;
+  padding: 10px;
+  position: relative;
+  .@{sdk-prefix}-datetime-mobile-pick-range-preset-head-selector {
+    width: 60%;
+  }
+  .@{sdk-prefix}-datetime-mobile-pick-range-preset-head-button {
+    position: absolute;
+    right: 10px;
+  }
+}
+.@{sdk-prefix}-datetime-mobile-pick-range-sub-title {
+  text-align: left;
+  margin: 8px;
+  padding: 2px 2px 2px 6px;
+  background-color: @time-absolute-sub-title;
+}
+.am-picker-col-indicator {
+  background-color: @time-absolute-am-picker-col-indicator;
+}
+.am-modal-content {
+  border-radius: 12px;
+}
+.@{sdk-prefix}-datetime-mobile-pick-range-div-containter {
+  width: 32px;
+  margin: 0 auto;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  .@{sdk-prefix}-datetime-mobile-pick-range-div {
+    border-radius: 2px;
+    border: 2px solid @time-absolute-picker-title-div;
+  }
+}

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

@@ -1,32 +1,32 @@
-@import '../../../style/theme.less';
-
-.@{sdk-prefix}-datetime-mobile-picker-title {
-  .@{sdk-prefix}-datetime-mobile-picker-title-div-containter {
-    width: 32px;
-    margin: 0 auto;
-    margin-top: 10px;
-    margin-bottom: 5px;
-    .@{sdk-prefix}-datetime-mobile-picker-title-div {
-      border-radius: 2px;
-      border: 2px solid @time-absolute-picker-title-div;
-    }
-  }
-}
-
-.@{sdk-prefix}-datetime-mobile-picker {
-  border-radius: 12px;
-  .am-picker-popup-header-left {
-    visibility: hidden;
-  }
-  .am-picker-popup-content {
-    .am-picker-popup-body {
-      .am-picker-popup-header {
-        border-bottom: none;
-        background-image: none;
-        background-position: unset;
-        background-size: unset;
-        position: initial;
-      }
-    }
-  }
-}
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-datetime-mobile-picker-title {
+  .@{sdk-prefix}-datetime-mobile-picker-title-div-containter {
+    width: 32px;
+    margin: 0 auto;
+    margin-top: 10px;
+    margin-bottom: 5px;
+    .@{sdk-prefix}-datetime-mobile-picker-title-div {
+      border-radius: 2px;
+      border: 2px solid @time-absolute-picker-title-div;
+    }
+  }
+}
+
+.@{sdk-prefix}-datetime-mobile-picker {
+  border-radius: 12px;
+  .am-picker-popup-header-left {
+    visibility: hidden;
+  }
+  .am-picker-popup-content {
+    .am-picker-popup-body {
+      .am-picker-popup-header {
+        border-bottom: none;
+        background-image: none;
+        background-position: unset;
+        background-size: unset;
+        position: initial;
+      }
+    }
+  }
+}

package/es/components/DateTimePicker/Collapse/Panel/style.less

@@ -1,26 +1,26 @@
-@import '../../../../style/theme.less';
-
-.@{sdk-prefix}-panel-title {
-  display: flex;
-  justify-content: space-between;
-  font-size: 12px;
-  color: @icon-color-2;
-  cursor: pointer;
-  padding-bottom: 16px;
-  border-bottom: 1px solid @border-color-base;
-  .icon {
-    font-size: 14px;
-  }
-}
-.@{sdk-prefix}-panel-content {
-  padding: 20px 0 0 0;
-}
-.@{sdk-prefix}-panel-hidden {
-  display: none;
-}
-.@{sdk-prefix}-panel {
-  margin-bottom: 20px;
-}
-.@{sdk-prefix}-panel-disable {
-  cursor: default;
-}
+@import '../../../../style/theme.less';
+
+.@{sdk-prefix}-panel-title {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: @icon-color-2;
+  cursor: pointer;
+  padding-bottom: 16px;
+  border-bottom: 1px solid @border-color-base;
+  .icon {
+    font-size: 14px;
+  }
+}
+.@{sdk-prefix}-panel-content {
+  padding: 20px 0 0 0;
+}
+.@{sdk-prefix}-panel-hidden {
+  display: none;
+}
+.@{sdk-prefix}-panel {
+  margin-bottom: 20px;
+}
+.@{sdk-prefix}-panel-disable {
+  cursor: default;
+}

package/es/components/DateTimePicker/DisplayInput/index.js

@@ -37,6 +37,7 @@ import * as React from 'react';
 import { CalendarOutlined } from '@ant-design/icons';
 import { Input } from 'antd';
 import { ConfigContext } from 'antd/es/config-provider';
+import { TradingDay as TradingDayIcon } from '@qn-pandora/pandora-component-icons';
 import Time from '../time';
 var DisplayInput = /** @class */ (function (_super) {
     __extends(DisplayInput, _super);
@@ -47,7 +48,8 @@ var DisplayInput = /** @class */ (function (_super) {
         var _a = this.props, className = _a.className, value = _a.value, timeFormat = _a.timeFormat, presets = _a.presets, otherProps = __rest(_a, ["className", "value", "timeFormat", "presets"]);
         var locale = this.context.locale;
         var text = new Time(value || {}, { presets: presets }).getDisplayText(timeFormat, locale);
-        return (React.createElement(Input, __assign({ readOnly: true, className: className, suffix: React.createElement(CalendarOutlined, { onClick: this.props.onClick }), value: text }, otherProps)));
+        var isTradingDay = (value === null || value === void 0 ? void 0 : value.onlyTradingDay) === true;
+        return (React.createElement(Input, __assign({ readOnly: true, className: className, suffix: isTradingDay ? (React.createElement(TradingDayIcon, { onClick: this.props.onClick })) : (React.createElement(CalendarOutlined, { onClick: this.props.onClick })), value: text }, otherProps)));
     };
     DisplayInput.contextType = ConfigContext;
     return DisplayInput;

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

@@ -47,7 +47,7 @@
   text-overflow: ellipsis;
 }
 .ant-input-affix-wrapper:hover {
-  border-color: #2c6dd2;
+  border-color: #436bff;
   border-right-width: 1px;
 }
 .ant-input-rtl .ant-input-affix-wrapper:hover {
@@ -56,9 +56,9 @@
 }
 .ant-input-affix-wrapper:focus,
 .ant-input-affix-wrapper-focused {
-  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-color: #6b90ff;
+  -webkit-box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
+          box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
   border-right-width: 1px;
   outline: 0;
 }
@@ -124,7 +124,7 @@ textarea.ant-input-affix-wrapper {
   direction: rtl;
 }
 .ant-input-affix-wrapper:not(.ant-input-affix-wrapper-disabled):hover {
-  border-color: #2c6dd2;
+  border-color: #436bff;
   border-right-width: 1px;
   z-index: 1;
 }
@@ -352,7 +352,7 @@ textarea.ant-input-affix-wrapper {
   text-overflow: ellipsis;
 }
 .ant-input:hover {
-  border-color: #2c6dd2;
+  border-color: #436bff;
   border-right-width: 1px;
 }
 .ant-input-rtl .ant-input:hover {
@@ -361,9 +361,9 @@ textarea.ant-input-affix-wrapper {
 }
 .ant-input:focus,
 .ant-input-focused {
-  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-color: #6b90ff;
+  -webkit-box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
+          box-shadow: 0 0 0 2px rgba(67, 107, 255, 0.2);
   border-right-width: 1px;
   outline: 0;
 }
@@ -517,7 +517,7 @@ textarea.ant-input {
 }
 .ant-input-group-addon .ant-select-open .ant-select-selector,
 .ant-input-group-addon .ant-select-focused .ant-select-selector {
-  color: #7a869a;
+  color: #436bff;
 }
 .ant-input-group-addon .ant-cascader-picker {
   margin: -9px -12px;
@@ -830,11 +830,11 @@ textarea.ant-input {
 }
 .ant-input-search .ant-input:hover,
 .ant-input-search .ant-input:focus {
-  border-color: #2c6dd2;
+  border-color: #436bff;
 }
 .ant-input-search .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary),
 .ant-input-search .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary) {
-  border-left-color: #2c6dd2;
+  border-left-color: #436bff;
 }
 .ant-input-search .ant-input-affix-wrapper {
   border-radius: 0;
@@ -939,11 +939,11 @@ textarea.ant-input {
 }
 .ant-input-search-rtl .ant-input:hover + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary):hover,
 .ant-input-search-rtl .ant-input:focus + .ant-input-group-addon .ant-input-search-button:not(.ant-btn-primary):hover {
-  border-left-color: #2c6dd2;
+  border-left-color: #436bff;
 }
 .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper:hover,
 .ant-input-search-rtl > .ant-input-group > .ant-input-affix-wrapper-focused {
-  border-right-color: #2c6dd2;
+  border-right-color: #436bff;
 }
 .ant-input-search-rtl > .ant-input-group > .ant-input-group-addon:last-child {
   right: -1px;

package/es/components/DateTimePicker/DisplayInput/style.less

@@ -1,9 +1,9 @@
-@import 'antd/lib/input/style/index.less';
-@import '../../../style/theme.less';
-
-.@{sdk-prefix}-datetime-pick-input {
-  .@{ant-prefix}-input-suffix {
-    pointer-events: none;
-    color: @font-color-3;
-  }
-}
+@import 'antd/lib/input/style/index.less';
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-datetime-pick-input {
+  .@{ant-prefix}-input-suffix {
+    pointer-events: none;
+    color: @font-color-3;
+  }
+}