infinity-forge
Version:
201 lines (192 loc) • 7.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NaoRemoverDaHomeUsadaParaTesteTestarAquiDentro = NaoRemoverDaHomeUsadaParaTesteTestarAquiDentro;
var jsx_runtime_1 = require("react/jsx-runtime");
var ui_1 = require("../ui/index.js");
var accordion_1 = require("../ui/components/accordion/index.js");
var formik_1 = require("formik");
function NaoRemoverDaHomeUsadaParaTesteTestarAquiDentro() {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.PieSimpleChart, { data: [
{ color: '#000', label: 'Test', value: 123 },
{ color: '#ccc', label: 'Test2', value: 1234 },
] }), (0, jsx_runtime_1.jsx)(accordion_1.Accordions, { items: [
{ id: 1, name: 'Tiago', description: "Tiago é legal" },
{ id: 2, name: 'Gabriel', description: "Gabriel é legal" },
], Component: function (props) { return (0, jsx_runtime_1.jsx)("p", { children: props.description }); }, configurations: { accordion: { Header: function (props) { return (0, jsx_runtime_1.jsx)("h1", { children: props.name }); } } } })] }));
}
function Component() {
var values = (0, formik_1.useFormikContext)().values;
return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: JSON.stringify(values) });
}
//1. Autocomplete
//2. button
//2.1.Que a estilização herda do buttonStyles que injetado na InfinityForgeProvider
//2.2 <Button /> herda os estados do formulário, como assim? Se o formulário estiver carregando já trata por trás do panos de fazer o efeito visual
//3.@DEFAULT = TRUE cleanFieldsOnSubmit={false} - É pra limpar os campos após o submit? Tem casos que você quer manter os dados no formulário
//4.CustomAction
{
/* <FormHandler
autoComplete='off'
button={{}}
cleanFieldsOnSubmit
customAction={{
Component: ({ values, setFieldValue, stateForm }) => {
if(stateForm.state === "loading") {
return <LoaderCircle />
}
if (values.name === 'Tiago') {
return <button onClick={() => {
setModal(true);
setFieldValue("genero", "masculino")
}}>Ação X</button>
}
return <button>Ação Y</button>
},
}}
>
<Select name="genero" options={[{ label: "Masculino", value: "masculino" }]} />
</FormHandler> */
}
//5.Custom Submit
{
//Paciente
/* <FormHandler
button={{ text: 'Salvar dados do paciente' }}
initialData={{ genero: 'masculino' }}
cleanFieldsOnSubmit={false}
customSubmit={[
{
active: false, //habilita e desabilita o botão de submit customizado
action: async (data, setStateForm, initialValues, handlers) => {
if (data.genero === 'feminino' && initialValues.genero === 'masculino') {
throw new ValidationError({
validationErrors: { genero: { errors: ['Você não pode mudar o seu genero'] } },
})
} else {
setStateForm({ state: 'loading', message: '' })
await api({ url: '/mudargenero', method: 'post', body: data })
}
},
props: ({ state, message }, setFieldValue) => ({
text: state === 'loading' ? 'Carregando...' : 'Salvar dados e imprimir generos disponiveis',
loading: false,
onClick: () => setFieldValue(''),
disabled: message === 'desabilitar' ? true : false,
}),
},
]}
>
<Select
name='genero'
onlyOneValue
options={[
{ label: 'Masculino', value: 'masculino' },
{ label: 'feminino', value: 'feminino' },
{ label: 'Outros', value: 'outros' },
]}
/>
</FormHandler> */
}
//6. Decimal fields > baseado no name do campo ele vai tentar transformar a string para valor númerico
//7. Link pros validators que existem //Defaults schemaas destrinchar e talvez fazer subtópicos para eles
//8.Default schemas
// 8.1 No nosso defaultSchema possuimos uma série de validações padrões prontas para uso por exemplo:
// O campo phone utilizase da validação de um utilário chamado: <linK>ValidatePhone</linK> neste link você poder ver mais detalhes sobre a validação feita
//9.1 - disableEnterKeySubmitForm - vc avaliar como fica a melhor descrição, evitar que no enter dê submit por padrão é true
//10.
{
/* <FormHandler
onSucess={async (data) => {
console.log(data)
}}
button={{ text: 'Salvar dados do paciente' }}
i18n={{
schema: { name: yup.string().required('Campo requerido') },
RenderFields: ({ symbol }) => {
return (
<>
<Input name={`${symbol}.name`} />
</>
)
},
}}
></FormHandler> */
}
//11.InitialData que a chave tentara buscar um campo no formulário que de "match" para o campo começar com aquele valor
//12.isStickyButtons se o formulário possuir uma altura "fixa" a parte inferior das "ações" ficaram com position sticky ou seja acompanhando o formulário durante o seu preenchimento
//13.messageProvider={{ }}
//14. modifyInitialData={() => {}} ele irá modificar os dados iniciais que serão jogados pra dentro dos campos, o useTable, Atena muitas funcionalidade dentro do infinity-forge não possuem controle pleno do initialData por isso via função as vezes é necessário este controle
//15
{
/* <FormHandler
onSucess={async (data) => {
console.log(data)
}}
modifySchema={({ schema, data }) => {
let newSchema = schema
if (data.paymentMethod === 'PIX') {
newSchema = {
...newSchema,
cpf: yup.string().required('Campo requerido'),
}
}
if (data.paymentMethod === 'CREDIT_CARD') {
newSchema = {
...newSchema,
creditCardName: yup.string().required('Campo requerido'),
creditCardNumber: yup.string().required('Campo requerido'),
creditCardVV: yup.string().required('Campo requerido'),
}
}
return newSchema
}}
>
<Input name='name' />
</FormHandler> */
}
//16.onChangeForm
// const [name, setName] = useState('')
// return (
// <>
// <button
// type='button'
// onClick={() => {
// setName('Roberto')
// }}
// >Roberto</button>
// <FormHandler
// onSucess={async (data) => {
// console.log(data)
// }}
// initialData={{ name }}
// decimalFields={["idade"]}
// onChangeForm={{
// callbackResult: (dataForm) => {
// setName(dataForm.name)
// if (name === 'Roberto' && dataForm.idade > 22) {
// window.alert('Não permitimos robertos no sistema.')
// }
// },
// additionalDependencies: [name], //Se remover a dependencia caso sete roberto no useState não poderá ser mais válidado pois não terá a dependencia
// }}
// >
// <Input name='name' />
// <Input name='idade' />
// </FormHandler>
// </>
// )
//17. O onFinish executa após a ação do onSucess e o legal é que ele possui o data que está vindo e os dados iniciais que foram recebidos no initialData
{
/* <FormHandler
onSucess={async (data) => {
//Criar usuário
}}
onFinish={(data) => {
// Logue o usuário
}}
>
<Input name='name' />
<Input name='idade' />
</FormHandler> */
}
//# sourceMappingURL=index.js.map