diff --git a/.changeset/calm-lamps-cough.md b/.changeset/calm-lamps-cough.md new file mode 100644 index 000000000..cace52701 --- /dev/null +++ b/.changeset/calm-lamps-cough.md @@ -0,0 +1,6 @@ +--- +"@ensembleui/react-kitchen-sink": patch +"@ensembleui/react-runtime": patch +--- + +support custom widget in label of Button widget diff --git a/apps/kitchen-sink/src/ensemble/screens/actions.yaml b/apps/kitchen-sink/src/ensemble/screens/actions.yaml index 930e517ca..00bbe51f7 100644 --- a/apps/kitchen-sink/src/ensemble/screens/actions.yaml +++ b/apps/kitchen-sink/src/ensemble/screens/actions.yaml @@ -34,7 +34,12 @@ View: names: heading-3 text: Execute Conditional Action - Button: - label: Tap to pick an image + body: + Text: + text: Tap to pick an image + styles: + fontFamily: fantasy + color: green onTap: pickFiles: allowedExtensions: ["jpg", "png", "pdf", "docs"] diff --git a/packages/runtime/src/widgets/Button.tsx b/packages/runtime/src/widgets/Button.tsx index 5b769217f..ef7d2a704 100644 --- a/packages/runtime/src/widgets/Button.tsx +++ b/packages/runtime/src/widgets/Button.tsx @@ -1,5 +1,5 @@ import type { EnsembleAction, Expression } from "@ensembleui/react-framework"; -import { useRegisterBindings } from "@ensembleui/react-framework"; +import { unwrapWidget, useRegisterBindings } from "@ensembleui/react-framework"; import { Button as AntButton, Form as AntForm } from "antd"; import { type MouseEvent, @@ -12,11 +12,13 @@ import { WidgetRegistry } from "../registry"; import type { EnsembleWidgetProps, IconProps } from "../shared/types"; import { useEnsembleAction } from "../runtime/hooks/useEnsembleAction"; import { Icon } from "./Icon"; +import { EnsembleRuntime } from "../runtime"; +import { isString } from "lodash-es"; const widgetName = "Button"; export type ButtonProps = { - label: Expression; + label: Expression | { [key: string]: unknown }; onTap?: EnsembleAction; submitForm?: boolean; startingIcon?: IconProps; @@ -58,10 +60,18 @@ export const Button: React.FC = ({ id, onTap, ...rest }) => { } }, [values?.loading]); + const label = useMemo(() => { + const rawLabel = values?.label; + if (!rawLabel) return null; + if (isString(rawLabel)) return rawLabel; + return EnsembleRuntime.render([unwrapWidget(rawLabel)]); + }, [values?.label]); + const ButtonComponent = useMemo(() => { return ( = ({ id, onTap, ...rest }) => { ) : null} - {!loading && <>{values?.label}} + {!loading && <>{label}} {!loading && values?.endingIcon ? (