Formularium\Frontend\React\Framework::editableCompose()

Complexity

Conditions	2
Paths	2

Size

Total Lines	58
Code Lines	26

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

<?php declare(strict_types=1);
    public function editableCompose(\Formularium\Model $m, array $elements, string $previousCompose): string
    {
        $data = [];
        foreach ($m->getFields() as $name => $field) {
            $data[$name] = $field->getDatatype()->getDefault();
        }

        $editableForm = join('', $elements);
        $editableForm = str_replace('"{this.handleInputChange}"', '{this.handleInputChange}', $editableForm);
        $editableForm = preg_replace(
            '/value="\{this.state.([a-zA-Z0-9_]+)\}"/',
            'value={this.state.$1}',
            $editableForm
        );
        
        $jsonData = json_encode($data);

        $id = 'reactapp' . self::counter();
        $component = $m->getName() . 'Component';
        $reactCode = <<<EOF
'use strict';

const e = React.createElement;

class {$component} extends React.Component {
    constructor(props) {
        super(props);
        this.state = $jsonData;
   
        this.handleInputChange = this.handleInputChange.bind(this);
    }
    
    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;
    
        this.setState({
            [name]: value
        });
    }
    
    render() {
        return (
        <form>
            $editableForm
        </form>
        );
    }
}

const domContainer = document.querySelector('#{$id}');
ReactDOM.render(e($component), domContainer);
EOF;

        $t = new HTMLElement('div', ['id' => $id]);
        $s = new HTMLElement('script', ['type' => "text/babel"], $reactCode, true);
        return HTMLElement::factory('', [], [$t, $s])->getRenderHTML();
    }