# XlReactWidgetPatchSample

This element helps you present a file content in the panel with a possibility to select the line

### Summary

* [Exports](#exports)
* [Playground](#playground)
* [Properties](#properties)
* [Example](#example)


### Exports
```
- XlReactWidgetPatchSample
```

### Playground

* [Widget Patch Sample](https://xebialabs.github.io/xl-react-components/kitchen-sink.html/#/widget/widgetPatchSample)

### Properties

- **headerLabel** - The displayed text on the grayed header over the content
- **model** - The displayed text in the panel.  
- **onLineSelected** - Function which is triggered when line is selected. The parameter contains the array of 
selected lines. That component at this moment of time allows only a single line selection. The line itself is 
represented by ID of the node.
- **selectedLines** - The lines which are highlighted in the component. You are responsible as a user of this component 
to provide only a single line, there is no check that array contains only single line. The line itself is represented by
ID of the node.

### Example

```js
    const state = {selectedLines: []};

    const headerLabel = 'Sample';
    const model = 'file content\nline 2\n line3';
    handleLineSelected = (selectedLines) => {
        this.setState(selectedLines);  
    };

    <XlReactWidgetPatchSample
        headerLabel={headerLabel}
        model={model}
        onLineSelected={this.handleLineSelected}
        selectedLines={state.selectedLines}
    />
```
