Skip to content

Commit

Permalink
feat: work on the node component
Browse files Browse the repository at this point in the history
  • Loading branch information
yamankatby committed Apr 14, 2023
1 parent ec6ee86 commit 434e40b
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 13 deletions.
8 changes: 7 additions & 1 deletion src/stories/Collection.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
import RowyThemeProvider from "@src/theme/RowyThemeProvider";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import { ComponentMeta } from "@storybook/react";
import Collection from "./Collection";

export default {
title: "Example/Collection",
component: Collection,
parameters: {
backgrounds: {
default: "dark",
values: [{ name: "dark", value: "#101013" }],
},
},
decorators: [
(Story) => (
<RowyThemeProvider>
Expand Down
2 changes: 1 addition & 1 deletion src/stories/Collection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Collection: FC<ICollectionProps> = () => {
map(
pathObject,
(methodObject, method) =>
(methodObject as any).tags.includes(tag.name) && (
(methodObject as any).tags?.includes(tag.name) && (
<Grid key={path + method} item width={280}>
<OpenApiNode path={path as any} method={method as any} />
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion src/stories/NodeName.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const NodeName: FC<INodeNameProps> = ({ name, onNameChange, tooltip }) => {
<Tooltip title={tooltip}>
<Typography
variant="caption"
mt={0.2}
mt={0.1}
width={112}
textAlign="center"
overflow="hidden"
Expand Down
13 changes: 3 additions & 10 deletions src/stories/OpenApiNode.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Box, Divider, Stack, Tooltip, Typography } from "@mui/material";
import { motion } from "framer-motion";
import { map } from "lodash-es";
import { SVGProps, useMemo, useRef, useState } from "react";
import { SVGProps, useMemo, useState } from "react";
import Node from "./Node";
import NodeName from "./NodeName";
import NodeToolbar from "./NodeToolbar";
Expand Down Expand Up @@ -101,26 +101,19 @@ const Icon = (props: SVGProps<SVGSVGElement>) => (
);

const Params = ({ meth, collapsed }: any) => {
const ref = useRef<HTMLDivElement>(null);

const height = useMemo(
() => (ref.current ? ref.current.clientHeight : 0),
[ref.current]
);

return (
<Stack
component={motion.div}
overflow="hidden"
height={0}
variants={{
hidden: { height: 0, opacity: 0 },
visible: { height, opacity: 1 },
visible: { height: "auto", opacity: 1 },
}}
initial="hidden"
animate={collapsed ? "hidden" : "visible"}
>
<Stack ref={ref} p={1.5} spacing={0.5}>
<Stack p={1.5} spacing={0.5}>
{meth.parameters?.map((param: any) => (
<Param key={param.name} id={meth.operationId} param={param} />
))}
Expand Down

0 comments on commit 434e40b

Please sign in to comment.