From 9415cba98c0e07ace467abc0a014c87d3d31858a Mon Sep 17 00:00:00 2001 From: TrofimovAnton85 <98453427+TrofimovAnton85@users.noreply.github.com> Date: Thu, 27 Jun 2024 09:59:41 +0200 Subject: [PATCH] feat(docs): act-1431 - created view for array types (#1368) * feat(docs): act-1431 - created view for array types * feat(docs): act-1431 - fix for numder types --- .../ParserOpenRPC/DetailsBox/RenderParams.tsx | 23 +++-- .../ParserOpenRPC/InteractiveBox/index.tsx | 2 + .../InteractiveBox/styles.module.css | 89 +++++++++++++++++++ .../templates/ArrayFieldTemplate.tsx | 79 ++++++++++++++++ .../templates/BaseInputTemplate.tsx | 23 +++-- static/img/icons/delete-icon.svg | 3 + wallet/reference/new-reference.mdx | 2 +- 7 files changed, 203 insertions(+), 18 deletions(-) create mode 100644 src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx create mode 100644 static/img/icons/delete-icon.svg diff --git a/src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx b/src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx index e62928d71dd..789160a40b6 100644 --- a/src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx +++ b/src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx @@ -30,11 +30,13 @@ const renderSchema = (schemaItem, schemas, name) => { />
- {Object.entries(item.properties).map(([key, value]) => ( -
- {renderSchema(value, schemas, key)} -
- ))} + <> + {Object.entries(item.properties).map(([key, value]) => ( +
+ {renderSchema(value, schemas, key)} +
+ ))} +
@@ -99,19 +101,22 @@ const renderSchema = (schemaItem, schemas, name) => { if (schemaItem.anyOf) return renderCombinations(schemaItem, name, "anyOf"); const renderEnum = (enumValues, title, description) => { - const getDescription = (item) => { - const regex = new RegExp(`\`${item}\`: ([^;]+)(;|$)`); + const getDescription = (item, title) => { + let regex = new RegExp(`\`${item}\`: ([^;]+)(;|$)`); + if (title === "subscriptionType") { + regex = new RegExp(`\`${item}\` - ([^.;]+)[.;]?`); + } const match = description.match(regex); return match ? match[1] : ""; }; - const blockEnum = title && description && title === "Block tag"; + const blockEnum = title && description && (title === "Block tag" || title === "subscriptionType"); return (
Possible enum values
{enumValues.map((value, index) => (
{value}
- {blockEnum &&
} + {blockEnum &&
}
))}
diff --git a/src/components/ParserOpenRPC/InteractiveBox/index.tsx b/src/components/ParserOpenRPC/InteractiveBox/index.tsx index 127e02018a0..e65493999b2 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/index.tsx +++ b/src/components/ParserOpenRPC/InteractiveBox/index.tsx @@ -7,6 +7,7 @@ import $RefParser from "@apidevtools/json-schema-ref-parser"; import { MethodExample, MethodParam, SchemaComponents } from "@site/src/components/ParserOpenRPC/interfaces"; import styles from "./styles.module.css"; import { BaseInputTemplate } from "@site/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate"; +import { ArrayFieldTemplate } from "@site/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate"; import { DropdownWidget } from "@site/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget"; import { Tooltip } from "@site/src/components/ParserOpenRPC/Tooltip"; import { useColorMode } from "@docusaurus/theme-common"; @@ -102,6 +103,7 @@ export default function InteractiveBox({ params, components, examples, onParamCh onError={log("errors")} templates={{ BaseInputTemplate, + ArrayFieldTemplate, FieldErrorTemplate: () => null, ErrorListTemplate: () => null, }} diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css index e49074117d9..f3aa2759774 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css +++ b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css @@ -185,3 +185,92 @@ width: 100%; border-radius: 0; } + +.arrayParentRow { + position: relative; + width: 100%; + height: 100%; + padding: 12px 72px 12px 16px; +} + +.arrayColumnType { + position: absolute; + top: 0; + right: 0; + height: 100%; + padding-right: 28px; + display: flex; + align-items: center; + color: rgba(187, 192, 197, 1); + font-size: 14px; + cursor: pointer; +} + +.arrayFormDataWrap { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.addItemBtnWrap { + min-height: 52px; + display: flex; + align-items: center; + padding: 12px; + border-bottom: 1px solid rgba(132, 140, 150, 1); +} + +.addItemBtn { + display: flex; + align-items: center; + background: none; + padding: 0; + border: 0; + outline: none; + color: #BBC0C5; + font-size: 14px; + line-height: 1; + cursor: pointer; +} + +.addItemIcon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: #BBC0C5; + color: #292A36; + font-size: 20px; + line-height: 1; + margin-right: 10px; +} + +.arrayItemIcon { + position: absolute; + top: 50%; + left: 12px; + transform: translateY(-50%); + font-size: 14px; + line-height: 1; + font-weight: bold; +} + +.arrayItemRowWrap { + position: relative; + padding-left: 40px; + border-bottom: 1px dashed #848C96; +} + +.deleteIcon { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 12px; + width: 14px; + height: 14px; + margin-top: -1px; + cursor: pointer; + background: url("/img/icons/delete-icon.svg") no-repeat 50% 50%; +} \ No newline at end of file diff --git a/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx new file mode 100644 index 00000000000..b3fc3f982f1 --- /dev/null +++ b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx @@ -0,0 +1,79 @@ +import React from "react"; +import { useCollapsible, Collapsible } from "@docusaurus/theme-common"; +import { ArrayFieldTemplateProps } from "@rjsf/utils"; +import { BaseInputTemplate } from "@site/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate"; +import clsx from "clsx"; +import styles from "@site/src/components/ParserOpenRPC/InteractiveBox/styles.module.css"; + +export const ArrayFieldTemplate = ({ + title, + formData, + items, + canAdd, + onAddClick +}: ArrayFieldTemplateProps) => { + const { collapsed, toggleCollapsed } = useCollapsible({ initialState: true }); + return ( + <> +
+
+ +
+
+
+
+ {JSON.stringify(formData, null, " ")} +
+ + array + + + +
+
+
+ + <> + {items.map((el, i) => { + const props = { + ...el.children.props, + isArray: true + } + const { index, hasRemove, onDropIndexClick, schema } = el; + const isNumber = schema.type === "number" || schema.type === "integer"; + return ( +
+ {i+1} + + {hasRemove && ( + + + )} +
+ ) + })} + {canAdd && ( +
+ +
+ )} + + + + ); +}; diff --git a/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx b/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx index d0d6998a9a7..358aadf6142 100644 --- a/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx +++ b/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx @@ -5,6 +5,10 @@ import styles from "@site/src/components/ParserOpenRPC/InteractiveBox/styles.mod import { Tooltip } from "@site/src/components/ParserOpenRPC/Tooltip"; import debounce from "lodash.debounce"; +interface ExtendedInputProps extends BaseInputTemplateProps { + isArray?: boolean +} + export const BaseInputTemplate = ({ schema, id, @@ -16,7 +20,8 @@ export const BaseInputTemplate = ({ hideError, required, formContext, -}: BaseInputTemplateProps) => { + isArray +}: ExtendedInputProps) => { const isNumber = schema.type === "number" || schema.type === "integer"; const [isFocused, setIsFocused] = useState(false); const [inputValue, setInputValue] = useState(isNumber ? 0 : ""); @@ -44,13 +49,15 @@ export const BaseInputTemplate = ({ }, []); return ( -
-
- -
-
+
+ {!isArray && ( +
+ +
+ )} +
+ + diff --git a/wallet/reference/new-reference.mdx b/wallet/reference/new-reference.mdx index 5cd6c4f3155..0ee10533f24 100644 --- a/wallet/reference/new-reference.mdx +++ b/wallet/reference/new-reference.mdx @@ -8,4 +8,4 @@ sidebar_class_name: "hidden" import ParserOpenRPC from "@site/src/components/ParserOpenRPC"; import { NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc"; - \ No newline at end of file + \ No newline at end of file