dabeng / react-orgchart

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
MIT License
131 stars 112 forks source link

react typescript的环境支持 #31

Open qingzinai opened 3 years ago

qingzinai commented 3 years ago

请问有对ts编写react的环境进行支持吗?ts环境下会报项目缺少类型检查,需要自己写描述文件

sixfourtwo commented 2 years ago

You can write a type declaration that look likes this, in a file ending with .d.ts :)

declare module '@dabeng/react-orgchart' {
    export = OrganizationChart;

    function OrganizationChart(props: IOrganizationChartProps): JSX.Element;

    interface IOrganizationChartProps {
        chartClass?: string,        // A css class to apply to the chart DOM node.
        containerClass?: string,    // Add an optional extra class name to .orgchart-container It could end up looking like class="orgchart-container xxx yyy".
        collapsible?: boolean,      // Allows expanding/collapsing the nodes.
        datasource: object,         // datasource usded to build out structure of orgchart.
        draggable?: boolean,        // Allows dragging/dropping the nodes to the hierarchy of chart.
        multipleSelect?: boolean,   // If true, user can select multiple nodes by mouse clicking.
        NodeTemplate?: Element,     // A Component that provides the node content Markup. This is a useful prop when you want to use your own styles and markup to create a custom orgchart node.
        onClickChart?: Function,    // A callback fired when the orgchart is clicking.
        onClickNode?: Function,     // A callback fired when the node is clicking.
        pan?: boolean,              // If true, the chart can be panned.
        zoom?: boolean,             // If true, the chart can be zoomed.
        zoominLimit?: number,       // Default: 7 User can zoom the chart at different scales(0.5~7).
        zoomoutLimit?: number,      // Default: 0.5 User can zoom the chart at different scales(0.5~7).
    }
}