Skip to content

Instantly share code, notes, and snippets.

@mmintel

mmintel/condition.js

Created Mar 27, 2020
Embed
What would you like to do?
TinaCMS condition field
import React from 'react';
import styled from 'styled-components'
import { FieldsBuilder } from '@tinacms/form-builder'
const Condition = ({ input, field, form }) => {
const nestedFields = field.fields(input.value);
const conditionalFields = nestedFields.map(f => {
const fieldPath = field.name.split('.').slice(0, -1)
const name = fieldPath.concat(f.name).join('.')
return {
...f,
name,
}
})
const fields = [
{
...field.trigger,
name: field.name,
label: field.label,
},
...conditionalFields
]
return (
<ConditionalField>
<FieldsBuilder fields={fields} form={form} />
</ConditionalField>
)
};
const ConditionalField = styled.div`
margin-top: -20px;
margin-left: -20px;
margin-right: -20px;
`
export default Condition
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.