@lowdefy/blocks-antd 4.0.0-alpha.25 → 4.0.0-alpha.28
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/AutoComplete/AutoComplete.js +13 -33
- package/dist/blocks/AutoComplete/schema.json +5 -46
- package/dist/blocks/DateRangeSelector/DateRangeSelector.js +2 -1
- package/dist/blocks/DateSelector/DateSelector.js +2 -1
- package/dist/blocks/DateTimeSelector/DateTimeSelector.js +2 -1
- package/dist/blocks/Label/Label.js +11 -11
- package/dist/blocks/Label/labelLogic.js +9 -9
- package/dist/blocks/Label/style.less +4 -0
- package/dist/blocks/MonthSelector/MonthSelector.js +2 -1
- package/dist/blocks/MultipleSelector/MultipleSelector.js +1 -0
- package/dist/blocks/NumberInput/NumberInput.js +1 -0
- package/dist/blocks/PageHeaderMenu/PageHeaderMenu.js +41 -29
- package/dist/blocks/PageHeaderMenu/schema.json +5 -5
- package/dist/blocks/PageSiderMenu/PageSiderMenu.js +37 -34
- package/dist/blocks/PageSiderMenu/schema.json +5 -5
- package/dist/blocks/PasswordInput/PasswordInput.js +1 -0
- package/dist/blocks/Selector/Selector.js +1 -0
- package/dist/blocks/TextInput/TextInput.js +3 -2
- package/dist/blocks/WeekSelector/WeekSelector.js +2 -1
- package/package.json +7 -7
|
@@ -14,13 +14,11 @@
|
|
|
14
14
|
limitations under the License.
|
|
15
15
|
*/ import React from 'react';
|
|
16
16
|
import { AutoComplete } from 'antd';
|
|
17
|
-
import { blockDefaultProps
|
|
17
|
+
import { blockDefaultProps } from '@lowdefy/block-utils';
|
|
18
18
|
import { type } from '@lowdefy/helpers';
|
|
19
19
|
import Label from '../Label/Label.js';
|
|
20
|
-
import getUniqueValues from '../../getUniqueValues.js';
|
|
21
20
|
const Option = AutoComplete.Option;
|
|
22
21
|
const AutoCompleteInput = ({ blockId , components , events , loading , methods , properties , required , validation , value , })=>{
|
|
23
|
-
const uniqueValueOptions = getUniqueValues(properties.options || []);
|
|
24
22
|
return /*#__PURE__*/ React.createElement(Label, {
|
|
25
23
|
blockId: blockId,
|
|
26
24
|
components: components,
|
|
@@ -38,19 +36,20 @@ const AutoCompleteInput = ({ blockId , components , events , loading , methods ,
|
|
|
38
36
|
autoFocus: properties.autoFocus,
|
|
39
37
|
backfill: properties.backfill,
|
|
40
38
|
bordered: properties.bordered,
|
|
41
|
-
className: methods.makeCssClass(
|
|
39
|
+
className: methods.makeCssClass([
|
|
40
|
+
{
|
|
41
|
+
width: '100%'
|
|
42
|
+
},
|
|
43
|
+
properties.inputStyle
|
|
44
|
+
]),
|
|
42
45
|
defaultOpen: properties.defaultOpen,
|
|
43
46
|
disabled: properties.disabled || loading,
|
|
44
47
|
placeholder: properties.placeholder || 'Type or select item',
|
|
45
48
|
allowClear: properties.allowClear !== false,
|
|
46
49
|
size: properties.size,
|
|
47
|
-
filterOption: (input, option)
|
|
50
|
+
filterOption: (input, option)=>`${option.value}`.toLowerCase().indexOf(input.toLowerCase()) >= 0,
|
|
48
51
|
onChange: (newVal)=>{
|
|
49
|
-
|
|
50
|
-
if (type.isNone(val)) {
|
|
51
|
-
val = newVal;
|
|
52
|
-
}
|
|
53
|
-
methods.setValue(val);
|
|
52
|
+
methods.setValue(newVal);
|
|
54
53
|
methods.triggerEvent({
|
|
55
54
|
name: 'onChange'
|
|
56
55
|
});
|
|
@@ -63,32 +62,13 @@ const AutoCompleteInput = ({ blockId , components , events , loading , methods ,
|
|
|
63
62
|
}
|
|
64
63
|
});
|
|
65
64
|
},
|
|
66
|
-
value: type.isNone(value) ? undefined : value
|
|
67
|
-
}, (properties.options || []).map((opt, i)
|
|
65
|
+
value: type.isNone(value) ? undefined : `${value}`
|
|
66
|
+
}, (properties.options || []).map((opt, i)=>/*#__PURE__*/ React.createElement(Option, {
|
|
68
67
|
className: methods.makeCssClass(properties.optionsStyle),
|
|
69
68
|
id: `${blockId}_${i}`,
|
|
70
69
|
key: i,
|
|
71
|
-
value: `${
|
|
72
|
-
},
|
|
73
|
-
html: `${opt}`,
|
|
74
|
-
methods
|
|
75
|
-
})) : /*#__PURE__*/ React.createElement(Option, {
|
|
76
|
-
className: methods.makeCssClass([
|
|
77
|
-
properties.optionsStyle,
|
|
78
|
-
opt.style
|
|
79
|
-
]),
|
|
80
|
-
disabled: opt.disabled,
|
|
81
|
-
filterstring: opt.filterString,
|
|
82
|
-
id: `${blockId}_${i}`,
|
|
83
|
-
key: i,
|
|
84
|
-
value: `${i}`
|
|
85
|
-
}, type.isNone(opt.label) ? renderHtml({
|
|
86
|
-
html: `${opt.value}`,
|
|
87
|
-
methods
|
|
88
|
-
}) : renderHtml({
|
|
89
|
-
html: opt.label,
|
|
90
|
-
methods
|
|
91
|
-
}))))
|
|
70
|
+
value: `${opt}`
|
|
71
|
+
}, `${opt}`)))
|
|
92
72
|
}
|
|
93
73
|
});
|
|
94
74
|
};
|
|
@@ -101,52 +101,11 @@
|
|
|
101
101
|
},
|
|
102
102
|
"options": {
|
|
103
103
|
"default": [],
|
|
104
|
-
"
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
"type": "string"
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
{
|
|
113
|
-
"type": "array",
|
|
114
|
-
"description": "Options can either be an array of string values, on an array of label, value pairs.",
|
|
115
|
-
"items": {
|
|
116
|
-
"type": "object",
|
|
117
|
-
"required": ["value"],
|
|
118
|
-
"properties": {
|
|
119
|
-
"label": {
|
|
120
|
-
"type": "string",
|
|
121
|
-
"description": "Value label shown to user - supports html."
|
|
122
|
-
},
|
|
123
|
-
"value": {
|
|
124
|
-
"description": "Value selected. Can be of any type.",
|
|
125
|
-
"type": "string",
|
|
126
|
-
"docs": {
|
|
127
|
-
"displayType": "yaml"
|
|
128
|
-
}
|
|
129
|
-
},
|
|
130
|
-
"disabled": {
|
|
131
|
-
"type": "boolean",
|
|
132
|
-
"default": false,
|
|
133
|
-
"description": "Disable the option if true."
|
|
134
|
-
},
|
|
135
|
-
"filterString": {
|
|
136
|
-
"type": "string",
|
|
137
|
-
"description": "String to match against when filtering selector options during. If no filterString is provided the filter method matches against options.label."
|
|
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
|
-
]
|
|
104
|
+
"type": "array",
|
|
105
|
+
"description": "Options can either be an array of string values.",
|
|
106
|
+
"items": {
|
|
107
|
+
"type": "string"
|
|
108
|
+
}
|
|
150
109
|
},
|
|
151
110
|
"optionsStyle": {
|
|
152
111
|
"type": "object",
|
|
@@ -63,6 +63,7 @@ const DateRangeSelector = ({ blockId , components: { Icon } , events , loading
|
|
|
63
63
|
getPopupContainer: ()=>document.getElementById(`${blockId}_popup`),
|
|
64
64
|
separator: properties.separator || '~',
|
|
65
65
|
size: properties.size,
|
|
66
|
+
status: validation.status,
|
|
66
67
|
placeholder: type.isArray(properties.placeholder) && [
|
|
67
68
|
properties.placeholder[0] || 'Start Date',
|
|
68
69
|
properties.placeholder[1] || 'End Date',
|
|
@@ -70,7 +71,7 @@ const DateRangeSelector = ({ blockId , components: { Icon } , events , loading
|
|
|
70
71
|
'Start Date',
|
|
71
72
|
'End Date'
|
|
72
73
|
],
|
|
73
|
-
suffixIcon:
|
|
74
|
+
suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
|
|
74
75
|
blockId: `${blockId}_suffixIcon`,
|
|
75
76
|
events: events,
|
|
76
77
|
properties: properties.suffixIcon || 'AiOutlineCalendar'
|
|
@@ -57,7 +57,8 @@ const DateSelector = ({ blockId , components: { Icon } , events , loading , met
|
|
|
57
57
|
placeholder: properties.placeholder || 'Select Date',
|
|
58
58
|
showToday: properties.showToday,
|
|
59
59
|
size: properties.size,
|
|
60
|
-
|
|
60
|
+
status: validation.status,
|
|
61
|
+
suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
|
|
61
62
|
blockId: `${blockId}_suffixIcon`,
|
|
62
63
|
events: events,
|
|
63
64
|
properties: properties.suffixIcon || 'AiOutlineCalendar'
|
|
@@ -60,7 +60,8 @@ const DateTimeSelector = ({ blockId , components: { Icon } , events , loading ,
|
|
|
60
60
|
showNow: properties.showNow,
|
|
61
61
|
showToday: properties.showToday,
|
|
62
62
|
size: properties.size,
|
|
63
|
-
|
|
63
|
+
status: validation.status,
|
|
64
|
+
suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
|
|
64
65
|
blockId: `${blockId}_suffixIcon`,
|
|
65
66
|
events: events,
|
|
66
67
|
properties: properties.suffixIcon || 'AiOutlineCalendar'
|
|
@@ -40,7 +40,7 @@ const validationKeyMap = {
|
|
|
40
40
|
};
|
|
41
41
|
let iconMap;
|
|
42
42
|
const Label = ({ blockId , components: { Icon } , content , methods , properties , required , validation , })=>{
|
|
43
|
-
const { extraClassName , feedbackClassName , label , labelClassName , labelCol , labelColClassName , rowClassName , showExtra , showFeedback , wrapperCol , } = labelLogic({
|
|
43
|
+
const { extraClassName , feedbackClassName , iconClassName , label , labelClassName , labelCol , labelColClassName , rowClassName , showExtra , showFeedback , wrapperCol , } = labelLogic({
|
|
44
44
|
blockId,
|
|
45
45
|
content,
|
|
46
46
|
methods,
|
|
@@ -66,7 +66,7 @@ const Label = ({ blockId , components: { Icon } , content , methods , propertie
|
|
|
66
66
|
}
|
|
67
67
|
const IconNode = validation.status && iconMap[validation.status];
|
|
68
68
|
const icon = validation.status && IconNode ? /*#__PURE__*/ React.createElement("span", {
|
|
69
|
-
className:
|
|
69
|
+
className: iconClassName
|
|
70
70
|
}, /*#__PURE__*/ React.createElement(IconNode, null)) : null;
|
|
71
71
|
return /*#__PURE__*/ React.createElement(Row, {
|
|
72
72
|
id: blockId,
|
|
@@ -86,19 +86,19 @@ const Label = ({ blockId , components: { Icon } , content , methods , propertie
|
|
|
86
86
|
className: "ant-form-item-control-input"
|
|
87
87
|
}, /*#__PURE__*/ React.createElement("div", {
|
|
88
88
|
className: "ant-form-item-control-input-content"
|
|
89
|
-
}, content.content && content.content()), icon), /*#__PURE__*/ React.createElement(CSSMotion, {
|
|
90
|
-
visible: showFeedback,
|
|
89
|
+
}, content.content && content.content()), icon), (showFeedback || showExtra) && /*#__PURE__*/ React.createElement(CSSMotion, {
|
|
90
|
+
visible: showFeedback || showExtra,
|
|
91
91
|
motionName: "show-help",
|
|
92
92
|
motionAppear: true,
|
|
93
93
|
removeOnLeave: true
|
|
94
94
|
}, ({ className: motionClassName })=>/*#__PURE__*/ React.createElement("div", {
|
|
95
|
-
className: classNames(
|
|
96
|
-
},
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
95
|
+
className: classNames(extraClassName, motionClassName)
|
|
96
|
+
}, showFeedback ? /*#__PURE__*/ React.createElement("div", {
|
|
97
|
+
className: classNames(feedbackClassName)
|
|
98
|
+
}, validation[validationKeyMap[validation.status]] && validation[validationKeyMap[validation.status]].length > 0 && validation[validationKeyMap[validation.status]][0]) : renderHtml({
|
|
99
|
+
html: properties.extra,
|
|
100
|
+
methods
|
|
101
|
+
})))));
|
|
102
102
|
};
|
|
103
103
|
Label.defaultProps = blockDefaultProps;
|
|
104
104
|
Label.meta = {
|
|
@@ -32,12 +32,6 @@ const labelLogic = ({ blockId , content , methods , properties ={} , required =f
|
|
|
32
32
|
const rowClassName = classNames({
|
|
33
33
|
[`ant-form-item`]: true,
|
|
34
34
|
[`ant-form-item-with-help`]: false,
|
|
35
|
-
// Status
|
|
36
|
-
[`ant-form-item-has-feedback`]: validation.status && properties.hasFeedback !== false,
|
|
37
|
-
[`ant-form-item-has-success`]: validation.status === 'success',
|
|
38
|
-
[`ant-form-item-has-warning`]: validation.status === 'warning',
|
|
39
|
-
[`ant-form-item-has-error`]: validation.status === 'error',
|
|
40
|
-
[`ant-form-item-is-validating`]: validation.status === 'validating',
|
|
41
35
|
[methods.makeCssClass({
|
|
42
36
|
flexWrap: properties.inline && 'inherit',
|
|
43
37
|
marginBottom: 0
|
|
@@ -74,9 +68,6 @@ const labelLogic = ({ blockId , content , methods , properties ={} , required =f
|
|
|
74
68
|
])]: true
|
|
75
69
|
});
|
|
76
70
|
const feedbackClassName = classNames({
|
|
77
|
-
'ant-form-item-explain': true,
|
|
78
|
-
'ant-form-item-extra': true,
|
|
79
|
-
[`ant-form-item-explain-feedback`]: validation.status && properties.hasFeedback !== false,
|
|
80
71
|
[`ant-form-item-explain-success`]: validation.status === 'success',
|
|
81
72
|
[`ant-form-item-explain-warning`]: validation.status === 'warning',
|
|
82
73
|
[`ant-form-item-explain-error`]: validation.status === 'error',
|
|
@@ -88,11 +79,20 @@ const labelLogic = ({ blockId , content , methods , properties ={} , required =f
|
|
|
88
79
|
properties.feedbackStyle,
|
|
89
80
|
])]: true
|
|
90
81
|
});
|
|
82
|
+
const iconClassName = classNames({
|
|
83
|
+
'ant-form-item-feedback-icon': true,
|
|
84
|
+
[`ant-form-item-feedback-icon-success`]: validation.status === 'success',
|
|
85
|
+
[`ant-form-item-feedback-icon-warning`]: validation.status === 'warning',
|
|
86
|
+
[`ant-form-item-feedback-icon-error`]: validation.status === 'error',
|
|
87
|
+
[`ant-form-item-feedback-icon-validating`]: validation.status === 'validating',
|
|
88
|
+
'ldf-feedback-icon': true
|
|
89
|
+
});
|
|
91
90
|
const showExtra = !!properties.extra && (!validation.status || validation.status === 'success');
|
|
92
91
|
const showFeedback = validation.status === 'warning' || validation.status === 'error';
|
|
93
92
|
return {
|
|
94
93
|
extraClassName,
|
|
95
94
|
feedbackClassName,
|
|
95
|
+
iconClassName,
|
|
96
96
|
label: !properties.disabled && label,
|
|
97
97
|
labelClassName,
|
|
98
98
|
labelCol,
|
|
@@ -58,8 +58,9 @@ const MonthSelector = ({ blockId , components: { Icon } , events , loading , me
|
|
|
58
58
|
getPopupContainer: ()=>document.getElementById(`${blockId}_popup`),
|
|
59
59
|
placeholder: properties.placeholder || 'Select Month',
|
|
60
60
|
size: properties.size,
|
|
61
|
+
status: validation.status,
|
|
61
62
|
value: type.isDate(value) ? moment.utc(value).startOf('month') : null,
|
|
62
|
-
suffixIcon:
|
|
63
|
+
suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
|
|
63
64
|
blockId: `${blockId}_suffixIcon`,
|
|
64
65
|
events: events,
|
|
65
66
|
properties: properties.suffixIcon || 'AiOutlineCalendar'
|
|
@@ -64,6 +64,7 @@ const MultipleSelector = ({ blockId , components: { Icon } , events , loading ,
|
|
|
64
64
|
default: true
|
|
65
65
|
}),
|
|
66
66
|
size: properties.size,
|
|
67
|
+
status: validation.status,
|
|
67
68
|
value: getValueIndex(value1, uniqueValueOptions, true),
|
|
68
69
|
suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
|
|
69
70
|
blockId: `${blockId}_suffixIcon`,
|
|
@@ -50,6 +50,7 @@ const NumberInput = ({ blockId , events , components , loading , methods , prope
|
|
|
50
50
|
placeholder: properties.placeholder,
|
|
51
51
|
precision: properties.precision,
|
|
52
52
|
size: properties.size,
|
|
53
|
+
status: validation.status,
|
|
53
54
|
step: properties.step,
|
|
54
55
|
onChange: (newVal)=>{
|
|
55
56
|
methods.setValue(newVal);
|
|
@@ -31,6 +31,9 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
31
31
|
display: 'flex',
|
|
32
32
|
alignItems: 'center',
|
|
33
33
|
padding: '0 46px',
|
|
34
|
+
xs: {
|
|
35
|
+
padding: '0 10px'
|
|
36
|
+
},
|
|
34
37
|
sm: {
|
|
35
38
|
padding: '0 15px'
|
|
36
39
|
},
|
|
@@ -50,8 +53,14 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
50
53
|
logo: {
|
|
51
54
|
margin: '0px 30px',
|
|
52
55
|
flex: '0 1 auto',
|
|
56
|
+
width: 130,
|
|
57
|
+
xs: {
|
|
58
|
+
margin: '0 5px',
|
|
59
|
+
width: 40
|
|
60
|
+
},
|
|
53
61
|
sm: {
|
|
54
|
-
margin: '0 10px'
|
|
62
|
+
margin: '0 10px',
|
|
63
|
+
width: 130
|
|
55
64
|
},
|
|
56
65
|
md: {
|
|
57
66
|
margin: '0 15px'
|
|
@@ -59,6 +68,9 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
59
68
|
},
|
|
60
69
|
lgMenu: {
|
|
61
70
|
flex: '1 1 auto',
|
|
71
|
+
xs: {
|
|
72
|
+
display: 'none'
|
|
73
|
+
},
|
|
62
74
|
sm: {
|
|
63
75
|
display: 'none'
|
|
64
76
|
},
|
|
@@ -72,6 +84,9 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
72
84
|
mdMenu: {
|
|
73
85
|
flex: '0 1 auto',
|
|
74
86
|
paddingLeft: '1rem',
|
|
87
|
+
xs: {
|
|
88
|
+
display: 'flex'
|
|
89
|
+
},
|
|
75
90
|
sm: {
|
|
76
91
|
display: 'flex'
|
|
77
92
|
},
|
|
@@ -96,6 +111,9 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
96
111
|
},
|
|
97
112
|
body: {
|
|
98
113
|
padding: '0 40px 40px 40px',
|
|
114
|
+
xs: {
|
|
115
|
+
padding: '0 5px 5px 5px'
|
|
116
|
+
},
|
|
99
117
|
sm: {
|
|
100
118
|
padding: '0 10px 10px 10px'
|
|
101
119
|
},
|
|
@@ -106,8 +124,14 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
106
124
|
padding: '0 40px 40px 40px'
|
|
107
125
|
}
|
|
108
126
|
},
|
|
127
|
+
breadcrumb: {
|
|
128
|
+
margin: '16px 0'
|
|
129
|
+
},
|
|
109
130
|
noBreadcrumb: {
|
|
110
131
|
padding: '20px 0',
|
|
132
|
+
xs: {
|
|
133
|
+
padding: '5px 0'
|
|
134
|
+
},
|
|
111
135
|
sm: {
|
|
112
136
|
padding: '5px 0'
|
|
113
137
|
},
|
|
@@ -121,9 +145,7 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
121
145
|
events: events,
|
|
122
146
|
properties: {
|
|
123
147
|
style: mergeObjects([
|
|
124
|
-
|
|
125
|
-
minHeight: '100vh'
|
|
126
|
-
},
|
|
148
|
+
styles.layout,
|
|
127
149
|
properties.style
|
|
128
150
|
])
|
|
129
151
|
},
|
|
@@ -149,25 +171,17 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
149
171
|
// TODO: use next/image
|
|
150
172
|
content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Link, {
|
|
151
173
|
home: true
|
|
152
|
-
}, /*#__PURE__*/ React.createElement("
|
|
153
|
-
|
|
154
|
-
srcSet: properties.logo
|
|
155
|
-
|
|
156
|
-
|
|
174
|
+
}, /*#__PURE__*/ React.createElement("picture", null, /*#__PURE__*/ React.createElement("source", {
|
|
175
|
+
media: `(min-width:${properties.logo?.breakpoint ?? 577}px)`,
|
|
176
|
+
srcSet: properties.logo?.src ?? `${basePath}/logo-${properties.header?.theme ?? 'dark'}-theme.png`
|
|
177
|
+
}), /*#__PURE__*/ React.createElement("img", {
|
|
178
|
+
src: (properties.logo?.srcMobile ?? properties.logo?.src) ?? `${basePath}/logo-square-${properties.header?.theme ?? 'dark'}-theme.png`,
|
|
179
|
+
alt: properties.logo?.alt ?? 'Lowdefy',
|
|
157
180
|
className: methods.makeCssClass([
|
|
158
|
-
{
|
|
159
|
-
width: 130,
|
|
160
|
-
sm: {
|
|
161
|
-
width: properties.logo && properties.logo.src && !properties.logo.srcSet ? 130 : 40
|
|
162
|
-
},
|
|
163
|
-
md: {
|
|
164
|
-
width: 130
|
|
165
|
-
}
|
|
166
|
-
},
|
|
167
181
|
styles.logo,
|
|
168
|
-
properties.logo
|
|
182
|
+
properties.logo?.style
|
|
169
183
|
])
|
|
170
|
-
})), /*#__PURE__*/ React.createElement("div", {
|
|
184
|
+
}))), /*#__PURE__*/ React.createElement("div", {
|
|
171
185
|
className: methods.makeCssClass(styles.headerContent)
|
|
172
186
|
}, /*#__PURE__*/ React.createElement("div", {
|
|
173
187
|
className: methods.makeCssClass([
|
|
@@ -189,7 +203,7 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
189
203
|
{
|
|
190
204
|
mode: 'horizontal',
|
|
191
205
|
collapsed: false,
|
|
192
|
-
theme: get(properties, 'header.theme')
|
|
206
|
+
theme: get(properties, 'header.theme') ?? 'dark'
|
|
193
207
|
},
|
|
194
208
|
properties.menu,
|
|
195
209
|
properties.menuLg,
|
|
@@ -199,7 +213,7 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
199
213
|
width: 'auto',
|
|
200
214
|
flex: '0 1 auto'
|
|
201
215
|
},
|
|
202
|
-
properties.header
|
|
216
|
+
properties.header?.contentStyle,
|
|
203
217
|
])), /*#__PURE__*/ React.createElement("div", {
|
|
204
218
|
className: methods.makeCssClass([
|
|
205
219
|
styles.mobile,
|
|
@@ -230,10 +244,10 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
230
244
|
},
|
|
231
245
|
events: events,
|
|
232
246
|
properties: mergeObjects([
|
|
233
|
-
properties.content,
|
|
234
247
|
{
|
|
235
248
|
style: styles.body
|
|
236
|
-
}
|
|
249
|
+
},
|
|
250
|
+
properties.content
|
|
237
251
|
]),
|
|
238
252
|
content: {
|
|
239
253
|
content: ()=>/*#__PURE__*/ React.createElement(React.Fragment, null, !type.isNone(properties.breadcrumb) ? /*#__PURE__*/ React.createElement(Breadcrumb, {
|
|
@@ -246,12 +260,10 @@ const PageHeaderMenu = ({ basePath , blockId , components: { Icon , Link } , co
|
|
|
246
260
|
events: events,
|
|
247
261
|
methods: methods,
|
|
248
262
|
properties: mergeObjects([
|
|
249
|
-
properties.breadcrumb,
|
|
250
263
|
{
|
|
251
|
-
style:
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
},
|
|
264
|
+
style: styles.breadcrumb
|
|
265
|
+
},
|
|
266
|
+
properties.breadcrumb,
|
|
255
267
|
]),
|
|
256
268
|
rename: {
|
|
257
269
|
events: {
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
"type": "string",
|
|
14
14
|
"description": "Header logo source url."
|
|
15
15
|
},
|
|
16
|
-
"
|
|
16
|
+
"srcMobile": {
|
|
17
17
|
"type": "string",
|
|
18
|
-
"description": "Header logo
|
|
18
|
+
"description": "Header logo img element for mobile."
|
|
19
19
|
},
|
|
20
|
-
"
|
|
21
|
-
"type": "
|
|
22
|
-
"description": "Header logo
|
|
20
|
+
"breakpoint": {
|
|
21
|
+
"type": "number",
|
|
22
|
+
"description": "Header logo breakpoint for switching between mobile and desktop logo."
|
|
23
23
|
},
|
|
24
24
|
"alt": {
|
|
25
25
|
"type": "string",
|
|
@@ -26,7 +26,7 @@ import Menu from '../Menu/Menu.js';
|
|
|
26
26
|
import MobileMenu from '../MobileMenu/MobileMenu.js';
|
|
27
27
|
import Sider from '../Sider/Sider.js';
|
|
28
28
|
const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , events , content , menus , methods , pageId , properties , })=>{
|
|
29
|
-
const [openSiderState, setSiderOpen] = useState(!
|
|
29
|
+
const [openSiderState, setSiderOpen] = useState(!properties.sider?.initialCollapsed);
|
|
30
30
|
useEffect(()=>{
|
|
31
31
|
methods.registerMethod('toggleSiderOpen', ()=>{
|
|
32
32
|
methods._toggleSiderOpen({
|
|
@@ -49,6 +49,9 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
49
49
|
display: 'flex',
|
|
50
50
|
alignItems: 'center',
|
|
51
51
|
padding: '0 46px',
|
|
52
|
+
xs: {
|
|
53
|
+
padding: '0 10px'
|
|
54
|
+
},
|
|
52
55
|
sm: {
|
|
53
56
|
padding: '0 15px'
|
|
54
57
|
},
|
|
@@ -69,11 +72,17 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
69
72
|
logo: {
|
|
70
73
|
margin: '0 30px 0 0',
|
|
71
74
|
flex: '0 1 auto',
|
|
75
|
+
width: 130,
|
|
76
|
+
xs: {
|
|
77
|
+
margin: '0 5px',
|
|
78
|
+
width: 40
|
|
79
|
+
},
|
|
72
80
|
sm: {
|
|
73
|
-
margin: '0 10px
|
|
81
|
+
margin: '0 10px',
|
|
82
|
+
width: 130
|
|
74
83
|
},
|
|
75
84
|
md: {
|
|
76
|
-
margin: '0 15px
|
|
85
|
+
margin: '0 15px'
|
|
77
86
|
}
|
|
78
87
|
},
|
|
79
88
|
desktop: {
|
|
@@ -93,6 +102,9 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
93
102
|
},
|
|
94
103
|
body: {
|
|
95
104
|
padding: '0 40px 40px 40px',
|
|
105
|
+
xs: {
|
|
106
|
+
padding: '0 5px 5px 5px'
|
|
107
|
+
},
|
|
96
108
|
sm: {
|
|
97
109
|
padding: '0 10px 10px 10px'
|
|
98
110
|
},
|
|
@@ -114,6 +126,9 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
114
126
|
},
|
|
115
127
|
noBreadcrumb: {
|
|
116
128
|
padding: '20px 0',
|
|
129
|
+
xs: {
|
|
130
|
+
padding: '5px 0'
|
|
131
|
+
},
|
|
117
132
|
sm: {
|
|
118
133
|
padding: '5px 0'
|
|
119
134
|
},
|
|
@@ -131,9 +146,7 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
131
146
|
events: events,
|
|
132
147
|
properties: {
|
|
133
148
|
style: mergeObjects([
|
|
134
|
-
|
|
135
|
-
minHeight: '100vh'
|
|
136
|
-
},
|
|
149
|
+
styles.layout,
|
|
137
150
|
properties.style
|
|
138
151
|
])
|
|
139
152
|
},
|
|
@@ -159,7 +172,7 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
159
172
|
{
|
|
160
173
|
width: 'auto'
|
|
161
174
|
},
|
|
162
|
-
properties.header
|
|
175
|
+
properties.header?.contentStyle
|
|
163
176
|
])), /*#__PURE__*/ React.createElement("div", {
|
|
164
177
|
className: methods.makeCssClass([
|
|
165
178
|
styles.mobile,
|
|
@@ -179,7 +192,7 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
179
192
|
properties: mergeObjects([
|
|
180
193
|
{
|
|
181
194
|
mode: 'inline',
|
|
182
|
-
theme: get(properties, 'sider.theme')
|
|
195
|
+
theme: get(properties, 'sider.theme') ?? 'light'
|
|
183
196
|
},
|
|
184
197
|
properties.menu,
|
|
185
198
|
properties.menuMd,
|
|
@@ -196,25 +209,17 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
196
209
|
}
|
|
197
210
|
}))), /*#__PURE__*/ React.createElement(Link, {
|
|
198
211
|
home: true
|
|
199
|
-
}, /*#__PURE__*/ React.createElement("
|
|
200
|
-
|
|
201
|
-
srcSet: properties.logo
|
|
202
|
-
|
|
203
|
-
|
|
212
|
+
}, /*#__PURE__*/ React.createElement("picture", null, /*#__PURE__*/ React.createElement("source", {
|
|
213
|
+
media: `(min-width:${properties.logo?.breakpoint ?? 577}px)`,
|
|
214
|
+
srcSet: properties.logo?.src ?? `${basePath}/logo-${properties.header?.theme ?? 'dark'}-theme.png`
|
|
215
|
+
}), /*#__PURE__*/ React.createElement("img", {
|
|
216
|
+
src: (properties.logo?.srcMobile ?? properties.logo?.src) ?? `${basePath}/logo-square-${properties.header?.theme ?? 'dark'}-theme.png`,
|
|
217
|
+
alt: properties.logo?.alt ?? 'Lowdefy',
|
|
204
218
|
className: methods.makeCssClass([
|
|
205
|
-
{
|
|
206
|
-
width: 130,
|
|
207
|
-
sm: {
|
|
208
|
-
width: properties.logo && properties.logo.src && !properties.logo.srcSet ? 130 : 40
|
|
209
|
-
},
|
|
210
|
-
md: {
|
|
211
|
-
width: 130
|
|
212
|
-
}
|
|
213
|
-
},
|
|
214
219
|
styles.logo,
|
|
215
|
-
properties.logo
|
|
220
|
+
properties.logo?.style
|
|
216
221
|
])
|
|
217
|
-
})))
|
|
222
|
+
}))))
|
|
218
223
|
}
|
|
219
224
|
}), /*#__PURE__*/ React.createElement(Layout, {
|
|
220
225
|
blockId: `${blockId}_layout`,
|
|
@@ -235,7 +240,7 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
235
240
|
methods: methods,
|
|
236
241
|
properties: mergeObjects([
|
|
237
242
|
{
|
|
238
|
-
theme: get(properties, 'sider.theme')
|
|
243
|
+
theme: get(properties, 'sider.theme') ?? 'light',
|
|
239
244
|
style: styles.desktop
|
|
240
245
|
},
|
|
241
246
|
properties.sider,
|
|
@@ -263,13 +268,13 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
263
268
|
properties: mergeObjects([
|
|
264
269
|
{
|
|
265
270
|
mode: 'inline',
|
|
266
|
-
theme: get(properties, 'sider.theme')
|
|
271
|
+
theme: get(properties, 'sider.theme') ?? 'light'
|
|
267
272
|
},
|
|
268
|
-
properties.menu,
|
|
269
|
-
properties.menuLg,
|
|
270
273
|
{
|
|
271
274
|
style: styles.desktop
|
|
272
|
-
},
|
|
275
|
+
},
|
|
276
|
+
properties.menu,
|
|
277
|
+
properties.menuLg,
|
|
273
278
|
]),
|
|
274
279
|
rename: {
|
|
275
280
|
methods: {
|
|
@@ -286,7 +291,7 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
286
291
|
style: {
|
|
287
292
|
flex: '1 0 auto'
|
|
288
293
|
}
|
|
289
|
-
}, content.sider && content.sider()), !get(properties, 'sider.hideToggleButton')
|
|
294
|
+
}, content.sider && content.sider()), !get(properties, 'sider.hideToggleButton') ?? /*#__PURE__*/ React.createElement(Affix, {
|
|
290
295
|
blockId: `${blockId}_toggle_sider_affix`,
|
|
291
296
|
components: {
|
|
292
297
|
Icon,
|
|
@@ -321,7 +326,7 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
321
326
|
icon: {
|
|
322
327
|
name: openSiderState ? 'AiOutlineMenuFold' : 'AiOutlineMenuUnfold'
|
|
323
328
|
},
|
|
324
|
-
...properties.toggleSiderButton
|
|
329
|
+
...properties.toggleSiderButton ?? {}
|
|
325
330
|
},
|
|
326
331
|
methods: methods,
|
|
327
332
|
onClick: ()=>methods.toggleSiderOpen(),
|
|
@@ -359,9 +364,7 @@ const PageSiderMenu = ({ basePath , blockId , components: { Icon , Link } , eve
|
|
|
359
364
|
methods: methods,
|
|
360
365
|
properties: mergeObjects([
|
|
361
366
|
{
|
|
362
|
-
style:
|
|
363
|
-
padding: '16px 0'
|
|
364
|
-
}
|
|
367
|
+
style: styles.breadcrumb
|
|
365
368
|
},
|
|
366
369
|
properties.breadcrumb,
|
|
367
370
|
]),
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
"type": "string",
|
|
14
14
|
"description": "Header logo source url."
|
|
15
15
|
},
|
|
16
|
-
"
|
|
16
|
+
"srcMobile": {
|
|
17
17
|
"type": "string",
|
|
18
|
-
"description": "Header logo
|
|
18
|
+
"description": "Header logo img element for mobile."
|
|
19
19
|
},
|
|
20
|
-
"
|
|
21
|
-
"type": "
|
|
22
|
-
"description": "Header logo
|
|
20
|
+
"breakpoint": {
|
|
21
|
+
"type": "number",
|
|
22
|
+
"description": "Header logo breakpoint for switching between mobile and desktop logo."
|
|
23
23
|
},
|
|
24
24
|
"alt": {
|
|
25
25
|
"type": "string",
|
|
@@ -60,6 +60,7 @@ const Selector = ({ blockId , components: { Icon , Link } , events , loading ,
|
|
|
60
60
|
placeholder: get(properties, 'placeholder', {
|
|
61
61
|
default: 'Select item'
|
|
62
62
|
}),
|
|
63
|
+
status: validation.status,
|
|
63
64
|
suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
|
|
64
65
|
blockId: `${blockId}_suffixIcon`,
|
|
65
66
|
events: events,
|
|
@@ -45,6 +45,7 @@ const TextInput = ({ blockId , components: { Icon , Link } , events , loading ,
|
|
|
45
45
|
maxLength: properties.maxLength,
|
|
46
46
|
placeholder: properties.placeholder,
|
|
47
47
|
size: properties.size,
|
|
48
|
+
status: validation.status,
|
|
48
49
|
value: value,
|
|
49
50
|
onChange: (event)=>{
|
|
50
51
|
methods.setValue(event.target.value);
|
|
@@ -67,11 +68,11 @@ const TextInput = ({ blockId , components: { Icon , Link } , events , loading ,
|
|
|
67
68
|
events: events,
|
|
68
69
|
properties: properties.prefixIcon
|
|
69
70
|
}),
|
|
70
|
-
suffix: properties.suffix || properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
|
|
71
|
+
suffix: (properties.suffix || properties.suffixIcon) && /*#__PURE__*/ React.createElement(React.Fragment, null, properties.suffix && properties.suffix, properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
|
|
71
72
|
blockId: `${blockId}_suffixIcon`,
|
|
72
73
|
events: events,
|
|
73
74
|
properties: properties.suffixIcon
|
|
74
|
-
})
|
|
75
|
+
}))
|
|
75
76
|
});
|
|
76
77
|
}
|
|
77
78
|
}
|
|
@@ -59,7 +59,8 @@ const WeekSelector = ({ blockId , components: { Icon , Link } , events , loadin
|
|
|
59
59
|
getPopupContainer: ()=>document.getElementById(`${blockId}_popup`),
|
|
60
60
|
placeholder: properties.placeholder || 'Select Week',
|
|
61
61
|
size: properties.size,
|
|
62
|
-
|
|
62
|
+
status: validation.status,
|
|
63
|
+
suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
|
|
63
64
|
blockId: `${blockId}_suffixIcon`,
|
|
64
65
|
events: events,
|
|
65
66
|
properties: properties.suffixIcon || 'AiOutlineCalendar'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lowdefy/blocks-antd",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.28",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"description": "Lowdefy Ant Design Blocks",
|
|
6
6
|
"homepage": "https://lowdefy.com",
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
54
|
"@ant-design/icons": "4.7.0",
|
|
55
|
-
"@lowdefy/block-utils": "4.0.0-alpha.
|
|
56
|
-
"@lowdefy/helpers": "4.0.0-alpha.
|
|
55
|
+
"@lowdefy/block-utils": "4.0.0-alpha.28",
|
|
56
|
+
"@lowdefy/helpers": "4.0.0-alpha.28",
|
|
57
57
|
"antd": "4.22.5",
|
|
58
58
|
"classnames": "2.3.1",
|
|
59
59
|
"moment": "2.29.4",
|
|
@@ -64,9 +64,9 @@
|
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
66
|
"@emotion/jest": "11.9.1",
|
|
67
|
-
"@lowdefy/block-dev": "4.0.0-alpha.
|
|
68
|
-
"@lowdefy/jest-yaml-transform": "4.0.0-alpha.
|
|
69
|
-
"@lowdefy/node-utils": "4.0.0-alpha.
|
|
67
|
+
"@lowdefy/block-dev": "4.0.0-alpha.28",
|
|
68
|
+
"@lowdefy/jest-yaml-transform": "4.0.0-alpha.28",
|
|
69
|
+
"@lowdefy/node-utils": "4.0.0-alpha.28",
|
|
70
70
|
"@swc/cli": "0.1.57",
|
|
71
71
|
"@swc/core": "1.2.194",
|
|
72
72
|
"@swc/jest": "0.2.21",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
"publishConfig": {
|
|
82
82
|
"access": "public"
|
|
83
83
|
},
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "d0bad6be18362c0ceea1c18239c61bba0ba59300"
|
|
85
85
|
}
|