fixed uncontrolled input radio list

This commit is contained in:
paul
2025-03-25 05:24:37 +05:30
parent ede5f276cf
commit 5004dd140e
5 changed files with 20 additions and 20 deletions

View File

@@ -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
})

View File

@@ -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)
}

View File

@@ -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(() => {

View File

@@ -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,

View File

@@ -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},)
})
}
}