@lowdefy/blocks-antd 4.0.0-alpha.25 → 4.0.0-alpha.26

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.
Files changed (16) hide show
  1. package/dist/blocks/AutoComplete/AutoComplete.js +13 -33
  2. package/dist/blocks/AutoComplete/schema.json +5 -46
  3. package/dist/blocks/DateRangeSelector/DateRangeSelector.js +2 -1
  4. package/dist/blocks/DateSelector/DateSelector.js +2 -1
  5. package/dist/blocks/DateTimeSelector/DateTimeSelector.js +2 -1
  6. package/dist/blocks/Label/Label.js +11 -11
  7. package/dist/blocks/Label/labelLogic.js +9 -9
  8. package/dist/blocks/Label/style.less +4 -0
  9. package/dist/blocks/MonthSelector/MonthSelector.js +2 -1
  10. package/dist/blocks/MultipleSelector/MultipleSelector.js +1 -0
  11. package/dist/blocks/NumberInput/NumberInput.js +1 -0
  12. package/dist/blocks/PasswordInput/PasswordInput.js +1 -0
  13. package/dist/blocks/Selector/Selector.js +1 -0
  14. package/dist/blocks/TextInput/TextInput.js +3 -2
  15. package/dist/blocks/WeekSelector/WeekSelector.js +2 -1
  16. package/package.json +7 -7
package/dist/blocks/AutoComplete/AutoComplete.js CHANGED
@@ -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, renderHtml } from '@lowdefy/block-utils';
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(properties.inputStyle),
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)=>(option.filterstring || option.children.props.html || '').toLowerCase().indexOf(input.toLowerCase()) >= 0,
50
+ filterOption: (input, option)=>`${option.value}`.toLowerCase().indexOf(input.toLowerCase()) >= 0,
48
51
  onChange: (newVal)=>{
49
- let val = type.isPrimitive(uniqueValueOptions[newVal]) ? uniqueValueOptions[newVal] : uniqueValueOptions[newVal].value;
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)=>type.isPrimitive(opt) ? /*#__PURE__*/ React.createElement(Option, {
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: `${i}`
72
- }, renderHtml({
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
  };
package/dist/blocks/AutoComplete/schema.json CHANGED
@@ -101,52 +101,11 @@
101
101
  },
102
102
  "options": {
103
103
  "default": [],
104
- "oneOf": [
105
- {
106
- "type": "array",
107
- "description": "Options can either be an array of string values, on an array of label, value pairs - supports html.",
108
- "items": {
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",
package/dist/blocks/DateRangeSelector/DateRangeSelector.js CHANGED
@@ -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: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
74
+ suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
74
75
  blockId: `${blockId}_suffixIcon`,
75
76
  events: events,
76
77
  properties: properties.suffixIcon || 'AiOutlineCalendar'
package/dist/blocks/DateSelector/DateSelector.js CHANGED
@@ -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
- suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
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'
package/dist/blocks/DateTimeSelector/DateTimeSelector.js CHANGED
@@ -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
- suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
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'
package/dist/blocks/Label/Label.js CHANGED
@@ -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: "ant-form-item-children-icon"
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(feedbackClassName, motionClassName)
96
- }, validation[validationKeyMap[validation.status]] && validation[validationKeyMap[validation.status]].length > 0 && validation[validationKeyMap[validation.status]][0])), showExtra && /*#__PURE__*/ React.createElement("div", {
97
- className: extraClassName
98
- }, renderHtml({
99
- html: properties.extra,
100
- methods
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 = {
package/dist/blocks/Label/labelLogic.js CHANGED
@@ -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,
package/dist/blocks/Label/style.less CHANGED
@@ -28,3 +28,7 @@
28
28
  .ant-input-affix-wrapper {
29
29
  height: 100% !important;
30
30
  }
31
+
32
+ .ldf-feedback-icon {
33
+ margin-left: @margin-xss;
34
+ }
package/dist/blocks/MonthSelector/MonthSelector.js CHANGED
@@ -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: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
63
+ suffixIcon: /*#__PURE__*/ React.createElement(Icon, {
63
64
  blockId: `${blockId}_suffixIcon`,
64
65
  events: events,
65
66
  properties: properties.suffixIcon || 'AiOutlineCalendar'
package/dist/blocks/MultipleSelector/MultipleSelector.js CHANGED
@@ -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`,
package/dist/blocks/NumberInput/NumberInput.js CHANGED
@@ -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);
package/dist/blocks/PasswordInput/PasswordInput.js CHANGED
@@ -57,6 +57,7 @@ const PasswordInput = ({ blockId , components , events , loading , methods , pro
57
57
  placeholder: properties.placeholder,
58
58
  value: value,
59
59
  size: properties.size,
60
+ status: validation.status,
60
61
  visibilityToggle: properties.visibilityToggle
61
62
  });
62
63
  }
package/dist/blocks/Selector/Selector.js CHANGED
@@ -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,
package/dist/blocks/TextInput/TextInput.js CHANGED
@@ -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
  }
package/dist/blocks/WeekSelector/WeekSelector.js CHANGED
@@ -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
- suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
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.25",
3
+ "version": "4.0.0-alpha.26",
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.25",
56
- "@lowdefy/helpers": "4.0.0-alpha.25",
55
+ "@lowdefy/block-utils": "4.0.0-alpha.26",
56
+ "@lowdefy/helpers": "4.0.0-alpha.26",
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.25",
68
- "@lowdefy/jest-yaml-transform": "4.0.0-alpha.25",
69
- "@lowdefy/node-utils": "4.0.0-alpha.25",
67
+ "@lowdefy/block-dev": "4.0.0-alpha.26",
68
+ "@lowdefy/jest-yaml-transform": "4.0.0-alpha.26",
69
+ "@lowdefy/node-utils": "4.0.0-alpha.26",
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": "720e5090c9777fc2176517a53e88a3b81fc8c237"
84
+ "gitHead": "ef60e34f87b95204d103db4a65e4ba3c54a5a1b5"
85
85
  }