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

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 (296) hide show
  1. package/README.md +20 -0
  2. package/assets/Appearance/dark/mode/darkMode.module.css +2 -0
  3. package/assets/Appearance/default/mode/defaultMode.module.css +2 -0
  4. package/es/Animation/Animation.js +7 -8
  5. package/es/Avatar/Avatar.js +10 -10
  6. package/es/Button/Button.js +15 -16
  7. package/es/Button/Button.module.css +6 -2
  8. package/es/Card/Card.js +4 -5
  9. package/es/DateTime/DateWidget.module.css +0 -4
  10. package/es/DropBox/DropBox.js +2 -2
  11. package/es/ListItem/ListContainer.js +118 -0
  12. package/es/ListItem/ListItem.js +23 -31
  13. package/es/ListItem/ListItemWithAvatar.js +21 -27
  14. package/es/ListItem/ListItemWithCheckBox.js +23 -29
  15. package/es/ListItem/ListItemWithIcon.js +26 -26
  16. package/es/ListItem/ListItemWithRadio.js +24 -31
  17. package/es/MultiSelect/AdvancedGroupMultiSelect.js +7 -4
  18. package/es/MultiSelect/AdvancedMultiSelect.js +6 -3
  19. package/es/MultiSelect/AdvancedMultiSelect.module.css +8 -8
  20. package/es/MultiSelect/MultiSelect.js +7 -4
  21. package/es/MultiSelect/MultiSelect.module.css +8 -13
  22. package/es/MultiSelect/MultiSelectWithAvatar.js +6 -3
  23. package/es/MultiSelect/SelectedOptions.js +3 -2
  24. package/es/PopOver/PopOver.js +19 -20
  25. package/es/Popup/Popup.js +1 -1
  26. package/es/Radio/Radio.js +1 -2
  27. package/es/Radio/Radio.module.css +2 -2
  28. package/es/Ribbon/Ribbon.js +8 -8
  29. package/es/RippleEffect/RippleEffect.js +7 -4
  30. package/es/RippleEffect/RippleEffect.module.css +3 -0
  31. package/es/Select/Select.module.css +1 -1
  32. package/es/Select/SelectWithAvatar.js +7 -4
  33. package/es/Stencils/Stencils.js +5 -6
  34. package/es/Tag/Tag.js +10 -4
  35. package/es/Tag/Tag.module.css +14 -11
  36. package/es/TextBoxIcon/TextBoxIcon.js +1 -1
  37. package/es/TextBoxIcon/TextBoxIcon.module.css +5 -2
  38. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -1
  39. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -1
  40. package/lib/Animation/Animation.js +7 -8
  41. package/lib/Avatar/Avatar.js +10 -10
  42. package/lib/Button/Button.js +15 -16
  43. package/lib/Button/Button.module.css +6 -2
  44. package/lib/Card/Card.js +4 -5
  45. package/lib/DateTime/DateWidget.module.css +0 -4
  46. package/lib/DropBox/DropBox.js +6 -2
  47. package/lib/ListItem/ListContainer.js +127 -0
  48. package/lib/ListItem/ListItem.js +25 -32
  49. package/lib/ListItem/ListItemWithAvatar.js +23 -28
  50. package/lib/ListItem/ListItemWithCheckBox.js +24 -27
  51. package/lib/ListItem/ListItemWithIcon.js +27 -26
  52. package/lib/ListItem/ListItemWithRadio.js +26 -27
  53. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +7 -4
  54. package/lib/MultiSelect/AdvancedMultiSelect.js +6 -3
  55. package/lib/MultiSelect/AdvancedMultiSelect.module.css +8 -8
  56. package/lib/MultiSelect/MultiSelect.js +7 -4
  57. package/lib/MultiSelect/MultiSelect.module.css +8 -13
  58. package/lib/MultiSelect/MultiSelectWithAvatar.js +6 -3
  59. package/lib/MultiSelect/SelectedOptions.js +3 -2
  60. package/lib/PopOver/PopOver.js +19 -20
  61. package/lib/Popup/Popup.js +32 -29
  62. package/lib/Radio/Radio.js +1 -3
  63. package/lib/Radio/Radio.module.css +2 -2
  64. package/lib/Ribbon/Ribbon.js +8 -8
  65. package/lib/RippleEffect/RippleEffect.js +7 -4
  66. package/lib/RippleEffect/RippleEffect.module.css +3 -0
  67. package/lib/Select/Select.module.css +1 -1
  68. package/lib/Select/SelectWithAvatar.js +7 -4
  69. package/lib/Stencils/Stencils.js +5 -6
  70. package/lib/Tag/Tag.js +10 -4
  71. package/lib/Tag/Tag.module.css +14 -11
  72. package/lib/TextBoxIcon/TextBoxIcon.js +1 -1
  73. package/lib/TextBoxIcon/TextBoxIcon.module.css +5 -2
  74. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +5 -3
  75. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +5 -3
  76. package/package.json +3 -3
  77. package/README_Beta.md +0 -2
  78. package/__testUtils__/globals.js +0 -46
  79. package/__testUtils__/moduleMapKey.json +0 -138
  80. package/dubFinder.js +0 -96
  81. package/es/Accordion/docs/Accordion__Demo.docs.js +0 -80
  82. package/es/Animation/docs/Animation__default.docs.js +0 -34
  83. package/es/Animation/docs/Animation__fadeIn.docs.js +0 -34
  84. package/es/Animation/docs/Animation__scaleIn.docs.js +0 -34
  85. package/es/Animation/docs/Animation__skewIn.docs.js +0 -34
  86. package/es/Animation/docs/Animation__slideDown.docs.js +0 -34
  87. package/es/Animation/docs/Animation__slideLeft.docs.js +0 -34
  88. package/es/Animation/docs/Animation__zoomIn.docs.js +0 -34
  89. package/es/AppContainer/docs/AppContainer__default.docs.js +0 -20
  90. package/es/Avatar/docs/Avatar__custom.docs.js +0 -29
  91. package/es/Avatar/docs/Avatar__default.docs.js +0 -29
  92. package/es/Avatar/docs/Avatar__palette.docs.js +0 -49
  93. package/es/Avatar/docs/Avatar__text.docs.js +0 -28
  94. package/es/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -73
  95. package/es/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -31
  96. package/es/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -50
  97. package/es/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -49
  98. package/es/Button/docs/Button__custom.docs.js +0 -771
  99. package/es/Button/docs/Button__default.docs.js +0 -536
  100. package/es/Buttongroup/docs/Buttongroup__custom.docs.js +0 -37
  101. package/es/Buttongroup/docs/Buttongroup__footer.docs.js +0 -33
  102. package/es/Buttongroup/docs/Buttongroup__header.docs.js +0 -42
  103. package/es/Card/docs/Card__Custom.docs.js +0 -34
  104. package/es/Card/docs/Card__Default.docs.js +0 -37
  105. package/es/Card/docs/Card__Scroll.docs.js +0 -59
  106. package/es/CheckBox/docs/CheckBox__custom.docs.js +0 -293
  107. package/es/CheckBox/docs/CheckBox__default.docs.js +0 -219
  108. package/es/DateTime/docs/DateTime__default.docs.js +0 -91
  109. package/es/DateTime/docs/DateWidget__default.docs.js +0 -183
  110. package/es/DateTime/docs/timezonedata.json +0 -1
  111. package/es/DropBox/docs/DropBox__custom.docs.js +0 -66
  112. package/es/DropBox/docs/DropBox__customOrder.docs.js +0 -92
  113. package/es/DropBox/docs/DropBox__fixedPosition.docs.js +0 -91
  114. package/es/DropBox/docs/DropBox__position.docs.js +0 -87
  115. package/es/DropBox/docs/DropBox__size.docs.js +0 -61
  116. package/es/DropDown/docs/DropDownHeading__custom.docs.js +0 -23
  117. package/es/DropDown/docs/DropDownHeading__default.docs.js +0 -21
  118. package/es/Label/docs/Label__clipped.docs.js +0 -27
  119. package/es/Label/docs/Label__custom.docs.js +0 -30
  120. package/es/Label/docs/Label__palette.docs.js +0 -42
  121. package/es/Label/docs/Label__size.docs.js +0 -29
  122. package/es/Label/docs/Label__type.docs.js +0 -37
  123. package/es/Layout/docs/Layout__Hidden.docs.js +0 -77
  124. package/es/Layout/docs/Layout__default.docs.js +0 -49
  125. package/es/Layout/docs/Layout__four_Column.docs.js +0 -85
  126. package/es/Layout/docs/Layout__three_Column.docs.js +0 -76
  127. package/es/Layout/docs/Layout__two_Column.docs.js +0 -69
  128. package/es/LightNightMode/docs/AlternativeColors.docs.js +0 -74
  129. package/es/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -155
  130. package/es/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -112
  131. package/es/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -91
  132. package/es/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -65
  133. package/es/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -68
  134. package/es/ListItem/docs/ListItemWithIcon__default.docs.js +0 -62
  135. package/es/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -91
  136. package/es/ListItem/docs/ListItemWithRadio__default.docs.js +0 -65
  137. package/es/ListItem/docs/ListItem__custom.docs.js +0 -114
  138. package/es/ListItem/docs/ListItem__default.docs.js +0 -82
  139. package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -125
  140. package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +0 -114
  141. package/es/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +0 -141
  142. package/es/MultiSelect/docs/MultiSelect__default.docs.js +0 -161
  143. package/es/PopOver/docs/PopOver__default.docs.js +0 -32
  144. package/es/Provider/docs/Provider_Id__Class.docs.js +0 -29
  145. package/es/Provider/docs/Provider_Id__Function.docs.js +0 -18
  146. package/es/Provider/docs/Provider_Zindex__Class.docs.js +0 -32
  147. package/es/Provider/docs/Provider_Zindex__Function.docs.js +0 -23
  148. package/es/Radio/docs/Radio__custom.docs.js +0 -245
  149. package/es/Radio/docs/Radio__default.docs.js +0 -169
  150. package/es/Responsive/docs/Responsive__Custom.docs.js +0 -206
  151. package/es/Responsive/docs/Responsive__default.docs.js +0 -97
  152. package/es/Responsive/docs/style.module.css +0 -56
  153. package/es/Ribbon/docs/Ribbon__custom.docs.js +0 -386
  154. package/es/Ribbon/docs/Ribbon__default.docs.js +0 -342
  155. package/es/RippleEffect/docs/RippleEffect__default.docs.js +0 -435
  156. package/es/Select/docs/GroupSelect__default.docs.js +0 -149
  157. package/es/Select/docs/SelectWithAvatar__default.docs.js +0 -97
  158. package/es/Select/docs/SelectWithIcon__default.docs.js +0 -138
  159. package/es/Select/docs/Select__default.docs.js +0 -288
  160. package/es/Stencils/docs/Stencils__custom.docs.js +0 -45
  161. package/es/Stencils/docs/Stencils__default.docs.js +0 -50
  162. package/es/Switch/docs/Switch__custom.docs.js +0 -153
  163. package/es/Switch/docs/Switch__default.docs.js +0 -107
  164. package/es/Tab/docs/Tab__default.docs.js +0 -258
  165. package/es/Tab/docs/tabdocs.module.css +0 -29
  166. package/es/Tag/docs/Tag__custom.docs.js +0 -368
  167. package/es/Tag/docs/Tag__default.docs.js +0 -253
  168. package/es/TextBox/docs/TextBox__custom.docs.js +0 -43
  169. package/es/TextBox/docs/TextBox__default.docs.js +0 -40
  170. package/es/TextBox/docs/TextBox__size.docs.js +0 -38
  171. package/es/TextBox/docs/TextBox__variant.docs.js +0 -38
  172. package/es/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -89
  173. package/es/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -61
  174. package/es/Textarea/docs/Textarea__animated.docs.js +0 -41
  175. package/es/Textarea/docs/Textarea__custom.docs.js +0 -82
  176. package/es/Textarea/docs/Textarea__default.docs.js +0 -76
  177. package/es/Textarea/docs/Textarea__disabled.docs.js +0 -29
  178. package/es/Tooltip/docs/Tooltip__default.docs.js +0 -332
  179. package/es/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +0 -97
  180. package/es/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +0 -150
  181. package/es/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -139
  182. package/es/beta/FocusRing/docs/FocusRing__default.docs.js +0 -48
  183. package/es/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -72
  184. package/es/semantic/Button/docs/Button__default.docs.js +0 -20
  185. package/externalDocsBuild.js +0 -21
  186. package/lib/Accordion/docs/Accordion__Demo.docs.js +0 -126
  187. package/lib/Animation/docs/Animation__default.docs.js +0 -85
  188. package/lib/Animation/docs/Animation__fadeIn.docs.js +0 -85
  189. package/lib/Animation/docs/Animation__scaleIn.docs.js +0 -85
  190. package/lib/Animation/docs/Animation__skewIn.docs.js +0 -85
  191. package/lib/Animation/docs/Animation__slideDown.docs.js +0 -85
  192. package/lib/Animation/docs/Animation__slideLeft.docs.js +0 -85
  193. package/lib/Animation/docs/Animation__zoomIn.docs.js +0 -85
  194. package/lib/AppContainer/docs/AppContainer__default.docs.js +0 -70
  195. package/lib/Avatar/docs/Avatar__custom.docs.js +0 -87
  196. package/lib/Avatar/docs/Avatar__default.docs.js +0 -83
  197. package/lib/Avatar/docs/Avatar__palette.docs.js +0 -107
  198. package/lib/Avatar/docs/Avatar__text.docs.js +0 -86
  199. package/lib/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -124
  200. package/lib/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -82
  201. package/lib/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -101
  202. package/lib/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -100
  203. package/lib/Button/docs/Button__custom.docs.js +0 -826
  204. package/lib/Button/docs/Button__default.docs.js +0 -590
  205. package/lib/Buttongroup/docs/Buttongroup__custom.docs.js +0 -89
  206. package/lib/Buttongroup/docs/Buttongroup__footer.docs.js +0 -85
  207. package/lib/Buttongroup/docs/Buttongroup__header.docs.js +0 -98
  208. package/lib/Card/docs/Card__Custom.docs.js +0 -90
  209. package/lib/Card/docs/Card__Default.docs.js +0 -92
  210. package/lib/Card/docs/Card__Scroll.docs.js +0 -114
  211. package/lib/CheckBox/docs/CheckBox__custom.docs.js +0 -348
  212. package/lib/CheckBox/docs/CheckBox__default.docs.js +0 -273
  213. package/lib/DateTime/docs/DateTime__default.docs.js +0 -142
  214. package/lib/DateTime/docs/DateWidget__default.docs.js +0 -240
  215. package/lib/DateTime/docs/timezonedata.json +0 -1
  216. package/lib/DropBox/docs/DropBox__custom.docs.js +0 -122
  217. package/lib/DropBox/docs/DropBox__customOrder.docs.js +0 -141
  218. package/lib/DropBox/docs/DropBox__fixedPosition.docs.js +0 -140
  219. package/lib/DropBox/docs/DropBox__position.docs.js +0 -142
  220. package/lib/DropBox/docs/DropBox__size.docs.js +0 -116
  221. package/lib/DropDown/docs/DropDownHeading__custom.docs.js +0 -73
  222. package/lib/DropDown/docs/DropDownHeading__default.docs.js +0 -70
  223. package/lib/Label/docs/Label__clipped.docs.js +0 -81
  224. package/lib/Label/docs/Label__custom.docs.js +0 -85
  225. package/lib/Label/docs/Label__palette.docs.js +0 -96
  226. package/lib/Label/docs/Label__size.docs.js +0 -83
  227. package/lib/Label/docs/Label__type.docs.js +0 -91
  228. package/lib/Layout/docs/Layout__Hidden.docs.js +0 -127
  229. package/lib/Layout/docs/Layout__default.docs.js +0 -98
  230. package/lib/Layout/docs/Layout__four_Column.docs.js +0 -135
  231. package/lib/Layout/docs/Layout__three_Column.docs.js +0 -126
  232. package/lib/Layout/docs/Layout__two_Column.docs.js +0 -119
  233. package/lib/LightNightMode/docs/AlternativeColors.docs.js +0 -131
  234. package/lib/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -206
  235. package/lib/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -162
  236. package/lib/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -142
  237. package/lib/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -115
  238. package/lib/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -119
  239. package/lib/ListItem/docs/ListItemWithIcon__default.docs.js +0 -112
  240. package/lib/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -142
  241. package/lib/ListItem/docs/ListItemWithRadio__default.docs.js +0 -115
  242. package/lib/ListItem/docs/ListItem__custom.docs.js +0 -164
  243. package/lib/ListItem/docs/ListItem__default.docs.js +0 -131
  244. package/lib/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -177
  245. package/lib/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +0 -165
  246. package/lib/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +0 -191
  247. package/lib/MultiSelect/docs/MultiSelect__default.docs.js +0 -214
  248. package/lib/PopOver/docs/PopOver__default.docs.js +0 -86
  249. package/lib/Provider/docs/Provider_Id__Class.docs.js +0 -77
  250. package/lib/Provider/docs/Provider_Id__Function.docs.js +0 -29
  251. package/lib/Provider/docs/Provider_Zindex__Class.docs.js +0 -80
  252. package/lib/Provider/docs/Provider_Zindex__Function.docs.js +0 -34
  253. package/lib/Radio/docs/Radio__custom.docs.js +0 -299
  254. package/lib/Radio/docs/Radio__default.docs.js +0 -222
  255. package/lib/Responsive/docs/Responsive__Custom.docs.js +0 -272
  256. package/lib/Responsive/docs/Responsive__default.docs.js +0 -142
  257. package/lib/Responsive/docs/style.module.css +0 -56
  258. package/lib/Ribbon/docs/Ribbon__custom.docs.js +0 -437
  259. package/lib/Ribbon/docs/Ribbon__default.docs.js +0 -392
  260. package/lib/RippleEffect/docs/RippleEffect__default.docs.js +0 -484
  261. package/lib/Select/docs/GroupSelect__default.docs.js +0 -199
  262. package/lib/Select/docs/SelectWithAvatar__default.docs.js +0 -152
  263. package/lib/Select/docs/SelectWithIcon__default.docs.js +0 -190
  264. package/lib/Select/docs/Select__default.docs.js +0 -340
  265. package/lib/Stencils/docs/Stencils__custom.docs.js +0 -96
  266. package/lib/Stencils/docs/Stencils__default.docs.js +0 -101
  267. package/lib/Switch/docs/Switch__custom.docs.js +0 -203
  268. package/lib/Switch/docs/Switch__default.docs.js +0 -156
  269. package/lib/Tab/docs/Tab__default.docs.js +0 -308
  270. package/lib/Tab/docs/tabdocs.module.css +0 -29
  271. package/lib/Tag/docs/Tag__custom.docs.js +0 -423
  272. package/lib/Tag/docs/Tag__default.docs.js +0 -307
  273. package/lib/TextBox/docs/TextBox__custom.docs.js +0 -98
  274. package/lib/TextBox/docs/TextBox__default.docs.js +0 -95
  275. package/lib/TextBox/docs/TextBox__size.docs.js +0 -93
  276. package/lib/TextBox/docs/TextBox__variant.docs.js +0 -93
  277. package/lib/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -145
  278. package/lib/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -117
  279. package/lib/Textarea/docs/Textarea__animated.docs.js +0 -95
  280. package/lib/Textarea/docs/Textarea__custom.docs.js +0 -137
  281. package/lib/Textarea/docs/Textarea__default.docs.js +0 -130
  282. package/lib/Textarea/docs/Textarea__disabled.docs.js +0 -83
  283. package/lib/Tooltip/docs/Tooltip__default.docs.js +0 -391
  284. package/lib/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +0 -150
  285. package/lib/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +0 -206
  286. package/lib/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -191
  287. package/lib/beta/FocusRing/docs/FocusRing__default.docs.js +0 -101
  288. package/lib/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -145
  289. package/lib/semantic/Button/docs/Button__default.docs.js +0 -66
  290. package/preprocess/componentAppearanceColors.js +0 -67
  291. package/preprocess/componentThemeColors.js +0 -123
  292. package/preprocess/ctaThemeColors.js +0 -101
  293. package/preprocess/index.js +0 -3
  294. package/preprocess/json/componentAppearanceVariableJson.js +0 -1346
  295. package/preprocess/json/componentThemeVariableJson.js +0 -242
  296. 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
- }