Skip to content

Commit 284f20a

Browse files
ilan7empestilan7empest
authored
Create a new dist version 0.0.12 (#40)
1 parent 0498ff0 commit 284f20a

File tree

20 files changed

+644
-138
lines changed

20 files changed

+644
-138
lines changed

‎commit_message‎

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

22

3-
Create a new dist version 0.0.11
3+
Create a new dist version 0.0.12
44

55
Collecting:
6-
- Fix [Modal] on navigation back (#28)
7-
- Fix [Modal] remove create portal (#27)
6+
- Fix [Select] display label and sub-label (#31)
7+
- Impl [UI] new Form Checkbox and radio fields (#30)
8+
- Fix [Select] remove capitalize label (#35)
9+
- Impl [FormInput] new range by type number (#36)
10+
- Fix [Form select] show label instead of value (#37)
11+
- Fix css and input validation (#39)

‎dist/components/FormCheckBox/FormCheckBox.js‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,47 +9,65 @@ var _react = _interopRequireDefault(require("react"));
99

1010
var _propTypes = _interopRequireDefault(require("prop-types"));
1111

12-
var _checkboxUnchecked = require("../../images/checkbox-unchecked.svg");
12+
var _reactFinalForm = require("react-final-form");
1313

14-
var _checkboxChecked = require("../../images/checkbox-checked.svg");
14+
var _classnames = _interopRequireDefault(require("classnames"));
1515

1616
require("./formCheckBox.scss");
1717

1818
var _jsxRuntime = require("react/jsx-runtime");
1919

20+
var _excluded = ["children", "className", "name", "label"];
21+
2022
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
2123

24+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
25+
26+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
27+
28+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
29+
30+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
31+
32+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
33+
2234
var FormCheckBox = function FormCheckBox(_ref) {
23-
var children = _ref.children,
35+
var _children = _ref.children,
2436
className = _ref.className,
25-
item = _ref.item,
26-
onChange = _ref.onChange,
27-
selectedId = _ref.selectedId;
28-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
29-
className: "checkbox ".concat(className),
30-
onClick: function onClick() {
31-
onChange(item.id);
32-
},
33-
children: [item.id === selectedId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxChecked.ReactComponent, {
34-
className: "checked"
35-
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkboxUnchecked.ReactComponent, {
36-
className: "unchecked"
37-
}), children || item.label]
37+
name = _ref.name,
38+
label = _ref.label,
39+
inputProps = _objectWithoutProperties(_ref, _excluded);
40+
41+
var formFieldClassNames = (0, _classnames.default)('form-field-checkbox', className);
42+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
43+
name: name,
44+
value: inputProps.value,
45+
type: "checkbox",
46+
children: function children(_ref2) {
47+
var _inputProps$value, _inputProps$value2;
48+
49+
var input = _ref2.input;
50+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
51+
className: formFieldClassNames,
52+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", _objectSpread(_objectSpread({}, _objectSpread(_objectSpread({}, input), inputProps)), {}, {
53+
id: (_inputProps$value = inputProps.value) !== null && _inputProps$value !== void 0 ? _inputProps$value : name
54+
})), /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
55+
htmlFor: (_inputProps$value2 = inputProps.value) !== null && _inputProps$value2 !== void 0 ? _inputProps$value2 : name,
56+
children: [label ? label : '', _children]
57+
})]
58+
});
59+
}
3860
});
3961
};
4062

4163
FormCheckBox.defaultProps = {
4264
className: '',
43-
selectedId: ''
65+
label: ''
4466
};
4567
FormCheckBox.propTypes = {
4668
className: _propTypes.default.string,
47-
item: _propTypes.default.shape({
48-
id: _propTypes.default.string.isRequired,
49-
label: _propTypes.default.string
50-
}).isRequired,
51-
onChange: _propTypes.default.func.isRequired,
52-
selectedId: _propTypes.default.string
69+
name: _propTypes.default.string.isRequired,
70+
label: _propTypes.default.string
5371
};
5472

5573
var _default = /*#__PURE__*/_react.default.memo(FormCheckBox);

‎dist/components/FormCheckBox/formCheckBox.scss‎

Lines changed: 35 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,50 @@
11
@import '../../scss/colors';
2+
@import '../../scss/mixins';
23

3-
.checkbox {
4-
display: flex;
4+
.form-field-checkbox {
5+
display: inline-flex;
56
align-items: center;
7+
justify-content: flex-start;
68
color: $primary;
7-
cursor: pointer;
89

9-
&__label {
10-
flex: 1;
11-
font-size: 14px;
10+
input[type='checkbox'] {
11+
@include radioCheckField;
1212

13-
&-tip {
14-
margin-left: 5px;
13+
flex: 0 0 18px;
14+
width: 18px;
15+
height: 18px;
16+
border-radius: 4px;
17+
transition: background 0.2s ease-in-out;
18+
19+
&::before {
20+
content: '';
21+
display: block;
22+
position: absolute;
23+
top: 1px;
24+
left: 5px;
25+
width: 6px;
26+
height: 11px;
27+
border-style: solid;
28+
border-color: $white;
29+
border-width: 0 2px 2px 0;
30+
transform: rotate(45deg);
1531
}
16-
}
1732

18-
svg {
19-
margin-right: 5px;
33+
&:checked {
34+
background: currentColor;
35+
36+
&:hover {
37+
background: currentColor;
2038

21-
&.checked {
22-
path {
23-
fill: $malibu;
39+
&:disabled {
40+
background: currentColor;
41+
}
2442
}
2543
}
2644

27-
&.unchecked {
28-
path {
29-
fill: $spunPearl;
45+
&:disabled {
46+
&:hover {
47+
background: $white;
3048
}
3149
}
3250
}

‎dist/components/FormInput/FormInput.js‎

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ var _lodash = require("lodash");
1717

1818
var _reactFinalForm = require("react-final-form");
1919

20+
var _InputNumberButtons = _interopRequireDefault(require("./InputNumberButtons/InputNumberButtons"));
21+
2022
var _OptionsMenu = _interopRequireDefault(require("../../elements/OptionsMenu/OptionsMenu"));
2123

2224
var _TextTooltipTemplate = _interopRequireDefault(require("../TooltipTemplate/TextTooltipTemplate"));
@@ -136,7 +138,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
136138
(0, _useDetectOutsideClick.useDetectOutsideClick)(ref, function () {
137139
return setShowValidationRules(false);
138140
});
139-
var formFieldClassNames = (0, _classnames.default)('form-field form-field-input', className);
141+
var formFieldClassNames = (0, _classnames.default)('form-field-input', className);
140142
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');
141143
var labelClassNames = (0, _classnames.default)('form-field__label', disabled && 'form-field__label-disabled');
142144
(0, _react.useEffect)(function () {
@@ -189,11 +191,6 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
189191
}
190192
};
191193

192-
var handleInputChange = function handleInputChange(event) {
193-
input.onChange(event);
194-
onChange && onChange(event.target.value);
195-
};
196-
197194
var handleInputFocus = function handleInputFocus(event) {
198195
input.onFocus(event);
199196
setIsFocused(true);
@@ -202,7 +199,7 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
202199
var handleScroll = function handleScroll(event) {
203200
if (inputRef.current.contains(event.target)) return;
204201

205-
if (!event.target.closest('.options-menu') && !event.target.classList.contains('form-field')) {
202+
if (!event.target.closest('.options-menu') && !event.target.classList.contains('form-field-input')) {
206203
setShowValidationRules(false);
207204
}
208205
};
@@ -231,7 +228,8 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
231228
}, [meta.error]);
232229

233230
var validateField = function validateField(value) {
234-
var valueToValidate = value !== null && value !== void 0 ? value : '';
231+
var valueToValidate = (0, _lodash.isNil)(value) ? '' : String(value);
232+
if (!valueToValidate && !required) return;
235233
var validationError = null;
236234

237235
if (!(0, _lodash.isEmpty)(validationRules)) {
@@ -255,6 +253,22 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
255253
}
256254

257255
if ((0, _lodash.isEmpty)(validationError)) {
256+
if (inputProps.type === 'number') {
257+
if (inputProps.max && +valueToValidate > +inputProps.max) {
258+
validationError = {
259+
name: 'maxValue',
260+
label: "Max value is ".concat(inputProps.max)
261+
};
262+
}
263+
264+
if (inputProps.min && +valueToValidate < +inputProps.min) {
265+
validationError = {
266+
name: 'minValue',
267+
label: "Min value is ".concat(inputProps.min)
268+
};
269+
}
270+
}
271+
258272
if (pattern && !validationPattern.test(valueToValidate)) {
259273
validationError = {
260274
name: 'pattern',
@@ -280,9 +294,15 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
280294
return validationError;
281295
};
282296

297+
var parseField = function parseField(val) {
298+
if (!val) return;
299+
return inputProps.type === 'number' ? +val : val;
300+
};
301+
283302
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactFinalForm.Field, {
284303
validate: validateField,
285304
name: name,
305+
parse: parseField,
286306
children: function children(_ref4) {
287307
var _inputProps$autocompl, _meta$error$label, _meta$error;
288308

@@ -333,7 +353,6 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
333353
pattern: pattern
334354
}, inputProps), input)), {}, {
335355
autoComplete: (_inputProps$autocompl = inputProps.autocomplete) !== null && _inputProps$autocompl !== void 0 ? _inputProps$autocompl : 'off',
336-
onChange: handleInputChange,
337356
onBlur: handleInputBlur,
338357
onFocus: handleInputFocus
339358
}))
@@ -358,7 +377,9 @@ var FormInput = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
358377
className: iconClass,
359378
children: inputIcon
360379
})]
361-
})]
380+
}), inputProps.type === 'number' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputNumberButtons.default, _objectSpread({}, _objectSpread(_objectSpread(_objectSpread({}, inputProps), input), {}, {
381+
disabled: disabled
382+
})))]
362383
}), (suggestionList === null || suggestionList === void 0 ? void 0 : suggestionList.length) > 0 && isFocused && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
363384
className: "form-field__suggestion-list",
364385
children: suggestionList.map(function (item, index) {
@@ -398,15 +419,15 @@ FormInput.defaultProps = {
398419
show: '',
399420
value: ''
400421
},
401-
maxLength: null,
402422
min: null,
423+
max: null,
403424
onBlur: function onBlur() {},
404425
onChange: function onChange() {},
405426
onKeyDown: function onKeyDown() {},
406427
pattern: null,
407428
placeholder: '',
408429
required: false,
409-
step: '',
430+
step: '1',
410431
suggestionList: [],
411432
tip: '',
412433
type: 'text',
@@ -425,8 +446,8 @@ FormInput.propTypes = {
425446
invalidText: _propTypes.default.string,
426447
label: _propTypes.default.string,
427448
link: _types.INPUT_LINK,
428-
maxLength: _propTypes.default.number,
429-
min: _propTypes.default.number,
449+
min: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
450+
max: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
430451
name: _propTypes.default.string.isRequired,
431452
onBlur: _propTypes.default.func,
432453
onChange: _propTypes.default.func,

0 commit comments

Comments
 (0)