@zohodesk/components 1.0.0-alpha-225 → 1.0.0-alpha-226

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 (234) hide show
  1. package/README.md +4 -0
  2. package/es/ListItem/ListContainer.js +123 -0
  3. package/es/ListItem/ListItem.js +23 -31
  4. package/es/ListItem/ListItemWithAvatar.js +21 -27
  5. package/es/ListItem/ListItemWithCheckBox.js +23 -29
  6. package/es/ListItem/ListItemWithIcon.js +26 -26
  7. package/es/ListItem/ListItemWithRadio.js +24 -31
  8. package/lib/ListItem/ListContainer.js +132 -0
  9. package/lib/ListItem/ListItem.js +25 -32
  10. package/lib/ListItem/ListItemWithAvatar.js +23 -28
  11. package/lib/ListItem/ListItemWithCheckBox.js +24 -27
  12. package/lib/ListItem/ListItemWithIcon.js +27 -26
  13. package/lib/ListItem/ListItemWithRadio.js +26 -27
  14. package/package.json +3 -3
  15. package/README_Beta.md +0 -2
  16. package/__testUtils__/globals.js +0 -46
  17. package/__testUtils__/moduleMapKey.json +0 -138
  18. package/dubFinder.js +0 -96
  19. package/es/Accordion/docs/Accordion__Demo.docs.js +0 -80
  20. package/es/Animation/docs/Animation__default.docs.js +0 -34
  21. package/es/Animation/docs/Animation__fadeIn.docs.js +0 -34
  22. package/es/Animation/docs/Animation__scaleIn.docs.js +0 -34
  23. package/es/Animation/docs/Animation__skewIn.docs.js +0 -34
  24. package/es/Animation/docs/Animation__slideDown.docs.js +0 -34
  25. package/es/Animation/docs/Animation__slideLeft.docs.js +0 -34
  26. package/es/Animation/docs/Animation__zoomIn.docs.js +0 -34
  27. package/es/AppContainer/docs/AppContainer__default.docs.js +0 -20
  28. package/es/Avatar/docs/Avatar__custom.docs.js +0 -29
  29. package/es/Avatar/docs/Avatar__default.docs.js +0 -29
  30. package/es/Avatar/docs/Avatar__palette.docs.js +0 -49
  31. package/es/Avatar/docs/Avatar__text.docs.js +0 -28
  32. package/es/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -73
  33. package/es/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -31
  34. package/es/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -50
  35. package/es/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -49
  36. package/es/Button/docs/Button__custom.docs.js +0 -771
  37. package/es/Button/docs/Button__default.docs.js +0 -536
  38. package/es/Buttongroup/docs/Buttongroup__custom.docs.js +0 -37
  39. package/es/Buttongroup/docs/Buttongroup__footer.docs.js +0 -33
  40. package/es/Buttongroup/docs/Buttongroup__header.docs.js +0 -42
  41. package/es/Card/docs/Card__Custom.docs.js +0 -34
  42. package/es/Card/docs/Card__Default.docs.js +0 -37
  43. package/es/Card/docs/Card__Scroll.docs.js +0 -59
  44. package/es/CheckBox/docs/CheckBox__custom.docs.js +0 -293
  45. package/es/CheckBox/docs/CheckBox__default.docs.js +0 -219
  46. package/es/DateTime/docs/DateTime__default.docs.js +0 -91
  47. package/es/DateTime/docs/DateWidget__default.docs.js +0 -183
  48. package/es/DateTime/docs/timezonedata.json +0 -1
  49. package/es/DropBox/docs/DropBox__custom.docs.js +0 -66
  50. package/es/DropBox/docs/DropBox__customOrder.docs.js +0 -92
  51. package/es/DropBox/docs/DropBox__fixedPosition.docs.js +0 -91
  52. package/es/DropBox/docs/DropBox__position.docs.js +0 -87
  53. package/es/DropBox/docs/DropBox__size.docs.js +0 -61
  54. package/es/DropDown/docs/DropDownHeading__custom.docs.js +0 -23
  55. package/es/DropDown/docs/DropDownHeading__default.docs.js +0 -21
  56. package/es/Label/docs/Label__clipped.docs.js +0 -27
  57. package/es/Label/docs/Label__custom.docs.js +0 -30
  58. package/es/Label/docs/Label__palette.docs.js +0 -42
  59. package/es/Label/docs/Label__size.docs.js +0 -29
  60. package/es/Label/docs/Label__type.docs.js +0 -37
  61. package/es/Layout/docs/Layout__Hidden.docs.js +0 -77
  62. package/es/Layout/docs/Layout__default.docs.js +0 -49
  63. package/es/Layout/docs/Layout__four_Column.docs.js +0 -85
  64. package/es/Layout/docs/Layout__three_Column.docs.js +0 -76
  65. package/es/Layout/docs/Layout__two_Column.docs.js +0 -69
  66. package/es/LightNightMode/docs/AlternativeColors.docs.js +0 -74
  67. package/es/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -155
  68. package/es/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -112
  69. package/es/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -91
  70. package/es/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -65
  71. package/es/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -68
  72. package/es/ListItem/docs/ListItemWithIcon__default.docs.js +0 -62
  73. package/es/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -91
  74. package/es/ListItem/docs/ListItemWithRadio__default.docs.js +0 -65
  75. package/es/ListItem/docs/ListItem__custom.docs.js +0 -114
  76. package/es/ListItem/docs/ListItem__default.docs.js +0 -82
  77. package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -125
  78. package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +0 -114
  79. package/es/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +0 -141
  80. package/es/MultiSelect/docs/MultiSelect__default.docs.js +0 -161
  81. package/es/PopOver/docs/PopOver__default.docs.js +0 -32
  82. package/es/Provider/docs/Provider_Id__Class.docs.js +0 -29
  83. package/es/Provider/docs/Provider_Id__Function.docs.js +0 -18
  84. package/es/Provider/docs/Provider_Zindex__Class.docs.js +0 -32
  85. package/es/Provider/docs/Provider_Zindex__Function.docs.js +0 -23
  86. package/es/Radio/docs/Radio__custom.docs.js +0 -245
  87. package/es/Radio/docs/Radio__default.docs.js +0 -169
  88. package/es/Responsive/docs/Responsive__Custom.docs.js +0 -206
  89. package/es/Responsive/docs/Responsive__default.docs.js +0 -97
  90. package/es/Responsive/docs/style.module.css +0 -56
  91. package/es/Ribbon/docs/Ribbon__custom.docs.js +0 -386
  92. package/es/Ribbon/docs/Ribbon__default.docs.js +0 -342
  93. package/es/RippleEffect/docs/RippleEffect__default.docs.js +0 -435
  94. package/es/Select/docs/GroupSelect__default.docs.js +0 -149
  95. package/es/Select/docs/SelectWithAvatar__default.docs.js +0 -97
  96. package/es/Select/docs/SelectWithIcon__default.docs.js +0 -138
  97. package/es/Select/docs/Select__default.docs.js +0 -288
  98. package/es/Stencils/docs/Stencils__custom.docs.js +0 -45
  99. package/es/Stencils/docs/Stencils__default.docs.js +0 -50
  100. package/es/Switch/docs/Switch__custom.docs.js +0 -153
  101. package/es/Switch/docs/Switch__default.docs.js +0 -107
  102. package/es/Tab/docs/Tab__default.docs.js +0 -258
  103. package/es/Tab/docs/tabdocs.module.css +0 -29
  104. package/es/Tag/docs/Tag__custom.docs.js +0 -368
  105. package/es/Tag/docs/Tag__default.docs.js +0 -253
  106. package/es/TextBox/docs/TextBox__custom.docs.js +0 -43
  107. package/es/TextBox/docs/TextBox__default.docs.js +0 -40
  108. package/es/TextBox/docs/TextBox__size.docs.js +0 -38
  109. package/es/TextBox/docs/TextBox__variant.docs.js +0 -38
  110. package/es/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -89
  111. package/es/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -61
  112. package/es/Textarea/docs/Textarea__animated.docs.js +0 -41
  113. package/es/Textarea/docs/Textarea__custom.docs.js +0 -82
  114. package/es/Textarea/docs/Textarea__default.docs.js +0 -76
  115. package/es/Textarea/docs/Textarea__disabled.docs.js +0 -29
  116. package/es/Tooltip/docs/Tooltip__default.docs.js +0 -332
  117. package/es/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +0 -97
  118. package/es/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +0 -150
  119. package/es/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -139
  120. package/es/beta/FocusRing/docs/FocusRing__default.docs.js +0 -48
  121. package/es/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -72
  122. package/es/semantic/Button/docs/Button__default.docs.js +0 -20
  123. package/externalDocsBuild.js +0 -21
  124. package/lib/Accordion/docs/Accordion__Demo.docs.js +0 -126
  125. package/lib/Animation/docs/Animation__default.docs.js +0 -85
  126. package/lib/Animation/docs/Animation__fadeIn.docs.js +0 -85
  127. package/lib/Animation/docs/Animation__scaleIn.docs.js +0 -85
  128. package/lib/Animation/docs/Animation__skewIn.docs.js +0 -85
  129. package/lib/Animation/docs/Animation__slideDown.docs.js +0 -85
  130. package/lib/Animation/docs/Animation__slideLeft.docs.js +0 -85
  131. package/lib/Animation/docs/Animation__zoomIn.docs.js +0 -85
  132. package/lib/AppContainer/docs/AppContainer__default.docs.js +0 -70
  133. package/lib/Avatar/docs/Avatar__custom.docs.js +0 -87
  134. package/lib/Avatar/docs/Avatar__default.docs.js +0 -83
  135. package/lib/Avatar/docs/Avatar__palette.docs.js +0 -107
  136. package/lib/Avatar/docs/Avatar__text.docs.js +0 -86
  137. package/lib/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -124
  138. package/lib/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -82
  139. package/lib/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -101
  140. package/lib/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -100
  141. package/lib/Button/docs/Button__custom.docs.js +0 -826
  142. package/lib/Button/docs/Button__default.docs.js +0 -590
  143. package/lib/Buttongroup/docs/Buttongroup__custom.docs.js +0 -89
  144. package/lib/Buttongroup/docs/Buttongroup__footer.docs.js +0 -85
  145. package/lib/Buttongroup/docs/Buttongroup__header.docs.js +0 -98
  146. package/lib/Card/docs/Card__Custom.docs.js +0 -90
  147. package/lib/Card/docs/Card__Default.docs.js +0 -92
  148. package/lib/Card/docs/Card__Scroll.docs.js +0 -114
  149. package/lib/CheckBox/docs/CheckBox__custom.docs.js +0 -348
  150. package/lib/CheckBox/docs/CheckBox__default.docs.js +0 -273
  151. package/lib/DateTime/docs/DateTime__default.docs.js +0 -142
  152. package/lib/DateTime/docs/DateWidget__default.docs.js +0 -240
  153. package/lib/DateTime/docs/timezonedata.json +0 -1
  154. package/lib/DropBox/docs/DropBox__custom.docs.js +0 -122
  155. package/lib/DropBox/docs/DropBox__customOrder.docs.js +0 -141
  156. package/lib/DropBox/docs/DropBox__fixedPosition.docs.js +0 -140
  157. package/lib/DropBox/docs/DropBox__position.docs.js +0 -142
  158. package/lib/DropBox/docs/DropBox__size.docs.js +0 -116
  159. package/lib/DropDown/docs/DropDownHeading__custom.docs.js +0 -73
  160. package/lib/DropDown/docs/DropDownHeading__default.docs.js +0 -70
  161. package/lib/Label/docs/Label__clipped.docs.js +0 -81
  162. package/lib/Label/docs/Label__custom.docs.js +0 -85
  163. package/lib/Label/docs/Label__palette.docs.js +0 -96
  164. package/lib/Label/docs/Label__size.docs.js +0 -83
  165. package/lib/Label/docs/Label__type.docs.js +0 -91
  166. package/lib/Layout/docs/Layout__Hidden.docs.js +0 -127
  167. package/lib/Layout/docs/Layout__default.docs.js +0 -98
  168. package/lib/Layout/docs/Layout__four_Column.docs.js +0 -135
  169. package/lib/Layout/docs/Layout__three_Column.docs.js +0 -126
  170. package/lib/Layout/docs/Layout__two_Column.docs.js +0 -119
  171. package/lib/LightNightMode/docs/AlternativeColors.docs.js +0 -131
  172. package/lib/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -206
  173. package/lib/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -162
  174. package/lib/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -142
  175. package/lib/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -115
  176. package/lib/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -119
  177. package/lib/ListItem/docs/ListItemWithIcon__default.docs.js +0 -112
  178. package/lib/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -142
  179. package/lib/ListItem/docs/ListItemWithRadio__default.docs.js +0 -115
  180. package/lib/ListItem/docs/ListItem__custom.docs.js +0 -164
  181. package/lib/ListItem/docs/ListItem__default.docs.js +0 -131
  182. package/lib/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -177
  183. package/lib/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +0 -165
  184. package/lib/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +0 -191
  185. package/lib/MultiSelect/docs/MultiSelect__default.docs.js +0 -214
  186. package/lib/PopOver/docs/PopOver__default.docs.js +0 -86
  187. package/lib/Provider/docs/Provider_Id__Class.docs.js +0 -77
  188. package/lib/Provider/docs/Provider_Id__Function.docs.js +0 -29
  189. package/lib/Provider/docs/Provider_Zindex__Class.docs.js +0 -80
  190. package/lib/Provider/docs/Provider_Zindex__Function.docs.js +0 -34
  191. package/lib/Radio/docs/Radio__custom.docs.js +0 -299
  192. package/lib/Radio/docs/Radio__default.docs.js +0 -222
  193. package/lib/Responsive/docs/Responsive__Custom.docs.js +0 -272
  194. package/lib/Responsive/docs/Responsive__default.docs.js +0 -142
  195. package/lib/Responsive/docs/style.module.css +0 -56
  196. package/lib/Ribbon/docs/Ribbon__custom.docs.js +0 -437
  197. package/lib/Ribbon/docs/Ribbon__default.docs.js +0 -392
  198. package/lib/RippleEffect/docs/RippleEffect__default.docs.js +0 -484
  199. package/lib/Select/docs/GroupSelect__default.docs.js +0 -199
  200. package/lib/Select/docs/SelectWithAvatar__default.docs.js +0 -152
  201. package/lib/Select/docs/SelectWithIcon__default.docs.js +0 -190
  202. package/lib/Select/docs/Select__default.docs.js +0 -340
  203. package/lib/Stencils/docs/Stencils__custom.docs.js +0 -96
  204. package/lib/Stencils/docs/Stencils__default.docs.js +0 -101
  205. package/lib/Switch/docs/Switch__custom.docs.js +0 -203
  206. package/lib/Switch/docs/Switch__default.docs.js +0 -156
  207. package/lib/Tab/docs/Tab__default.docs.js +0 -308
  208. package/lib/Tab/docs/tabdocs.module.css +0 -29
  209. package/lib/Tag/docs/Tag__custom.docs.js +0 -423
  210. package/lib/Tag/docs/Tag__default.docs.js +0 -307
  211. package/lib/TextBox/docs/TextBox__custom.docs.js +0 -98
  212. package/lib/TextBox/docs/TextBox__default.docs.js +0 -95
  213. package/lib/TextBox/docs/TextBox__size.docs.js +0 -93
  214. package/lib/TextBox/docs/TextBox__variant.docs.js +0 -93
  215. package/lib/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -145
  216. package/lib/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -117
  217. package/lib/Textarea/docs/Textarea__animated.docs.js +0 -95
  218. package/lib/Textarea/docs/Textarea__custom.docs.js +0 -137
  219. package/lib/Textarea/docs/Textarea__default.docs.js +0 -130
  220. package/lib/Textarea/docs/Textarea__disabled.docs.js +0 -83
  221. package/lib/Tooltip/docs/Tooltip__default.docs.js +0 -391
  222. package/lib/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +0 -150
  223. package/lib/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +0 -206
  224. package/lib/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -191
  225. package/lib/beta/FocusRing/docs/FocusRing__default.docs.js +0 -101
  226. package/lib/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -145
  227. package/lib/semantic/Button/docs/Button__default.docs.js +0 -66
  228. package/preprocess/componentAppearanceColors.js +0 -67
  229. package/preprocess/componentThemeColors.js +0 -123
  230. package/preprocess/ctaThemeColors.js +0 -101
  231. package/preprocess/index.js +0 -3
  232. package/preprocess/json/componentAppearanceVariableJson.js +0 -1346
  233. package/preprocess/json/componentThemeVariableJson.js +0 -242
  234. package/preprocess/json/ctaThemeVariableJson.js +0 -203
@@ -1,91 +0,0 @@
1
- import React from 'react';
2
- import DateTime from '../DateTime';
3
- import datetime from '@zohodesk/datetimejs';
4
- import data from './timezonedata.json';
5
- import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
6
- export default class DateTime__default extends React.Component {
7
- constructor(props) {
8
- super(props);
9
- this.state = {
10
- dateTime: '2019-01-01T00:00:00.000',
11
- date: '2019-01-01',
12
- dateTimeformattedValue: '',
13
- dateFormattedValue: ''
14
- };
15
- this.handleDateTimeChange = this.handleDateTimeChange.bind(this);
16
- this.handleGetMethods = this.handleGetMethods.bind(this);
17
- this.handleDateChange = this.handleDateChange.bind(this);
18
- }
19
-
20
- handleDateTimeChange(dateTime, dateTimeformattedValue) {
21
- this.setState({
22
- dateTime,
23
- dateTimeformattedValue
24
- });
25
- }
26
-
27
- handleDateChange(date, dateFormattedValue) {
28
- this.setState({
29
- date,
30
- dateFormattedValue
31
- });
32
- }
33
-
34
- handleGetMethods(methods) {
35
- const {
36
- resetLocalDate
37
- } = methods;
38
- this.resetLocalDate = resetLocalDate;
39
- }
40
-
41
- render() {
42
- const {
43
- dateTime,
44
- date,
45
- dateFormattedValue,
46
- dateTimeformattedValue
47
- } = this.state;
48
- return /*#__PURE__*/React.createElement("div", {
49
- style: {
50
- width: '370px',
51
- height: '1000px',
52
- padding: '30px'
53
- }
54
- }, /*#__PURE__*/React.createElement("div", null, dateFormattedValue), /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(DateTime, {
55
- value: date,
56
- onChange: this.handleDateChange,
57
- dateFormat: "MM.DD.YYYY",
58
- timeZone: datetime.tz.unpack(data.timezone),
59
- isAbsolute: false,
60
- needAction: false,
61
- isDateTimeField: false // onSelect={this.handleDateTimeChange}
62
- ,
63
- getMethods: this.handleGetMethods // onError={() => {
64
- // this.resetLocalDate();
65
- // }}
66
- ,
67
- isDefaultPosition: true
68
- })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, dateTimeformattedValue), /*#__PURE__*/React.createElement(CodeExtract, null, /*#__PURE__*/React.createElement(DateTime, {
69
- value: dateTime,
70
- onChange: this.handleDateTimeChange,
71
- dateFormat: "MM.DD.YYYY",
72
- timeZone: datetime.tz.unpack(data.timezone),
73
- isAbsolute: false,
74
- needAction: false,
75
- getMethods: this.handleGetMethods,
76
- isDateTimeField: true // onError={() => {
77
- // this.resetLocalDate();
78
- // }}
79
- ,
80
- isDefaultPosition: true
81
- })));
82
- }
83
-
84
- }
85
-
86
- if (false) {
87
- DateTime__default.docs = {
88
- componentGroup: 'Form Elements',
89
- folderName: 'Style Guide'
90
- };
91
- }
@@ -1,183 +0,0 @@
1
- import React from 'react';
2
- import DateWidget from '../DateWidget';
3
- import CodeExtract from '@zohodesk/docstool/lib/CodeExtractor/CodeExtractor';
4
- import data from './timezonedata.json';
5
- import datetime from '@zohodesk/datetimejs';
6
- import { Box, Container } from '../../Layout';
7
- export default class DateWidget__default extends React.Component {
8
- constructor(props) {
9
- super(props);
10
- this.state = {
11
- dateTime: '2021-08-13T20:00:00.000Z',
12
- date: '1999-04-03'
13
- };
14
- this.handleDateChange = this.handleDateChange.bind(this);
15
- this.handleDateTimeChange = this.handleDateTimeChange.bind(this);
16
- }
17
-
18
- handleDateChange(date) {
19
- this.setState({
20
- date
21
- });
22
- }
23
-
24
- handleDateTimeChange(dateTime) {
25
- this.setState({
26
- dateTime
27
- });
28
- }
29
-
30
- render() {
31
- const i18nKey = {
32
- submitText: 'OK',
33
- cancelText: 'Close',
34
- timeText: 'Choose Time',
35
- nextMonthTitleText: 'Go Next',
36
- prevMonthTitleText: 'Go Prev',
37
- monthNames: ['ஜனவரி', 'பிப்ரவரி', 'மார்ச்', 'ஏப்ரல்', 'மே', 'ஜூன்', 'ஜூலை', 'ஆகஸ்ட்', 'செப்டம்பர்', 'அக்டோபர்', 'நவம்பர்', 'டிசம்பர்'],
38
- monthNamesShort: ['ஜன', 'பிப்', 'மார்', 'ஏப்', 'மே', 'ஜூன்', 'ஜூலை', 'ஆக', 'செப்', 'அக்', 'நவ', 'டிச'],
39
- dayNames: ['ஞாயிறு', 'திங்கள்', 'செவ்வாய்', 'புதன்', 'வியாழன்', 'வெள்ளி', 'சனி'],
40
- dayNamesShort: ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச'],
41
- ampmText: ['மு.ப', 'பி.ப']
42
- };
43
- const dataFormats = ['YYYY/MM/DD', 'YYYY-MM-DD', 'YYYY.MM.DD', 'YYYY MM DD', 'MM/DD/YYYY', 'MM-DD-YYYY', 'MM.DD.YYYY', 'MM DD YYYY', 'DD/MM/YYYY', 'DD-MM-YYYY', 'DD.MM.YYYY', 'DD MM YYYY', 'YYYY/MMM/DD', 'YYYY-MMM-DD', 'YYYY.MMM.DD', 'YYYY MMM DD', 'MMM/DD/YYYY', 'MMM-DD-YYYY', 'MMM.DD.YYYY', 'MMM DD YYYY', 'DD/MMM/YYYY', 'DD-MMM-YYYY', 'DD.MMM.YYYY', 'DD MMM YYYY', 'DD/MMMM/YYYY', 'DD-MMMM-YYYY', 'DD-MMMM-YYYY', 'DD MMMM YYYY', 'MMMM/DD/YYYY', 'MMMM-DD-YYYY', 'MMMM.DD.YYYY', 'MMMM DD YYYY', 'YYYY/MMMM/DD', 'YYYY-MMMM-DD', 'YYYY.MMMM.DD', 'YYYY MMMM DD', 'DD/MM/YY', 'DD-MM-YY', 'DD.MM.YY', 'DD MM YY', 'MM/DD/YY', 'MM-DD-YY', 'MM.DD.YY', 'MM DD YY', 'YY/MM/DD', 'YY-MM-DD', 'YY.MM.DD', 'YY MM DD', 'DD/MMM/YY', 'DD-MMM-YY', 'DD.MMM.YY', 'DD MMM YY', 'MMM/DD/YY', 'MMM-DD-YY', 'MMM.DD.YY', 'MMM DD YY', 'YY/MMM/DD', 'YY-MMM-DD', 'YY.MMM.DD', 'YY MMM DD', 'DD/MMMM/YY', 'DD-MMMM-YY', 'DD.MMMM.YY', 'DD MMMM YY', 'MMMM/DD/YY', 'MMMM-DD-YY', 'MMMM.DD.YY', 'MMMM DD YY', 'YY/MMMM/DD', 'YY-MMMM-DD', 'YY.MMMM.DD', 'YY MMMM DD'];
44
- const {
45
- date,
46
- dateTime
47
- } = this.state;
48
- const boxStyle = {
49
- padding: '10px',
50
- border: '1px solid #000',
51
- margin: '5px',
52
- minWidth: '300px'
53
- };
54
- const headingStyle = {
55
- fontSize: '14px',
56
- textDecoration: 'underline',
57
- marginBottom: '10px'
58
- };
59
- return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Container, {
60
- alignBox: "row",
61
- wrap: "wrap"
62
- }, /*#__PURE__*/React.createElement(CodeExtract, null, dataFormats.map(format => /*#__PURE__*/React.createElement(Box, {
63
- flexible: true,
64
- style: boxStyle
65
- }, /*#__PURE__*/React.createElement("div", {
66
- style: headingStyle
67
- }, format), /*#__PURE__*/React.createElement(DateWidget, {
68
- textBoxSize: "xmedium",
69
- textBoxVariant: "primary",
70
- value: dateTime,
71
- onSelect: this.handleDateTimeChange,
72
- isDateTime: true,
73
- position: "bottomLeft",
74
- dateFormat: format,
75
- timeZone: datetime.tz.unpack(data.timezone),
76
- isEditable: true,
77
- is24Hour: false,
78
- i18nKeys: i18nKey
79
- }))), /*#__PURE__*/React.createElement(Box, {
80
- flexible: true,
81
- style: boxStyle
82
- }, /*#__PURE__*/React.createElement("div", {
83
- style: headingStyle
84
- }, "24 Hours"), /*#__PURE__*/React.createElement(DateWidget, {
85
- textBoxSize: "xmedium",
86
- textBoxVariant: "primary",
87
- value: dateTime,
88
- onSelect: this.handleDateTimeChange,
89
- isDateTime: true,
90
- position: "bottomLeft",
91
- dateFormat: "MMM-dd-yyyy",
92
- timeZone: datetime.tz.unpack(data.timezone),
93
- needDefaultTime: true,
94
- is24Hour: true
95
- })), /*#__PURE__*/React.createElement(Box, {
96
- flexible: true,
97
- style: boxStyle
98
- }, /*#__PURE__*/React.createElement("div", {
99
- style: headingStyle
100
- }, "Default Time"), /*#__PURE__*/React.createElement(DateWidget, {
101
- textBoxSize: "xmedium",
102
- textBoxVariant: "primary",
103
- value: dateTime,
104
- onSelect: this.handleDateTimeChange,
105
- isDateTime: true,
106
- position: "bottomLeft",
107
- dateFormat: "MMM-dd-yyyy",
108
- timeZone: datetime.tz.unpack(data.timezone),
109
- needDefaultTime: true
110
- })), /*#__PURE__*/React.createElement(Box, {
111
- flexible: true,
112
- style: boxStyle
113
- }, /*#__PURE__*/React.createElement("div", {
114
- style: headingStyle
115
- }, "ReadOnly"), /*#__PURE__*/React.createElement(DateWidget, {
116
- textBoxSize: "xmedium",
117
- textBoxVariant: "primary",
118
- value: dateTime,
119
- onSelect: this.handleDateTimeChange,
120
- isDateTime: true,
121
- position: "bottomLeft",
122
- dateFormat: "yyyy.MM.dd",
123
- timeZone: datetime.tz.unpack(data.timezone),
124
- needDefaultTime: false,
125
- isReadOnly: true
126
- })), /*#__PURE__*/React.createElement(Box, {
127
- flexible: true,
128
- style: boxStyle
129
- }, /*#__PURE__*/React.createElement("div", {
130
- style: headingStyle
131
- }, "Without Time"), /*#__PURE__*/React.createElement(DateWidget, {
132
- textBoxSize: "xmedium",
133
- textBoxVariant: "primary",
134
- value: date,
135
- onSelect: this.handleDateChange,
136
- isDateTime: false,
137
- position: "bottomLeft",
138
- dateFormat: "yyyy.MM.dd",
139
- timeZone: datetime.tz.unpack(data.timezone)
140
- })), /*#__PURE__*/React.createElement(Box, {
141
- flexible: true,
142
- style: boxStyle
143
- }, /*#__PURE__*/React.createElement("div", {
144
- style: headingStyle
145
- }, "Disabled"), /*#__PURE__*/React.createElement(DateWidget, {
146
- textBoxSize: "xmedium",
147
- textBoxVariant: "primary",
148
- value: date,
149
- onSelect: this.handleDateChange,
150
- isDateTime: false,
151
- position: "bottomLeft",
152
- dateFormat: "MM-dd-yyyy",
153
- isDisabled: true,
154
- timeZone: datetime.tz.unpack(data.timezone)
155
- })), /*#__PURE__*/React.createElement(Box, {
156
- flexible: true,
157
- style: boxStyle
158
- }, /*#__PURE__*/React.createElement("div", {
159
- style: headingStyle
160
- }, "Hide Current Year"), /*#__PURE__*/React.createElement(DateWidget, {
161
- textBoxSize: "xmedium",
162
- textBoxVariant: "primary",
163
- value: dateTime,
164
- onSelect: this.handleDateTimeChange,
165
- isDateTime: true,
166
- position: "bottomLeft",
167
- dateFormat: "MMM-dd-yyyy",
168
- timeZone: datetime.tz.unpack(data.timezone),
169
- needDefaultTime: true,
170
- is24Hour: true,
171
- isEditable: true,
172
- isHideCurrentYear: true
173
- })))));
174
- }
175
-
176
- }
177
-
178
- if (false) {
179
- DateWidget__default.docs = {
180
- componentGroup: 'Form Elements',
181
- folderName: 'Style Guide'
182
- };
183
- }
@@ -1 +0,0 @@
1
- { "timezone": "7Q.W 80 70 70 70|0121213412121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121|-3tFE0 1nEe0 1nX0 11B0 1nX0 SgN0 8x10 iy0 5Wp1 1VaX 3dA0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1a00 1fA0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0|15e6" }
@@ -1,66 +0,0 @@
1
- import React, { Component } from 'react';
2
- import DropBox from '../DropBox';
3
- import styles from '../../common/docStyle.module.css';
4
- export default class DropBox__custom extends Component {
5
- render() {
6
- let style = {
7
- height: '80px',
8
- width: '100px',
9
- position: 'relative',
10
- display: 'inline-block',
11
- background: '#e6e5e5',
12
- fontSize: '14px'
13
- },
14
- boxstyle = {
15
- height: '100px',
16
- textAlign: 'center',
17
- fontSize: 'var(--zd_size20)'
18
- },
19
- containerStyle = {
20
- display: 'inline-block',
21
- verticalAlign: 'top',
22
- width: 'calc(33.3333333% - 300px)',
23
- marginBottom: '150px',
24
- marginLeft: '275px'
25
- },
26
- dropBoxStyle = {
27
- display: 'flex',
28
- flexWrap: 'wrap',
29
- flexDirection: 'row',
30
- justifyContent: 'right'
31
- };
32
- let sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default'];
33
- return /*#__PURE__*/React.createElement("div", {
34
- style: {
35
- dropBoxStyle
36
- }
37
- }, sizes.map((size, i) => /*#__PURE__*/React.createElement("div", {
38
- style: containerStyle,
39
- key: i
40
- }, /*#__PURE__*/React.createElement("div", {
41
- style: style
42
- }, /*#__PURE__*/React.createElement(DropBox, {
43
- size: size,
44
- isActive: true,
45
- isModel: false,
46
- customClass: {
47
- customDropBox: styles.customDropbox,
48
- customDropBoxWrap: styles.dropboxSize,
49
- customMobileDropBox: styles.mobDropbox,
50
- customMobileDropBoxWrap: styles.mobBg
51
- }
52
- }, /*#__PURE__*/React.createElement("div", {
53
- style: boxstyle
54
- }, /*#__PURE__*/React.createElement("li", null, "DropBox"), /*#__PURE__*/React.createElement("li", null, "Size - ", size)))))));
55
- }
56
-
57
- }
58
-
59
- if (false) {
60
- DropBox__custom.docs = {
61
- componentGroup: 'Atom',
62
- folderName: 'Style Guide',
63
- external: true,
64
- description: ' '
65
- };
66
- }
@@ -1,92 +0,0 @@
1
- import React, { Component, Fragment } from 'react';
2
- import Popup from '../../Popup/Popup';
3
- import DropBox from '../DropBox';
4
-
5
- class DropBox__customOrderComp extends Component {
6
- constructor(props) {
7
- super(props);
8
- this.togglePopup = this.togglePopup.bind(this);
9
- }
10
-
11
- togglePopup(e) {
12
- let {
13
- togglePopup
14
- } = this.props;
15
- togglePopup && togglePopup(e, 'bottomLeftToRight');
16
- }
17
-
18
- render() {
19
- let layoutStyle = {
20
- padding: 20
21
- };
22
- let containerStyle = {
23
- position: 'relative',
24
- display: 'inline-block'
25
- };
26
- let targetStyle = {
27
- height: '40px',
28
- width: '40px',
29
- borderRadius: '50%',
30
- position: 'relative',
31
- background: '#e6e5e5',
32
- cursor: 'pointer'
33
- };
34
- let boxStyle = {
35
- height: '300px'
36
- };
37
- let {
38
- isPopupOpen,
39
- isPopupReady,
40
- position,
41
- removeClose,
42
- getContainerRef,
43
- getTargetRef,
44
- isAbsolutePositioningNeeded,
45
- targetOffset,
46
- positionsOffset
47
- } = this.props;
48
- return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
49
- style: layoutStyle
50
- }, /*#__PURE__*/React.createElement("div", {
51
- style: containerStyle
52
- }, /*#__PURE__*/React.createElement("div", {
53
- style: targetStyle,
54
- onClick: this.togglePopup,
55
- ref: getTargetRef
56
- }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
57
- size: "large",
58
- isActive: isPopupReady,
59
- boxPosition: position,
60
- onClick: removeClose,
61
- getRef: getContainerRef,
62
- isArrow: false,
63
- isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
64
- animationStyle: "bounce",
65
- positionsOffset: positionsOffset,
66
- targetOffset: targetOffset
67
- }, /*#__PURE__*/React.createElement("div", {
68
- style: boxStyle
69
- })) : null)), /*#__PURE__*/React.createElement("div", {
70
- "data-portal": "portal1"
71
- }));
72
- }
73
-
74
- }
75
-
76
- DropBox__customOrderComp.displayName = 'DropBox__customOrder';
77
- let DropBox__customOrder = Popup(DropBox__customOrderComp);
78
- DropBox__customOrder.defaultProps = {
79
- isAbsolutePositioningNeeded: false,
80
- customOrder: ['bottomCenter', 'bottomLeftToRight', 'bottomRightToLeft', 'topLeftToRight', 'topRightToLeft', 'rightCenter', 'rightBottomToTop', 'leftTopToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop']
81
- };
82
-
83
- if (false) {
84
- DropBox__customOrder.docs = {
85
- componentGroup: 'Atom',
86
- folderName: 'Style Guide',
87
- external: true,
88
- description: ' '
89
- };
90
- }
91
-
92
- export default DropBox__customOrder;
@@ -1,91 +0,0 @@
1
- import React, { Component, Fragment } from 'react';
2
- import Popup from '../../Popup/Popup';
3
- import DropBox from '../DropBox';
4
-
5
- class DropBox__fixedPositionComp extends Component {
6
- constructor(props) {
7
- super(props);
8
- this.togglePopup = this.togglePopup.bind(this);
9
- }
10
-
11
- togglePopup(e) {
12
- let {
13
- togglePopup
14
- } = this.props;
15
- togglePopup && togglePopup(e);
16
- }
17
-
18
- render() {
19
- let layoutStyle = {
20
- padding: 20
21
- };
22
- let containerStyle = {
23
- position: 'relative',
24
- display: 'inline-block'
25
- };
26
- let targetStyle = {
27
- height: '40px',
28
- width: '40px',
29
- borderRadius: '50%',
30
- position: 'relative',
31
- background: '#e6e5e5',
32
- cursor: 'pointer'
33
- };
34
- let boxStyle = {
35
- height: '300px'
36
- };
37
- let {
38
- isPopupOpen,
39
- isPopupReady,
40
- position,
41
- removeClose,
42
- getContainerRef,
43
- getTargetRef,
44
- isAbsolutePositioningNeeded,
45
- targetOffset,
46
- positionsOffset
47
- } = this.props;
48
- return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
49
- style: layoutStyle
50
- }, /*#__PURE__*/React.createElement("div", {
51
- style: containerStyle
52
- }, /*#__PURE__*/React.createElement("div", {
53
- style: targetStyle,
54
- onClick: this.togglePopup,
55
- ref: getTargetRef
56
- }), isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
57
- size: "large",
58
- isActive: isPopupReady,
59
- boxPosition: position,
60
- onClick: removeClose,
61
- getRef: getContainerRef,
62
- isArrow: false,
63
- isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
64
- animationStyle: "bounce",
65
- positionsOffset: positionsOffset,
66
- targetOffset: targetOffset
67
- }, /*#__PURE__*/React.createElement("div", {
68
- style: boxStyle
69
- })) : null)), /*#__PURE__*/React.createElement("div", {
70
- "data-portal": "portal1"
71
- }));
72
- }
73
-
74
- }
75
-
76
- DropBox__fixedPositionComp.displayName = 'DropBox__fixedPosition';
77
- let DropBox__fixedPosition = Popup(DropBox__fixedPositionComp);
78
- DropBox__fixedPosition.defaultProps = {
79
- isAbsolutePositioningNeeded: false
80
- };
81
-
82
- if (false) {
83
- DropBox__fixedPosition.docs = {
84
- componentGroup: 'Atom',
85
- folderName: 'Style Guide',
86
- external: true,
87
- description: ' '
88
- };
89
- }
90
-
91
- export default DropBox__fixedPosition;
@@ -1,87 +0,0 @@
1
- import React, { Component } from 'react';
2
- import DropBox from '../DropBox';
3
- export default class DropBox__position extends Component {
4
- render() {
5
- let style = {
6
- height: '80px',
7
- width: '100px',
8
- position: 'relative',
9
- display: 'inline-block',
10
- background: '#e6e5e5',
11
- fontSize: '14px'
12
- },
13
- boxstyle = {
14
- height: '100px',
15
- listStyleType: 'none',
16
- padding: '5px 10px',
17
- margin: 0
18
- },
19
- direction = {
20
- display: 'flex',
21
- flexDirection: 'column'
22
- },
23
- position = {
24
- display: 'flex',
25
- justifyContent: 'space-around',
26
- height: '300px',
27
- alignItems: 'center'
28
- },
29
- containerStyle = {
30
- display: 'inline-flex',
31
- alignItems: 'center',
32
- justifyContent: 'center'
33
- },
34
- title = {
35
- fontSize: '25px',
36
- color: 'rgba(0, 0, 0, 0.7)',
37
- textAlign: 'center',
38
- padding: '0 15px',
39
- margin: '15px 0'
40
- };
41
- let directions = [{
42
- direction: 'Bottom',
43
- position: ['bottomLeft', 'bottomCenter', 'bottomRight']
44
- }, {
45
- direction: 'Top',
46
- position: ['topLeft', 'topCenter', 'topRight']
47
- }, {
48
- direction: 'Left',
49
- position: ['leftTop', 'leftCenter', 'leftBottom']
50
- }, {
51
- direction: 'Right',
52
- position: ['rightTop', 'rightCenter', 'rightBottom']
53
- }];
54
- return /*#__PURE__*/React.createElement("div", null, directions.map((item, i) => /*#__PURE__*/React.createElement("div", {
55
- style: direction,
56
- key: `direction${i}-${item.direction}`
57
- }, /*#__PURE__*/React.createElement("div", {
58
- style: title
59
- }, item.direction), /*#__PURE__*/React.createElement("div", {
60
- style: position
61
- }, item.position.map((boxPos, j) => {
62
- return /*#__PURE__*/React.createElement("div", {
63
- style: containerStyle,
64
- key: `position${j}-${boxPos}`
65
- }, /*#__PURE__*/React.createElement("div", {
66
- style: style
67
- }, /*#__PURE__*/React.createElement(DropBox, {
68
- size: "xsmall",
69
- isAnimate: true,
70
- boxPosition: boxPos,
71
- isActive: true
72
- }, /*#__PURE__*/React.createElement("ul", {
73
- style: boxstyle
74
- }, /*#__PURE__*/React.createElement("li", null, "boxPosition - ", boxPos)))));
75
- })))));
76
- }
77
-
78
- }
79
-
80
- if (false) {
81
- DropBox__position.docs = {
82
- componentGroup: 'Atom',
83
- folderName: 'Style Guide',
84
- external: true,
85
- description: ' '
86
- };
87
- }
@@ -1,61 +0,0 @@
1
- import React, { Component } from 'react';
2
- import DropBox from '../DropBox';
3
- export default class DropBox__size extends Component {
4
- render() {
5
- let style = {
6
- height: '80px',
7
- width: '100px',
8
- position: 'relative',
9
- display: 'inline-block',
10
- background: '#e6e5e5',
11
- fontSize: '14px'
12
- },
13
- boxstyle = {
14
- height: '100px',
15
- textAlign: 'center',
16
- fontSize: 'var(--zd_size20)',
17
- listStyleType: 'none',
18
- padding: 0,
19
- margin: 0
20
- },
21
- containerStyle = {
22
- display: 'inline-block',
23
- verticalAlign: 'top',
24
- width: 'calc(33.3333333% - 300px)',
25
- marginBottom: '150px',
26
- marginLeft: '275px'
27
- },
28
- dropBoxStyle = {
29
- display: 'flex',
30
- flexWrap: 'wrap',
31
- flexDirection: 'row',
32
- justifyContent: 'right'
33
- };
34
- let sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'default'];
35
- return /*#__PURE__*/React.createElement("div", {
36
- style: {
37
- dropBoxStyle
38
- }
39
- }, sizes.map((size, i) => /*#__PURE__*/React.createElement("div", {
40
- style: containerStyle,
41
- key: i
42
- }, /*#__PURE__*/React.createElement("div", {
43
- style: style
44
- }, /*#__PURE__*/React.createElement(DropBox, {
45
- size: size,
46
- isActive: true
47
- }, /*#__PURE__*/React.createElement("ul", {
48
- style: boxstyle
49
- }, /*#__PURE__*/React.createElement("li", null, "DropBox"), /*#__PURE__*/React.createElement("li", null, "Size - ", size)))))));
50
- }
51
-
52
- }
53
-
54
- if (false) {
55
- DropBox__size.docs = {
56
- componentGroup: 'Atom',
57
- folderName: 'Style Guide',
58
- external: true,
59
- description: ' '
60
- };
61
- }