components.widgets.Form.FieldsetCol.jsx Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of n2o-react
There is a newer version: 7.28.3
import React, { useContext } from 'react'
import PropTypes from 'prop-types'
import { compose, withHandlers, pure, mapProps } from 'recompose'
import { Col } from 'reactstrap'
import get from 'lodash/get'

import { ExpressionContext } from '../../../core/Expression/Context'
import { executeExpression } from '../../../core/Expression/execute'
import { parseExpression } from '../../../core/Expression/parse'

import ReduxField from './ReduxField'
// eslint-disable-next-line import/no-cycle
import { FieldsetContainer } from './Fieldset'

function FieldsetColComponent({
    col,
    activeModel,
    defaultCol,
    colId,
    autoFocusId,
    labelPosition,
    labelWidth,
    labelAlignment,
    modelPrefix,
    form,
    parentName,
    colVisible,
    disabled,
    autoSubmit,
    onChange,
    onBlur,
    multiSetDisabled,
}) {
    if (!colVisible) { return null }

    const { size, className, style, fields, fieldsets } = col

    return (
        
            {fields &&
                fields.map((field, i) => {
                    const autoFocus = field.id && autoFocusId && field.id === autoFocusId
                    const key = `field${i}`
                    const name = parentName ? `${parentName}.${field.id}` : field.id

                    return (
                        
                    )
                })}
            {fieldsets &&
                fieldsets.map((fieldset, i) => {
                    const { name: fieldsetName, ...rest } = fieldset

                    const key = `set${i}`
                    const name = parentName ? `${parentName}.${fieldsetName}` : fieldsetName

                    return (
                        
                    )
                })}
        
    )
}

const withContext = (Context, mapper) => Component => (props) => {
    const contextValue = useContext(Context)
    const mappedValue = mapper(contextValue)

    return ()
}

const enhance = compose(
    pure,
    withContext(ExpressionContext, evalContext => ({ evalContext })),
    withHandlers({
        resolveVisible: props => () => {
            const visible = get(props, 'col.visible')
            const expression = parseExpression(visible)

            if (expression) {
                return executeExpression(expression, props.activeModel, props.evalContext)
            }

            if (visible === true) { return true }

            return visible !== false
        },
    }),

    mapProps(({ resolveVisible, ...props }) => ({
        ...props,
        colVisible: resolveVisible(),
    })),
)

FieldsetColComponent.propTypes = {
    col: PropTypes.object,
    activeModel: PropTypes.object,
    defaultCol: PropTypes.object,
    colId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    autoFocusId: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]),
    labelPosition: PropTypes.string,
    labelWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    labelAlignment: PropTypes.string,
    modelPrefix: PropTypes.string,
    form: PropTypes.string,
    parentName: PropTypes.string,
    colVisible: PropTypes.bool,
    disabled: PropTypes.bool,
    autoSubmit: PropTypes.bool,
    onChange: PropTypes.func,
    onBlur: PropTypes.func,
}

const FieldsetCol = enhance(FieldsetColComponent)

export { FieldsetColComponent }
export { FieldsetCol }
export default FieldsetCol