fixed uncontrolled input radio list
This commit is contained in:
@@ -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
|
||||
})
|
||||
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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},)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user