superdesk-ui-framework 4.0.68 → 4.0.70
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 +15 -1
- package/app-typescript/components/Tag.tsx +11 -11
- package/dist/examples.bundle.js +5 -5
- package/dist/superdesk-ui.bundle.css +16 -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
|
@@ -23,6 +23,8 @@
|
|
|
23
23
|
--sd-editor-colour__adding: var(--color-success-text);
|
|
24
24
|
--sd-editor-colour__adding-bg: var(--color-success-translucent);
|
|
25
25
|
|
|
26
|
+
--sd-editor-colour__mark-people: var(--sorcerer-blue-300);
|
|
27
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-200);
|
|
26
28
|
|
|
27
29
|
.sd-editor--theme-default {
|
|
28
30
|
--theme-color-base: hsl(0 0% 100%);
|
|
@@ -40,6 +42,9 @@
|
|
|
40
42
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
41
43
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
42
44
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
45
|
+
|
|
46
|
+
--sd-editor-colour__mark-people: var(--sorcerer-blue-300);
|
|
47
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-200);
|
|
43
48
|
}
|
|
44
49
|
|
|
45
50
|
.sd-editor--theme-dark {
|
|
@@ -59,6 +64,8 @@
|
|
|
59
64
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
|
|
60
65
|
--sd-editor-colour__adding: var(--green-brier-300);
|
|
61
66
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
67
|
+
|
|
68
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
62
69
|
}
|
|
63
70
|
|
|
64
71
|
.sd-editor--theme-blue {
|
|
@@ -78,6 +85,8 @@
|
|
|
78
85
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
|
|
79
86
|
--sd-editor-colour__adding: var(--green-brier-300);
|
|
80
87
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
88
|
+
|
|
89
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
81
90
|
}
|
|
82
91
|
|
|
83
92
|
.sd-editor--theme-turquoise {
|
|
@@ -97,6 +106,9 @@
|
|
|
97
106
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
98
107
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
99
108
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
109
|
+
|
|
110
|
+
--sd-editor-colour__mark-people: var(--sorcerer-blue-400);
|
|
111
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-300);
|
|
100
112
|
}
|
|
101
113
|
|
|
102
114
|
.sd-editor--theme-military {
|
|
@@ -116,6 +128,9 @@
|
|
|
116
128
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
117
129
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
118
130
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
131
|
+
|
|
132
|
+
--sd-editor-colour__mark-people: var(--sorcerer-blue-500);
|
|
133
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-400);
|
|
119
134
|
}
|
|
120
135
|
|
|
121
136
|
.sd-editor--theme-natural {
|
|
@@ -134,7 +149,6 @@
|
|
|
134
149
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
135
150
|
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
136
151
|
}
|
|
137
|
-
|
|
138
152
|
}
|
|
139
153
|
|
|
140
154
|
$color-swatch-border-color: transparent;
|
|
@@ -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.70","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;
|
|
@@ -42295,7 +42289,9 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42295
42289
|
--sd-editor-colour__removing: var(--color-highlight-text);
|
|
42296
42290
|
--sd-editor-colour__removing-bg: var(--color-highlight-translucent);
|
|
42297
42291
|
--sd-editor-colour__adding: var(--color-success-text);
|
|
42298
|
-
--sd-editor-colour__adding-bg: var(--color-success-translucent);
|
|
42292
|
+
--sd-editor-colour__adding-bg: var(--color-success-translucent);
|
|
42293
|
+
--sd-editor-colour__mark-people: var(--sorcerer-blue-300);
|
|
42294
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-200); }
|
|
42299
42295
|
:root .sd-editor--theme-default,
|
|
42300
42296
|
[data-theme="dark-ui"] .sd-editor--theme-default {
|
|
42301
42297
|
--theme-color-base: hsl(0 0% 100%);
|
|
@@ -42311,7 +42307,9 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42311
42307
|
--sd-editor-colour__removing: var(--blissful-berry-600);
|
|
42312
42308
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
42313
42309
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
42314
|
-
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42310
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42311
|
+
--sd-editor-colour__mark-people: var(--sorcerer-blue-300);
|
|
42312
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-200); }
|
|
42315
42313
|
:root .sd-editor--theme-dark,
|
|
42316
42314
|
[data-theme="dark-ui"] .sd-editor--theme-dark {
|
|
42317
42315
|
--theme-color-base: hsl(214 13% 12%);
|
|
@@ -42327,7 +42325,8 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42327
42325
|
--sd-editor-colour__removing: var(--blissful-berry-300);
|
|
42328
42326
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
|
|
42329
42327
|
--sd-editor-colour__adding: var(--green-brier-300);
|
|
42330
|
-
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42328
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42329
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-300); }
|
|
42331
42330
|
:root .sd-editor--theme-blue,
|
|
42332
42331
|
[data-theme="dark-ui"] .sd-editor--theme-blue {
|
|
42333
42332
|
--theme-color-base: hsl(212 91% 18%);
|
|
@@ -42343,7 +42342,8 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42343
42342
|
--sd-editor-colour__removing: var(--blissful-berry-300);
|
|
42344
42343
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a16);
|
|
42345
42344
|
--sd-editor-colour__adding: var(--green-brier-300);
|
|
42346
|
-
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42345
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42346
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-300); }
|
|
42347
42347
|
:root .sd-editor--theme-turquoise,
|
|
42348
42348
|
[data-theme="dark-ui"] .sd-editor--theme-turquoise {
|
|
42349
42349
|
--theme-color-base: hsl(179 49% 65%);
|
|
@@ -42360,7 +42360,9 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42360
42360
|
--sd-editor-colour__removing: var(--blissful-berry-600);
|
|
42361
42361
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
42362
42362
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
42363
|
-
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42363
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42364
|
+
--sd-editor-colour__mark-people: var(--sorcerer-blue-400);
|
|
42365
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-300); }
|
|
42364
42366
|
:root .sd-editor--theme-military,
|
|
42365
42367
|
[data-theme="dark-ui"] .sd-editor--theme-military {
|
|
42366
42368
|
--theme-color-base: hsl(69 25% 65%);
|
|
@@ -42377,7 +42379,9 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
42377
42379
|
--sd-editor-colour__removing: var(--blissful-berry-600);
|
|
42378
42380
|
--sd-editor-colour__removing-bg: var(--blissful-berry-500-a12);
|
|
42379
42381
|
--sd-editor-colour__adding: var(--green-brier-600);
|
|
42380
|
-
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42382
|
+
--sd-editor-colour__adding-bg: var(--green-brier-400-a12);
|
|
42383
|
+
--sd-editor-colour__mark-people: var(--sorcerer-blue-500);
|
|
42384
|
+
--sd-editor-colour__mark-company: var(--syrah-soil-400); }
|
|
42381
42385
|
:root .sd-editor--theme-natural,
|
|
42382
42386
|
[data-theme="dark-ui"] .sd-editor--theme-natural {
|
|
42383
42387
|
--theme-color-base: hsl(51 50% 89%);
|
|
@@ -53808,7 +53812,6 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
53808
53812
|
padding-inline: 1em 1em;
|
|
53809
53813
|
border-radius: var(--b-radius--full);
|
|
53810
53814
|
font-size: 1.4rem;
|
|
53811
|
-
line-height: 100%;
|
|
53812
53815
|
position: relative;
|
|
53813
53816
|
text-align: center;
|
|
53814
53817
|
font-weight: 400;
|
|
@@ -55270,7 +55273,6 @@ i.sd-sidetab-menu__helper-icon {
|
|
|
55270
55273
|
padding-inline: 1em 1em;
|
|
55271
55274
|
border-radius: var(--b-radius--full);
|
|
55272
55275
|
font-size: 1.4rem;
|
|
55273
|
-
line-height: 100%;
|
|
55274
55276
|
position: relative;
|
|
55275
55277
|
text-align: center;
|
|
55276
55278
|
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;
|