@geneui/components 3.0.0-next-9ffcb93-16102024 → 3.0.0-next-48d0ef7-31102024

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 (248) hide show
  1. package/Avatar.js +63 -0
  2. package/CHANGELOG.md +7 -0
  3. package/Divider.js +23 -0
  4. package/{GeneUIProvider/index.js → GeneUIProvider.js} +52 -65
  5. package/HelperText.js +69 -0
  6. package/Info.js +64 -0
  7. package/Label.js +38 -0
  8. package/Loader.js +21 -0
  9. package/Pill.js +64 -0
  10. package/TextLink.js +20 -0
  11. package/{index-65217440.js → Tooltip.js} +104 -80
  12. package/{lib → components}/atoms/Avatar/Avatar.d.ts +7 -6
  13. package/components/atoms/Avatar/index.d.ts +1 -0
  14. package/{lib → components}/atoms/Divider/Divider.d.ts +5 -5
  15. package/components/atoms/Divider/index.d.ts +1 -0
  16. package/{lib → components}/atoms/HelperText/HelperText.d.ts +6 -5
  17. package/components/atoms/HelperText/index.d.ts +1 -0
  18. package/{lib → components}/atoms/Info/Info.d.ts +5 -5
  19. package/components/atoms/Info/index.d.ts +1 -0
  20. package/{lib → components}/atoms/Label/Label.d.ts +3 -3
  21. package/components/atoms/Label/index.d.ts +1 -0
  22. package/{lib → components}/atoms/Loader/Loader.d.ts +5 -5
  23. package/components/atoms/Loader/index.d.ts +1 -0
  24. package/{lib → components}/atoms/Pill/Pill.d.ts +7 -6
  25. package/components/atoms/Pill/index.d.ts +1 -0
  26. package/{lib → components}/atoms/TextLink/TextLink.d.ts +5 -5
  27. package/components/atoms/TextLink/index.d.ts +1 -0
  28. package/{lib → components}/molecules/Tooltip/Tooltip.d.ts +26 -21
  29. package/components/molecules/Tooltip/index.d.ts +1 -0
  30. package/components/providers/GeneUIProvider/GeneUIProvider.d.ts +30 -0
  31. package/components/providers/GeneUIProvider/index.d.ts +1 -0
  32. package/hooks/index.d.ts +2 -20
  33. package/hooks/useDebounceCallback/index.d.ts +1 -0
  34. package/hooks/useDebounceCallback/useDebounceCallback.d.ts +2 -0
  35. package/hooks/useEllipsisDetection/index.d.ts +1 -1
  36. package/hooks/useEllipsisDetection/useEllipsisDetection.d.ts +2 -2
  37. package/{index-031ff73c.js → index-ce02421b.js} +4 -4
  38. package/index.d.ts +11 -121
  39. package/index.js +12 -159
  40. package/package.json +24 -43
  41. package/tokens-0abb4e1b.js +6 -0
  42. package/types/index.d.ts +0 -3
  43. package/useEllipsisDetection-46d712b6.js +34 -0
  44. package/ActionableList/index.js +0 -1694
  45. package/AdvancedSearch/index.js +0 -892
  46. package/Alert/index.js +0 -98
  47. package/Avatar/index.js +0 -58
  48. package/Badge/index.js +0 -29
  49. package/Breadcrumb/index.js +0 -130
  50. package/BusyLoader/index.js +0 -31
  51. package/Button/index.js +0 -30
  52. package/Card/index.js +0 -502
  53. package/CardList/index.js +0 -662
  54. package/CellMeasurerCache-80be385d.js +0 -229
  55. package/Charts/index.js +0 -17662
  56. package/Checkbox/index.js +0 -229
  57. package/CheckboxGroup/index.js +0 -203
  58. package/CheckboxGroupWithSearch/index.js +0 -280
  59. package/Collapse/index.js +0 -195
  60. package/ColorPicker/index.js +0 -210
  61. package/ComboBox/index.js +0 -524
  62. package/Copy/index.js +0 -56
  63. package/Counter/index.js +0 -312
  64. package/DateFilter/index.js +0 -183
  65. package/DatePicker/index.js +0 -1229
  66. package/DatePickerInput/index.js +0 -883
  67. package/Divider/index.js +0 -23
  68. package/Drawer/index.js +0 -261
  69. package/Dropdown/index.js +0 -43
  70. package/Editor/index.js +0 -22975
  71. package/Empty/index.js +0 -76
  72. package/ExtendedInput/index.js +0 -590
  73. package/Form/index.js +0 -85
  74. package/FormContainer/index.js +0 -189
  75. package/FormableCheckbox/index.js +0 -24
  76. package/FormableDatePicker/index.js +0 -43
  77. package/FormableDropdown/index.js +0 -50
  78. package/FormableEditor/index.js +0 -26
  79. package/FormableHOC-85f89a81.js +0 -83
  80. package/FormableMultiSelectDropdown/index.js +0 -50
  81. package/FormableNumberInput/index.js +0 -34
  82. package/FormableRadio/index.js +0 -22
  83. package/FormableSwitcher/index.js +0 -22
  84. package/FormableTextInput/index.js +0 -34
  85. package/FormableUploader/index.js +0 -44
  86. package/Grid/index.js +0 -167
  87. package/HelperText/index.js +0 -86
  88. package/Holder/index.js +0 -261
  89. package/Icon/index.js +0 -62
  90. package/Image/index.js +0 -45
  91. package/ImagePreview/index.js +0 -217
  92. package/Info/index.js +0 -41
  93. package/InfoOutline-dd2e89d9.js +0 -29
  94. package/InteractiveWidget/index.js +0 -78
  95. package/KeyValue/index.js +0 -22
  96. package/Label/index.js +0 -48
  97. package/LinkButton/index.js +0 -34
  98. package/Loader/index.js +0 -23
  99. package/Menu/index.js +0 -281
  100. package/MobileNavigation/index.js +0 -94
  101. package/MobilePopup/index.js +0 -182
  102. package/Modal/index.js +0 -251
  103. package/ModuleTitle/index.js +0 -141
  104. package/NavigationMenu/index.js +0 -222
  105. package/Notification/index.js +0 -120
  106. package/Option/index.js +0 -184
  107. package/Overlay/index.js +0 -187
  108. package/Overspread/index.js +0 -291
  109. package/Pagination/index.js +0 -261
  110. package/Paper/index.js +0 -96
  111. package/Pill/index.js +0 -67
  112. package/Popover/index.js +0 -725
  113. package/PopoverV2/index.js +0 -19
  114. package/Portal/index.js +0 -58
  115. package/Products/index.js +0 -115
  116. package/Profile/index.js +0 -589
  117. package/Progress/index.js +0 -200
  118. package/QRCode/index.js +0 -814
  119. package/Radio/index.js +0 -151
  120. package/RadioGroup/index.js +0 -104
  121. package/Range/index.js +0 -191
  122. package/Rating/index.js +0 -174
  123. package/RichEditor/index.js +0 -13
  124. package/RichEditor-78c2617e.js +0 -228
  125. package/Scrollbar/index.js +0 -1585
  126. package/Search/index.js +0 -75
  127. package/SearchWithDropdown/index.js +0 -140
  128. package/Section/index.js +0 -61
  129. package/SkeletonLoader/index.js +0 -81
  130. package/Slider/index.js +0 -261
  131. package/Status/index.js +0 -97
  132. package/Steps/index.js +0 -314
  133. package/SuggestionList/index.js +0 -385
  134. package/Switcher/index.js +0 -193
  135. package/Table/index.js +0 -57
  136. package/TableCompositions/index.js +0 -16995
  137. package/Tabs/index.js +0 -235
  138. package/Tag/index.js +0 -102
  139. package/TextLink/index.js +0 -20
  140. package/Textarea/index.js +0 -242
  141. package/Time/index.js +0 -62
  142. package/TimePicker/index.js +0 -575
  143. package/Timeline/index.js +0 -113
  144. package/Title/index.js +0 -65
  145. package/Toaster/index.js +0 -116
  146. package/Tooltip/index.js +0 -6
  147. package/TransferList/index.js +0 -493
  148. package/Uploader/index.js +0 -992
  149. package/ValidatableCheckbox/index.js +0 -123
  150. package/ValidatableDatePicker/index.js +0 -316
  151. package/ValidatableDropdown/index.js +0 -141
  152. package/ValidatableElements/index.js +0 -67
  153. package/ValidatableMultiSelectDropdown/index.js +0 -152
  154. package/ValidatableNumberInput/index.js +0 -204
  155. package/ValidatableRadio/index.js +0 -116
  156. package/ValidatableSwitcher/index.js +0 -93
  157. package/ValidatableTextInput/index.js +0 -167
  158. package/ValidatableTimeInput/index.js +0 -174
  159. package/ValidatableUploader/index.js +0 -98
  160. package/Widget/index.js +0 -225
  161. package/_commonjsHelpers-24198af3.js +0 -35
  162. package/_rollupPluginBabelHelpers-a83240e1.js +0 -11
  163. package/callAfterDelay-7272faca.js +0 -12
  164. package/checkTimeValidation-e56771be.js +0 -16
  165. package/checkboxRadioSwitcher-5b69d7bd.js +0 -4
  166. package/clsx.m-2bb6df4b.js +0 -3
  167. package/config-1053d64d.js +0 -20
  168. package/configs-00612ce0.js +0 -103
  169. package/configs.js +0 -111
  170. package/dateValidation-67caec66.js +0 -225
  171. package/debounce-4419bc2f.js +0 -17
  172. package/guid-8ddf77b3.js +0 -16
  173. package/hooks/useBodyScroll.js +0 -16
  174. package/hooks/useClick.js +0 -18
  175. package/hooks/useClickOutside.js +0 -25
  176. package/hooks/useDebounce.js +0 -28
  177. package/hooks/useDeviceType.js +0 -17
  178. package/hooks/useDidMount.js +0 -15
  179. package/hooks/useForceUpdate.js +0 -8
  180. package/hooks/useHover.js +0 -20
  181. package/hooks/useImgDownload.js +0 -18
  182. package/hooks/useKeyDown.js +0 -21
  183. package/hooks/useMount.js +0 -13
  184. package/hooks/useMutationObserver.js +0 -21
  185. package/hooks/usePrevious.js +0 -10
  186. package/hooks/useThrottle.js +0 -16
  187. package/hooks/useToggle.js +0 -11
  188. package/hooks/useUpdatableRef.js +0 -14
  189. package/hooks/useUpdate.js +0 -10
  190. package/hooks/useWidth.js +0 -16
  191. package/hooks/useWindowSize.js +0 -40
  192. package/index-122432cd.js +0 -270
  193. package/index-262edd7a.js +0 -77
  194. package/index-2f5aa51e.js +0 -6483
  195. package/index-370f9acd.js +0 -4
  196. package/index-45eafea6.js +0 -90
  197. package/index-480fd7d9.js +0 -10032
  198. package/index-5f37f281.js +0 -168
  199. package/index-73aaa093.js +0 -1940
  200. package/index.mobile.d.ts +0 -14
  201. package/lib/atoms/Avatar/index.d.ts +0 -1
  202. package/lib/atoms/Badge/Badge.d.ts +0 -36
  203. package/lib/atoms/Badge/index.d.ts +0 -1
  204. package/lib/atoms/BusyLoader/BusyLoader.d.ts +0 -32
  205. package/lib/atoms/BusyLoader/BusyLoaderHolderHOC.d.ts +0 -8
  206. package/lib/atoms/BusyLoader/index.d.ts +0 -1
  207. package/lib/atoms/Button/Button.d.ts +0 -70
  208. package/lib/atoms/Button/index.d.ts +0 -1
  209. package/lib/atoms/Divider/index.d.ts +0 -1
  210. package/lib/atoms/Empty/Empty.d.ts +0 -39
  211. package/lib/atoms/Empty/index.d.ts +0 -1
  212. package/lib/atoms/Empty/utils.d.ts +0 -9
  213. package/lib/atoms/HelperText/index.d.ts +0 -1
  214. package/lib/atoms/Image/Image.d.ts +0 -51
  215. package/lib/atoms/Image/index.d.ts +0 -1
  216. package/lib/atoms/ImagePreview/ImagePreview.d.ts +0 -56
  217. package/lib/atoms/ImagePreview/ImagePreviewHOC.d.ts +0 -4
  218. package/lib/atoms/ImagePreview/Magnifier.d.ts +0 -40
  219. package/lib/atoms/ImagePreview/index.d.ts +0 -1
  220. package/lib/atoms/Info/index.d.ts +0 -1
  221. package/lib/atoms/KeyValue/KeyValue.d.ts +0 -29
  222. package/lib/atoms/KeyValue/index.d.ts +0 -1
  223. package/lib/atoms/Label/index.d.ts +0 -1
  224. package/lib/atoms/LinkButton/LinkButton.d.ts +0 -46
  225. package/lib/atoms/LinkButton/index.d.ts +0 -1
  226. package/lib/atoms/Loader/index.d.ts +0 -1
  227. package/lib/atoms/Pill/index.d.ts +0 -1
  228. package/lib/atoms/Rating/DefaultSvg.d.ts +0 -3
  229. package/lib/atoms/Rating/Rating.d.ts +0 -49
  230. package/lib/atoms/Rating/index.d.ts +0 -1
  231. package/lib/atoms/TextLink/index.d.ts +0 -1
  232. package/lib/molecules/Copy/Copy.d.ts +0 -38
  233. package/lib/molecules/Copy/index.d.ts +0 -1
  234. package/lib/molecules/InteractiveWidget/InteractiveWidget.d.ts +0 -70
  235. package/lib/molecules/InteractiveWidget/InteractiveWidgetIcon.d.ts +0 -8
  236. package/lib/molecules/InteractiveWidget/index.d.ts +0 -1
  237. package/lib/molecules/Tooltip/index.d.ts +0 -1
  238. package/lib/providers/GeneUIProvider/GeneUIProvider.d.ts +0 -30
  239. package/lib/providers/GeneUIProvider/index.d.ts +0 -1
  240. package/localization-4ba17032.js +0 -46
  241. package/objectWithoutPropertiesLoose-e1596bdb.js +0 -62
  242. package/rangeAndSlider-693a3d41.js +0 -8684
  243. package/react-beautiful-dnd.esm-b637016a.js +0 -10116
  244. package/react-lifecycles-compat.es-6e1f3768.js +0 -158
  245. package/redux-e591c1b8.js +0 -536
  246. package/tokens-8ab1179c.js +0 -6
  247. package/tslib.es6-f211516f.js +0 -35
  248. package/useEllipsisDetection-c1c9ad94.js +0 -38
package/CardList/index.js DELETED
@@ -1,662 +0,0 @@
1
- import { _ as _extends } from '../_rollupPluginBabelHelpers-a83240e1.js';
2
- import React__default, { useRef, useState, useMemo, useCallback, useEffect } from 'react';
3
- import PropTypes from 'prop-types';
4
- import { c as classnames } from '../index-031ff73c.js';
5
- import ModuleTitle from '../ModuleTitle/index.js';
6
- import Paper from '../Paper/index.js';
7
- import { D as Dropdown, I as InfiniteLoader, W as WindowScroller, L as List, C as CellMeasurer } from '../index-480fd7d9.js';
8
- import { C as CellMeasurerCache } from '../CellMeasurerCache-80be385d.js';
9
- import { o as oneIsRequired, n as noop } from '../index-5f37f281.js';
10
- import BusyLoader from '../BusyLoader/index.js';
11
- import Empty from '../Empty/index.js';
12
- import Icon from '../Icon/index.js';
13
- import Widget from '../Widget/index.js';
14
- import Card from '../Card/index.js';
15
- import { s as styleInject } from '../style-inject.es-746bb8ed.js';
16
- import '../configs-00612ce0.js';
17
- import '../index-65217440.js';
18
- import '../tslib.es6-f211516f.js';
19
- import 'react-dom';
20
- import '../GeneUIProvider/index.js';
21
- import '../dateValidation-67caec66.js';
22
- import '../_commonjsHelpers-24198af3.js';
23
- import '../objectWithoutPropertiesLoose-e1596bdb.js';
24
- import '../react-lifecycles-compat.es-6e1f3768.js';
25
- import '../clsx.m-2bb6df4b.js';
26
- import '../hooks/useMount.js';
27
- import '../hooks/useClick.js';
28
- import '../hooks/useKeyDown.js';
29
- import '../hooks/useDeviceType.js';
30
- import '../hooks/useWindowSize.js';
31
- import '../hooks/useDebounce.js';
32
- import '../hooks/useClickOutside.js';
33
- import '../hooks/useUpdatableRef.js';
34
- import '../hooks/useForceUpdate.js';
35
- import '../useEllipsisDetection-c1c9ad94.js';
36
- import '../index-73aaa093.js';
37
- import '../index-122432cd.js';
38
- import '../Scrollbar/index.js';
39
- import '../debounce-4419bc2f.js';
40
- import '../ExtendedInput/index.js';
41
- import '../SuggestionList/index.js';
42
- import '../config-1053d64d.js';
43
- import '../callAfterDelay-7272faca.js';
44
- import '../Checkbox/index.js';
45
- import '../checkboxRadioSwitcher-5b69d7bd.js';
46
- import '../guid-8ddf77b3.js';
47
- import '../index-370f9acd.js';
48
- import '../Tag/index.js';
49
- import '../KeyValue/index.js';
50
- import '../hooks/useBodyScroll.js';
51
- import '../Button/index.js';
52
- import '../MobilePopup/index.js';
53
- import '../Portal/index.js';
54
- import '../Popover/index.js';
55
- import '../Menu/index.js';
56
- import '../Option/index.js';
57
- import '../SkeletonLoader/index.js';
58
-
59
- function WithTitle(_ref) {
60
- let {
61
- name,
62
- actions,
63
- children,
64
- ...restProps
65
- } = _ref;
66
- return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ModuleTitle, _extends({
67
- title: name,
68
- cornerRadius: "position-radius"
69
- }, restProps), actions), children);
70
- }
71
- WithTitle.propTypes = {
72
- name: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
73
- actions: PropTypes.node,
74
- children: PropTypes.node
75
- };
76
-
77
- function PaperWrapper(_ref) {
78
- let {
79
- paperDirection,
80
- cornerRadius,
81
- className,
82
- children,
83
- shadow,
84
- ...restProps
85
- } = _ref;
86
- return /*#__PURE__*/React__default.createElement(Paper, _extends({
87
- shadow: shadow,
88
- paperDirection: paperDirection,
89
- cornerRadius: cornerRadius,
90
- className: className
91
- }, restProps), children);
92
- }
93
- PaperWrapper.propTypes = {
94
- className: PropTypes.string,
95
- children: PropTypes.node.isRequired,
96
- cornerRadius: PropTypes.string,
97
- shadow: PropTypes.bool,
98
- ...Paper.propTypes
99
- };
100
- PaperWrapper.defaultProps = {
101
- shadow: false,
102
- cornerRadius: 'full-radius',
103
- paperDirection: 'column'
104
- };
105
-
106
- var css_248z = "[data-gene-ui-version=\"2.16.3\"] .mobile-table-holder{position:relative;width:100%}[data-gene-ui-version=\"2.16.3\"] .paper>.mobile-table-holder{padding:1.6rem}[data-gene-ui-version=\"2.16.3\"] .m-popup-content>.paper>.mobile-table-holder{padding:1.6rem 0}[data-gene-ui-version=\"2.16.3\"] .mobile-table-head{margin:0 0 1rem;width:100%}[data-gene-ui-version=\"2.16.3\"] .mobile-table-head>ul{align-items:center;display:flex;width:100%}[data-gene-ui-version=\"2.16.3\"] .mobile-table-head>ul>li{align-items:center;display:flex;flex-shrink:0}[data-gene-ui-version=\"2.16.3\"] .mobile-table-head>ul>li+li{margin:0 0 0 3rem}[data-gene-ui-version=\"2.16.3\"] .mobile-table-head>ul>li:nth-child(2){flex:auto;max-width:20rem}[data-gene-ui-version=\"2.16.3\"] .mt-results-holder{font:600 1.4rem/1.8rem var(--font-family);opacity:.7;padding:0 1rem}[data-gene-ui-version=\"2.16.3\"] .mt-results-holder:not(:first-child){margin:1.6rem 0 0}[data-gene-ui-version=\"2.16.3\"] .mobile-table-cc{margin-inline-end:3rem;width:19.6rem}[data-gene-ui-version=\"2.16.3\"] .mobile-sort-button{align-items:center;cursor:pointer;display:flex;font:600 1.4rem/2.4rem var(--font-family)}[data-gene-ui-version=\"2.16.3\"] .mobile-sort-button p{transition:color .4s}[data-gene-ui-version=\"2.16.3\"] .mobile-sort-button .active{color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .mobile-sort-icons{height:2.4rem;margin-inline-start:1.2rem;position:relative;width:2.4rem}[data-gene-ui-version=\"2.16.3\"] .mobile-sort-icons .icon{left:0;position:absolute;top:0;transition:color .4s}[data-gene-ui-version=\"2.16.3\"] .mobile-sort-icons .icon:not(.active){color:rgba(var(--background-sc-rgb),.5)}[data-gene-ui-version=\"2.16.3\"] .mobile-table-body{width:100%}[data-gene-ui-version=\"2.16.3\"] .mobile-table-body .ReactVirtualized__Grid,[data-gene-ui-version=\"2.16.3\"] .mobile-table-body .ReactVirtualized__Grid__innerScrollContainer{overflow:visible!important}[data-gene-ui-version=\"2.16.3\"] .mobile-table-loading{align-items:center;display:flex;justify-content:center;padding:2.4rem 0;width:100%}[data-gene-ui-version=\"2.16.3\"] .mobile-table-loading.absolute-splash{background:rgba(var(--background-rgb),.6);height:100%;left:0;position:absolute;top:0}[data-gene-ui-version=\"2.16.3\"] .cards-empty-holder{align-items:center;display:flex;height:calc(100vh - 35.7rem);justify-content:center;width:100%}[data-gene-ui-version=\"2.16.3\"] .quick-view-holder{padding:1.6rem 0;width:100%}[data-gene-ui-version=\"2.16.3\"] .quick-view-holder>.card-list-col{grid-column-gap:3.8rem;align-items:center;display:grid;font:600 1.4rem/2.2rem var(--font-family);grid-template-columns:1fr 1fr}[data-gene-ui-version=\"2.16.3\"] .quick-view-holder>.card-list-col+.card-list-col{margin:2rem 0 0}[data-gene-ui-version=\"2.16.3\"] .quick-view-holder>.card-list-col .kv-label{opacity:.7}[data-gene-ui-version=\"2.16.3\"] .quick-view-holder>.card-list-col .kv-value{white-space:normal;word-break:break-word}[data-gene-ui-version=\"2.16.3\"] .quick-view-holder a:not([class]){color:var(--hero)}[data-gene-ui-version=\"2.16.3\"] .mc-widgets-holder{-webkit-overflow-scrolling:auto;margin:0 -1.6rem;overflow-x:auto;overflow-y:hidden;padding:0 1.6rem 1.6rem;width:calc(100% + 3.2rem)}[data-gene-ui-version=\"2.16.3\"] .mc-widgets-holder>ul{align-items:center;display:flex;min-width:100%}[data-gene-ui-version=\"2.16.3\"] .mc-widgets-holder>ul>li{margin-inline-end:1rem}[data-gene-ui-version=\"2.16.3\"] .mc-widgets-holder+.mobile-table-head{border-top:1px solid rgba(var(--background-sc-rgb),.1);padding:1.6rem 0 0}";
107
- styleInject(css_248z);
108
-
109
- const defaultSortFn = (prev, next, dataKey, type) => {
110
- const first = prev.data[dataKey];
111
- const second = next.data[dataKey];
112
- if (first === null) return 1;
113
- if (second === null) return -1;
114
- const firstLowerCased = typeof first === 'string' ? first.toLowerCase() : first;
115
- const secondLowerCased = typeof second === 'string' ? second.toLowerCase() : second;
116
- if (type === 'asc') {
117
- return firstLowerCased > secondLowerCased ? 1 : -1;
118
- }
119
- if (type === 'desc') {
120
- return firstLowerCased > secondLowerCased ? -1 : 1;
121
- }
122
- return 0;
123
- };
124
- function CardList(props) {
125
- const {
126
- rowClassName,
127
- onPaginationChange,
128
- shadow,
129
- border,
130
- sortableColumns,
131
- rowKey,
132
- sortedColumn,
133
- sortType,
134
- defaultSortedColumn,
135
- defaultSortType,
136
- onSortChange,
137
- columnLimit,
138
- resultText,
139
- className,
140
- loading,
141
- rows,
142
- rowsCount,
143
- columns,
144
- columnKey,
145
- rowActionBar,
146
- getPopupProps,
147
- customSubHeader,
148
- rowsPerPage,
149
- sortingPlaceholder,
150
- viewCardText,
151
- expandText,
152
- cancelText,
153
- sortByText,
154
- expandedText,
155
- emptyContent,
156
- expandedCloseText,
157
- scrollElement,
158
- renderRowNestedChildren,
159
- rowExtraClickMenuTitle,
160
- getExpandIconDisableState,
161
- onColumnChange,
162
- totals,
163
- rowExtraClick,
164
- rowExtraClickNeeded,
165
- closeWithOutsideClick,
166
- isEditMode,
167
- ...restProps
168
- } = props;
169
- const isCustomScrollElement = ('scrollElement' in props);
170
- const isSortControlled = ('onSortChange' in props);
171
- const virtualizedList = useRef(null);
172
- const [sortDir, setSortDir] = useState(defaultSortType || null);
173
- const [sortCol, setSortCol] = useState(defaultSortedColumn || null);
174
- const [page, setPage] = useState(1);
175
- const [listWidth, setListWidth] = useState(null);
176
- const [pageLoading, setPageLoading] = useState(false);
177
- const columnsWithSort = useMemo(() => columns.filter(_ref => {
178
- let {
179
- sortable
180
- } = _ref;
181
- return typeof sortable === 'boolean' ? sortable : sortableColumns;
182
- }), [columns, sortableColumns]);
183
- const sortedRows = useMemo(() => {
184
- if (isSortControlled || !sortDir) return rows;
185
- const column = columns.find(col => col.dataKey === sortCol) || {};
186
- const sortFn = column.sortFn ? (prev, next) => column.sortFn(prev, next, sortCol, sortDir, column.formatter, column.removeSymbol) : (prev, next) => defaultSortFn(prev, next, sortCol, sortDir);
187
- if (sortDir !== null) return [...rows].sort(sortFn);
188
- return rows;
189
- }, [isSortControlled, sortDir, rows, columns, sortCol]);
190
- const handleSortChange = useCallback(() => {
191
- const dir = !sortDir ? 'asc' : sortDir === 'asc' ? 'desc' : null;
192
- const sortedColValue = isSortControlled ? sortedColumn : sortCol;
193
- const column = columns.find(col => col[columnKey] === sortedColValue) || {};
194
- if (sortCol) {
195
- !isSortControlled && setSortDir(dir);
196
- }
197
- onSortChange && onSortChange({
198
- column
199
- }, sortCol, dir);
200
- }, [sortDir, columns, sortCol, onSortChange, columnKey, sortedColumn, isSortControlled]);
201
- const handlePageLoad = useCallback(_ref2 => {
202
- let {
203
- stopIndex
204
- } = _ref2;
205
- const loadedCount = stopIndex + 1;
206
- if (loadedCount === rowsCount) return false;
207
- if (loadedCount === rowsPerPage * page) {
208
- const newPage = page + 1;
209
- onPaginationChange(newPage, rowsPerPage);
210
- setPageLoading(true);
211
- setPage(newPage);
212
- }
213
- }, [rowsCount, rowsPerPage, page, onPaginationChange]);
214
- useEffect(() => {
215
- if (!loading) setPageLoading(false);
216
- }, [loading]);
217
- const sortedRowsLength = sortedRows.length;
218
- const cache = useMemo(() => new CellMeasurerCache({
219
- minHeight: 75,
220
- defaultHeight: 200,
221
- fixedWidth: true
222
- }), []);
223
- const rowRenderer = _ref3 => {
224
- let {
225
- index,
226
- style,
227
- parent
228
- } = _ref3;
229
- const {
230
- onClick,
231
- ...restItem
232
- } = sortedRows[index];
233
- return /*#__PURE__*/React__default.createElement(CellMeasurer, {
234
- cache: cache,
235
- columnIndex: 0,
236
- key: index,
237
- parent: parent,
238
- rowIndex: index
239
- }, /*#__PURE__*/React__default.createElement(Card, _extends({}, restItem, {
240
- style: {
241
- top: style.top
242
- },
243
- closeWithOutsideClick: closeWithOutsideClick,
244
- isCustomScrollElement: isCustomScrollElement,
245
- rowExtraClickMenuTitle: rowExtraClickMenuTitle,
246
- getExpandIconDisableState: getExpandIconDisableState,
247
- onRowClick: onClick,
248
- index: index,
249
- columnKey: columnKey,
250
- columnLimit: columnLimit,
251
- rowActionBar: rowActionBar,
252
- getPopupProps: getPopupProps,
253
- rowExtraClick: rowExtraClick,
254
- isEditMode: isEditMode,
255
- rowExtraClickNeeded: rowExtraClickNeeded,
256
- rowHeightCache: cache,
257
- row: restItem,
258
- columns: columns,
259
- className: rowClassName,
260
- shadow: shadow,
261
- border: border,
262
- virtualizedList: virtualizedList.current,
263
- viewCardText: viewCardText,
264
- expandText: expandText,
265
- cancelText: cancelText,
266
- expandedText: expandedText,
267
- expandedCloseText: expandedCloseText,
268
- renderRowNestedChildren: renderRowNestedChildren
269
- })));
270
- };
271
- const handleColumnChange = useCallback(_ref4 => {
272
- let {
273
- [columnKey]: value,
274
- ...rest
275
- } = _ref4;
276
- setSortCol(value);
277
- setSortDir(null);
278
- onColumnChange && onColumnChange(value, rest);
279
- }, [columnKey, onColumnChange]);
280
- const customScrollElement = isCustomScrollElement && scrollElement ? scrollElement.current : undefined;
281
- return /*#__PURE__*/React__default.createElement("div", _extends({
282
- className: classnames('mobile-table-holder', className)
283
- }, restProps), sortedRows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, customSubHeader, !!Object.keys(totals).length && /*#__PURE__*/React__default.createElement("div", {
284
- className: "mc-widgets-holder"
285
- }, /*#__PURE__*/React__default.createElement("ul", null, columns.map(_ref5 => {
286
- let {
287
- text,
288
- widgetColor,
289
- [columnKey]: unique
290
- } = _ref5;
291
- return totals[unique] && /*#__PURE__*/React__default.createElement("li", {
292
- key: unique
293
- }, /*#__PURE__*/React__default.createElement(Widget, {
294
- type: "colorful",
295
- title: text,
296
- color: widgetColor,
297
- text: totals[unique],
298
- size: "small"
299
- }));
300
- }))), /*#__PURE__*/React__default.createElement("div", {
301
- className: "mobile-table-head"
302
- }, !!columnsWithSort.length && /*#__PURE__*/React__default.createElement("ul", null, /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("button", {
303
- className: "mobile-sort-button",
304
- onClick: handleSortChange
305
- }, /*#__PURE__*/React__default.createElement("p", {
306
- className: classnames({
307
- active: sortDir || sortType
308
- })
309
- }, sortByText), /*#__PURE__*/React__default.createElement("div", {
310
- className: "mobile-sort-icons"
311
- }, /*#__PURE__*/React__default.createElement(Icon, {
312
- type: "bc-icon-sorting-down",
313
- className: classnames({
314
- active: sortDir === 'desc' || isSortControlled && sortType === 'desc'
315
- })
316
- }), /*#__PURE__*/React__default.createElement(Icon, {
317
- type: "bc-icon-sorting-up",
318
- className: classnames({
319
- active: sortDir === 'asc' || isSortControlled && sortType === 'asc'
320
- })
321
- })))), /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement(Dropdown, {
322
- data: columnsWithSort,
323
- defaultValue: isSortControlled ? sortedColumn : sortCol || null,
324
- onChange: handleColumnChange,
325
- placeholder: sortingPlaceholder,
326
- labelKey: "text",
327
- valueKey: columnKey
328
- }))), /*#__PURE__*/React__default.createElement("div", {
329
- className: "mt-results-holder"
330
- }, resultText, " ", rowsCount || rows.length)), /*#__PURE__*/React__default.createElement("div", {
331
- className: "mobile-table-body",
332
- style: {
333
- height: '100%'
334
- },
335
- ref: ref => ref && setListWidth(ref.clientWidth)
336
- }, listWidth && (!isCustomScrollElement || scrollElement.current) && /*#__PURE__*/React__default.createElement(InfiniteLoader, {
337
- minimumBatchSize: 0,
338
- threshold: 0,
339
- isRowLoaded: index => !!sortedRows[index],
340
- loadMoreRows: handlePageLoad,
341
- rowCount: sortedRowsLength
342
- }, _ref6 => {
343
- let {
344
- onRowsRendered
345
- } = _ref6;
346
- return /*#__PURE__*/React__default.createElement(WindowScroller, {
347
- scrollElement: customScrollElement
348
- }, _ref7 => {
349
- let {
350
- height = 0,
351
- scrollTop,
352
- isScrolling
353
- } = _ref7;
354
- return /*#__PURE__*/React__default.createElement(List, {
355
- ref: virtualizedList,
356
- autoHeight: true,
357
- height: height,
358
- onRowsRendered: onRowsRendered,
359
- isScrolling: isScrolling,
360
- rowCount: sortedRowsLength,
361
- rowHeight: row => cache.rowHeight(row),
362
- rowRenderer: rowRenderer,
363
- scrollTop: scrollTop,
364
- width: listWidth
365
- });
366
- });
367
- }))) : /*#__PURE__*/React__default.createElement("div", {
368
- className: "cards-empty-holder"
369
- }, emptyContent), loading && /*#__PURE__*/React__default.createElement("div", {
370
- className: classnames('mobile-table-loading', {
371
- 'absolute-splash': !pageLoading
372
- })
373
- }, /*#__PURE__*/React__default.createElement(BusyLoader, {
374
- spinnerSize: pageLoading ? 'big' : 'small'
375
- })));
376
- }
377
- CardList.propTypes = {
378
- /**
379
- * Show busy wrapper
380
- */
381
- loading: PropTypes.bool,
382
- /**
383
- * Is have shadow
384
- */
385
- shadow: PropTypes.bool,
386
- /**
387
- * Is have border
388
- */
389
- border: PropTypes.bool,
390
- /**
391
- * Is card in edit mode
392
- */
393
- isEditMode: PropTypes.bool,
394
- /**
395
- * Text for showing result
396
- */
397
- resultText: PropTypes.string,
398
- /**
399
- * Classname for card items
400
- */
401
- rowClassName: PropTypes.string,
402
- /**
403
- * Classname for card list
404
- */
405
- className: PropTypes.string,
406
- /**
407
- * Type of sorting when it's controlled
408
- */
409
- sortType: PropTypes.oneOf(['asc', 'desc', null]),
410
- /**
411
- * DataKey of column which was sorted
412
- */
413
- sortedColumn: PropTypes.string,
414
- /**
415
- * DataKey of column which was sorted by default
416
- */
417
- defaultSortedColumn: PropTypes.string,
418
- /**
419
- * Type of default sorting
420
- */
421
- defaultSortType: PropTypes.oneOf(['asc', 'desc', null]),
422
- /**
423
- * Title for rowExtraClick menu item
424
- */
425
- rowExtraClickMenuTitle: PropTypes.string,
426
- /**
427
- * Function which should return boolean
428
- */
429
- getExpandIconDisableState: PropTypes.func,
430
- /**
431
- * Custom elements for sub header
432
- */
433
- customSubHeader: PropTypes.node,
434
- /**
435
- * Are columns sortable?
436
- */
437
- sortableColumns: PropTypes.bool,
438
- /**
439
- * Pass this function to catch sorting event and get related data
440
- * ((type: string, dataKey: sting, column: PropTypes.columns[item]) => void
441
- */
442
- onSortChange: PropTypes.func,
443
- /**
444
- * Placeholder for sorting dropdown
445
- */
446
- sortingPlaceholder: PropTypes.string,
447
- /**
448
- * sortFn: Custom sort function for columns.((prev: PropTypes.rows[item], next: PropTypes.rows[item], rows: PropTypes.rows, dataKey: string) => {
449
- * if (prev is less than next by some ordering criterion) {
450
- * return -1;
451
- * }
452
- * if (prev is greater than next by the ordering criterion) {
453
- * return 1;
454
- * }
455
- * prev is equal to next
456
- * return 0;
457
- * }
458
- * })
459
- *
460
- * text: Text value for columns
461
- *
462
- * render: Function to render custom text.((column: PropTypes.columns[item], index: number, isEditActive: boolean) => return any)
463
- *
464
- * sortable: Allows sorting if true
465
- *
466
- * resizable: Allows resizing if true
467
- *
468
- * current column's data key
469
- *
470
- * draggable: Allows dragging if true
471
- *
472
- * colRenderer: Render custom component on certain column of each row. ((value: string || number, index: number, row: PropTypes.rows[item], isEditActive: boolean) => {
473
- * return <div>Hello World</div>})
474
- *
475
- * getter: Function to define custom text. ((row: PropTypes.rows[item], index: number, isEditActive: boolean)) => {
476
- * return some string
477
- * })
478
- *
479
- * formatter: Function tp format displaying text. ((middleText: string, row: PropTypes.rows[item], index: number, isEditActive: boolean) => {
480
- * return some string
481
- * })
482
- *
483
- */
484
- columns: PropTypes.arrayOf(PropTypes.shape({
485
- sortFn: PropTypes.func,
486
- ...oneIsRequired({
487
- text: PropTypes.node,
488
- render: PropTypes.func
489
- }),
490
- sortable: PropTypes.bool,
491
- resizable: PropTypes.bool,
492
- dataKey: PropTypes.string,
493
- draggable: PropTypes.bool,
494
- colRenderer: PropTypes.func,
495
- getter: PropTypes.func,
496
- formatter: PropTypes.func,
497
- hide: PropTypes.bool
498
- })).isRequired,
499
- /**
500
- * Key from column's data which value is surely unique
501
- */
502
- columnKey: PropTypes.string.isRequired,
503
- /**
504
- * hasHover: Allow hovering
505
- * data: rows column's data
506
- * nestedTable: object of columns: array of objects and rows: array of objects
507
- * className: additional className for row element
508
- * render: Render custom component on (row: PropTypes.rows[item] index: number) => {
509
- * return <div>Hello World</div>})
510
- */
511
- rows: PropTypes.arrayOf(PropTypes.shape({
512
- /**
513
- * Expand button disabled state
514
- */
515
- expandDisabled: PropTypes.bool,
516
- data: PropTypes.object,
517
- className: PropTypes.string,
518
- render: PropTypes.func
519
- })),
520
- /**
521
- * Rows total count
522
- */
523
- rowsCount: PropTypes.number,
524
- /**
525
- * Number of columns that will be shown
526
- */
527
- columnLimit: PropTypes.number,
528
- /**
529
- * Function which will return Array of objects as row's action bar on the right corner of the row. ((row: PropTypes.rows[item] ,index: number) => [])
530
- */
531
- rowActionBar: PropTypes.func,
532
- /**
533
- * Function which will return props for mobile popup. ((row: PropTypes.rows[item] ,index: number) => {})
534
- */
535
- getPopupProps: PropTypes.func,
536
- /**
537
- * Text for View Card
538
- */
539
- viewCardText: PropTypes.string,
540
- /**
541
- * Text for Expand
542
- */
543
- expandText: PropTypes.string,
544
- /**
545
- * Text for Cancel
546
- */
547
- cancelText: PropTypes.string,
548
- /**
549
- * Key from row's data which value is surely unique
550
- */
551
- rowKey: PropTypes.string.isRequired,
552
- /**
553
- * Will render when there are no rows to render
554
- */
555
- emptyContent: PropTypes.node,
556
- /**
557
- * Text for Expanded popup close button
558
- */
559
- expandedCloseText: PropTypes.string,
560
- /**
561
- * Text for Expanded popup title
562
- */
563
- expandedText: PropTypes.string,
564
- /**
565
- * Function which should return null or another
566
- * Function which will return valid node
567
- */
568
- renderRowNestedChildren: PropTypes.func,
569
- /**
570
- * Function will be called when page changes (page, rowsPerPage) => void
571
- */
572
- onPaginationChange: PropTypes.func,
573
- /**
574
- * Rows count per page
575
- */
576
- rowsPerPage: PropTypes.number,
577
- /**
578
- * Text for sort by
579
- */
580
- sortByText: PropTypes.string,
581
- /**
582
- * Object with dataKeys and totals
583
- */
584
- totals: PropTypes.object,
585
- /**
586
- * Extra click function for rows. ((e: event object, data: object, index: number, row: PropTypes.rows[item]) => custom logic)
587
- */
588
- rowExtraClick: PropTypes.func,
589
- /**
590
- * Function for determining which rows should have extra click. ((e: event object, data: object, index: number, row: PropTypes.rows[item]) => return true or false)
591
- */
592
- rowExtraClickNeeded: PropTypes.oneOfType([PropTypes.func, PropTypes.bool])
593
- };
594
- CardList.defaultProps = {
595
- totals: {},
596
- resultText: 'Result:',
597
- sortByText: 'Sort by',
598
- onPaginationChange: noop,
599
- emptyContent: /*#__PURE__*/React__default.createElement(Empty, {
600
- title: "No data to display"
601
- }),
602
- columnKey: 'dataKey',
603
- sortingPlaceholder: 'Column',
604
- rowExtraClickNeeded: noop,
605
- sortableColumns: false,
606
- columnLimit: 6,
607
- shadow: true,
608
- border: true,
609
- rowsPerPage: 20
610
- };
611
-
612
- function WrapperTableContainer(_ref) {
613
- let {
614
- name,
615
- titleActions,
616
- className,
617
- paperProps,
618
- withTitle,
619
- customSubHeader,
620
- ...cardProps
621
- } = _ref;
622
- return /*#__PURE__*/React__default.createElement(PaperWrapper, _extends({
623
- className: classnames(className)
624
- }, paperProps), withTitle ? /*#__PURE__*/React__default.createElement(WithTitle, {
625
- name: name,
626
- actions: titleActions
627
- }, customSubHeader, /*#__PURE__*/React__default.createElement(CardList, cardProps)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, customSubHeader, /*#__PURE__*/React__default.createElement(CardList, cardProps)));
628
- }
629
- WrapperTableContainer.propTypes = {
630
- /**
631
- * Module title name
632
- */
633
- name: PropTypes.node,
634
- /**
635
- * Actions for ModuleTitle component
636
- */
637
- titleActions: PropTypes.node,
638
- /**
639
- * Custom elements for sub header
640
- */
641
- customSubHeader: PropTypes.node,
642
- /**
643
- * Classname for card list
644
- */
645
- className: PropTypes.string,
646
- /**
647
- * Props for Paper component
648
- */
649
- paperProps: PropTypes.shape({
650
- ...PaperWrapper.propTypes
651
- }),
652
- /**
653
- * Show/Hide ModuleTitle component
654
- */
655
- withTitle: PropTypes.bool,
656
- ...CardList.propTypes
657
- };
658
- WrapperTableContainer.defaultProps = {
659
- ...CardList.defaultProps
660
- };
661
-
662
- export { CardList, WrapperTableContainer as WrappedCardList };