Skip to content

Commit

Permalink
feat: adds 'type' prop
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghoshnirmalya
ghoshnirmalya committed Dec 29, 2021
1 parent af165ed commit 175fb98
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 30 deletions.
39 changes: 20 additions & 19 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
57 changes: 57 additions & 0 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<IProps> = ({
Expand All @@ -55,6 +110,7 @@ const ReactSearchBox: FC<IProps> = ({
clearOnSelect = false,
leftIcon,
iconBoxSize = "24px",
type = "text",
}) => {
const [matchedRecords, setMatchedRecords] = useState<any>([]);
const [value, setValue] = useState<string>("");
Expand Down Expand Up @@ -161,6 +217,7 @@ const ReactSearchBox: FC<IProps> = ({
inputBackgroundColor={inputBackgroundColor}
leftIcon={leftIcon}
iconBoxSize={iconBoxSize}
type={type}
/>
);
};
Expand Down
14 changes: 3 additions & 11 deletions src/input/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -28,6 +18,7 @@ interface IProps {
autoFocus: boolean;
leftIcon?: ReactNode;
iconBoxSize: number | string;
type: string;
}

const Input: FC<IProps> = ({
Expand All @@ -43,6 +34,7 @@ const Input: FC<IProps> = ({
autoFocus,
leftIcon,
iconBoxSize,
type,
}) => {
const inputRef = useRef<HTMLInputElement>(null);

Expand All @@ -68,7 +60,7 @@ const Input: FC<IProps> = ({
return (
<StyledInputContainer>
<StyledInput
type="text"
type={type}
placeholder={placeholder}
value={value}
onChange={onChange}
Expand Down

0 comments on commit 175fb98

Please sign in to comment.