/**
 * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
 * under one or more contributor license agreements. See the NOTICE file
 * distributed with this work for additional information regarding copyright
 * ownership.
 *
 * Camunda licenses this file to you under the MIT; you may not use this file
 * except in compliance with the MIT License.
 */

import React, { PureComponent } from 'react';

import {
  Modal
} from '../../primitives';

import css from './View.less';


class View extends PureComponent {
  render() {
    const {
      shortcuts,
      onClose
    } = this.props;

    return (
      <Modal className={ css.View } onClose={ onClose }>
        <h2>Keyboard Shortcuts</h2>
        <p>
          The following special shortcuts can be used on opened diagrams.
        </p>
        <table>
          <tbody className="keyboard-shortcuts">
            {
              (shortcuts || []).map(s => {
                return <tr key={ s.id }>
                  <td>{ s.label }</td>
                  <td className="binding"><code>{ s.binding }</code></td>
                </tr>;
              })
            }
          </tbody>
        </table>
        <p>
          Find additional shortcuts on individual items in the application menu.
        </p>
      </Modal>
    );
  }

}

export default View;
@@ -672,24 +672,25 @@
  onClose %7D%3E%0A
+%0A
         %3Ch2%3E
@@ -690,35 +690,172 @@
    %3C
-h2%3EKeyboard Shortcuts%3C/h2%3E%0A
+Modal.Header%3E%0A          %3CModal.Title%3EKeyboard Shortcuts%3C/Modal.Title%3E%0A          %3CModal.Close onClick=%7B onClose %7D /%3E%0A        %3C/Modal.Header%3E%0A%0A        %3CModal.Body%3E%0A  
     
@@ -854,32 +854,34 @@
 %3E%0A          %3Cp%3E%0A
+  
           The fo
@@ -942,29 +942,33 @@
 ms.%0A        
+  
 %3C/p%3E%0A
+  
         %3Ctab
@@ -981,16 +981,18 @@
         
+  
 %3Ctbody c
@@ -1034,16 +1034,18 @@
         
+  
 %7B%0A      
@@ -1052,16 +1052,18 @@
         
+ 
+ 
 (shortcu
@@ -1095,24 +1095,26 @@
             
+  
 return %3Ctr k
@@ -1126,16 +1126,18 @@
 s.id %7D%3E%0A
+  
         
@@ -1185,16 +1185,18 @@
         
+  
 %3Ctd clas
@@ -1263,15 +1263,19 @@
     
+  
 %3C/tr%3E;%0A
+  
     
@@ -1299,16 +1299,18 @@
         
+  
 %7D%0A      
@@ -1313,16 +1313,18 @@
         
+ 
+ 
 %3C/tbody%3E
@@ -1320,24 +1320,26 @@
    %3C/tbody%3E%0A
+  
         %3C/ta
@@ -1343,36 +1343,40 @@
 /table%3E%0A        
+  
 %3Cp%3E%0A
+  
           Find a
@@ -1444,29 +1444,154 @@
 nu.%0A        
+  
 %3C/p%3E%0A
+        %3C/Modal.Body%3E%0A%0A        %3CModal.Footer%3E%0A          %3Cbutton onClick=%7B onClose %7D%3EClose%3C/button%3E%0A        %3C/Modal.Footer%3E%0A
       %3C/Moda
@@ -1608,16 +1608,16 @@
   %7D%0A%0A%7D%0A%0A
-
 export d
@@ -1628,8 +1628,9 @@
 lt View;
+%0A

use modal structural components