Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat(client): class and data-test property to each component to enable advanced styling and e2e testing#828

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
import { BoolCodeControl } from "comps/controls/codeControl";
import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
import React, { ReactNode, useContext, useRef } from "react";
import { ExternalEditorContext } from "util/context/ExternalEditorContext";
import { Comp, CompParams, MultiBaseComp } from "lowcoder-core";
Expand All@@ -22,10 +22,14 @@ import {
MethodConfigsType,
withMethodExposing,
} from "./withMethodExposing";
import { Section } from "lowcoder-design";
import { trans } from "i18n";

export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
ChildrenCompMap & {
hidden: InstanceType<typeof BoolCodeControl>;
className: InstanceType<typeof StringControl>;
dataTestId: InstanceType<typeof StringControl>;
};

export function HidableView(props: {
Expand All@@ -50,12 +54,51 @@ export function HidableView(props: {
}
}

export function ExtendedComponentView(props: {
children: JSX.Element | React.ReactNode;
className: string;
dataTestId: string;
}) {
if (!props.className && !props.dataTestId) {
return <>{props.children}</>;
}

return (
<div className={props.className} data-testid={props.dataTestId}>
{props.children}
</div>
);
}

export function ExtendedPropertyView<
ChildrenCompMap extends Record<string, Comp<unknown>>,
>(props: {
children: JSX.Element | React.ReactNode,
childrenMap: NewChildren<ChildrenCompMap>
}
) {
return (
<>
{props.children}
<Section name={trans("prop.component")}>
{props.childrenMap.className?.propertyView({ label: trans("prop.className") })}
{props.childrenMap.dataTestId?.propertyView({ label: trans("prop.dataTestId") })}
</Section>
</>
);
}

export function uiChildren<
ChildrenCompMap extends Record<string, Comp<unknown>>,
>(
childrenMap: ToConstructor<ChildrenCompMap>
): ToConstructor<NewChildren<ChildrenCompMap>> {
return { ...childrenMap, hidden: BoolCodeControl } as any;
return {
...childrenMap,
hidden: BoolCodeControl,
className: StringControl,
dataTestId: StringControl
} as any;
}

type ViewReturn = ReactNode;
Expand DownExpand Up@@ -89,10 +132,22 @@ export class UICompBuilder<
setPropertyViewFn(
propertyViewFn: PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>
) {
this.propertyViewFn = propertyViewFn;
this.propertyViewFn =this.decoratePropertyViewFn(propertyViewFn);
return this;
}

decoratePropertyViewFn(
propertyViewFn: PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>>
): PropertyViewFnTypeForComp<NewChildren<ChildrenCompMap>> {
return (childrenMap, dispatch) => {
return (
<ExtendedPropertyView childrenMap={childrenMap}>
{propertyViewFn(childrenMap, dispatch)}
</ExtendedPropertyView>
);
};
}

setExposeStateConfigs(
configs: ExposingConfig<ChildrenToComp<ChildrenCompMap>>[]
) {
Expand All@@ -110,8 +165,11 @@ export class UICompBuilder<
}

build() {
if (this.childrenMap.hasOwnProperty("hidden")) {
throw new Error("already has hidden");
const reservedProps = ["hidden", "className", "dataTestId"];
for (const reservedProp of reservedProps) {
if (this.childrenMap.hasOwnProperty(reservedProp)) {
throw new Error(`Property »${reservedProp}« is reserved and must not be implemented in components!`);
}
}
const newChildrenMap = uiChildren(this.childrenMap);
const builder = this;
Expand All@@ -122,7 +180,7 @@ export class UICompBuilder<
ToNodeType<NewChildren<ChildrenCompMap>>
> {
ref: React.RefObject<HTMLDivElement> = React.createRef();

override parseChildrenFromValue(
params: CompParams<ToDataType<NewChildren<ChildrenCompMap>>>
): NewChildren<ChildrenCompMap> {
Expand DownExpand Up@@ -185,8 +243,13 @@ function UIView(props: { comp: any; viewFn: any }) {
//END ADD BY FRED

return (
<HidableView hidden={childrenProps.hidden as boolean}>
{props.viewFn(childrenProps, comp.dispatch)}
</HidableView>
<ExtendedComponentView
className={childrenProps.className as string}
dataTestId={childrenProps.dataTestId as string}
>
<HidableView hidden={childrenProps.hidden as boolean}>
{props.viewFn(childrenProps, comp.dispatch)}
</HidableView>
</ExtendedComponentView>
);
}
5 changes: 4 additions & 1 deletionclient/packages/lowcoder/src/i18n/locales/de.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -182,7 +182,10 @@ export const de = {
"showBody": "Körper zeigen",
"showFooter": "Fußzeile anzeigen",
"maskClosable": "Zum Schließen auf \"Draußen\" klicken",
"showMask": "Maske zeigen"
"showMask": "Maske zeigen",
"component": "Komponente",
"className": "Klasse",
"dataTestId": "Test ID",
},
"autoHeightProp": {
"auto": "Auto",
Expand Down
3 changes: 3 additions & 0 deletionsclient/packages/lowcoder/src/i18n/locales/en.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -211,6 +211,9 @@ export const en = {
"baseURL": "Lowcoder API Base URL",
"horizontal": "Horizontal",
"minHorizontalWidth": "Minimum Horizontal Width",
"component": "Component",
"className": "Class",
"dataTestId": "Test ID",
},
"autoHeightProp": {
"auto": "Auto",
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp