import React from 'react';

import {FormActions} from './form-actions';
import {isRuleValid} from '../util/is-rule-valid';
import {RuleForm} from './rule-form';

export const RuleCreate = props => {
    let valid = isRuleValid(props.name, props.displayName, props.regex, props.replacement);

    return (
        <div className="panel panel-default">
            <div className="panel-heading">Create Rule</div>
            <div className="panel-body">
                <RuleForm
                    propDidChange={(property, value) => props.newRuleFieldWillChange(property, value)}
                    {...props}/>

                <FormActions
                    okButton="Create"
                    okButtonClick={() => props.ruleWillCreate()}
                    okValid={valid}
                    warningButton="Reset"
                    warningButtonClick={() => props.ruleWillReset()}
                    warningValid={true}/>
            </div>
        </div>
    );
}

@@ -226,16 +226,21 @@
 d(props.
+rule.
 name, pr
@@ -243,16 +243,21 @@
 , props.
+rule.
 displayN
@@ -267,16 +267,21 @@
 , props.
+rule.
 regex, p
@@ -285,16 +285,21 @@
 , props.
+rule.
 replacem

fix to use proper object reference for rule