@zohodesk/components 1.0.0-temp-50 → 1.0.0-temp-51

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.
@@ -6,14 +6,12 @@ import Radio from '../Radio/Radio';
6
6
  import { Box } from '../Layout';
7
7
  import ListContainer from './ListContainer';
8
8
  import style from './ListItem.module.css';
9
- import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
10
9
  export default class ListItemWithRadio extends React.Component {
11
10
  constructor(props) {
12
11
  super(props);
13
12
  this.onClick = this.onClick.bind(this);
14
13
  this.getRef = this.getRef.bind(this);
15
14
  this.onHover = this.onHover.bind(this);
16
- this.responsiveFunc = this.responsiveFunc.bind(this);
17
15
  }
18
16
 
19
17
  getRef(ele) {
@@ -45,17 +43,6 @@ export default class ListItemWithRadio extends React.Component {
45
43
  onHover && onHover(id, value, index, e);
46
44
  }
47
45
 
48
- responsiveFunc(_ref) {
49
- let {
50
- mediaQueryOR
51
- } = _ref;
52
- return {
53
- mobileToTab: mediaQueryOR([{
54
- maxWidth: 700
55
- }])
56
- };
57
- }
58
-
59
46
  render() {
60
47
  let {
61
48
  size,
@@ -83,48 +70,40 @@ export default class ListItemWithRadio extends React.Component {
83
70
  customRadio = '',
84
71
  customRadioWrap = ''
85
72
  } = customClass;
86
- return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
87
- query: this.responsiveFunc,
88
- responsiveId: "Helmet"
89
- }, _ref2 => {
90
- let {
91
- mobileToTab
92
- } = _ref2;
93
- return /*#__PURE__*/React.createElement(ListContainer, _extends({
94
- a11y: a11y,
95
- size: size,
96
- palette: palette,
97
- highlight: highlight,
98
- isDisabled: isDisabled,
99
- active: active,
100
- autoHover: autoHover,
101
- customClass: `${customListItem} ${mobileToTab && style.responsiveHeight}`,
102
- dataId: dataId,
103
- onClick: this.onClick,
104
- onMouseOver: this.onHover,
105
- eleRef: this.getRef,
106
- disableTitle: disableTitle,
107
- title: null,
108
- customProps: ListItemProps
109
- }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
110
- className: style.iconBox
111
- }, /*#__PURE__*/React.createElement(Radio, {
112
- checked: checked,
113
- id: id,
114
- a11y: {
115
- ariaHidden: true
116
- },
117
- customClass: {
118
- customRadio: customRadio,
119
- customRadioWrap: customRadioWrap
120
- }
121
- })), /*#__PURE__*/React.createElement(Box, {
122
- flexible: true,
123
- shrink: true,
124
- "data-title": disableTitle ? null : title,
125
- className: style.value
126
- }, value));
127
- });
73
+ return /*#__PURE__*/React.createElement(ListContainer, _extends({
74
+ a11y: a11y,
75
+ size: size,
76
+ palette: palette,
77
+ highlight: highlight,
78
+ isDisabled: isDisabled,
79
+ active: active,
80
+ autoHover: autoHover,
81
+ customClass: customListItem,
82
+ dataId: dataId,
83
+ onClick: this.onClick,
84
+ onMouseOver: this.onHover,
85
+ eleRef: this.getRef,
86
+ disableTitle: disableTitle,
87
+ title: null,
88
+ customProps: ListItemProps
89
+ }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
90
+ className: style.iconBox
91
+ }, /*#__PURE__*/React.createElement(Radio, {
92
+ checked: checked,
93
+ id: id,
94
+ a11y: {
95
+ ariaHidden: true
96
+ },
97
+ customClass: {
98
+ customRadio: customRadio,
99
+ customRadioWrap: customRadioWrap
100
+ }
101
+ })), /*#__PURE__*/React.createElement(Box, {
102
+ flexible: true,
103
+ shrink: true,
104
+ "data-title": disableTitle ? null : title,
105
+ className: style.value
106
+ }, value));
128
107
  }
129
108
 
130
109
  }
@@ -17,8 +17,6 @@ var _ListContainer = _interopRequireDefault(require("./ListContainer"));
17
17
 
18
18
  var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
19
19
 
20
- var _CustomResponsive = require("../Responsive/CustomResponsive");
21
-
22
20
  var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
23
21
 
24
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -59,7 +57,6 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
59
57
  _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
60
58
  _this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
61
59
  _this.handleMouseEnter = _this.handleMouseEnter.bind(_assertThisInitialized(_this));
62
- _this.responsiveFunc = _this.responsiveFunc.bind(_assertThisInitialized(_this));
63
60
  return _this;
64
61
  }
65
62
 
@@ -93,21 +90,9 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
93
90
  index = _this$props3.index;
94
91
  onMouseEnter && onMouseEnter(id, value, index, e);
95
92
  }
96
- }, {
97
- key: "responsiveFunc",
98
- value: function responsiveFunc(_ref) {
99
- var mediaQueryOR = _ref.mediaQueryOR;
100
- return {
101
- mobileToTab: mediaQueryOR([{
102
- maxWidth: 700
103
- }])
104
- };
105
- }
106
93
  }, {
107
94
  key: "render",
108
95
  value: function render() {
109
- var _this2 = this;
110
-
111
96
  var _this$props4 = this.props,
112
97
  size = _this$props4.size,
113
98
  active = _this$props4.active,
@@ -140,49 +125,43 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
140
125
  ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
141
126
  var tickIconPalette = _ListItemModule["default"]["".concat(palette, "Tick")] ? _ListItemModule["default"]["".concat(palette, "Tick")] : '';
142
127
  var dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
143
- return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
144
- query: this.responsiveFunc,
145
- responsiveId: "Helmet"
146
- }, function (_ref2) {
147
- var mobileToTab = _ref2.mobileToTab;
148
- return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
149
- a11y: a11y,
150
- size: size,
151
- palette: palette,
152
- highlight: highlight,
153
- isDisabled: isDisabled,
154
- active: active,
155
- autoHover: autoHover,
156
- needTick: needTick,
157
- needBorder: needBorder,
158
- customClass: "".concat(customListItem, " ").concat(mobileToTab && _ListItemModule["default"].responsiveHeight),
159
- dataId: dataIdString,
160
- isLink: isLink,
161
- href: href,
162
- target: target,
163
- disableTitle: disableTitle,
164
- title: title,
165
- onClick: _this2.handleClick,
166
- onMouseEnter: _this2.handleMouseEnter,
167
- eleRef: _this2.getRef,
168
- customProps: ListItemProps
169
- }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
170
- shrink: true,
171
- adjust: true,
172
- className: _ListItemModule["default"].value
173
- }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
174
- shrink: true,
175
- adjust: true,
176
- className: _ListItemModule["default"].children
177
- }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
178
- className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
179
- "aria-hidden": ariaHidden,
180
- dataId: "".concat(dataIdString, "_tickIcon")
181
- }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
182
- name: "ZD-ticknew",
183
- size: "8"
184
- })) : null);
185
- });
128
+ return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
129
+ a11y: a11y,
130
+ size: size,
131
+ palette: palette,
132
+ highlight: highlight,
133
+ isDisabled: isDisabled,
134
+ active: active,
135
+ autoHover: autoHover,
136
+ needTick: needTick,
137
+ needBorder: needBorder,
138
+ customClass: customListItem,
139
+ dataId: dataIdString,
140
+ isLink: isLink,
141
+ href: href,
142
+ target: target,
143
+ disableTitle: disableTitle,
144
+ title: title,
145
+ onClick: this.handleClick,
146
+ onMouseEnter: this.handleMouseEnter,
147
+ eleRef: this.getRef,
148
+ customProps: ListItemProps
149
+ }, ContainerProps), value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
150
+ shrink: true,
151
+ adjust: true,
152
+ className: _ListItemModule["default"].value
153
+ }, value) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
154
+ shrink: true,
155
+ adjust: true,
156
+ className: _ListItemModule["default"].children
157
+ }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
158
+ className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
159
+ "aria-hidden": ariaHidden,
160
+ dataId: "".concat(dataIdString, "_tickIcon")
161
+ }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
162
+ name: "ZD-ticknew",
163
+ size: "8"
164
+ })) : null);
186
165
  }
187
166
  }]);
188
167
 
@@ -70,18 +70,6 @@
70
70
  [dir=rtl] .large {
71
71
  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
72
72
  }
73
- .responsiveHeight {
74
- --listitem_height: var(--zd_size45);
75
- }
76
- [dir=ltr] .responsiveHeight {
77
- --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
78
- var(--zd_size20)
79
- /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
80
- }
81
- [dir=rtl] .responsiveHeight {
82
- --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
83
- }
84
-
85
73
  .value,
86
74
  .children {
87
75
  composes: dotted from '../common/common.module.css';
@@ -21,8 +21,6 @@ var _AvatarTeam = _interopRequireDefault(require("../AvatarTeam/AvatarTeam"));
21
21
 
22
22
  var _Icon = _interopRequireDefault(require("@zohodesk/icons/lib/Icon"));
23
23
 
24
- var _CustomResponsive = require("../Responsive/CustomResponsive");
25
-
26
24
  var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
27
25
 
28
26
  var _ListItemWithAvatar$p;
@@ -67,7 +65,6 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
67
65
  _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
68
66
  _this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
69
67
  _this.handleMouseEnter = _this.handleMouseEnter.bind(_assertThisInitialized(_this));
70
- _this.responsiveFunc = _this.responsiveFunc.bind(_assertThisInitialized(_this));
71
68
  return _this;
72
69
  }
73
70
 
@@ -101,21 +98,9 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
101
98
  index = _this$props3.index;
102
99
  onMouseEnter && onMouseEnter(id, value, index, e);
103
100
  }
104
- }, {
105
- key: "responsiveFunc",
106
- value: function responsiveFunc(_ref) {
107
- var mediaQueryOR = _ref.mediaQueryOR;
108
- return {
109
- mobileToTab: mediaQueryOR([{
110
- maxWidth: 700
111
- }])
112
- };
113
- }
114
101
  }, {
115
102
  key: "render",
116
103
  value: function render() {
117
- var _this2 = this;
118
-
119
104
  var _this$props4 = this.props,
120
105
  size = _this$props4.size,
121
106
  active = _this$props4.active,
@@ -152,65 +137,59 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
152
137
  ariaHidden = _a11y$ariaHidden === void 0 ? true : _a11y$ariaHidden;
153
138
  var isDarkPalette = palette === 'dark';
154
139
  var dataIdString = value ? value : dataId;
155
- return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
156
- query: this.responsiveFunc,
157
- responsiveId: "Helmet"
158
- }, function (_ref2) {
159
- var mobileToTab = _ref2.mobileToTab;
160
- return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
161
- a11y: a11y,
162
- size: size,
163
- palette: palette,
164
- highlight: highlight,
165
- isDisabled: isDisabled,
166
- active: active,
167
- autoHover: autoHover,
168
- needTick: needTick,
169
- needBorder: needBorder,
170
- customClass: "".concat(customListItem, " ").concat(mobileToTab && _ListItemModule["default"].responsiveHeight),
171
- dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
172
- onClick: _this2.handleClick,
173
- onMouseEnter: _this2.handleMouseEnter,
174
- eleRef: _this2.getRef,
175
- disableTitle: disableTitle,
176
- title: null,
177
- customProps: ListItemProps
178
- }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
179
- className: _ListItemModule["default"].leftAvatar
180
- }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
181
- name: name,
182
- size: "small",
183
- src: imgSrc,
184
- needTitle: needAvatarTitle,
185
- textPalette: isDarkPalette ? 'white' : '',
186
- palette: isDarkPalette ? 'info' : avatarPalette,
187
- customClass: {
188
- customAvatar: customAvatar,
189
- customAvatarTeam: customAvatarTeam
190
- }
191
- }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
192
- name: name,
193
- size: "small",
194
- src: imgSrc,
195
- initial: initial,
196
- textPalette: isDarkPalette ? 'white' : '',
197
- needTitle: needAvatarTitle,
198
- palette: isDarkPalette ? 'info' : avatarPalette,
199
- customClass: customAvatar
200
- })) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
201
- flexible: true,
202
- shrink: true,
203
- "data-title": isDisabled ? null : title,
204
- className: _ListItemModule["default"].value
205
- }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
206
- className: _ListItemModule["default"].tickIcon,
207
- "aria-hidden": ariaHidden,
208
- dataId: "".concat(dataIdString, "_tickIcon")
209
- }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
210
- name: "ZD-ticknew",
211
- size: "8"
212
- })) : null);
213
- });
140
+ return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
141
+ a11y: a11y,
142
+ size: size,
143
+ palette: palette,
144
+ highlight: highlight,
145
+ isDisabled: isDisabled,
146
+ active: active,
147
+ autoHover: autoHover,
148
+ needTick: needTick,
149
+ needBorder: needBorder,
150
+ customClass: customListItem,
151
+ dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
152
+ onClick: this.handleClick,
153
+ onMouseEnter: this.handleMouseEnter,
154
+ eleRef: this.getRef,
155
+ disableTitle: disableTitle,
156
+ title: null,
157
+ customProps: ListItemProps
158
+ }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
159
+ className: _ListItemModule["default"].leftAvatar
160
+ }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
161
+ name: name,
162
+ size: "small",
163
+ src: imgSrc,
164
+ needTitle: needAvatarTitle,
165
+ textPalette: isDarkPalette ? 'white' : '',
166
+ palette: isDarkPalette ? 'info' : avatarPalette,
167
+ customClass: {
168
+ customAvatar: customAvatar,
169
+ customAvatarTeam: customAvatarTeam
170
+ }
171
+ }) : /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
172
+ name: name,
173
+ size: "small",
174
+ src: imgSrc,
175
+ initial: initial,
176
+ textPalette: isDarkPalette ? 'white' : '',
177
+ needTitle: needAvatarTitle,
178
+ palette: isDarkPalette ? 'info' : avatarPalette,
179
+ customClass: customAvatar
180
+ })) : null, value ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
181
+ flexible: true,
182
+ shrink: true,
183
+ "data-title": isDisabled ? null : title,
184
+ className: _ListItemModule["default"].value
185
+ }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
186
+ className: _ListItemModule["default"].tickIcon,
187
+ "aria-hidden": ariaHidden,
188
+ dataId: "".concat(dataIdString, "_tickIcon")
189
+ }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
190
+ name: "ZD-ticknew",
191
+ size: "8"
192
+ })) : null);
214
193
  }
215
194
  }]);
216
195
 
@@ -19,8 +19,6 @@ var _Layout = require("../Layout");
19
19
 
20
20
  var _ListItemModule = _interopRequireDefault(require("./ListItem.module.css"));
21
21
 
22
- var _CustomResponsive = require("../Responsive/CustomResponsive");
23
-
24
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
25
23
 
26
24
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -59,7 +57,6 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
59
57
  _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
60
58
  _this.getRef = _this.getRef.bind(_assertThisInitialized(_this));
61
59
  _this.onHover = _this.onHover.bind(_assertThisInitialized(_this));
62
- _this.responsiveFunc = _this.responsiveFunc.bind(_assertThisInitialized(_this));
63
60
  return _this;
64
61
  }
65
62
 
@@ -92,21 +89,9 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
92
89
  index = _this$props3.index;
93
90
  onHover && onHover(id, value, index, e);
94
91
  }
95
- }, {
96
- key: "responsiveFunc",
97
- value: function responsiveFunc(_ref) {
98
- var mediaQueryOR = _ref.mediaQueryOR;
99
- return {
100
- mobileToTab: mediaQueryOR([{
101
- maxWidth: 700
102
- }])
103
- };
104
- }
105
92
  }, {
106
93
  key: "render",
107
94
  value: function render() {
108
- var _this2 = this;
109
-
110
95
  var _this$props4 = this.props,
111
96
  size = _this$props4.size,
112
97
  active = _this$props4.active,
@@ -132,45 +117,39 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
132
117
  customCheckBox = _customClass$customCh === void 0 ? '' : _customClass$customCh,
133
118
  _customClass$customLa = customClass.customLabel,
134
119
  customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
135
- return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
136
- query: this.responsiveFunc,
137
- responsiveId: "Helmet"
138
- }, function (_ref2) {
139
- var mobileToTab = _ref2.mobileToTab;
140
- return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
141
- a11y: a11y,
142
- size: size,
143
- palette: palette,
144
- highlight: highlight,
145
- isDisabled: isDisabled,
146
- active: active,
147
- autoHover: autoHover,
148
- customClass: "".concat(customListItem, " ").concat(mobileToTab && _ListItemModule["default"].responsiveHeight),
149
- dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
150
- onClick: _this2.onClick,
151
- onMouseOver: _this2.onHover,
152
- eleRef: _this2.getRef,
153
- disableTitle: disableTitle,
154
- title: null,
155
- customProps: ListItemProps
156
- }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
157
- className: _ListItemModule["default"].iconBox
158
- }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
159
- checked: checked,
160
- a11y: {
161
- ariaHidden: true
162
- },
163
- customClass: {
164
- customCheckBox: customCheckBox,
165
- customLabel: customLabel
166
- }
167
- })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
168
- flexible: true,
169
- shrink: true,
170
- "data-title": isDisabled ? null : title,
171
- className: _ListItemModule["default"].value
172
- }, value));
173
- });
120
+ return /*#__PURE__*/_react["default"].createElement(_ListContainer["default"], _extends({
121
+ a11y: a11y,
122
+ size: size,
123
+ palette: palette,
124
+ highlight: highlight,
125
+ isDisabled: isDisabled,
126
+ active: active,
127
+ autoHover: autoHover,
128
+ customClass: customListItem,
129
+ dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
130
+ onClick: this.onClick,
131
+ onMouseOver: this.onHover,
132
+ eleRef: this.getRef,
133
+ disableTitle: disableTitle,
134
+ title: null,
135
+ customProps: ListItemProps
136
+ }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
137
+ className: _ListItemModule["default"].iconBox
138
+ }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
139
+ checked: checked,
140
+ a11y: {
141
+ ariaHidden: true
142
+ },
143
+ customClass: {
144
+ customCheckBox: customCheckBox,
145
+ customLabel: customLabel
146
+ }
147
+ })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
148
+ flexible: true,
149
+ shrink: true,
150
+ "data-title": isDisabled ? null : title,
151
+ className: _ListItemModule["default"].value
152
+ }, value));
174
153
  }
175
154
  }]);
176
155