From 93572132dfa58efd4d4ba41586b82efd07f0cb23 Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Sat, 19 Jun 2021 10:20:07 +0300
Subject: [PATCH] refactor: split Group component

---
 .../src/Containers/BASE_CONTAINERS_STYLES.ts  | 12 +++++++++-
 .../core-blocks/src/Containers/Group.tsx      | 24 +------------------
 .../core-blocks/src/Containers/GroupClose.tsx | 20 ++++++++++++++++
 webapp/packages/core-blocks/src/index.ts      |  1 +
 4 files changed, 33 insertions(+), 24 deletions(-)
 create mode 100644 webapp/packages/core-blocks/src/Containers/GroupClose.tsx

diff --git a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
index 98787268ca..523c998563 100644
--- a/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
+++ b/webapp/packages/core-blocks/src/Containers/BASE_CONTAINERS_STYLES.ts
@@ -130,5 +130,15 @@ export const BASE_CONTAINERS_STYLES = composes(
       margin: 0;
       text-transform: uppercase;
       opacity: 0.9;
-    }  
+    }
+
+    GroupClose {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      display: flex;
+      position: absolute;
+      right: 24px;
+      margin-right: 0 !important;
+    }
   `);
diff --git a/webapp/packages/core-blocks/src/Containers/Group.tsx b/webapp/packages/core-blocks/src/Containers/Group.tsx
index dcbdf1967e..1d0b2084bf 100644
--- a/webapp/packages/core-blocks/src/Containers/Group.tsx
+++ b/webapp/packages/core-blocks/src/Containers/Group.tsx
@@ -7,9 +7,7 @@
  */
 
 import { forwardRef } from 'react';
-import styled, { css } from 'reshadow';
 
-import { Icon } from '../Icon';
 import { filterContainerFakeProps } from './filterContainerFakeProps';
 import type { IContainerProps } from './IContainerProps';
 
@@ -17,35 +15,15 @@ interface Props extends IContainerProps {
   form?: boolean;
   center?: boolean;
   box?: boolean;
-  onClose?: () => void;
 }
 
-const style = css`
-  close {
-    width: 18px;
-    height: 18px;
-    cursor: pointer;
-    display: flex;
-    position: absolute;
-    right: 24px;
-    margin-right: 0 !important;
-  }
-`;
-
 export const Group = forwardRef<HTMLDivElement, Props & React.HTMLAttributes<HTMLDivElement>>(function Group({
   form,
   center,
   box,
-  children,
-  onClose,
   ...rest
 }, ref) {
   const divProps = filterContainerFakeProps(rest);
 
-  return styled(style)(
-    <div ref={ref} {...divProps}>
-      {onClose && <close><Icon name="cross" viewBox="0 0 16 16" onClick={onClose} /></close>}
-      {children}
-    </div>
-  );
+  return <div ref={ref} {...divProps} />;
 });
diff --git a/webapp/packages/core-blocks/src/Containers/GroupClose.tsx b/webapp/packages/core-blocks/src/Containers/GroupClose.tsx
new file mode 100644
index 0000000000..72398fd077
--- /dev/null
+++ b/webapp/packages/core-blocks/src/Containers/GroupClose.tsx
@@ -0,0 +1,20 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2021 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
+import { Icon } from '../Icon';
+
+interface IProps {
+  onClick?: () => void;
+}
+
+export const GroupClose: React.FC<IProps & React.HTMLAttributes<HTMLDivElement>> = function GroupClose({
+  onClick,
+  ...rest
+}) {
+  return <close {...rest}><Icon name="cross" viewBox="0 0 16 16" onClick={onClick} /></close>;
+};
diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts
index 6f223054ef..dbc4da9f6c 100644
--- a/webapp/packages/core-blocks/src/index.ts
+++ b/webapp/packages/core-blocks/src/index.ts
@@ -99,6 +99,7 @@ export * from './FormControls/Filter';
 export * from './Containers/BASE_CONTAINERS_STYLES';
 export * from './Containers/Container';
 export * from './Containers/Group';
+export * from './Containers/GroupClose';
 export * from './Containers/GroupItem';
 export * from './Containers/GroupTitle';
 export * from './Containers/ColoredContainer';