superdesk-ui-framework 4.0.13 → 4.0.14
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-typescript/components/TreeSelect/TreeSelect.tsx +14 -1
- package/dist/components/TreeSelect.tsx +10 -15
- package/dist/examples.bundle.js +21 -18
- package/dist/superdesk-ui.bundle.js +8 -1
- package/examples/pages/components/TreeSelect.tsx +10 -15
- package/package.json +1 -1
- package/react/components/TreeSelect/TreeSelect.d.ts +1 -0
- package/react/components/TreeSelect/TreeSelect.js +8 -1
|
@@ -96,6 +96,13 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
|
|
|
96
96
|
private popperInstance: Instance | null;
|
|
97
97
|
private zIndex: number = getNextZIndex();
|
|
98
98
|
|
|
99
|
+
/*
|
|
100
|
+
* This variable is used to distinguish changes coming from outside (from props.value)
|
|
101
|
+
* from those made by the user through interaction with the component.
|
|
102
|
+
* It prevents triggering `onChange` when `props.value` updates externally.
|
|
103
|
+
*/
|
|
104
|
+
private changesFromOutside: boolean;
|
|
105
|
+
|
|
99
106
|
constructor(props: IProps<T>) {
|
|
100
107
|
super(props);
|
|
101
108
|
this.state = {
|
|
@@ -133,6 +140,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
|
|
|
133
140
|
this.treeSelectRef = React.createRef();
|
|
134
141
|
this.popperInstance = null;
|
|
135
142
|
this.onDragEnd = this.onDragEnd.bind(this);
|
|
143
|
+
this.changesFromOutside = false;
|
|
136
144
|
}
|
|
137
145
|
|
|
138
146
|
inputFocus = () => {
|
|
@@ -212,8 +220,13 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
|
|
|
212
220
|
|
|
213
221
|
componentDidUpdate(prevProps: Readonly<IProps<T>>, prevState: Readonly<IState<T>>): void {
|
|
214
222
|
if (!isEqual(prevState.value, this.state.value)) {
|
|
215
|
-
|
|
223
|
+
if (this.changesFromOutside) {
|
|
224
|
+
this.changesFromOutside = false;
|
|
225
|
+
} else {
|
|
226
|
+
this.props.onChange(this.state.value);
|
|
227
|
+
}
|
|
216
228
|
} else if (!isEqual(prevProps.value, this.props.value)) {
|
|
229
|
+
this.changesFromOutside = true;
|
|
217
230
|
this.setState({
|
|
218
231
|
value: this.props.value ?? [],
|
|
219
232
|
});
|
|
@@ -12,7 +12,7 @@ interface IState {
|
|
|
12
12
|
arr: any;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
const multiSelectOptions = [
|
|
16
16
|
{
|
|
17
17
|
value: {name: 'Category1'},
|
|
18
18
|
children: [
|
|
@@ -93,7 +93,7 @@ let options = [
|
|
|
93
93
|
},
|
|
94
94
|
]
|
|
95
95
|
|
|
96
|
-
|
|
96
|
+
const singleSelectOptions = [
|
|
97
97
|
{
|
|
98
98
|
value: {name: 'Category1', border: 'red'},
|
|
99
99
|
children: [
|
|
@@ -169,9 +169,6 @@ let options2 = [
|
|
|
169
169
|
},
|
|
170
170
|
]
|
|
171
171
|
|
|
172
|
-
let fetchedArr = [];
|
|
173
|
-
fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data);
|
|
174
|
-
|
|
175
172
|
type ICancelFn = () => void;
|
|
176
173
|
|
|
177
174
|
function searchOptions(
|
|
@@ -181,9 +178,7 @@ function searchOptions(
|
|
|
181
178
|
let timeout = setTimeout(() => {
|
|
182
179
|
|
|
183
180
|
callback(
|
|
184
|
-
|
|
185
|
-
.filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
|
|
186
|
-
.map((item) => ({value: item})),
|
|
181
|
+
multiSelectOptions.filter((item: any) => item.value.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
|
|
187
182
|
);
|
|
188
183
|
}, 1000);
|
|
189
184
|
|
|
@@ -198,8 +193,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
198
193
|
this.state = {
|
|
199
194
|
value: [],
|
|
200
195
|
value2: [],
|
|
201
|
-
options:
|
|
202
|
-
options2:
|
|
196
|
+
options: multiSelectOptions,
|
|
197
|
+
options2: multiSelectOptions,
|
|
203
198
|
inputValue: '',
|
|
204
199
|
arr: []
|
|
205
200
|
}
|
|
@@ -244,7 +239,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
244
239
|
<TreeSelect
|
|
245
240
|
kind='synchronous'
|
|
246
241
|
value={[{name: 'Category1'}]}
|
|
247
|
-
getOptions={() =>
|
|
242
|
+
getOptions={() => multiSelectOptions}
|
|
248
243
|
getId={(item) => item.name}
|
|
249
244
|
getLabel={(item) => item.name}
|
|
250
245
|
selectBranchWithChildren
|
|
@@ -300,7 +295,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
300
295
|
<TreeSelect
|
|
301
296
|
kind='synchronous'
|
|
302
297
|
value={[{name: 'Category1'}, {name: 'Category2'}, {name: 'Category3'}]}
|
|
303
|
-
getOptions={() =>
|
|
298
|
+
getOptions={() => multiSelectOptions}
|
|
304
299
|
getId={(item) => item.name}
|
|
305
300
|
getLabel={(item) => item.name}
|
|
306
301
|
selectBranchWithChildren
|
|
@@ -358,8 +353,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
358
353
|
<TreeSelect
|
|
359
354
|
kind="asynchronous"
|
|
360
355
|
value={this.state.value}
|
|
361
|
-
getLabel={({
|
|
362
|
-
getId={({
|
|
356
|
+
getLabel={({name}) => name}
|
|
357
|
+
getId={({name}) => name}
|
|
363
358
|
selectBranchWithChildren
|
|
364
359
|
allowMultiple
|
|
365
360
|
searchOptions={searchOptions}
|
|
@@ -400,7 +395,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
400
395
|
<TreeSelect
|
|
401
396
|
kind='synchronous'
|
|
402
397
|
value={[]}
|
|
403
|
-
getOptions={() =>
|
|
398
|
+
getOptions={() => singleSelectOptions}
|
|
404
399
|
getLabel={(item) => item.name}
|
|
405
400
|
getId={(item) => item.name}
|
|
406
401
|
getBorderColor={(item) => item.border}
|
package/dist/examples.bundle.js
CHANGED
|
@@ -79164,6 +79164,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
79164
79164
|
_this.treeSelectRef = React.createRef();
|
|
79165
79165
|
_this.popperInstance = null;
|
|
79166
79166
|
_this.onDragEnd = _this.onDragEnd.bind(_this);
|
|
79167
|
+
_this.changesFromOutside = false;
|
|
79167
79168
|
return _this;
|
|
79168
79169
|
}
|
|
79169
79170
|
TreeSelect.prototype.componentWillUnmount = function () {
|
|
@@ -79174,9 +79175,15 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
79174
79175
|
TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
79175
79176
|
var _a, _b;
|
|
79176
79177
|
if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
|
|
79177
|
-
|
|
79178
|
+
if (this.changesFromOutside) {
|
|
79179
|
+
this.changesFromOutside = false;
|
|
79180
|
+
}
|
|
79181
|
+
else {
|
|
79182
|
+
this.props.onChange(this.state.value);
|
|
79183
|
+
}
|
|
79178
79184
|
}
|
|
79179
79185
|
else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
|
|
79186
|
+
this.changesFromOutside = true;
|
|
79180
79187
|
this.setState({
|
|
79181
79188
|
value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
|
|
79182
79189
|
});
|
|
@@ -181136,7 +181143,7 @@ var React = __importStar(__webpack_require__(0));
|
|
|
181136
181143
|
var Markup = __importStar(__webpack_require__(8));
|
|
181137
181144
|
var app_typescript_1 = __webpack_require__(5);
|
|
181138
181145
|
var TreeSelect_1 = __webpack_require__(383);
|
|
181139
|
-
var
|
|
181146
|
+
var multiSelectOptions = [
|
|
181140
181147
|
{
|
|
181141
181148
|
value: { name: 'Category1' },
|
|
181142
181149
|
children: [
|
|
@@ -181215,7 +181222,7 @@ var options = [
|
|
|
181215
181222
|
]
|
|
181216
181223
|
},
|
|
181217
181224
|
];
|
|
181218
|
-
var
|
|
181225
|
+
var singleSelectOptions = [
|
|
181219
181226
|
{
|
|
181220
181227
|
value: { name: 'Category1', border: 'red' },
|
|
181221
181228
|
children: [
|
|
@@ -181286,13 +181293,9 @@ var options2 = [
|
|
|
181286
181293
|
]
|
|
181287
181294
|
},
|
|
181288
181295
|
];
|
|
181289
|
-
var fetchedArr = [];
|
|
181290
|
-
fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(function (response) { return response.json(); }).then(function (data) { return fetchedArr = data; });
|
|
181291
181296
|
function searchOptions(term, callback) {
|
|
181292
181297
|
var timeout = setTimeout(function () {
|
|
181293
|
-
callback(
|
|
181294
|
-
.filter(function (item) { return item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()); })
|
|
181295
|
-
.map(function (item) { return ({ value: item }); }));
|
|
181298
|
+
callback(multiSelectOptions.filter(function (item) { return item.value.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()); }));
|
|
181296
181299
|
}, 1000);
|
|
181297
181300
|
return function () {
|
|
181298
181301
|
clearTimeout(timeout);
|
|
@@ -181305,8 +181308,8 @@ var TreeSelectDocs = /** @class */ (function (_super) {
|
|
|
181305
181308
|
_this.state = {
|
|
181306
181309
|
value: [],
|
|
181307
181310
|
value2: [],
|
|
181308
|
-
options:
|
|
181309
|
-
options2:
|
|
181311
|
+
options: multiSelectOptions,
|
|
181312
|
+
options2: multiSelectOptions,
|
|
181310
181313
|
inputValue: '',
|
|
181311
181314
|
arr: []
|
|
181312
181315
|
};
|
|
@@ -181331,7 +181334,7 @@ var TreeSelectDocs = /** @class */ (function (_super) {
|
|
|
181331
181334
|
React.createElement(Markup.ReactMarkupPreview, null,
|
|
181332
181335
|
React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
|
|
181333
181336
|
React.createElement("div", { className: 'form__row' },
|
|
181334
|
-
React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }], getOptions: function () { return
|
|
181337
|
+
React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }], getOptions: function () { return multiSelectOptions; }, getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, selectBranchWithChildren: true, allowMultiple: true, label: 'TreeSelect Label', info: 'Info Message', searchPlaceholder: 'Search...', getBackgroundColor: function (item) { return item.bgColor; }, valueTemplate: function (item, Wrapper) {
|
|
181335
181338
|
return (React.createElement(Wrapper, { backgroundColor: item.bgColor },
|
|
181336
181339
|
React.createElement("span", null, item.name)));
|
|
181337
181340
|
}, onChange: function (e) { return false; } })))),
|
|
@@ -181341,7 +181344,7 @@ var TreeSelectDocs = /** @class */ (function (_super) {
|
|
|
181341
181344
|
React.createElement(Markup.ReactMarkupPreview, null,
|
|
181342
181345
|
React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
|
|
181343
181346
|
React.createElement("div", { className: 'form__row' },
|
|
181344
|
-
React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }, { name: 'Category2' }, { name: 'Category3' }], getOptions: function () { return
|
|
181347
|
+
React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }, { name: 'Category2' }, { name: 'Category3' }], getOptions: function () { return multiSelectOptions; }, getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, selectBranchWithChildren: true, allowMultiple: true, sortable: true, label: 'TreeSelect Label', info: 'Info Message', searchPlaceholder: 'Search...', getBackgroundColor: function (item) { return item.bgColor; }, valueTemplate: function (item, Wrapper) {
|
|
181345
181348
|
return (React.createElement(Wrapper, { backgroundColor: item.bgColor },
|
|
181346
181349
|
React.createElement("span", null, item.name)));
|
|
181347
181350
|
}, onChange: function (e) { return false; } })))),
|
|
@@ -181352,11 +181355,11 @@ var TreeSelectDocs = /** @class */ (function (_super) {
|
|
|
181352
181355
|
React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
|
|
181353
181356
|
React.createElement("div", { className: 'form__row' },
|
|
181354
181357
|
React.createElement(TreeSelect_1.TreeSelect, { kind: "asynchronous", value: this.state.value, getLabel: function (_a) {
|
|
181355
|
-
var
|
|
181356
|
-
return
|
|
181358
|
+
var name = _a.name;
|
|
181359
|
+
return name;
|
|
181357
181360
|
}, getId: function (_a) {
|
|
181358
|
-
var
|
|
181359
|
-
return
|
|
181361
|
+
var name = _a.name;
|
|
181362
|
+
return name;
|
|
181360
181363
|
}, selectBranchWithChildren: true, allowMultiple: true, searchOptions: searchOptions, label: 'TreeSelect Label', info: 'Info Message', onChange: function (val) {
|
|
181361
181364
|
_this.setState({ value: val });
|
|
181362
181365
|
} })))),
|
|
@@ -181366,7 +181369,7 @@ var TreeSelectDocs = /** @class */ (function (_super) {
|
|
|
181366
181369
|
React.createElement(Markup.ReactMarkupPreview, null,
|
|
181367
181370
|
React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
|
|
181368
181371
|
React.createElement("div", { className: 'form__row' },
|
|
181369
|
-
React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [], getOptions: function () { return
|
|
181372
|
+
React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [], getOptions: function () { return singleSelectOptions; }, getLabel: function (item) { return item.name; }, getId: function (item) { return item.name; }, getBorderColor: function (item) { return item.border; }, selectBranchWithChildren: true, label: 'TreeSelect Label', info: 'Info Message', placeholder: 'Select one', optionTemplate: function (item) {
|
|
181370
181373
|
return React.createElement("div", null,
|
|
181371
181374
|
"Label: ",
|
|
181372
181375
|
item.name);
|
|
@@ -185401,7 +185404,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
185401
185404
|
/* 938 */
|
|
185402
185405
|
/***/ (function(module, exports) {
|
|
185403
185406
|
|
|
185404
|
-
module.exports = {"name":"superdesk-ui-framework","version":"4.0.
|
|
185407
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.14","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/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","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","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","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":"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":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.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"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
|
|
185405
185408
|
|
|
185406
185409
|
/***/ }),
|
|
185407
185410
|
/* 939 */
|
|
@@ -78285,6 +78285,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
78285
78285
|
_this.treeSelectRef = React.createRef();
|
|
78286
78286
|
_this.popperInstance = null;
|
|
78287
78287
|
_this.onDragEnd = _this.onDragEnd.bind(_this);
|
|
78288
|
+
_this.changesFromOutside = false;
|
|
78288
78289
|
return _this;
|
|
78289
78290
|
}
|
|
78290
78291
|
TreeSelect.prototype.componentWillUnmount = function () {
|
|
@@ -78295,9 +78296,15 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
78295
78296
|
TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
78296
78297
|
var _a, _b;
|
|
78297
78298
|
if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
|
|
78298
|
-
|
|
78299
|
+
if (this.changesFromOutside) {
|
|
78300
|
+
this.changesFromOutside = false;
|
|
78301
|
+
}
|
|
78302
|
+
else {
|
|
78303
|
+
this.props.onChange(this.state.value);
|
|
78304
|
+
}
|
|
78299
78305
|
}
|
|
78300
78306
|
else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
|
|
78307
|
+
this.changesFromOutside = true;
|
|
78301
78308
|
this.setState({
|
|
78302
78309
|
value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
|
|
78303
78310
|
});
|
|
@@ -12,7 +12,7 @@ interface IState {
|
|
|
12
12
|
arr: any;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
const multiSelectOptions = [
|
|
16
16
|
{
|
|
17
17
|
value: {name: 'Category1'},
|
|
18
18
|
children: [
|
|
@@ -93,7 +93,7 @@ let options = [
|
|
|
93
93
|
},
|
|
94
94
|
]
|
|
95
95
|
|
|
96
|
-
|
|
96
|
+
const singleSelectOptions = [
|
|
97
97
|
{
|
|
98
98
|
value: {name: 'Category1', border: 'red'},
|
|
99
99
|
children: [
|
|
@@ -169,9 +169,6 @@ let options2 = [
|
|
|
169
169
|
},
|
|
170
170
|
]
|
|
171
171
|
|
|
172
|
-
let fetchedArr = [];
|
|
173
|
-
fetch('https://nominatim.openstreetmap.org/search/berlin?format=json&addressdetails=1&limit=20').then(response => response.json()).then(data => fetchedArr = data);
|
|
174
|
-
|
|
175
172
|
type ICancelFn = () => void;
|
|
176
173
|
|
|
177
174
|
function searchOptions(
|
|
@@ -181,9 +178,7 @@ function searchOptions(
|
|
|
181
178
|
let timeout = setTimeout(() => {
|
|
182
179
|
|
|
183
180
|
callback(
|
|
184
|
-
|
|
185
|
-
.filter((item: any) => item.display_name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
|
|
186
|
-
.map((item) => ({value: item})),
|
|
181
|
+
multiSelectOptions.filter((item: any) => item.value.name.toLocaleLowerCase().includes(term.toLocaleLowerCase()))
|
|
187
182
|
);
|
|
188
183
|
}, 1000);
|
|
189
184
|
|
|
@@ -198,8 +193,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
198
193
|
this.state = {
|
|
199
194
|
value: [],
|
|
200
195
|
value2: [],
|
|
201
|
-
options:
|
|
202
|
-
options2:
|
|
196
|
+
options: multiSelectOptions,
|
|
197
|
+
options2: multiSelectOptions,
|
|
203
198
|
inputValue: '',
|
|
204
199
|
arr: []
|
|
205
200
|
}
|
|
@@ -244,7 +239,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
244
239
|
<TreeSelect
|
|
245
240
|
kind='synchronous'
|
|
246
241
|
value={[{name: 'Category1'}]}
|
|
247
|
-
getOptions={() =>
|
|
242
|
+
getOptions={() => multiSelectOptions}
|
|
248
243
|
getId={(item) => item.name}
|
|
249
244
|
getLabel={(item) => item.name}
|
|
250
245
|
selectBranchWithChildren
|
|
@@ -300,7 +295,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
300
295
|
<TreeSelect
|
|
301
296
|
kind='synchronous'
|
|
302
297
|
value={[{name: 'Category1'}, {name: 'Category2'}, {name: 'Category3'}]}
|
|
303
|
-
getOptions={() =>
|
|
298
|
+
getOptions={() => multiSelectOptions}
|
|
304
299
|
getId={(item) => item.name}
|
|
305
300
|
getLabel={(item) => item.name}
|
|
306
301
|
selectBranchWithChildren
|
|
@@ -358,8 +353,8 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
358
353
|
<TreeSelect
|
|
359
354
|
kind="asynchronous"
|
|
360
355
|
value={this.state.value}
|
|
361
|
-
getLabel={({
|
|
362
|
-
getId={({
|
|
356
|
+
getLabel={({name}) => name}
|
|
357
|
+
getId={({name}) => name}
|
|
363
358
|
selectBranchWithChildren
|
|
364
359
|
allowMultiple
|
|
365
360
|
searchOptions={searchOptions}
|
|
@@ -400,7 +395,7 @@ export class TreeSelectDocs extends React.Component<{}, IState> {
|
|
|
400
395
|
<TreeSelect
|
|
401
396
|
kind='synchronous'
|
|
402
397
|
value={[]}
|
|
403
|
-
getOptions={() =>
|
|
398
|
+
getOptions={() => singleSelectOptions}
|
|
404
399
|
getLabel={(item) => item.name}
|
|
405
400
|
getId={(item) => item.name}
|
|
406
401
|
getBorderColor={(item) => item.border}
|
package/package.json
CHANGED
|
@@ -63,6 +63,7 @@ export declare class TreeSelect<T> extends React.Component<IProps<T>, IState<T>>
|
|
|
63
63
|
private htmlId;
|
|
64
64
|
private popperInstance;
|
|
65
65
|
private zIndex;
|
|
66
|
+
private changesFromOutside;
|
|
66
67
|
constructor(props: IProps<T>);
|
|
67
68
|
inputFocus: () => void;
|
|
68
69
|
listNavigation: () => void;
|
|
@@ -179,6 +179,7 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
179
179
|
_this.treeSelectRef = React.createRef();
|
|
180
180
|
_this.popperInstance = null;
|
|
181
181
|
_this.onDragEnd = _this.onDragEnd.bind(_this);
|
|
182
|
+
_this.changesFromOutside = false;
|
|
182
183
|
return _this;
|
|
183
184
|
}
|
|
184
185
|
TreeSelect.prototype.componentWillUnmount = function () {
|
|
@@ -189,9 +190,15 @@ var TreeSelect = /** @class */ (function (_super) {
|
|
|
189
190
|
TreeSelect.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
190
191
|
var _a, _b;
|
|
191
192
|
if (!(0, lodash_1.isEqual)(prevState.value, this.state.value)) {
|
|
192
|
-
|
|
193
|
+
if (this.changesFromOutside) {
|
|
194
|
+
this.changesFromOutside = false;
|
|
195
|
+
}
|
|
196
|
+
else {
|
|
197
|
+
this.props.onChange(this.state.value);
|
|
198
|
+
}
|
|
193
199
|
}
|
|
194
200
|
else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
|
|
201
|
+
this.changesFromOutside = true;
|
|
195
202
|
this.setState({
|
|
196
203
|
value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
|
|
197
204
|
});
|