@semcore/tag 3.7.1 → 4.0.0
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/CHANGELOG.md +23 -0
- package/lib/cjs/Tag.js +123 -75
- package/lib/cjs/Tag.js.map +1 -1
- package/lib/cjs/index.d.ts +68 -0
- package/lib/cjs/index.js +2 -19
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/tag.shadow.css +93 -176
- package/lib/es6/Tag.js +121 -76
- package/lib/es6/Tag.js.map +1 -1
- package/lib/es6/index.d.ts +68 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/tag.shadow.css +93 -176
- package/lib/types/index.d.ts +5 -3
- package/package.json +4 -1
- package/src/Tag.jsx +86 -29
- package/src/index.d.ts +5 -3
- package/src/index.js +0 -1
- package/src/style/tag.shadow.css +93 -176
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.0.0] - 2022-05-17
|
|
6
|
+
|
|
7
|
+
### BREAK
|
|
8
|
+
|
|
9
|
+
- Updated styles according to the library redesign policy.
|
|
10
|
+
- Set `primary` as default component theme.
|
|
11
|
+
|
|
12
|
+
### Added
|
|
13
|
+
|
|
14
|
+
- Added `additional` theme.
|
|
15
|
+
|
|
16
|
+
## [3.7.3] - 2022-05-16
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.21.0 ~> 2.24.0]).
|
|
21
|
+
|
|
22
|
+
## [3.7.2] - 2022-04-28
|
|
23
|
+
|
|
24
|
+
### Changed
|
|
25
|
+
|
|
26
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.20.0 ~> 2.21.0]).
|
|
27
|
+
|
|
5
28
|
## [3.7.1] - 2022-03-21
|
|
6
29
|
|
|
7
30
|
### Changed
|
package/lib/cjs/Tag.js
CHANGED
|
@@ -31,6 +31,8 @@ var _color = _interopRequireWildcard(require("@semcore/utils/lib/color"));
|
|
|
31
31
|
|
|
32
32
|
var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
|
|
33
33
|
|
|
34
|
+
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
35
|
+
|
|
34
36
|
var _m = _interopRequireDefault(require("@semcore/icon/Close/m"));
|
|
35
37
|
|
|
36
38
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -50,95 +52,143 @@ var style = (
|
|
|
50
52
|
/*__reshadow_css_start__*/
|
|
51
53
|
_core.sstyled.insert(
|
|
52
54
|
/*__inner_css_start__*/
|
|
53
|
-
".
|
|
55
|
+
".___STag_1xzml_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:24px;padding-left:4px;padding-right:4px;font-weight:500;background-color:var(--colorBg_mtk9p);color:var(--colorText_mtk9p);border-color:var(--colorBorder_mtk9p)}.___STag_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:var(--colorBgHover_mtk9p)}.___STag_1xzml_gg_.__disabled_1xzml_gg_{opacity:0.3;cursor:default;pointer-events:none}.___STag_1xzml_gg_.__interactive_1xzml_gg_{cursor:pointer}.___STag_1xzml_gg_._size_m_1xzml_gg_{height:20px;min-width:20px;font-size:12px}.___STag_1xzml_gg_._size_m_1xzml_gg_ .___SCircle_1xzml_gg_:first-child{margin-left:-2px}.___STag_1xzml_gg_._size_m_1xzml_gg_ .___SCircle_1xzml_gg_:last-child{margin-right:-2px}.___STag_1xzml_gg_._size_l_1xzml_gg_{height:28px;min-width:28px;font-size:14px}.___STag_1xzml_gg_._size_xl_1xzml_gg_{height:40px;min-width:40px;font-size:16px}.___STag_1xzml_gg_._theme_primary_1xzml_gg_{background-color:var(--colorBg_mtk9p);border-color:var(--colorBg_mtk9p);color:var(--colorText_mtk9p)}.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_primary_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:var(--colorBgHover_mtk9p)}.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_{background-color:hsla(0,0%,100%,.15);color:#ffffff}.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_primary-invert_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:hsla(0,0%,100%,.3)}.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_{color:#ffffff;border-color:hsla(0,0%,100%,.3)}.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_additional-invert_1xzml_gg_.__interactive_1xzml_gg_:hover,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__active_1xzml_gg_,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__interactive_1xzml_gg_:active,.___STag_1xzml_gg_._theme_secondary-invert_1xzml_gg_.__interactive_1xzml_gg_:hover{background-color:hsla(0,0%,100%,.1)}.___STag_1xzml_gg_._theme_additional_1xzml_gg_{border-style:dashed}.___SText_1xzml_gg_{display:inline-block;padding-left:4px;padding-right:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.___SText_1xzml_gg_:not(:only-child):first-child{padding-right:0}.___SText_1xzml_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1xzml_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1xzml_gg_{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding-left:4px;padding-right:4px}.___SCircle_1xzml_gg_{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;margin:0 4px}.___SCircle_1xzml_gg_:first-child{margin-left:0}.___SCircle_1xzml_gg_:last-child{margin-right:0}.___SCircle_1xzml_gg_._size_m_1xzml_gg_{width:16px;height:16px}.___SCircle_1xzml_gg_._size_l_1xzml_gg_{width:20px;height:20px}.___SCircle_1xzml_gg_._size_xl_1xzml_gg_{width:20px;height:20px}.___SClose_1xzml_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}"
|
|
54
56
|
/*__inner_css_end__*/
|
|
55
|
-
, "
|
|
57
|
+
, "mtk9p_gg_")
|
|
56
58
|
/*__reshadow_css_end__*/
|
|
57
59
|
, {
|
|
58
|
-
"__STag": "
|
|
59
|
-
"
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"
|
|
63
|
-
"_interactive": "
|
|
64
|
-
"
|
|
65
|
-
"
|
|
66
|
-
"_size_m": "
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"_theme_primary
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"_theme_secondary-
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
60
|
+
"__STag": "___STag_1xzml_gg_",
|
|
61
|
+
"--colorBg": "--colorBg_mtk9p",
|
|
62
|
+
"--colorText": "--colorText_mtk9p",
|
|
63
|
+
"--colorBorder": "--colorBorder_mtk9p",
|
|
64
|
+
"_active": "__active_1xzml_gg_",
|
|
65
|
+
"_interactive": "__interactive_1xzml_gg_",
|
|
66
|
+
"--colorBgHover": "--colorBgHover_mtk9p",
|
|
67
|
+
"_disabled": "__disabled_1xzml_gg_",
|
|
68
|
+
"_size_m": "_size_m_1xzml_gg_",
|
|
69
|
+
"__SCircle": "___SCircle_1xzml_gg_",
|
|
70
|
+
"_size_l": "_size_l_1xzml_gg_",
|
|
71
|
+
"_size_xl": "_size_xl_1xzml_gg_",
|
|
72
|
+
"_theme_primary": "_theme_primary_1xzml_gg_",
|
|
73
|
+
"_theme_primary-invert": "_theme_primary-invert_1xzml_gg_",
|
|
74
|
+
"_theme_additional-invert": "_theme_additional-invert_1xzml_gg_",
|
|
75
|
+
"_theme_secondary-invert": "_theme_secondary-invert_1xzml_gg_",
|
|
76
|
+
"_theme_additional": "_theme_additional_1xzml_gg_",
|
|
77
|
+
"__SText": "___SText_1xzml_gg_",
|
|
78
|
+
"__SAddon": "___SAddon_1xzml_gg_",
|
|
79
|
+
"__SClose": "___SClose_1xzml_gg_"
|
|
78
80
|
});
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
81
|
+
var textColorToBgColor = {
|
|
82
|
+
'gray-500': 'gray-100',
|
|
83
|
+
'blue-500': 'blue-100',
|
|
84
|
+
'green-500': 'green-100',
|
|
85
|
+
'salad-500': 'salad-100',
|
|
86
|
+
'orange-500': 'orange-100',
|
|
87
|
+
'yellow-500': 'yellow-100',
|
|
88
|
+
'red-500': 'red-100',
|
|
89
|
+
'pink-500': 'pink-100',
|
|
90
|
+
'violet-500': 'violet-100'
|
|
91
|
+
};
|
|
92
|
+
var textColorToHoveredTextColor = {
|
|
93
|
+
'gray-500': 'gray-50',
|
|
94
|
+
'blue-500': 'blue-50',
|
|
95
|
+
'green-500': 'green-50',
|
|
96
|
+
'salad-500': 'salad-50',
|
|
97
|
+
'orange-500': 'orange-50',
|
|
98
|
+
'yellow-500': 'yellow-50',
|
|
99
|
+
'red-500': 'red-50',
|
|
100
|
+
'pink-500': 'pink-50',
|
|
101
|
+
'violet-500': 'violet-50'
|
|
102
|
+
};
|
|
103
|
+
var textColorToBorderColor = {
|
|
104
|
+
'gray-500': 'gray-200',
|
|
105
|
+
'blue-500': 'blue-200',
|
|
106
|
+
'green-500': 'green-200',
|
|
107
|
+
'salad-500': 'salad-200',
|
|
108
|
+
'orange-500': 'orange-200',
|
|
109
|
+
'yellow-500': 'yellow-200',
|
|
110
|
+
'red-500': 'red-200',
|
|
111
|
+
'pink-500': 'pink-200',
|
|
112
|
+
'violet-500': 'violet-200'
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
var getPrimaryColors = function getPrimaryColors(color) {
|
|
116
|
+
return {
|
|
117
|
+
colorBg: (0, _color.opacity)((0, _color["default"])(textColorToBgColor[color]), 0.5) || (0, _color.light)(color, 0.95),
|
|
118
|
+
colorBgHover: (0, _color["default"])(textColorToBgColor[color] || (0, _color.light)(color, 0.8)),
|
|
119
|
+
colorText: (0, _color["default"])(color)
|
|
84
120
|
};
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
var getSecondaryColors = function getSecondaryColors(color) {
|
|
124
|
+
return {
|
|
125
|
+
colorBg: (0, _color["default"])('white'),
|
|
126
|
+
colorBgHover: (0, _color["default"])(textColorToHoveredTextColor[color] || (0, _color.light)(color, 0.95)),
|
|
127
|
+
colorText: (0, _color["default"])(color),
|
|
128
|
+
colorBorder: (0, _color["default"])(textColorToBorderColor[color] || (0, _color.light)(color, 0.5))
|
|
129
|
+
};
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
var legacyThemeRecommendedMigration = {
|
|
133
|
+
primary: {
|
|
134
|
+
muted: 'gray-500',
|
|
135
|
+
info: 'blue-500',
|
|
136
|
+
success: 'green-500',
|
|
137
|
+
warning: 'orange-500',
|
|
138
|
+
danger: 'red-500'
|
|
139
|
+
},
|
|
140
|
+
secondary: {
|
|
141
|
+
muted: 'gray-50'
|
|
142
|
+
}
|
|
143
|
+
};
|
|
91
144
|
|
|
92
145
|
var RootTag = /*#__PURE__*/function (_Component) {
|
|
93
146
|
(0, _inherits2["default"])(RootTag, _Component);
|
|
94
147
|
|
|
95
148
|
var _super = _createSuper(RootTag);
|
|
96
149
|
|
|
97
|
-
function RootTag() {
|
|
150
|
+
function RootTag(props) {
|
|
151
|
+
var _this;
|
|
152
|
+
|
|
98
153
|
(0, _classCallCheck2["default"])(this, RootTag);
|
|
99
|
-
|
|
154
|
+
_this = _super.call(this, props);
|
|
155
|
+
|
|
156
|
+
_logger["default"].warn(props.use, "Property 'use' is deprecated, replace property to \"theme='".concat(props.use, "' color='").concat(legacyThemeRecommendedMigration[props.use]?.[props.theme], "'\""), props['data-ui-name'] || Tag.displayName);
|
|
157
|
+
|
|
158
|
+
return _this;
|
|
100
159
|
}
|
|
101
160
|
|
|
102
161
|
(0, _createClass2["default"])(RootTag, [{
|
|
103
|
-
key: "
|
|
104
|
-
value: function
|
|
105
|
-
var
|
|
106
|
-
use = _this$asProps.use,
|
|
107
|
-
theme = _this$asProps.theme;
|
|
162
|
+
key: "getCircleProps",
|
|
163
|
+
value: function getCircleProps() {
|
|
164
|
+
var size = this.asProps.size;
|
|
108
165
|
return {
|
|
109
|
-
|
|
110
|
-
theme: theme
|
|
166
|
+
size: size
|
|
111
167
|
};
|
|
112
168
|
}
|
|
113
169
|
}, {
|
|
114
170
|
key: "render",
|
|
115
171
|
value: function render() {
|
|
116
|
-
var _ref = this
|
|
172
|
+
var _ref = this.asProps,
|
|
117
173
|
_ref6;
|
|
118
174
|
|
|
119
175
|
var STag = _flexBox.Box;
|
|
120
|
-
var _this$
|
|
121
|
-
Children = _this$
|
|
122
|
-
styles = _this$
|
|
123
|
-
theme = _this$
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
if (disabled) {
|
|
132
|
-
interactive = false;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
var colorTag = theme ? (0, _color.opacity)((0, _color["default"])(theme), 0.5) : '';
|
|
136
|
-
var colorText = color ? (0, _color["default"])(color) : (0, _color["default"])(theme);
|
|
176
|
+
var _this$asProps = this.asProps,
|
|
177
|
+
Children = _this$asProps.Children,
|
|
178
|
+
styles = _this$asProps.styles,
|
|
179
|
+
theme = _this$asProps.theme,
|
|
180
|
+
color = _this$asProps.color,
|
|
181
|
+
interactive = _this$asProps.interactive,
|
|
182
|
+
disabled = _this$asProps.disabled,
|
|
183
|
+
addonLeft = _this$asProps.addonLeft,
|
|
184
|
+
addonRight = _this$asProps.addonRight;
|
|
185
|
+
var colors = theme !== 'primary' ? getSecondaryColors(color) : getPrimaryColors(color);
|
|
137
186
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STag, _ref6.cn("STag", _objectSpread({}, (0, _core.assignProps)({
|
|
138
|
-
"use:
|
|
139
|
-
"
|
|
140
|
-
"
|
|
141
|
-
"
|
|
187
|
+
"use:interactive": !disabled && interactive,
|
|
188
|
+
"colorBg": colors.colorBg,
|
|
189
|
+
"colorBgHover": colors.colorBgHover,
|
|
190
|
+
"colorText": colors.colorText,
|
|
191
|
+
"colorBorder": colors.colorBorder
|
|
142
192
|
}, _ref))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Tag.Addon, {
|
|
143
193
|
tag: addonLeft
|
|
144
194
|
}) : null, (0, _addonTextChildren["default"])(Children, Tag.Text, Tag.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Tag.Addon, {
|
|
@@ -152,13 +202,13 @@ var RootTag = /*#__PURE__*/function (_Component) {
|
|
|
152
202
|
(0, _defineProperty2["default"])(RootTag, "displayName", 'Tag');
|
|
153
203
|
(0, _defineProperty2["default"])(RootTag, "style", style);
|
|
154
204
|
(0, _defineProperty2["default"])(RootTag, "defaultProps", {
|
|
155
|
-
|
|
156
|
-
|
|
205
|
+
theme: 'primary',
|
|
206
|
+
color: 'gray-500',
|
|
157
207
|
size: 'm'
|
|
158
208
|
});
|
|
159
209
|
|
|
160
210
|
function Text(props) {
|
|
161
|
-
var _ref2 =
|
|
211
|
+
var _ref2 = arguments[0],
|
|
162
212
|
_ref7;
|
|
163
213
|
|
|
164
214
|
var SText = _flexBox.Box;
|
|
@@ -169,21 +219,19 @@ function Text(props) {
|
|
|
169
219
|
}
|
|
170
220
|
|
|
171
221
|
function Close(props) {
|
|
172
|
-
var _ref3 =
|
|
222
|
+
var _ref3 = arguments[0],
|
|
173
223
|
_ref8;
|
|
174
224
|
|
|
175
225
|
var SClose = _flexBox.Box;
|
|
176
|
-
var styles = props.styles
|
|
177
|
-
use = props.use,
|
|
178
|
-
theme = props.theme;
|
|
226
|
+
var styles = props.styles;
|
|
179
227
|
return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref8.cn("SClose", _objectSpread({}, (0, _core.assignProps)({
|
|
180
|
-
"
|
|
181
|
-
"
|
|
228
|
+
"tag": _m["default"],
|
|
229
|
+
"interactive": true
|
|
182
230
|
}, _ref3))));
|
|
183
231
|
}
|
|
184
232
|
|
|
185
233
|
function Addon(props) {
|
|
186
|
-
var _ref4 =
|
|
234
|
+
var _ref4 = arguments[0],
|
|
187
235
|
_ref9;
|
|
188
236
|
|
|
189
237
|
var SAddon = _flexBox.Box;
|
|
@@ -194,7 +242,7 @@ function Addon(props) {
|
|
|
194
242
|
}
|
|
195
243
|
|
|
196
244
|
function Circle(props) {
|
|
197
|
-
var _ref5 =
|
|
245
|
+
var _ref5 = arguments[0],
|
|
198
246
|
_ref10;
|
|
199
247
|
|
|
200
248
|
var SCircle = _flexBox.Box;
|
package/lib/cjs/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.jsx"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.jsx"],"names":["textColorToBgColor","textColorToHoveredTextColor","textColorToBorderColor","getPrimaryColors","color","colorBg","colorBgHover","colorText","getSecondaryColors","colorBorder","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","props","logger","warn","use","theme","Tag","displayName","size","asProps","STag","Box","Children","styles","interactive","disabled","addonLeft","addonRight","colors","Text","Addon","Component","style","SText","Close","SClose","CloseM","SAddon","Circle","SCircle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { opacity, light } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\n\nimport style from './style/tag.shadow.css';\n\nconst textColorToBgColor = {\n 'gray-500': 'gray-100',\n 'blue-500': 'blue-100',\n 'green-500': 'green-100',\n 'salad-500': 'salad-100',\n 'orange-500': 'orange-100',\n 'yellow-500': 'yellow-100',\n 'red-500': 'red-100',\n 'pink-500': 'pink-100',\n 'violet-500': 'violet-100',\n};\nconst textColorToHoveredTextColor = {\n 'gray-500': 'gray-50',\n 'blue-500': 'blue-50',\n 'green-500': 'green-50',\n 'salad-500': 'salad-50',\n 'orange-500': 'orange-50',\n 'yellow-500': 'yellow-50',\n 'red-500': 'red-50',\n 'pink-500': 'pink-50',\n 'violet-500': 'violet-50',\n};\nconst textColorToBorderColor = {\n 'gray-500': 'gray-200',\n 'blue-500': 'blue-200',\n 'green-500': 'green-200',\n 'salad-500': 'salad-200',\n 'orange-500': 'orange-200',\n 'yellow-500': 'yellow-200',\n 'red-500': 'red-200',\n 'pink-500': 'pink-200',\n 'violet-500': 'violet-200',\n};\n\nconst getPrimaryColors = (color) => ({\n colorBg: opacity(resolveColor(textColorToBgColor[color]), 0.5) || light(color, 0.95),\n colorBgHover: resolveColor(textColorToBgColor[color] || light(color, 0.8)),\n colorText: resolveColor(color),\n});\n\nconst getSecondaryColors = (color) => ({\n colorBg: resolveColor('white'),\n colorBgHover: resolveColor(textColorToHoveredTextColor[color] || light(color, 0.95)),\n colorText: resolveColor(color),\n colorBorder: resolveColor(textColorToBorderColor[color] || light(color, 0.5)),\n});\n\nconst legacyThemeRecommendedMigration = {\n primary: {\n muted: 'gray-500',\n info: 'blue-500',\n success: 'green-500',\n warning: 'orange-500',\n danger: 'red-500',\n },\n secondary: {\n muted: 'gray-50',\n },\n};\n\nclass RootTag extends Component {\n static displayName = 'Tag';\n static style = style;\n static defaultProps = {\n theme: 'primary',\n color: 'gray-500',\n size: 'm',\n };\n\n constructor(props) {\n super(props);\n\n logger.warn(\n props.use,\n `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n legacyThemeRecommendedMigration[props.use]?.[props.theme]\n }'\"`,\n props['data-ui-name'] || Tag.displayName,\n );\n }\n\n getCircleProps() {\n const { size } = this.asProps;\n return { size };\n }\n\n render() {\n const STag = Root;\n const { Children, styles, theme, color, interactive, disabled, addonLeft, addonRight } =\n this.asProps;\n\n const colors = theme !== 'primary' ? getSecondaryColors(color) : getPrimaryColors(color);\n\n return sstyled(styles)(\n <STag\n render={Box}\n use:interactive={!disabled && interactive}\n colorBg={colors.colorBg}\n colorBgHover={colors.colorBgHover}\n colorText={colors.colorText}\n colorBorder={colors.colorBorder}\n >\n {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n </STag>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Close(props) {\n const SClose = Root;\n const { styles } = props;\n\n return sstyled(styles)(<SClose render={Box} tag={CloseM} interactive />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nfunction Circle(props) {\n const SCircle = Root;\n const { styles } = props;\n return sstyled(styles)(<SCircle render={Box} tag=\"span\" />);\n}\n\nconst Tag = createComponent(RootTag, {\n Text,\n Addon,\n Close,\n Circle,\n});\n\nexport default Tag;\n"],"file":"Tag.js"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CProps, ReturnEl, PropGetterFn } from '@semcore/core';
|
|
3
|
+
import { IBoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { IIconProps } from '@semcore/icon';
|
|
5
|
+
|
|
6
|
+
export type TagSize = 'xl' | 'l' | 'm';
|
|
7
|
+
export type TagThemeOld = 'muted' | 'info' | 'success' | 'warning' | 'danger' | 'invert';
|
|
8
|
+
export type TagTheme = 'primary' | 'secondary' | 'additional' | (string & TagThemeOld);
|
|
9
|
+
export type TagUse = 'primary' | 'secondary';
|
|
10
|
+
|
|
11
|
+
export interface ITagProps extends IBoxProps {
|
|
12
|
+
/** Value responsible for tag availability
|
|
13
|
+
*/
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
/** Value responsible for tag activity
|
|
16
|
+
*/
|
|
17
|
+
active?: boolean;
|
|
18
|
+
/** Interactive tag
|
|
19
|
+
*/
|
|
20
|
+
interactive?: boolean;
|
|
21
|
+
/** Tag type
|
|
22
|
+
* @default secondary
|
|
23
|
+
* @deprecated {@link ITagProps.theme}
|
|
24
|
+
*/
|
|
25
|
+
use?: TagUse;
|
|
26
|
+
/** Tag theme, there are several default themes or you can use your color
|
|
27
|
+
* @default muted
|
|
28
|
+
*/
|
|
29
|
+
theme?: TagTheme;
|
|
30
|
+
/** Tag color text */
|
|
31
|
+
color?: string;
|
|
32
|
+
/** Tag size
|
|
33
|
+
* @default m
|
|
34
|
+
*/
|
|
35
|
+
size?: TagSize;
|
|
36
|
+
/** Left addon tag */
|
|
37
|
+
addonLeft?: React.ElementType;
|
|
38
|
+
/** Right addon tag */
|
|
39
|
+
addonRight?: React.ElementType;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export interface ITagCloseProps extends IIconProps {
|
|
43
|
+
/** Tag type
|
|
44
|
+
* @default secondary
|
|
45
|
+
*/
|
|
46
|
+
use?: TagUse;
|
|
47
|
+
/** Tag theme, there are several default themes or you can use your color
|
|
48
|
+
* @default muted
|
|
49
|
+
*/
|
|
50
|
+
theme?: TagTheme;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
export interface ITagContext extends ITagProps {
|
|
54
|
+
getCloseProps?: PropGetterFn;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
export interface ITagAddonProps extends IBoxProps {}
|
|
58
|
+
|
|
59
|
+
export interface ITagTextProps extends IBoxProps {}
|
|
60
|
+
|
|
61
|
+
declare const Tag: (<T>(props: CProps<ITagProps & T, ITagContext>) => ReturnEl) & {
|
|
62
|
+
Text: <T>(props: ITagTextProps & T) => ReturnEl;
|
|
63
|
+
Addon: <T>(props: ITagAddonProps & T) => ReturnEl;
|
|
64
|
+
Close: <T>(props: ITagCloseProps & T) => ReturnEl;
|
|
65
|
+
Circle: <T>(props: ITagAddonProps & T) => ReturnEl;
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export default Tag;
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
var _exportNames = {};
|
|
9
8
|
Object.defineProperty(exports, "default", {
|
|
10
9
|
enumerable: true,
|
|
11
10
|
get: function get() {
|
|
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
|
|
|
13
12
|
}
|
|
14
13
|
});
|
|
15
14
|
|
|
16
|
-
var _Tag =
|
|
17
|
-
|
|
18
|
-
Object.keys(_Tag).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
-
if (key in exports && exports[key] === _Tag[key]) return;
|
|
22
|
-
Object.defineProperty(exports, key, {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function get() {
|
|
25
|
-
return _Tag[key];
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
|
-
|
|
32
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
+
var _Tag = _interopRequireDefault(require("./Tag"));
|
|
33
16
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './Tag';\n"],"file":"index.js"}
|