Skip to content

Commit

Permalink
🌲 Update
Browse files Browse the repository at this point in the history
  • Loading branch information
@muukii
muukii committed Sep 22, 2022
1 parent a602f64 commit c31fbaa
Showing 1 changed file with 152 additions and 60 deletions.
212 changes: 152 additions & 60 deletions code.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,87 +1,179 @@
// This is a counter widget with buttons to increment and decrement the number.

const { widget } = figma;
const { useSyncedState, usePropertyMenu, AutoLayout, Text, SVG } = widget;
const {
useSyncedState,
usePropertyMenu,
useEffect,
waitForTask,
AutoLayout,
Text,
SVG,
Input,
Frame,
useWidgetId,
Span,
Rectangle,
Ellipse,
Line,
} = widget;

type Structure = {
name: string;
inheritedTypes: string[];
properties: Property[];
methods: Methods[];
description: string;
declarations: Declaration[];
};

type Property = {
name: string;
returnType: string;
};

type Methods = {
name: string;
returnType: string;
type Declaration = {
text: string;
description: string;
};

function Widget() {
const [count, setCount] = useSyncedState("count", 0);
const [structure, setStructure] = useSyncedState<Structure>("structure", {
name: "",
inheritedTypes: [],
properties: [],
methods: [],
description: "",
declarations: [],
});

if (count !== 0) {
usePropertyMenu(
[
{
itemType: "action",
propertyName: "reset",
tooltip: "Reset",
icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9026 1.43168C12.1936 1.47564 12.4822 1.54098 12.7663 1.62777L12.7719 1.62949C14.0176 2.0114 15.109 2.78567 15.8858 3.83854L15.8918 3.84665C16.5473 4.73808 16.9484 5.78867 17.058 6.88508L14.0863 4.88858L13.3259 6.02047L17.3852 8.74774L17.9079 9.09894L18.2994 8.60571L21.0056 5.19662L19.9376 4.34879L18.3531 6.34479C18.3424 6.27511 18.3306 6.20563 18.3179 6.13636C18.1135 5.02233 17.6601 3.96334 16.9851 3.04274L16.9791 3.03462C16.0303 1.74427 14.6956 0.794984 13.1714 0.326388L13.1658 0.32466C12.8171 0.217755 12.4627 0.137298 12.1055 0.0832198C10.899 -0.0994351 9.66061 0.0188515 8.50099 0.435448L8.4947 0.437711C7.42511 0.823053 6.46311 1.44778 5.6774 2.25801C5.38576 2.55876 5.11841 2.88506 4.87886 3.23416C4.85856 3.26376 4.83845 3.29351 4.81854 3.32343L5.94262 4.08294L5.94802 4.07484C5.96253 4.0531 5.97717 4.03146 5.99195 4.00993C6.71697 2.95331 7.75331 2.15199 8.95541 1.72013L8.9617 1.71788C9.33245 1.58514 9.71301 1.48966 10.098 1.43156C10.6957 1.34135 11.3039 1.34123 11.9026 1.43168ZM3.70034 6.39429L0.994141 9.80338L2.06217 10.6512L3.64663 8.65521C3.65741 8.72489 3.66916 8.79437 3.68187 8.86364C3.88627 9.97767 4.33964 11.0367 5.01467 11.9573L5.02063 11.9654C5.96945 13.2557 7.30418 14.205 8.82835 14.6736L8.83398 14.6753C9.18281 14.7823 9.53732 14.8628 9.89464 14.9168C11.101 15.0994 12.3393 14.9811 13.4988 14.5646L13.5051 14.5623C14.5747 14.1769 15.5367 13.5522 16.3224 12.742C16.614 12.4413 16.8813 12.115 17.1209 11.7659C17.1412 11.7363 17.1613 11.7065 17.1812 11.6766L16.0571 10.9171L16.0518 10.9252C16.0372 10.9469 16.0225 10.9686 16.0078 10.9902C15.2827 12.0467 14.2464 12.848 13.0444 13.2799L13.0381 13.2821C12.6673 13.4149 12.2868 13.5103 11.9018 13.5684C11.3041 13.6587 10.6958 13.6588 10.0971 13.5683C9.8062 13.5244 9.51754 13.459 9.23347 13.3722L9.22784 13.3705C7.98212 12.9886 6.89078 12.2143 6.11393 11.1615L6.10795 11.1534C5.45247 10.2619 5.05138 9.21133 4.94181 8.11492L7.91342 10.1114L8.6739 8.97953L4.61459 6.25226L4.09188 5.90106L3.70034 6.39429Z" fill="white"/>
</svg>
`,
},
],
() => {
setCount(0);
}
);
}

return (
<AutoLayout
<VStack
verticalAlignItems={"center"}
spacing={8}
padding={16}
cornerRadius={8}
fill={"#FFFFFF"}
stroke={"#E6E6E6"}
fill={"#252422"}
>
<SVG
src={`<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="15" fill="white"/>
<rect x="7.5" y="14.0625" width="15" height="1.875" fill="black" fill-opacity="0.8"/>
<rect x="0.5" y="0.5" width="29" height="29" rx="14.5" stroke="black" stroke-opacity="0.1"/>
</svg>`}
onClick={() => {
setCount(count - 1);
<HStack>
<Input
font={{ family: "Roboto Mono", style: "Bold" }}
placeholder="Name"
value={structure.name}
fontSize={16}
fill="#fffcf2"
onTextEditEnd={(e) => {
setStructure({ ...structure, name: e.characters });
}}
/>
</HStack>

<Input
font={{ family: "Roboto Mono", style: "Medium" }}
placeholder="Description"
value={structure.description}
fontSize={12}
fill="#fffcf2"
onTextEditEnd={(e) => {
setStructure({ ...structure, description: e.characters });
}}
></SVG>
<Text fontSize={32} width={42} horizontalAlignText={"center"}>
{count}
/>

<VStack>
<HStack horizontalAlignItems="end" width={"fill-parent"}>
<TextButton
title="+"
onClick={() => {
structure.declarations.push({
text: "",
description: "",
});
setStructure(structure);
}}
/>
</HStack>

<VStack spacing={4}>
{structure.declarations.map((declaration, index) => {
return (
<HStack spacing={8} verticalAlignItems="center">
<Ellipse
name="Ellipse 1"
fill="#ECECEC"
width={6}
height={6}
opacity={0.2}
/>

<Input
font={{ family: "Roboto Mono", style: "Medium" }}
width={250}
placeholder="Name"
value={declaration.text}
fontSize={12}
fill="#fffcf2"
onTextEditEnd={(e) => {
declaration.text = e.characters;
setStructure(structure);
}}
/>

<Input
font={{ family: "Roboto Mono", style: "Medium" }}
width={200}
placeholder="Description"
value={declaration.description}
fontSize={12}
fill="#fffcf2"
onTextEditEnd={(e) => {
declaration.description = e.characters;
setStructure(structure);
}}
/>

<TextButton
title="-"
onClick={() => {
const declarations = structure.declarations.filter(
(_, i) => {
return i != index;
}
);
structure.declarations = declarations;
setStructure(structure);
}}
/>
</HStack>
);
})}
</VStack>
</VStack>
</VStack>
);
}

const VStack = (props: AutoLayoutProps) => {
const composed = props;
composed.direction = "vertical";
return <AutoLayout {...composed} />;
};

const HStack = (props: AutoLayoutProps) => {
const composed = props;
composed.direction = "horizontal";
return <AutoLayout {...composed} />;
};

const TextButton = (args: {
title: string;
fontSize?: number;
onClick: () => void;
}) => {
return (
<AutoLayout
verticalAlignItems="center"
height="hug-contents"
padding={2}
cornerRadius={8}
>
<Text
fill="#eb5e28"
fontSize={args.fontSize ?? 14}
onClick={args.onClick}
>
{args.title}
</Text>
<SVG
src={`<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="30" height="30" rx="15" fill="white"/>
<path d="M15.9375 7.5H14.0625V14.0625H7.5V15.9375H14.0625V22.5H15.9375V15.9375H22.5V14.0625H15.9375V7.5Z" fill="black" fill-opacity="0.8"/>
<rect x="0.5" y="0.5" width="29" height="29" rx="14.5" stroke="black" stroke-opacity="0.1"/>
</svg>`}
onClick={() => {
setCount(count + 1);
}}
></SVG>
</AutoLayout>
);
}
};

widget.register(Widget);

0 comments on commit c31fbaa

Please sign in to comment.