From fc2261fabbad5ecb010d484e5932b8a8153fd9fd Mon Sep 17 00:00:00 2001 From: Amelia Wattenberger Date: Wed, 20 Apr 2022 14:57:33 -0700 Subject: [PATCH] fix blocks list in infinite-canvas block --- package.json | 4 +++ .../folder-blocks/infinite-canvas/Item.tsx | 28 +++++++++++++++---- .../folder-blocks/infinite-canvas/index.tsx | 25 ++++++++++------- yarn.lock | 19 +++++++++++++ 4 files changed, 60 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 57f5c40..9df5f22 100644 --- a/package.json +++ b/package.json @@ -419,6 +419,8 @@ "@tensorflow/tfjs": "^3.14.0", "@types/d3": "^7.1.0", "@types/js-yaml": "^4.0.5", + "@types/lodash.flatten": "^4.4.7", + "@types/lodash.isempty": "^4.4.7", "@types/lodash.uniqueid": "^4.0.6", "@types/papaparse": "^5.3.1", "assert": "^2.0.0", @@ -431,6 +433,7 @@ "git-url-parse": "^11.6.0", "js-base64": "^3.7.2", "js-yaml": "^4.1.0", + "lodash.flatten": "^4.4.0", "lodash.isempty": "^4.4.0", "lodash.isobject": "^3.0.2", "lodash.uniqueid": "^4.0.1", @@ -438,6 +441,7 @@ "ol": "^6.14.1", "p5": "^1.4.1", "papaparse": "^5.3.1", + "picomatch": "^2.3.1", "react": "^17.0.0", "react-diff-view": "^2.4.8", "react-dom": "^17.0.0", diff --git a/src/blocks/folder-blocks/infinite-canvas/Item.tsx b/src/blocks/folder-blocks/infinite-canvas/Item.tsx index 128366b..2ce5aae 100644 --- a/src/blocks/folder-blocks/infinite-canvas/Item.tsx +++ b/src/blocks/folder-blocks/infinite-canvas/Item.tsx @@ -2,6 +2,7 @@ import { useMemo, useRef, useState } from "react"; import { useDrag } from "./useDrag"; import { BlockPicker } from "./BlockPicker"; import { ResizeButton } from "./ResizeButton"; +import pm from "picomatch"; import { roundToInterval, Position, ItemType, Dimensions } from "./index"; export const Item = ({ @@ -18,7 +19,6 @@ export const Item = ({ BlockComponent, onDelete, onChange, - onDrag, }: ItemType & { contents?: string; blockOptions: any[]; @@ -46,11 +46,27 @@ export const Item = ({ if (type !== "file") return null; const extension = path?.split(".").pop(); return blockOptions.filter((block: any) => { - if (block.type !== "file") return false; - if (!block.extensions) return true; - if (block.extensions?.includes("*")) return true; - if (block.extensions?.includes(extension)) return true; - return false; + // don't include example Blocks + if (block.title === "Example File Block") { + return false; + } + + if (block.type !== type) return false; + + if (path === undefined) return true; + + if (Boolean(block.matches)) { + return pm(block.matches, { bash: true, dot: true })(path); + } + + if (block.extensions) { + const extension = path.split(".").pop(); + return ( + block.extensions.includes("*") || block.extensions.includes(extension) + ); + } + + return true; }); }, [blockOptions, path, type]); diff --git a/src/blocks/folder-blocks/infinite-canvas/index.tsx b/src/blocks/folder-blocks/infinite-canvas/index.tsx index fd59d42..73b97a1 100644 --- a/src/blocks/folder-blocks/infinite-canvas/index.tsx +++ b/src/blocks/folder-blocks/infinite-canvas/index.tsx @@ -4,6 +4,7 @@ import { Buffer } from "buffer"; import { FilePicker } from "./FilePicker"; import { useDrag } from "./useDrag"; import { Item } from "./Item"; +import flatten from "lodash.flatten"; import "./index.css"; const width = 5000; @@ -100,16 +101,18 @@ export default function ( const res = await fetch(url).then((res) => res.json()); const exampleBlocks = res || []; setBlockOptions( - exampleBlocks - .map((block: any) => ({ - ...block, - owner: "githubnext", - repo: "blocks-examples", - })) - .map((block: Block) => ({ - ...block, - key: getBlockKey(block), - })) + flatten( + exampleBlocks.map((blocksRepo: any) => + blocksRepo.blocks.map((block) => ({ + ...block, + owner: blocksRepo.owner, + repo: blocksRepo.repo, + })) + ) + ).map((block: Block) => ({ + ...block, + key: getBlockKey(block), + })) ); }; useEffect(() => { @@ -160,6 +163,8 @@ export default function ( title: "Code block", owner: "githubnext", repo: "blocks-examples", + sandbox: false, + entry: "/src/blocks/file-blocks/code/index.tsx", }, }, ]; diff --git a/yarn.lock b/yarn.lock index 0c73092..e0d40be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2113,6 +2113,20 @@ resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.5.tgz#738dd390a6ecc5442f35e7f03fa1431353f7e138" integrity sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA== +"@types/lodash.flatten@^4.4.7": + version "4.4.7" + resolved "https://registry.yarnpkg.com/@types/lodash.flatten/-/lodash.flatten-4.4.7.tgz#0072c8fc0b7e2d0741c118c9bbcb1c1f3602504e" + integrity sha512-6yyP/mHEKL2sa86V61F7TnEcUKlLML9+aWI7TCKvnS4SFt7RD4zTVwkdDgluOJqxVkwZ/2z7HvtRs/7j/Uru7g== + dependencies: + "@types/lodash" "*" + +"@types/lodash.isempty@^4.4.7": + version "4.4.7" + resolved "https://registry.yarnpkg.com/@types/lodash.isempty/-/lodash.isempty-4.4.7.tgz#b1015d1adba560daf560ad04f294848939e75317" + integrity sha512-YOzlpoIn9jrfHzjIukKnu9Le3tmi+0PhUdOt2rMpJW/4J6jX7s0HeBatXdh9QckLga8qt4EKBxVIEqtEq6pzLg== + dependencies: + "@types/lodash" "*" + "@types/lodash.uniqueid@^4.0.6": version "4.0.6" resolved "https://registry.yarnpkg.com/@types/lodash.uniqueid/-/lodash.uniqueid-4.0.6.tgz#63f1354f9193896f77e4510d4b7bc763d1479b9a" @@ -5547,6 +5561,11 @@ lodash.flatmap@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz#ef8cbf408f6e48268663345305c6acc0b778702e" integrity sha1-74y/QI9uSCaGYzRTBcaswLd4cC4= +lodash.flatten@^4.4.0: + version "4.4.0" + resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f" + integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8= + lodash.flow@^3.3.0: version "3.5.0" resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"