Skip to content

Commit

Permalink
refactor: replace .bind calls with class binds
Browse files Browse the repository at this point in the history
  • Loading branch information
@darthtrevino
darthtrevino committed Nov 9, 2018
1 parent 76cca25 commit a403c42
Show file tree
Hide file tree
Showing 11 changed files with 90 additions and 135 deletions.
4 changes: 2 additions & 2 deletions packages/dnd-core/src/DragDropManagerImpl.ts
View file
Expand Up @@ -33,7 +33,7 @@ export default class DragDropManagerImpl<Context>
)
this.backend = createBackend(this)

store.subscribe(this.handleRefCountChange.bind(this))
store.subscribe(this.handleRefCountChange)
}

public getContext() {
Expand Down Expand Up @@ -83,7 +83,7 @@ export default class DragDropManagerImpl<Context>
this.store.dispatch(action)
}

private handleRefCountChange() {
private handleRefCountChange = () => {
const shouldSetUp = this.store.getState().refCount > 0
if (shouldSetUp && !this.isSetUp) {
this.backend.setup()
Expand Down
13 changes: 4 additions & 9 deletions packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/BoxDragPreview.tsx
View file
Expand Up @@ -19,15 +19,10 @@ export default class BoxDragPreview extends React.PureComponent<
BoxDragPreviewProps,
BoxDragPreviewState
> {
private interval: any

constructor(props: BoxDragPreviewProps) {
super(props)
this.tick = this.tick.bind(this)
this.state = {
tickTock: false,
}
public state = {
tickTock: false,
}
private interval: any

public componentDidMount() {
this.interval = setInterval(this.tick, 500)
Expand All @@ -48,7 +43,7 @@ export default class BoxDragPreview extends React.PureComponent<
)
}

private tick() {
private tick = () => {
this.setState({
tickTock: !this.state.tickTock,
})
Expand Down
21 changes: 5 additions & 16 deletions packages/documentation-examples/src/02 Drag Around/Custom Drag Layer/index.tsx
View file
Expand Up @@ -10,20 +10,9 @@ export default class DragAroundCustomDragLayer extends React.Component<
{},
DragAroundCustomDragLayerState
> {
constructor(props: {}) {
super(props)

this.handleSnapToGridAfterDropChange = this.handleSnapToGridAfterDropChange.bind(
this,
)
this.handleSnapToGridWhileDraggingChange = this.handleSnapToGridWhileDraggingChange.bind(
this,
)

this.state = {
snapToGridAfterDrop: false,
snapToGridWhileDragging: false,
}
public state = {
snapToGridAfterDrop: false,
snapToGridWhileDragging: false,
}

public render() {
Expand Down Expand Up @@ -58,13 +47,13 @@ export default class DragAroundCustomDragLayer extends React.Component<
)
}

private handleSnapToGridAfterDropChange() {
private handleSnapToGridAfterDropChange = () => {
this.setState({
snapToGridAfterDrop: !this.state.snapToGridAfterDrop,
})
}

private handleSnapToGridWhileDraggingChange() {
private handleSnapToGridWhileDraggingChange = () => {
this.setState({
snapToGridWhileDragging: !this.state.snapToGridWhileDragging,
})
Expand Down
10 changes: 3 additions & 7 deletions packages/documentation-examples/src/02 Drag Around/Naive/index.tsx
View file
Expand Up @@ -9,12 +9,8 @@ export default class DragAroundNaive extends React.Component<
{},
DragAroundNaiveState
> {
constructor(props: {}) {
super(props)
this.handleHideSourceClick = this.handleHideSourceClick.bind(this)
this.state = {
hideSourceOnDrag: true,
}
public state = {
hideSourceOnDrag: true,
}

public render() {
Expand All @@ -38,7 +34,7 @@ export default class DragAroundNaive extends React.Component<
)
}

private handleHideSourceClick() {
private handleHideSourceClick = () => {
this.setState({
hideSourceOnDrag: !this.state.hideSourceOnDrag,
})
Expand Down
75 changes: 35 additions & 40 deletions packages/documentation-examples/src/04 Sortable/Cancel on Drop Outside/index.tsx
View file
Expand Up @@ -23,42 +23,37 @@ export interface ContainerState {
}

class Container extends React.Component<ContainerProps, ContainerState> {
constructor(props: ContainerProps) {
super(props)
this.moveCard = this.moveCard.bind(this)
this.findCard = this.findCard.bind(this)
this.state = {
cards: [
{
id: 1,
text: 'Write a cool JS library',
},
{
id: 2,
text: 'Make it generic enough',
},
{
id: 3,
text: 'Write README',
},
{
id: 4,
text: 'Create some examples',
},
{
id: 5,
text: 'Spam in Twitter and IRC to promote it',
},
{
id: 6,
text: '???',
},
{
id: 7,
text: 'PROFIT',
},
],
}
public state = {
cards: [
{
id: 1,
text: 'Write a cool JS library',
},
{
id: 2,
text: 'Make it generic enough',
},
{
id: 3,
text: 'Write README',
},
{
id: 4,
text: 'Create some examples',
},
{
id: 5,
text: 'Spam in Twitter and IRC to promote it',
},
{
id: 6,
text: '???',
},
{
id: 7,
text: 'PROFIT',
},
],
}

public render() {
Expand All @@ -70,7 +65,7 @@ class Container extends React.Component<ContainerProps, ContainerState> {
{cards.map(card => (
<Card
key={card.id}
id={card.id}
id={`${card.id}`}
text={card.text}
moveCard={this.moveCard}
findCard={this.findCard}
Expand All @@ -80,7 +75,7 @@ class Container extends React.Component<ContainerProps, ContainerState> {
)
}

private moveCard(id: string, atIndex: number) {
private moveCard = (id: string, atIndex: number) => {
const { card, index } = this.findCard(id)
this.setState(
update(this.state, {
Expand All @@ -91,9 +86,9 @@ class Container extends React.Component<ContainerProps, ContainerState> {
)
}

private findCard(id: string) {
private findCard = (id: string) => {
const { cards } = this.state
const card = cards.filter(c => c.id === id)[0]
const card = cards.filter(c => `${c.id}` === id)[0]

return {
card,
Expand Down
70 changes: 33 additions & 37 deletions packages/documentation-examples/src/04 Sortable/Simple/index.tsx
View file
Expand Up @@ -14,42 +14,38 @@ export interface ContainerState {
}

export default class Container extends React.Component<{}, ContainerState> {
constructor(props: {}) {
super(props)
this.moveCard = this.moveCard.bind(this)
this.state = {
cards: [
{
id: 1,
text: 'Write a cool JS library',
},
{
id: 2,
text: 'Make it generic enough',
},
{
id: 3,
text: 'Write README',
},
{
id: 4,
text: 'Create some examples',
},
{
id: 5,
text:
'Spam in Twitter and IRC to promote it (note that this element is taller than the others)',
},
{
id: 6,
text: '???',
},
{
id: 7,
text: 'PROFIT',
},
],
}
public state = {
cards: [
{
id: 1,
text: 'Write a cool JS library',
},
{
id: 2,
text: 'Make it generic enough',
},
{
id: 3,
text: 'Write README',
},
{
id: 4,
text: 'Create some examples',
},
{
id: 5,
text:
'Spam in Twitter and IRC to promote it (note that this element is taller than the others)',
},
{
id: 6,
text: '???',
},
{
id: 7,
text: 'PROFIT',
},
],
}

public render() {
Expand All @@ -70,7 +66,7 @@ export default class Container extends React.Component<{}, ContainerState> {
)
}

private moveCard(dragIndex: number, hoverIndex: number) {
private moveCard = (dragIndex: number, hoverIndex: number) => {
const { cards } = this.state
const dragCard = cards[dragIndex]

Expand Down
7 changes: 2 additions & 5 deletions packages/documentation-examples/src/04 Sortable/Stress Test/Container.tsx
View file
Expand Up @@ -20,9 +20,6 @@ export default class Container extends React.Component<{}, ContainerState> {
constructor(props: {}) {
super(props)

this.moveCard = this.moveCard.bind(this)
this.drawFrame = this.drawFrame.bind(this)

const cardsById: { [key: string]: any } = {}
const cardsByIndex = []

Expand Down Expand Up @@ -70,15 +67,15 @@ export default class Container extends React.Component<{}, ContainerState> {
}
}

private drawFrame() {
private drawFrame = () => {
const nextState = update(this.state, this.pendingUpdateFn)
this.setState(nextState)

this.pendingUpdateFn = undefined
this.requestedFrame = undefined
}

private moveCard(id: string, afterId: string) {
private moveCard = (id: string, afterId: string) => {
const { cardsById, cardsByIndex } = this.state

const card = cardsById[id]
Expand Down
8 changes: 2 additions & 6 deletions packages/documentation-examples/src/06 Other/Native Files/index.tsx
View file
Expand Up @@ -9,11 +9,7 @@ export interface ContainerState {
}

export default class Container extends React.Component<{}, ContainerState> {
constructor(props: {}) {
super(props)
this.handleFileDrop = this.handleFileDrop.bind(this)
this.state = { droppedFiles: [] }
}
public state = { droppedFiles: [] }

public render() {
const { FILE } = NativeTypes
Expand All @@ -27,7 +23,7 @@ export default class Container extends React.Component<{}, ContainerState> {
)
}

private handleFileDrop(item: any, monitor: DropTargetMonitor) {
private handleFileDrop = (item: any, monitor: DropTargetMonitor) => {
if (monitor) {
const droppedFiles = monitor.getItem().files
this.setState({ droppedFiles })
Expand Down
7 changes: 1 addition & 6 deletions packages/react-dnd/src/DragLayer.tsx
View file
Expand Up @@ -47,11 +47,6 @@ export default function DragLayer<Props, CollectedProps = {}>(
private unsubscribeFromStateChange: Unsubscribe | undefined
private ref: React.RefObject<any> = React.createRef()

constructor(props: Props) {
super(props)
this.handleChange = this.handleChange.bind(this)
}

public getDecoratedComponentInstance() {
invariant(
this.ref.current,
Expand Down Expand Up @@ -132,7 +127,7 @@ export default function DragLayer<Props, CollectedProps = {}>(
)
}

private handleChange() {
private handleChange = () => {
if (!this.isCurrentlyMounted) {
return
}
Expand Down
6 changes: 2 additions & 4 deletions packages/react-dnd/src/createSourceFactory.ts
View file
Expand Up @@ -50,9 +50,7 @@ export default function createSourceFactory<Props, DragObject = {}>(
private props: Props | null = null
private ref: React.RefObject<any> = createRef()

constructor(private monitor: DragSourceMonitor) {
this.beginDrag = this.beginDrag.bind(this)
}
constructor(private monitor: DragSourceMonitor) {}

public receiveProps(props: any) {
this.props = props
Expand Down Expand Up @@ -80,7 +78,7 @@ export default function createSourceFactory<Props, DragObject = {}>(
return spec.isDragging(this.props, this.monitor)
}

public beginDrag() {
public beginDrag = () => {
if (!this.props) {
return
}
Expand Down

0 comments on commit a403c42

Please sign in to comment.