feat: componet context handle subcomponents

ccontrols · Mar 17, 2020 · c6a36bc · c6a36bc
1 parent 7f9d5db
commit c6a36bc
Show file tree

Hide file tree

Showing 25 changed files with 378 additions and 294 deletions.
diff --git a/ui/blocks/src/BlocksContext/ComponentsContext.tsx b/ui/blocks/src/BlocksContext/ComponentsContext.tsx
diff --git a/ui/blocks/src/BlocksContext/index.ts b/ui/blocks/src/BlocksContext/index.ts
diff --git a/ui/blocks/src/ComponentSource/ComponentSource.tsx b/ui/blocks/src/ComponentSource/ComponentSource.tsx
@@ -1,63 +1,68 @@
 import React, { FC } from 'react';
 import { ActionItem } from '@component-controls/components';
-import {
-  useComponentsContext,
-  ComponentInputProps,
-} from '../BlocksContext/ComponentsContext';
+import { ComponentsContainer } from '../context/components/ComponentsContainer';
+import { ComponentInputProps } from '../context/components/ComponentsContext';
 import {
   ThemeContext,
   Source as SourceBlock,
   SourceProps,
 } from '@component-controls/components';
 import { repositoryActions } from '../utils/repositoryActions';
 
-export type ComponentSourceProps = ComponentInputProps & SourceProps;
+export type ComponentSourceProps = ComponentInputProps &
+  Omit<SourceProps, 'children'>;
 
 export const ComponentSource: FC<ComponentSourceProps> = ({
   of,
   actions,
   ...rest
 }) => {
-  const { components } = useComponentsContext({
-    of,
-  });
-  let source;
-  const component = components[0];
-  const { from, importedName, name: componentName, repository } =
-    component || {};
-  const importFrom = repository && repository.name ? repository.name : from;
-  if (importFrom) {
-    source =
-      importedName !== 'default' && importedName !== 'namespace'
-        ? `import { ${componentName} } from '${importFrom}';`
-        : `import ${componentName} from '${importFrom}';`;
-  }
+  return (
+    <ComponentsContainer of={of}>
+      {component => {
+        let source;
+        const { from, importedName, name: componentName, repository } =
+          component || {};
+        const importFrom =
+          repository && repository.name ? repository.name : from;
+        if (importFrom) {
+          source =
+            importedName !== 'default' && importedName !== 'namespace'
+              ? `import { ${componentName} } from '${importFrom}';`
+              : `import ${componentName} from '${importFrom}';`;
+        }
 
-  if (!source) {
-    return null;
-  }
-  const { dark } = React.useContext(ThemeContext);
-  const [showFileSource, setShowFileSource] = React.useState<boolean>(false);
+        if (!source) {
+          return null;
+        }
+        const { dark } = React.useContext(ThemeContext);
+        const [showFileSource, setShowFileSource] = React.useState<boolean>(
+          false,
+        );
 
-  const onShowFileSource = () => setShowFileSource(!showFileSource);
-  const allActions: ActionItem[] = [];
+        const onShowFileSource = () => setShowFileSource(!showFileSource);
+        const allActions: ActionItem[] = [];
 
-  if (component && component.source) {
-    allActions.push({
-      title: showFileSource ? 'import' : 'component',
-      onClick: onShowFileSource,
-    });
-  }
-  const repositoryItems = component && repositoryActions(component?.repository);
-  if (repositoryItems) {
-    allActions.push.apply(allActions, repositoryItems);
-  }
-  if (actions) {
-    allActions.push.apply(allActions, actions);
-  }
-  return (
-    <SourceBlock dark={dark} {...rest} actions={allActions}>
-      {showFileSource ? component?.source : source}
-    </SourceBlock>
+        if (component && component.source) {
+          allActions.push({
+            title: showFileSource ? 'import' : 'component',
+            onClick: onShowFileSource,
+          });
+        }
+        const repositoryItems =
+          component && repositoryActions(component?.repository);
+        if (repositoryItems) {
+          allActions.push.apply(allActions, repositoryItems);
+        }
+        if (actions) {
+          allActions.push.apply(allActions, actions);
+        }
+        return (
+          <SourceBlock dark={dark} {...rest} actions={allActions}>
+            {showFileSource ? component?.source : source}
+          </SourceBlock>
+        );
+      }}
+    </ComponentsContainer>
   );
 };
diff --git a/ui/blocks/src/Description/Description.tsx b/ui/blocks/src/Description/Description.tsx
@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { Markdown, MarkdownProps } from '@component-controls/components';
-import { useComponentsContext, ComponentInputProps } from '../BlocksContext';
+import { ComponentsContainer } from '../context/components/ComponentsContainer';
+import { ComponentInputProps } from '../context/components/ComponentsContext';
 
 export type DescriptionProps = Omit<MarkdownProps, 'children'> &
   ComponentInputProps;
@@ -9,11 +10,13 @@ export type DescriptionProps = Omit<MarkdownProps, 'children'> &
  * Description component with context
  * 'of' property can specify which component's description to use
  */
-export const Description: FC<DescriptionProps> = ({ of, ...rest }) => {
-  const { components } = useComponentsContext({ of });
-  const component = components.length > 0 && components[0];
-  if (!component || !component.info || !component.info.description) {
-    return null;
-  }
-  return <Markdown {...rest}>{component.info.description}</Markdown>;
-};
+export const Description: FC<DescriptionProps> = ({ of, ...rest }) => (
+  <ComponentsContainer of={of}>
+    {component => {
+      if (!component || !component.info || !component.info.description) {
+        return null;
+      }
+      return <Markdown {...rest}>{component.info.description}</Markdown>;
+    }}
+  </ComponentsContainer>
+);
diff --git a/ui/blocks/src/PropsTable/BlockPropsTable/BlockPropsTable.stories.tsx b/ui/blocks/src/PropsTable/BlockPropsTable/BlockPropsTable.stories.tsx
diff --git a/ui/blocks/src/PropsTable/PropsTable/PropsTable.tsx b/ui/blocks/src/PropsTable/PropsTable/PropsTable.tsx
diff --git a/ui/blocks/src/PropsTable/block/BlockPropsTable.stories.tsx b/ui/blocks/src/PropsTable/block/BlockPropsTable.stories.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { BlockPropsTable } from './BlockPropsTable';
+import { MockContext } from '../../test/MockContext';
+
+export default {
+  title: 'Blocks/Core/BlockPropsTable',
+  component: BlockPropsTable,
+};
+
+export const simple = () => (
+  <MockContext>
+    <BlockPropsTable title="BlockPropsTable table" />
+  </MockContext>
+);