@micromag/screen-keypad 0.3.663 → 0.3.667

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 (2) hide show
  1. package/es/index.js +58 -15
  2. package/package.json +18 -18
package/es/index.js CHANGED
@@ -97,6 +97,7 @@ var propTypes = {
97
97
  boxStyle: PropTypes$1.boxStyle
98
98
  })),
99
99
  title: PropTypes$1.headingElement,
100
+ subtitle: PropTypes$1.textElement,
100
101
  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
101
102
  spacing: PropTypes.number,
102
103
  keypadSettings: PropTypes.shape({
@@ -131,6 +132,7 @@ var propTypes = {
131
132
  var defaultProps = {
132
133
  items: null,
133
134
  title: null,
135
+ subtitle: null,
134
136
  layout: null,
135
137
  spacing: 20,
136
138
  keypadSettings: null,
@@ -147,6 +149,7 @@ var defaultProps = {
147
149
  var KeypadScreen = function KeypadScreen(_ref) {
148
150
  var items = _ref.items,
149
151
  title = _ref.title,
152
+ subtitle = _ref.subtitle,
150
153
  layout = _ref.layout,
151
154
  spacing = _ref.spacing,
152
155
  keypadSettings = _ref.keypadSettings,
@@ -196,6 +199,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
196
199
  var _ref2 = title || {},
197
200
  _ref2$textStyle = _ref2.textStyle,
198
201
  titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
202
+ var hasSubtitle = isTextFilled(subtitle);
199
203
  var _useDimensionObserver = useDimensionObserver(),
200
204
  headerRef = _useDimensionObserver.ref,
201
205
  _useDimensionObserver2 = _useDimensionObserver.height,
@@ -265,7 +269,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
265
269
  _ref8$largeVisual = _ref8.largeVisual,
266
270
  largeVisual = _ref8$largeVisual === void 0 ? null : _ref8$largeVisual,
267
271
  _ref8$button = _ref8.button,
268
- popupButton = _ref8$button === void 0 ? null : _ref8$button;
272
+ popupButton = _ref8$button === void 0 ? null : _ref8$button,
273
+ _ref8$popupBoxStyle = _ref8.popupBoxStyle,
274
+ singlePopupBoxStyle = _ref8$popupBoxStyle === void 0 ? null : _ref8$popupBoxStyle;
269
275
  var hasPopupHeading = isTextFilled(popupHeading);
270
276
  var _ref9 = popupHeading || {},
271
277
  _ref9$textStyle = _ref9.textStyle,
@@ -394,7 +400,8 @@ var KeypadScreen = function KeypadScreen(_ref) {
394
400
  },
395
401
  dragOptions: {
396
402
  filterTaps: true,
397
- preventDefault: true
403
+ preventDefault: true,
404
+ stopPropagation: true
398
405
  },
399
406
  onTap: onCloseModal
400
407
  }),
@@ -593,7 +600,20 @@ var KeypadScreen = function KeypadScreen(_ref) {
593
600
  className: styles.title
594
601
  }, title, {
595
602
  textStyle: titleTextStyle
596
- })) : null), /*#__PURE__*/React.createElement(Keypad, {
603
+ })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
604
+ placeholder: "Subtitle",
605
+ emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
606
+ id: "ZG8/oK",
607
+ defaultMessage: [{
608
+ "type": 0,
609
+ "value": "Subtitle"
610
+ }]
611
+ }),
612
+ emptyClassName: classNames([styles.empty, styles.emptyHeading]),
613
+ isEmpty: !hasSubtitle
614
+ }, hasSubtitle ? /*#__PURE__*/React.createElement(Text, Object.assign({
615
+ className: styles.subtitle
616
+ }, subtitle)) : null), /*#__PURE__*/React.createElement(Keypad, {
597
617
  className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
598
618
  align: columnAlign,
599
619
  columns: isPlaceholder ? 3 : columns,
@@ -639,7 +659,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
639
659
  }, /*#__PURE__*/React.createElement("div", {
640
660
  ref: popupInnerRef,
641
661
  className: classNames([styles.popupInner, styles[popupLayoutClassName], _defineProperty({}, styles.withShadow, popupBoxStyle === null)]),
642
- style: _objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle))
662
+ style: _objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle)), getStyleFromBox(singlePopupBoxStyle))
643
663
  }, /*#__PURE__*/React.createElement(ScreenElement, {
644
664
  emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
645
665
  id: "IE7U/Q",
@@ -867,7 +887,6 @@ var definition = [{
867
887
  defaultValue: {
868
888
  layout: 'content-top'
869
889
  },
870
- isList: true,
871
890
  fields: [{
872
891
  name: 'layout',
873
892
  type: 'card-layout',
@@ -898,9 +917,20 @@ var definition = [{
898
917
  "value": "Content text style"
899
918
  }]
900
919
  })
920
+ }, {
921
+ name: 'boxStyle',
922
+ type: 'box-style-form',
923
+ label: defineMessage({
924
+ id: "p1pghO",
925
+ defaultMessage: [{
926
+ "type": 0,
927
+ "value": "Box style"
928
+ }]
929
+ })
901
930
  }, {
902
931
  name: 'button',
903
932
  type: 'fields',
933
+ isList: true,
904
934
  label: defineMessage({
905
935
  id: "i6bmbD",
906
936
  defaultMessage: [{
@@ -929,16 +959,6 @@ var definition = [{
929
959
  }]
930
960
  })
931
961
  }]
932
- }, {
933
- name: 'boxStyle',
934
- type: 'box-style-form',
935
- label: defineMessage({
936
- id: "p1pghO",
937
- defaultMessage: [{
938
- "type": 0,
939
- "value": "Box style"
940
- }]
941
- })
942
962
  }]
943
963
  }]
944
964
  }, {
@@ -988,6 +1008,16 @@ var definition = [{
988
1008
  "value": "Visual"
989
1009
  }]
990
1010
  })
1011
+ }, {
1012
+ name: 'popupBoxStyle',
1013
+ type: 'box-style-form',
1014
+ label: defineMessage({
1015
+ id: "p1pghO",
1016
+ defaultMessage: [{
1017
+ "type": 0,
1018
+ "value": "Box style"
1019
+ }]
1020
+ })
991
1021
  }, {
992
1022
  name: 'button',
993
1023
  type: 'button-link',
@@ -1018,6 +1048,19 @@ var definition = [{
1018
1048
  "value": "Title"
1019
1049
  }]
1020
1050
  })
1051
+ }, {
1052
+ name: 'subtitle',
1053
+ type: 'text-element',
1054
+ theme: {
1055
+ textStyle: 'text'
1056
+ },
1057
+ label: defineMessage({
1058
+ id: "EcZYpr",
1059
+ defaultMessage: [{
1060
+ "type": 0,
1061
+ "value": "Subtitle"
1062
+ }]
1063
+ })
1021
1064
  }, {
1022
1065
  name: 'background',
1023
1066
  type: 'background',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-keypad",
3
- "version": "0.3.663",
3
+ "version": "0.3.667",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -65,22 +65,22 @@
65
65
  },
66
66
  "dependencies": {
67
67
  "@babel/runtime": "^7.13.10",
68
- "@micromag/core": "^0.3.660",
69
- "@micromag/element-background": "^0.3.660",
70
- "@micromag/element-button": "^0.3.660",
71
- "@micromag/element-call-to-action": "^0.3.660",
72
- "@micromag/element-container": "^0.3.660",
73
- "@micromag/element-footer": "^0.3.660",
74
- "@micromag/element-grid": "^0.3.660",
75
- "@micromag/element-header": "^0.3.663",
76
- "@micromag/element-heading": "^0.3.660",
77
- "@micromag/element-keypad": "^0.3.660",
78
- "@micromag/element-layout": "^0.3.660",
79
- "@micromag/element-scroll": "^0.3.660",
80
- "@micromag/element-text": "^0.3.660",
81
- "@micromag/element-urbania-author": "^0.3.660",
82
- "@micromag/element-visual": "^0.3.660",
83
- "@micromag/transforms": "^0.3.660",
68
+ "@micromag/core": "^0.3.667",
69
+ "@micromag/element-background": "^0.3.667",
70
+ "@micromag/element-button": "^0.3.667",
71
+ "@micromag/element-call-to-action": "^0.3.667",
72
+ "@micromag/element-container": "^0.3.667",
73
+ "@micromag/element-footer": "^0.3.667",
74
+ "@micromag/element-grid": "^0.3.667",
75
+ "@micromag/element-header": "^0.3.667",
76
+ "@micromag/element-heading": "^0.3.667",
77
+ "@micromag/element-keypad": "^0.3.667",
78
+ "@micromag/element-layout": "^0.3.667",
79
+ "@micromag/element-scroll": "^0.3.667",
80
+ "@micromag/element-text": "^0.3.667",
81
+ "@micromag/element-urbania-author": "^0.3.667",
82
+ "@micromag/element-visual": "^0.3.667",
83
+ "@micromag/transforms": "^0.3.667",
84
84
  "@react-spring/core": "^9.6.1",
85
85
  "@react-spring/web": "^9.6.1",
86
86
  "@use-gesture/react": "^10.3.0",
@@ -95,5 +95,5 @@
95
95
  "access": "public",
96
96
  "registry": "https://registry.npmjs.org/"
97
97
  },
98
- "gitHead": "7bb0a6ff3488b29b413b4614c774edc7ca1540f7"
98
+ "gitHead": "8974de0b7dbe3ab5d632d0449b7a25ee20336a1c"
99
99
  }