瀏覽代碼

[frontend] add support for antd modal component (#3013)

Bjorn Alm 3 年之前
父節點
當前提交
4347fb1ab0

+ 25 - 2
desktop/core/src/desktop/js/apps/editor/components/result/reactExample/ReactExample.tsx

@@ -1,7 +1,7 @@
 'use strict';
 
-import React, { FunctionComponent } from 'react';
-import { Button } from 'antd';
+import React, { FunctionComponent, useState } from 'react';
+import { Button, Modal } from 'antd';
 
 // tsx-files don't have the same baseUrl as other js files so
 // we are using a relative path when importing
@@ -40,6 +40,20 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecu
   const position =
     editorCursor?.position !== undefined ? JSON.stringify(editorCursor.position) : 'not available';
 
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
   return (
     // The 'antd' class is added to the root element since we want it to apply the correct
     // "global" styling to its antd sub components, e.g. the antd Button.
@@ -47,6 +61,10 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecu
     // 'root-wrapped-antd.less'.
     <div className="react-example antd">
       <h1 className="react-example__title">{title}</h1>
+      <Button type="primary" onClick={showModal}>
+        Open Modal
+      </Button>
+
       <p className="react-example__description">
         I'm an Editor specific react component containing subcomponents. The dynamic id that I'm
         getting from a Knockout observable is {id}.
@@ -62,6 +80,11 @@ const ReactExample: FunctionComponent<ReactExampleProps> = ({ title, activeExecu
       <Button type="primary" onClick={() => console.info('clicked')}>
         I'm an Antd button
       </Button>
+      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal>
     </div>
   );
 };

文件差異過大導致無法顯示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 20 - 2
desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less

@@ -1,7 +1,9 @@
 // The Ant Design library modifies the global styles which will affect the UI in Hue
 // in multiple places where not intended. So in order to utilize the components locally
-// without leaking styles we wrap it all in an antd class.
-.antd {
+// without leaking styles we wrap it all in an antd class. Since ant-modal-root likely
+// is placed outside the .antd wrapper we need to add the styles there as well.
+.antd,
+.ant-modal-root {
   /* stylelint-disable no-invalid-position-at-import-rule */
 
   // We need to reset some global styles from Bootstrap to prevent them from
@@ -15,5 +17,21 @@
 
   // Import the styles for the actual components used
   @import 'node_modules/antd/es/button/style/index.less';
+  @import 'node_modules/antd/es/modal/style/index.less';
   /* stylelint-enable no-invalid-position-at-import-rule */
+
+  // Required global overrides:
+  .ant-modal-mask,
+  .ant-modal-wrap {
+    // There are Hue components using z-indexes higher than the ant modal.
+    // Further increase the z-index here if needed.
+    z-index: 1010;
+  }
+}
+
+// Ant Design's Modal adds a new body width to compensate for vertical scrollbar
+// which has to be reverted since Hue (at the time of writing) uses overflow:hidden
+// on the body tag.
+body.ant-scrolling-effect {
+  width: 100% !important;
 }

部分文件因文件數量過多而無法顯示