thm-p3-configurator 0.0.335 → 0.0.336

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.
Files changed (6) hide show
  1. package/dist/src/shared/__components__/Form/DatePickerInput.js +27 -5
  2. package/dist/src/shared/__components__/Form/TimePickerInput.js +27 -5
  3. package/dist/src/shared/__components__/LocationsSelector/index.js +12 -17
  4. package/dist/src/shared/__style__/components/_datepicker.scss +1 -16
  5. package/dist/src/shared/__style__/components/form/_form.scss +22 -7
  6. package/package.json +1 -1
package/dist/src/shared/__components__/Form/DatePickerInput.js CHANGED
@@ -56,7 +56,7 @@ const DatePickerInput = _ref => {
56
56
  minDate = new Date(),
57
57
  maxDate
58
58
  } = _ref;
59
- const [value, setValue] = (0, _react.useState)();
59
+ const [value, setValue] = (0, _react.useState)(null);
60
60
  const [isTouched, setIsTouched] = (0, _react.useState)(false);
61
61
  (0, _react.useEffect)(() => {
62
62
  if (initialValue && (0, _moment.default)().isValid(initialValue)) {
@@ -76,9 +76,28 @@ const DatePickerInput = _ref => {
76
76
  htmlFor: name,
77
77
  className: (0, _helpers__.withStyle)('form-label text-black')
78
78
  }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
79
- className: "".concat((0, _helpers__.withStyle)('form-group__icon'), " ").concat(isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : '')
80
- }, /*#__PURE__*/_react.default.createElement("i", {
81
- className: "fal fa-calendar"
79
+ className: isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : ''
80
+ }, /*#__PURE__*/_react.default.createElement("div", {
81
+ className: (0, _helpers__.withStyle)('form-group__icon-field'),
82
+ style: {
83
+ position: 'relative',
84
+ width: '100%'
85
+ }
86
+ }, /*#__PURE__*/_react.default.createElement("span", {
87
+ className: "fal fa-calendar",
88
+ "aria-hidden": "true",
89
+ role: "presentation",
90
+ style: {
91
+ position: 'absolute',
92
+ left: '1rem',
93
+ top: '50%',
94
+ transform: 'translateY(-50%)',
95
+ zIndex: 2,
96
+ pointerEvents: 'none',
97
+ fontSize: '1rem',
98
+ color: '#6c757d',
99
+ fontStyle: 'normal'
100
+ }
82
101
  }), /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
83
102
  dateFormat: "dd-MM-yyyy",
84
103
  id: name,
@@ -88,13 +107,16 @@ const DatePickerInput = _ref => {
88
107
  e.preventDefault();
89
108
  },
90
109
  wrapperClassName: (0, _helpers__.withStyle)('react-datepicker-wrapper'),
110
+ popperProps: {
111
+ strategy: 'fixed'
112
+ },
91
113
  minDate: minDate,
92
114
  maxDate: maxDate,
93
115
  locale: "nl",
94
116
  onFocus: handleFocus,
95
117
  onChange: date => handleChange(date),
96
118
  className: "".concat((0, _helpers__.withStyle)('form-control'), " ").concat(isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : '')
97
- }), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
119
+ })), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
98
120
  message: errorMessage
99
121
  })));
100
122
  };
package/dist/src/shared/__components__/Form/TimePickerInput.js CHANGED
@@ -57,7 +57,7 @@ const TimePickerInput = _ref => {
57
57
  isStrict = false,
58
58
  errorMessage
59
59
  } = _ref;
60
- const [value, setValue] = (0, _react.useState)();
60
+ const [value, setValue] = (0, _react.useState)(null);
61
61
  const [isTouched, setIsTouched] = (0, _react.useState)(false);
62
62
  (0, _react.useEffect)(() => {
63
63
  if ((0, _moment.default)().isValid(initialValue)) {
@@ -77,9 +77,28 @@ const TimePickerInput = _ref => {
77
77
  htmlFor: name,
78
78
  className: (0, _helpers__.withStyle)('form-label')
79
79
  }, label, isRequired && /*#__PURE__*/_react.default.createElement("span", null, "*")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
80
- className: "".concat((0, _helpers__.withStyle)('form-group__icon'), " ").concat(isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : '')
81
- }, /*#__PURE__*/_react.default.createElement("i", {
82
- className: "fal fa-clock"
80
+ className: isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : ''
81
+ }, /*#__PURE__*/_react.default.createElement("div", {
82
+ className: (0, _helpers__.withStyle)('form-group__icon-field'),
83
+ style: {
84
+ position: 'relative',
85
+ width: '100%'
86
+ }
87
+ }, /*#__PURE__*/_react.default.createElement("span", {
88
+ className: "fal fa-clock",
89
+ "aria-hidden": "true",
90
+ role: "presentation",
91
+ style: {
92
+ position: 'absolute',
93
+ left: '1rem',
94
+ top: '50%',
95
+ transform: 'translateY(-50%)',
96
+ zIndex: 2,
97
+ pointerEvents: 'none',
98
+ fontSize: '1rem',
99
+ color: '#6c757d',
100
+ fontStyle: 'normal'
101
+ }
83
102
  }), /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
84
103
  dateFormat: "HH:mm",
85
104
  showTimeSelect: true,
@@ -98,9 +117,12 @@ const TimePickerInput = _ref => {
98
117
  locale: "nl",
99
118
  onFocus: handleFocus,
100
119
  wrapperClassName: (0, _helpers__.withStyle)('react-datepicker-wrapper'),
120
+ popperProps: {
121
+ strategy: 'fixed'
122
+ },
101
123
  onChange: date => handleChange(date),
102
124
  className: "".concat((0, _helpers__.withStyle)('form-control w-100'), " ").concat(isTouched && errorMessage ? (0, _helpers__.withStyle)('is-invalid') : '')
103
- }), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
125
+ })), errorMessage && /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
104
126
  message: errorMessage
105
127
  })));
106
128
  };
package/dist/src/shared/__components__/LocationsSelector/index.js CHANGED
@@ -81,23 +81,18 @@ const LocationsSelector = /*#__PURE__*/_react.default.memo(() => {
81
81
  var _branchTypes$byId$aut, _authSession$branch;
82
82
  return (branchTypes === null || branchTypes === void 0 || (_branchTypes$byId$aut = branchTypes.byId[authSession === null || authSession === void 0 || (_authSession$branch = authSession.branch) === null || _authSession$branch === void 0 || (_authSession$branch = _authSession$branch.organisatietype) === null || _authSession$branch === void 0 ? void 0 : _authSession$branch[0]]) === null || _branchTypes$byId$aut === void 0 ? void 0 : _branchTypes$byId$aut.title) === _constants__.TMG_ORGANIZATION_TYPE;
83
83
  }, [branchTypes, authSession]);
84
- let locations;
85
- if (isTMGOrganization || !APP_CONFIG.internal) {
86
- const {
87
- branches
88
- } = (0, _queries.useBranchesQuery)({
89
- offset: 0,
90
- limit: 400,
91
- formula,
92
- franchiseName
93
- });
94
- locations = (branches === null || branches === void 0 ? void 0 : branches.results) || [];
95
- } else {
96
- const {
97
- myBranches
98
- } = (0, _queries.useMyBranches)(formula);
99
- locations = myBranches || [];
100
- }
84
+ const {
85
+ branches
86
+ } = (0, _queries.useBranchesQuery)({
87
+ offset: 0,
88
+ limit: 400,
89
+ formula,
90
+ franchiseName
91
+ });
92
+ const {
93
+ myBranches
94
+ } = (0, _queries.useMyBranches)(formula);
95
+ const locations = isTMGOrganization || !APP_CONFIG.internal ? (branches === null || branches === void 0 ? void 0 : branches.results) || [] : myBranches || [];
101
96
  const {
102
97
  byId,
103
98
  allIds
package/dist/src/shared/__style__/components/_datepicker.scss CHANGED
@@ -1,22 +1,10 @@
1
1
  /* ==========================================================================
2
2
  Datepicker
3
3
  ========================================================================== */
4
- .react-datepicker__tab-loop {
5
- @extend .position-absolute;
6
-
7
- top: 0;
8
- z-index: 2;
9
- }
10
-
11
4
  .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
12
5
  border-top-right-radius: 0;
13
6
  }
14
7
 
15
- .react-datepicker__triangle {
16
- transform: translate3d(82px, 0, 0) !important;
17
- z-index: 2 !important;
18
- }
19
-
20
8
  .react-datepicker-popper[data-placement^='top'] {
21
9
  .react-datepicker {
22
10
  border-bottom-right-radius: 0 !important;
@@ -30,12 +18,9 @@ Datepicker
30
18
 
31
19
  .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {
32
20
  margin-left: -4.6px !important;
33
-
34
- .react-datepicker__triangle {
35
- margin-left: -4.6px !important;
36
- }
37
21
  }
38
22
 
39
23
  .react-datepicker-wrapper {
24
+ display: block !important;
40
25
  width: 100% !important;
41
26
  }
package/dist/src/shared/__style__/components/form/_form.scss CHANGED
@@ -14,25 +14,40 @@ Form Group
14
14
  }
15
15
 
16
16
  /* ==========================================================================
17
- Form Group Icon
17
+ Form group: leading icon inside the field (e.g. date / time pickers)
18
18
  ========================================================================== */
19
- .form-group__icon {
19
+ .form-group__icon-field {
20
20
  @extend .position-relative;
21
21
 
22
- [class*='fa'] {
23
- @extend .ms-15;
22
+ width: 100%;
24
23
 
24
+ > span[class*='fa-'] {
25
25
  @include font-size(24px);
26
26
 
27
27
  color: $gray-600;
28
- left: 0;
28
+ font-style: normal;
29
+ left: 1rem;
30
+ line-height: 1;
31
+ pointer-events: none;
29
32
  position: absolute;
30
- top: 11px;
31
- z-index: 1;
33
+ text-rendering: auto;
34
+ top: 50%;
35
+ transform: translateY(-50%);
36
+ z-index: 2;
37
+ }
38
+
39
+ .react-datepicker-wrapper {
40
+ display: block !important;
41
+ width: 100% !important;
32
42
  }
33
43
 
34
44
  .form-control {
35
45
  @extend .ps-5;
46
+
47
+ min-width: 0;
48
+ position: relative;
49
+ width: 100%;
50
+ z-index: 1;
36
51
  }
37
52
  }
38
53
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "thm-p3-configurator",
3
- "version": "0.0.335",
3
+ "version": "0.0.336",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.js",
6
6
  "author": "EnoRm.",