Title.js
3.17 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
87
88
89
90
91
92
93
94
95
96
97
98
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _hooks = require("../../hooks");
var _utils = require("../../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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.default.createElement("span", {
className: "fr-tooltip-toggle",
"aria-label": description
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fr-tooltip-icon"
}), /*#__PURE__*/_react.default.createElement("div", {
className: "fr-tooltip-container"
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fr-tooltip-triangle"
}), description));
case 'inline':
return null;
default:
if (descType === 'icon') {
return /*#__PURE__*/_react.default.createElement("span", {
className: "fr-tooltip-toggle",
"aria-label": description
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fr-tooltip-icon"
}), /*#__PURE__*/_react.default.createElement("div", {
className: "fr-tooltip-container"
}, /*#__PURE__*/_react.default.createElement("i", {
className: "fr-tooltip-triangle"
}), description));
}
return /*#__PURE__*/_react.default.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 = (0, _hooks.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.default.createElement("div", {
className: labelClass,
style: labelStyle
}, title ? /*#__PURE__*/_react.default.createElement("label", {
className: "fr-label-title ".concat((0, _utils.isCheckBoxType)(schema, readOnly) || _displayType === 'column' ? 'no-colon' : '') // checkbox不带冒号
,
title: title
}, required === true && /*#__PURE__*/_react.default.createElement("span", {
className: "fr-label-required"
}, " *"), /*#__PURE__*/_react.default.createElement("span", {
className: "".concat(isObjType ? 'b' : '', " ").concat(_displayType === 'column' ? 'flex-none' : '')
}, /*#__PURE__*/_react.default.createElement("span", {
dangerouslySetInnerHTML: {
__html: title
}
})), /*#__PURE__*/_react.default.createElement(Description, {
schema: schema,
displayType: _displayType
})) : null);
};
var _default = Title;
exports.default = _default;