@insticc/genericform 1.0.8 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/FormFields/CustomCheckbox.js +79 -28
- package/build/FormFields/CustomDatePicker.js +78 -33
- package/build/FormFields/CustomInput.js +40 -21
- package/build/FormFields/CustomLabel.js +18 -10
- package/build/FormFields/CustomNumberInput.js +37 -23
- package/build/FormFields/CustomRadioButton.js +19 -5
- package/build/FormFields/CustomSearch.js +31 -12
- package/build/FormFields/CustomTextArea.js +43 -20
- package/build/FormFields/MultipleCheckbox.js +45 -21
- package/build/FormFields/MultipleDropdown.js +40 -12
- package/build/FormFields/MultipleRadioButton.js +43 -19
- package/build/FormFields/YearDatePicker.js +67 -33
- package/package.json +1 -1
|
@@ -1,51 +1,102 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports["default"] = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
9
|
var _semanticUiReact = require("semantic-ui-react");
|
|
10
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
11
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
12
|
+
var defaultStyles = {
|
|
13
|
+
mainDiv: {},
|
|
14
|
+
label: {
|
|
15
|
+
display: "inline-block",
|
|
16
|
+
fontSize: "10pt",
|
|
17
|
+
textAlign: "center",
|
|
18
|
+
margin: "0 5px"
|
|
19
|
+
},
|
|
20
|
+
component: {
|
|
21
|
+
display: "inline-block",
|
|
22
|
+
margin: 0
|
|
23
|
+
},
|
|
24
|
+
tooltip: {}
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* A reusable checkbox with optional tooltip and label positioning.
|
|
29
|
+
*
|
|
30
|
+
* @param {Object} props
|
|
31
|
+
* @param {function(string, boolean):void} props.onChange - Callback when checkbox value changes.
|
|
32
|
+
* @param {string} props.name - Unique name of the checkbox.
|
|
33
|
+
* @param {string} props.displayName - Label text displayed next to the checkbox.
|
|
34
|
+
* @param {boolean} [props.checked=false] - Whether the checkbox is checked.
|
|
35
|
+
* @param {boolean} [props.disabled=false] - Whether the checkbox is disabled.
|
|
36
|
+
* @param {boolean} [props.showHelp=false] - Show a help icon with tooltip.
|
|
37
|
+
* @param {string} [props.tooltip=""] - Tooltip text (if showHelp is true).
|
|
38
|
+
* @param {Object} [props.mainDivStyle] - Custom style for outer container.
|
|
39
|
+
* @param {Object} [props.labelStyle] - Custom style for the label element.
|
|
40
|
+
* @param {Object} [props.componentStyle] - Custom style for the checkbox element.
|
|
41
|
+
* @param {Object} [props.tooltipStyle] - Custom style for the tooltip icon.
|
|
42
|
+
*/
|
|
43
|
+
|
|
8
44
|
var CustomCheckbox = function CustomCheckbox(_ref) {
|
|
9
|
-
var
|
|
45
|
+
var onChange = _ref.onChange,
|
|
10
46
|
name = _ref.name,
|
|
11
47
|
displayName = _ref.displayName,
|
|
12
|
-
checked = _ref.checked,
|
|
48
|
+
_ref$checked = _ref.checked,
|
|
49
|
+
checked = _ref$checked === void 0 ? false : _ref$checked,
|
|
13
50
|
_ref$disabled = _ref.disabled,
|
|
14
51
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
15
52
|
_ref$showHelp = _ref.showHelp,
|
|
16
53
|
showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
|
|
17
|
-
_ref$
|
|
18
|
-
|
|
19
|
-
_ref$
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
_ref$
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
return /*#__PURE__*/
|
|
54
|
+
_ref$tooltip = _ref.tooltip,
|
|
55
|
+
tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
|
|
56
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
57
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
|
|
58
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
59
|
+
labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
|
|
60
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
61
|
+
componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle,
|
|
62
|
+
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
63
|
+
tooltipStyle = _ref$tooltipStyle === void 0 ? defaultStyles.tooltip : _ref$tooltipStyle;
|
|
64
|
+
var handleChange = (0, _react.useCallback)(function (e, _ref2) {
|
|
65
|
+
var checked = _ref2.checked;
|
|
66
|
+
onChange === null || onChange === void 0 || onChange(name, checked);
|
|
67
|
+
}, [onChange, name]);
|
|
68
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
32
69
|
className: "checkboxDiv",
|
|
33
70
|
id: name,
|
|
34
|
-
key: name
|
|
35
|
-
|
|
71
|
+
key: name,
|
|
72
|
+
style: mainDivStyle
|
|
73
|
+
}, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Checkbox, {
|
|
74
|
+
id: "form-input-".concat(name),
|
|
36
75
|
type: "checkbox",
|
|
37
|
-
style:
|
|
76
|
+
style: componentStyle,
|
|
38
77
|
checked: checked,
|
|
39
|
-
onChange:
|
|
40
|
-
return _onChange(name);
|
|
41
|
-
},
|
|
78
|
+
onChange: handleChange,
|
|
42
79
|
disabled: disabled
|
|
43
|
-
}), /*#__PURE__*/
|
|
80
|
+
}), /*#__PURE__*/_react["default"].createElement("label", {
|
|
44
81
|
htmlFor: "form-input-" + name,
|
|
45
|
-
style:
|
|
46
|
-
}, displayName, " ", showHelp
|
|
82
|
+
style: labelStyle
|
|
83
|
+
}, displayName, " ", showHelp && tooltip && /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
|
|
47
84
|
name: "help circle",
|
|
48
|
-
title:
|
|
49
|
-
|
|
85
|
+
title: tooltip,
|
|
86
|
+
style: tooltipStyle
|
|
87
|
+
})));
|
|
88
|
+
};
|
|
89
|
+
CustomCheckbox.propTypes = {
|
|
90
|
+
onChange: PropTypes.func.isRequired,
|
|
91
|
+
name: PropTypes.string.isRequired,
|
|
92
|
+
displayName: PropTypes.string,
|
|
93
|
+
checked: PropTypes.bool,
|
|
94
|
+
disabled: PropTypes.bool,
|
|
95
|
+
showHelp: PropTypes.bool,
|
|
96
|
+
tooltip: PropTypes.string,
|
|
97
|
+
mainDivStyle: PropTypes.object,
|
|
98
|
+
labelStyle: PropTypes.object,
|
|
99
|
+
componentStyle: PropTypes.object,
|
|
100
|
+
tooltipStyle: PropTypes.object
|
|
50
101
|
};
|
|
51
102
|
var _default = exports["default"] = CustomCheckbox;
|
|
@@ -1,29 +1,56 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
4
|
Object.defineProperty(exports, "__esModule", {
|
|
4
5
|
value: true
|
|
5
6
|
});
|
|
6
7
|
exports["default"] = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
9
|
var _reactDatetime = _interopRequireDefault(require("react-datetime"));
|
|
8
10
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
11
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
12
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
13
|
+
var defaultStyles = {
|
|
14
|
+
mainDiv: {
|
|
15
|
+
display: "flex",
|
|
16
|
+
alignItems: "baseline",
|
|
17
|
+
gap: "8px"
|
|
12
18
|
},
|
|
13
|
-
|
|
14
|
-
width:
|
|
15
|
-
fontSize:
|
|
16
|
-
textAlign:
|
|
19
|
+
label: {
|
|
20
|
+
width: 160,
|
|
21
|
+
fontSize: "10pt",
|
|
22
|
+
textAlign: "left"
|
|
17
23
|
},
|
|
18
|
-
|
|
24
|
+
component: {
|
|
19
25
|
maxWidth: 350,
|
|
20
|
-
display:
|
|
26
|
+
display: "inline-block"
|
|
21
27
|
},
|
|
22
|
-
|
|
23
|
-
fontSize:
|
|
24
|
-
|
|
28
|
+
tooltip: {
|
|
29
|
+
fontSize: "11px",
|
|
30
|
+
color: "#666"
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Custom date picker component.
|
|
36
|
+
* @param {Object} props
|
|
37
|
+
* @param {function(string, any):void} props.onChange - Callback when date value changes.
|
|
38
|
+
* @param {string} props.name - Unique name of the date picker.
|
|
39
|
+
* @param {string} props.displayName - Label text displayed next to the date picker.
|
|
40
|
+
* @param {any} props.value - Current value of the date picker.
|
|
41
|
+
* @param {boolean} [props.disabled=false] - Whether the date picker is disabled.
|
|
42
|
+
* @param {boolean} [props.required=false] - Whether the date picker is required.
|
|
43
|
+
* @param {string} [props.tooltip=""] - Tooltip text displayed below the date picker.
|
|
44
|
+
* @param {Object} [props.mainDivStyle] - Custom style for outer container.
|
|
45
|
+
* @param {Object} [props.labelStyle] - Custom style for the label element.
|
|
46
|
+
* @param {Object} [props.componentStyle] - Custom style for the date picker element.
|
|
47
|
+
* @param {Object} [props.tooltipStyle] - Custom style for the tooltip text.
|
|
48
|
+
* @param {string} [props.dateFormat="DD/MM/YYYY"] - Date format for the picker.
|
|
49
|
+
* @param {boolean} [props.timeFormat=false] - Whether to include time selection.
|
|
50
|
+
*/
|
|
51
|
+
|
|
25
52
|
var CustomDatePicker = function CustomDatePicker(_ref) {
|
|
26
|
-
var
|
|
53
|
+
var onChange = _ref.onChange,
|
|
27
54
|
name = _ref.name,
|
|
28
55
|
displayName = _ref.displayName,
|
|
29
56
|
value = _ref.value,
|
|
@@ -34,38 +61,56 @@ var CustomDatePicker = function CustomDatePicker(_ref) {
|
|
|
34
61
|
_ref$tooltip = _ref.tooltip,
|
|
35
62
|
tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip,
|
|
36
63
|
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
37
|
-
mainDivStyle = _ref$mainDivStyle === void 0 ?
|
|
64
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
|
|
38
65
|
_ref$labelStyle = _ref.labelStyle,
|
|
39
|
-
labelStyle = _ref$labelStyle === void 0 ?
|
|
66
|
+
labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
|
|
40
67
|
_ref$componentStyle = _ref.componentStyle,
|
|
41
|
-
componentStyle = _ref$componentStyle === void 0 ?
|
|
68
|
+
componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle,
|
|
42
69
|
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
43
|
-
tooltipStyle = _ref$tooltipStyle === void 0 ?
|
|
70
|
+
tooltipStyle = _ref$tooltipStyle === void 0 ? defaultStyles.tooltip : _ref$tooltipStyle,
|
|
44
71
|
_ref$dateFormat = _ref.dateFormat,
|
|
45
|
-
dateFormat = _ref$dateFormat === void 0 ? "DD/MM/YYYY" : _ref$dateFormat
|
|
46
|
-
|
|
72
|
+
dateFormat = _ref$dateFormat === void 0 ? "DD/MM/YYYY" : _ref$dateFormat,
|
|
73
|
+
_ref$timeFormat = _ref.timeFormat,
|
|
74
|
+
timeFormat = _ref$timeFormat === void 0 ? false : _ref$timeFormat;
|
|
75
|
+
var handleChange = (0, _react.useCallback)(function (date) {
|
|
76
|
+
return onChange === null || onChange === void 0 ? void 0 : onChange(date, name);
|
|
77
|
+
}, [onChange, name]);
|
|
78
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
47
79
|
className: "datePickerDiv",
|
|
48
80
|
key: name,
|
|
49
|
-
id:
|
|
81
|
+
id: "form-dateDiv-".concat(name),
|
|
50
82
|
style: mainDivStyle
|
|
51
|
-
}, /*#__PURE__*/
|
|
52
|
-
id:
|
|
53
|
-
htmlFor: "form-date-"
|
|
83
|
+
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
84
|
+
id: "form-datelabel-".concat(name),
|
|
85
|
+
htmlFor: "form-date-".concat(name),
|
|
54
86
|
style: labelStyle
|
|
55
|
-
}, displayName), /*#__PURE__*/
|
|
56
|
-
|
|
57
|
-
id: "form-date-" + name,
|
|
87
|
+
}, displayName), /*#__PURE__*/_react["default"].createElement(_reactDatetime["default"], {
|
|
88
|
+
id: "form-date-".concat(name),
|
|
58
89
|
value: value,
|
|
59
90
|
dateFormat: dateFormat,
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
},
|
|
91
|
+
timeFormat: timeFormat,
|
|
92
|
+
onChange: handleChange,
|
|
63
93
|
input: true,
|
|
64
|
-
timeFormat: false,
|
|
65
94
|
disabled: disabled,
|
|
66
|
-
required: required
|
|
67
|
-
|
|
95
|
+
required: required,
|
|
96
|
+
style: componentStyle
|
|
97
|
+
}), tooltip && /*#__PURE__*/_react["default"].createElement("label", {
|
|
68
98
|
style: tooltipStyle
|
|
69
|
-
}, tooltip)
|
|
99
|
+
}, tooltip));
|
|
100
|
+
};
|
|
101
|
+
CustomDatePicker.propTypes = {
|
|
102
|
+
onChange: PropTypes.func.isRequired,
|
|
103
|
+
name: PropTypes.string.isRequired,
|
|
104
|
+
displayName: PropTypes.string,
|
|
105
|
+
value: PropTypes.any,
|
|
106
|
+
disabled: PropTypes.bool,
|
|
107
|
+
required: PropTypes.bool,
|
|
108
|
+
tooltip: PropTypes.string,
|
|
109
|
+
mainDivStyle: PropTypes.object,
|
|
110
|
+
labelStyle: PropTypes.object,
|
|
111
|
+
componentStyle: PropTypes.object,
|
|
112
|
+
tooltipStyle: PropTypes.object,
|
|
113
|
+
dateFormat: PropTypes.string,
|
|
114
|
+
timeFormat: PropTypes.bool
|
|
70
115
|
};
|
|
71
116
|
var _default = exports["default"] = CustomDatePicker;
|
|
@@ -16,37 +16,42 @@ var CustomInput = function CustomInput(_ref) {
|
|
|
16
16
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
17
17
|
_ref$required = _ref.required,
|
|
18
18
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
19
|
-
_ref$
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
20
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? {
|
|
21
|
+
marginBottom: '13px'
|
|
22
|
+
} : _ref$mainDivStyle,
|
|
23
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
24
|
+
labelStyle = _ref$labelStyle === void 0 ? {
|
|
25
|
+
width: '161px',
|
|
26
|
+
fontSize: '10pt',
|
|
27
|
+
textAlign: 'left'
|
|
28
|
+
} : _ref$labelStyle,
|
|
29
|
+
_ref$spanStyle = _ref.spanStyle,
|
|
30
|
+
spanStyle = _ref$spanStyle === void 0 ? {
|
|
31
|
+
color: '#db2828',
|
|
32
|
+
position: 'relative',
|
|
33
|
+
top: '-2px'
|
|
34
|
+
} : _ref$spanStyle,
|
|
35
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
36
|
+
componentStyle = _ref$componentStyle === void 0 ? {
|
|
37
|
+
minWidth: 350,
|
|
38
|
+
fontSize: '16px !important'
|
|
39
|
+
} : _ref$componentStyle,
|
|
40
|
+
tooltipStyle = _ref.tooltipStyle,
|
|
23
41
|
className = _ref.className;
|
|
24
42
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
25
43
|
className: "inputDiv",
|
|
26
44
|
id: name,
|
|
27
|
-
style:
|
|
28
|
-
marginBottom: '13px'
|
|
29
|
-
},
|
|
45
|
+
style: mainDivStyle,
|
|
30
46
|
key: name
|
|
31
47
|
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
32
48
|
htmlFor: 'form-input-' + name,
|
|
33
|
-
style:
|
|
34
|
-
width: '161px',
|
|
35
|
-
fontSize: '10pt',
|
|
36
|
-
textAlign: 'left'
|
|
37
|
-
}
|
|
49
|
+
style: labelStyle
|
|
38
50
|
}, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
|
|
39
|
-
style:
|
|
40
|
-
color: '#db2828',
|
|
41
|
-
position: 'relative',
|
|
42
|
-
top: '-2px'
|
|
43
|
-
}
|
|
51
|
+
style: spanStyle
|
|
44
52
|
}, "*")), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Input, {
|
|
45
53
|
inline: true,
|
|
46
|
-
style:
|
|
47
|
-
minWidth: 350,
|
|
48
|
-
fontSize: '16px !important'
|
|
49
|
-
},
|
|
54
|
+
style: componentStyle,
|
|
50
55
|
id: "form-input-" + name,
|
|
51
56
|
placeholder: displayName,
|
|
52
57
|
name: name,
|
|
@@ -57,4 +62,18 @@ var CustomInput = function CustomInput(_ref) {
|
|
|
57
62
|
className: className
|
|
58
63
|
}));
|
|
59
64
|
};
|
|
65
|
+
CustomInput.propTypes = {
|
|
66
|
+
onChange: PropTypes.func.isRequired,
|
|
67
|
+
name: PropTypes.string.isRequired,
|
|
68
|
+
displayName: PropTypes.string,
|
|
69
|
+
value: PropTypes.string,
|
|
70
|
+
disabled: PropTypes.bool,
|
|
71
|
+
required: PropTypes.bool,
|
|
72
|
+
mainDivStyle: PropTypes.object,
|
|
73
|
+
labelStyle: PropTypes.object,
|
|
74
|
+
spanStyle: PropTypes.object,
|
|
75
|
+
componentStyle: PropTypes.object,
|
|
76
|
+
tooltipStyle: PropTypes.object,
|
|
77
|
+
className: PropTypes.string
|
|
78
|
+
};
|
|
60
79
|
var _default = exports["default"] = CustomInput;
|
|
@@ -9,22 +9,30 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
|
|
|
9
9
|
var CustomLabel = function CustomLabel(_ref) {
|
|
10
10
|
var name = _ref.name,
|
|
11
11
|
displayName = _ref.displayName,
|
|
12
|
-
_ref$
|
|
13
|
-
|
|
12
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
13
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? {
|
|
14
|
+
marginBottom: '13px'
|
|
15
|
+
} : _ref$mainDivStyle,
|
|
16
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
17
|
+
labelStyle = _ref$labelStyle === void 0 ? {
|
|
18
|
+
width: '161px',
|
|
19
|
+
fontSize: '10pt',
|
|
20
|
+
textAlign: 'left'
|
|
21
|
+
} : _ref$labelStyle;
|
|
14
22
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
15
23
|
className: "labelDiv",
|
|
16
24
|
id: name,
|
|
17
25
|
key: name,
|
|
18
|
-
style:
|
|
19
|
-
marginBottom: '13px'
|
|
20
|
-
}
|
|
26
|
+
style: mainDivStyle
|
|
21
27
|
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
22
28
|
htmlFor: 'form-input-' + name,
|
|
23
|
-
style:
|
|
24
|
-
width: '161px',
|
|
25
|
-
fontSize: '10pt',
|
|
26
|
-
textAlign: 'left'
|
|
27
|
-
}
|
|
29
|
+
style: labelStyle
|
|
28
30
|
}, displayName));
|
|
29
31
|
};
|
|
32
|
+
CustomLabel.propTypes = {
|
|
33
|
+
name: PropTypes.string.isRequired,
|
|
34
|
+
displayName: PropTypes.string,
|
|
35
|
+
mainDivStyle: PropTypes.object,
|
|
36
|
+
labelStyle: PropTypes.object
|
|
37
|
+
};
|
|
30
38
|
var _default = exports["default"] = CustomLabel;
|
|
@@ -20,39 +20,43 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
|
|
|
20
20
|
showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
|
|
21
21
|
_ref$helpText = _ref.helpText,
|
|
22
22
|
helpText = _ref$helpText === void 0 ? "" : _ref$helpText,
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
mainDivStyle = _ref.mainDivStyle,
|
|
24
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
25
|
+
componentStyle = _ref$componentStyle === void 0 ? {
|
|
26
|
+
minWidth: 50,
|
|
27
|
+
fontSize: '16px !important'
|
|
28
|
+
} : _ref$componentStyle,
|
|
29
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
30
|
+
labelStyle = _ref$labelStyle === void 0 ? {
|
|
31
|
+
fontWeight: 'normal !important',
|
|
32
|
+
marginTop: 10,
|
|
33
|
+
width: 150,
|
|
34
|
+
fontSize: '10pt'
|
|
35
|
+
} : _ref$labelStyle,
|
|
36
|
+
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
37
|
+
tooltipStyle = _ref$tooltipStyle === void 0 ? {
|
|
38
|
+
fontSize: '11px'
|
|
39
|
+
} : _ref$tooltipStyle,
|
|
25
40
|
_ref$tooltip = _ref.tooltip,
|
|
26
41
|
tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip;
|
|
27
42
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
28
43
|
className: "inputNumberDiv",
|
|
29
44
|
id: name,
|
|
30
|
-
key: name
|
|
31
|
-
|
|
32
|
-
style: {
|
|
33
|
-
display: 'inline-block',
|
|
34
|
-
margin: '0 0 1em'
|
|
35
|
-
}
|
|
45
|
+
key: name,
|
|
46
|
+
style: mainDivStyle
|
|
36
47
|
}, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Input, {
|
|
37
48
|
inline: true,
|
|
38
|
-
style:
|
|
39
|
-
minWidth: 50,
|
|
40
|
-
fontSize: '16px !important'
|
|
41
|
-
},
|
|
49
|
+
style: componentStyle,
|
|
42
50
|
id: "form-input-" + name,
|
|
43
51
|
placeholder: name,
|
|
44
52
|
type: "number",
|
|
45
53
|
label: /*#__PURE__*/_react["default"].createElement("label", {
|
|
46
54
|
"for": "form-input-" + name,
|
|
47
|
-
style:
|
|
48
|
-
fontWeight: 'normal !important',
|
|
49
|
-
marginTop: 10,
|
|
50
|
-
width: 150,
|
|
51
|
-
fontSize: '10pt'
|
|
52
|
-
}
|
|
55
|
+
style: labelStyle
|
|
53
56
|
}, displayName, " ", showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
|
|
54
57
|
name: "user circle help",
|
|
55
|
-
title: helpText
|
|
58
|
+
title: helpText,
|
|
59
|
+
style: tooltipStyle
|
|
56
60
|
}) : null),
|
|
57
61
|
name: name,
|
|
58
62
|
defaultValue: value,
|
|
@@ -60,9 +64,19 @@ var CustomNumberInput = function CustomNumberInput(_ref) {
|
|
|
60
64
|
disabled: disabled,
|
|
61
65
|
required: required
|
|
62
66
|
}), tooltip != "" ? /*#__PURE__*/_react["default"].createElement("label", {
|
|
63
|
-
style:
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
+
style: tooltipStyle
|
|
68
|
+
}, tooltip) : null);
|
|
69
|
+
};
|
|
70
|
+
CustomNumberInput.propTypes = {
|
|
71
|
+
onChange: PropTypes.func.isRequired,
|
|
72
|
+
name: PropTypes.string.isRequired,
|
|
73
|
+
displayName: PropTypes.string,
|
|
74
|
+
value: PropTypes.string,
|
|
75
|
+
disabled: PropTypes.bool,
|
|
76
|
+
required: PropTypes.bool,
|
|
77
|
+
mainDivStyle: PropTypes.object,
|
|
78
|
+
componentStyle: PropTypes.object,
|
|
79
|
+
labelStyle: PropTypes.object,
|
|
80
|
+
tooltipStyle: PropTypes.object
|
|
67
81
|
};
|
|
68
82
|
var _default = exports["default"] = CustomNumberInput;
|
|
@@ -16,6 +16,12 @@ var CustomRadioButton = function CustomRadioButton(_ref) {
|
|
|
16
16
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
17
17
|
_ref$showHelp = _ref.showHelp,
|
|
18
18
|
showHelp = _ref$showHelp === void 0 ? false : _ref$showHelp,
|
|
19
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
20
|
+
componentStyle = _ref$componentStyle === void 0 ? {
|
|
21
|
+
display: 'inline-block',
|
|
22
|
+
margin: '0'
|
|
23
|
+
} : _ref$componentStyle,
|
|
24
|
+
tooltipStyle = _ref.tooltipStyle,
|
|
19
25
|
_ref$helpText = _ref.helpText,
|
|
20
26
|
helpText = _ref$helpText === void 0 ? "" : _ref$helpText;
|
|
21
27
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -23,10 +29,7 @@ var CustomRadioButton = function CustomRadioButton(_ref) {
|
|
|
23
29
|
className: "radioButtonDiv",
|
|
24
30
|
key: name
|
|
25
31
|
}, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Radio, {
|
|
26
|
-
style:
|
|
27
|
-
display: 'inline-block',
|
|
28
|
-
margin: '0'
|
|
29
|
-
},
|
|
32
|
+
style: componentStyle,
|
|
30
33
|
label: displayName,
|
|
31
34
|
name: name,
|
|
32
35
|
checked: checked,
|
|
@@ -36,7 +39,18 @@ var CustomRadioButton = function CustomRadioButton(_ref) {
|
|
|
36
39
|
disabled: disabled
|
|
37
40
|
}), showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
|
|
38
41
|
name: "help circle",
|
|
39
|
-
title: helpText
|
|
42
|
+
title: helpText,
|
|
43
|
+
style: tooltipStyle
|
|
40
44
|
}) : null);
|
|
41
45
|
};
|
|
46
|
+
CustomRadioButton.propTypes = {
|
|
47
|
+
onChange: PropTypes.func.isRequired,
|
|
48
|
+
name: PropTypes.string.isRequired,
|
|
49
|
+
displayName: PropTypes.string,
|
|
50
|
+
checked: PropTypes.bool,
|
|
51
|
+
disabled: PropTypes.bool,
|
|
52
|
+
showHelp: PropTypes.bool,
|
|
53
|
+
tooltipStyle: PropTypes.object,
|
|
54
|
+
helpText: PropTypes.string
|
|
55
|
+
};
|
|
42
56
|
var _default = exports["default"] = CustomRadioButton;
|
|
@@ -15,24 +15,30 @@ var CustomSearch = function CustomSearch(_ref) {
|
|
|
15
15
|
displayName = _ref.displayName,
|
|
16
16
|
value = _ref.value,
|
|
17
17
|
isLoading = _ref.isLoading,
|
|
18
|
-
options = _ref.options
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
key: name
|
|
23
|
-
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
24
|
-
htmlFor: "form-input-" + name,
|
|
25
|
-
style: {
|
|
18
|
+
options = _ref.options,
|
|
19
|
+
mainDivStyle = _ref.mainDivStyle,
|
|
20
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
21
|
+
labelStyle = _ref$labelStyle === void 0 ? {
|
|
26
22
|
width: '161px',
|
|
27
23
|
fontSize: '10pt',
|
|
28
24
|
textAlign: 'left'
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
25
|
+
} : _ref$labelStyle,
|
|
26
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
27
|
+
componentStyle = _ref$componentStyle === void 0 ? {
|
|
32
28
|
maxWidth: 350,
|
|
33
29
|
display: 'inline-block',
|
|
34
30
|
margin: '0 0 1em'
|
|
35
|
-
}
|
|
31
|
+
} : _ref$componentStyle;
|
|
32
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
33
|
+
className: "searchDiv",
|
|
34
|
+
id: name,
|
|
35
|
+
key: name,
|
|
36
|
+
style: mainDivStyle
|
|
37
|
+
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
38
|
+
htmlFor: "form-input-" + name,
|
|
39
|
+
style: labelStyle
|
|
40
|
+
}, displayName), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Search, {
|
|
41
|
+
style: componentStyle,
|
|
36
42
|
loading: isLoading,
|
|
37
43
|
onResultSelect: handleResultSelect,
|
|
38
44
|
onSearchChange: onChange,
|
|
@@ -41,4 +47,17 @@ var CustomSearch = function CustomSearch(_ref) {
|
|
|
41
47
|
value: value
|
|
42
48
|
}));
|
|
43
49
|
};
|
|
50
|
+
CustomSearch.propTypes = {
|
|
51
|
+
onChange: PropTypes.func.isRequired,
|
|
52
|
+
handleResultSelect: PropTypes.func.isRequired,
|
|
53
|
+
resultRenderer: PropTypes.func,
|
|
54
|
+
name: PropTypes.string.isRequired,
|
|
55
|
+
displayName: PropTypes.string,
|
|
56
|
+
value: PropTypes.string,
|
|
57
|
+
isLoading: PropTypes.bool,
|
|
58
|
+
options: PropTypes.array.isRequired,
|
|
59
|
+
mainDivStyle: PropTypes.object,
|
|
60
|
+
labelStyle: PropTypes.object,
|
|
61
|
+
componentStyle: PropTypes.object
|
|
62
|
+
};
|
|
44
63
|
var _default = exports["default"] = CustomSearch;
|
|
@@ -7,6 +7,23 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _semanticUiReact = require("semantic-ui-react");
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var defaultStyles = {
|
|
11
|
+
mainDiv: {},
|
|
12
|
+
label: {
|
|
13
|
+
fontWeight: 'normal !important',
|
|
14
|
+
marginTop: 10,
|
|
15
|
+
width: 350,
|
|
16
|
+
fontSize: '10pt'
|
|
17
|
+
},
|
|
18
|
+
component: {
|
|
19
|
+
minWidth: 350,
|
|
20
|
+
fontSize: '16px !important',
|
|
21
|
+
height: '90%'
|
|
22
|
+
},
|
|
23
|
+
tooltip: {
|
|
24
|
+
fontSize: '11px'
|
|
25
|
+
}
|
|
26
|
+
};
|
|
10
27
|
var CustomTextArea = function CustomTextArea(_ref) {
|
|
11
28
|
var onChange = _ref.onChange,
|
|
12
29
|
name = _ref.name,
|
|
@@ -16,34 +33,30 @@ var CustomTextArea = function CustomTextArea(_ref) {
|
|
|
16
33
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
17
34
|
_ref$required = _ref.required,
|
|
18
35
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
19
|
-
_ref$
|
|
20
|
-
|
|
21
|
-
_ref$
|
|
22
|
-
|
|
36
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
37
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
|
|
38
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
39
|
+
labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
|
|
40
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
41
|
+
componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle,
|
|
42
|
+
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
43
|
+
tooltipStyle = _ref$tooltipStyle === void 0 ? defaultStyles.tooltip : _ref$tooltipStyle,
|
|
23
44
|
_ref$tooltip = _ref.tooltip,
|
|
24
45
|
tooltip = _ref$tooltip === void 0 ? "" : _ref$tooltip;
|
|
25
46
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
26
47
|
className: "textAreaDiv",
|
|
27
48
|
id: name,
|
|
28
|
-
key: name
|
|
49
|
+
key: name,
|
|
50
|
+
style: mainDivStyle
|
|
29
51
|
}, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.TextArea, {
|
|
30
52
|
inline: true,
|
|
31
|
-
key: name,
|
|
32
|
-
style: style ? style : {
|
|
33
|
-
minWidth: 350,
|
|
34
|
-
fontSize: '16px !important',
|
|
35
|
-
height: height
|
|
36
|
-
},
|
|
37
53
|
id: "form-input-" + name,
|
|
54
|
+
key: name,
|
|
55
|
+
style: componentStyle,
|
|
38
56
|
placeholder: displayName,
|
|
39
57
|
label: /*#__PURE__*/_react["default"].createElement("label", {
|
|
40
58
|
htmlFor: "form-input-" + name,
|
|
41
|
-
style:
|
|
42
|
-
fontWeight: 'normal !important',
|
|
43
|
-
marginTop: 10,
|
|
44
|
-
width: 350,
|
|
45
|
-
fontSize: '10pt'
|
|
46
|
-
}
|
|
59
|
+
style: labelStyle
|
|
47
60
|
}, displayName),
|
|
48
61
|
name: name,
|
|
49
62
|
value: value,
|
|
@@ -52,9 +65,19 @@ var CustomTextArea = function CustomTextArea(_ref) {
|
|
|
52
65
|
required: required,
|
|
53
66
|
rows: 10
|
|
54
67
|
}), tooltip != "" ? /*#__PURE__*/_react["default"].createElement("label", {
|
|
55
|
-
style:
|
|
56
|
-
fontSize: '11px'
|
|
57
|
-
}
|
|
68
|
+
style: tooltipStyle
|
|
58
69
|
}, tooltip) : null);
|
|
59
70
|
};
|
|
71
|
+
CustomTextArea.propTypes = {
|
|
72
|
+
onChange: PropTypes.func.isRequired,
|
|
73
|
+
name: PropTypes.string.isRequired,
|
|
74
|
+
displayName: PropTypes.string,
|
|
75
|
+
value: PropTypes.string,
|
|
76
|
+
disabled: PropTypes.bool,
|
|
77
|
+
required: PropTypes.bool,
|
|
78
|
+
mainDivStyle: PropTypes.object,
|
|
79
|
+
labelStyle: PropTypes.object,
|
|
80
|
+
componentStyle: PropTypes.object,
|
|
81
|
+
tooltipStyle: PropTypes.object
|
|
82
|
+
};
|
|
60
83
|
var _default = exports["default"] = CustomTextArea;
|
|
@@ -7,6 +7,24 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _semanticUiReact = require("semantic-ui-react");
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var defaultStyles = {
|
|
11
|
+
mainDiv: {},
|
|
12
|
+
label: {
|
|
13
|
+
width: '161px',
|
|
14
|
+
fontSize: '10pt',
|
|
15
|
+
textAlign: 'left'
|
|
16
|
+
},
|
|
17
|
+
span: {
|
|
18
|
+
color: '#db2828',
|
|
19
|
+
position: 'relative',
|
|
20
|
+
top: '-2px'
|
|
21
|
+
},
|
|
22
|
+
component: {
|
|
23
|
+
display: 'inline-block',
|
|
24
|
+
margin: '0'
|
|
25
|
+
},
|
|
26
|
+
tooltip: {}
|
|
27
|
+
};
|
|
10
28
|
var MultipleCheckbox = function MultipleCheckbox(_ref) {
|
|
11
29
|
var _onChange = _ref.onChange,
|
|
12
30
|
name = _ref.name,
|
|
@@ -14,30 +32,26 @@ var MultipleCheckbox = function MultipleCheckbox(_ref) {
|
|
|
14
32
|
options = _ref.options,
|
|
15
33
|
_ref$required = _ref.required,
|
|
16
34
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
17
|
-
_ref$
|
|
18
|
-
|
|
35
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
36
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
|
|
19
37
|
_ref$labelStyle = _ref.labelStyle,
|
|
20
|
-
labelStyle = _ref$labelStyle === void 0 ?
|
|
21
|
-
_ref$
|
|
22
|
-
|
|
38
|
+
labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
|
|
39
|
+
_ref$spanStyle = _ref.spanStyle,
|
|
40
|
+
spanStyle = _ref$spanStyle === void 0 ? defaultStyles.span : _ref$spanStyle,
|
|
41
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
42
|
+
componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle,
|
|
43
|
+
_ref$tooltipStyle = _ref.tooltipStyle,
|
|
44
|
+
tooltipStyle = _ref$tooltipStyle === void 0 ? defaultStyles.tooltip : _ref$tooltipStyle;
|
|
23
45
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
24
46
|
key: name,
|
|
25
47
|
id: name,
|
|
26
48
|
className: "multipleCheckboxDiv",
|
|
27
|
-
style:
|
|
49
|
+
style: mainDivStyle
|
|
28
50
|
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
29
51
|
htmlFor: 'form-input-' + name,
|
|
30
|
-
style: labelStyle
|
|
31
|
-
width: '161px',
|
|
32
|
-
fontSize: '10pt',
|
|
33
|
-
textAlign: 'left'
|
|
34
|
-
}
|
|
52
|
+
style: labelStyle
|
|
35
53
|
}, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
|
|
36
|
-
style:
|
|
37
|
-
color: '#db2828',
|
|
38
|
-
position: 'relative',
|
|
39
|
-
top: '-2px'
|
|
40
|
-
}
|
|
54
|
+
style: spanStyle
|
|
41
55
|
}, "*")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
42
56
|
className: "multipleCheckboxGroupDiv"
|
|
43
57
|
}, options.map(function (option, index) {
|
|
@@ -47,10 +61,7 @@ var MultipleCheckbox = function MultipleCheckbox(_ref) {
|
|
|
47
61
|
style: checkboxDivStyle
|
|
48
62
|
}, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Checkbox, {
|
|
49
63
|
type: "checkbox",
|
|
50
|
-
style:
|
|
51
|
-
display: 'inline-block',
|
|
52
|
-
margin: '0'
|
|
53
|
-
},
|
|
64
|
+
style: componentStyle,
|
|
54
65
|
label: option.label,
|
|
55
66
|
name: option.name,
|
|
56
67
|
checked: option.checked,
|
|
@@ -60,8 +71,21 @@ var MultipleCheckbox = function MultipleCheckbox(_ref) {
|
|
|
60
71
|
disabled: option.disabled
|
|
61
72
|
}), option.showHelp ? /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Icon, {
|
|
62
73
|
name: "help circle",
|
|
63
|
-
title: option.helpText
|
|
74
|
+
title: option.helpText,
|
|
75
|
+
style: tooltipStyle
|
|
64
76
|
}) : null);
|
|
65
77
|
})));
|
|
66
78
|
};
|
|
79
|
+
MultipleCheckbox.propTypes = {
|
|
80
|
+
onChange: PropTypes.func.isRequired,
|
|
81
|
+
name: PropTypes.string.isRequired,
|
|
82
|
+
displayName: PropTypes.string,
|
|
83
|
+
required: PropTypes.bool,
|
|
84
|
+
options: PropTypes.array.isRequired,
|
|
85
|
+
mainDivStyle: PropTypes.object,
|
|
86
|
+
labelStyle: PropTypes.object,
|
|
87
|
+
spanStyle: PropTypes.object,
|
|
88
|
+
componentStyle: PropTypes.object,
|
|
89
|
+
tooltipStyle: PropTypes.object
|
|
90
|
+
};
|
|
67
91
|
var _default = exports["default"] = MultipleCheckbox;
|
|
@@ -7,6 +7,24 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _semanticUiReact = require("semantic-ui-react");
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var defaultStyles = {
|
|
11
|
+
mainDiv: {}
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Custom multiple dropdown component.
|
|
16
|
+
* @param {Object} props
|
|
17
|
+
* @param {function} props.onChange - Callback when dropdown value changes.
|
|
18
|
+
* @param {string} props.name - Unique name of the dropdown.
|
|
19
|
+
* @param {string} props.displayName - Label text displayed next to the dropdown.
|
|
20
|
+
* @param {Array} props.value - Current selected values of the dropdown.
|
|
21
|
+
* @param {boolean} [props.disabled=false] - Whether the dropdown is disabled.
|
|
22
|
+
* @param {Array} props.options - Options for the dropdown.
|
|
23
|
+
* @param {Object} [props.mainDivStyle] - Custom style for outer container.
|
|
24
|
+
* @param {Object} [props.labelStyle] - Custom style for the label element.
|
|
25
|
+
* @param {Object} [props.componentStyle] - Custom style for the dropdown element.
|
|
26
|
+
*/
|
|
27
|
+
|
|
10
28
|
var MultipleDropdown = function MultipleDropdown(_ref) {
|
|
11
29
|
var onChange = _ref.onChange,
|
|
12
30
|
name = _ref.name,
|
|
@@ -14,24 +32,23 @@ var MultipleDropdown = function MultipleDropdown(_ref) {
|
|
|
14
32
|
value = _ref.value,
|
|
15
33
|
_ref$disabled = _ref.disabled,
|
|
16
34
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
17
|
-
options = _ref.options
|
|
35
|
+
options = _ref.options,
|
|
36
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
37
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
|
|
38
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
39
|
+
labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
|
|
40
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
41
|
+
componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle;
|
|
18
42
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
19
43
|
className: "multipleDropdownDiv",
|
|
20
44
|
id: name,
|
|
21
|
-
key: name
|
|
45
|
+
key: name,
|
|
46
|
+
style: mainDivStyle
|
|
22
47
|
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
23
48
|
htmlFor: "form-input-" + name,
|
|
24
|
-
style:
|
|
25
|
-
width: '161px',
|
|
26
|
-
fontSize: '10pt',
|
|
27
|
-
textAlign: 'left'
|
|
28
|
-
}
|
|
49
|
+
style: labelStyle
|
|
29
50
|
}, displayName), /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Dropdown, {
|
|
30
|
-
style:
|
|
31
|
-
maxWidth: 350,
|
|
32
|
-
display: 'inline-block',
|
|
33
|
-
margin: '0 0 1em'
|
|
34
|
-
},
|
|
51
|
+
style: componentStyle,
|
|
35
52
|
placeholder: "Select " + name,
|
|
36
53
|
name: name,
|
|
37
54
|
fluid: true,
|
|
@@ -44,4 +61,15 @@ var MultipleDropdown = function MultipleDropdown(_ref) {
|
|
|
44
61
|
disabled: disabled
|
|
45
62
|
}));
|
|
46
63
|
};
|
|
64
|
+
MultipleDropdown.propTypes = {
|
|
65
|
+
onChange: PropTypes.func.isRequired,
|
|
66
|
+
name: PropTypes.string.isRequired,
|
|
67
|
+
displayName: PropTypes.string,
|
|
68
|
+
value: PropTypes.array,
|
|
69
|
+
disabled: PropTypes.bool,
|
|
70
|
+
options: PropTypes.array.isRequired,
|
|
71
|
+
mainDivStyle: PropTypes.object,
|
|
72
|
+
labelStyle: PropTypes.object,
|
|
73
|
+
componentStyle: PropTypes.object
|
|
74
|
+
};
|
|
47
75
|
var _default = exports["default"] = MultipleDropdown;
|
|
@@ -7,36 +7,50 @@ exports["default"] = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _semanticUiReact = require("semantic-ui-react");
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
|
+
var defaultStyles = {
|
|
11
|
+
mainDiv: {},
|
|
12
|
+
label: {
|
|
13
|
+
width: '161px',
|
|
14
|
+
fontSize: '10pt',
|
|
15
|
+
textAlign: 'left'
|
|
16
|
+
},
|
|
17
|
+
span: {
|
|
18
|
+
color: '#db2828',
|
|
19
|
+
position: 'relative',
|
|
20
|
+
top: '-2px'
|
|
21
|
+
},
|
|
22
|
+
component: {
|
|
23
|
+
display: 'inline-block',
|
|
24
|
+
margin: '0'
|
|
25
|
+
}
|
|
26
|
+
};
|
|
10
27
|
var MultipleRadioButton = function MultipleRadioButton(_ref) {
|
|
11
28
|
var _onChange = _ref.onChange,
|
|
12
29
|
name = _ref.name,
|
|
13
30
|
displayName = _ref.displayName,
|
|
14
|
-
divStyle = _ref.divStyle,
|
|
15
|
-
_ref$labelStyle = _ref.labelStyle,
|
|
16
|
-
labelStyle = _ref$labelStyle === void 0 ? null : _ref$labelStyle,
|
|
17
31
|
_ref$required = _ref.required,
|
|
18
32
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
19
33
|
options = _ref.options,
|
|
20
34
|
radioButtonDivStyle = _ref.radioButtonDivStyle,
|
|
21
|
-
component = _ref.component
|
|
35
|
+
component = _ref.component,
|
|
36
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
37
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
|
|
38
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
39
|
+
labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
|
|
40
|
+
_ref$spanStyle = _ref.spanStyle,
|
|
41
|
+
spanStyle = _ref$spanStyle === void 0 ? defaultStyles.span : _ref$spanStyle,
|
|
42
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
43
|
+
componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle;
|
|
22
44
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
23
45
|
id: name,
|
|
24
46
|
className: "multipleRadioDiv",
|
|
25
47
|
key: name,
|
|
26
|
-
style:
|
|
48
|
+
style: mainDivStyle
|
|
27
49
|
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
28
50
|
htmlFor: 'form-input-' + name,
|
|
29
|
-
style: labelStyle
|
|
30
|
-
width: '161px',
|
|
31
|
-
fontSize: '10pt',
|
|
32
|
-
textAlign: 'left'
|
|
33
|
-
}
|
|
51
|
+
style: labelStyle
|
|
34
52
|
}, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
|
|
35
|
-
style:
|
|
36
|
-
color: '#db2828',
|
|
37
|
-
position: 'relative',
|
|
38
|
-
top: '-2px'
|
|
39
|
-
}
|
|
53
|
+
style: spanStyle
|
|
40
54
|
}, "*")), /*#__PURE__*/_react["default"].createElement("div", {
|
|
41
55
|
className: "multipleRadioGroupDiv",
|
|
42
56
|
style: radioButtonDivStyle
|
|
@@ -45,10 +59,7 @@ var MultipleRadioButton = function MultipleRadioButton(_ref) {
|
|
|
45
59
|
key: index,
|
|
46
60
|
className: "radioButtonDiv"
|
|
47
61
|
}, /*#__PURE__*/_react["default"].createElement(_semanticUiReact.Form.Radio, {
|
|
48
|
-
style:
|
|
49
|
-
display: 'inline-block',
|
|
50
|
-
margin: '0'
|
|
51
|
-
},
|
|
62
|
+
style: componentStyle,
|
|
52
63
|
label: option.label,
|
|
53
64
|
name: option.name,
|
|
54
65
|
checked: option.checked,
|
|
@@ -62,4 +73,17 @@ var MultipleRadioButton = function MultipleRadioButton(_ref) {
|
|
|
62
73
|
}) : null);
|
|
63
74
|
}), component ? component : null));
|
|
64
75
|
};
|
|
76
|
+
MultipleRadioButton.propTypes = {
|
|
77
|
+
onChange: PropTypes.func.isRequired,
|
|
78
|
+
name: PropTypes.string.isRequired,
|
|
79
|
+
displayName: PropTypes.string,
|
|
80
|
+
required: PropTypes.bool,
|
|
81
|
+
options: PropTypes.array.isRequired,
|
|
82
|
+
radioButtonDivStyle: PropTypes.object,
|
|
83
|
+
component: PropTypes.node,
|
|
84
|
+
mainDivStyle: PropTypes.object,
|
|
85
|
+
labelStyle: PropTypes.object,
|
|
86
|
+
spanStyle: PropTypes.object,
|
|
87
|
+
componentStyle: PropTypes.object
|
|
88
|
+
};
|
|
65
89
|
var _default = exports["default"] = MultipleRadioButton;
|
|
@@ -8,6 +8,26 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _reactDatetime = _interopRequireDefault(require("react-datetime"));
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
10
10
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
11
|
+
var defaultStyles = {
|
|
12
|
+
mainDiv: {
|
|
13
|
+
display: 'flex',
|
|
14
|
+
alignItems: 'center'
|
|
15
|
+
},
|
|
16
|
+
label: {
|
|
17
|
+
width: '161px',
|
|
18
|
+
fontSize: '10pt',
|
|
19
|
+
textAlign: 'left'
|
|
20
|
+
},
|
|
21
|
+
span: {
|
|
22
|
+
color: '#db2828',
|
|
23
|
+
position: 'relative',
|
|
24
|
+
top: '-2px'
|
|
25
|
+
},
|
|
26
|
+
component: {
|
|
27
|
+
maxWidth: 350,
|
|
28
|
+
display: 'inline-block'
|
|
29
|
+
}
|
|
30
|
+
};
|
|
11
31
|
var YearDatePicker = function YearDatePicker(_ref) {
|
|
12
32
|
var _onChange = _ref.onChange,
|
|
13
33
|
name = _ref.name,
|
|
@@ -17,54 +37,50 @@ var YearDatePicker = function YearDatePicker(_ref) {
|
|
|
17
37
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
18
38
|
_ref$required = _ref.required,
|
|
19
39
|
required = _ref$required === void 0 ? false : _ref$required,
|
|
20
|
-
_ref$
|
|
21
|
-
|
|
22
|
-
_ref$
|
|
23
|
-
|
|
40
|
+
_ref$mainDivStyle = _ref.mainDivStyle,
|
|
41
|
+
mainDivStyle = _ref$mainDivStyle === void 0 ? defaultStyles.mainDiv : _ref$mainDivStyle,
|
|
42
|
+
_ref$labelStyle = _ref.labelStyle,
|
|
43
|
+
labelStyle = _ref$labelStyle === void 0 ? defaultStyles.label : _ref$labelStyle,
|
|
44
|
+
_ref$spanStyle = _ref.spanStyle,
|
|
45
|
+
spanStyle = _ref$spanStyle === void 0 ? defaultStyles.span : _ref$spanStyle,
|
|
46
|
+
_ref$componentStyle = _ref.componentStyle,
|
|
47
|
+
componentStyle = _ref$componentStyle === void 0 ? defaultStyles.component : _ref$componentStyle,
|
|
48
|
+
_ref$dateFormat = _ref.dateFormat,
|
|
49
|
+
dateFormat = _ref$dateFormat === void 0 ? "DD/MM/YYYY" : _ref$dateFormat,
|
|
50
|
+
_ref$timeFormat = _ref.timeFormat,
|
|
51
|
+
timeFormat = _ref$timeFormat === void 0 ? false : _ref$timeFormat,
|
|
52
|
+
_ref$input = _ref.input,
|
|
53
|
+
input = _ref$input === void 0 ? true : _ref$input,
|
|
54
|
+
_ref$viewMode = _ref.viewMode,
|
|
55
|
+
viewMode = _ref$viewMode === void 0 ? "years" : _ref$viewMode,
|
|
56
|
+
_ref$placeholder = _ref.placeholder,
|
|
57
|
+
placeholder = _ref$placeholder === void 0 ? "Select year" : _ref$placeholder,
|
|
58
|
+
isValidDateFunction = _ref.isValidDateFunction;
|
|
24
59
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
25
60
|
className: "yearDateDiv",
|
|
26
61
|
key: name,
|
|
27
62
|
id: 'form-dateYearDiv-' + name,
|
|
28
|
-
style:
|
|
29
|
-
display: 'flex',
|
|
30
|
-
alignItems: 'center'
|
|
31
|
-
}
|
|
63
|
+
style: mainDivStyle
|
|
32
64
|
}, /*#__PURE__*/_react["default"].createElement("label", {
|
|
33
65
|
id: 'form-dateYearlabel-' + name,
|
|
34
66
|
htmlFor: "form-dateYear-" + name,
|
|
35
|
-
style:
|
|
36
|
-
width: '161px',
|
|
37
|
-
fontSize: '10pt',
|
|
38
|
-
textAlign: 'left'
|
|
39
|
-
}
|
|
67
|
+
style: labelStyle
|
|
40
68
|
}, displayName, " ", required && /*#__PURE__*/_react["default"].createElement("span", {
|
|
41
|
-
style:
|
|
42
|
-
color: '#db2828',
|
|
43
|
-
position: 'relative',
|
|
44
|
-
top: '-2px'
|
|
45
|
-
}
|
|
69
|
+
style: spanStyle
|
|
46
70
|
}, "*")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_reactDatetime["default"], {
|
|
47
|
-
style:
|
|
48
|
-
maxWidth: 350,
|
|
49
|
-
display: 'inline-block'
|
|
50
|
-
},
|
|
71
|
+
style: componentStyle,
|
|
51
72
|
id: "form-dateYear-" + name,
|
|
52
73
|
value: value,
|
|
53
|
-
dateFormat:
|
|
54
|
-
timeFormat:
|
|
55
|
-
input:
|
|
74
|
+
dateFormat: dateFormat,
|
|
75
|
+
timeFormat: timeFormat,
|
|
76
|
+
input: input,
|
|
56
77
|
onChange: function onChange(date) {
|
|
57
78
|
return _onChange(date, name);
|
|
58
79
|
},
|
|
59
|
-
viewMode:
|
|
80
|
+
viewMode: viewMode,
|
|
60
81
|
disabled: disabled,
|
|
61
82
|
isValidDate: function isValidDate(current) {
|
|
62
|
-
|
|
63
|
-
var year = current.year();
|
|
64
|
-
var currentYear = new Date().getFullYear();
|
|
65
|
-
return year >= 2000 && year <= currentYear;
|
|
66
|
-
}
|
|
67
|
-
return true;
|
|
83
|
+
return isValidDateFunction(current);
|
|
68
84
|
},
|
|
69
85
|
renderInput: function renderInput(props, openCalendar) {
|
|
70
86
|
return /*#__PURE__*/_react["default"].createElement("input", _extends({}, props, {
|
|
@@ -73,8 +89,26 @@ var YearDatePicker = function YearDatePicker(_ref) {
|
|
|
73
89
|
}));
|
|
74
90
|
},
|
|
75
91
|
inputProps: {
|
|
76
|
-
placeholder:
|
|
92
|
+
placeholder: placeholder
|
|
77
93
|
}
|
|
78
94
|
})));
|
|
79
95
|
};
|
|
96
|
+
YearDatePicker.propTypes = {
|
|
97
|
+
onChange: PropTypes.func.isRequired,
|
|
98
|
+
name: PropTypes.string.isRequired,
|
|
99
|
+
displayName: PropTypes.string,
|
|
100
|
+
value: PropTypes.any,
|
|
101
|
+
disabled: PropTypes.bool,
|
|
102
|
+
required: PropTypes.bool,
|
|
103
|
+
mainDivStyle: PropTypes.object,
|
|
104
|
+
labelStyle: PropTypes.object,
|
|
105
|
+
spanStyle: PropTypes.object,
|
|
106
|
+
componentStyle: PropTypes.object,
|
|
107
|
+
dateFormat: PropTypes.string,
|
|
108
|
+
timeFormat: PropTypes.bool,
|
|
109
|
+
input: PropTypes.bool,
|
|
110
|
+
viewMode: PropTypes.string,
|
|
111
|
+
placeholder: PropTypes.string,
|
|
112
|
+
isValidDateFunction: PropTypes.func
|
|
113
|
+
};
|
|
80
114
|
var _default = exports["default"] = YearDatePicker;
|