@performant-software/semantic-components 0.5.5 → 0.5.8

package/types/components/ViewXML.js.flow

@@ -4,6 +4,7 @@ import React, { type ComponentType, useState } from 'react';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { Button, Modal } from 'semantic-ui-react';
 import i18n from '../i18n/i18n';
+import ModalContext from '../context/ModalContext';
 
 type Props = {
   highlighter?: any,
@@ -21,39 +22,44 @@ const ViewXML = (props: Props) => {
   const openerProps = props.opener.props;
 
   return (
-    <>
-      <OpenerComponent
-        {...openerProps}
-        className='view-xml-trigger'
-        onClick={() => setShowModal(true)}
-      />
-      <Modal
-        className='view-xml-modal'
-        centered={false}
-        open={showModal}
-        onClose={() => setShowModal(false)}
-      >
-        <Modal.Header
-          content={i18n.t('ViewXML.title')}
-        />
-        <Modal.Content>
-          <SyntaxHighlighter
-            language='xml'
-            style={props.highlighter}
-          >
-            { props.xml }
-          </SyntaxHighlighter>
-        </Modal.Content>
-        <Modal.Actions>
-          <Button
-            content='Close'
-            inverted
-            primary
-            onClick={() => setShowModal(false)}
+    <ModalContext.Consumer>
+      { (mountNode) => (
+        <>
+          <OpenerComponent
+            {...openerProps}
+            className='view-xml-trigger'
+            onClick={() => setShowModal(true)}
           />
-        </Modal.Actions>
-      </Modal>
-    </>
+          <Modal
+            className='view-xml-modal'
+            closeIcon
+            centered={false}
+            mountNode={mountNode}
+            open={showModal}
+            onClose={() => setShowModal(false)}
+          >
+            <Modal.Header
+              content={i18n.t('ViewXML.title')}
+            />
+            <Modal.Content>
+              <SyntaxHighlighter
+                language='xml'
+                style={props.highlighter}
+              >
+                { props.xml }
+              </SyntaxHighlighter>
+            </Modal.Content>
+            <Modal.Actions>
+              <Button
+                basic
+                content={i18n.t('Common.buttons.close')}
+                onClick={() => setShowModal(false)}
+              />
+            </Modal.Actions>
+          </Modal>
+        </>
+      )}
+    </ModalContext.Consumer>
   );
 };
 

package/types/context/ModalContext.js.flow

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const ModalContext = React.createContext();
+
+export default ModalContext;

package/types/index.js.flow

@@ -16,6 +16,7 @@ export { default as ColorPickerModal } from './components/ColorPickerModal';
 export { default as useDataList } from './components/DataList';
 export { default as DataTable } from './components/DataTable';
 export { default as DataView } from './components/DataView';
+export { default as DatabaseView } from './components/DatabaseView';
 export { default as DateInput } from './components/DateInput';
 export { default as DatePicker } from './components/DatePicker';
 export { default as DescriptorField } from './components/DescriptorField';

package/webpack.config.js

@@ -5,7 +5,8 @@ module.exports = configure(__dirname, {
   resolve: {
     alias: {
       '../../theme.config$': path.join(__dirname, '/src/css/theme.config'),
-      '../src/css/site': path.join(__dirname, '/src/css/site')
+      '../src/css/site': path.join(__dirname, '/src/css/site'),
+      '../src/css/themes': path.join(__dirname, '/src/css/themes')
     }
   },
   optimization: {