How to export setter function for component?
Hi, I'm relatively new to Solid world and whole frontend, I used to work in Java style codebases. I have legacy code, which I'm trying to replace with Solidjs components. Lets presume I have timer component which has time set in creation via prop. Now I need to change time, which is signal created inside component. How to tell component to update its time? Currently am doing this was, but it feels stupid and complicated. Thank you.
export type CountDownPanelProps = {
template: string;
defaultTimestamp: Date;
updateInterval: number;
classRules: { [k: string]: (timeLeftMs: number) => boolean };
registerUpdateTimestampHandler?: (
handler: (newTimestamp: Date) => void
) => void;
registerUpdateTemplateHandler?: (
handler: (newTemplate: string) => void
) => void;
};
In component:
if (props.registerUpdateTimestampHandler) {
props.registerUpdateTimestampHandler((newTimestamp) => {
initialTimeStamp = newTimestamp.getTime();
updateTimer();
});
}
if (props.registerUpdateTemplateHandler) {
props.registerUpdateTemplateHandler((newTemplate) => {
template = newTemplate;
updateTimer();
});
}
Outside of component in legacy code:
const timerComponent = CountDownPanel({
template: deliveryStatusTitle,
defaultTimestamp: order.Delivery.getExpectedPickUp(),
updateInterval: 1000,
registerUpdateTimestampHandler: (handler) => {
updateTimestamp = handler;
},
registerChangeTemplateHandler: (handler) => {
updateTemplate = handler;
},
});
Now I'm finally able to update component state in legacy code:
updateTimestamp(newValue)
updateTemplate(newTemplate)
It's crazy complicated, but it works. Is there an easier way?
export type CountDownPanelProps = {
template: string;
defaultTimestamp: Date;
updateInterval: number;
classRules: { [k: string]: (timeLeftMs: number) => boolean };
registerUpdateTimestampHandler?: (
handler: (newTimestamp: Date) => void
) => void;
registerUpdateTemplateHandler?: (
handler: (newTemplate: string) => void
) => void;
};
In component:
if (props.registerUpdateTimestampHandler) {
props.registerUpdateTimestampHandler((newTimestamp) => {
initialTimeStamp = newTimestamp.getTime();
updateTimer();
});
}
if (props.registerUpdateTemplateHandler) {
props.registerUpdateTemplateHandler((newTemplate) => {
template = newTemplate;
updateTimer();
});
}
Outside of component in legacy code:
const timerComponent = CountDownPanel({
template: deliveryStatusTitle,
defaultTimestamp: order.Delivery.getExpectedPickUp(),
updateInterval: 1000,
registerUpdateTimestampHandler: (handler) => {
updateTimestamp = handler;
},
registerChangeTemplateHandler: (handler) => {
updateTemplate = handler;
},
});
Now I'm finally able to update component state in legacy code:
updateTimestamp(newValue)
updateTemplate(newTemplate)
It's crazy complicated, but it works. Is there an easier way?
