@lowdefy/blocks-antd 4.0.0-rc.7 → 4.0.0-rc.9
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/Carousel/Carousel.js +102 -0
- package/dist/blocks/Carousel/schema.json +183 -0
- package/dist/blocks/Carousel/style.less +17 -0
- package/dist/blocks/PhoneNumberInput/PhoneNumberInput.js +5 -2
- package/dist/blocks/PhoneNumberInput/schema.json +21 -0
- package/dist/blocks/PhoneNumberInput/style.less +1 -0
- package/dist/blocks/TextInput/TextInput.js +6 -1
- package/dist/blocks/TextInput/schema.json +21 -0
- package/dist/blocks.js +1 -0
- package/package.json +7 -7
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020-2023 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
|
+
*/ function _extends() {
|
|
16
|
+
_extends = Object.assign || function(target) {
|
|
17
|
+
for(var i = 1; i < arguments.length; i++){
|
|
18
|
+
var source = arguments[i];
|
|
19
|
+
for(var key in source){
|
|
20
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
21
|
+
target[key] = source[key];
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
return target;
|
|
26
|
+
};
|
|
27
|
+
return _extends.apply(this, arguments);
|
|
28
|
+
}
|
|
29
|
+
import React, { useEffect, useRef } from 'react';
|
|
30
|
+
import { Carousel } from 'antd';
|
|
31
|
+
import { blockDefaultProps } from '@lowdefy/block-utils';
|
|
32
|
+
const getSlides = ({ content , properties })=>{
|
|
33
|
+
let slides = properties.slides;
|
|
34
|
+
if (!slides) {
|
|
35
|
+
slides = Object.keys(content).sort().map((key)=>({
|
|
36
|
+
key
|
|
37
|
+
}));
|
|
38
|
+
}
|
|
39
|
+
return slides;
|
|
40
|
+
};
|
|
41
|
+
const CarouselBlock = ({ blockId , content , properties , methods })=>{
|
|
42
|
+
const slides = getSlides({
|
|
43
|
+
content,
|
|
44
|
+
properties
|
|
45
|
+
});
|
|
46
|
+
const carousel = useRef();
|
|
47
|
+
useEffect(()=>{
|
|
48
|
+
methods.registerMethod('goTo', ({ slide , dontAnimate =false })=>{
|
|
49
|
+
const slideNumber = slides.findIndex((item)=>{
|
|
50
|
+
return item.key === slide;
|
|
51
|
+
});
|
|
52
|
+
if (slideNumber != -1) {
|
|
53
|
+
carousel.current.goTo(slideNumber, dontAnimate);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
methods.registerMethod('next', ()=>{
|
|
57
|
+
carousel.current.next();
|
|
58
|
+
});
|
|
59
|
+
methods.registerMethod('prev', ()=>{
|
|
60
|
+
carousel.current.prev();
|
|
61
|
+
});
|
|
62
|
+
}, []);
|
|
63
|
+
return /*#__PURE__*/ React.createElement(Carousel, _extends({}, properties, {
|
|
64
|
+
id: blockId,
|
|
65
|
+
afterChange: (current)=>{
|
|
66
|
+
methods.triggerEvent({
|
|
67
|
+
name: 'afterChange',
|
|
68
|
+
event: {
|
|
69
|
+
current: slides[current]
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
},
|
|
73
|
+
beforeChange: (current, next)=>{
|
|
74
|
+
methods.triggerEvent({
|
|
75
|
+
name: 'beforeChange',
|
|
76
|
+
event: {
|
|
77
|
+
current: slides[current],
|
|
78
|
+
next: slides[next]
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
},
|
|
82
|
+
onInit: ()=>methods.triggerEvent({
|
|
83
|
+
name: 'onInit'
|
|
84
|
+
}),
|
|
85
|
+
onSwipe: ()=>methods.triggerEvent({
|
|
86
|
+
name: 'onSwipe'
|
|
87
|
+
}),
|
|
88
|
+
className: methods.makeCssClass(properties.style),
|
|
89
|
+
ref: carousel
|
|
90
|
+
}), slides && slides.map((slide)=>/*#__PURE__*/ React.createElement("div", {
|
|
91
|
+
key: slide.key
|
|
92
|
+
}, content[slide.key] && content[slide.key]())));
|
|
93
|
+
};
|
|
94
|
+
CarouselBlock.defaultProps = blockDefaultProps;
|
|
95
|
+
CarouselBlock.meta = {
|
|
96
|
+
category: 'container',
|
|
97
|
+
icons: [],
|
|
98
|
+
styles: [
|
|
99
|
+
'blocks/Carousel/style.less'
|
|
100
|
+
]
|
|
101
|
+
};
|
|
102
|
+
export default CarouselBlock;
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
{
|
|
2
|
+
"type": "object",
|
|
3
|
+
"properties": {
|
|
4
|
+
"type": "object",
|
|
5
|
+
"additionalProperties": false,
|
|
6
|
+
"properties": {
|
|
7
|
+
"accessibility": {
|
|
8
|
+
"type": "boolean",
|
|
9
|
+
"default": true,
|
|
10
|
+
"description": "Enable tabbing and arrow key navigation."
|
|
11
|
+
},
|
|
12
|
+
"adaptiveHeight": {
|
|
13
|
+
"type": "boolean",
|
|
14
|
+
"default": false,
|
|
15
|
+
"description": "Adjust the slide's height automatically."
|
|
16
|
+
},
|
|
17
|
+
"arrows": {
|
|
18
|
+
"type": "boolean",
|
|
19
|
+
"default": false,
|
|
20
|
+
"description": "Whether or not to show arrows."
|
|
21
|
+
},
|
|
22
|
+
"autoplaySpeed": {
|
|
23
|
+
"type": "integer",
|
|
24
|
+
"default": 3000,
|
|
25
|
+
"description": "Delay between each auto scroll (in milliseconds)."
|
|
26
|
+
},
|
|
27
|
+
"autoplay": {
|
|
28
|
+
"type": "boolean",
|
|
29
|
+
"default": false,
|
|
30
|
+
"description": "Toggles whether or not to scroll automatically."
|
|
31
|
+
},
|
|
32
|
+
"centerMode": {
|
|
33
|
+
"type": "boolean",
|
|
34
|
+
"default": false,
|
|
35
|
+
"description": "Center current slide."
|
|
36
|
+
},
|
|
37
|
+
"centerPadding": {
|
|
38
|
+
"type": "string",
|
|
39
|
+
"default": "50px",
|
|
40
|
+
"description": "Padding applied to center slide."
|
|
41
|
+
},
|
|
42
|
+
"dotPosition": {
|
|
43
|
+
"type": "string",
|
|
44
|
+
"enum": ["left", "right", "top", "bottom"],
|
|
45
|
+
"default": "bottom",
|
|
46
|
+
"description": "The position of the dots, which can be one of top, bottom, left or right."
|
|
47
|
+
},
|
|
48
|
+
"dots": {
|
|
49
|
+
"type": "boolean",
|
|
50
|
+
"default": true,
|
|
51
|
+
"description": "Whether or not to show the dots."
|
|
52
|
+
},
|
|
53
|
+
"draggable": {
|
|
54
|
+
"type": "boolean",
|
|
55
|
+
"default": false,
|
|
56
|
+
"description": "Enable scrollable via dragging on desktop"
|
|
57
|
+
},
|
|
58
|
+
"easing": {
|
|
59
|
+
"type": "string",
|
|
60
|
+
"default": "linear",
|
|
61
|
+
"description": "Transition interpolation function name."
|
|
62
|
+
},
|
|
63
|
+
"effect": {
|
|
64
|
+
"type": "string",
|
|
65
|
+
"default": "scrollx",
|
|
66
|
+
"description": "Transition effect, either scrollx or fade."
|
|
67
|
+
},
|
|
68
|
+
"focusOnSelect": {
|
|
69
|
+
"type": "boolean",
|
|
70
|
+
"default": false,
|
|
71
|
+
"description": "Go to slide on click."
|
|
72
|
+
},
|
|
73
|
+
"infinite": {
|
|
74
|
+
"type": "boolean",
|
|
75
|
+
"default": true,
|
|
76
|
+
"description": "Infinitely wrap around contents."
|
|
77
|
+
},
|
|
78
|
+
"pauseOnDotsHover": {
|
|
79
|
+
"type": "boolean",
|
|
80
|
+
"default": false,
|
|
81
|
+
"description": "Prevents autoplay while hovering on dot."
|
|
82
|
+
},
|
|
83
|
+
"pauseOnFocus": {
|
|
84
|
+
"type": "boolean",
|
|
85
|
+
"default": false,
|
|
86
|
+
"description": "Prevents autoplay while focused on slides."
|
|
87
|
+
},
|
|
88
|
+
"pauseOnHover": {
|
|
89
|
+
"type": "boolean",
|
|
90
|
+
"default": true,
|
|
91
|
+
"description": "Prevents autoplay while hovering on track."
|
|
92
|
+
},
|
|
93
|
+
"responsive": {
|
|
94
|
+
"type": "array",
|
|
95
|
+
"default": [],
|
|
96
|
+
"description": "Customize based on breakpoints.",
|
|
97
|
+
"items": {
|
|
98
|
+
"type": "object",
|
|
99
|
+
"properties": {
|
|
100
|
+
"breakpoint": {
|
|
101
|
+
"type": "integer",
|
|
102
|
+
"description": "Maximum screen size."
|
|
103
|
+
},
|
|
104
|
+
"settings": {
|
|
105
|
+
"type": "object",
|
|
106
|
+
"description": "Carousel properties.",
|
|
107
|
+
"docs": {
|
|
108
|
+
"displayType": "yaml"
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
"rows": {
|
|
115
|
+
"type": "integer",
|
|
116
|
+
"default": 1,
|
|
117
|
+
"description": "Number of rows per slide in the slider, (enables grid mode)."
|
|
118
|
+
},
|
|
119
|
+
"rtl": {
|
|
120
|
+
"type": "boolean",
|
|
121
|
+
"default": false,
|
|
122
|
+
"description": "Reverses the slide order."
|
|
123
|
+
},
|
|
124
|
+
"slidesPerRow": {
|
|
125
|
+
"type": "integer",
|
|
126
|
+
"default": 1,
|
|
127
|
+
"description": "Number of slides to display in grid mode, this is useful with rows option."
|
|
128
|
+
},
|
|
129
|
+
"slidesToScroll": {
|
|
130
|
+
"type": "integer",
|
|
131
|
+
"default": 1,
|
|
132
|
+
"description": "How many slides to scroll at once."
|
|
133
|
+
},
|
|
134
|
+
"slidesToShow": {
|
|
135
|
+
"type": "integer",
|
|
136
|
+
"default": 1,
|
|
137
|
+
"description": "How many slides to show in one frame."
|
|
138
|
+
},
|
|
139
|
+
"speed": {
|
|
140
|
+
"type": "integer",
|
|
141
|
+
"default": 500,
|
|
142
|
+
"description": "Number of slides to display in grid mode, this is useful with rows option."
|
|
143
|
+
},
|
|
144
|
+
"swipeToSlide": {
|
|
145
|
+
"type": "boolean",
|
|
146
|
+
"default": false,
|
|
147
|
+
"description": "Enable drag/swipe irrespective of `slidesToScroll`."
|
|
148
|
+
},
|
|
149
|
+
"swipe": {
|
|
150
|
+
"type": "boolean",
|
|
151
|
+
"default": true,
|
|
152
|
+
"description": "Enable/disable swiping to change slides."
|
|
153
|
+
},
|
|
154
|
+
"vertical": {
|
|
155
|
+
"type": "boolean",
|
|
156
|
+
"default": false,
|
|
157
|
+
"description": "Whether or not the slides are shown in a column."
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
},
|
|
161
|
+
"events": {
|
|
162
|
+
"type": "object",
|
|
163
|
+
"additionalProperties": false,
|
|
164
|
+
"properties": {
|
|
165
|
+
"afterChange": {
|
|
166
|
+
"type": "array",
|
|
167
|
+
"description": "Trigger actions after the slide is changed."
|
|
168
|
+
},
|
|
169
|
+
"beforeChange": {
|
|
170
|
+
"type": "array",
|
|
171
|
+
"description": "Trigger actions before the slide is changed."
|
|
172
|
+
},
|
|
173
|
+
"onInit": {
|
|
174
|
+
"type": "array",
|
|
175
|
+
"description": "Trigger actions when the carousel is initialized."
|
|
176
|
+
},
|
|
177
|
+
"onSwipe": {
|
|
178
|
+
"type": "array",
|
|
179
|
+
"description": "Trigger actions when the carousel is swiped."
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/*
|
|
2
|
+
Copyright 2020-2023 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/carousel/style/index.less';
|
|
@@ -149,10 +149,13 @@ const PhoneNumberInput = ({ blockId , components: { Icon , Link } , events , lo
|
|
|
149
149
|
placeholder: properties.placeholder,
|
|
150
150
|
size: properties.size,
|
|
151
151
|
status: validation.status,
|
|
152
|
-
type: 'number',
|
|
153
152
|
value: value?.input,
|
|
154
153
|
onChange: (event)=>{
|
|
155
|
-
|
|
154
|
+
var input = event.target.value;
|
|
155
|
+
if (properties.replaceInput) {
|
|
156
|
+
const regex = new RegExp(properties.replaceInput.pattern, properties.replaceInput.flags ?? 'gm');
|
|
157
|
+
input = input.replace(regex, properties.replaceInput.replacement ?? '');
|
|
158
|
+
}
|
|
156
159
|
const region = value.region;
|
|
157
160
|
const phone_number = `${region.dial_code}${input}`;
|
|
158
161
|
methods.setValue({
|
|
@@ -127,6 +127,27 @@
|
|
|
127
127
|
"displayType": "yaml"
|
|
128
128
|
}
|
|
129
129
|
},
|
|
130
|
+
"replaceInput": {
|
|
131
|
+
"type": "object",
|
|
132
|
+
"description": "Regex used to sanitize input.",
|
|
133
|
+
"properties": {
|
|
134
|
+
"pattern": {
|
|
135
|
+
"type": "string",
|
|
136
|
+
"description": "The regular expression pattern to use to sanitize input."
|
|
137
|
+
},
|
|
138
|
+
"flags": {
|
|
139
|
+
"type": "string",
|
|
140
|
+
"description": "The regex flags to use. The default value is 'gm'."
|
|
141
|
+
},
|
|
142
|
+
"replacement": {
|
|
143
|
+
"type": "string",
|
|
144
|
+
"description": "The string used to replace the input that matches the pattern. The default value is ''."
|
|
145
|
+
}
|
|
146
|
+
},
|
|
147
|
+
"docs": {
|
|
148
|
+
"displayType": "yaml"
|
|
149
|
+
}
|
|
150
|
+
},
|
|
130
151
|
"selectStyle": {
|
|
131
152
|
"type": "object",
|
|
132
153
|
"description": "Css style to applied to selector.",
|
|
@@ -48,7 +48,12 @@ const TextInput = ({ blockId , components: { Icon , Link } , events , loading ,
|
|
|
48
48
|
status: validation.status,
|
|
49
49
|
value: value,
|
|
50
50
|
onChange: (event)=>{
|
|
51
|
-
|
|
51
|
+
var input = event.target.value;
|
|
52
|
+
if (properties.replaceInput) {
|
|
53
|
+
const regex = new RegExp(properties.replaceInput.pattern, properties.replaceInput.flags ?? 'gm');
|
|
54
|
+
input = input.replace(regex, properties.replaceInput.replacement ?? '');
|
|
55
|
+
}
|
|
56
|
+
methods.setValue(input);
|
|
52
57
|
methods.triggerEvent({
|
|
53
58
|
name: 'onChange'
|
|
54
59
|
});
|
|
@@ -109,6 +109,27 @@
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
},
|
|
112
|
+
"replaceInput": {
|
|
113
|
+
"type": "object",
|
|
114
|
+
"description": "Regex used to sanitize input.",
|
|
115
|
+
"properties": {
|
|
116
|
+
"pattern": {
|
|
117
|
+
"type": "string",
|
|
118
|
+
"description": "The regular expression pattern to use to sanitize input."
|
|
119
|
+
},
|
|
120
|
+
"flags": {
|
|
121
|
+
"type": "string",
|
|
122
|
+
"description": "The regex flags to use. The default value is 'gm'."
|
|
123
|
+
},
|
|
124
|
+
"replacement": {
|
|
125
|
+
"type": "string",
|
|
126
|
+
"description": "The string used to replace the input that matches the pattern. The default value is ''."
|
|
127
|
+
}
|
|
128
|
+
},
|
|
129
|
+
"docs": {
|
|
130
|
+
"displayType": "yaml"
|
|
131
|
+
}
|
|
132
|
+
},
|
|
112
133
|
"size": {
|
|
113
134
|
"type": "string",
|
|
114
135
|
"enum": ["small", "middle", "large"],
|
package/dist/blocks.js
CHANGED
|
@@ -21,6 +21,7 @@ export { default as Breadcrumb } from './blocks/Breadcrumb/Breadcrumb.js';
|
|
|
21
21
|
export { default as Button } from './blocks/Button/Button.js';
|
|
22
22
|
export { default as ButtonSelector } from './blocks/ButtonSelector/ButtonSelector.js';
|
|
23
23
|
export { default as Card } from './blocks/Card/Card.js';
|
|
24
|
+
export { default as Carousel } from './blocks/Carousel/Carousel.js';
|
|
24
25
|
export { default as CheckboxSelector } from './blocks/CheckboxSelector/CheckboxSelector.js';
|
|
25
26
|
export { default as CheckboxSwitch } from './blocks/CheckboxSwitch/CheckboxSwitch.js';
|
|
26
27
|
export { default as Collapse } from './blocks/Collapse/Collapse.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lowdefy/blocks-antd",
|
|
3
|
-
"version": "4.0.0-rc.
|
|
3
|
+
"version": "4.0.0-rc.9",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Lowdefy Ant Design Blocks",
|
|
6
6
|
"homepage": "https://lowdefy.com",
|
|
@@ -50,8 +50,8 @@
|
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@ant-design/icons": "4.8.0",
|
|
53
|
-
"@lowdefy/block-utils": "4.0.0-rc.
|
|
54
|
-
"@lowdefy/helpers": "4.0.0-rc.
|
|
53
|
+
"@lowdefy/block-utils": "4.0.0-rc.9",
|
|
54
|
+
"@lowdefy/helpers": "4.0.0-rc.9",
|
|
55
55
|
"antd": "4.22.5",
|
|
56
56
|
"classnames": "2.3.2",
|
|
57
57
|
"moment": "2.29.4",
|
|
@@ -62,9 +62,9 @@
|
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@emotion/jest": "11.10.5",
|
|
65
|
-
"@lowdefy/block-dev": "4.0.0-rc.
|
|
66
|
-
"@lowdefy/jest-yaml-transform": "4.0.0-rc.
|
|
67
|
-
"@lowdefy/node-utils": "4.0.0-rc.
|
|
65
|
+
"@lowdefy/block-dev": "4.0.0-rc.9",
|
|
66
|
+
"@lowdefy/jest-yaml-transform": "4.0.0-rc.9",
|
|
67
|
+
"@lowdefy/node-utils": "4.0.0-rc.9",
|
|
68
68
|
"@swc/cli": "0.1.59",
|
|
69
69
|
"@swc/core": "1.3.24",
|
|
70
70
|
"@swc/jest": "0.2.24",
|
|
@@ -79,5 +79,5 @@
|
|
|
79
79
|
"publishConfig": {
|
|
80
80
|
"access": "public"
|
|
81
81
|
},
|
|
82
|
-
"gitHead": "
|
|
82
|
+
"gitHead": "d20e6ac424643feca527a732dc2b0710713c8243"
|
|
83
83
|
}
|