Campo validação com as classes do material

Enegrecer · Mar 16, 2018 · 7c00d98 · 7c00d98
1 parent 8124a23
commit 7c00d98
Show file tree

Hide file tree

Showing 11 changed files with 130,077 additions and 29 deletions.
diff --git a/Enegrecer.htm b/Enegrecer.htm
diff --git a/Enegrecer_files/bundle.js b/Enegrecer_files/bundle.js
diff --git a/Enegrecer_files/css b/Enegrecer_files/css
@@ -0,0 +1,168 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOX-hpKKSTj5PW.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOVuhpKKSTj5PW.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXuhpKKSTj5PW.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUehpKKSTj5PW.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXehpKKSTj5PW.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhpKKSTjw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCRc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfABc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCBc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfCxc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v18/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/src/components/comum/caracteristica/index.js b/src/components/comum/caracteristica/index.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import CampoTexto from '../campoTexto';
 import { CLASSES_TEXTAREA, CLASSES_DIV_INPUT } from '../../../components/denuncias/ConstantesCss';
 
-const caracteristica = ({ id, onChange, label }) => (<CampoTexto
+const caracteristica = ({ id, onChange, label, validacoes, state }) => (<CampoTexto
   id={id}
   label={label}
   maxLen={255}
@@ -12,6 +12,8 @@ const caracteristica = ({ id, onChange, label }) => (<CampoTexto
   divClasse={`${CLASSES_DIV_INPUT} col s12`}
   placeholder={'Ex.: Era uma mulher negra, com aproximadamente 40 anos, magra, alta com cabelo curto...'}
   onChange={onChange}
+  validacoes={validacoes}
+  state={state}
 />);
 
 caracteristica.propTypes = {

diff --git a/src/components/comum/validacoes/index.js b/src/components/comum/validacoes/index.js
@@ -1,2 +1,2 @@
 
-const campoObrigatorio = (value) => (value ? undefined : 'Campo Obrigatório')
+export const campoObrigatorio = (value) => (value ? undefined : 'Campo Obrigatório')
diff --git a/src/components/denuncias/DetalhamentoDenuncia.js b/src/components/denuncias/DetalhamentoDenuncia.js
@@ -50,7 +50,7 @@ export default class DetalhamentoDenuncia extends Component {
             inputClasse={ConstantesCSS.CLASSES_TEXTAREA}
             divClasse={`${ConstantesCSS.CLASSES_DIV_INPUT} col s12`}
             state={'detalhamento'}
-            //validacoes={campoObrigatorio}
+            validacoes={[campoObrigatorio]}
           />
         </div>
 

diff --git a/src/components/denuncias/NovaDenunciaForm.js b/src/components/denuncias/NovaDenunciaForm.js
@@ -6,24 +6,25 @@ import DetalhamentoDenuncia from './DetalhamentoDenuncia';
 import { adicionaFormAoRedux } from './../comum/formControle';
 import './denuncia.css';
 
-class NovaDenunciaForm extends Component {
-  constructor(props) {
-    super(props);
+const FormDenuncia = (props) => {
+  const { handleSubmit } = props;
+  return (
+    <form onSubmit={handleSubmit}>
+      <DetalhamentoDenuncia />
+      <NovaVitimaForm />
+      <NovaTestemunhaForm />
+      <br />
+      <button className="btn waves-effect waves-light" type="submit" name="action">
+          Enviar Denúncia
+      </button>
+    </form>
+  )
+}
+export default adicionaFormAoRedux(FormDenuncia, 'formDenuncia');
 
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleChange = this.handleChange.bind(this);
 
-    this.state = {
-      detalhamento: '',
-      dataOcorrencia: '',
-      horaOcorrencia: '',
-      idCategoria: '',
-      endereco: '',
-      estado: '',
-      vitima: {},
-      testemunha: {}
-    }
-  }
+/*
+class NovaDenunciaForm extends Component {
 
   handleChange(dados) {
     this.setState({
@@ -49,11 +50,18 @@ class NovaDenunciaForm extends Component {
         onSubmit={event => this.handleSubmit(event)}
       >
 
-        <DetalhamentoDenuncia handleChange={this.handleChange} />
-
-        <NovaVitimaForm handleChange={this.handleChange} />
-
-        <NovaTestemunhaForm handleChange={this.handleChange} />
+      <div className="row">
+        <CampoTexto
+          id={'detalhamento'}
+          label={'* Detalhamento'}
+          maxLen={255}
+          type={'text'}
+          inputClasse={ConstantesCSS.CLASSES_TEXTAREA}
+          divClasse={`${ConstantesCSS.CLASSES_DIV_INPUT} col s12`}
+          state={'detalhamento'}
+          validacoes={[required]}
+        />
+      </div>
 
         <br />
         <button className="btn waves-effect waves-light" type="submit" name="action">
@@ -72,7 +80,5 @@ NovaDenunciaForm.propTypes = {
   salvarDenuncia: PropTypes.func.isRequired,
   alterarDenunciaForm: PropTypes.func
 };
+*/
 
-const formDenuncia = adicionaFormAoRedux(NovaDenunciaForm, 'formDenuncia');
-
-export default formDenuncia;
diff --git a/src/components/denuncias/vitima/NovaVitimaForm.js b/src/components/denuncias/vitima/NovaVitimaForm.js
@@ -12,6 +12,7 @@ import Telefone from '../../comum/telefone';
 import ComboboxRaca from './../../comum/comboboxRaca';
 import Caracteristica from '../../comum/caracteristica';
 import Data from '../../comum/data';
+import { campoObrigatorio } from '../../comum/validacoes';
 
 export default class NovaVitimaForm extends Component {
   constructor(props) {
@@ -142,6 +143,8 @@ export default class NovaVitimaForm extends Component {
             id={'caracteristicasDaVitima'}
             label={'* Por favor, descreva aqui as características da vítima (máximo de 255 caracteres)'}
             onChange={e => this.handleChange(cortarPalavra(e.target.value, 255), 'caracteristicasDaVitima')}
+            validacoes={[campoObrigatorio]}
+            state={'caracteristica-vitima'}
           />
         </div>
       </div>);

diff --git a/src/containers/denuncias/FormCode.js b/src/containers/denuncias/FormCode.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Field, reduxForm } from 'redux-form';
+import { campoObrigatorio } from './../../components/comum/validacoes';
+import CampoTexto from './../../components/comum/campoTexto';
+import * as ConstantesCSS from '../../components/denuncias/ConstantesCss';
+import { adicionaFormAoRedux } from './../../components/comum/formControle';
+
+const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
+  <div>
+    <label>{label}</label>
+    <div>
+      <input {...input} placeholder={label} type={type}/>
+      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
+    </div>
+  </div>
+)
+
+const FormCode = (props) => {
+  const { handleSubmit } = props;
+  return (
+    <form onSubmit={handleSubmit}>
+    <div className="row">
+      <CampoTexto
+        id={'detalhamento'}
+        label={'* Detalhamento'}
+        maxLen={255}
+        type={'text'}
+        inputClasse={ConstantesCSS.CLASSES_TEXTAREA}
+        divClasse={`${ConstantesCSS.CLASSES_DIV_INPUT} col s12`}
+        state={'detalhamento'}
+        validacoes={[campoObrigatorio]}
+      />
+   </div>
+    <br/>
+    <br/>
+    <button type="submit">Submit</button>
+    </form>
+  )
+}
+
+
+export default adicionaFormAoRedux(
+  FormCode, 'contact');
diff --git a/src/containers/denuncias/NovaDenunciaContainer.js b/src/containers/denuncias/NovaDenunciaContainer.js
@@ -46,8 +46,10 @@ class NovaDenunciaContainer extends React.Component {
     }
     return (
       <div className="container">
-      <h3 className="jumbotron">Redux Form Validation</h3>
-      <FormCode onSubmit={this.onPressSaveButton} />
+      <NovaDenunciaForm
+        onSubmit={this.onPressSaveButton}
+        alterarDenunciaForm={this.adicionarDenunciaNoForm}
+      />
     </div>
     );
   }
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1,2 @@

		const campoObrigatorio = (value) => (value ? undefined : 'Campo Obrigatório')
		export const campoObrigatorio = (value) => (value ? undefined : 'Campo Obrigatório')