@lowdefy/blocks-antd 4.0.1 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blocks/Breadcrumb/Breadcrumb.js +2 -2
- package/dist/blocks/Modal/Modal.js +1 -0
- package/dist/blocks/Modal/schema.json +7 -0
- package/dist/blocks/MultipleSelector/MultipleSelector.js +1 -1
- package/dist/blocks/MultipleSelector/schema.json +10 -0
- package/dist/blocks/Pagination/Pagination.js +42 -21
- package/dist/blocks/Popover/Popover.js +39 -0
- package/dist/blocks/Popover/schema.json +86 -0
- package/dist/blocks/Popover/style.less +17 -0
- package/dist/blocks/Selector/Selector.js +1 -1
- package/dist/blocks/Selector/schema.json +10 -0
- package/dist/blocks/TextInput/TextInput.js +20 -4
- package/dist/blocks/TextInput/schema.json +11 -0
- package/dist/blocks/TreeSelector/TreeSelector.js +111 -0
- package/dist/blocks/TreeSelector/schema.json +166 -0
- package/dist/blocks/TreeSelector/style.less +27 -0
- package/dist/blocks.js +2 -0
- package/package.json +6 -6
|
@@ -41,7 +41,7 @@ const BreadcrumbBlock = ({ blockId, events, components: { Icon, Link }, methods,
|
|
|
41
41
|
},
|
|
42
42
|
link.style
|
|
43
43
|
]),
|
|
44
|
-
...link
|
|
44
|
+
...type.isObject(link) ? link : {}
|
|
45
45
|
}, ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, link.icon && /*#__PURE__*/ React.createElement(Icon, {
|
|
46
46
|
blockId: `${blockId}_${index}_icon`,
|
|
47
47
|
events: events,
|
|
@@ -50,7 +50,7 @@ const BreadcrumbBlock = ({ blockId, events, components: { Icon, Link }, methods,
|
|
|
50
50
|
...type.isObject(link.icon) ? link.icon : {},
|
|
51
51
|
style: {
|
|
52
52
|
marginRight: 8,
|
|
53
|
-
...link.icon.style
|
|
53
|
+
...type.isObject(link.icon?.style) ? link.icon.style : {}
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
}), type.isString(link) ? link : link.label)))));
|
|
@@ -69,6 +69,7 @@ const ModalBlock = ({ blockId, content, events, methods, properties })=>{
|
|
|
69
69
|
okButtonProps: properties.okButtonProps,
|
|
70
70
|
okText: properties.okText ?? 'Ok',
|
|
71
71
|
okType: properties.okButtonType ?? 'primary',
|
|
72
|
+
style: properties.style,
|
|
72
73
|
title: renderHtml({
|
|
73
74
|
html: properties.title,
|
|
74
75
|
methods
|
|
@@ -78,7 +78,7 @@ const MultipleSelector = ({ blockId, components: { Icon }, events, loading, meth
|
|
|
78
78
|
Icon
|
|
79
79
|
})),
|
|
80
80
|
maxTagCount: properties.maxTagCount,
|
|
81
|
-
notFoundContent: fetchState ? 'Loading' : 'Not found',
|
|
81
|
+
notFoundContent: fetchState ? properties.loadingPlaceholder || 'Loading' : properties.notFoundContent || 'Not found',
|
|
82
82
|
placeholder: loading ? 'Loading...' : get(properties, 'placeholder', {
|
|
83
83
|
default: 'Select items'
|
|
84
84
|
}),
|
|
@@ -216,6 +216,16 @@
|
|
|
216
216
|
"default": "Select item",
|
|
217
217
|
"description": "Placeholder text inside the block before user selects input."
|
|
218
218
|
},
|
|
219
|
+
"loadingPlaceholder": {
|
|
220
|
+
"type": "string",
|
|
221
|
+
"default": "Loading",
|
|
222
|
+
"description": "Placeholder text to show in options while the block is loading."
|
|
223
|
+
},
|
|
224
|
+
"notFoundContent": {
|
|
225
|
+
"type": "string",
|
|
226
|
+
"default": "not Found",
|
|
227
|
+
"description": "Placeholder text to show when list of options are empty."
|
|
228
|
+
},
|
|
219
229
|
"selectedIcon": {
|
|
220
230
|
"type": ["string", "object"],
|
|
221
231
|
"default": "AiOutlineCheck",
|
|
@@ -12,20 +12,16 @@
|
|
|
12
12
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
13
|
See the License for the specific language governing permissions and
|
|
14
14
|
limitations under the License.
|
|
15
|
-
*/ import React from 'react';
|
|
15
|
+
*/ import React, { useState, useEffect } from 'react';
|
|
16
16
|
import { blockDefaultProps } from '@lowdefy/block-utils';
|
|
17
17
|
import { Pagination } from 'antd';
|
|
18
18
|
import { type } from '@lowdefy/helpers';
|
|
19
|
-
const
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
return 10;
|
|
27
|
-
};
|
|
28
|
-
const createChangeHandler = ({ eventName, methods })=>(current, pageSize)=>{
|
|
19
|
+
const createChangeHandler = ({ eventName, methods, setState })=>(current, pageSize)=>{
|
|
20
|
+
setState({
|
|
21
|
+
current,
|
|
22
|
+
pageSize,
|
|
23
|
+
skip: (current - 1) * pageSize
|
|
24
|
+
});
|
|
29
25
|
methods.setValue({
|
|
30
26
|
current,
|
|
31
27
|
pageSize,
|
|
@@ -40,7 +36,35 @@ const createChangeHandler = ({ eventName, methods })=>(current, pageSize)=>{
|
|
|
40
36
|
}
|
|
41
37
|
});
|
|
42
38
|
};
|
|
39
|
+
const calculateState = ({ defaultCurrent, defaultPageSize, value })=>{
|
|
40
|
+
const state = {
|
|
41
|
+
current: type.isInt(value?.current) ? value?.current : defaultCurrent,
|
|
42
|
+
pageSize: type.isInt(value?.pageSize) ? value?.pageSize : defaultPageSize
|
|
43
|
+
};
|
|
44
|
+
state.skip = (state.current - 1) * state.pageSize;
|
|
45
|
+
return state;
|
|
46
|
+
};
|
|
43
47
|
const PaginationBlock = ({ blockId, loading, methods, properties, value })=>{
|
|
48
|
+
const [state, setState] = useState(()=>calculateState({
|
|
49
|
+
defaultCurrent: 1,
|
|
50
|
+
defaultPageSize: properties.pageSizeOptions?.[0] ?? 10,
|
|
51
|
+
value
|
|
52
|
+
}));
|
|
53
|
+
useEffect(()=>{
|
|
54
|
+
if (JSON.stringify(value) !== JSON.stringify(state)) {
|
|
55
|
+
const nextState = calculateState({
|
|
56
|
+
defaultCurrent: state.current,
|
|
57
|
+
defaultPageSize: state.pageSize,
|
|
58
|
+
value
|
|
59
|
+
});
|
|
60
|
+
setState(nextState);
|
|
61
|
+
methods.setValue({
|
|
62
|
+
...nextState
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
}, [
|
|
66
|
+
value
|
|
67
|
+
]);
|
|
44
68
|
const showTotal = type.isFunction(properties.showTotal) ? properties.showTotal : (total, range)=>{
|
|
45
69
|
if (type.isString(properties.showTotal)) {
|
|
46
70
|
return properties.showTotal;
|
|
@@ -56,16 +80,15 @@ const PaginationBlock = ({ blockId, loading, methods, properties, value })=>{
|
|
|
56
80
|
hideOnSinglePage: properties.hideOnSinglePage,
|
|
57
81
|
onChange: createChangeHandler({
|
|
58
82
|
eventName: 'onChange',
|
|
59
|
-
methods
|
|
83
|
+
methods,
|
|
84
|
+
setState
|
|
60
85
|
}),
|
|
61
86
|
onShowSizeChange: createChangeHandler({
|
|
62
87
|
eventName: 'onSizeChange',
|
|
63
|
-
methods
|
|
64
|
-
|
|
65
|
-
pageSize: getPageSize({
|
|
66
|
-
properties,
|
|
67
|
-
value
|
|
88
|
+
methods,
|
|
89
|
+
setState
|
|
68
90
|
}),
|
|
91
|
+
pageSize: state.pageSize,
|
|
69
92
|
pageSizeOptions: properties.pageSizeOptions || [
|
|
70
93
|
10,
|
|
71
94
|
20,
|
|
@@ -78,16 +101,14 @@ const PaginationBlock = ({ blockId, loading, methods, properties, value })=>{
|
|
|
78
101
|
simple: !!properties.simple,
|
|
79
102
|
size: properties.size,
|
|
80
103
|
total: properties.total !== undefined ? properties.total : 100,
|
|
81
|
-
current:
|
|
104
|
+
current: state.current
|
|
82
105
|
});
|
|
83
106
|
};
|
|
84
107
|
PaginationBlock.defaultProps = blockDefaultProps;
|
|
85
108
|
PaginationBlock.meta = {
|
|
86
109
|
valueType: 'object',
|
|
87
110
|
initValue: {
|
|
88
|
-
current:
|
|
89
|
-
pageSize: 10,
|
|
90
|
-
skip: 0
|
|
111
|
+
current: 1
|
|
91
112
|
},
|
|
92
113
|
category: 'input',
|
|
93
114
|
icons: [],
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020-2024 Lowdefy, Inc
|
|
3
|
+
|
|
4
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
you may not use this file except in compliance with the License.
|
|
6
|
+
You may obtain a copy of the License at
|
|
7
|
+
|
|
8
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
|
|
10
|
+
Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
See the License for the specific language governing permissions and
|
|
14
|
+
limitations under the License.
|
|
15
|
+
*/ import React from 'react';
|
|
16
|
+
import { blockDefaultProps } from '@lowdefy/block-utils';
|
|
17
|
+
import { Popover } from 'antd';
|
|
18
|
+
const PopoverBlock = ({ blockId, content, methods, properties })=>{
|
|
19
|
+
return /*#__PURE__*/ React.createElement(Popover, {
|
|
20
|
+
id: blockId,
|
|
21
|
+
...properties,
|
|
22
|
+
content: content.popover && content.popover(),
|
|
23
|
+
onOpenChange: ()=>methods.triggerEvent({
|
|
24
|
+
name: 'onOpenChange'
|
|
25
|
+
}),
|
|
26
|
+
getPopupContainer: ()=>document.getElementById(`${blockId}_popup`)
|
|
27
|
+
}, content.content && content.content(), /*#__PURE__*/ React.createElement("div", {
|
|
28
|
+
id: `${blockId}_popup`
|
|
29
|
+
}));
|
|
30
|
+
};
|
|
31
|
+
PopoverBlock.defaultProps = blockDefaultProps;
|
|
32
|
+
PopoverBlock.meta = {
|
|
33
|
+
category: 'container',
|
|
34
|
+
icons: [],
|
|
35
|
+
styles: [
|
|
36
|
+
'blocks/Popover/style.less'
|
|
37
|
+
]
|
|
38
|
+
};
|
|
39
|
+
export default PopoverBlock;
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "object",
|
|
3
|
+
"properties": {
|
|
4
|
+
"type": "object",
|
|
5
|
+
"additionalProperties": false,
|
|
6
|
+
"properties": {
|
|
7
|
+
"title": {
|
|
8
|
+
"type": "string",
|
|
9
|
+
"description": "Title of the card."
|
|
10
|
+
},
|
|
11
|
+
"color": {
|
|
12
|
+
"type": "string",
|
|
13
|
+
"description": "Popover background color.",
|
|
14
|
+
"docs": {
|
|
15
|
+
"displayType": "color"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"defaultOpen": {
|
|
19
|
+
"type": "boolean",
|
|
20
|
+
"description": "Whether the popover is open by default.",
|
|
21
|
+
"default": false
|
|
22
|
+
},
|
|
23
|
+
"autoAdjustOverflow": {
|
|
24
|
+
"type": "boolean",
|
|
25
|
+
"description": "Whether to adjust popup placement automatically when popup is off screen",
|
|
26
|
+
"default": true
|
|
27
|
+
},
|
|
28
|
+
"placement": {
|
|
29
|
+
"type": "string",
|
|
30
|
+
"description": "Placement of the popover.",
|
|
31
|
+
"enum": [
|
|
32
|
+
"top",
|
|
33
|
+
"topLeft",
|
|
34
|
+
"topRight",
|
|
35
|
+
"left",
|
|
36
|
+
"leftTop",
|
|
37
|
+
"leftBottom",
|
|
38
|
+
"right",
|
|
39
|
+
"rightTop",
|
|
40
|
+
"rightBottom",
|
|
41
|
+
"bottom",
|
|
42
|
+
"bottomLeft",
|
|
43
|
+
"bottomRight"
|
|
44
|
+
],
|
|
45
|
+
"default": "bottom"
|
|
46
|
+
},
|
|
47
|
+
"trigger": {
|
|
48
|
+
"type": "string",
|
|
49
|
+
"description": "Trigger mode which executes the popover.",
|
|
50
|
+
"enum": ["hover", "click", "focus"],
|
|
51
|
+
"default": "hover"
|
|
52
|
+
},
|
|
53
|
+
"zIndex": {
|
|
54
|
+
"type": "number",
|
|
55
|
+
"description": "Z-index of the popover."
|
|
56
|
+
},
|
|
57
|
+
"overlayInnerStyle": {
|
|
58
|
+
"type": "object",
|
|
59
|
+
"description": "Style of overlay inner div.",
|
|
60
|
+
"docs": {
|
|
61
|
+
"displayType": "yaml"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
"mouseEnterDelay": {
|
|
65
|
+
"type": "number",
|
|
66
|
+
"description": "Delay in milliseconds, before tooltip is shown on mouse enter.",
|
|
67
|
+
"default": 0.1
|
|
68
|
+
},
|
|
69
|
+
"mouseLeaveDelay": {
|
|
70
|
+
"type": "number",
|
|
71
|
+
"description": "Delay in milliseconds, before tooltip is hidden on mouse leave.",
|
|
72
|
+
"default": 0.1
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
"events": {
|
|
77
|
+
"type": "object",
|
|
78
|
+
"additionalProperties": false,
|
|
79
|
+
"properties": {
|
|
80
|
+
"onOpenChange": {
|
|
81
|
+
"type": "array",
|
|
82
|
+
"description": "Trigger actions when visibility of the tooltip card is changed."
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020-2024 Lowdefy, Inc
|
|
3
|
+
|
|
4
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
you may not use this file except in compliance with the License.
|
|
6
|
+
You may obtain a copy of the License at
|
|
7
|
+
|
|
8
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
|
|
10
|
+
Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
See the License for the specific language governing permissions and
|
|
14
|
+
limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
@import 'antd/lib/popover/style/index.less';
|
|
@@ -78,7 +78,7 @@ const Selector = ({ blockId, components: { Icon, Link }, events, loading, method
|
|
|
78
78
|
}),
|
|
79
79
|
size: properties.size,
|
|
80
80
|
filterOption: (input, option)=>(option.filterstring || option.children.props.html || '').toLowerCase().indexOf(input.toLowerCase()) >= 0,
|
|
81
|
-
notFoundContent: fetchState ? 'Loading' : 'Not found',
|
|
81
|
+
notFoundContent: fetchState ? properties.loadingPlaceholder || 'Loading' : properties.notFoundContent || 'Not found',
|
|
82
82
|
onChange: (newVal)=>{
|
|
83
83
|
methods.setValue(type.isPrimitive(uniqueValueOptions[newVal]) ? uniqueValueOptions[newVal] : uniqueValueOptions[newVal].value);
|
|
84
84
|
methods.triggerEvent({
|
|
@@ -189,6 +189,16 @@
|
|
|
189
189
|
"default": "Select item",
|
|
190
190
|
"description": "Placeholder text inside the block before user selects input."
|
|
191
191
|
},
|
|
192
|
+
"loadingPlaceholder": {
|
|
193
|
+
"type": "string",
|
|
194
|
+
"default": "Loading",
|
|
195
|
+
"description": "Placeholder text to show in options while the block is loading."
|
|
196
|
+
},
|
|
197
|
+
"notFoundContent": {
|
|
198
|
+
"type": "string",
|
|
199
|
+
"default": "not Found",
|
|
200
|
+
"description": "Placeholder text to show when list of options are empty."
|
|
201
|
+
},
|
|
192
202
|
"showArrow": {
|
|
193
203
|
"type": "boolean",
|
|
194
204
|
"default": true,
|
|
@@ -17,7 +17,7 @@ import { Input } from 'antd';
|
|
|
17
17
|
import { blockDefaultProps } from '@lowdefy/block-utils';
|
|
18
18
|
import Label from '../Label/Label.js';
|
|
19
19
|
import useRunAfterUpdate from '../../useRunAfterUpdate.js';
|
|
20
|
-
const TextInput = ({ blockId, components: { Icon, Link }, events, loading, methods, properties, required, validation, value })=>{
|
|
20
|
+
const TextInput = ({ blockId, components: { Icon, Link }, events, loading, methods, onChange, properties, required, validation, value })=>{
|
|
21
21
|
return /*#__PURE__*/ React.createElement(Label, {
|
|
22
22
|
blockId: blockId,
|
|
23
23
|
components: {
|
|
@@ -45,9 +45,11 @@ const TextInput = ({ blockId, components: { Icon, Link }, events, loading, metho
|
|
|
45
45
|
maxLength: properties.maxLength,
|
|
46
46
|
placeholder: properties.placeholder,
|
|
47
47
|
size: properties.size,
|
|
48
|
+
showCount: properties.showCount,
|
|
48
49
|
status: validation.status,
|
|
49
50
|
value: value,
|
|
50
|
-
|
|
51
|
+
type: properties.type,
|
|
52
|
+
onChange: onChange || ((event)=>{
|
|
51
53
|
let input = event.target.value;
|
|
52
54
|
if (properties.replaceInput) {
|
|
53
55
|
const regex = new RegExp(properties.replaceInput.pattern, properties.replaceInput.flags ?? 'gm');
|
|
@@ -60,9 +62,23 @@ const TextInput = ({ blockId, components: { Icon, Link }, events, loading, metho
|
|
|
60
62
|
const cStart = event.target.selectionStart;
|
|
61
63
|
const cEnd = event.target.selectionEnd;
|
|
62
64
|
runAfterUpdate(()=>{
|
|
63
|
-
|
|
65
|
+
// Allows for input types that don't support SelectionRange
|
|
66
|
+
if (![
|
|
67
|
+
'email',
|
|
68
|
+
'date',
|
|
69
|
+
'datetime-local',
|
|
70
|
+
'month',
|
|
71
|
+
'number',
|
|
72
|
+
'time',
|
|
73
|
+
'week',
|
|
74
|
+
'range',
|
|
75
|
+
'color',
|
|
76
|
+
'file'
|
|
77
|
+
].includes(properties.type)) {
|
|
78
|
+
event.target.setSelectionRange(cStart, cEnd);
|
|
79
|
+
}
|
|
64
80
|
});
|
|
65
|
-
},
|
|
81
|
+
}),
|
|
66
82
|
onPressEnter: ()=>{
|
|
67
83
|
methods.triggerEvent({
|
|
68
84
|
name: 'onPressEnter'
|
|
@@ -9,6 +9,12 @@
|
|
|
9
9
|
"default": false,
|
|
10
10
|
"description": "Allow the user to clear their input."
|
|
11
11
|
},
|
|
12
|
+
"type": {
|
|
13
|
+
"type": "string",
|
|
14
|
+
"enum": ["text", "number", "password", "tel", "email", "url"],
|
|
15
|
+
"default": "text",
|
|
16
|
+
"description": "The type of input, (see <a href='https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types'>MDN</a>)."
|
|
17
|
+
},
|
|
12
18
|
"autoFocus": {
|
|
13
19
|
"type": "boolean",
|
|
14
20
|
"default": false,
|
|
@@ -136,6 +142,11 @@
|
|
|
136
142
|
"default": "middle",
|
|
137
143
|
"description": "Size of the block."
|
|
138
144
|
},
|
|
145
|
+
"showCount": {
|
|
146
|
+
"type": "boolean",
|
|
147
|
+
"default": false,
|
|
148
|
+
"description": "Show text character count"
|
|
149
|
+
},
|
|
139
150
|
"suffix": {
|
|
140
151
|
"type": "string",
|
|
141
152
|
"description": "Suffix text for the block, priority over suffixIcon."
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020-2024 Lowdefy, Inc
|
|
3
|
+
|
|
4
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
you may not use this file except in compliance with the License.
|
|
6
|
+
You may obtain a copy of the License at
|
|
7
|
+
|
|
8
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
|
|
10
|
+
Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
See the License for the specific language governing permissions and
|
|
14
|
+
limitations under the License.
|
|
15
|
+
*/ import React, { useState, useEffect } from 'react';
|
|
16
|
+
import { Tree } from 'antd';
|
|
17
|
+
import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils';
|
|
18
|
+
const transformData = (data, valueMap, prefix = '')=>{
|
|
19
|
+
return data.map(({ children, disabled, disableCheckbox, label, value }, i)=>{
|
|
20
|
+
const key = `${prefix}-${i}`;
|
|
21
|
+
valueMap[key] = prefix ? [
|
|
22
|
+
value,
|
|
23
|
+
...valueMap[prefix]
|
|
24
|
+
] : [
|
|
25
|
+
value
|
|
26
|
+
];
|
|
27
|
+
return {
|
|
28
|
+
children: children && transformData(children, valueMap, key),
|
|
29
|
+
disabled,
|
|
30
|
+
disableCheckbox,
|
|
31
|
+
key,
|
|
32
|
+
renderTitle: label
|
|
33
|
+
};
|
|
34
|
+
});
|
|
35
|
+
};
|
|
36
|
+
const getValueKeys = (value, valueMap)=>{
|
|
37
|
+
for(const key in valueMap){
|
|
38
|
+
if (JSON.stringify(value) === JSON.stringify(valueMap[key])) {
|
|
39
|
+
return key.split('-').slice(1).reduce((acc, curr, i)=>[
|
|
40
|
+
...acc,
|
|
41
|
+
acc[i - 1] ? acc[i - 1] + '-' + curr : '-' + curr
|
|
42
|
+
], []);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
return [];
|
|
46
|
+
};
|
|
47
|
+
const TreeSelector = ({ blockId, properties, content, methods, value })=>{
|
|
48
|
+
const treeData = properties.options;
|
|
49
|
+
const valueMap = {};
|
|
50
|
+
const transformedData = transformData(treeData, valueMap);
|
|
51
|
+
const [selectedKeys, setSelectedKeys] = useState([]);
|
|
52
|
+
const [expandedKeys, setExpandedKeys] = useState([]);
|
|
53
|
+
useEffect(()=>{
|
|
54
|
+
let nextValue;
|
|
55
|
+
if (value === null || Array.isArray(value) && !value.length) {
|
|
56
|
+
nextValue = [];
|
|
57
|
+
} else {
|
|
58
|
+
nextValue = getValueKeys(value, valueMap);
|
|
59
|
+
}
|
|
60
|
+
setSelectedKeys([
|
|
61
|
+
nextValue[nextValue.length - 1]
|
|
62
|
+
]);
|
|
63
|
+
setExpandedKeys([
|
|
64
|
+
...new Set([
|
|
65
|
+
...nextValue.slice(0, nextValue.length - 1),
|
|
66
|
+
...expandedKeys
|
|
67
|
+
])
|
|
68
|
+
]);
|
|
69
|
+
}, [
|
|
70
|
+
value
|
|
71
|
+
]);
|
|
72
|
+
const onSelect = (selectedKeys)=>{
|
|
73
|
+
methods.setValue(selectedKeys.map((key)=>valueMap[key]).flat());
|
|
74
|
+
methods.triggerEvent({
|
|
75
|
+
name: 'onChange'
|
|
76
|
+
});
|
|
77
|
+
setSelectedKeys(selectedKeys);
|
|
78
|
+
};
|
|
79
|
+
const onExpand = (nextExpandedKeys)=>{
|
|
80
|
+
setExpandedKeys(nextExpandedKeys);
|
|
81
|
+
};
|
|
82
|
+
return /*#__PURE__*/ React.createElement(Tree, {
|
|
83
|
+
id: blockId,
|
|
84
|
+
checkable: properties.checkable,
|
|
85
|
+
disabled: properties.disabled,
|
|
86
|
+
defaultExpandAll: properties.defaultExpandAll,
|
|
87
|
+
showLine: properties.showLine,
|
|
88
|
+
selectable: properties.selectable,
|
|
89
|
+
multiple: false,
|
|
90
|
+
content: content.options && content.options(),
|
|
91
|
+
treeData: transformedData,
|
|
92
|
+
onSelect: onSelect,
|
|
93
|
+
onExpand: onExpand,
|
|
94
|
+
titleRender: ({ renderTitle })=>renderHtml({
|
|
95
|
+
html: renderTitle,
|
|
96
|
+
methods
|
|
97
|
+
}),
|
|
98
|
+
selectedKeys: selectedKeys,
|
|
99
|
+
expandedKeys: expandedKeys
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
TreeSelector.defaultProps = blockDefaultProps;
|
|
103
|
+
TreeSelector.meta = {
|
|
104
|
+
category: 'input',
|
|
105
|
+
valueType: 'array',
|
|
106
|
+
icons: [],
|
|
107
|
+
styles: [
|
|
108
|
+
'blocks/TreeSelector/style.less'
|
|
109
|
+
]
|
|
110
|
+
};
|
|
111
|
+
export default TreeSelector;
|
|
@@ -0,0 +1,166 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "object",
|
|
3
|
+
"properties": {
|
|
4
|
+
"type": "object",
|
|
5
|
+
"additionalProperties": false,
|
|
6
|
+
"properties": {
|
|
7
|
+
"checkable": {
|
|
8
|
+
"type": "boolean",
|
|
9
|
+
"default": false,
|
|
10
|
+
"description": "Make nodes checkboxes."
|
|
11
|
+
},
|
|
12
|
+
"inputStyle": {
|
|
13
|
+
"type": "object",
|
|
14
|
+
"description": "Css style to applied to input.",
|
|
15
|
+
"docs": {
|
|
16
|
+
"displayType": "yaml"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"optionsStyle": {
|
|
20
|
+
"type": "object",
|
|
21
|
+
"description": "Css style to applied to option elements.",
|
|
22
|
+
"docs": {
|
|
23
|
+
"displayType": "yaml"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"disabled": {
|
|
27
|
+
"type": "boolean",
|
|
28
|
+
"default": false,
|
|
29
|
+
"description": "Disable the block if true."
|
|
30
|
+
},
|
|
31
|
+
"showLine": {
|
|
32
|
+
"type": "boolean",
|
|
33
|
+
"default": false,
|
|
34
|
+
"description": "Show a connecting line if true."
|
|
35
|
+
},
|
|
36
|
+
"selectable": {
|
|
37
|
+
"type": "boolean",
|
|
38
|
+
"default": true,
|
|
39
|
+
"description": "Selectable if true."
|
|
40
|
+
},
|
|
41
|
+
"options": {
|
|
42
|
+
"default": [],
|
|
43
|
+
"oneOf": [
|
|
44
|
+
{
|
|
45
|
+
"type": "array",
|
|
46
|
+
"description": "Options can either be an array of label, value pairs.",
|
|
47
|
+
"items": {
|
|
48
|
+
"type": "object",
|
|
49
|
+
"required": ["value"],
|
|
50
|
+
"properties": {
|
|
51
|
+
"label": {
|
|
52
|
+
"type": "string",
|
|
53
|
+
"description": "Value label shown to user - supports html."
|
|
54
|
+
},
|
|
55
|
+
"value": {
|
|
56
|
+
"description": "Value selected. Can be of any type.",
|
|
57
|
+
"oneOf": [
|
|
58
|
+
{
|
|
59
|
+
"type": "string"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"type": "number"
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"type": "boolean"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"type": "object"
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
"type": "array"
|
|
72
|
+
}
|
|
73
|
+
],
|
|
74
|
+
"docs": {
|
|
75
|
+
"displayType": "yaml"
|
|
76
|
+
}
|
|
77
|
+
},
|
|
78
|
+
"disabled": {
|
|
79
|
+
"type": "boolean",
|
|
80
|
+
"description": "Disable the node if true.",
|
|
81
|
+
"default": false
|
|
82
|
+
},
|
|
83
|
+
"disableCheckbox": {
|
|
84
|
+
"type": "boolean",
|
|
85
|
+
"description": "Disable the checkbox if true.",
|
|
86
|
+
"default": false
|
|
87
|
+
},
|
|
88
|
+
"style": {
|
|
89
|
+
"type": "object",
|
|
90
|
+
"description": "Css style to applied to option.",
|
|
91
|
+
"docs": {
|
|
92
|
+
"displayType": "yaml"
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
"children": {
|
|
96
|
+
"type": "array",
|
|
97
|
+
"description": "Options can either be an array of label, value pairs.",
|
|
98
|
+
"items": {
|
|
99
|
+
"type": "object",
|
|
100
|
+
"required": ["value"],
|
|
101
|
+
"properties": {
|
|
102
|
+
"label": {
|
|
103
|
+
"type": "string",
|
|
104
|
+
"description": "Value label shown to user - supports html."
|
|
105
|
+
},
|
|
106
|
+
"value": {
|
|
107
|
+
"description": "Value selected. Can be of any type.",
|
|
108
|
+
"oneOf": [
|
|
109
|
+
{
|
|
110
|
+
"type": "string"
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"type": "number"
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
"type": "boolean"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"type": "object"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"type": "array"
|
|
123
|
+
}
|
|
124
|
+
],
|
|
125
|
+
"docs": {
|
|
126
|
+
"displayType": "yaml"
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
"disabled": {
|
|
130
|
+
"type": "boolean",
|
|
131
|
+
"description": "Disable the node if true.",
|
|
132
|
+
"default": false
|
|
133
|
+
},
|
|
134
|
+
"disableCheckbox": {
|
|
135
|
+
"type": "boolean",
|
|
136
|
+
"description": "Disable the checkbox if true.",
|
|
137
|
+
"default": false
|
|
138
|
+
},
|
|
139
|
+
"style": {
|
|
140
|
+
"type": "object",
|
|
141
|
+
"description": "Css style to applied to option.",
|
|
142
|
+
"docs": {
|
|
143
|
+
"displayType": "yaml"
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
]
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
"events": {
|
|
157
|
+
"type": "object",
|
|
158
|
+
"additionalProperties": false,
|
|
159
|
+
"properties": {
|
|
160
|
+
"onChange": {
|
|
161
|
+
"type": "array",
|
|
162
|
+
"description": "Trigger action when selection is changed."
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020-2024 Lowdefy, Inc
|
|
3
|
+
|
|
4
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
5
|
+
you may not use this file except in compliance with the License.
|
|
6
|
+
You may obtain a copy of the License at
|
|
7
|
+
|
|
8
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
9
|
+
|
|
10
|
+
Unless required by applicable law or agreed to in writing, software
|
|
11
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
12
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
13
|
+
See the License for the specific language governing permissions and
|
|
14
|
+
limitations under the License.
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
@import 'antd/lib/tree/style/index.less';
|
|
18
|
+
|
|
19
|
+
// bug in antd less file
|
|
20
|
+
.ant-tree-switcher-leaf-line:before {
|
|
21
|
+
right: unset;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// @tree-bg doesn't affect the tree switcher background
|
|
25
|
+
.ant-tree-show-line .ant-tree-switcher {
|
|
26
|
+
background: transparent;
|
|
27
|
+
}
|
package/dist/blocks.js
CHANGED
|
@@ -54,6 +54,7 @@ export { default as Paragraph } from './blocks/Paragraph/Paragraph.js';
|
|
|
54
54
|
export { default as ParagraphInput } from './blocks/ParagraphInput/ParagraphInput.js';
|
|
55
55
|
export { default as PasswordInput } from './blocks/PasswordInput/PasswordInput.js';
|
|
56
56
|
export { default as PhoneNumberInput } from './blocks/PhoneNumberInput/PhoneNumberInput.js';
|
|
57
|
+
export { default as Popover } from './blocks/Popover/Popover.js';
|
|
57
58
|
export { default as Progress } from './blocks/Progress/Progress.js';
|
|
58
59
|
export { default as RadioSelector } from './blocks/RadioSelector/RadioSelector.js';
|
|
59
60
|
export { default as RatingSlider } from './blocks/RatingSlider/RatingSlider.js';
|
|
@@ -70,5 +71,6 @@ export { default as TextArea } from './blocks/TextArea/TextArea.js';
|
|
|
70
71
|
export { default as TextInput } from './blocks/TextInput/TextInput.js';
|
|
71
72
|
export { default as Title } from './blocks/Title/Title.js';
|
|
72
73
|
export { default as TitleInput } from './blocks/TitleInput/TitleInput.js';
|
|
74
|
+
export { default as TreeSelector } from './blocks/TreeSelector/TreeSelector.js';
|
|
73
75
|
export { default as Tooltip } from './blocks/Tooltip/Tooltip.js';
|
|
74
76
|
export { default as WeekSelector } from './blocks/WeekSelector/WeekSelector.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lowdefy/blocks-antd",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Lowdefy Ant Design Blocks",
|
|
6
6
|
"homepage": "https://lowdefy.com",
|
|
@@ -43,8 +43,8 @@
|
|
|
43
43
|
],
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@ant-design/icons": "4.8.0",
|
|
46
|
-
"@lowdefy/block-utils": "4.0
|
|
47
|
-
"@lowdefy/helpers": "4.0
|
|
46
|
+
"@lowdefy/block-utils": "4.1.0",
|
|
47
|
+
"@lowdefy/helpers": "4.1.0",
|
|
48
48
|
"antd": "4.24.14",
|
|
49
49
|
"classnames": "2.3.2",
|
|
50
50
|
"moment": "2.29.4",
|
|
@@ -55,9 +55,9 @@
|
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"@emotion/jest": "11.10.5",
|
|
58
|
-
"@lowdefy/block-dev": "4.0
|
|
59
|
-
"@lowdefy/jest-yaml-transform": "4.0
|
|
60
|
-
"@lowdefy/node-utils": "4.0
|
|
58
|
+
"@lowdefy/block-dev": "4.1.0",
|
|
59
|
+
"@lowdefy/jest-yaml-transform": "4.1.0",
|
|
60
|
+
"@lowdefy/node-utils": "4.1.0",
|
|
61
61
|
"@swc/cli": "0.1.63",
|
|
62
62
|
"@swc/core": "1.3.99",
|
|
63
63
|
"@swc/jest": "0.2.29",
|