@capillarytech/blaze-ui 0.1.4-alpha.3 → 0.1.4-alpha.6

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.
@@ -0,0 +1,163 @@
1
+ /**
2
+ * CapTable - Migrated to Ant Design v5
3
+ */
4
+ import React, { useEffect, useRef, useCallback } from 'react';
5
+ import PropTypes from 'prop-types';
6
+ import { throttle } from 'lodash';
7
+ import { Table } from 'antd';
8
+ import styled from 'styled-components';
9
+ import classNames from 'classnames';
10
+ import { CAP_G07 } from '../styled/variables';
11
+ import LocaleHoc from '../LocaleHoc';
12
+
13
+ const StyledTable = styled(Table)`
14
+ &.cap-table-v2 {
15
+ .ant-table {
16
+ border: 1px solid ${CAP_G07};
17
+ }
18
+ }
19
+
20
+ &.show-loader {
21
+ .ant-table-body > table > tbody::after {
22
+ content: '${(props) => props.loadMoreData}';
23
+ display: flex;
24
+ justify-content: center;
25
+ position: absolute;
26
+ width: 100%;
27
+ align-items: center;
28
+ height: 60px;
29
+ text-align: center;
30
+ font-size: 16px;
31
+ color: gray;
32
+ border-top: 1px solid ${CAP_G07};
33
+ }
34
+ }
35
+ `;
36
+
37
+ const CapTable = ({
38
+ id,
39
+ className,
40
+ children,
41
+ infinteScroll,
42
+ pagination,
43
+ dataSource,
44
+ offset_limit,
45
+ setPagination,
46
+ scroll,
47
+ showLoader,
48
+ ...rest
49
+ }) => {
50
+ const setPaginationCalled = useRef(false);
51
+ const onScrollThrottle = useRef(
52
+ throttle((event) => {
53
+ const maxScroll = event.target.scrollHeight - event.target.clientHeight;
54
+ const currentScroll = event.target.scrollTop;
55
+
56
+ if (currentScroll >= maxScroll - 10 && !showLoader) {
57
+ const offsetLimit = { ...offset_limit };
58
+ offsetLimit.offset += offsetLimit.limit;
59
+ setPagination?.(offsetLimit);
60
+ }
61
+ }, 50),
62
+ ).current;
63
+
64
+ const addScrollEventListener = useCallback(() => {
65
+ const listTable = document.querySelector(`#${id} div.ant-table-body`);
66
+ if (listTable) {
67
+ listTable.addEventListener('scroll', onScrollThrottle);
68
+ }
69
+ }, [id, onScrollThrottle]);
70
+
71
+ const callSetPaginationIfNotOverflow = useCallback(() => {
72
+ const yscrollheight = scroll?.y || 0;
73
+ const listTable = document.querySelector(`#${id} div.ant-table-body`);
74
+ let isOverflow = false;
75
+
76
+ if (yscrollheight && yscrollheight < listTable?.scrollHeight) {
77
+ isOverflow = true;
78
+ }
79
+
80
+ if (!isOverflow && setPagination && dataSource?.length > 0) {
81
+ setPaginationCalled.current = true;
82
+ const offsetLimit = { ...offset_limit };
83
+ offsetLimit.offset += offsetLimit.limit;
84
+ setPagination(offsetLimit);
85
+ }
86
+ }, [id, scroll?.y, setPagination, dataSource, offset_limit]);
87
+
88
+ useEffect(() => {
89
+ const limit = offset_limit?.limit || 10;
90
+ if (infinteScroll) {
91
+ addScrollEventListener();
92
+ if (dataSource?.length >= limit) {
93
+ callSetPaginationIfNotOverflow();
94
+ }
95
+ }
96
+
97
+ return () => {
98
+ const listTable = document.querySelector(`#${id} div.ant-table-body`);
99
+ if (listTable) {
100
+ listTable.removeEventListener('scroll', onScrollThrottle);
101
+ }
102
+ };
103
+ }, [
104
+ infinteScroll,
105
+ dataSource,
106
+ offset_limit,
107
+ addScrollEventListener,
108
+ callSetPaginationIfNotOverflow,
109
+ id,
110
+ onScrollThrottle,
111
+ ]);
112
+
113
+ useEffect(() => {
114
+ const limit = offset_limit?.limit || 10;
115
+ if (
116
+ !setPaginationCalled.current &&
117
+ infinteScroll &&
118
+ dataSource?.length >= limit
119
+ ) {
120
+ callSetPaginationIfNotOverflow();
121
+ }
122
+ }, [infinteScroll, dataSource, offset_limit, callSetPaginationIfNotOverflow]);
123
+
124
+ return (
125
+ <StyledTable
126
+ {...rest}
127
+ id={id}
128
+ dataSource={dataSource}
129
+ scroll={scroll}
130
+ pagination={infinteScroll ? false : pagination}
131
+ className={classNames('cap-table-v2', className, {
132
+ 'show-loader': showLoader,
133
+ })}
134
+ />
135
+ );
136
+ };
137
+
138
+ CapTable.propTypes = {
139
+ id: PropTypes.string.isRequired,
140
+ className: PropTypes.string,
141
+ children: PropTypes.node,
142
+ infinteScroll: PropTypes.bool,
143
+ pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
144
+ dataSource: PropTypes.array,
145
+ offset_limit: PropTypes.shape({
146
+ offset: PropTypes.number,
147
+ limit: PropTypes.number,
148
+ }),
149
+ setPagination: PropTypes.func,
150
+ scroll: PropTypes.object,
151
+ showLoader: PropTypes.bool,
152
+ };
153
+
154
+ CapTable.defaultProps = {
155
+ infinteScroll: false,
156
+ showLoader: false,
157
+ offset_limit: {
158
+ offset: 0,
159
+ limit: 10,
160
+ },
161
+ };
162
+
163
+ export default LocaleHoc(CapTable, { key: 'CapTable' });
@@ -0,0 +1 @@
1
+ export { default } from './CapTable';
@@ -0,0 +1,100 @@
1
+ import { css } from 'styled-components';
2
+ import * as styledVars from '../styled/variables';
3
+
4
+ export const tableStyles = css`
5
+ .ant-table {
6
+ border: 1px solid ${styledVars.CAP_G07};
7
+
8
+ .ant-table-thead > tr > th {
9
+ color: ${styledVars.CAP_G01};
10
+ font-size: ${styledVars.FONT_SIZE_S};
11
+ line-height: ${styledVars.SPACING_16};
12
+ background-color: ${styledVars.CAP_G10};
13
+ text-align: left;
14
+ }
15
+
16
+ .ant-table-thead > tr > th,
17
+ .ant-table-tbody > tr > td {
18
+ padding: ${styledVars.SPACING_16} ${styledVars.SPACING_24};
19
+ }
20
+
21
+ .ant-table-tbody > tr > td {
22
+ border-bottom: 1px solid ${styledVars.CAP_G07};
23
+ }
24
+
25
+ .ant-table-tbody > tr:last-child > td {
26
+ border-bottom: none;
27
+ }
28
+
29
+ .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
30
+ .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
31
+ .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,
32
+ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
33
+ background-color: ${styledVars.CAP_G09};
34
+ }
35
+
36
+ .ant-table-thead > tr > th .ant-table-column-sorter-up,
37
+ .ant-table-thead > tr > th .ant-table-column-sorter-down {
38
+ &.active {
39
+ color: ${styledVars.CAP_G01};
40
+ }
41
+ &:not(.active) {
42
+ color: ${styledVars.CAP_G06};
43
+ }
44
+ }
45
+
46
+ .ant-table-thead {
47
+ .table-children {
48
+ padding: 6px ${styledVars.SPACING_24} 16px;
49
+ position: relative;
50
+ }
51
+
52
+ .table-parent {
53
+ padding-bottom: 0;
54
+ padding-left: ${styledVars.SPACING_24};
55
+ }
56
+
57
+ .table-children.show-separator:not(:last-child)::after {
58
+ content: "";
59
+ height: 8px;
60
+ width: 1px;
61
+ right: 0;
62
+ top: 30%;
63
+ background-color: ${styledVars.CAP_G07};
64
+ position: absolute;
65
+ }
66
+ }
67
+
68
+ .ant-table-thead > tr > th .ant-table-column-sorter {
69
+ vertical-align: unset;
70
+ }
71
+
72
+ .ant-table-body table {
73
+ table-layout: fixed;
74
+ width: 100%;
75
+ }
76
+ }
77
+
78
+ &.no-pagination-loader {
79
+ .ant-table-body > table > tbody::after {
80
+ content: '';
81
+ height: unset;
82
+ display: none;
83
+ }
84
+ }
85
+
86
+ &.hide-hover {
87
+ .ant-table {
88
+ .ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
89
+ .ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,
90
+ .ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,
91
+ .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
92
+ background: none;
93
+ }
94
+ }
95
+ }
96
+
97
+ a {
98
+ color: ${styledVars.CAP_G01};
99
+ }
100
+ `;
@@ -0,0 +1,126 @@
1
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
+ var _excluded = ["id", "className", "children", "infinteScroll", "pagination", "dataSource", "offset_limit", "setPagination", "scroll", "showLoader"];
3
+ function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
4
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
+ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
7
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
8
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
9
+ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
10
+ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
11
+ /**
12
+ * CapTable - Migrated to Ant Design v5
13
+ */
14
+ import React, { useEffect, useRef, useCallback } from 'react';
15
+ import PropTypes from 'prop-types';
16
+ import { throttle } from 'lodash';
17
+ import { Table } from 'antd';
18
+ import styled from 'styled-components';
19
+ import classNames from 'classnames';
20
+ import { CAP_G07 } from '../styled/variables';
21
+ import LocaleHoc from '../LocaleHoc';
22
+ var StyledTable = styled(Table).withConfig({
23
+ displayName: "StyledTable",
24
+ componentId: "sc-o01z1q-0"
25
+ })(["&.cap-table-v2{.ant-table{border:1px solid ", ";}}&.show-loader{.ant-table-body > table > tbody::after{content:'", "';display:flex;justify-content:center;position:absolute;width:100%;align-items:center;height:60px;text-align:center;font-size:16px;color:gray;border-top:1px solid ", ";}}"], CAP_G07, function (props) {
26
+ return props.loadMoreData;
27
+ }, CAP_G07);
28
+ var CapTable = function CapTable(_ref) {
29
+ var id = _ref.id,
30
+ className = _ref.className,
31
+ children = _ref.children,
32
+ infinteScroll = _ref.infinteScroll,
33
+ pagination = _ref.pagination,
34
+ dataSource = _ref.dataSource,
35
+ offset_limit = _ref.offset_limit,
36
+ setPagination = _ref.setPagination,
37
+ scroll = _ref.scroll,
38
+ showLoader = _ref.showLoader,
39
+ rest = _objectWithoutProperties(_ref, _excluded);
40
+ var setPaginationCalled = useRef(false);
41
+ var onScrollThrottle = useRef(throttle(function (event) {
42
+ var maxScroll = event.target.scrollHeight - event.target.clientHeight;
43
+ var currentScroll = event.target.scrollTop;
44
+ if (currentScroll >= maxScroll - 10 && !showLoader) {
45
+ var offsetLimit = _objectSpread({}, offset_limit);
46
+ offsetLimit.offset += offsetLimit.limit;
47
+ setPagination === null || setPagination === void 0 ? void 0 : setPagination(offsetLimit);
48
+ }
49
+ }, 50)).current;
50
+ var addScrollEventListener = useCallback(function () {
51
+ var listTable = document.querySelector("#".concat(id, " div.ant-table-body"));
52
+ if (listTable) {
53
+ listTable.addEventListener('scroll', onScrollThrottle);
54
+ }
55
+ }, [id, onScrollThrottle]);
56
+ var callSetPaginationIfNotOverflow = useCallback(function () {
57
+ var yscrollheight = (scroll === null || scroll === void 0 ? void 0 : scroll.y) || 0;
58
+ var listTable = document.querySelector("#".concat(id, " div.ant-table-body"));
59
+ var isOverflow = false;
60
+ if (yscrollheight && yscrollheight < (listTable === null || listTable === void 0 ? void 0 : listTable.scrollHeight)) {
61
+ isOverflow = true;
62
+ }
63
+ if (!isOverflow && setPagination && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) > 0) {
64
+ setPaginationCalled.current = true;
65
+ var offsetLimit = _objectSpread({}, offset_limit);
66
+ offsetLimit.offset += offsetLimit.limit;
67
+ setPagination(offsetLimit);
68
+ }
69
+ }, [id, scroll === null || scroll === void 0 ? void 0 : scroll.y, setPagination, dataSource, offset_limit]);
70
+ useEffect(function () {
71
+ var limit = (offset_limit === null || offset_limit === void 0 ? void 0 : offset_limit.limit) || 10;
72
+ if (infinteScroll) {
73
+ addScrollEventListener();
74
+ if ((dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) >= limit) {
75
+ callSetPaginationIfNotOverflow();
76
+ }
77
+ }
78
+ return function () {
79
+ var listTable = document.querySelector("#".concat(id, " div.ant-table-body"));
80
+ if (listTable) {
81
+ listTable.removeEventListener('scroll', onScrollThrottle);
82
+ }
83
+ };
84
+ }, [infinteScroll, dataSource, offset_limit, addScrollEventListener, callSetPaginationIfNotOverflow, id, onScrollThrottle]);
85
+ useEffect(function () {
86
+ var limit = (offset_limit === null || offset_limit === void 0 ? void 0 : offset_limit.limit) || 10;
87
+ if (!setPaginationCalled.current && infinteScroll && (dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) >= limit) {
88
+ callSetPaginationIfNotOverflow();
89
+ }
90
+ }, [infinteScroll, dataSource, offset_limit, callSetPaginationIfNotOverflow]);
91
+ return /*#__PURE__*/React.createElement(StyledTable, _extends({}, rest, {
92
+ id: id,
93
+ dataSource: dataSource,
94
+ scroll: scroll,
95
+ pagination: infinteScroll ? false : pagination,
96
+ className: classNames('cap-table-v2', className, {
97
+ 'show-loader': showLoader
98
+ })
99
+ }));
100
+ };
101
+ CapTable.propTypes = {
102
+ id: PropTypes.string.isRequired,
103
+ className: PropTypes.string,
104
+ children: PropTypes.node,
105
+ infinteScroll: PropTypes.bool,
106
+ pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
107
+ dataSource: PropTypes.array,
108
+ offset_limit: PropTypes.shape({
109
+ offset: PropTypes.number,
110
+ limit: PropTypes.number
111
+ }),
112
+ setPagination: PropTypes.func,
113
+ scroll: PropTypes.object,
114
+ showLoader: PropTypes.bool
115
+ };
116
+ CapTable.defaultProps = {
117
+ infinteScroll: false,
118
+ showLoader: false,
119
+ offset_limit: {
120
+ offset: 0,
121
+ limit: 10
122
+ }
123
+ };
124
+ export default LocaleHoc(CapTable, {
125
+ key: 'CapTable'
126
+ });
@@ -0,0 +1 @@
1
+ export { default } from './CapTable';
@@ -0,0 +1,3 @@
1
+ import { css } from 'styled-components';
2
+ import * as styledVars from '../styled/variables';
3
+ export var tableStyles = css([".ant-table{border:1px solid ", ";.ant-table-thead > tr > th{color:", ";font-size:", ";line-height:", ";background-color:", ";text-align:left;}.ant-table-thead > tr > th,.ant-table-tbody > tr > td{padding:", " ", ";}.ant-table-tbody > tr > td{border-bottom:1px solid ", ";}.ant-table-tbody > tr:last-child > td{border-bottom:none;}.ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,.ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,.ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td{background-color:", ";}.ant-table-thead > tr > th .ant-table-column-sorter-up,.ant-table-thead > tr > th .ant-table-column-sorter-down{&.active{color:", ";}&:not(.active){color:", ";}}.ant-table-thead{.table-children{padding:6px ", " 16px;position:relative;}.table-parent{padding-bottom:0;padding-left:", ";}.table-children.show-separator:not(:last-child)::after{content:\"\";height:8px;width:1px;right:0;top:30%;background-color:", ";position:absolute;}}.ant-table-thead > tr > th .ant-table-column-sorter{vertical-align:unset;}.ant-table-body table{table-layout:fixed;width:100%;}}&.no-pagination-loader{.ant-table-body > table > tbody::after{content:'';height:unset;display:none;}}&.hide-hover{.ant-table{.ant-table-thead > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,.ant-table-tbody > tr.ant-table-row-hover:not(.ant-table-expanded-row) > td,.ant-table-thead > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td{background:none;}}}a{color:", ";}"], styledVars.CAP_G07, styledVars.CAP_G01, styledVars.FONT_SIZE_S, styledVars.SPACING_16, styledVars.CAP_G10, styledVars.SPACING_16, styledVars.SPACING_24, styledVars.CAP_G07, styledVars.CAP_G09, styledVars.CAP_G01, styledVars.CAP_G06, styledVars.SPACING_24, styledVars.SPACING_24, styledVars.CAP_G07, styledVars.CAP_G01);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/blaze-ui",
3
3
  "author": "Capillary Technologies",
4
- "version": "0.1.4-alpha.3",
4
+ "version": "0.1.4-alpha.6",
5
5
  "description": "Capillary UI component library with Ant Design v5",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/esm/index.js",