@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.
Files changed (13) hide show
  1. package/es/ListItem/ListItem.js +37 -58
  2. package/es/ListItem/ListItem.module.css +0 -12
  3. package/es/ListItem/ListItemWithAvatar.js +53 -74
  4. package/es/ListItem/ListItemWithCheckBox.js +33 -54
  5. package/es/ListItem/ListItemWithIcon.js +45 -66
  6. package/es/ListItem/ListItemWithRadio.js +34 -55
  7. package/lib/ListItem/ListItem.js +37 -58
  8. package/lib/ListItem/ListItem.module.css +0 -12
  9. package/lib/ListItem/ListItemWithAvatar.js +53 -74
  10. package/lib/ListItem/ListItemWithCheckBox.js +33 -54
  11. package/lib/ListItem/ListItemWithIcon.js +45 -66
  12. package/lib/ListItem/ListItemWithRadio.js +34 -55
  13. package/package.json +1 -1
package/es/ListItem/ListItem.js CHANGED
@@ -8,7 +8,6 @@ import ListContainer from './ListContainer';
8
8
  /**** Components ****/
9
9
 
10
10
  import Icon from '@zohodesk/icons/lib/Icon';
11
- import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
12
11
  /**** CSS ****/
13
12
 
14
13
  import style from './ListItem.module.css';
@@ -18,7 +17,6 @@ export default class ListItem extends React.Component {
18
17
  this.handleClick = this.handleClick.bind(this);
19
18
  this.getRef = this.getRef.bind(this);
20
19
  this.handleMouseEnter = this.handleMouseEnter.bind(this);
21
- this.responsiveFunc = this.responsiveFunc.bind(this);
22
20
  }
23
21
 
24
22
  getRef(ele) {
@@ -51,17 +49,6 @@ export default class ListItem extends React.Component {
51
49
  onMouseEnter && onMouseEnter(id, value, index, e);
52
50
  }
53
51
 
54
- responsiveFunc(_ref) {
55
- let {
56
- mediaQueryOR
57
- } = _ref;
58
- return {
59
- mobileToTab: mediaQueryOR([{
60
- maxWidth: 700
61
- }])
62
- };
63
- }
64
-
65
52
  render() {
66
53
  let {
67
54
  size,
@@ -97,51 +84,43 @@ export default class ListItem extends React.Component {
97
84
  } = a11y;
98
85
  let tickIconPalette = style[`${palette}Tick`] ? style[`${palette}Tick`] : '';
99
86
  let dataIdString = dataId ? dataId : value ? String(value).replace("'", '_') : 'listItem';
100
- return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
101
- query: this.responsiveFunc,
102
- responsiveId: "Helmet"
103
- }, _ref2 => {
104
- let {
105
- mobileToTab
106
- } = _ref2;
107
- return /*#__PURE__*/React.createElement(ListContainer, _extends({
108
- a11y: a11y,
109
- size: size,
110
- palette: palette,
111
- highlight: highlight,
112
- isDisabled: isDisabled,
113
- active: active,
114
- autoHover: autoHover,
115
- needTick: needTick,
116
- needBorder: needBorder,
117
- customClass: `${customListItem} ${mobileToTab && style.responsiveHeight}`,
118
- dataId: dataIdString,
119
- isLink: isLink,
120
- href: href,
121
- target: target,
122
- disableTitle: disableTitle,
123
- title: title,
124
- onClick: this.handleClick,
125
- onMouseEnter: this.handleMouseEnter,
126
- eleRef: this.getRef,
127
- customProps: ListItemProps
128
- }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
129
- shrink: true,
130
- adjust: true,
131
- className: style.value
132
- }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
133
- shrink: true,
134
- adjust: true,
135
- className: style.children
136
- }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
137
- className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
138
- "aria-hidden": ariaHidden,
139
- dataId: `${dataIdString}_tickIcon`
140
- }, /*#__PURE__*/React.createElement(Icon, {
141
- name: "ZD-ticknew",
142
- size: "8"
143
- })) : null);
144
- });
87
+ return /*#__PURE__*/React.createElement(ListContainer, _extends({
88
+ a11y: a11y,
89
+ size: size,
90
+ palette: palette,
91
+ highlight: highlight,
92
+ isDisabled: isDisabled,
93
+ active: active,
94
+ autoHover: autoHover,
95
+ needTick: needTick,
96
+ needBorder: needBorder,
97
+ customClass: customListItem,
98
+ dataId: dataIdString,
99
+ isLink: isLink,
100
+ href: href,
101
+ target: target,
102
+ disableTitle: disableTitle,
103
+ title: title,
104
+ onClick: this.handleClick,
105
+ onMouseEnter: this.handleMouseEnter,
106
+ eleRef: this.getRef,
107
+ customProps: ListItemProps
108
+ }, ContainerProps), value ? /*#__PURE__*/React.createElement(Box, {
109
+ shrink: true,
110
+ adjust: true,
111
+ className: style.value
112
+ }, value) : null, children ? /*#__PURE__*/React.createElement(Box, {
113
+ shrink: true,
114
+ adjust: true,
115
+ className: style.children
116
+ }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
117
+ className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
118
+ "aria-hidden": ariaHidden,
119
+ dataId: `${dataIdString}_tickIcon`
120
+ }, /*#__PURE__*/React.createElement(Icon, {
121
+ name: "ZD-ticknew",
122
+ size: "8"
123
+ })) : null);
145
124
  }
146
125
 
147
126
  }
package/es/ListItem/ListItem.module.css CHANGED
@@ -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';
package/es/ListItem/ListItemWithAvatar.js CHANGED
@@ -10,7 +10,6 @@ import ListContainer from './ListContainer';
10
10
  import Avatar from '../Avatar/Avatar';
11
11
  import AvatarTeam from '../AvatarTeam/AvatarTeam';
12
12
  import Icon from '@zohodesk/icons/lib/Icon';
13
- import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
14
13
  /**** CSS ****/
15
14
 
16
15
  import style from './ListItem.module.css';
@@ -20,7 +19,6 @@ export default class ListItemWithAvatar extends React.PureComponent {
20
19
  this.handleClick = this.handleClick.bind(this);
21
20
  this.getRef = this.getRef.bind(this);
22
21
  this.handleMouseEnter = this.handleMouseEnter.bind(this);
23
- this.responsiveFunc = this.responsiveFunc.bind(this);
24
22
  }
25
23
 
26
24
  getRef(ele) {
@@ -53,17 +51,6 @@ export default class ListItemWithAvatar extends React.PureComponent {
53
51
  onMouseEnter && onMouseEnter(id, value, index, e);
54
52
  }
55
53
 
56
- responsiveFunc(_ref) {
57
- let {
58
- mediaQueryOR
59
- } = _ref;
60
- return {
61
- mobileToTab: mediaQueryOR([{
62
- maxWidth: 700
63
- }])
64
- };
65
- }
66
-
67
54
  render() {
68
55
  let {
69
56
  size,
@@ -102,67 +89,59 @@ export default class ListItemWithAvatar extends React.PureComponent {
102
89
  } = a11y;
103
90
  let isDarkPalette = palette === 'dark';
104
91
  let dataIdString = value ? value : dataId;
105
- return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
106
- query: this.responsiveFunc,
107
- responsiveId: "Helmet"
108
- }, _ref2 => {
109
- let {
110
- mobileToTab
111
- } = _ref2;
112
- return /*#__PURE__*/React.createElement(ListContainer, _extends({
113
- a11y: a11y,
114
- size: size,
115
- palette: palette,
116
- highlight: highlight,
117
- isDisabled: isDisabled,
118
- active: active,
119
- autoHover: autoHover,
120
- needTick: needTick,
121
- needBorder: needBorder,
122
- customClass: `${customListItem} ${mobileToTab && style.responsiveHeight}`,
123
- dataId: `${dataIdString}_ListItemWithAvatar`,
124
- onClick: this.handleClick,
125
- onMouseEnter: this.handleMouseEnter,
126
- eleRef: this.getRef,
127
- disableTitle: disableTitle,
128
- title: null,
129
- customProps: ListItemProps
130
- }, ContainerProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
131
- className: style.leftAvatar
132
- }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
133
- name: name,
134
- size: "small",
135
- src: imgSrc,
136
- needTitle: needAvatarTitle,
137
- textPalette: isDarkPalette ? 'white' : '',
138
- palette: isDarkPalette ? 'info' : avatarPalette,
139
- customClass: {
140
- customAvatar: customAvatar,
141
- customAvatarTeam: customAvatarTeam
142
- }
143
- }) : /*#__PURE__*/React.createElement(Avatar, {
144
- name: name,
145
- size: "small",
146
- src: imgSrc,
147
- initial: initial,
148
- textPalette: isDarkPalette ? 'white' : '',
149
- needTitle: needAvatarTitle,
150
- palette: isDarkPalette ? 'info' : avatarPalette,
151
- customClass: customAvatar
152
- })) : null, value ? /*#__PURE__*/React.createElement(Box, {
153
- flexible: true,
154
- shrink: true,
155
- "data-title": isDisabled ? null : title,
156
- className: style.value
157
- }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
158
- className: style.tickIcon,
159
- "aria-hidden": ariaHidden,
160
- dataId: `${dataIdString}_tickIcon`
161
- }, /*#__PURE__*/React.createElement(Icon, {
162
- name: "ZD-ticknew",
163
- size: "8"
164
- })) : null);
165
- });
92
+ return /*#__PURE__*/React.createElement(ListContainer, _extends({
93
+ a11y: a11y,
94
+ size: size,
95
+ palette: palette,
96
+ highlight: highlight,
97
+ isDisabled: isDisabled,
98
+ active: active,
99
+ autoHover: autoHover,
100
+ needTick: needTick,
101
+ needBorder: needBorder,
102
+ customClass: customListItem,
103
+ dataId: `${dataIdString}_ListItemWithAvatar`,
104
+ onClick: this.handleClick,
105
+ onMouseEnter: this.handleMouseEnter,
106
+ eleRef: this.getRef,
107
+ disableTitle: disableTitle,
108
+ title: null,
109
+ customProps: ListItemProps
110
+ }, ContainerProps), name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
111
+ className: style.leftAvatar
112
+ }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
113
+ name: name,
114
+ size: "small",
115
+ src: imgSrc,
116
+ needTitle: needAvatarTitle,
117
+ textPalette: isDarkPalette ? 'white' : '',
118
+ palette: isDarkPalette ? 'info' : avatarPalette,
119
+ customClass: {
120
+ customAvatar: customAvatar,
121
+ customAvatarTeam: customAvatarTeam
122
+ }
123
+ }) : /*#__PURE__*/React.createElement(Avatar, {
124
+ name: name,
125
+ size: "small",
126
+ src: imgSrc,
127
+ initial: initial,
128
+ textPalette: isDarkPalette ? 'white' : '',
129
+ needTitle: needAvatarTitle,
130
+ palette: isDarkPalette ? 'info' : avatarPalette,
131
+ customClass: customAvatar
132
+ })) : null, value ? /*#__PURE__*/React.createElement(Box, {
133
+ flexible: true,
134
+ shrink: true,
135
+ "data-title": isDisabled ? null : title,
136
+ className: style.value
137
+ }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
138
+ className: style.tickIcon,
139
+ "aria-hidden": ariaHidden,
140
+ dataId: `${dataIdString}_tickIcon`
141
+ }, /*#__PURE__*/React.createElement(Icon, {
142
+ name: "ZD-ticknew",
143
+ size: "8"
144
+ })) : null);
166
145
  }
167
146
 
168
147
  }
package/es/ListItem/ListItemWithCheckBox.js CHANGED
@@ -6,14 +6,12 @@ import ListContainer from './ListContainer';
6
6
  import CheckBox from '../CheckBox/CheckBox';
7
7
  import { Box } from '../Layout';
8
8
  import style from './ListItem.module.css';
9
- import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
10
9
  export default class ListItemWithCheckBox 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 ListItemWithCheckBox 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,
@@ -82,47 +69,39 @@ export default class ListItemWithCheckBox extends React.Component {
82
69
  customCheckBox = '',
83
70
  customLabel = ''
84
71
  } = customClass;
85
- return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
86
- query: this.responsiveFunc,
87
- responsiveId: "Helmet"
88
- }, _ref2 => {
89
- let {
90
- mobileToTab
91
- } = _ref2;
92
- return /*#__PURE__*/React.createElement(ListContainer, _extends({
93
- a11y: a11y,
94
- size: size,
95
- palette: palette,
96
- highlight: highlight,
97
- isDisabled: isDisabled,
98
- active: active,
99
- autoHover: autoHover,
100
- customClass: `${customListItem} ${mobileToTab && style.responsiveHeight}`,
101
- dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
102
- onClick: this.onClick,
103
- onMouseOver: this.onHover,
104
- eleRef: this.getRef,
105
- disableTitle: disableTitle,
106
- title: null,
107
- customProps: ListItemProps
108
- }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
109
- className: style.iconBox
110
- }, /*#__PURE__*/React.createElement(CheckBox, {
111
- checked: checked,
112
- a11y: {
113
- ariaHidden: true
114
- },
115
- customClass: {
116
- customCheckBox: customCheckBox,
117
- customLabel: customLabel
118
- }
119
- })), /*#__PURE__*/React.createElement(Box, {
120
- flexible: true,
121
- shrink: true,
122
- "data-title": isDisabled ? null : title,
123
- className: style.value
124
- }, value));
125
- });
72
+ return /*#__PURE__*/React.createElement(ListContainer, _extends({
73
+ a11y: a11y,
74
+ size: size,
75
+ palette: palette,
76
+ highlight: highlight,
77
+ isDisabled: isDisabled,
78
+ active: active,
79
+ autoHover: autoHover,
80
+ customClass: customListItem,
81
+ dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
82
+ onClick: this.onClick,
83
+ onMouseOver: this.onHover,
84
+ eleRef: this.getRef,
85
+ disableTitle: disableTitle,
86
+ title: null,
87
+ customProps: ListItemProps
88
+ }, ContainerProps), /*#__PURE__*/React.createElement(Box, {
89
+ className: style.iconBox
90
+ }, /*#__PURE__*/React.createElement(CheckBox, {
91
+ checked: checked,
92
+ a11y: {
93
+ ariaHidden: true
94
+ },
95
+ customClass: {
96
+ customCheckBox: customCheckBox,
97
+ customLabel: customLabel
98
+ }
99
+ })), /*#__PURE__*/React.createElement(Box, {
100
+ flexible: true,
101
+ shrink: true,
102
+ "data-title": isDisabled ? null : title,
103
+ className: style.value
104
+ }, value));
126
105
  }
127
106
 
128
107
  }
package/es/ListItem/ListItemWithIcon.js CHANGED
@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
6
6
  import { Box } from '../Layout';
7
7
  import Icon from '@zohodesk/icons/lib/Icon';
8
8
  import ListContainer from './ListContainer';
9
- import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
10
9
  /**** CSS ****/
11
10
 
12
11
  import style from './ListItem.module.css';
@@ -16,7 +15,6 @@ export default class ListItemWithIcon extends React.Component {
16
15
  this.handleClick = this.handleClick.bind(this);
17
16
  this.getRef = this.getRef.bind(this);
18
17
  this.handleMouseEnter = this.handleMouseEnter.bind(this);
19
- this.responsiveFunc = this.responsiveFunc.bind(this);
20
18
  }
21
19
 
22
20
  getRef(ele) {
@@ -49,17 +47,6 @@ export default class ListItemWithIcon extends React.Component {
49
47
  onMouseEnter && onMouseEnter(id, value, index, e);
50
48
  }
51
49
 
52
- responsiveFunc(_ref) {
53
- let {
54
- mediaQueryOR
55
- } = _ref;
56
- return {
57
- mobileToTab: mediaQueryOR([{
58
- maxWidth: 700
59
- }])
60
- };
61
- }
62
-
63
50
  render() {
64
51
  let {
65
52
  size,
@@ -92,59 +79,51 @@ export default class ListItemWithIcon extends React.Component {
92
79
  ariaHidden = true
93
80
  } = a11y;
94
81
  let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
95
- return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
96
- query: this.responsiveFunc,
97
- responsiveId: "Helmet"
98
- }, _ref2 => {
99
- let {
100
- mobileToTab
101
- } = _ref2;
102
- return /*#__PURE__*/React.createElement(ListContainer, _extends({
103
- a11y: a11y,
104
- size: size,
105
- palette: palette,
106
- highlight: highlight,
107
- isDisabled: isDisabled,
108
- active: active,
109
- autoHover: autoHover,
110
- needTick: needTick,
111
- needBorder: needBorder,
112
- customClass: `${customListItem} ${mobileToTab && style.responsiveHeight}`,
113
- dataId: dataIdString,
114
- isLink: isLink,
115
- href: href,
116
- target: target,
117
- onClick: this.handleClick,
118
- onMouseOver: this.handleMouseEnter,
119
- eleRef: this.getRef,
120
- disableTitle: disableTitle,
121
- title: null,
122
- customProps: ListItemProps
123
- }, ContainerProps), iconName && /*#__PURE__*/React.createElement(Box, {
124
- "aria-hidden": true,
125
- className: style.iconBox,
126
- dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
127
- }, /*#__PURE__*/React.createElement(Icon, {
128
- iconClass: iconClass,
129
- name: iconName,
130
- size: iconSize
131
- })), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
132
- className: iconClass
133
- }) : null, value && /*#__PURE__*/React.createElement(Box, {
134
- flexible: true,
135
- shrink: true,
136
- className: style.value,
137
- "data-title": isDisabled ? null : title,
138
- dataId: `${dataIdString}_Text`
139
- }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
140
- className: style.tickIcon,
141
- "aria-hidden": ariaHidden,
142
- dataId: `${dataIdString}_tickIcon`
143
- }, /*#__PURE__*/React.createElement(Icon, {
144
- name: "ZD-ticknew",
145
- size: "8"
146
- })) : null);
147
- });
82
+ return /*#__PURE__*/React.createElement(ListContainer, _extends({
83
+ a11y: a11y,
84
+ size: size,
85
+ palette: palette,
86
+ highlight: highlight,
87
+ isDisabled: isDisabled,
88
+ active: active,
89
+ autoHover: autoHover,
90
+ needTick: needTick,
91
+ needBorder: needBorder,
92
+ customClass: customClass,
93
+ dataId: dataIdString,
94
+ isLink: isLink,
95
+ href: href,
96
+ target: target,
97
+ onClick: this.handleClick,
98
+ onMouseOver: this.handleMouseEnter,
99
+ eleRef: this.getRef,
100
+ disableTitle: disableTitle,
101
+ title: null,
102
+ customProps: ListItemProps
103
+ }, ContainerProps), iconName && /*#__PURE__*/React.createElement(Box, {
104
+ "aria-hidden": true,
105
+ className: style.iconBox,
106
+ dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
107
+ }, /*#__PURE__*/React.createElement(Icon, {
108
+ iconClass: iconClass,
109
+ name: iconName,
110
+ size: iconSize
111
+ })), iconClass && !iconName ? /*#__PURE__*/React.createElement("span", {
112
+ className: iconClass
113
+ }) : null, value && /*#__PURE__*/React.createElement(Box, {
114
+ flexible: true,
115
+ shrink: true,
116
+ className: style.value,
117
+ "data-title": isDisabled ? null : title,
118
+ dataId: `${dataIdString}_Text`
119
+ }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
120
+ className: style.tickIcon,
121
+ "aria-hidden": ariaHidden,
122
+ dataId: `${dataIdString}_tickIcon`
123
+ }, /*#__PURE__*/React.createElement(Icon, {
124
+ name: "ZD-ticknew",
125
+ size: "8"
126
+ })) : null);
148
127
  }
149
128
 
150
129
  }