Skip to content

Commit ffe1628

Browse files
ilan7empestilan7empest
authored
Create a new dist version 0.0.8 (#17)
Collecting: - Fix [Form] wizard and form input (#16)
1 parent f77073e commit ffe1628

File tree

13 files changed

+511
-608
lines changed

13 files changed

+511
-608
lines changed

‎commit_message‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11

22

3-
Create a new dist version 0.0.7
3+
Create a new dist version 0.0.8
44

55
Collecting:
6-
- Impl [Form Select] move and revamp select component (#11)
6+
- Fix [Form] wizard and form input (#16)

‎dist/components/FormInput/FormInput.js‎

Lines changed: 62 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
9292
required = _ref.required,
9393
suggestionList = _ref.suggestionList,
9494
tip = _ref.tip,
95-
validationRules = _ref.validationRules,
95+
rules = _ref.validationRules,
9696
validator = _ref.validator,
9797
withoutBorder = _ref.withoutBorder,
9898
inputProps = _objectWithoutProperties(_ref, _excluded);
@@ -120,19 +120,24 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
120120
_useState8 = _slicedToArray(_useState7, 1),
121121
validationPattern = _useState8[0];
122122

123-
var _useState9 = (0, _react.useState)(false),
123+
var _useState9 = (0, _react.useState)(rules),
124124
_useState10 = _slicedToArray(_useState9, 2),
125-
showValidationRules = _useState10[0],
126-
setShowValidationRules = _useState10[1];
125+
validationRules = _useState10[0],
126+
setValidationRules = _useState10[1];
127+
128+
var _useState11 = (0, _react.useState)(false),
129+
_useState12 = _slicedToArray(_useState11, 2),
130+
showValidationRules = _useState12[0],
131+
setShowValidationRules = _useState12[1];
127132

128133
var wrapperRef = (0, _react.useRef)();
129134
(_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : ref = wrapperRef;
130135
var inputRef = (0, _react.useRef)();
131136
(0, _useDetectOutsideClick.useDetectOutsideClick)(ref, function () {
132137
return setShowValidationRules(false);
133138
});
134-
var inputClassNames = (0, _classnames.default)('form-field__input', className, "form-field__input-".concat(density), isInvalid && 'form-field__input-invalid', // isInvalid && 'input_rules-invalid',
135-
withoutBorder && 'without-border');
139+
var formFieldClassNames = (0, _classnames.default)('form-field', className);
140+
var inputWrapperClassNames = (0, _classnames.default)('form-field__wrapper', "form-field__wrapper-".concat(density), disabled && 'form-field__wrapper-disabled', isInvalid && 'form-field__wrapper-invalid', withoutBorder && 'without-border');
136141
var labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
137142
(0, _react.useEffect)(function () {
138143
setTypedValue(String(input.value)); // convert from number to string
@@ -155,8 +160,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
155160
}
156161
}, [focused]);
157162

158-
var getValidationRules = function getValidationRules(rules) {
159-
return rules.map(function (_ref3) {
163+
var getValidationRules = function getValidationRules() {
164+
return validationRules.map(function (_ref3) {
160165
var _ref3$isValid = _ref3.isValid,
161166
isValid = _ref3$isValid === void 0 ? false : _ref3$isValid,
162167
label = _ref3.label,
@@ -173,7 +178,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
173178

174179
input.onBlur(event);
175180

176-
if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.suggestion-list'))) {
181+
if (!event.relatedTarget || !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && _event$relatedTarget.closest('.form-field__suggestion-list'))) {
177182
setIsFocused(false);
178183
onBlur && onBlur(event);
179184
}
@@ -206,18 +211,39 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
206211
setShowValidationRules(!showValidationRules);
207212
};
208213

214+
(0, _react.useEffect)(function () {
215+
setValidationRules(function (prevState) {
216+
return prevState.map(function (rule) {
217+
return _objectSpread(_objectSpread({}, rule), {}, {
218+
isValid: !meta.error || !Array.isArray(meta.error) ? true : !meta.error.some(function (err) {
219+
return err.name === rule.name;
220+
})
221+
});
222+
});
223+
});
224+
}, [meta.error]);
225+
209226
var validateField = function validateField(value) {
210227
var valueToValidate = value !== null && value !== void 0 ? value : '';
211228
var validationError = null;
212229

213-
if (!(0, _lodash.isEmpty)(validationRules)) {
214-
var _checkPatternsValidit = (0, _validationService.checkPatternsValidity)(validationRules, valueToValidate),
230+
if (!(0, _lodash.isEmpty)(validationRules) && valueToValidate !== typedValue) {
231+
var _checkPatternsValidit = (0, _validationService.checkPatternsValidity)(rules, valueToValidate),
215232
_checkPatternsValidit2 = _slicedToArray(_checkPatternsValidit, 2),
216233
newRules = _checkPatternsValidit2[0],
217234
isValidField = _checkPatternsValidit2[1];
218235

236+
var invalidRules = newRules.filter(function (rule) {
237+
return !rule.isValid;
238+
});
239+
219240
if (!isValidField) {
220-
validationError = newRules;
241+
validationError = invalidRules.map(function (rule) {
242+
return {
243+
name: rule.name,
244+
label: rule.label
245+
};
246+
});
221247
}
222248

223249
if (isValidField && showValidationRules || required && valueToValidate === '') {
@@ -261,7 +287,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
261287
meta = _ref4.meta;
262288
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
263289
ref: ref,
264-
className: "form-field",
290+
className: formFieldClassNames,
265291
children: [label && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
266292
className: labelClassNames,
267293
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
@@ -291,22 +317,24 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
291317
})
292318
})]
293319
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
294-
className: "form-field__wrapper",
295-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
296-
"data-testid": "input",
297-
id: input.name,
298-
className: inputClassNames,
299-
ref: inputRef,
300-
required: isInvalid
301-
}, _objectSpread(_objectSpread({
302-
disabled: disabled,
303-
pattern: pattern
304-
}, inputProps), input)), {}, {
305-
autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off',
306-
onChange: handleInputChange,
307-
onBlur: handleInputBlur,
308-
onFocus: handleInputFocus
309-
})), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
320+
className: inputWrapperClassNames,
321+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
322+
className: "form-field__control",
323+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({
324+
"data-testid": "input",
325+
id: input.name,
326+
ref: inputRef,
327+
required: isInvalid || required
328+
}, _objectSpread(_objectSpread({
329+
disabled: disabled,
330+
pattern: pattern
331+
}, inputProps), input)), {}, {
332+
autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off',
333+
onChange: handleInputChange,
334+
onBlur: handleInputBlur,
335+
onFocus: handleInputFocus
336+
}))
337+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
310338
className: "form-field__icons",
311339
children: [isInvalid && !Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
312340
className: "form-field__warning",
@@ -315,7 +343,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
315343
warning: true
316344
}),
317345
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_invalid.ReactComponent, {})
318-
}), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
346+
}), isInvalid && Array.isArray(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
319347
className: "form-field__warning",
320348
onClick: toggleValidationRulesMenu,
321349
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.ReactComponent, {})
@@ -329,7 +357,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
329357
})]
330358
})]
331359
}), (suggestionList === null || suggestionList === void 0 ? void 0 : suggestionList.length) > 0 && isFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
332-
className: "suggestion-list",
360+
className: "form-field__suggestion-list",
333361
children: suggestionList.map(function (item, index) {
334362
return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
335363
className: "suggestion-item",
@@ -344,10 +372,10 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
344372
}
345373
}, "".concat(item).concat(index));
346374
})
347-
}), isInvalid && Array.isArray(meta.error) && !(0, _lodash.isEmpty)(meta.error) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
375+
}), !(0, _lodash.isEmpty)(validationRules) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_OptionsMenu.default, {
348376
show: showValidationRules,
349-
parentElement: ref,
350-
children: getValidationRules(meta.error)
377+
ref: ref,
378+
children: getValidationRules()
351379
})]
352380
});
353381
}

‎dist/components/FormInput/formInput.scss‎

Lines changed: 9 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,10 @@
33
@import '../../scss/shadows';
44
@import '../../scss/mixins';
55

6-
.form-field {
7-
position: relative;
8-
display: block;
9-
width: 100%;
6+
@include formField;
107

8+
.form-field {
119
&__label {
12-
margin-bottom: 5px;
13-
color: $topaz;
14-
font-size: 12px;
15-
text-transform: capitalize;
16-
background-color: transparent;
17-
18-
&-mandatory {
19-
color: $amaranth;
20-
}
21-
22-
&-disabled {
23-
color: $spunPearl;
24-
25-
.form-field__label-mandatory {
26-
color: $spunPearl;
27-
}
28-
}
29-
3010
&-icon {
3111
display: inline-flex;
3212
margin-left: 3px;
@@ -51,11 +31,11 @@
5131
}
5232
}
5333

54-
&__input {
55-
padding-left: 16px;
56-
padding-right: 30px;
57-
58-
@include fieldWrapper;
34+
input {
35+
border: 0;
36+
color: inherit;
37+
padding: 0;
38+
width: 100%;
5939

6040
&::placeholder {
6141
color: $spunPearl;
@@ -81,66 +61,13 @@
8161
color: $spunPearl;
8262
}
8363

84-
&-invalid {
85-
border: $errorBorder;
86-
padding-right: 50px;
87-
}
88-
89-
&.without-border {
90-
border-color: transparent;
91-
}
92-
93-
&:read-only:not(:disabled) {
94-
border-color: transparent;
95-
padding: 0;
96-
}
97-
9864
&:disabled {
99-
color: $spunPearl;
65+
background: transparent;
10066
cursor: not-allowed;
10167
}
102-
103-
&-dense {
104-
padding-top: 12px;
105-
padding-bottom: 12px;
106-
}
107-
108-
&-normal {
109-
padding-top: 14px;
110-
padding-bottom: 14px;
111-
}
112-
113-
&-medium {
114-
padding-top: 16px;
115-
padding-bottom: 16px;
116-
}
117-
118-
&-chunky {
119-
padding-top: 18px;
120-
padding-bottom: 18px;
121-
}
12268
}
12369

124-
&__icons {
125-
display: flex;
126-
align-items: center;
127-
position: absolute;
128-
top: 50%;
129-
right: 10px;
130-
transform: translateY(-50%);
131-
132-
& > * {
133-
display: flex;
134-
align-items: center;
135-
cursor: pointer;
136-
137-
&:not(:first-child) {
138-
margin-left: 8px;
139-
}
140-
}
141-
}
142-
143-
.suggestion-list {
70+
&__suggestion-list {
14471
position: absolute;
14572
top: 100%;
14673
left: 0;
@@ -162,8 +89,4 @@
16289
}
16390
}
16491
}
165-
166-
&__wrapper {
167-
position: relative;
168-
}
16992
}

0 commit comments

Comments
 (0)