Title.js
2.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
import React from 'react';
import { useStore2 } from '../../hooks';
import { isCheckBoxType } from '../../utils';
var Description = function Description(_ref) {
var displayType = _ref.displayType,
schema = _ref.schema;
var description = schema.description,
descType = schema.descType;
if (!description) return null;
switch (displayType) {
case 'row':
return /*#__PURE__*/React.createElement("span", {
className: "fr-tooltip-toggle",
"aria-label": description
}, /*#__PURE__*/React.createElement("i", {
className: "fr-tooltip-icon"
}), /*#__PURE__*/React.createElement("div", {
className: "fr-tooltip-container"
}, /*#__PURE__*/React.createElement("i", {
className: "fr-tooltip-triangle"
}), description));
case 'inline':
return null;
default:
if (descType === 'icon') {
return /*#__PURE__*/React.createElement("span", {
className: "fr-tooltip-toggle",
"aria-label": description
}, /*#__PURE__*/React.createElement("i", {
className: "fr-tooltip-icon"
}), /*#__PURE__*/React.createElement("div", {
className: "fr-tooltip-container"
}, /*#__PURE__*/React.createElement("i", {
className: "fr-tooltip-triangle"
}), description));
}
return /*#__PURE__*/React.createElement("span", {
className: "fr-desc ml2"
}, "( ".concat(description, " )"));
}
};
var Title = function Title(_ref2) {
var labelClass = _ref2.labelClass,
labelStyle = _ref2.labelStyle,
schema = _ref2.schema,
displayType = _ref2.displayType;
var _useStore = useStore2(),
globalDisplayType = _useStore.displayType,
readOnly = _useStore.readOnly;
var title = schema.title,
required = schema.required,
type = schema.type;
var isObjType = type === 'object';
var _displayType = schema.displayType || displayType || globalDisplayType || 'column';
return /*#__PURE__*/React.createElement("div", {
className: labelClass,
style: labelStyle
}, title ? /*#__PURE__*/React.createElement("label", {
className: "fr-label-title ".concat(isCheckBoxType(schema, readOnly) || _displayType === 'column' ? 'no-colon' : '') // checkbox不带冒号
,
title: title
}, required === true && /*#__PURE__*/React.createElement("span", {
className: "fr-label-required"
}, " *"), /*#__PURE__*/React.createElement("span", {
className: "".concat(isObjType ? 'b' : '', " ").concat(_displayType === 'column' ? 'flex-none' : '')
}, /*#__PURE__*/React.createElement("span", {
dangerouslySetInnerHTML: {
__html: title
}
})), /*#__PURE__*/React.createElement(Description, {
schema: schema,
displayType: _displayType
})) : null);
};
export default Title;