From 5004dd140e61106ff824cf3771471bc76823754c Mon Sep 17 00:00:00 2001 From: paul Date: Tue, 25 Mar 2025 05:24:37 +0530 Subject: [PATCH] fixed uncontrolled input radio list --- src/canvas/canvas.js | 4 +--- src/canvas/toolbar.js | 2 +- src/components/inputs.js | 9 +++++---- src/frameworks/tkinter/widgets/base.js | 14 +++++--------- src/frameworks/tkinter/widgets/checkButton.js | 11 ++++++++--- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/canvas/canvas.js b/src/canvas/canvas.js index 57d9b93..e5e1b44 100644 --- a/src/canvas/canvas.js +++ b/src/canvas/canvas.js @@ -224,8 +224,6 @@ class Canvas extends React.Component { } } - console.log("inner widget: ", innerWidget, target) - return innerWidget } @@ -248,7 +246,7 @@ class Canvas extends React.Component { openToolbar = (widget) => { this.setState({ // selectedWidget: selectedWidget, - toolbarAttrs: widget.getToolbarAttrs(), + toolbarAttrs: widget?.getToolbarAttrs(), toolbarOpen: true }) diff --git a/src/canvas/toolbar.js b/src/canvas/toolbar.js index dae219b..405770f 100644 --- a/src/canvas/toolbar.js +++ b/src/canvas/toolbar.js @@ -142,7 +142,7 @@ const CanvasToolBar = memo(({ isOpen, widgetType, }) => { } if (focusedInputRef.current?.input) { - setCursorPos(focusedInputRef.current.input.selectionStart); + setCursorPos(focusedInputRef.current.input.selectionStart) }else{ setCursorPos(0) } diff --git a/src/components/inputs.js b/src/components/inputs.js index 646544d..e4e66e4 100644 --- a/src/components/inputs.js +++ b/src/components/inputs.js @@ -87,19 +87,20 @@ export const DynamicInputList = () => { } -export const DynamicRadioInputList = React.memo(({defaultInputs=[""], defaultSelected=null, onChange}) => { - const [inputs, setInputs] = useState([""]) // Initialize with one input - const [selectedRadio, setSelectedRadio] = useState(null) // Tracks selected radio button +export const DynamicRadioInputList = React.memo(({defaultInputs, defaultSelected=null, onChange}) => { + const [inputs, setInputs] = useState(defaultInputs || [""]) // Initialize with one input + const [selectedRadio, setSelectedRadio] = useState(defaultSelected) // Tracks selected radio button useEffect(() => { - setInputs(defaultInputs) + setInputs(defaultInputs || [""]) }, [defaultInputs]) useEffect(() => { setSelectedRadio(defaultSelected) + }, [defaultSelected]) useEffect(() => { diff --git a/src/frameworks/tkinter/widgets/base.js b/src/frameworks/tkinter/widgets/base.js index 8796b52..7aa4e17 100644 --- a/src/frameworks/tkinter/widgets/base.js +++ b/src/frameworks/tkinter/widgets/base.js @@ -144,7 +144,7 @@ export class TkinterBase extends Widget { } if (sticky !== ""){ - config['sticky'] = sticky + config['sticky'] = `"${sticky}"` } layoutManager = `grid(${convertObjectToKeyValueString(config)})` @@ -186,14 +186,14 @@ export class TkinterBase extends Widget { if (colWeights){ const correctedColWeight = Object.fromEntries( Object.entries(colWeights).map(([_, { gridNo, weight }]) => [gridNo-1, weight]) // tkinter grid starts from 0, so -1 - );// converts the format : {index: {gridNo, weight}} to {gridNo: weight} + ) // converts the format : {index: {gridNo, weight}} to {gridNo: weight} const groupByWeight = Object.entries(correctedColWeight).reduce((acc, [gridNo, weight]) => { if (!acc[weight]) - acc[weight] = []; // Initialize array if it doesn't exist + acc[weight] = [] // Initialize array if it doesn't exist - acc[weight].push(Number(gridNo)); // Convert key to number and add it to the array - return acc; + acc[weight].push(Number(gridNo)) // Convert key to number and add it to the array + return acc }, {}) Object.entries(groupByWeight).forEach(([weight, indices]) => { @@ -482,12 +482,9 @@ export class TkinterBase extends Widget { const { alignSelf, justifySelf, placeSelf, ...restStates } = prev.widgetOuterStyling; // Remove these properties - // TODO: fix outer width and height, it should be set to auto else, it won't stretch return ({ widgetOuterStyling: { ...restStates, - width: "auto", - height: "auto", ...this.getGridStickyStyling(value) } }) @@ -685,7 +682,6 @@ export class TkinterBase extends Widget { const { layout, direction, grid = { rows: 1, cols: 1 }, gap = 10, align } = value // console.log("layout value: ", value) - // FIXME: In grid layout the layout doesn't adapt to the size of the child if resized let widgetStyle = { ...this.state.widgetInnerStyling, diff --git a/src/frameworks/tkinter/widgets/checkButton.js b/src/frameworks/tkinter/widgets/checkButton.js index 3690cf9..b9d5834 100644 --- a/src/frameworks/tkinter/widgets/checkButton.js +++ b/src/frameworks/tkinter/widgets/checkButton.js @@ -127,25 +127,30 @@ export class RadioButton extends TkinterWidgetBase{ // FIXME: the radio buttons are not visible because of the default heigh provided static widgetType = "radio_button" + static displayName = "Radio Button" constructor(props) { super(props) this.minSize = {width: 50, height: 30} + let newAttrs = removeKeyFromObject("layout", this.state.attrs) + this.state = { ...this.state, size: { width: 80, height: 30 }, fitContent: { width: true, height: true }, widgetName: "Radio button", attrs: { - ...this.state.attrs, + ...newAttrs, radios: { label: "Radio Group", tool: Tools.INPUT_RADIO_LIST, - value: {inputs: ["default"], selectedRadio: -1}, + value: {inputs: ["default"], selectedRadio: null}, onChange: ({inputs, selectedRadio}) => { - this.setAttrValue("radios", {inputs, selectedRadio}) + this.setAttrValue("radios", {inputs, selectedRadio}, () => { + console.log("attribute set: ", this.state.attrs.radios, {inputs, selectedRadio},) + }) } }