1 | import React, { Component } from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import { AvGroup, AvFeedback } from 'availity-reactstrap-validation';
|
4 | import { Col, FormText, Label } from 'reactstrap';
|
5 |
|
6 | import AvDateRange from './AvDateRange';
|
7 |
|
8 | const colSizes = ['xs', 'sm', 'md', 'lg', 'xl'];
|
9 |
|
10 | class AvDateRangeField extends Component {
|
11 | getChildContext() {
|
12 | this.FormCtrl = { ...this.context.FormCtrl };
|
13 | const registerValidator = this.FormCtrl.register;
|
14 | const { getInputState } = this.FormCtrl;
|
15 | this.FormCtrl.getInputState = inputName => {
|
16 | if (
|
17 | inputName === this.props.start.name ||
|
18 | inputName === this.props.end.name
|
19 | ) {
|
20 | return this.getInputState();
|
21 | }
|
22 | return getInputState(inputName);
|
23 | };
|
24 | this.FormCtrl.register = (input, updater = input && input.forceUpdate) => {
|
25 | registerValidator(input, () => {
|
26 | this.forceUpdate();
|
27 | if (updater) updater();
|
28 | });
|
29 | };
|
30 | return {
|
31 | FormCtrl: this.FormCtrl,
|
32 | };
|
33 | }
|
34 |
|
35 | getInputState = () => {
|
36 | const startValidation = this.context.FormCtrl.getInputState(
|
37 | this.props.start.name
|
38 | );
|
39 | if (startValidation.errorMessage) return startValidation;
|
40 | const endValidation = this.context.FormCtrl.getInputState(
|
41 | this.props.end.name
|
42 | );
|
43 | return endValidation;
|
44 | };
|
45 |
|
46 | render() {
|
47 | let row = false;
|
48 | const col = {};
|
49 | const labelCol = {};
|
50 | const {
|
51 | helpMessage,
|
52 | label,
|
53 | labelHidden,
|
54 | inputClass,
|
55 | labelClass,
|
56 | children,
|
57 | id = this.props.name,
|
58 | size,
|
59 | disabled,
|
60 | readOnly,
|
61 | grid,
|
62 | labelAttrs,
|
63 | groupAttrs,
|
64 | ...attributes
|
65 | } = this.props;
|
66 |
|
67 | if (grid) {
|
68 | colSizes.forEach(colSize => {
|
69 | if (grid[colSize]) {
|
70 | row = true;
|
71 | const sizeNum = parseInt(grid[colSize], 10);
|
72 | col[colSize] = sizeNum;
|
73 | labelCol[colSize] = 12 - sizeNum;
|
74 | }
|
75 | });
|
76 | }
|
77 |
|
78 | const input = (
|
79 | <AvDateRange
|
80 | id={id}
|
81 | className={inputClass}
|
82 | size={size}
|
83 | disabled={disabled}
|
84 | readOnly={readOnly}
|
85 | {...attributes}
|
86 | >
|
87 | {children}
|
88 | </AvDateRange>
|
89 | );
|
90 |
|
91 | const validation = this.getInputState();
|
92 |
|
93 | const feedback = validation.error ? (
|
94 | <AvFeedback className="d-block">{validation.errorMessage}</AvFeedback>
|
95 | ) : null;
|
96 | const help = helpMessage ? <FormText>{helpMessage}</FormText> : null;
|
97 |
|
98 | return (
|
99 | <AvGroup disabled={disabled} row={row} {...groupAttrs}>
|
100 | {label && (
|
101 | <Label
|
102 | for={id}
|
103 | className={labelClass}
|
104 | hidden={labelHidden}
|
105 | size={size}
|
106 | {...labelCol}
|
107 | {...labelAttrs}
|
108 | >
|
109 | {label}
|
110 | </Label>
|
111 | )}
|
112 | {row ? (
|
113 | <Col {...col}>
|
114 | {input}
|
115 | {feedback}
|
116 | {help}
|
117 | </Col>
|
118 | ) : (
|
119 | input
|
120 | )}
|
121 | {!row && feedback}
|
122 | {!row && help}
|
123 | </AvGroup>
|
124 | );
|
125 | }
|
126 | }
|
127 |
|
128 | AvDateRangeField.propTypes = {
|
129 | label: PropTypes.node,
|
130 | labelHidden: PropTypes.bool,
|
131 | disabled: PropTypes.bool,
|
132 | readOnly: PropTypes.bool,
|
133 | id: PropTypes.string,
|
134 | inputClass: PropTypes.string,
|
135 | labelClass: PropTypes.string,
|
136 | helpMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
137 | errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
138 | labelAttrs: PropTypes.object,
|
139 | groupAttrs: PropTypes.object,
|
140 | grid: PropTypes.object,
|
141 | start: PropTypes.object,
|
142 | end: PropTypes.object,
|
143 | size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
144 | children: PropTypes.node,
|
145 | name: PropTypes.string.isRequired,
|
146 | };
|
147 |
|
148 | AvDateRangeField.contextTypes = {
|
149 | FormCtrl: PropTypes.object.isRequired,
|
150 | };
|
151 |
|
152 | AvDateRangeField.childContextTypes = {
|
153 | FormCtrl: PropTypes.object.isRequired,
|
154 | };
|
155 |
|
156 | export default AvDateRangeField;
|