wux-weapp/src/helpers/mixins/fieldBehavior.js

一套组件化、可复用、易扩展的微信小程序 UI 组件库

import classNames from '../libs/classNames'
import { FIELD_META_PROP, FIELD_DATA_PROP } from '../shared/constants'

function intersperseSpace(list) {
    return list.reduce((current, item) => [...current, ' ', item], []).slice(1)
}

export default Behavior({
    properties: {
        validateStatus: {
            type: null,
            value: null,
        },
        required: {
            type: null,
            value: null,
        },
        help: {
            type: null,
            value: null,
        },
        hasFeedback: {
            type: Boolean,
            value: true,
        },
    },
    data: {
        mergedValidateStatus: '',
        mergedRequired: false,
        feedbackMessage: '',
        validateClasses: '',
    },
    methods: {
        getControls() {
            return this.getRelationsByType('descendant').filter((node) => !!node.hasFieldDecorator)
        },
        getOnlyControl() {
            const child = this.getControls()[0]
            return child !== undefined ? child : null
        },
        getChildProp(prop) {
            const child = this.getOnlyControl()
            return child && child.data && child.data[prop]
        },
        getMeta() {
            return this.getChildProp(FIELD_META_PROP)
        },
        getField() {
            return this.getChildProp(FIELD_DATA_PROP)
        },
        getValidateState(_fieldMeta, _field) {
            const onlyControl = this.getOnlyControl()
            if (!onlyControl) {
                return ''
            }
            const fieldMeta = _fieldMeta || this.getMeta()
            const field = _field || this.getField()
            if (field.validating) {
                return 'validating'
            }
            if (field.errors) {
                return 'error'
            }
            const fieldValue = 'value' in field ? field.value : fieldMeta.initialValue
            if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
                return 'success'
            }
            return ''
        },
        getRequiredState(required) {
            if (required !== null) {
                return !!required
            }
            if (this.getOnlyControl()) {
                const meta = this.getMeta() || {}
                const validate = meta.validate || []
          
                return validate
                    .filter((item) => !!item.rules)
                    .some((item) => {
                        return item.rules.some((rule) => rule.required)
                    })
            }
            return false
        },
        getFeedbackMessage(help) {
            // if (help !== null) {
            //     return help
            // }
            if (this.getOnlyControl()) {
                const { errors } = this.getField()
                if (errors) {
                    return intersperseSpace(
                        errors.map((e) => (e.message)),
                    )
                }
            }
            return ''
        },
        getValidateClasses(mergedValidateStatus, hasFeedback, help) {
            if (mergedValidateStatus) {
                return classNames({
                    // 'with-help': help !== null,
                    // 'has-feedback': mergedValidateStatus && hasFeedback,
                    'has-success': mergedValidateStatus === 'success',
                    'has-warning': mergedValidateStatus === 'warning',
                    'has-error': mergedValidateStatus === 'error',
                    'is-validating': mergedValidateStatus === 'validating',
                })
            }
            return ''
        },
        reRender(props = this.data) {
            const mergedValidateStatus = props.validateStatus !== null ? `${props.validateStatus}` : this.getValidateState()
            if (this.data.mergedValidateStatus !== mergedValidateStatus) {
                this.setData({ mergedValidateStatus })
            }

            const mergedRequired = this.getRequiredState(props.required)
            if (this.data.mergedRequired !== mergedRequired) {
                this.setData({ mergedRequired })
            }

            const feedbackMessage = this.getFeedbackMessage(props.help)
            if (this.data.feedbackMessage !== feedbackMessage) {
                this.setData({ feedbackMessage })
            }

            const validateClasses = this.getValidateClasses(mergedValidateStatus, props.hasFeedback, props.help)
            if (this.data.validateClasses !== validateClasses) {
                this.setData({ validateClasses })
            }
        },
    },
})