ukrbublik / react-awesome-query-builder

User-friendly query builder for React
https://ukrbublik.github.io/react-awesome-query-builder
MIT License
1.97k stars 494 forks source link

Duplicate/Clone Item #940

Open davidkong0987 opened 1 year ago

davidkong0987 commented 1 year ago

See clone option here: https://react-querybuilder.js.org/demo/antd#addRuleToNewGroups=false&autoSelectField=true&autoSelectOperator=true&debugMode=false&disabled=false&enableDragAndDrop=false&independentCombinators=false&justifiedLayout=false&listsAsArrays=false&parseNumbers=false&resetOnFieldChange=true&resetOnOperatorChange=false&showBranches=false&showCloneButtons=true&showCombinatorsBetweenRules=false&showLockButtons=false&showNotToggle=false&validateQuery=false

I've been able to create this functionality though it's a little forced:

            renderAfterActions:(props)=><Button className=".rule--header" icon=<CopyOutlined />  onClick={()=>console.log(props)||this.dup(props.id)}/>,
            renderAfterWidget:(props)=><Button  className=".rule--header" icon=<CopyOutlined /> onClick={()=>console.log(props)||this.dup(props.id)}/>,

then something like this

function duplicateById(obj, id) {
    if (obj === null || typeof obj !== 'object') return obj;

    if (Array.isArray(obj)) {
        return obj.reduce((acc, cur) => {
            let dup = duplicateById(cur, id);
            if (cur.id === id) {
                // Copy the duplicated item and assign a new id
                dup = { ...dup, id: Utils.uuid() };
                acc.push(cur, dup);
            } else {
                acc.push(dup);
            }
            return acc;
        }, []);
    }

    return Object.keys(obj).reduce((acc, key) => {
        acc[key] = duplicateById(obj[key], id);
        return acc;
    }, {});
}
punto-rojo commented 10 months ago

Hi @ukrbublik, any update on this feature? When can we expect this to be available?