Skip to content

Commit

Permalink
feat(docs): act-1431 - created view for array types (#1368)
Browse files Browse the repository at this point in the history 
* feat(docs): act-1431 - created view for array types

* feat(docs): act-1431 - fix for numder types
  • Loading branch information
@TrofimovAnton85
TrofimovAnton85 authored Jun 27, 2024
1 parent f7d3d0b commit 9415cba
Show file tree
Hide file tree
Showing 7 changed files with 203 additions and 18 deletions.
23 changes: 14 additions & 9 deletions src/components/ParserOpenRPC/DetailsBox/RenderParams.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,13 @@ const renderSchema = (schemaItem, schemas, name) => {
/>
<div className="padding-bottom--md">
<CollapseBox isInitCollapsed={!!name}>
{Object.entries(item.properties).map(([key, value]) => (
<div key={key} className={styles.paramItemWrapper}>
{renderSchema(value, schemas, key)}
</div>
))}
<>
{Object.entries(item.properties).map(([key, value]) => (
<div key={key} className={styles.paramItemWrapper}>
{renderSchema(value, schemas, key)}
</div>
))}
</>
</CollapseBox>
</div>
</div>
Expand Down Expand Up @@ -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 (
<div className={styles.enumWrapper}>
<div className="padding--md">Possible enum values</div>
{enumValues.map((value, index) => (
<div key={index} className={styles.enumItem}>
<div className={styles.enumTitle}>{value}</div>
{blockEnum && <div style={{ paddingTop: "10px" }}><MDContent content={getDescription(value)} /></div>}
{blockEnum && <div style={{ paddingTop: "10px" }}><MDContent content={getDescription(value, title)} /></div>}
</div>
))}
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/components/ParserOpenRPC/InteractiveBox/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -102,6 +103,7 @@ export default function InteractiveBox({ params, components, examples, onParamCh
onError={log("errors")}
templates={{
BaseInputTemplate,
ArrayFieldTemplate,
FieldErrorTemplate: () => null,
ErrorListTemplate: () => null,
}}
Expand Down
89 changes: 89 additions & 0 deletions src/components/ParserOpenRPC/InteractiveBox/styles.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
79 changes: 79 additions & 0 deletions src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<>
<div className={styles.tableRow}>
<div className={styles.tableColumn}>
<label className={styles.tableColumnParam}>
{title}
</label>
</div>
<div className={styles.tableColumn}>
<div className={styles.arrayParentRow}>
<div className={styles.arrayFormDataWrap}>
{JSON.stringify(formData, null, " ")}
</div>
<span
className={styles.arrayColumnType}
onClick={toggleCollapsed}
>
array
<span className={clsx(styles.chevronIcon, collapsed && styles.chevronIconDown)}>
</span>
</span>
</div>
</div>
</div>
<Collapsible lazy collapsed={collapsed}>
<>
{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 (
<div key={`${i}`} className={styles.arrayItemRowWrap} style={{ paddingRight: `${isNumber ? "25px" : "0"}` }}>
<span className={clsx(styles.addItemIcon, styles.arrayItemIcon)}>{i+1}</span>
<BaseInputTemplate {...props} />
{hasRemove && (
<span
onClick={onDropIndexClick(index)}
className={styles.deleteIcon}
>
</span>
)}
</div>
)
})}
{canAdd && (
<div className={styles.addItemBtnWrap}>
<button
type="button"
onClick={onAddClick}
className={styles.addItemBtn}
>
<span className={styles.addItemIcon}>+</span>
Add array item
</button>
</div>
)}
</>
</Collapsible>
</>
);
};
23 changes: 15 additions & 8 deletions src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 : "");
Expand Down Expand Up @@ -44,13 +49,15 @@ export const BaseInputTemplate = ({
}, []);

return (
<div className={styles.tableRow}>
<div className={styles.tableColumn}>
<label className={clsx(styles.tableColumnParam, isFocused && styles.tableColumnParamFocused)}>
{name}{required ? "*" : ""}
</label>
</div>
<div className={styles.tableColumn}>
<div className={isArray ? styles.arrayItemRow : styles.tableRow}>
{!isArray && (
<div className={styles.tableColumn}>
<label className={clsx(styles.tableColumnParam, isFocused && styles.tableColumnParamFocused)}>
{name}{required ? "*" : ""}
</label>
</div>
)}
<div className={!isArray ? styles.tableColumn : ""}>
<Tooltip message={hasErrors ? rawErrors[0] : ""} disabled={!rawErrors}>
<div className={styles.tableValueRow}>
<input
Expand Down
3 changes: 3 additions & 0 deletions static/img/icons/delete-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion wallet/reference/new-reference.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

<ParserOpenRPC network={NETWORK_NAMES.metamask} method="wallet_switchEthereumChain" />
<ParserOpenRPC network={NETWORK_NAMES.metamask} method="eth_subscribe" />

0 comments on commit 9415cba

Please sign in to comment.