Updates

lowcoder/client/packages/lowcoder-plugin-demo/src/CounterComp.tsx

@@ -0,0 +1,81 @@
+import {
+  antd,
+  UICompBuilder,
+  numberExposingStateControl,
+  Section,
+  withDefault,
+  withExposingConfigs,
+  NumberControl,
+  NameConfig,
+  eventHandlerControl,
+  withMethodExposing,
+} from "lowcoder-sdk";
+import styles from "./style.module.css";
+
+const { Button } = antd;
+
+const childrenMap = {
+  value: numberExposingStateControl("value", 10),
+  step: withDefault(NumberControl, 1),
+  onEvent: eventHandlerControl([
+    {
+      label: "onChange",
+      value: "change",
+      description: "",
+    },
+  ]),
+};
+
+const CounterCompBase = new UICompBuilder(childrenMap, (props: any) => {
+  const currentValue = props.value.value;
+  return (
+    <div className={styles.wrapper}>
+      <Button
+        onClick={() => {
+          props.value.onChange(currentValue - props.step);
+          props.onEvent("change");
+        }}
+      >
+        -
+      </Button>
+      <span style={{ padding: "0 8px" }}>{currentValue}</span>
+      <Button
+        onClick={() => {
+          props.value.onChange(currentValue + props.step);
+          props.onEvent("change");
+        }}
+      >
+        +
+      </Button>
+    </div>
+  );
+})
+  .setPropertyViewFn((children: any) => {
+    return (
+      <>
+        <Section name="Basic">
+          {children.value.propertyView({ label: "Initial Value" })}
+          {children.step.propertyView({ label: "Step" })}
+        </Section>
+        <Section name="Interaction">{children.onEvent.propertyView()}</Section>
+      </>
+    );
+  })
+  .build();
+
+const CounterCompTemp = withMethodExposing(CounterCompBase, [
+  {
+    method: {
+      name: "random",
+      params: [],
+    },
+    execute(comp: any) {
+      comp.children.value.getView().onChange(Math.floor(Math.random() * 100));
+    },
+  },
+]);
+
+export default withExposingConfigs(CounterCompTemp, [
+  new NameConfig("value", ""),
+  new NameConfig("step", ""),
+]);