- classNameInputBoxItem for <Checkbox/>

- `title` and `ellipsis` for `<Select/>` option item

Author: edwardfxiao

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 4.9.8
+
+- `classNameInputBoxItem` for `<Checkbox/>`
+- `title` and `ellipsis` for `<Select/>` option item
+
 # 4.9.7
 
 - fix bug of cached disabled in `<Select/>` handleOnItemClick

docs/v4-doc.md

@@ -247,6 +247,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
 |**validationCallback**           |**Opt**|**Func**|**Return the validation result.**|**none**    |
 |classNameWrapper                  |  Opt  |  Str   |                                             |  ""        |
 |classNameInputBox                 |  Opt  |  Str   |                                             |  ""        |
+|classNameInputBoxItem             |  Opt  |  Str   |                                             |  ""        |
 |classNameContainer                |  Opt  |  Str   |                                             |  ""        |
 |customStyleWrapper                |  Opt  |  Obj   |                                             |  {}        |
 |customStyleInputBox               |  Opt  |  Obj   |                                             |  {}        |
@@ -288,6 +289,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
     })} //Optional.[Func].Default: none. Return the validation result.
   classNameWrapper="" //Optional.[String].Default: "".
   classNameInputBox="" //Optional.[String].Default: "".
+  classNameInputBoxItem="" //Optional.[String].Default: "".
   classNameContainer="" //Optional.[String].Default: "".
   customStyleWrapper={{}} //Optional.[Object].Default: {}.
   customStyleInputBox={{}} //Optional.[Object].Default: {}.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-inputs-validation",
-  "version": "4.9.7",
+  "version": "4.9.8",
   "description": "A react component for form inputs validation.",
   "main": "index.js",
   "types": "./lib/index.d.ts",

src/js/Inputs/Checkbox.tsx

@@ -75,6 +75,7 @@ interface Props {
   classNameInput?: string;
   classNameWrapper?: string;
   classNameInputBox?: string;
+  classNameInputBoxItem?: string;
   classNameContainer?: string;
   customStyleInput?: React.CSSProperties;
   customStyleWrapper?: React.CSSProperties;
@@ -93,6 +94,7 @@ const component: React.FC<Props> = ({
   classNameInput = '',
   classNameWrapper = '',
   classNameInputBox = '',
+  classNameInputBoxItem = '',
   classNameContainer = '',
   customStyleInput = {},
   customStyleWrapper = {},
@@ -225,6 +227,7 @@ const component: React.FC<Props> = ({
   const boxClass = `${classNameInputBox} ${reactInputsValidationCss[`${TYPE}__box`]} ${err && reactInputsValidationCss['error']} ${internalChecked && reactInputsValidationCss['checked']} ${
     successMsg !== '' && !err && reactInputsValidationCss['success']
   } ${disabled && reactInputsValidationCss['disabled']}`;
+  const boxItemClass = `${classNameInputBoxItem} ${reactInputsValidationCss['box']}`;
   const labelClass = `${internalChecked && reactInputsValidationCss['checked']} ${err && reactInputsValidationCss['error']} ${successMsg !== '' && !err && reactInputsValidationCss['success']} ${
     disabled && reactInputsValidationCss['disabled']
   }`;
@@ -242,7 +245,7 @@ const component: React.FC<Props> = ({
     <button type="button" ref={$input} className={wrapperClass} style={customStyleWrapper} onClick={handleOnClick} onBlur={handleOnBlur} onFocus={handleOnFocus} {...attributesWrapper}>
       <div className={containerClass} style={customStyleContainer}>
         <div className={boxClass} style={customStyleInputBox}>
-          <div className={reactInputsValidationCss['box']} />
+          <div className={boxItemClass} />
           <input
             type={TYPE}
             className={reactInputsValidationCss[`${TYPE}__input`]}

src/js/Inputs/Select.tsx

@@ -749,7 +749,7 @@ export const Option: React.FC<OptionProps> = memo(
       onMouseOut();
     }, []);
     return (
-      <a id={id} onMouseOver={handleOnMouseOver} onMouseMove={handleOnMouseMove} onMouseOut={handleOnMouseOut} className={className} style={customStyleOptionListItem} onClick={handleOnClick}>
+      <a id={id} title={item.name} onMouseOver={handleOnMouseOver} onMouseMove={handleOnMouseMove} onMouseOut={handleOnMouseOut} className={className} style={customStyleOptionListItem} onClick={handleOnClick}>
         {item.icon && <img src={item.icon} className={reactInputsValidationCss[`${TYPE}__optionItem_icon`]} />}
         {<span className={reactInputsValidationCss[`${TYPE}__optionItem_name`]}>{item.name}</span>}
       </a>

src/js/Inputs/react-inputs-validation.css

@@ -423,6 +423,10 @@ input[type='checkbox'] {
   transition: background 0.4s, color 0.2s;
   cursor: none;
   padding: 10px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
 }
 
 .select__options-item span {