oa-componentbook 0.18.307 → 0.18.309
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.
|
@@ -55,7 +55,8 @@ function CustomPinPatternCaptureWidget(_ref) {
|
|
|
55
55
|
heading,
|
|
56
56
|
hideFooter,
|
|
57
57
|
showSequence,
|
|
58
|
-
minAllowedlength
|
|
58
|
+
minAllowedlength,
|
|
59
|
+
onStep2Cancel
|
|
59
60
|
} = _ref;
|
|
60
61
|
const [pin, setPin] = (0, _react.useState)('');
|
|
61
62
|
const decreaseValueIndexbyOne = array => array.map(num => num - 1);
|
|
@@ -323,14 +324,17 @@ function CustomPinPatternCaptureWidget(_ref) {
|
|
|
323
324
|
className: "buttonAlign"
|
|
324
325
|
}, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
325
326
|
type: "text-only",
|
|
326
|
-
onClick:
|
|
327
|
-
|
|
327
|
+
onClick: step === 'confirm' ? () => {
|
|
328
|
+
handleReset();
|
|
329
|
+
onStep2Cancel();
|
|
330
|
+
} : handleReset,
|
|
331
|
+
label: step === 'confirm' ? 'Cancel' : 'Reset',
|
|
328
332
|
size: "large"
|
|
329
333
|
}), /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
330
334
|
type: "primary",
|
|
331
335
|
onClick: handleSubmitPatternComplete,
|
|
332
336
|
disabled: !(pattern !== null && pattern !== void 0 && pattern.length) || (prePopulatedPattern === null || prePopulatedPattern === void 0 ? void 0 : prePopulatedPattern.length) > 0,
|
|
333
|
-
label:
|
|
337
|
+
label: step === 'confirm' ? 'Save' : 'Next',
|
|
334
338
|
size: "large"
|
|
335
339
|
})), !hideFooter && /*#__PURE__*/_react.default.createElement("div", {
|
|
336
340
|
className: "textInfo"
|
|
@@ -360,7 +364,8 @@ CustomPinPatternCaptureWidget.propTypes = {
|
|
|
360
364
|
heading: _propTypes.default.string,
|
|
361
365
|
hideFooter: _propTypes.default.bool,
|
|
362
366
|
showSequence: _propTypes.default.bool,
|
|
363
|
-
minAllowedlength: _propTypes.default.number
|
|
367
|
+
minAllowedlength: _propTypes.default.number,
|
|
368
|
+
onStep2Cancel: _propTypes.default.func
|
|
364
369
|
};
|
|
365
370
|
CustomPinPatternCaptureWidget.defaultProps = {
|
|
366
371
|
type: 'pattern',
|
|
@@ -373,5 +378,6 @@ CustomPinPatternCaptureWidget.defaultProps = {
|
|
|
373
378
|
heading: '',
|
|
374
379
|
hideFooter: false,
|
|
375
380
|
showSequence: true,
|
|
376
|
-
minAllowedlength: 0
|
|
381
|
+
minAllowedlength: 0,
|
|
382
|
+
onStep2Cancel: () => {}
|
|
377
383
|
};
|
|
@@ -9,4 +9,4 @@ var _templateObject;
|
|
|
9
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
var _default = exports.default = {};
|
|
12
|
-
const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n max-width: 600px;\n width: 100%;\n margin: 0 auto;\n text-align: center;\n position: relative;\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__point-wrapper.selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n background: black !important;\n}\n .pattern-container {\n position: relative;\n }\n .numbers-overlay {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n right: 0;\n width: 300px;\n height: 300px;\n margin: 0 auto;\n }\n .dot-number {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100px;\n height: 100px;\n }\n .react-pattern-lock__point-wrapper{\n z-index: 9;\n }\n.flexAlignPattern{\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: calc(100vh - 0px);\n gap: 24px;\n}\n .cancelIcon{\n position: absolute;\n right: 16px;\n cursor: pointer;\n }\n.react-pattern-lock__pattern-wrapper .selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n background: #0275DA !important;\n min-width: 12px !important;\n min-height: 12px !important;\n}\n .react-pattern-lock__point-inner{\n background: #0275DA;\n min-width: 12px !important;\n min-height: 12px !important;\n }\n\n .posRelative{\n position: relative;\n }\n .disabled .react-pattern-lock__point .react-pattern-lock__point-inner {\n background: var(--color-placeholder-text) !important;\n min-width: 12px !important;\n min-height: 12px !important;\n z-index: 2;\n}\n .greyDisabledDots .react-pattern-lock__point-inner{\n background: var(--color-placeholder-text);\n } \n .dot-number span{\n width: 16px;\n height: 16px;\n background: var(--color-divider);\n z-index: 2;\n font-size: 11px;\n font-style: normal;\n font-weight: 700;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n color: #717171;\n line-height: 0;\n z-index: 9;\n }\n .activedotoverlay span{\n background: #0275DA;\n color: #fff;\n }\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n background: black !important;\n}\n .buttonAlign{\n display: flex;\n justify-content: space-between;\n gap: 16px;\n padding: 0 24px;\n }\n .buttonAlign button{\n width: 100%;\n }\n .textInfo{\n padding: 12px;\n border-top: 1px solid #D9D9D9;\n text-align: left;\n margin: 16px 0 0;\n text-align: left;\n }\n .alignLeft{\n text-align: left;\n }\n .selected .react-pattern-lock__point{\n width: 28px !important;\n height: 28px !important;\n background: #DEF1FB !important;\n border-radius: 50% !important;\n }\n.react-pattern-lock__pattern-wrapper{\nmargin: 0 auto;}\n.react-pattern-lock__pattern-wrapper .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n background: #0275DA !important;\n}\n"])));
|
|
12
|
+
const StyleContainer = exports.StyleContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n max-width: 600px;\n width: 100%;\n margin: 0 auto;\n text-align: center;\n position: relative;\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__point-wrapper.selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n background: black !important;\n}\n .pattern-container {\n position: relative;\n }\n .numbers-overlay {\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n right: 0;\n width: 300px;\n height: 300px;\n margin: 0 auto;\n }\n .dot-number {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100px;\n height: 100px;\n }\n .react-pattern-lock__point-wrapper{\n z-index: 9;\n }\n.flexAlignPattern{\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n height: calc(100vh - 0px);\n gap: 24px;\n}\n .cancelIcon{\n position: absolute;\n right: 16px;\n cursor: pointer;\n }\n.react-pattern-lock__pattern-wrapper .selected .react-pattern-lock__point .react-pattern-lock__point-inner {\n background: #0275DA !important;\n min-width: 12px !important;\n min-height: 12px !important;\n}\n .react-pattern-lock__point-inner{\n background: #0275DA;\n min-width: 12px !important;\n min-height: 12px !important;\n }\n\n .posRelative{\n position: relative;\n }\n .disabled .react-pattern-lock__point .react-pattern-lock__point-inner {\n background: var(--color-placeholder-text) !important;\n min-width: 12px !important;\n min-height: 12px !important;\n z-index: 2;\n}\n .greyDisabledDots .react-pattern-lock__point-inner{\n background: var(--color-placeholder-text);\n } \n .dot-number span{\n width: 16px;\n height: 16px;\n background: var(--color-divider);\n z-index: 2;\n font-size: 11px;\n font-style: normal;\n font-weight: 700;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n color: #717171;\n line-height: 0;\n z-index: 9;\n }\n .activedotoverlay span{\n background: #0275DA;\n color: #fff;\n }\n.react-pattern-lock__pattern-wrapper.error .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n background: black !important;\n}\n .buttonAlign{\n display: flex;\n justify-content: space-between;\n gap: 16px;\n padding: 0 24px;\n }\n .buttonAlign button{\n width: 100%;\n }\n .textInfo{\n padding: 12px;\n border-top: 1px solid #D9D9D9;\n text-align: left;\n margin: 16px 0 0;\n text-align: left;\n }\n .alignLeft{\n text-align: left;\n }\n .selected .react-pattern-lock__point{\n width: 28px !important;\n height: 28px !important;\n background: #DEF1FB !important;\n border-radius: 50% !important;\n }\n.react-pattern-lock__pattern-wrapper{\nmargin: 0 auto;}\n.react-pattern-lock__pattern-wrapper .react-pattern-lock__connector-wrapper .react-pattern-lock__connector {\n background: #0275DA !important;\n}\n @media screen and (-webkit-min-device-pixel-ratio: 0) {\n @supports (-webkit-overflow-scrolling: touch) {\n .react-pattern-lock__pattern-wrapper{\n width: 274px !important;\n height: 274px !important;\n }\n}\n }\n"])));
|