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 diff --git a/packages/E2ETest/app/Consts.ts b/packages/E2ETest/app/Consts.ts index f29d3cfc1a2..c6e0246d04a 100644 --- a/packages/E2ETest/app/Consts.ts +++ b/packages/E2ETest/app/Consts.ts @@ -14,6 +14,7 @@ export const TEXTINPUT_TESTPAGE = 'TextInputTestPage'; export const TEXTINPUT_ON_TEXTINPUT = 'TextInput'; export const PREVTEXT_ON_TEXTINPUT = 'PrevTextInput'; export const ML_TEXTINPUT_ON_TEXTINPUT = 'TextInputMultiLine'; +export const CAP_TEXTINPUT_ON_TEXTINPUT = 'TextInputAutoCap'; // LoginTestPage export const LOGIN_TESTPAGE = 'LoginTestPage'; diff --git a/packages/E2ETest/app/TextInputTestPage.tsx b/packages/E2ETest/app/TextInputTestPage.tsx index ffc92034ac6..f8b64e7a71b 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, PREVTEXT_ON_TEXTINPUT} from './Consts'; +import {TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT, PREVTEXT_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 f43ef9d9f75..72a38f00879 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, PREVTEXT_ON_TEXTINPUT, } from '../../app/Consts'; @@ -28,6 +29,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'); @@ -46,6 +51,10 @@ class TextInputTestPage extends BasePage { return this.multiLineTextInput.getText(); } + getAutoCapTextInput() { + return this.autoCapTextInput.getText(); + } + private get textInput() { return By(TEXTINPUT_ON_TEXTINPUT); } @@ -57,6 +66,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 c6b71142ac7..170495522ea 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 then press Enter key', () => { TextInputTestPage.clearAndEnterOnTextInput('abc'); assert.equal( 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'} /> + ()) { + 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") { @@ -628,7 +640,8 @@ folly::dynamic TextInputViewManager::GetNativeProps() const { "selectTextOnFocus", "boolean")("spellCheck", "boolean")( "text", "string")("mostRecentEventCount", "int")( "secureTextEntry", "boolean")("keyboardType", "string")( - "contextMenuHidden", "boolean")("caretHidden", "boolean")); + "contextMenuHidden", "boolean")("caretHidden", "boolean")( + "autoCapitalize", "string")); return props; }