Skip to content

Commit 66b0a9f

Browse files
author
Edward Xiao
committed
- 4.0.0. Instead provide ID, now it can be set by attributesWrapper, attributesInput, attributesInputs(radio). And keyboard accessibility using button.
1 parent 00d05e8 commit 66b0a9f

23 files changed

+236
-211
lines changed

‎README.md‎

Lines changed: 51 additions & 62 deletions
Large diffs are not rendered by default.

‎example/index.js‎

Lines changed: 88 additions & 97 deletions
Large diffs are not rendered by default.

‎lib/components/Checkbox.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,11 @@ var reactInputsValidationCss = {
5353
"checkbox__container": "react-inputs-validation__checkbox__container___3I1rX",
5454
"checkbox__box": "react-inputs-validation__checkbox__box___1uj8A",
5555
"box": "react-inputs-validation__box___3E9nu",
56-
"select__button": "react-inputs-validation__select__button___vEDoq",
56+
"button": "react-inputs-validation__button___9JBRL",
5757
"select__wrapper": "react-inputs-validation__select__wrapper___1B4OH",
5858
"select__input": "react-inputs-validation__select__input___3h-P7",
5959
"select__container": "react-inputs-validation__select__container___3jgUR",
60+
"select__button": "react-inputs-validation__select__button___vEDoq",
6061
"select__options-item": "react-inputs-validation__select__options-item___30yY4",
6162
"select__options-item-show-cursor": "react-inputs-validation__select__options-item-show-cursor___1ZT3b",
6263
"select__no-mouse": "react-inputs-validation__select__no-mouse___2uRg6",
@@ -288,7 +289,7 @@ var component = function component(_ref) {
288289
}
289290
}
290291
}, [asyncMsgObj]);
291-
var wrapperClass = "".concat(_const.WRAPPER_CLASS_IDENTITIFIER, " ").concat(classNameWrapper, " ").concat(reactInputsValidationCss["".concat(TYPE, "__wrapper")], " ").concat(internalChecked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
292+
var wrapperClass = "".concat(reactInputsValidationCss['button'], " ").concat(_const.WRAPPER_CLASS_IDENTITIFIER, " ").concat(classNameWrapper, " ").concat(reactInputsValidationCss["".concat(TYPE, "__wrapper")], " ").concat(internalChecked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
292293
var containerClass = "".concat(classNameContainer, " ").concat(reactInputsValidationCss["".concat(TYPE, "__container")], " ").concat(internalChecked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
293294
var boxClass = "".concat(classNameInputBox, " ").concat(reactInputsValidationCss["".concat(TYPE, "__box")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(internalChecked && reactInputsValidationCss['checked'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
294295
var labelClass = "".concat(internalChecked && reactInputsValidationCss['checked'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
@@ -309,7 +310,8 @@ var component = function component(_ref) {
309310
}, successMsg);
310311
}
311312

312-
return React.createElement("div", _extends({
313+
return React.createElement("button", _extends({
314+
type: "button",
313315
ref: $input,
314316
className: wrapperClass,
315317
style: customStyleWrapper,

‎lib/components/Radiobox.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,11 @@ var reactInputsValidationCss = {
5353
"checkbox__container": "react-inputs-validation__checkbox__container___3I1rX",
5454
"checkbox__box": "react-inputs-validation__checkbox__box___1uj8A",
5555
"box": "react-inputs-validation__box___3E9nu",
56-
"select__button": "react-inputs-validation__select__button___vEDoq",
56+
"button": "react-inputs-validation__button___9JBRL",
5757
"select__wrapper": "react-inputs-validation__select__wrapper___1B4OH",
5858
"select__input": "react-inputs-validation__select__input___3h-P7",
5959
"select__container": "react-inputs-validation__select__container___3jgUR",
60+
"select__button": "react-inputs-validation__select__button___vEDoq",
6061
"select__options-item": "react-inputs-validation__select__options-item___30yY4",
6162
"select__options-item-show-cursor": "react-inputs-validation__select__options-item-show-cursor___1ZT3b",
6263
"select__no-mouse": "react-inputs-validation__select__no-mouse___2uRg6",
@@ -306,7 +307,7 @@ var component = function component(_ref) {
306307
var containerClass = "".concat(classNameContainer, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss["".concat(TYPE, "__container")], " ").concat(disabled && reactInputsValidationCss['disabled']);
307308
var inputClass = "".concat(classNameInput, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss["".concat(TYPE, "__input")], " ").concat(disabled && reactInputsValidationCss['disabled']);
308309
var labelClass = "".concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss["".concat(TYPE, "__label")], " ").concat(disabled && reactInputsValidationCss['disabled']);
309-
var optionListItemClass = "".concat(_const.OPTION_LIST_ITEM_IDENTITIFIER, " ").concat(classNameOptionListItem, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss["".concat(TYPE, "__item")], " ").concat(disabled && reactInputsValidationCss['disabled']);
310+
var optionListItemClass = "".concat(reactInputsValidationCss['button'], " ").concat(_const.OPTION_LIST_ITEM_IDENTITIFIER, " ").concat(classNameOptionListItem, " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(reactInputsValidationCss["".concat(TYPE, "__item")], " ").concat(disabled && reactInputsValidationCss['disabled']);
310311
var errMsgClass = "".concat(_const.MSG_CLASS_IDENTITIFIER, " ").concat(reactInputsValidationCss['msg'], " ").concat(err && reactInputsValidationCss['error']);
311312
var successMsgClass = "".concat(_const.MSG_CLASS_IDENTITIFIER, " ").concat(reactInputsValidationCss['msg'], " ").concat(!err && reactInputsValidationCss['success']);
312313
var msgHtml;
@@ -343,7 +344,7 @@ var component = function component(_ref) {
343344
customStyleInput: customStyleInput,
344345
labelClass: labelClass,
345346
onChange: handleOnChange,
346-
attributesInput: attributesInputs[k]
347+
attributesInput: attributesInputs[k] ? attributesInputs[k] : {}
347348
});
348349
});
349350
}
@@ -394,9 +395,11 @@ var Option = memo(function (_ref2) {
394395
var handleOnChange = useCallback(function (e) {
395396
onChange(item.id, e);
396397
}, []);
397-
return React.createElement("div", {
398+
return React.createElement("button", {
399+
type: "button",
398400
className: optionListItemClass,
399-
style: customStyleOptionListItem
401+
style: customStyleOptionListItem,
402+
onClick: handleOnChange
400403
}, React.createElement("input", _extends({
401404
id: id,
402405
name: name,

‎lib/components/Select.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,11 @@ var reactInputsValidationCss = {
6161
"checkbox__container": "react-inputs-validation__checkbox__container___3I1rX",
6262
"checkbox__box": "react-inputs-validation__checkbox__box___1uj8A",
6363
"box": "react-inputs-validation__box___3E9nu",
64-
"select__button": "react-inputs-validation__select__button___vEDoq",
64+
"button": "react-inputs-validation__button___9JBRL",
6565
"select__wrapper": "react-inputs-validation__select__wrapper___1B4OH",
6666
"select__input": "react-inputs-validation__select__input___3h-P7",
6767
"select__container": "react-inputs-validation__select__container___3jgUR",
68+
"select__button": "react-inputs-validation__select__button___vEDoq",
6869
"select__options-item": "react-inputs-validation__select__options-item___30yY4",
6970
"select__options-item-show-cursor": "react-inputs-validation__select__options-item-show-cursor___1ZT3b",
7071
"select__no-mouse": "react-inputs-validation__select__no-mouse___2uRg6",
@@ -622,7 +623,7 @@ var component = function component(_ref) {
622623
var inputClass = "".concat(reactInputsValidationCss["".concat(TYPE, "__input")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
623624
var selectClass = "".concat(classNameSelect, " ").concat(reactInputsValidationCss['ellipsis'], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
624625
var selectOptionListContainerClass = "".concat(classNameOptionListContainer, " ").concat(reactInputsValidationCss["".concat(TYPE, "__options-container")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(show && reactInputsValidationCss['show'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
625-
var selectOptionListItemClass = "".concat(reactInputsValidationCss["".concat(TYPE, "__button")], " ").concat(!isTyping && reactInputsValidationCss["".concat(TYPE, "__options-item-show-cursor")], " ").concat(classNameOptionListItem, " ").concat(reactInputsValidationCss["".concat(TYPE, "__options-item")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
626+
var selectOptionListItemClass = "".concat(reactInputsValidationCss["button"], " ").concat(!isTyping && reactInputsValidationCss["".concat(TYPE, "__options-item-show-cursor")], " ").concat(classNameOptionListItem, " ").concat(reactInputsValidationCss["".concat(TYPE, "__options-item")], " ").concat(err && reactInputsValidationCss['error'], " ").concat(successMsg !== '' && !err && reactInputsValidationCss['success'], " ").concat(disabled && reactInputsValidationCss['disabled']);
626627
var dropdownIconClass = "".concat(classNameDropdownIconOptionListItem, " ").concat(reactInputsValidationCss["".concat(TYPE, "__dropdown-icon")]);
627628
var errMsgClass = "".concat(_const.MSG_CLASS_IDENTITIFIER, " ").concat(reactInputsValidationCss['msg'], " ").concat(err && reactInputsValidationCss['error']);
628629
var successMsgClass = "".concat(_const.MSG_CLASS_IDENTITIFIER, " ").concat(reactInputsValidationCss['msg'], " ").concat(!err && reactInputsValidationCss['success']);
@@ -672,7 +673,7 @@ var component = function component(_ref) {
672673
return React.createElement("button", _extends({
673674
ref: $button,
674675
type: "button",
675-
className: reactInputsValidationCss["".concat(TYPE, "__button")],
676+
className: reactInputsValidationCss["button"],
676677
onClick: function onClick(e) {
677678
handleOnClick(e);
678679
!disabled ? setShow(!show) : "";

‎lib/components/Textarea.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,11 @@ var reactInputsValidationCss = {
6363
"checkbox__container": "react-inputs-validation__checkbox__container___3I1rX",
6464
"checkbox__box": "react-inputs-validation__checkbox__box___1uj8A",
6565
"box": "react-inputs-validation__box___3E9nu",
66-
"select__button": "react-inputs-validation__select__button___vEDoq",
66+
"button": "react-inputs-validation__button___9JBRL",
6767
"select__wrapper": "react-inputs-validation__select__wrapper___1B4OH",
6868
"select__input": "react-inputs-validation__select__input___3h-P7",
6969
"select__container": "react-inputs-validation__select__container___3jgUR",
70+
"select__button": "react-inputs-validation__select__button___vEDoq",
7071
"select__options-item": "react-inputs-validation__select__options-item___30yY4",
7172
"select__options-item-show-cursor": "react-inputs-validation__select__options-item-show-cursor___1ZT3b",
7273
"select__no-mouse": "react-inputs-validation__select__no-mouse___2uRg6",

‎lib/components/Textbox.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,11 @@ var reactInputsValidationCss = {
6363
"checkbox__container": "react-inputs-validation__checkbox__container___3I1rX",
6464
"checkbox__box": "react-inputs-validation__checkbox__box___1uj8A",
6565
"box": "react-inputs-validation__box___3E9nu",
66-
"select__button": "react-inputs-validation__select__button___vEDoq",
66+
"button": "react-inputs-validation__button___9JBRL",
6767
"select__wrapper": "react-inputs-validation__select__wrapper___1B4OH",
6868
"select__input": "react-inputs-validation__select__input___3h-P7",
6969
"select__container": "react-inputs-validation__select__container___3jgUR",
70+
"select__button": "react-inputs-validation__select__button___vEDoq",
7071
"select__options-item": "react-inputs-validation__select__options-item___30yY4",
7172
"select__options-item-show-cursor": "react-inputs-validation__select__options-item-show-cursor___1ZT3b",
7273
"select__no-mouse": "react-inputs-validation__select__no-mouse___2uRg6",

0 commit comments

Comments
 (0)