82 lines
1.8 KiB
TypeScript
82 lines
1.8 KiB
TypeScript
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", ""),
|
|
]);
|