mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-12-23 10:51:30 +00:00
Compare commits
1 Commits
fixed-tsst
...
fixed-inpu
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6b5e2618dd |
@@ -1,7 +1,7 @@
|
||||
import React from "react";
|
||||
import { shallow } from "enzyme";
|
||||
import { InputTypeaheadComponent, InputTypeaheadComponentProps } from "./InputTypeaheadComponent";
|
||||
import React from "react";
|
||||
import "../../../../externals/jquery.typeahead.min.js";
|
||||
import { InputTypeaheadComponent, InputTypeaheadComponentProps } from "./InputTypeaheadComponent";
|
||||
|
||||
describe("inputTypeahead", () => {
|
||||
it("renders <input />", () => {
|
||||
@@ -12,6 +12,12 @@ describe("inputTypeahead", () => {
|
||||
],
|
||||
placeholder: "placeholder",
|
||||
useTextarea: false,
|
||||
onNewValue: () => {
|
||||
("");
|
||||
},
|
||||
submitFct: () => {
|
||||
("");
|
||||
},
|
||||
};
|
||||
|
||||
const wrapper = shallow(<InputTypeaheadComponent {...props} />);
|
||||
@@ -26,6 +32,12 @@ describe("inputTypeahead", () => {
|
||||
],
|
||||
placeholder: "placeholder",
|
||||
useTextarea: true,
|
||||
onNewValue: () => {
|
||||
("");
|
||||
},
|
||||
submitFct: () => {
|
||||
("");
|
||||
},
|
||||
};
|
||||
|
||||
const wrapper = shallow(<InputTypeaheadComponent {...props} />);
|
||||
|
||||
@@ -33,7 +33,7 @@ export interface InputTypeaheadComponentProps {
|
||||
/**
|
||||
* The current string value of <input>
|
||||
*/
|
||||
onNewValue?: (newValue: string) => void;
|
||||
onNewValue: (newValue?: string) => void;
|
||||
// inputValue?:ko.Observable<string>;
|
||||
|
||||
/**
|
||||
@@ -55,7 +55,7 @@ export interface InputTypeaheadComponentProps {
|
||||
/**
|
||||
* 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.
|
||||
@@ -76,7 +76,7 @@ export interface InputTypeaheadComponentProps {
|
||||
|
||||
interface InputTypeaheadComponentState {
|
||||
isSuggestionVisible: boolean;
|
||||
selectedChoice: Item;
|
||||
selectedChoice?: 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 (
|
||||
<div className="input-typeahead-chocies-container" onClick={() => this.onChoiceClick(item)}>
|
||||
<p className="choice-caption">{item.caption}</p>
|
||||
<span>{item.value}</span>
|
||||
<p className="choice-caption">{item?.caption}</p>
|
||||
<span>{item?.value}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
private onChoiceClick = (item: Item): void => {
|
||||
this.props.onNewValue(item.caption);
|
||||
private onChoiceClick = (item?: Item): void => {
|
||||
this.props.onNewValue(item?.caption);
|
||||
this.setState({ isSuggestionVisible: false, selectedChoice: item });
|
||||
};
|
||||
|
||||
private handleChange = (value: string): void => {
|
||||
private handleChange = (value?: string): void => {
|
||||
if (!value) {
|
||||
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) =>
|
||||
// @ts-ignore
|
||||
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 {
|
||||
const { defaultValue, useTextarea, placeholder, onNewValue } = this.props;
|
||||
const { defaultValue, useTextarea, placeholder, onNewValue, submitFct } = this.props;
|
||||
const { isSuggestionVisible, selectedChoice, filteredChoices } = this.state;
|
||||
const theme = getTheme();
|
||||
|
||||
@@ -185,7 +185,7 @@ export class InputTypeaheadComponent extends React.Component<
|
||||
styles={iconButtonStyles}
|
||||
iconProps={searchIcon}
|
||||
ariaLabel="Search Button"
|
||||
onClick={() => this.props.submitFct(defaultValue, selectedChoice)}
|
||||
onClick={() => submitFct && submitFct(defaultValue, selectedChoice)}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
|
||||
@@ -12,7 +12,7 @@ export interface GremlinSimpleClientParameters {
|
||||
password: string;
|
||||
successCallback: (result: Result) => void;
|
||||
progressCallback: (result: Result) => void;
|
||||
failureCallback: (result: Result | null, error: string) => void;
|
||||
failureCallback: (result: Result, error: string) => void;
|
||||
infoCallback: (msg: string) => void;
|
||||
}
|
||||
|
||||
@@ -62,15 +62,14 @@ export class GremlinSimpleClient {
|
||||
private static readonly requestChargeHeader = "x-ms-request-charge";
|
||||
|
||||
public params: GremlinSimpleClientParameters;
|
||||
private ws: WebSocket | undefined;
|
||||
private protocols: string | string[];
|
||||
private ws: WebSocket;
|
||||
|
||||
public requestsToSend: { [requestId: string]: GremlinRequestMessage };
|
||||
public pendingRequests: { [requestId: string]: GremlinRequestMessage };
|
||||
|
||||
constructor(params: GremlinSimpleClientParameters) {
|
||||
this.params = params;
|
||||
this.ws = undefined;
|
||||
|
||||
this.pendingRequests = {};
|
||||
this.requestsToSend = {};
|
||||
}
|
||||
@@ -118,7 +117,7 @@ export class GremlinSimpleClient {
|
||||
}
|
||||
}
|
||||
|
||||
public decodeMessage(msg: MessageEvent): GremlinResponseMessage | null {
|
||||
public decodeMessage(msg: MessageEvent): GremlinResponseMessage {
|
||||
if (msg.data === null) {
|
||||
return null;
|
||||
}
|
||||
@@ -281,7 +280,7 @@ export class GremlinSimpleClient {
|
||||
|
||||
public static utf8ToB64(utf8Str: string) {
|
||||
return btoa(
|
||||
encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (_match, p1) {
|
||||
encodeURIComponent(utf8Str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
|
||||
return String.fromCharCode(parseInt(p1, 16));
|
||||
})
|
||||
);
|
||||
@@ -306,7 +305,7 @@ export class GremlinSimpleClient {
|
||||
return binaryMessage;
|
||||
}
|
||||
|
||||
private onOpen(_event: any) {
|
||||
private onOpen(event: any) {
|
||||
this.executeRequestsToSend();
|
||||
}
|
||||
|
||||
@@ -349,6 +348,6 @@ export class GremlinSimpleClient {
|
||||
|
||||
private sendGremlinMessage(gremlinRequestMessage: GremlinRequestMessage) {
|
||||
const gremlinFrame = GremlinSimpleClient.buildGremlinMessage(gremlinRequestMessage);
|
||||
this.ws && this.ws.send(gremlinFrame);
|
||||
this.ws.send(gremlinFrame);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
"noUnusedParameters": true
|
||||
},
|
||||
"files": [
|
||||
"./src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts",
|
||||
"./src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx",
|
||||
"./src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.test.tsx",
|
||||
"./src/AuthType.ts",
|
||||
"./src/Bindings/ReactBindingHandler.ts",
|
||||
"./src/Common/ArrayHashMap.ts",
|
||||
|
||||
Reference in New Issue
Block a user