oa-componentbook 1.0.1-stage.49 → 1.0.1-stage.50
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/global-css/GlobalCss.js +2 -1
- package/build/global-css/GridLayout.js +1 -1
- package/build/global-css/commonStyles.js +11 -0
- package/build/widgets/oa-widget-add-spare-part/AddSparePartCollapseWidget.js +10 -9
- package/build/widgets/oa-widget-document-upload/DocUploadWidget.js +28 -28
- package/package.json +1 -1
|
@@ -12,13 +12,14 @@ var _Elevation = _interopRequireDefault(require("./Elevation"));
|
|
|
12
12
|
var _GridLayout = _interopRequireDefault(require("./GridLayout"));
|
|
13
13
|
var _SpacingScales = _interopRequireDefault(require("./SpacingScales"));
|
|
14
14
|
var _Typographies = _interopRequireDefault(require("./Typographies"));
|
|
15
|
+
var _commonStyles = _interopRequireDefault(require("./commonStyles"));
|
|
15
16
|
require("antd/dist/reset.css");
|
|
16
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
18
|
function GlobalCss(_ref) {
|
|
18
19
|
let {
|
|
19
20
|
children
|
|
20
21
|
} = _ref;
|
|
21
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BorderRadius.default, null), /*#__PURE__*/_react.default.createElement(_SpacingScales.default, null), /*#__PURE__*/_react.default.createElement(_ColorVariables.default, null), /*#__PURE__*/_react.default.createElement(_Elevation.default, null), /*#__PURE__*/_react.default.createElement(_GridLayout.default, null), /*#__PURE__*/_react.default.createElement(_Typographies.default, null), children);
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BorderRadius.default, null), /*#__PURE__*/_react.default.createElement(_SpacingScales.default, null), /*#__PURE__*/_react.default.createElement(_ColorVariables.default, null), /*#__PURE__*/_react.default.createElement(_Elevation.default, null), /*#__PURE__*/_react.default.createElement(_GridLayout.default, null), /*#__PURE__*/_react.default.createElement(_commonStyles.default, null), /*#__PURE__*/_react.default.createElement(_Typographies.default, null), children);
|
|
22
23
|
}
|
|
23
24
|
GlobalCss.propTypes = {
|
|
24
25
|
children: _propTypes.default.node.isRequired
|
|
@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
|
21
21
|
// TODO: Figure out a way to make this work with storybook.
|
|
22
22
|
// Can be used to wrap the entire application, to make these styles available to every component
|
|
23
23
|
|
|
24
|
-
const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n margin-bottom: 0 !important;\n }\n .ant-notification .ant-notification-notice-wrapper{\n background: transparent;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n position: inherit !important;\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n padding-inline-end: 0px !important;\n}\n .ant-notification-notice-close > button{\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n display: flex;\n align-items: center;\n gap: 12px;\n justify-content: space-between;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: -8px;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: calc(90vh - 126px);\n overflow: auto;\n padding-right: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\n padding-right: 0;\n }\n}\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n \n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n\n\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n\n\n .ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n \n .OaTooltip .ant-tooltip-inner{\n padding: 24px 16px;\n background: #fff;\n color: #212121;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n width: 348px;\n border-radius: 12px;\n }\n .OaTooltip .ant-tooltip-arrow:before{\n background: #fff !important;\n }\n .OaFooterBtn{\n display: flex;\n justify-content: end;\n }\n .OaTooltip{\n max-width: 348px !important;\n }\n.paddingBot .ant-drawer-body{\n padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n transform: rotate(90deg);\n color: var(--color-primary) !important;\n font-size: 14px !important;\n}\n.gappingIcons{\n display: flex;\n gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n height: 350px;\n overflow-y: auto;\n margin: 30px 0px 0px;\n padding: 0px 8px 0 0;;\n \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n width: 8px;\n height: 100px;\n border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n background: #f6f6f6; \n border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n background: #888; \n border-radius: 8px;\n height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n background: #555; \n}\n .modalImg{\n width: 100%;\n }\n.overflowScroll{\n position: relative;\n}\n.ascCollapse .ant-collapse-header{\n border-radius: 4px !important;\n background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n overflow: hidden;\n}\n.ascCollapse .totalVal{\n display: flex;\n gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n display: none\n}\n .ant-notification-notice-close svg{\n font-size: 24px !important;\n height: auto;\n }\n @media only screen and (max-width: 574px) {\n .ant-steps-item-tail{\n inset-inline-start: 78px !important;\n \n }\n}\n @media only screen and (max-width: 480px) {\n .ant-steps-item-tail{\n inset-inline-start: 60px !important;\n \n }\n}\n@media only screen and (max-width: 600px) {\n \n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n .ant-picker-dropdown { width: 100%; left: 0 !important; }\n .mobilesIcons li.ant-dropdown-menu-item > svg {\n display: block;\n}\n.imageZoom .ant-modal-body>div{\n height: auto;\n overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n padding-right: 16px !important;\n}\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n\n\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n \n"])));
|
|
24
|
+
const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n} \n \n\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n \n}\n"])));
|
|
25
25
|
var _default = exports.default = GridLayout;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _styledComponents = require("styled-components");
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
|
+
const CommonStyles = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n margin-bottom: 0 !important;\n }\n .ant-notification .ant-notification-notice-wrapper{\n background: transparent;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n position: inherit !important;\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n padding-inline-end: 0px !important;\n}\n .ant-notification-notice-close > button{\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n display: flex;\n align-items: center;\n gap: 12px;\n justify-content: space-between;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: -8px;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: calc(90vh - 126px);\n overflow: auto;\n padding-right: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\n padding-right: 0;\n }\n}\n\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n.ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n \n.OaTooltip .ant-tooltip-inner{\n padding: 24px 16px;\n background: #fff;\n color: #212121;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n width: 348px;\n border-radius: 12px;\n}\n.OaTooltip .ant-tooltip-arrow:before{\n background: #fff !important;\n}\n.OaFooterBtn{\n display: flex;\n justify-content: end;\n}\n.OaTooltip{\n max-width: 348px !important;\n}\n.paddingBot .ant-drawer-body{\n padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n transform: rotate(90deg);\n color: var(--color-primary) !important;\n font-size: 14px !important;\n}\n.gappingIcons{\n display: flex;\n gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n height: 350px;\n overflow-y: auto;\n margin: 30px 0px 0px;\n padding: 0px 8px 0 0;;\n \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n width: 8px;\n height: 100px;\n border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n background: #f6f6f6; \n border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n background: #888; \n border-radius: 8px;\n height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n background: #555; \n}\n .modalImg{\n width: 100%;\n }\n.overflowScroll{\n position: relative;\n}\n.ascCollapse .ant-collapse-header{\n border-radius: 4px !important;\n background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n overflow: hidden;\n}\n.ascCollapse .totalVal{\n display: flex;\n gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n display: none\n}\n .ant-notification-notice-close svg{\n font-size: 24px !important;\n height: auto;\n }\n @media only screen and (max-width: 574px) {\n .ant-steps-item-tail{\n inset-inline-start: 78px !important;\n \n }\n}\n @media only screen and (max-width: 480px) {\n .ant-steps-item-tail{\n inset-inline-start: 60px !important;\n \n }\n}\n@media only screen and (max-width: 600px) {\n \n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n .ant-picker-dropdown { width: 100%; left: 0 !important; }\n .mobilesIcons li.ant-dropdown-menu-item > svg {\n display: block;\n}\n.imageZoom .ant-modal-body>div{\n height: auto;\n overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n padding-right: 16px !important;\n}\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n"])));
|
|
11
|
+
var _default = exports.default = CommonStyles;
|
|
@@ -82,7 +82,8 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
82
82
|
setActiveKey(Array.from(initialSelectedItems).map(String)); // Set initially selected items as active keys
|
|
83
83
|
}, [selectedItems]);
|
|
84
84
|
(0, _react.useEffect)(() => {
|
|
85
|
-
|
|
85
|
+
var _selectedItems$map$fi, _items$filter;
|
|
86
|
+
const sortedItems = [...((_selectedItems$map$fi = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map(item => items && items.find(i => i.id === item.scopeId)).filter(Boolean)) !== null && _selectedItems$map$fi !== void 0 ? _selectedItems$map$fi : []), ...((_items$filter = items === null || items === void 0 ? void 0 : items.filter(item => !selectedItems.some(selected => selected.scopeId === item.id))) !== null && _items$filter !== void 0 ? _items$filter : [])];
|
|
86
87
|
setFilteredItems(sortedItems);
|
|
87
88
|
}, [items, selectedItems]);
|
|
88
89
|
|
|
@@ -141,7 +142,7 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
141
142
|
}
|
|
142
143
|
}, 0);
|
|
143
144
|
};
|
|
144
|
-
const isNumeric = value => /^\d
|
|
145
|
+
const isNumeric = value => /^\d+(\.\d{0,2})?$/.test(value); // Regular expression to check if the value is numeric
|
|
145
146
|
|
|
146
147
|
/**
|
|
147
148
|
* Handles changes in the fields of the items.
|
|
@@ -163,11 +164,11 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
163
164
|
});
|
|
164
165
|
setFormValues(updatedFormValues);
|
|
165
166
|
} else {
|
|
166
|
-
openNotification({
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
});
|
|
167
|
+
// openNotification({
|
|
168
|
+
// title: 'Error',
|
|
169
|
+
// description: 'Please enter only numeric values 146.',
|
|
170
|
+
// type: 'failure',
|
|
171
|
+
// });
|
|
171
172
|
}
|
|
172
173
|
};
|
|
173
174
|
|
|
@@ -179,7 +180,7 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
179
180
|
* @param {React.KeyboardEvent} event - The event triggered by the key press.
|
|
180
181
|
*/
|
|
181
182
|
const handleKeyPress = event => {
|
|
182
|
-
if (!/[
|
|
183
|
+
if (!/[\d.]/.test(event.key) || event.key === '.' && event.target.value.includes('.')) {
|
|
183
184
|
event.preventDefault();
|
|
184
185
|
openNotification({
|
|
185
186
|
title: 'Error',
|
|
@@ -314,7 +315,7 @@ function AddSparePartCollapseWidget(_ref) {
|
|
|
314
315
|
onChange: e => onFieldChange(item.id, 'cost', e.target.value),
|
|
315
316
|
onKeyPress: handleKeyPress,
|
|
316
317
|
inputMode: "numeric",
|
|
317
|
-
pattern: "[0-9]
|
|
318
|
+
pattern: "[0-9]+(\\.[0-9]{0,2})?",
|
|
318
319
|
value: ((_formValues$item$id = formValues[item.id]) === null || _formValues$item$id === void 0 ? void 0 : _formValues$item$id.cost) !== null && ((_formValues$item$id2 = formValues[item.id]) === null || _formValues$item$id2 === void 0 ? void 0 : _formValues$item$id2.cost) !== undefined ? (_formValues$item$id3 = formValues[item.id]) === null || _formValues$item$id3 === void 0 ? void 0 : _formValues$item$id3.cost : '',
|
|
319
320
|
disabled: isItemDisabled
|
|
320
321
|
})), !disableDiscount && /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -44,9 +44,9 @@ const getBase64 = file => new Promise((resolve, reject) => {
|
|
|
44
44
|
* @returns {undefined}
|
|
45
45
|
*/
|
|
46
46
|
const downloadFile = (base64String, fileName) => {
|
|
47
|
-
const link = document.createElement(
|
|
47
|
+
const link = document.createElement("a");
|
|
48
48
|
link.href = base64String;
|
|
49
|
-
link.download = fileName ||
|
|
49
|
+
link.download = fileName || "download";
|
|
50
50
|
link.click();
|
|
51
51
|
};
|
|
52
52
|
|
|
@@ -80,21 +80,21 @@ function DocumentUpload(props) {
|
|
|
80
80
|
} = props;
|
|
81
81
|
const [previewOpen, setPreviewOpen] = (0, _react.useState)(false);
|
|
82
82
|
const [previewImage, setPreviewImage] = (0, _react.useState)(null);
|
|
83
|
-
const [previewTitle, setPreviewTitle] = (0, _react.useState)(
|
|
83
|
+
const [previewTitle, setPreviewTitle] = (0, _react.useState)("");
|
|
84
84
|
const [loading, setLoading] = (0, _react.useState)(false);
|
|
85
85
|
const [fileList, setFileList] = (0, _react.useState)(uploadedDocuments);
|
|
86
86
|
const handleCancel = () => setPreviewOpen(false);
|
|
87
87
|
|
|
88
88
|
/**
|
|
89
|
-
|
|
90
|
-
|
|
89
|
+
* Determines if the given file is an image file based on its file extension.
|
|
90
|
+
*/
|
|
91
91
|
function isImageFile(fileName) {
|
|
92
92
|
var _fileName$split;
|
|
93
93
|
// Extract the file extension from the file name
|
|
94
|
-
const fileExtension = fileName === null || fileName === void 0 || (_fileName$split = fileName.split(
|
|
94
|
+
const fileExtension = fileName === null || fileName === void 0 || (_fileName$split = fileName.split(".")) === null || _fileName$split === void 0 || (_fileName$split = _fileName$split.pop()) === null || _fileName$split === void 0 ? void 0 : _fileName$split.toLowerCase();
|
|
95
95
|
|
|
96
96
|
// Define an array of image file extensions
|
|
97
|
-
const imageFileExtensions = [
|
|
97
|
+
const imageFileExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "tiff", "svg"];
|
|
98
98
|
|
|
99
99
|
// Check if the file extension is in the array of image file extensions
|
|
100
100
|
if (imageFileExtensions.indexOf(fileExtension) !== -1) {
|
|
@@ -143,15 +143,15 @@ function DocumentUpload(props) {
|
|
|
143
143
|
fileList: newFileList,
|
|
144
144
|
file
|
|
145
145
|
} = _ref;
|
|
146
|
-
if (file.status ===
|
|
147
|
-
onChange(null,
|
|
146
|
+
if (file.status === "removed") {
|
|
147
|
+
onChange(null, "removed");
|
|
148
148
|
}
|
|
149
149
|
const modifiedList = await Promise.all(newFileList.map(async files => {
|
|
150
150
|
let modifiedFile = files;
|
|
151
151
|
setLoading(true);
|
|
152
152
|
try {
|
|
153
153
|
await onChange(files);
|
|
154
|
-
modifiedFile.status =
|
|
154
|
+
modifiedFile.status = "done";
|
|
155
155
|
if (!isImageFile(file === null || file === void 0 ? void 0 : file.name)) {
|
|
156
156
|
var _modifiedFile, _modifiedFile2;
|
|
157
157
|
modifiedFile.url = _PdfSampleImage.default;
|
|
@@ -170,7 +170,7 @@ function DocumentUpload(props) {
|
|
|
170
170
|
const uploadButton = /*#__PURE__*/_react.default.createElement("button", {
|
|
171
171
|
style: {
|
|
172
172
|
border: 0,
|
|
173
|
-
background:
|
|
173
|
+
background: "none"
|
|
174
174
|
},
|
|
175
175
|
type: "button"
|
|
176
176
|
}, loading ? /*#__PURE__*/_react.default.createElement(_icons.LoadingOutlined, null) : /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
|
|
@@ -187,25 +187,25 @@ function DocumentUpload(props) {
|
|
|
187
187
|
color: "negative"
|
|
188
188
|
}, " *"))), subText && /*#__PURE__*/_react.default.createElement("div", {
|
|
189
189
|
style: {
|
|
190
|
-
whiteSpace:
|
|
190
|
+
whiteSpace: "pre-line"
|
|
191
191
|
}
|
|
192
192
|
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
193
193
|
color: "secondary-content",
|
|
194
194
|
className: "type-b2-400"
|
|
195
|
-
}, subText)), infoText && /*#__PURE__*/_react.default.createElement(
|
|
196
|
-
color: "
|
|
197
|
-
|
|
198
|
-
})), /*#__PURE__*/_react.default.createElement("div", {
|
|
195
|
+
}, subText)), infoText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
196
|
+
color: "negative",
|
|
197
|
+
className: "type-b2-400"
|
|
198
|
+
}, infoText)), /*#__PURE__*/_react.default.createElement("div", {
|
|
199
199
|
className: "uploadDiv"
|
|
200
200
|
}, multipleDoc > 0 && /*#__PURE__*/_react.default.createElement("em", null, multipleDoc), /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
|
|
201
201
|
theme: {
|
|
202
202
|
token: {
|
|
203
|
-
colorBorder: _ColorVariablesMap.default[
|
|
203
|
+
colorBorder: _ColorVariablesMap.default["--color-primary"],
|
|
204
204
|
borderRadiusLG: 4,
|
|
205
|
-
colorPrimaryBorder: _ColorVariablesMap.default[
|
|
206
|
-
colorFillAlter: _ColorVariablesMap.default[
|
|
207
|
-
colorError: _ColorVariablesMap.default[
|
|
208
|
-
colorText: _ColorVariablesMap.default[
|
|
205
|
+
colorPrimaryBorder: _ColorVariablesMap.default["--color-divider"],
|
|
206
|
+
colorFillAlter: _ColorVariablesMap.default["--color-secondary-background"],
|
|
207
|
+
colorError: _ColorVariablesMap.default["--color-negative"],
|
|
208
|
+
colorText: _ColorVariablesMap.default["--color-primary"]
|
|
209
209
|
}
|
|
210
210
|
}
|
|
211
211
|
}, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
|
|
@@ -229,12 +229,12 @@ function DocumentUpload(props) {
|
|
|
229
229
|
onCancel: handleCancel
|
|
230
230
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
231
231
|
style: {
|
|
232
|
-
textAlign:
|
|
232
|
+
textAlign: "center"
|
|
233
233
|
}
|
|
234
|
-
},
|
|
234
|
+
}, " ", previewImage ? /*#__PURE__*/_react.default.createElement("img", {
|
|
235
235
|
alt: "example",
|
|
236
236
|
style: {
|
|
237
|
-
width:
|
|
237
|
+
width: "100%"
|
|
238
238
|
},
|
|
239
239
|
src: previewImage
|
|
240
240
|
}) : /*#__PURE__*/_react.default.createElement(_CustomLoader.default, null))));
|
|
@@ -255,10 +255,10 @@ DocumentUpload.propTypes = {
|
|
|
255
255
|
DocumentUpload.defaultProps = {
|
|
256
256
|
uploadedDocuments: [],
|
|
257
257
|
onChange: () => {},
|
|
258
|
-
subText:
|
|
259
|
-
heading:
|
|
260
|
-
formName:
|
|
261
|
-
infoText:
|
|
258
|
+
subText: "",
|
|
259
|
+
heading: "",
|
|
260
|
+
formName: "",
|
|
261
|
+
infoText: "",
|
|
262
262
|
multipleDoc: 0,
|
|
263
263
|
showDelete: true,
|
|
264
264
|
getPreview: () => {},
|