superdesk-ui-framework 4.0.69 → 4.0.71
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/app/styles/_tag-labels.scss +0 -1
- package/app/styles/components/_list-item.scss +0 -6
- package/app/styles/editor/_editor-themes.scss +17 -0
- package/app-typescript/components/Tag.tsx +11 -11
- package/dist/examples.bundle.js +5 -5
- package/dist/superdesk-ui.bundle.css +17 -14
- package/dist/superdesk-ui.bundle.js +4 -4
- package/package.json +1 -1
- package/react/components/Tag.d.ts +1 -1
- package/react/components/Tag.js +4 -4
|
@@ -26,6 +26,9 @@
|
|
|
26
26
|
--sd-editor-colour__mark-people: var(--sorcerer-blue-300);
|
|
27
27
|
--sd-editor-colour__mark-company: var(--syrah-soil-200);
|
|
28
28
|
|
|
29
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-400);
|
|
30
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-500);
|
|
31
|
+
|
|
29
32
|
.sd-editor--theme-default {
|
|
30
33
|
--theme-color-base: hsl(0 0% 100%);
|
|
31
34
|
--sd-editor-colour__main-bg: var(--theme-color-base);
|
|
@@ -45,6 +48,9 @@
|
|
|
45
48
|
|
|
46
49
|
--sd-editor-colour__mark-people: var(--sorcerer-blue-300);
|
|
47
50
|
--sd-editor-colour__mark-company: var(--syrah-soil-200);
|
|
51
|
+
|
|
52
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-400);
|
|
53
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-500);
|
|
48
54
|
}
|
|
49
55
|
|
|
50
56
|
.sd-editor--theme-dark {
|
|
@@ -66,6 +72,9 @@
|
|
|
66
72
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
67
73
|
|
|
68
74
|
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
75
|
+
|
|
76
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-200);
|
|
77
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-400);
|
|
69
78
|
}
|
|
70
79
|
|
|
71
80
|
.sd-editor--theme-blue {
|
|
@@ -87,6 +96,9 @@
|
|
|
87
96
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
88
97
|
|
|
89
98
|
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
99
|
+
|
|
100
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-200);
|
|
101
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-400);
|
|
90
102
|
}
|
|
91
103
|
|
|
92
104
|
.sd-editor--theme-turquoise {
|
|
@@ -109,6 +121,9 @@
|
|
|
109
121
|
|
|
110
122
|
--sd-editor-colour__mark-people: var(--sorcerer-blue-400);
|
|
111
123
|
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
124
|
+
|
|
125
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-500);
|
|
126
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-500);
|
|
112
127
|
}
|
|
113
128
|
|
|
114
129
|
.sd-editor--theme-military {
|
|
@@ -131,6 +146,8 @@
|
|
|
131
146
|
|
|
132
147
|
--sd-editor-colour__mark-people: var(--sorcerer-blue-500);
|
|
133
148
|
--sd-editor-colour__mark-company: var(--syrah-soil-400);
|
|
149
|
+
|
|
150
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-500);
|
|
134
151
|
}
|
|
135
152
|
|
|
136
153
|
.sd-editor--theme-natural {
|
|
@@ -10,7 +10,7 @@ interface IProps {
|
|
|
10
10
|
shape?: 'round' | 'square'; // default round
|
|
11
11
|
readOnly?: boolean;
|
|
12
12
|
draggable?: boolean;
|
|
13
|
-
onClick(): void;
|
|
13
|
+
onClick?(): void;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
export const Tag = ({text, keyValue, shade, shape, readOnly, onClick, label, draggable}: IProps) => {
|
|
@@ -19,6 +19,14 @@ export const Tag = ({text, keyValue, shade, shape, readOnly, onClick, label, dra
|
|
|
19
19
|
'tag-label--square': shape === 'square',
|
|
20
20
|
'tag-label--draggable': draggable === true,
|
|
21
21
|
});
|
|
22
|
+
|
|
23
|
+
const removeButton =
|
|
24
|
+
onClick == null || readOnly === true ? null : (
|
|
25
|
+
<button className="tag-label__remove" onClick={onClick}>
|
|
26
|
+
<i className="icon-close-small"></i>
|
|
27
|
+
</button>
|
|
28
|
+
);
|
|
29
|
+
|
|
22
30
|
return (
|
|
23
31
|
<>
|
|
24
32
|
{label ? (
|
|
@@ -28,21 +36,13 @@ export const Tag = ({text, keyValue, shade, shape, readOnly, onClick, label, dra
|
|
|
28
36
|
<span className="tag-label--text-label">{label}:</span>
|
|
29
37
|
<span className="tag-label--text">{text}</span>
|
|
30
38
|
</span>
|
|
31
|
-
{
|
|
32
|
-
<button className="tag-label__remove" onClick={onClick}>
|
|
33
|
-
<i className="icon-close-small"></i>
|
|
34
|
-
</button>
|
|
35
|
-
) : null}
|
|
39
|
+
{removeButton}
|
|
36
40
|
</span>
|
|
37
41
|
) : (
|
|
38
42
|
<span className={classes} key={keyValue}>
|
|
39
43
|
{draggable && <DragHandle blank={true} dotsInRow="3" dotRows="4" />}
|
|
40
44
|
<span className="tag-label--text">{text}</span>
|
|
41
|
-
{
|
|
42
|
-
<button className="tag-label__remove" onClick={onClick}>
|
|
43
|
-
<i className="icon-close-small"></i>
|
|
44
|
-
</button>
|
|
45
|
-
) : null}
|
|
45
|
+
{removeButton}
|
|
46
46
|
</span>
|
|
47
47
|
)}
|
|
48
48
|
</>
|
package/dist/examples.bundle.js
CHANGED
|
@@ -133461,6 +133461,8 @@ var Tag = function (_a) {
|
|
|
133461
133461
|
_b['tag-label--square'] = shape === 'square',
|
|
133462
133462
|
_b['tag-label--draggable'] = draggable === true,
|
|
133463
133463
|
_b));
|
|
133464
|
+
var removeButton = onClick == null || readOnly === true ? null : (React.createElement("button", { className: "tag-label__remove", onClick: onClick },
|
|
133465
|
+
React.createElement("i", { className: "icon-close-small" })));
|
|
133464
133466
|
return (React.createElement(React.Fragment, null, label ? (React.createElement("span", { className: classes, key: keyValue },
|
|
133465
133467
|
draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
|
|
133466
133468
|
React.createElement("span", { className: "tag-label--text-wrapper" },
|
|
@@ -133468,12 +133470,10 @@ var Tag = function (_a) {
|
|
|
133468
133470
|
label,
|
|
133469
133471
|
":"),
|
|
133470
133472
|
React.createElement("span", { className: "tag-label--text" }, text)),
|
|
133471
|
-
|
|
133472
|
-
React.createElement("i", { className: "icon-close-small" }))) : null)) : (React.createElement("span", { className: classes, key: keyValue },
|
|
133473
|
+
removeButton)) : (React.createElement("span", { className: classes, key: keyValue },
|
|
133473
133474
|
draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
|
|
133474
133475
|
React.createElement("span", { className: "tag-label--text" }, text),
|
|
133475
|
-
|
|
133476
|
-
React.createElement("i", { className: "icon-close-small" }))) : null))));
|
|
133476
|
+
removeButton))));
|
|
133477
133477
|
};
|
|
133478
133478
|
exports.Tag = Tag;
|
|
133479
133479
|
|
|
@@ -194586,7 +194586,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
194586
194586
|
/* 1048 */
|
|
194587
194587
|
/***/ (function(module, exports) {
|
|
194588
194588
|
|
|
194589
|
-
module.exports = {"name":"superdesk-ui-framework","version":"4.0.
|
|
194589
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.71","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"tsc -p tsconfig.json --noEmit && webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","format-code":"npx prettier . --write","lint":"tsc -p tsconfig.json --noEmit && npx prettier . --check && eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint && npm run unit-test","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prettier":"3.5.3","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"^5.8.3","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@sourcefabric/common":"0.0.66","@superdesk/primereact":"^5.0.2-13","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"^4.1.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7","weekstart":"^2.0.0"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
|
|
194590
194590
|
|
|
194591
194591
|
/***/ }),
|
|
194592
194592
|
/* 1049 */
|
|
@@ -25732,7 +25732,6 @@ a.toggle-box__header {
|
|
|
25732
25732
|
padding-inline: 1em 1em;
|
|
25733
25733
|
border-radius: var(--b-radius--full);
|
|
25734
25734
|
font-size: 1.4rem;
|
|
25735
|
-
line-height: 100%;
|
|
25736
25735
|
position: relative;
|
|
25737
25736
|
text-align: center;
|
|
25738
25737
|
font-weight: 400;
|
|
@@ -25903,7 +25902,6 @@ tags-input,
|
|
|
25903
25902
|
padding-inline: 1em 1em;
|
|
25904
25903
|
border-radius: var(--b-radius--full);
|
|
25905
25904
|
font-size: 1.4rem;
|
|
25906
|
-
line-height: 100%;
|
|
25907
25905
|
position: relative;
|
|
25908
25906
|
text-align: center;
|
|
25909
25907
|
font-weight: 400;
|
|
@@ -32537,9 +32535,6 @@ a.text-link {
|
|
|
32537
32535
|
.sd-list-item--element-grow {
|
|
32538
32536
|
flex-grow: 1; }
|
|
32539
32537
|
|
|
32540
|
-
.sd-list-item .badge {
|
|
32541
|
-
margin: 0.2rem; }
|
|
32542
|
-
|
|
32543
32538
|
.sd-list-item time [class^="icon-"],
|
|
32544
32539
|
.sd-list-item time [class*=" icon-"] {
|
|
32545
32540
|
vertical-align: top;
|
|
@@ -41636,7 +41631,6 @@ label + .sd-radio {
|
|
|
41636
41631
|
padding-inline: 1em 1em;
|
|
41637
41632
|
border-radius: var(--b-radius--full);
|
|
41638
41633
|
font-size: 1.4rem;
|
|
41639
|
-
line-height: 100%;
|
|
41640
41634
|
position: relative;
|
|
41641
41635
|
text-align: center;
|
|
41642
41636
|
font-weight: 400;
|
|
@@ -42297,7 +42291,9 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42297
42291
|
--sd-editor-colour__adding: var(--color-success-text);
|
|
42298
42292
|
--sd-editor-colour__adding-bg: var(--color-success-translucent);
|
|
42299
42293
|
--sd-editor-colour__mark-people: var(--sorcerer-blue-300);
|
|
42300
|
-
--sd-editor-colour__mark-company: var(--syrah-soil-200);
|
|
42294
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-200);
|
|
42295
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-400);
|
|
42296
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-500); }
|
|
42301
42297
|
:root .sd-editor--theme-default,
|
|
42302
42298
|
[data-theme="dark-ui"] .sd-editor--theme-default {
|
|
42303
42299
|
--theme-color-base: hsl(0 0% 100%);
|
|
@@ -42315,7 +42311,9 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42315
42311
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
42316
42312
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42317
42313
|
--sd-editor-colour__mark-people: var(--sorcerer-blue-300);
|
|
42318
|
-
--sd-editor-colour__mark-company: var(--syrah-soil-200);
|
|
42314
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-200);
|
|
42315
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-400);
|
|
42316
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-500); }
|
|
42319
42317
|
:root .sd-editor--theme-dark,
|
|
42320
42318
|
[data-theme="dark-ui"] .sd-editor--theme-dark {
|
|
42321
42319
|
--theme-color-base: hsl(214 13% 12%);
|
|
@@ -42332,7 +42330,9 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42332
42330
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
|
|
42333
42331
|
--sd-editor-colour__adding: var(--green-brier-300);
|
|
42334
42332
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42335
|
-
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
42333
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
42334
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-200);
|
|
42335
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-400); }
|
|
42336
42336
|
:root .sd-editor--theme-blue,
|
|
42337
42337
|
[data-theme="dark-ui"] .sd-editor--theme-blue {
|
|
42338
42338
|
--theme-color-base: hsl(212 91% 18%);
|
|
@@ -42349,7 +42349,9 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42349
42349
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
|
|
42350
42350
|
--sd-editor-colour__adding: var(--green-brier-300);
|
|
42351
42351
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42352
|
-
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
42352
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
42353
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-200);
|
|
42354
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-400); }
|
|
42353
42355
|
:root .sd-editor--theme-turquoise,
|
|
42354
42356
|
[data-theme="dark-ui"] .sd-editor--theme-turquoise {
|
|
42355
42357
|
--theme-color-base: hsl(179 49% 65%);
|
|
@@ -42368,7 +42370,9 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42368
42370
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
42369
42371
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42370
42372
|
--sd-editor-colour__mark-people: var(--sorcerer-blue-400);
|
|
42371
|
-
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
42373
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
42374
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-500);
|
|
42375
|
+
--sd-editor-colour__hard-limit: var(--morocco-red-500); }
|
|
42372
42376
|
:root .sd-editor--theme-military,
|
|
42373
42377
|
[data-theme="dark-ui"] .sd-editor--theme-military {
|
|
42374
42378
|
--theme-color-base: hsl(69 25% 65%);
|
|
@@ -42387,7 +42391,8 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42387
42391
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
42388
42392
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42389
42393
|
--sd-editor-colour__mark-people: var(--sorcerer-blue-500);
|
|
42390
|
-
--sd-editor-colour__mark-company: var(--syrah-soil-400);
|
|
42394
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-400);
|
|
42395
|
+
--sd-editor-colour__soft-limit: var(--syrah-soil-500); }
|
|
42391
42396
|
:root .sd-editor--theme-natural,
|
|
42392
42397
|
[data-theme="dark-ui"] .sd-editor--theme-natural {
|
|
42393
42398
|
--theme-color-base: hsl(51 50% 89%);
|
|
@@ -53818,7 +53823,6 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
53818
53823
|
padding-inline: 1em 1em;
|
|
53819
53824
|
border-radius: var(--b-radius--full);
|
|
53820
53825
|
font-size: 1.4rem;
|
|
53821
|
-
line-height: 100%;
|
|
53822
53826
|
position: relative;
|
|
53823
53827
|
text-align: center;
|
|
53824
53828
|
font-weight: 400;
|
|
@@ -55280,7 +55284,6 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
55280
55284
|
padding-inline: 1em 1em;
|
|
55281
55285
|
border-radius: var(--b-radius--full);
|
|
55282
55286
|
font-size: 1.4rem;
|
|
55283
|
-
line-height: 100%;
|
|
55284
55287
|
position: relative;
|
|
55285
55288
|
text-align: center;
|
|
55286
55289
|
font-weight: 400;
|
|
@@ -132808,6 +132808,8 @@ var Tag = function (_a) {
|
|
|
132808
132808
|
_b['tag-label--square'] = shape === 'square',
|
|
132809
132809
|
_b['tag-label--draggable'] = draggable === true,
|
|
132810
132810
|
_b));
|
|
132811
|
+
var removeButton = onClick == null || readOnly === true ? null : (React.createElement("button", { className: "tag-label__remove", onClick: onClick },
|
|
132812
|
+
React.createElement("i", { className: "icon-close-small" })));
|
|
132811
132813
|
return (React.createElement(React.Fragment, null, label ? (React.createElement("span", { className: classes, key: keyValue },
|
|
132812
132814
|
draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
|
|
132813
132815
|
React.createElement("span", { className: "tag-label--text-wrapper" },
|
|
@@ -132815,12 +132817,10 @@ var Tag = function (_a) {
|
|
|
132815
132817
|
label,
|
|
132816
132818
|
":"),
|
|
132817
132819
|
React.createElement("span", { className: "tag-label--text" }, text)),
|
|
132818
|
-
|
|
132819
|
-
React.createElement("i", { className: "icon-close-small" }))) : null)) : (React.createElement("span", { className: classes, key: keyValue },
|
|
132820
|
+
removeButton)) : (React.createElement("span", { className: classes, key: keyValue },
|
|
132820
132821
|
draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
|
|
132821
132822
|
React.createElement("span", { className: "tag-label--text" }, text),
|
|
132822
|
-
|
|
132823
|
-
React.createElement("i", { className: "icon-close-small" }))) : null))));
|
|
132823
|
+
removeButton))));
|
|
132824
132824
|
};
|
|
132825
132825
|
exports.Tag = Tag;
|
|
132826
132826
|
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@ interface IProps {
|
|
|
6
6
|
shape?: 'round' | 'square';
|
|
7
7
|
readOnly?: boolean;
|
|
8
8
|
draggable?: boolean;
|
|
9
|
-
onClick(): void;
|
|
9
|
+
onClick?(): void;
|
|
10
10
|
}
|
|
11
11
|
export declare const Tag: ({ text, keyValue, shade, shape, readOnly, onClick, label, draggable }: IProps) => JSX.Element;
|
|
12
12
|
export {};
|
package/react/components/Tag.js
CHANGED
|
@@ -48,6 +48,8 @@ var Tag = function (_a) {
|
|
|
48
48
|
_b['tag-label--square'] = shape === 'square',
|
|
49
49
|
_b['tag-label--draggable'] = draggable === true,
|
|
50
50
|
_b));
|
|
51
|
+
var removeButton = onClick == null || readOnly === true ? null : (React.createElement("button", { className: "tag-label__remove", onClick: onClick },
|
|
52
|
+
React.createElement("i", { className: "icon-close-small" })));
|
|
51
53
|
return (React.createElement(React.Fragment, null, label ? (React.createElement("span", { className: classes, key: keyValue },
|
|
52
54
|
draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
|
|
53
55
|
React.createElement("span", { className: "tag-label--text-wrapper" },
|
|
@@ -55,11 +57,9 @@ var Tag = function (_a) {
|
|
|
55
57
|
label,
|
|
56
58
|
":"),
|
|
57
59
|
React.createElement("span", { className: "tag-label--text" }, text)),
|
|
58
|
-
|
|
59
|
-
React.createElement("i", { className: "icon-close-small" }))) : null)) : (React.createElement("span", { className: classes, key: keyValue },
|
|
60
|
+
removeButton)) : (React.createElement("span", { className: classes, key: keyValue },
|
|
60
61
|
draggable && React.createElement(DragHandle_1.DragHandle, { blank: true, dotsInRow: "3", dotRows: "4" }),
|
|
61
62
|
React.createElement("span", { className: "tag-label--text" }, text),
|
|
62
|
-
|
|
63
|
-
React.createElement("i", { className: "icon-close-small" }))) : null))));
|
|
63
|
+
removeButton))));
|
|
64
64
|
};
|
|
65
65
|
exports.Tag = Tag;
|