Skip to content

[react]: improve props and state type safety on Component #26813

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paulvanbrenk merged 2 commits into from
Jun 26, 2018
Merged

[react]: improve props and state type safety on Component #26813

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
542f3c0
feat(react): improve props and state typesafety on Component
Hotell Jun 25, 2018
98f3e2f
fix: apply new state/props type safety constraints on all dependand p…
Hotell Jun 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion types/create-react-class/create-react-class-tests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ const ClassicComponent: React.ClassicComponentClass<Props> = createReactClass<Pr
shouldComponentUpdate(this: React.ClassicComponent<Props, State>, nextProps, nextState) {
const newFoo: string = nextProps.foo;
const newBar: number = nextState.bar;
return newFoo !== this.props.foo && newBar !== this.state.bar;
return newFoo !== this.props.foo && newBar !== this.state!.bar;
},
statics: {
test: 1
Expand Down
254 changes: 120 additions & 134 deletions types/draft-js/draft-js-tests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Map } from "immutable";

import {
ContentBlock,
Expand Down Expand Up @@ -48,154 +47,141 @@ class HandleSpan extends React.Component {
}

class RichEditorExample extends React.Component<{}, { editorState: EditorState }> {
constructor() {
super({});

const sampleMarkup =
'<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
'<a href="http://www.facebook.com">Example link</a><br /><br/ >' +
'<img src="image.png" height="112" width="200" />';
const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap,
);
const decorator = new CompositeDecorator([{
strategy: (
block: ContentBlock,
callback: (start: number, end: number) => void,
contentState: ContentState
) => {
const text = block.getText();
let matchArr, start;
while ((matchArr = HANDLE_REGEX.exec(text)) !== null) {
start = matchArr.index;
callback(start, start + matchArr[0].length);
static initState() {
const sampleMarkup =
'<b>Bold text</b>, <i>Italic text</i><br/ ><br />' +
'<a href="http://www.facebook.com">Example link</a><br /><br/ >' +
'<img src="image.png" height="112" width="200" />';
const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(blocksFromHTML.contentBlocks, blocksFromHTML.entityMap);
const decorator = new CompositeDecorator([
{
strategy: (
block: ContentBlock,
callback: (start: number, end: number) => void,
contentState: ContentState
) => {
const text = block.getText();
let matchArr, start;
while ((matchArr = HANDLE_REGEX.exec(text)) !== null) {
start = matchArr.index;
callback(start, start + matchArr[0].length);
}
},
component: HandleSpan
}
]);
return { editorState: EditorState.createWithContent(state, decorator) };
}
state = RichEditorExample.initState()

onChange: (editorState: EditorState) => void = (editorState: EditorState) => this.setState({ editorState });

keyBindingFn(e: SyntheticKeyboardEvent): string {
if (e.keyCode === KEYCODES.ENTER) {
const { editorState } = this.state;
const contentState = editorState.getCurrentContent();
const selectionState = editorState.getSelection();

// only split headers into header and unstyled if we press 'Enter'
// at the end of a header (without text selected)
if (selectionState.isCollapsed()) {
const endKey = selectionState.getEndKey();
const endOffset = selectionState.getEndOffset();
const endBlock = contentState.getBlockForKey(endKey);
if (isHeaderBlock(endBlock) && endOffset === endBlock.getText().length) {
return SPLIT_HEADER_BLOCK;
}
}
}
},
component: HandleSpan,
}]);
this.state = { editorState: EditorState.createWithContent(state, decorator) };
}

onChange: (editorState: EditorState) => void = (editorState: EditorState) => this.setState({ editorState });

keyBindingFn(e: SyntheticKeyboardEvent): string {
if (e.keyCode === KEYCODES.ENTER) {
const { editorState } = this.state;
const contentState = editorState.getCurrentContent();
const selectionState = editorState.getSelection();

// only split headers into header and unstyled if we press 'Enter'
// at the end of a header (without text selected)
if (selectionState.isCollapsed()) {
const endKey = selectionState.getEndKey();
const endOffset = selectionState.getEndOffset();
const endBlock = contentState.getBlockForKey(endKey);
if (isHeaderBlock(endBlock) && endOffset === endBlock.getText().length) {
return SPLIT_HEADER_BLOCK;
}
}
return getDefaultKeyBinding(e);
}

return getDefaultKeyBinding(e);
}
handleKeyCommand = (command: string, editorState: EditorState) => {
if (command === SPLIT_HEADER_BLOCK) {
this.onChange(this.splitHeaderToNewBlock());
return 'handled';
}

handleKeyCommand = (command: string, editorState: EditorState) => {
if (command === SPLIT_HEADER_BLOCK) {
this.onChange(this.splitHeaderToNewBlock());
return 'handled';
}
const newState = RichUtils.handleKeyCommand(editorState, command);

const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
this.onChange(newState);
return 'handled';
}

if (newState) {
this.onChange(newState);
return "handled";
}
return 'not-handled';
};

return "not-handled";
}
toggleBlockType: (blockType: string) => void = (blockType: string) => {
this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType));
};

toggleBlockType: (blockType: string) => void = (blockType: string) => {
this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType));
}
toggleInlineStyle: (inlineStyle: string) => void = (inlineStyle: string) => {
this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle));
};

toggleInlineStyle: (inlineStyle: string) => void = (inlineStyle: string) => {
this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle));
}
splitHeaderToNewBlock(): EditorState {
const { editorState } = this.state;
const selection = editorState.getSelection();

splitHeaderToNewBlock(): EditorState {
const { editorState } = this.state;
const selection = editorState.getSelection();

// Add a new block after the cursor
const contentWithBlock = Modifier.splitBlock(
editorState.getCurrentContent(),
selection,
);

// Change the new block type to be normal 'unstyled' text,
const newBlock = contentWithBlock.getBlockAfter(selection.getEndKey());
const contentWithUnstyledBlock = Modifier.setBlockType(
contentWithBlock,
SelectionState.createEmpty(newBlock.getKey()),
'unstyled',
);

// push the new state with 'insert-characters' to preserve the undo/redo stack
const stateWithNewline = EditorState.push(
editorState,
contentWithUnstyledBlock,
'insert-characters'
);

// manually move the cursor to the next line (as expected)
const nextState = EditorState.forceSelection(
stateWithNewline,
SelectionState.createEmpty(newBlock.getKey()),
);

return nextState;
}
// Add a new block after the cursor
const contentWithBlock = Modifier.splitBlock(editorState.getCurrentContent(), selection);

render(): React.ReactElement<{}> {
// If the user changes block type before entering any text, we can
// either style the placeholder or hide it. Let's just hide it now.
let className = 'RichEditor-editor';
var contentState = this.state.editorState.getCurrentContent();
if (!contentState.hasText()) {
if (contentState.getBlockMap().first().getType() !== 'unstyled') {
className += ' RichEditor-hidePlaceholder';
}
// Change the new block type to be normal 'unstyled' text,
const newBlock = contentWithBlock.getBlockAfter(selection.getEndKey());
const contentWithUnstyledBlock = Modifier.setBlockType(
contentWithBlock,
SelectionState.createEmpty(newBlock.getKey()),
'unstyled'
);

// push the new state with 'insert-characters' to preserve the undo/redo stack
const stateWithNewline = EditorState.push(editorState, contentWithUnstyledBlock, 'insert-characters');

// manually move the cursor to the next line (as expected)
const nextState = EditorState.forceSelection(stateWithNewline, SelectionState.createEmpty(newBlock.getKey()));

return nextState;
}

return (
<div className="RichEditor-root">
<BlockStyleControls
editorState={this.state.editorState}
onToggle={this.toggleBlockType}
/>
<InlineStyleControls
editorState={this.state.editorState}
onToggle={this.toggleInlineStyle}
/>
<div className={className}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={this.state.editorState}
keyBindingFn={this.keyBindingFn}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
placeholder="Tell a story..."
ref="editor"
spellCheck={true}
/>
</div>
</div>
);
render(): React.ReactElement<{}> {
// If the user changes block type before entering any text, we can
// either style the placeholder or hide it. Let's just hide it now.
let className = 'RichEditor-editor';
var contentState = this.state.editorState.getCurrentContent();
if (!contentState.hasText()) {
if (
contentState
.getBlockMap()
.first()
.getType() !== 'unstyled'
) {
className += ' RichEditor-hidePlaceholder';
}
}

return (
<div className="RichEditor-root">
<BlockStyleControls editorState={this.state.editorState} onToggle={this.toggleBlockType} />
<InlineStyleControls editorState={this.state.editorState} onToggle={this.toggleInlineStyle} />
<div className={className}>
<Editor
blockStyleFn={getBlockStyle}
customStyleMap={styleMap}
editorState={this.state.editorState}
keyBindingFn={this.keyBindingFn}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
placeholder="Tell a story..."
ref="editor"
spellCheck={true}
/>
</div>
</div>
);
}
}

// Custom overrides for "code" style.
Expand Down
10 changes: 3 additions & 7 deletions types/expo__vector-icons/expo__vector-icons-tests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,13 +41,9 @@ class Example extends React.Component {
}

class TabTest extends React.Component<{}, { selectedTab: string }> {
constructor() {
super({});

this.state = {
selectedTab: 'tab1'
};
}
state = {
selectedTab: 'tab1'
};

render() {
return (
Expand Down
43 changes: 18 additions & 25 deletions types/fixed-data-table-2/fixed-data-table-2-tests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,15 @@ interface MyTable3State {
}

class MyTable3 extends React.Component<{}, MyTable3State> {
constructor(props: {}) {
super(props);

this.state = {
myTableData: [
{ name: "Rylan" },
{ name: "Amelia" },
{ name: "Estevan" },
{ name: "Florence" },
{ name: "Tressa" },
]
};
}
state = {
myTableData: [
{ name: "Rylan" },
{ name: "Amelia" },
{ name: "Estevan" },
{ name: "Florence" },
{ name: "Tressa" },
]
};

render() {
return (
Expand Down Expand Up @@ -130,18 +126,15 @@ interface MyTable4State {
}

class MyTable4 extends React.Component<{}, MyTable4State> {
constructor(props: {}) {
super(props);
this.state = {
tableData: [
{ name: "Rylan", email: "[email protected]" },
{ name: "Amelia", email: "[email protected]" },
{ name: "Estevan", email: "[email protected]" },
{ name: "Florence", email: "[email protected]" },
{ name: "Tressa", email: "[email protected]" }
]
};
}
state = {
tableData: [
{ name: "Rylan", email: "[email protected]" },
{ name: "Amelia", email: "[email protected]" },
{ name: "Estevan", email: "[email protected]" },
{ name: "Florence", email: "[email protected]" },
{ name: "Tressa", email: "[email protected]" }
]
};

render() {
return (
Expand Down
Loading