fixed tsstrict of InputTypeHeadComponent.tsx

This commit is contained in:
sunilyadav840
2021-08-26 16:02:29 +05:30
parent 8eeda41021
commit 6b5e2618dd
3 changed files with 29 additions and 15 deletions
@@ -1,7 +1,7 @@
import React from "react";
import { shallow } from "enzyme"; import { shallow } from "enzyme";
import { InputTypeaheadComponent, InputTypeaheadComponentProps } from "./InputTypeaheadComponent"; import React from "react";
import "../../../../externals/jquery.typeahead.min.js"; import "../../../../externals/jquery.typeahead.min.js";
import { InputTypeaheadComponent, InputTypeaheadComponentProps } from "./InputTypeaheadComponent";
describe("inputTypeahead", () => { describe("inputTypeahead", () => {
it("renders <input />", () => { it("renders <input />", () => {
@@ -12,6 +12,12 @@ describe("inputTypeahead", () => {
], ],
placeholder: "placeholder", placeholder: "placeholder",
useTextarea: false, useTextarea: false,
onNewValue: () => {
("");
},
submitFct: () => {
("");
},
}; };
const wrapper = shallow(<InputTypeaheadComponent {...props} />); const wrapper = shallow(<InputTypeaheadComponent {...props} />);
@@ -26,6 +32,12 @@ describe("inputTypeahead", () => {
], ],
placeholder: "placeholder", placeholder: "placeholder",
useTextarea: true, useTextarea: true,
onNewValue: () => {
("");
},
submitFct: () => {
("");
},
}; };
const wrapper = shallow(<InputTypeaheadComponent {...props} />); const wrapper = shallow(<InputTypeaheadComponent {...props} />);
@@ -33,7 +33,7 @@ export interface InputTypeaheadComponentProps {
/** /**
* The current string value of <input> * The current string value of <input>
*/ */
onNewValue?: (newValue: string) => void; onNewValue: (newValue?: string) => void;
// inputValue?:ko.Observable<string>; // inputValue?:ko.Observable<string>;
/** /**
@@ -55,7 +55,7 @@ export interface InputTypeaheadComponentProps {
/** /**
* This function gets called when pressing ENTER on the input box * This function gets called when pressing ENTER on the input box
*/ */
submitFct?: (inputValue: string, selection: Item) => void; submitFct?: (inputValue?: string, selection?: Item) => void;
/** /**
* Typehead comes with a Search button that we normally remove. * Typehead comes with a Search button that we normally remove.
@@ -76,7 +76,7 @@ export interface InputTypeaheadComponentProps {
interface InputTypeaheadComponentState { interface InputTypeaheadComponentState {
isSuggestionVisible: boolean; isSuggestionVisible: boolean;
selectedChoice: Item; selectedChoice?: Item;
filteredChoices: Item[]; filteredChoices: Item[];
} }
@@ -96,21 +96,21 @@ export class InputTypeaheadComponent extends React.Component<
}; };
} }
private onRenderCell = (item: Item): JSX.Element => { private onRenderCell = (item?: Item): JSX.Element => {
return ( return (
<div className="input-typeahead-chocies-container" onClick={() => this.onChoiceClick(item)}> <div className="input-typeahead-chocies-container" onClick={() => this.onChoiceClick(item)}>
<p className="choice-caption">{item.caption}</p> <p className="choice-caption">{item?.caption}</p>
<span>{item.value}</span> <span>{item?.value}</span>
</div> </div>
); );
}; };
private onChoiceClick = (item: Item): void => { private onChoiceClick = (item?: Item): void => {
this.props.onNewValue(item.caption); this.props.onNewValue(item?.caption);
this.setState({ isSuggestionVisible: false, selectedChoice: item }); this.setState({ isSuggestionVisible: false, selectedChoice: item });
}; };
private handleChange = (value: string): void => { private handleChange = (value?: string): void => {
if (!value) { if (!value) {
this.setState({ isSuggestionVisible: true }); this.setState({ isSuggestionVisible: true });
} }
@@ -130,7 +130,7 @@ export class InputTypeaheadComponent extends React.Component<
} }
}; };
private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => { private filterChoiceByValue = (choices: Item[], searchKeyword?: string): Item[] => {
return choices.filter((choice) => return choices.filter((choice) =>
// @ts-ignore // @ts-ignore
Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase())) Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase()))
@@ -138,7 +138,7 @@ export class InputTypeaheadComponent extends React.Component<
}; };
public render(): JSX.Element { public render(): JSX.Element {
const { defaultValue, useTextarea, placeholder, onNewValue } = this.props; const { defaultValue, useTextarea, placeholder, onNewValue, submitFct } = this.props;
const { isSuggestionVisible, selectedChoice, filteredChoices } = this.state; const { isSuggestionVisible, selectedChoice, filteredChoices } = this.state;
const theme = getTheme(); const theme = getTheme();
@@ -185,7 +185,7 @@ export class InputTypeaheadComponent extends React.Component<
styles={iconButtonStyles} styles={iconButtonStyles}
iconProps={searchIcon} iconProps={searchIcon}
ariaLabel="Search Button" ariaLabel="Search Button"
onClick={() => this.props.submitFct(defaultValue, selectedChoice)} onClick={() => submitFct && submitFct(defaultValue, selectedChoice)}
/> />
)} )}
</Stack> </Stack>
+2
View File
@@ -8,6 +8,8 @@
"noUnusedParameters": true "noUnusedParameters": true
}, },
"files": [ "files": [
"./src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx",
"./src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.test.tsx",
"./src/AuthType.ts", "./src/AuthType.ts",
"./src/Bindings/ReactBindingHandler.ts", "./src/Bindings/ReactBindingHandler.ts",
"./src/Common/ArrayHashMap.ts", "./src/Common/ArrayHashMap.ts",