import PropTypes from 'prop-types' ;
import React from 'react' ;
import Alert from 'Components/Alert' ;
import Form from 'Components/Form/Form' ;
import FormGroup from 'Components/Form/FormGroup' ;
import FormInputGroup from 'Components/Form/FormInputGroup' ;
import FormLabel from 'Components/Form/FormLabel' ;
import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup' ;
import Button from 'Components/Link/Button' ;
import Link from 'Components/Link/Link' ;
import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton' ;
import ModalBody from 'Components/Modal/ModalBody' ;
import ModalContent from 'Components/Modal/ModalContent' ;
import ModalFooter from 'Components/Modal/ModalFooter' ;
import ModalHeader from 'Components/Modal/ModalHeader' ;
import { inputTypes , kinds } from 'Helpers/Props' ;
import translate from 'Utilities/String/translate' ;
import styles from './EditSpecificationModalContent.css' ;
function EditSpecificationModalContent ( props ) {
const {
advancedSettings ,
item ,
onInputChange ,
onFieldChange ,
onCancelPress ,
onSavePress ,
onDeleteSpecificationPress ,
... otherProps
} = props ;
const {
id ,
implementationName ,
name ,
negate ,
required ,
fields
} = item ;
return (
< ModalContent onModalClose = { onCancelPress } >
< ModalHeader >
{ id ? translate ( 'EditConditionImplementation' , { implementationName } ) : translate ( 'AddConditionImplementation' , { implementationName } ) }
< / M o d a l H e a d e r >
< ModalBody >
< Form
{ ... otherProps }
>
{
fields && fields . some ( ( x ) => x . label === translate ( 'CustomFormatsSpecificationRegularExpression' ) ) &&
< Alert kind = { kinds . INFO } >
< div >
< div dangerouslySetInnerHTML = { { _ _html : 'This condition matches using Regular Expressions. Note that the characters <code>\\^$.|?*+()[{</code> have special meanings and need escaping with a <code>\\</code>' } } / >
{ 'More details' } < Link to = "https://www.regular-expressions.info/tutorial.html" > { 'Here' } < / L i n k >
< / d i v >
< div >
{ 'Regular expressions can be tested ' }
< Link to = "http://regexstorm.net/tester" > Here < / L i n k >
< / d i v >
< / A l e r t >
}
< FormGroup >
< FormLabel >
Name
< / F o r m L a b e l >
< FormInputGroup
type = { inputTypes . TEXT }
name = "name"
{ ... name }
onChange = { onInputChange }
/ >
< / F o r m G r o u p >
{
fields && fields . map ( ( field ) => {
return (
< ProviderFieldFormGroup
key = { field . name }
advancedSettings = { advancedSettings }
provider = "specifications"
providerData = { item }
{ ... field }
onChange = { onFieldChange }
/ >
) ;
} )
}
< FormGroup >
< FormLabel >
Negate
< / F o r m L a b e l >
< FormInputGroup
type = { inputTypes . CHECK }
name = "negate"
{ ... negate }
helpText = { translate ( 'NegateHelpText' , [ implementationName ] ) }
onChange = { onInputChange }
/ >
< / F o r m G r o u p >
< FormGroup >
< FormLabel >
Required
< / F o r m L a b e l >
< FormInputGroup
type = { inputTypes . CHECK }
name = "required"
{ ... required }
helpText = { translate ( 'CustomFormatRequiredHelpText' , [ implementationName , implementationName ] ) }
onChange = { onInputChange }
/ >
< / F o r m G r o u p >
< / F o r m >
< / M o d a l B o d y >
< ModalFooter >
{
id &&
< Button
className = { styles . deleteButton }
kind = { kinds . DANGER }
onPress = { onDeleteSpecificationPress }
>
Delete
< / B u t t o n >
}
< Button
onPress = { onCancelPress }
>
Cancel
< / B u t t o n >
< SpinnerErrorButton
isSpinning = { false }
onPress = { onSavePress }
>
Save
< / S p i n n e r E r r o r B u t t o n >
< / M o d a l F o o t e r >
< / M o d a l C o n t e n t >
) ;
}
EditSpecificationModalContent . propTypes = {
advancedSettings : PropTypes . bool . isRequired ,
item : PropTypes . object . isRequired ,
onInputChange : PropTypes . func . isRequired ,
onFieldChange : PropTypes . func . isRequired ,
onCancelPress : PropTypes . func . isRequired ,
onSavePress : PropTypes . func . isRequired ,
onDeleteSpecificationPress : PropTypes . func
} ;
export default EditSpecificationModalContent ;