superdesk-ui-framework 3.0.72 → 3.0.74
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/_sd-tag-input.scss +3 -0
- package/app/styles/components/_sd-searchbar.scss +16 -1
- package/app-typescript/components/ListItemLoader.tsx +1 -1
- package/app-typescript/components/Lists/TableList.tsx +5 -0
- package/app-typescript/components/SingleAndDoubleClickFunction.tsx +1 -1
- package/dist/examples.bundle.js +23 -6
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +35 -2
- package/dist/superdesk-ui.bundle.css +20 -4
- package/dist/superdesk-ui.bundle.js +5 -4
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +35 -2
- package/package.json +1 -1
- package/react/components/ListItemLoader.js +1 -1
- package/react/components/Lists/TableList.d.ts +2 -0
- package/react/components/Lists/TableList.js +3 -2
- package/react/components/SingleAndDoubleClickFunction.js +1 -1
@@ -143,6 +143,7 @@ tags-input,
|
|
143
143
|
display: flex;
|
144
144
|
flex-direction: row;
|
145
145
|
align-items: center;
|
146
|
+
gap: var(--space--2);
|
146
147
|
|
147
148
|
span {
|
148
149
|
flex-grow: 1;
|
@@ -467,6 +468,7 @@ tags-input,
|
|
467
468
|
.tags-input__helper-box {
|
468
469
|
display: flex;
|
469
470
|
align-items: center;
|
471
|
+
gap: var(--space--2);
|
470
472
|
}
|
471
473
|
}
|
472
474
|
|
@@ -661,6 +663,7 @@ tags-input,
|
|
661
663
|
display: flex;
|
662
664
|
width: 100%;
|
663
665
|
align-items: center;
|
666
|
+
gap: var(--space--2);
|
664
667
|
}
|
665
668
|
|
666
669
|
.tags-input__remove-button {
|
@@ -89,13 +89,28 @@
|
|
89
89
|
padding-inline: var(--space--1-5);
|
90
90
|
}
|
91
91
|
}
|
92
|
+
.sd-input {
|
93
|
+
height: 100%;
|
94
|
+
border-inline-end: 1px solid var(--color-border-line--medium);
|
95
|
+
z-index: 1;
|
96
|
+
position: relative;
|
97
|
+
background-color: var(--sd-colour-bg__searchbar);
|
98
|
+
border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
|
99
|
+
transition: box-shadow 0.2s ease-out;
|
100
|
+
.sd-input__input {
|
101
|
+
background-color: transparent;
|
102
|
+
border: none;
|
103
|
+
}
|
104
|
+
}
|
92
105
|
&.sd-searchbar--focused,
|
93
106
|
&:focus-within {
|
94
|
-
.dropdown
|
107
|
+
.dropdown,
|
108
|
+
.sd-input {
|
95
109
|
border-inline-end-color: var(--sd-colour-interactive--alpha-50);
|
96
110
|
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10);
|
97
111
|
}
|
98
112
|
}
|
113
|
+
|
99
114
|
}
|
100
115
|
|
101
116
|
.sd-searchbar__input, input[type="text"].sd-searchbar__input, input[type="search"].sd-searchbar__input {
|
@@ -4,7 +4,7 @@ import { Skeleton } from './Skeleton';
|
|
4
4
|
export class ListItemLoader extends React.Component<{}> {
|
5
5
|
render() {
|
6
6
|
return (
|
7
|
-
<div className="sd-list-item sd-shadow--z1 sd-list-item--no-hover">
|
7
|
+
<div className="sd-list-item sd-shadow--z1 sd-list-item--no-hover" data-test-id="list-item-placeholder">
|
8
8
|
<div className="sd-list-item__border"></div>
|
9
9
|
<div className="sd-list-item__column">
|
10
10
|
<Skeleton shape="circle" size="2rem" />
|
@@ -28,6 +28,7 @@ export interface IPropsArrayItem {
|
|
28
28
|
hexColor?: string;
|
29
29
|
locked?: boolean;
|
30
30
|
positionLocked?: boolean;
|
31
|
+
selected?: boolean;
|
31
32
|
onClick?(): void;
|
32
33
|
onDoubleClick?(): void;
|
33
34
|
}
|
@@ -154,6 +155,7 @@ class TableList extends React.PureComponent<IProps, IState> {
|
|
154
155
|
center={item.center}
|
155
156
|
end={item.end}
|
156
157
|
action={item.action}
|
158
|
+
selected={item.selected}
|
157
159
|
onClick={
|
158
160
|
item.onClick
|
159
161
|
? item.onClick
|
@@ -204,6 +206,7 @@ class TableList extends React.PureComponent<IProps, IState> {
|
|
204
206
|
center={item.center}
|
205
207
|
end={item.end}
|
206
208
|
action={item.action}
|
209
|
+
selected={item.selected}
|
207
210
|
onClick={
|
208
211
|
item.onClick
|
209
212
|
? item.onClick
|
@@ -264,6 +267,7 @@ export interface IPropsItem {
|
|
264
267
|
showDragHandle?: 'always' | 'onHover' | 'none';
|
265
268
|
locked?: boolean;
|
266
269
|
positionLocked?: boolean;
|
270
|
+
selected?: boolean;
|
267
271
|
onClick?(): void;
|
268
272
|
onDoubleClick?(): void;
|
269
273
|
onSelect?(): void;
|
@@ -287,6 +291,7 @@ class TableListItem extends React.PureComponent<IPropsItem> {
|
|
287
291
|
|
288
292
|
render() {
|
289
293
|
let classes = classNames('table-list__item', {
|
294
|
+
'table-list__item--selected': this.props.selected,
|
290
295
|
'table-list__item--clickable': this.props.onClick,
|
291
296
|
'table-list__item--draggable': this.props.dragAndDrop,
|
292
297
|
'table-list__item--locked': this.props.locked,
|
@@ -5,7 +5,7 @@ export interface ICallbacks {
|
|
5
5
|
|
6
6
|
export function setupSingleAndDoubleClick(): (event: React.MouseEvent, cb: ICallbacks) => void {
|
7
7
|
let timer: number | undefined;
|
8
|
-
let delay: number;
|
8
|
+
let delay: number = 250;
|
9
9
|
|
10
10
|
return (event, cb: ICallbacks) => {
|
11
11
|
clearTimeout(timer);
|
package/dist/examples.bundle.js
CHANGED
@@ -40989,7 +40989,7 @@ var TableList = /** @class */ (function (_super) {
|
|
40989
40989
|
? _this.props.itemsDropdown(index)
|
40990
40990
|
: []; } })
|
40991
40991
|
: React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
40992
|
-
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
|
40992
|
+
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
|
40993
40993
|
? item.onClick
|
40994
40994
|
: undefined, onDoubleClick: item.onDoubleClick
|
40995
40995
|
? item.onDoubleClick
|
@@ -41003,7 +41003,7 @@ var TableList = /** @class */ (function (_super) {
|
|
41003
41003
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
41004
41004
|
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
41005
41005
|
: React.createElement("div", { role: 'list', className: classes },
|
41006
|
-
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
|
41006
|
+
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
|
41007
41007
|
? item.onClick
|
41008
41008
|
: undefined, onDoubleClick: item.onDoubleClick
|
41009
41009
|
? item.onDoubleClick
|
@@ -41039,6 +41039,7 @@ var TableListItem = /** @class */ (function (_super) {
|
|
41039
41039
|
TableListItem.prototype.render = function () {
|
41040
41040
|
var _this = this;
|
41041
41041
|
var classes = (0, classnames_1.default)('table-list__item', {
|
41042
|
+
'table-list__item--selected': this.props.selected,
|
41042
41043
|
'table-list__item--clickable': this.props.onClick,
|
41043
41044
|
'table-list__item--draggable': this.props.dragAndDrop,
|
41044
41045
|
'table-list__item--locked': this.props.locked,
|
@@ -61094,7 +61095,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
61094
61095
|
exports.setupSingleAndDoubleClick = void 0;
|
61095
61096
|
function setupSingleAndDoubleClick() {
|
61096
61097
|
var timer;
|
61097
|
-
var delay;
|
61098
|
+
var delay = 250;
|
61098
61099
|
return function (event, cb) {
|
61099
61100
|
clearTimeout(timer);
|
61100
61101
|
if (event.nativeEvent.detail === 1) {
|
@@ -105879,7 +105880,7 @@ var ListItemLoader = /** @class */ (function (_super) {
|
|
105879
105880
|
return _super !== null && _super.apply(this, arguments) || this;
|
105880
105881
|
}
|
105881
105882
|
ListItemLoader.prototype.render = function () {
|
105882
|
-
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
|
105883
|
+
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
|
105883
105884
|
React.createElement("div", { className: "sd-list-item__border" }),
|
105884
105885
|
React.createElement("div", { className: "sd-list-item__column" },
|
105885
105886
|
React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
|
@@ -139810,6 +139811,17 @@ var React = __importStar(__webpack_require__(0));
|
|
139810
139811
|
var Components = __importStar(__webpack_require__(43));
|
139811
139812
|
var index_1 = __webpack_require__(3);
|
139812
139813
|
var FormLabel_1 = __webpack_require__(51);
|
139814
|
+
var options2 = [
|
139815
|
+
{
|
139816
|
+
value: { name: 'A long category Category1' },
|
139817
|
+
},
|
139818
|
+
{
|
139819
|
+
value: { name: 'Category2' },
|
139820
|
+
},
|
139821
|
+
{
|
139822
|
+
value: { name: 'Category3' },
|
139823
|
+
},
|
139824
|
+
];
|
139813
139825
|
var TestGround = /** @class */ (function (_super) {
|
139814
139826
|
__extends(TestGround, _super);
|
139815
139827
|
function TestGround(props) {
|
@@ -139830,6 +139842,7 @@ var TestGround = /** @class */ (function (_super) {
|
|
139830
139842
|
date: new Date('2022-01-08'),
|
139831
139843
|
time: '16:50',
|
139832
139844
|
modalPlanningTemplates: false,
|
139845
|
+
treeSelectValue: [],
|
139833
139846
|
};
|
139834
139847
|
return _this;
|
139835
139848
|
}
|
@@ -139872,7 +139885,11 @@ var TestGround = /** @class */ (function (_super) {
|
|
139872
139885
|
{ label: 'Action 1', onSelect: function () { return 1; } },
|
139873
139886
|
{ label: 'Action 2', onSelect: function () { return 1; } },
|
139874
139887
|
{ label: 'Action 3', onSelect: function () { return 1; } },
|
139875
|
-
] }, "
|
139888
|
+
] }, "With dropdown")),
|
139889
|
+
React.createElement("hr", null),
|
139890
|
+
React.createElement(index_1.SearchBar, { placeholder: 'Search', boxed: true },
|
139891
|
+
React.createElement(index_1.TreeSelect, { kind: 'synchronous', value: this.state.treeSelectValue, getOptions: function () { return options2; }, getLabel: function (item) { return item.name; }, getId: function (item) { return item.name; }, onChange: function () { return false; }, placeholder: 'Select a desk', width: 'medium', inlineLabel: true, labelHidden: true }, "With TreeSelect")),
|
139892
|
+
React.createElement("hr", null),
|
139876
139893
|
React.createElement("hr", null),
|
139877
139894
|
React.createElement("h3", { className: "docs-page__h3 sd-margin-y--0" }, "Pagination"),
|
139878
139895
|
React.createElement("div", { className: 'sd-pagination' },
|
@@ -144250,7 +144267,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
|
|
144250
144267
|
/* 693 */
|
144251
144268
|
/***/ (function(module, exports) {
|
144252
144269
|
|
144253
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.
|
144270
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.74","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":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","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/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","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","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","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","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","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":"4.9.5","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":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","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-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
|
144254
144271
|
|
144255
144272
|
/***/ }),
|
144256
144273
|
/* 694 */
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Components from './components/Index';
|
3
|
-
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker} from '../../../../app-typescript/index';
|
3
|
+
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
|
4
4
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
5
5
|
|
6
6
|
interface IProps {
|
@@ -23,8 +23,21 @@ interface IState {
|
|
23
23
|
date: any;
|
24
24
|
time: string;
|
25
25
|
modalPlanningTemplates: boolean;
|
26
|
+
treeSelectValue: any;
|
26
27
|
}
|
27
28
|
|
29
|
+
let options2 = [
|
30
|
+
{
|
31
|
+
value: {name: 'A long category Category1'},
|
32
|
+
},
|
33
|
+
{
|
34
|
+
value: {name: 'Category2'},
|
35
|
+
},
|
36
|
+
{
|
37
|
+
value: {name: 'Category3'},
|
38
|
+
},
|
39
|
+
]
|
40
|
+
|
28
41
|
export class TestGround extends React.Component<IProps, IState> {
|
29
42
|
constructor(props: IProps) {
|
30
43
|
super(props);
|
@@ -44,6 +57,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
44
57
|
date: new Date('2022-01-08'),
|
45
58
|
time: '16:50',
|
46
59
|
modalPlanningTemplates: false,
|
60
|
+
treeSelectValue: [],
|
47
61
|
}
|
48
62
|
}
|
49
63
|
|
@@ -98,6 +112,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
98
112
|
</BoxedList>
|
99
113
|
|
100
114
|
</Modal>
|
115
|
+
|
101
116
|
<h3 className="docs-page__h3 ">Planning Templates</h3>
|
102
117
|
<SearchBar placeholder='Search' boxed={true}>
|
103
118
|
<Dropdown
|
@@ -107,10 +122,28 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
107
122
|
{ label: 'Action 3', onSelect: () => 1 },
|
108
123
|
]}
|
109
124
|
>
|
110
|
-
|
125
|
+
With dropdown
|
111
126
|
</Dropdown>
|
112
127
|
</SearchBar>
|
128
|
+
<hr />
|
129
|
+
<SearchBar placeholder='Search' boxed={true}>
|
130
|
+
<TreeSelect
|
131
|
+
kind={'synchronous'}
|
132
|
+
value={this.state.treeSelectValue}
|
133
|
+
getOptions={() => options2}
|
134
|
+
getLabel={(item) => item.name}
|
135
|
+
getId={(item) => item.name}
|
136
|
+
onChange={() => false}
|
137
|
+
placeholder='Select a desk'
|
138
|
+
width='medium'
|
139
|
+
inlineLabel
|
140
|
+
labelHidden
|
141
|
+
>
|
142
|
+
With TreeSelect
|
143
|
+
</TreeSelect>
|
144
|
+
</SearchBar>
|
113
145
|
|
146
|
+
<hr />
|
114
147
|
<hr />
|
115
148
|
|
116
149
|
<h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
|
@@ -35676,7 +35676,8 @@ tags-input,
|
|
35676
35676
|
.tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box {
|
35677
35677
|
display: flex;
|
35678
35678
|
flex-direction: row;
|
35679
|
-
align-items: center;
|
35679
|
+
align-items: center;
|
35680
|
+
gap: var(--space--2); }
|
35680
35681
|
tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span,
|
35681
35682
|
.tags-input .tags-input__tags .tags-input__tag-item ti-tag-item .tags-input__helper-box span {
|
35682
35683
|
flex-grow: 1; }
|
@@ -35911,7 +35912,8 @@ tags-input,
|
|
35911
35912
|
background-color: rgba(0, 0, 0, 0.1); }
|
35912
35913
|
.tags-input .tags-input__helper-box {
|
35913
35914
|
display: flex;
|
35914
|
-
align-items: center;
|
35915
|
+
align-items: center;
|
35916
|
+
gap: var(--space--2); }
|
35915
35917
|
|
35916
35918
|
.autocomplete {
|
35917
35919
|
position: absolute;
|
@@ -36058,7 +36060,8 @@ tags-input,
|
|
36058
36060
|
.tags-input__single-item .tags-input__helper-box {
|
36059
36061
|
display: flex;
|
36060
36062
|
width: 100%;
|
36061
|
-
align-items: center;
|
36063
|
+
align-items: center;
|
36064
|
+
gap: var(--space--2); }
|
36062
36065
|
.tags-input__single-item .tags-input__remove-button {
|
36063
36066
|
display: flex;
|
36064
36067
|
align-items: center;
|
@@ -43435,7 +43438,20 @@ a.text-link {
|
|
43435
43438
|
.sd-searchbar--boxed .dropdown .dropdown__toggle {
|
43436
43439
|
height: 100%;
|
43437
43440
|
padding-inline: var(--space--1-5); }
|
43438
|
-
.sd-searchbar--boxed
|
43441
|
+
.sd-searchbar--boxed .sd-input {
|
43442
|
+
height: 100%;
|
43443
|
+
border-inline-end: 1px solid var(--color-border-line--medium);
|
43444
|
+
z-index: 1;
|
43445
|
+
position: relative;
|
43446
|
+
background-color: var(--sd-colour-bg__searchbar);
|
43447
|
+
border-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
|
43448
|
+
transition: box-shadow 0.2s ease-out; }
|
43449
|
+
.sd-searchbar--boxed .sd-input .sd-input__input {
|
43450
|
+
background-color: transparent;
|
43451
|
+
border: none; }
|
43452
|
+
.sd-searchbar--boxed.sd-searchbar--focused .dropdown,
|
43453
|
+
.sd-searchbar--boxed.sd-searchbar--focused .sd-input, .sd-searchbar--boxed:focus-within .dropdown,
|
43454
|
+
.sd-searchbar--boxed:focus-within .sd-input {
|
43439
43455
|
border-inline-end-color: var(--sd-colour-interactive--alpha-50);
|
43440
43456
|
box-shadow: inset 0 0 0 1px var(--sd-colour-interactive--alpha-50), 3px 0 0 var(--sd-colour-interactive--alpha-10); }
|
43441
43457
|
|
@@ -40633,7 +40633,7 @@ var TableList = /** @class */ (function (_super) {
|
|
40633
40633
|
? _this.props.itemsDropdown(index)
|
40634
40634
|
: []; } })
|
40635
40635
|
: React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
40636
|
-
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
|
40636
|
+
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
|
40637
40637
|
? item.onClick
|
40638
40638
|
: undefined, onDoubleClick: item.onDoubleClick
|
40639
40639
|
? item.onDoubleClick
|
@@ -40647,7 +40647,7 @@ var TableList = /** @class */ (function (_super) {
|
|
40647
40647
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
40648
40648
|
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
40649
40649
|
: React.createElement("div", { role: 'list', className: classes },
|
40650
|
-
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
|
40650
|
+
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
|
40651
40651
|
? item.onClick
|
40652
40652
|
: undefined, onDoubleClick: item.onDoubleClick
|
40653
40653
|
? item.onDoubleClick
|
@@ -40683,6 +40683,7 @@ var TableListItem = /** @class */ (function (_super) {
|
|
40683
40683
|
TableListItem.prototype.render = function () {
|
40684
40684
|
var _this = this;
|
40685
40685
|
var classes = (0, classnames_1.default)('table-list__item', {
|
40686
|
+
'table-list__item--selected': this.props.selected,
|
40686
40687
|
'table-list__item--clickable': this.props.onClick,
|
40687
40688
|
'table-list__item--draggable': this.props.dragAndDrop,
|
40688
40689
|
'table-list__item--locked': this.props.locked,
|
@@ -60738,7 +60739,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
60738
60739
|
exports.setupSingleAndDoubleClick = void 0;
|
60739
60740
|
function setupSingleAndDoubleClick() {
|
60740
60741
|
var timer;
|
60741
|
-
var delay;
|
60742
|
+
var delay = 250;
|
60742
60743
|
return function (event, cb) {
|
60743
60744
|
clearTimeout(timer);
|
60744
60745
|
if (event.nativeEvent.detail === 1) {
|
@@ -105140,7 +105141,7 @@ var ListItemLoader = /** @class */ (function (_super) {
|
|
105140
105141
|
return _super !== null && _super.apply(this, arguments) || this;
|
105141
105142
|
}
|
105142
105143
|
ListItemLoader.prototype.render = function () {
|
105143
|
-
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
|
105144
|
+
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
|
105144
105145
|
React.createElement("div", { className: "sd-list-item__border" }),
|
105145
105146
|
React.createElement("div", { className: "sd-list-item__column" },
|
105146
105147
|
React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
import * as Components from './components/Index';
|
3
|
-
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker} from '../../../../app-typescript/index';
|
3
|
+
import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
|
4
4
|
import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
|
5
5
|
|
6
6
|
interface IProps {
|
@@ -23,8 +23,21 @@ interface IState {
|
|
23
23
|
date: any;
|
24
24
|
time: string;
|
25
25
|
modalPlanningTemplates: boolean;
|
26
|
+
treeSelectValue: any;
|
26
27
|
}
|
27
28
|
|
29
|
+
let options2 = [
|
30
|
+
{
|
31
|
+
value: {name: 'A long category Category1'},
|
32
|
+
},
|
33
|
+
{
|
34
|
+
value: {name: 'Category2'},
|
35
|
+
},
|
36
|
+
{
|
37
|
+
value: {name: 'Category3'},
|
38
|
+
},
|
39
|
+
]
|
40
|
+
|
28
41
|
export class TestGround extends React.Component<IProps, IState> {
|
29
42
|
constructor(props: IProps) {
|
30
43
|
super(props);
|
@@ -44,6 +57,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
44
57
|
date: new Date('2022-01-08'),
|
45
58
|
time: '16:50',
|
46
59
|
modalPlanningTemplates: false,
|
60
|
+
treeSelectValue: [],
|
47
61
|
}
|
48
62
|
}
|
49
63
|
|
@@ -98,6 +112,7 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
98
112
|
</BoxedList>
|
99
113
|
|
100
114
|
</Modal>
|
115
|
+
|
101
116
|
<h3 className="docs-page__h3 ">Planning Templates</h3>
|
102
117
|
<SearchBar placeholder='Search' boxed={true}>
|
103
118
|
<Dropdown
|
@@ -107,10 +122,28 @@ export class TestGround extends React.Component<IProps, IState> {
|
|
107
122
|
{ label: 'Action 3', onSelect: () => 1 },
|
108
123
|
]}
|
109
124
|
>
|
110
|
-
|
125
|
+
With dropdown
|
111
126
|
</Dropdown>
|
112
127
|
</SearchBar>
|
128
|
+
<hr />
|
129
|
+
<SearchBar placeholder='Search' boxed={true}>
|
130
|
+
<TreeSelect
|
131
|
+
kind={'synchronous'}
|
132
|
+
value={this.state.treeSelectValue}
|
133
|
+
getOptions={() => options2}
|
134
|
+
getLabel={(item) => item.name}
|
135
|
+
getId={(item) => item.name}
|
136
|
+
onChange={() => false}
|
137
|
+
placeholder='Select a desk'
|
138
|
+
width='medium'
|
139
|
+
inlineLabel
|
140
|
+
labelHidden
|
141
|
+
>
|
142
|
+
With TreeSelect
|
143
|
+
</TreeSelect>
|
144
|
+
</SearchBar>
|
113
145
|
|
146
|
+
<hr />
|
114
147
|
<hr />
|
115
148
|
|
116
149
|
<h3 className="docs-page__h3 sd-margin-y--0">Pagination</h3>
|
package/package.json
CHANGED
@@ -47,7 +47,7 @@ var ListItemLoader = /** @class */ (function (_super) {
|
|
47
47
|
return _super !== null && _super.apply(this, arguments) || this;
|
48
48
|
}
|
49
49
|
ListItemLoader.prototype.render = function () {
|
50
|
-
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover" },
|
50
|
+
return (React.createElement("div", { className: "sd-list-item sd-shadow--z1 sd-list-item--no-hover", "data-test-id": "list-item-placeholder" },
|
51
51
|
React.createElement("div", { className: "sd-list-item__border" }),
|
52
52
|
React.createElement("div", { className: "sd-list-item__column" },
|
53
53
|
React.createElement(Skeleton_1.Skeleton, { shape: "circle", size: "2rem" })),
|
@@ -21,6 +21,7 @@ export interface IPropsArrayItem {
|
|
21
21
|
hexColor?: string;
|
22
22
|
locked?: boolean;
|
23
23
|
positionLocked?: boolean;
|
24
|
+
selected?: boolean;
|
24
25
|
onClick?(): void;
|
25
26
|
onDoubleClick?(): void;
|
26
27
|
}
|
@@ -46,6 +47,7 @@ export interface IPropsItem {
|
|
46
47
|
showDragHandle?: 'always' | 'onHover' | 'none';
|
47
48
|
locked?: boolean;
|
48
49
|
positionLocked?: boolean;
|
50
|
+
selected?: boolean;
|
49
51
|
onClick?(): void;
|
50
52
|
onDoubleClick?(): void;
|
51
53
|
onSelect?(): void;
|
@@ -126,7 +126,7 @@ var TableList = /** @class */ (function (_super) {
|
|
126
126
|
? _this.props.itemsDropdown(index)
|
127
127
|
: []; } })
|
128
128
|
: React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
|
129
|
-
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
|
129
|
+
React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
|
130
130
|
? item.onClick
|
131
131
|
: undefined, onDoubleClick: item.onDoubleClick
|
132
132
|
? item.onDoubleClick
|
@@ -140,7 +140,7 @@ var TableList = /** @class */ (function (_super) {
|
|
140
140
|
React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
|
141
141
|
React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
|
142
142
|
: React.createElement("div", { role: 'list', className: classes },
|
143
|
-
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
|
143
|
+
this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
|
144
144
|
? item.onClick
|
145
145
|
: undefined, onDoubleClick: item.onDoubleClick
|
146
146
|
? item.onDoubleClick
|
@@ -176,6 +176,7 @@ var TableListItem = /** @class */ (function (_super) {
|
|
176
176
|
TableListItem.prototype.render = function () {
|
177
177
|
var _this = this;
|
178
178
|
var classes = (0, classnames_1.default)('table-list__item', {
|
179
|
+
'table-list__item--selected': this.props.selected,
|
179
180
|
'table-list__item--clickable': this.props.onClick,
|
180
181
|
'table-list__item--draggable': this.props.dragAndDrop,
|
181
182
|
'table-list__item--locked': this.props.locked,
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.setupSingleAndDoubleClick = void 0;
|
4
4
|
function setupSingleAndDoubleClick() {
|
5
5
|
var timer;
|
6
|
-
var delay;
|
6
|
+
var delay = 250;
|
7
7
|
return function (event, cb) {
|
8
8
|
clearTimeout(timer);
|
9
9
|
if (event.nativeEvent.detail === 1) {
|