fieldBehavior.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import classNames from '../libs/classNames'
  2. import { FIELD_META_PROP, FIELD_DATA_PROP } from '../shared/constants'
  3. function intersperseSpace(list) {
  4. return list.reduce((current, item) => [...current, ' ', item], []).slice(1)
  5. }
  6. export default Behavior({
  7. properties: {
  8. validateStatus: {
  9. type: null,
  10. value: null,
  11. },
  12. required: {
  13. type: null,
  14. value: null,
  15. },
  16. help: {
  17. type: null,
  18. value: null,
  19. },
  20. hasFeedback: {
  21. type: Boolean,
  22. value: true,
  23. },
  24. },
  25. data: {
  26. mergedValidateStatus: '',
  27. mergedRequired: false,
  28. feedbackMessage: '',
  29. validateClasses: '',
  30. },
  31. methods: {
  32. getControls() {
  33. return this.getRelationsByType('descendant').filter((node) => !!node.hasFieldDecorator)
  34. },
  35. getOnlyControl() {
  36. const child = this.getControls()[0]
  37. return child !== undefined ? child : null
  38. },
  39. getChildProp(prop) {
  40. const child = this.getOnlyControl()
  41. return child && child.data && child.data[prop]
  42. },
  43. getMeta() {
  44. return this.getChildProp(FIELD_META_PROP)
  45. },
  46. getField() {
  47. return this.getChildProp(FIELD_DATA_PROP)
  48. },
  49. getValidateState(_fieldMeta, _field) {
  50. const onlyControl = this.getOnlyControl()
  51. if (!onlyControl) {
  52. return ''
  53. }
  54. const fieldMeta = _fieldMeta || this.getMeta()
  55. const field = _field || this.getField()
  56. if (field.validating) {
  57. return 'validating'
  58. }
  59. if (field.errors) {
  60. return 'error'
  61. }
  62. const fieldValue = 'value' in field ? field.value : fieldMeta.initialValue
  63. if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
  64. return 'success'
  65. }
  66. return ''
  67. },
  68. getRequiredState(required) {
  69. if (required !== null) {
  70. return !!required
  71. }
  72. if (this.getOnlyControl()) {
  73. const meta = this.getMeta() || {}
  74. const validate = meta.validate || []
  75. return validate
  76. .filter((item) => !!item.rules)
  77. .some((item) => {
  78. return item.rules.some((rule) => rule.required)
  79. })
  80. }
  81. return false
  82. },
  83. getFeedbackMessage(help) {
  84. // if (help !== null) {
  85. // return help
  86. // }
  87. if (this.getOnlyControl()) {
  88. const { errors } = this.getField()
  89. if (errors) {
  90. return intersperseSpace(
  91. errors.map((e) => (e.message)),
  92. )
  93. }
  94. }
  95. return ''
  96. },
  97. getValidateClasses(mergedValidateStatus, hasFeedback, help) {
  98. if (mergedValidateStatus) {
  99. return classNames({
  100. // 'with-help': help !== null,
  101. // 'has-feedback': mergedValidateStatus && hasFeedback,
  102. 'has-success': mergedValidateStatus === 'success',
  103. 'has-warning': mergedValidateStatus === 'warning',
  104. 'has-error': mergedValidateStatus === 'error',
  105. 'is-validating': mergedValidateStatus === 'validating',
  106. })
  107. }
  108. return ''
  109. },
  110. reRender(props = this.data) {
  111. const mergedValidateStatus = props.validateStatus !== null ? `${props.validateStatus}` : this.getValidateState()
  112. if (this.data.mergedValidateStatus !== mergedValidateStatus) {
  113. this.setData({ mergedValidateStatus })
  114. }
  115. const mergedRequired = this.getRequiredState(props.required)
  116. if (this.data.mergedRequired !== mergedRequired) {
  117. this.setData({ mergedRequired })
  118. }
  119. const feedbackMessage = this.getFeedbackMessage(props.help)
  120. if (this.data.feedbackMessage !== feedbackMessage) {
  121. this.setData({ feedbackMessage })
  122. }
  123. const validateClasses = this.getValidateClasses(mergedValidateStatus, props.hasFeedback, props.help)
  124. if (this.data.validateClasses !== validateClasses) {
  125. this.setData({ validateClasses })
  126. }
  127. },
  128. },
  129. })