mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-06-13 16:07:26 +01:00
fixed tsstrict of InputTypeHeadComponent.tsx
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user