maxmustermann/TypeScript
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Get completion of JSX attributes type when tag name is a property access expression

Browse source
This commit is contained in:
Kanchalai Tanglertsampan 2017-02-21 10:54:28 -08:00
parent ef25b25c1f
commit 0290e20b8e
2 changed files with 59 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/services/completions.ts
View file

@ -898,8 +898,8 @@ namespace ts.Completions {
return undefined;
}
const { parent, kind } = contextToken;
if (kind === SyntaxKind.DotToken) {
let parent = contextToken.parent;
if (contextToken.kind === SyntaxKind.DotToken) {
if (parent.kind === SyntaxKind.PropertyAccessExpression) {
node = (<PropertyAccessExpression>contextToken.parent).expression;
isRightOfDot = true;
@ -915,16 +915,24 @@ namespace ts.Completions {
}
}
else if (sourceFile.languageVariant === LanguageVariant.JSX) {
switch (contextToken.parent.kind) {
// <UI.Test /* completion position */ />
// If the tagname is a property access expression, we will then walk up to the top most of property access expression.
// Then, try to get a JSX container and its associated attributes type.
if (parent && parent.kind === SyntaxKind.PropertyAccessExpression) {
contextToken = parent;
parent = parent.parent;
}
switch (parent.kind) {
case SyntaxKind.JsxClosingElement:
if (kind === SyntaxKind.SlashToken) {
if (contextToken.kind === SyntaxKind.SlashToken) {
isStartingCloseTag = true;
location = contextToken;
}
break;
case SyntaxKind.BinaryExpression:
if (!((contextToken.parent as BinaryExpression).left.flags & NodeFlags.ThisNodeHasError)) {
if (!((parent as BinaryExpression).left.flags & NodeFlags.ThisNodeHasError)) {
// It has a left-hand side, so we're not in an opening JSX tag.
break;
}
@ -933,7 +941,7 @@ namespace ts.Completions {
case SyntaxKind.JsxSelfClosingElement:
case SyntaxKind.JsxElement:
case SyntaxKind.JsxOpeningElement:
if (kind === SyntaxKind.LessThanToken) {
if (contextToken.kind === SyntaxKind.LessThanToken) {
isRightOfOpenTag = true;
location = contextToken;
}
@ -1401,6 +1409,7 @@ namespace ts.Completions {
case SyntaxKind.LessThanSlashToken:
case SyntaxKind.SlashToken:
case SyntaxKind.Identifier:
case SyntaxKind.PropertyAccessExpression:
case SyntaxKind.JsxAttributes:
case SyntaxKind.JsxAttribute:
case SyntaxKind.JsxSpreadAttribute:

44
tests/cases/fourslash/tsxCompletion14.ts Normal file
View file

@ -0,0 +1,44 @@
/// <reference path='fourslash.ts' />
//@module: commonjs
//@jsx: preserve
//// declare module JSX {
//// interface Element { }
//// interface IntrinsicElements {
//// }
//// interface ElementAttributesProperty { props; }
//// }
//@Filename: exporter.tsx
//// export class Thing { props: { ONE: string; TWO: number } }
//// export module M {
//// export declare function SFCComp(props: { Three: number; Four: string }): JSX.Element;
//// }
//@Filename: file.tsx
//// import * as Exp from './exporter';
//// var x1 = <Exp.Thing /*1*/ />;
//// var x2 = <Exp.M.SFCComp /*2*/ />;
//// var x3 = <Exp.Thing /*3*/ ></Exp.Thing>;
//// var x4 = <Exp.M.SFCComp /*4*/ ></Exp.M.SFCComp>;
goTo.marker("1");
verify.completionListCount(2);
verify.completionListContains('ONE');
verify.completionListContains('TWO');
goTo.marker("2");
verify.completionListCount(2);
verify.completionListContains("Three");
verify.completionListContains("Four");
goTo.marker("3");
verify.completionListCount(2);
verify.completionListContains('ONE');
verify.completionListContains('TWO');
goTo.marker("4");
verify.completionListCount(2);
verify.completionListContains("Three");
verify.completionListContains("Four");