From ba8d6abb2b955bb89428fc717033cdb2af792837 Mon Sep 17 00:00:00 2001 From: Di Da Date: Mon, 14 Oct 2019 11:25:32 -0700 Subject: [PATCH 1/3] Support autoCapitalize Characters --- packages/E2ETest/app/Consts.ts | 3 ++- packages/E2ETest/app/TestPages.ts | 11 ++++++++--- packages/E2ETest/app/TextInputTestPage.tsx | 8 +++++++- packages/E2ETest/wdio/pages/TextInputTestPage.ts | 13 +++++++++++++ packages/E2ETest/wdio/test/testInput.spec.ts | 5 +++++ packages/playground/Samples/textinput.tsx | 5 +++++ vnext/ReactUWP/Views/TextInputViewManager.cpp | 13 ++++++++++++- 7 files changed, 52 insertions(+), 6 deletions(-) diff --git a/packages/E2ETest/app/Consts.ts b/packages/E2ETest/app/Consts.ts index 541fb2cb163..08fc61770d4 100644 --- a/packages/E2ETest/app/Consts.ts +++ b/packages/E2ETest/app/Consts.ts @@ -13,6 +13,7 @@ export const TEXTINPUT_TESTPAGE = 'TextInputTestPage'; export const TEXTINPUT_ON_TEXTINPUT = 'TextInput'; export const ML_TEXTINPUT_ON_TEXTINPUT = 'TextInputMultiLine'; +export const CAP_TEXTINPUT_ON_TEXTINPUT = 'TextInputAutoCap'; // LoginTestPage export const LOGIN_TESTPAGE = 'LoginTestPage'; @@ -23,4 +24,4 @@ export const LOGINRESULT_ON_LOGIN = 'Result'; export const SHOWPASSWORD_ON_LOGIN = 'ShowPassword'; // Accessibility -export const ACCESSBILITY_TESTPAGE = 'AccessiblityTestPage'; \ No newline at end of file +export const ACCESSBILITY_TESTPAGE = 'AccessiblityTestPage'; diff --git a/packages/E2ETest/app/TestPages.ts b/packages/E2ETest/app/TestPages.ts index ce6c40e4420..113fae5d2b7 100644 --- a/packages/E2ETest/app/TestPages.ts +++ b/packages/E2ETest/app/TestPages.ts @@ -6,7 +6,12 @@ import * as React from 'react'; import { TextInputTestPage } from './TextInputTestPage'; import { UnknownPage } from './UnknownPage'; -import { TEXTINPUT_TESTPAGE, UNKNOWN_TESTPAGE, LOGIN_TESTPAGE, ACCESSBILITY_TESTPAGE } from './Consts'; +import { + TEXTINPUT_TESTPAGE, + UNKNOWN_TESTPAGE, + LOGIN_TESTPAGE, + ACCESSBILITY_TESTPAGE, +} from './Consts'; import { LoginTestPage } from './LoginTestPage'; import { AccessibilityTestPage } from './AccessibilityTestPage'; @@ -30,13 +35,13 @@ const TestPages: ITestPage[] = [ { testId: ACCESSBILITY_TESTPAGE, description: 'Accessiblity Test Page', - content: AccessibilityTestPage + content: AccessibilityTestPage, }, { testId: UNKNOWN_TESTPAGE, description: 'Unknown Page', content: UnknownPage, - } + }, ]; export default TestPages; diff --git a/packages/E2ETest/app/TextInputTestPage.tsx b/packages/E2ETest/app/TextInputTestPage.tsx index 5dac4efc93c..8bf158a7a33 100644 --- a/packages/E2ETest/app/TextInputTestPage.tsx +++ b/packages/E2ETest/app/TextInputTestPage.tsx @@ -6,7 +6,7 @@ import React from 'react'; import {Text, TextInput, View} from 'react-native'; -import {TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT} from './Consts'; +import {TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT, CAP_TEXTINPUT_ON_TEXTINPUT} from './Consts'; interface ITextInputTestPageState { curText: string; @@ -73,6 +73,12 @@ export class TextInputTestPage extends React.Component< placeholder="MultiLine" multiline={true} /> + curText: {this.state.curText} prev: {this.state.prevText} diff --git a/packages/E2ETest/wdio/pages/TextInputTestPage.ts b/packages/E2ETest/wdio/pages/TextInputTestPage.ts index 782438703f6..7353abc4da9 100644 --- a/packages/E2ETest/wdio/pages/TextInputTestPage.ts +++ b/packages/E2ETest/wdio/pages/TextInputTestPage.ts @@ -7,6 +7,7 @@ import { BasePage, By } from './BasePage'; import { TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT, + CAP_TEXTINPUT_ON_TEXTINPUT, } from '../../app/Consts'; class TextInputTestPage extends BasePage { @@ -22,6 +23,10 @@ class TextInputTestPage extends BasePage { this.multiLineTextInput.setValue(text); } + clearAndTypeOnAutoCapTextInput(text: string) { + this.autoCapTextInput.setValue(text); + } + appendNewLineOnMLText(text: string) { this.multiLineTextInput.addValue('End'); this.multiLineTextInput.addValue('Enter'); @@ -36,6 +41,10 @@ class TextInputTestPage extends BasePage { return this.multiLineTextInput.getText(); } + getAutoCapTextInput() { + return this.autoCapTextInput.getText(); + } + private get textInput() { return By(TEXTINPUT_ON_TEXTINPUT); } @@ -43,6 +52,10 @@ class TextInputTestPage extends BasePage { private get multiLineTextInput() { return By(ML_TEXTINPUT_ON_TEXTINPUT); } + + private get autoCapTextInput() { + return By(CAP_TEXTINPUT_ON_TEXTINPUT); + } } export default new TextInputTestPage(); diff --git a/packages/E2ETest/wdio/test/testInput.spec.ts b/packages/E2ETest/wdio/test/testInput.spec.ts index cd6e56e80f0..59b75b5e739 100644 --- a/packages/E2ETest/wdio/test/testInput.spec.ts +++ b/packages/E2ETest/wdio/test/testInput.spec.ts @@ -23,6 +23,11 @@ describe('First', () => { assert.equal(TextInputTestPage.getTextInputText(), 'def'); }); + it('Type hello world on autoCap TextInput', () => { + TextInputTestPage.clearAndTypeOnAutoCapTextInput('hello world'); + assert.equal(TextInputTestPage.getAutoCapTextInput(), 'HELLO WORLD'); + }); + it('Type abc on multiline TextInput', () => { TextInputTestPage.clearAndTypeOnMLTextInput('abc'); assert.equal(TextInputTestPage.getMLTextInputText(), 'abc'); diff --git a/packages/playground/Samples/textinput.tsx b/packages/playground/Samples/textinput.tsx index 5766d0c2a27..595cd757a39 100644 --- a/packages/playground/Samples/textinput.tsx +++ b/packages/playground/Samples/textinput.tsx @@ -56,6 +56,11 @@ export default class Bootstrap extends React.Component<{}, any> { keyboardType="number-pad" placeholder={'number-pad keyboardType'} /> + Date: Mon, 14 Oct 2019 11:29:14 -0700 Subject: [PATCH 2/3] Change files --- ...t-native-windows-2019-10-14-11-29-13-autoCapital.json | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 change/react-native-windows-2019-10-14-11-29-13-autoCapital.json diff --git a/change/react-native-windows-2019-10-14-11-29-13-autoCapital.json b/change/react-native-windows-2019-10-14-11-29-13-autoCapital.json new file mode 100644 index 00000000000..d89fd99a9c0 --- /dev/null +++ b/change/react-native-windows-2019-10-14-11-29-13-autoCapital.json @@ -0,0 +1,9 @@ +{ + "type": "prerelease", + "comment": "Support autoCapitalize Characters", + "packageName": "react-native-windows", + "email": "dida@ntdev.microsoft.com", + "commit": "ba8d6abb2b955bb89428fc717033cdb2af792837", + "date": "2019-10-14T18:29:13.893Z", + "file": "D:\\react2\\react-native-windows\\change\\react-native-windows-2019-10-14-11-29-13-autoCapital.json" +} \ No newline at end of file From 909e4c864e0d087bab344f58a291d3502df06166 Mon Sep 17 00:00:00 2001 From: Di Da Date: Tue, 15 Oct 2019 10:07:08 -0700 Subject: [PATCH 3/3] Add check to make sure we can support TextBox.CharacterCasing property --- vnext/ReactUWP/Views/TextInputViewManager.cpp | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/vnext/ReactUWP/Views/TextInputViewManager.cpp b/vnext/ReactUWP/Views/TextInputViewManager.cpp index 24fe63dccb5..f39648bd8f0 100644 --- a/vnext/ReactUWP/Views/TextInputViewManager.cpp +++ b/vnext/ReactUWP/Views/TextInputViewManager.cpp @@ -564,15 +564,17 @@ void TextInputShadowNode::updateProperties(const folly::dynamic &&props) { textBox.ClearValue(winrt::TextBox::TextProperty()); } } else if (propertyName == "autoCapitalize") { - if (propertyValue.isString()) { - if (propertyValue.asString() == "characters") { - textBox.CharacterCasing(winrt::CharacterCasing::Upper); - } else { // anything else turns off autoCap (should be "None" but we - // don't support "words"/"senetences" yet) - textBox.CharacterCasing(winrt::CharacterCasing::Normal); - } - } else if (propertyValue.isNull()) - textBox.ClearValue(winrt::TextBox::CharacterCasingProperty()); + if (textBox.try_as()) { + if (propertyValue.isString()) { + if (propertyValue.asString() == "characters") { + textBox.CharacterCasing(winrt::CharacterCasing::Upper); + } else { // anything else turns off autoCap (should be "None" but + // we don't support "words"/"senetences" yet) + textBox.CharacterCasing(winrt::CharacterCasing::Normal); + } + } else if (propertyValue.isNull()) + textBox.ClearValue(winrt::TextBox::CharacterCasingProperty()); + } } } else { // Applicable properties for PasswordBox if (propertyName == "text") {