From 175fb9803742a20b524fb7aa94b54b2cc05c2543 Mon Sep 17 00:00:00 2001 From: Nirmalya Ghosh Date: Wed, 29 Dec 2021 13:43:44 +0530 Subject: [PATCH] feat: adds 'type' prop --- readme.md | 39 ++++++++++++++++--------------- src/index.tsx | 57 +++++++++++++++++++++++++++++++++++++++++++++ src/input/index.tsx | 14 +++-------- 3 files changed, 80 insertions(+), 30 deletions(-) diff --git a/readme.md b/readme.md index 6a48941..3c243d1 100644 --- a/readme.md +++ b/readme.md @@ -61,25 +61,26 @@ export default class App extends Component { ## Props -| Prop | Description | -| ----------------------- | ---------------------------------------------------------------------------------------------------------------- | -| placeholder | The placeholder text for the input box | -| data | An array of objects which acts as the source of data for the dropdown. This prop is required | -| fuseConfigs | Configs to override default Fuse configs | -| autoFocus | Focus on the input box once the component is mounted | -| clearOnSelect | Clear the input value when any record is selected | -| onSelect | A function which acts as a callback when any record is selected. It is triggered once a dropdown item is clicked | -| onFocus | A function which acts as a callback when the input is focussed | -| onChange | A function which acts as a callback when the input value is changed | -| inputBoxFontColor | Color of the text in the input box | -| inputBoxBorderColor | Color of the border of the input box | -| inputBoxFontSize | Size of the font of the input box | -| inputBoxHeight | Height of the input box | -| inputBoxBackgroundColor | Background color of the input box | -| dropDownHoverColor | Background color on hover of the dropdown list items | -| dropDownBorderColor | Border color of the dropdown | -| leftIcon | Icon to be rendered on the left of the input box | -| iconBoxSize | The size of the icon (based on the leftIcon prop) | +| Prop | Description | +| -------------------- | ---------------------------------------------------------------------------------------------------------------- | +| placeholder | The placeholder text for the input box | +| data | An array of objects which acts as the source of data for the dropdown. This prop is required | +| fuseConfigs | Configs to override default Fuse configs | +| autoFocus | Focus on the input box once the component is mounted | +| clearOnSelect | Clear the input value when any record is selected | +| onSelect | A function which acts as a callback when any record is selected. It is triggered once a dropdown item is clicked | +| onFocus | A function which acts as a callback when the input is focussed | +| onChange | A function which acts as a callback when the input value is changed | +| inputFontColor | Color of the text in the input box | +| inputBorderColor | Color of the border of the input box | +| inputFontSize | Size of the font of the input box | +| inputHeight | Height of the input box | +| inputBackgroundColor | Background color of the input box | +| dropDownHoverColor | Background color on hover of the dropdown list items | +| dropDownBorderColor | Border color of the dropdown | +| leftIcon | Icon to be rendered on the left of the input box | +| iconBoxSize | The size of the icon (based on the leftIcon prop) | +| type | The type of the input | ## Built With diff --git a/src/index.tsx b/src/index.tsx index 22ed474..e4975e6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -18,23 +18,78 @@ const StyledContainer = styled.div` type Record = { item: { key: string; value: string } }; interface IProps { + /* + * The placeholder text for the input box. + */ placeholder: string; + /* + * An array of objects which acts as the source of data for the dropdown. This prop is required. + */ data: { key: string; value: string }[]; + /* + * Configs to override default Fuse configs. + */ fuseConfigs?: {}; + /* + * Focus on the input box once the component is mounted. + */ autoFocus?: boolean; + /* + * A function which acts as a callback when any record is selected. It is triggered once a dropdown item is clicked. + */ onSelect: (record: Record) => void; + /* + * A function which acts as a callback when the input is focussed. + */ onFocus?: () => void; + /* + * A function which acts as a callback when the input value is changed. + */ onChange: (value: string) => void; + /* + * Color of the text in the input box. + */ inputFontColor?: string; + /* + * Color of the border of the input box. + */ inputBorderColor?: string; + /* + * Size of the font of the input box. + */ inputFontSize?: string; + /* + * Height of the input box. + */ inputHeight?: string; + /* + * Background color of the input box. + */ inputBackgroundColor?: string; + /* + * Background color on hover of the dropdown list items. + */ dropdownHoverColor?: string; + /* + * Border color of the dropdown. + */ dropdownBorderColor?: string; + /* + * Clear the input value when any record is selected. + */ clearOnSelect?: boolean; + /* + * Icon to be rendered on the left of the input box. + */ leftIcon?: ReactNode; + /* + * The size of the icon (based on the leftIcon prop). + */ iconBoxSize?: number | string; + /* + * The type of the input. + */ + type?: string; } const ReactSearchBox: FC = ({ @@ -55,6 +110,7 @@ const ReactSearchBox: FC = ({ clearOnSelect = false, leftIcon, iconBoxSize = "24px", + type = "text", }) => { const [matchedRecords, setMatchedRecords] = useState([]); const [value, setValue] = useState(""); @@ -161,6 +217,7 @@ const ReactSearchBox: FC = ({ inputBackgroundColor={inputBackgroundColor} leftIcon={leftIcon} iconBoxSize={iconBoxSize} + type={type} /> ); }; diff --git a/src/input/index.tsx b/src/input/index.tsx index 44e9396..ccf3e2d 100644 --- a/src/input/index.tsx +++ b/src/input/index.tsx @@ -5,16 +5,6 @@ import { StyledInputContainer, } from "./styles"; -/** - * placeholder: The placeholder text for the input box. - * value: The value of the input box. - * onChange: A function which acts as a callback when the input value is changed. - * onFocus: A function which acts as a callback when the input is focussed. - * inputFontColor: Color of the text in the input box. - * inputBorderColor: Color of the border of the input box. - * inputFontSize: Size of the font of the input box. - * inputHeight: Height of the input box. - */ interface IProps { placeholder: string; value: string; @@ -28,6 +18,7 @@ interface IProps { autoFocus: boolean; leftIcon?: ReactNode; iconBoxSize: number | string; + type: string; } const Input: FC = ({ @@ -43,6 +34,7 @@ const Input: FC = ({ autoFocus, leftIcon, iconBoxSize, + type, }) => { const inputRef = useRef(null); @@ -68,7 +60,7 @@ const Input: FC = ({ return (