tomkp / react-split-pane

React split-pane component
https://tomkp.github.io/react-split-pane
MIT License
3.23k stars 409 forks source link

Help Wanted: TypeScript definitions #252

Open tomkp opened 6 years ago

tomkp commented 6 years ago

There have been a few issues raised around TypeScript - so it looks like I've obviously messed up the definitions.

I'd really love some help with this, if someone could put together a PR that fixes this!

These are some of the issues with TypeScript so far:

250 opened 2 days ago by kierson

246 by sixmen was closed 9 days ago

245 by Olian04 was closed 3 days ago

244 by rajkadiyala was closed 3 days ago

IKoshelev commented 6 years ago

Good day. I faced the issue identical to the ones described above. I took some inspiration from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-bootstrap/lib/PanelGroup.d.ts and came up with the following fix to the d.ts file, which solved my issues.

import * as Prefixer from 'inline-style-prefixer';
import * as React from 'react';

declare namespace SplitPane {

    export type Size = string | number;

    export interface Props {
        allowResize?: boolean;
        className?: string;
        primary?: 'first' | 'second';
        minSize?: Size;
        maxSize?: Size;
        defaultSize?: Size;
        size?: Size;
        split?: 'vertical' | 'horizontal';
        onDragStarted?: () => void;
        onDragFinished?: (newSize: number) => void;
        onChange?: (newSize: number) => void;
        onResizerClick?: (event: MouseEvent) => void;
        onResizerDoubleClick?: (event: MouseEvent) => void;
        prefixer?: Prefixer;
        style?: React.CSSProperties;
        resizerStyle?: React.CSSProperties;
        paneStyle?: React.CSSProperties;
        pane1Style?: React.CSSProperties;
        pane2Style?: React.CSSProperties;
        resizerClassName?: string;
        step?: number;
    }

    export interface State {
        active: boolean;
        resized: boolean;
    }
}

declare class SplitPane extends React.Component<SplitPane.Props, SplitPane.State> {
    constructor();

    onMouseDown(event: MouseEvent): void;

    onTouchStart(event: TouchEvent): void;

    onMouseMove(event: MouseEvent): void;

    onTouchMove(event: TouchEvent): void;

    onMouseUp(): void;

    setSize(props: SplitPane.Props, state: SplitPane.State): void;

    static defaultProps: SplitPane.Props;
}

export = SplitPane;

imported as import * as SplitPane from 'react-split-pane'

klappar commented 6 years ago

@IKoshelev Could you provide a PR for that?