# XlReactWidgetPatchEditor

That components allows to visually see the difference after applying a bunch of Yaml or Json patches on a sample file. 

### Summary

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

### Exports

```
- XlReactWidgetPatchEditor
```

### Playground

[Patch editor](https://xebialabs.github.io/xl-react-components/kitchen-sink.html#/widget/widgetPatchEditor)

### Properties

- **controlButtonsTooltipMessages** - You can provide your custom messages for control buttons
 (modify and  remove patch).
 For that you need to provide an object only with those fields which you would like to override. Example:
 `{modifyPatchTooltip: '', removePatchTooltip: '''}`. 
    Default values are:
      modifyPatchTooltip - 'Modify patch'
      removePatchTooltip - 'Remove patch'
 
- **editableSection** - The displayed text on the right panel, which user can modify and use it as a patch entry.
- **focusOnEditorPanel** - If set to `true`, focuses the cursor on the right panel after the component was mounted.
- **handleEditableSelectionChange** - That function is triggered when user changes text on the right panel.
- **handleLineSelected** - That function is triggered when user clicks on another line. 
- **handleModifyingPatch** - That function is triggered when user clicks on 'modify' control button.
- **handleRemovingPatch** - That function is triggered when user clicks on 'remove' control button.
- **model** - The content of the file which will be displayed on the left panel and user can't modify it.
- **onPushPatchChange** - That function is triggered with complete patch which user accepted.
- **pristine** - Represents the state when user made changes on the right panel.
- **selectedAction** - That state represents which action currently is selected by user. Depending on that state
the corresponding button will be highlighted and the color of selected line on the left panel will be different. 
For "modify" - blue color and "remove" - red color.
- **selectedLines** - That state represents the lines which has to be highlighted on the left panel. Based on this 
information the request sent to the API to get the snippet of the code for right panel.
- **selectedPath** - That state is displayed on the header of the editor panel to help user to identify which path is 
selected at the time being.  
- **type** - The type of the file (json, yaml, etc.). That information is required for VS code editor (right panel) to 
properly highlight the syntax of the code  and other help.  

### Example

Example of using the component:

```jsx 

    // i.e. initial state
    const state = {
        editableSection: 'apiVersion: v1',
        fileType: 'yaml',
        model: '
            apiVersion: v1
            kind: Pod
            metadata:
              name: pod-with-sidecar
              ...
        ',
        selectedAction: 'modify',
        selectedLines: ['1'],
        selectedPath: '/'
    };

    const onModifyingPatch = () => this.setState({selectedAction: 'modify'});
    const onRemovingPatch = () => this.setState({selectedAction: 'remove'});
    
    const onLineSelected = () => {
         /** 
             That function will be called only if the panel is pristine. That means if you made any changes on the 
             right panel you'll be asked for applying or rejecting your changes.  
             
             Here you add a code which will:
              * call backend to get the selected path and snippet displayed on the right panel,
               so you can update such fields as: selectedPath and editableSection
              * update selected line to a new one. 
         */
    };  

    <XlReactWidgetPatchEditor
        editableSection={this.state.editableSection}
        handleEditableSelectionChange={onModelChange}
        handleLineSelected={onLineSelected}
        handleModifyingPatch={onModifyingPatch}
        handleRemovingPatch={onRemovingPatch}
        model={this.state.model}
        selectedAction={this.state.selectedAction}
        selectedLines={this.state.selectedLines}
        selectedPath={this.state.selectedPath}
        type={this.state.fileType}
    />;

```
