@tecsinapse/react-web-kit 1.6.6 → 1.7.1
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.
- package/CHANGELOG.md +44 -0
- package/dist/components/atoms/Overlay/styled.js +1 -2
- package/dist/components/atoms/Overlay/styled.js.map +1 -1
- package/dist/components/molecules/Select/styled.js +0 -3
- package/dist/components/molecules/Select/styled.js.map +1 -1
- package/dist/components/molecules/TextArea/TextArea.d.ts +6 -0
- package/dist/components/molecules/TextArea/TextArea.js +87 -0
- package/dist/components/molecules/TextArea/TextArea.js.map +1 -0
- package/dist/components/molecules/TextArea/index.d.ts +1 -0
- package/dist/components/molecules/TextArea/index.js +24 -0
- package/dist/components/molecules/TextArea/index.js.map +1 -0
- package/dist/components/molecules/TextArea/styled.d.ts +4 -0
- package/dist/components/molecules/TextArea/styled.js +26 -0
- package/dist/components/molecules/TextArea/styled.js.map +1 -0
- package/dist/components/organisms/DataGrid/DataGrid.d.ts +2 -1
- package/dist/components/organisms/DataGrid/DataGrid.js +6 -3
- package/dist/components/organisms/DataGrid/DataGrid.js.map +1 -1
- package/dist/components/organisms/DataGrid/utils.d.ts +1 -1
- package/dist/components/organisms/DataGrid/utils.js +1 -1
- package/dist/components/organisms/DataGrid/utils.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +17 -1
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
- package/src/components/atoms/Overlay/styled.ts +2 -2
- package/src/components/molecules/Select/styled.ts +0 -1
- package/src/components/molecules/TextArea/TextArea.stories.tsx +24 -0
- package/src/components/molecules/TextArea/TextArea.tsx +86 -0
- package/src/components/molecules/TextArea/index.ts +1 -0
- package/src/components/molecules/TextArea/styled.ts +23 -0
- package/src/components/organisms/DataGrid/DatGrid.stories.tsx +33 -0
- package/src/components/organisms/DataGrid/DataGrid.tsx +28 -13
- package/src/components/organisms/DataGrid/utils.ts +3 -2
- package/src/index.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,50 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.7.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.7.0...@tecsinapse/react-web-kit@1.7.1) (2021-09-22)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* data grid paginating when pagination is disabled ([d7a676e](https://github.com/tecsinapse/design-system/commit/d7a676e6d622cfbdbd09a3e354a557a00fee16c3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [1.7.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.8...@tecsinapse/react-web-kit@1.7.0) (2021-09-21)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* text area ([35ce0ba](https://github.com/tecsinapse/design-system/commit/35ce0ba36aeb9c3d90db19d077e0741e417c65e0))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
## [1.6.8](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.7...@tecsinapse/react-web-kit@1.6.8) (2021-09-21)
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Bug Fixes
|
|
32
|
+
|
|
33
|
+
* overlay z-index ([9367ffb](https://github.com/tecsinapse/design-system/commit/9367ffb4e0fce9a9bcb10b528578e9d3d83d7c58))
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
## [1.6.7](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.6...@tecsinapse/react-web-kit@1.6.7) (2021-09-20)
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
### Bug Fixes
|
|
43
|
+
|
|
44
|
+
* select z-index ([72b9d80](https://github.com/tecsinapse/design-system/commit/72b9d80a88d652417ff8bc46082761a459d27fa3))
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
6
50
|
## [1.6.6](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.5...@tecsinapse/react-web-kit@1.6.6) (2021-09-20)
|
|
7
51
|
|
|
8
52
|
|
|
@@ -22,9 +22,8 @@ const StyledOverlay = (0, _styled.default)('div')`
|
|
|
22
22
|
display: flex;
|
|
23
23
|
z-index: ${({
|
|
24
24
|
theme,
|
|
25
|
-
show,
|
|
26
25
|
zIndex
|
|
27
|
-
}) =>
|
|
26
|
+
}) => theme.zIndex[zIndex] - 1};
|
|
28
27
|
cursor: ${({
|
|
29
28
|
show
|
|
30
29
|
}) => show ? 'pointer' : 'default'};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/atoms/Overlay/styled.ts"],"names":["StyledOverlay","theme","miscellaneous","overlay","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/atoms/Overlay/styled.ts"],"names":["StyledOverlay","theme","miscellaneous","overlay","zIndex","show"],"mappings":";;;;;;;AAAA;;AACA;;;;AAIO,MAAMA,aAAa,GAAG,qBAAO,KAAP,CAAmD;AAChF,gBAAgB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KACZ,yBAASA,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AAC/C;AACA;AACA;AACA;AACA;AACA,aAAa,CAAC;AAAEF,EAAAA,KAAF;AAASG,EAAAA;AAAT,CAAD,KACTH,KAAK,CAACG,MAAN,CAAaA,MAAb,IAAuB,CAAE;AAC7B,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,IAAI,GAAG,SAAH,GAAe,SAAW;AACzD;AACA;AACA;AACA,CAdO","sourcesContent":["import styled from '@emotion/styled';\nimport { hex2rgba, StyleProps, ZIndex } from '@tecsinapse/react-core';\n\ntype InjectedProps = { show: boolean; zIndex: keyof ZIndex };\n\nexport const StyledOverlay = styled('div')<Partial<StyleProps> & InjectedProps>`\n background: ${({ theme }: StyleProps) =>\n hex2rgba(theme.miscellaneous.overlay, 0.5)};\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n z-index: ${({ theme, zIndex }: StyleProps & InjectedProps) =>\n theme.zIndex[zIndex] - 1};\n cursor: ${({ show }) => (show ? 'pointer' : 'default')};\n position: fixed;\n align-items: center;\n justify-content: center;\n`;\n"],"file":"styled.js"}
|
|
@@ -20,9 +20,6 @@ const StyledContainer = (0, _styled.default)('div')`
|
|
|
20
20
|
exports.StyledContainer = StyledContainer;
|
|
21
21
|
const StyledInputContainer = (0, _styled.default)('div')`
|
|
22
22
|
width: 100%;
|
|
23
|
-
z-index: ${({
|
|
24
|
-
theme
|
|
25
|
-
}) => theme.zIndex.input};
|
|
26
23
|
`;
|
|
27
24
|
exports.StyledInputContainer = StyledInputContainer;
|
|
28
25
|
//# sourceMappingURL=styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/molecules/Select/styled.ts"],"names":["StyledContainer","StyledInputContainer"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/Select/styled.ts"],"names":["StyledContainer","StyledInputContainer"],"mappings":";;;;;;;AAAA;;;;AAGO,MAAMA,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE;AACA;AACA;AACA;AACA;AACA;AACA,CAPO;;AASA,MAAMC,oBAAoB,GAAG,qBAAO,KAAP,CAAmC;AACvE;AACA,CAFO","sourcesContent":["import styled from '@emotion/styled';\nimport { StyleProps } from '@tecsinapse/react-core';\n\nexport const StyledContainer = styled('div')<Partial<StyleProps>>`\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n width: 100%;\n position: relative;\n`;\n\nexport const StyledInputContainer = styled('div')<Partial<StyleProps>>`\n width: 100%;\n`;\n"],"file":"styled.js"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactCore = require("@tecsinapse/react-core");
|
|
11
|
+
|
|
12
|
+
var _styled = require("./styled");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
|
+
|
|
18
|
+
const TextArea = ({
|
|
19
|
+
label,
|
|
20
|
+
labelColor,
|
|
21
|
+
labelColorVariant,
|
|
22
|
+
labelColorTone,
|
|
23
|
+
labelTypography,
|
|
24
|
+
labelStack,
|
|
25
|
+
labelWeight,
|
|
26
|
+
leftComponent,
|
|
27
|
+
rightComponent,
|
|
28
|
+
disabled,
|
|
29
|
+
style,
|
|
30
|
+
borderColor,
|
|
31
|
+
borderColorGradation,
|
|
32
|
+
inputFontStack = 'default',
|
|
33
|
+
inputFontWeight = 'bold',
|
|
34
|
+
inputContainerStyle,
|
|
35
|
+
variant = 'default',
|
|
36
|
+
hintComponent,
|
|
37
|
+
hint,
|
|
38
|
+
onFocus,
|
|
39
|
+
onBlur,
|
|
40
|
+
value,
|
|
41
|
+
maxLength,
|
|
42
|
+
...rest
|
|
43
|
+
}) => {
|
|
44
|
+
const {
|
|
45
|
+
focused,
|
|
46
|
+
handleBlur,
|
|
47
|
+
handleFocus
|
|
48
|
+
} = (0, _reactCore.useInputFocus)(onFocus, onBlur, !disabled);
|
|
49
|
+
return _react.default.createElement(_reactCore.TextArea, {
|
|
50
|
+
label: label,
|
|
51
|
+
labelColor: labelColor,
|
|
52
|
+
labelColorVariant: labelColorVariant,
|
|
53
|
+
labelColorTone: labelColorTone,
|
|
54
|
+
labelTypography: labelTypography,
|
|
55
|
+
labelStack: labelStack,
|
|
56
|
+
labelWeight: labelWeight,
|
|
57
|
+
LabelComponent: _reactCore.Text,
|
|
58
|
+
leftComponent: leftComponent,
|
|
59
|
+
rightComponent: rightComponent,
|
|
60
|
+
borderColor: borderColor,
|
|
61
|
+
borderColorGradation: borderColorGradation,
|
|
62
|
+
inputContainerStyle: inputContainerStyle,
|
|
63
|
+
focused: focused,
|
|
64
|
+
disabled: disabled,
|
|
65
|
+
variant: variant,
|
|
66
|
+
value: value,
|
|
67
|
+
hintComponent: hintComponent,
|
|
68
|
+
hint: hint,
|
|
69
|
+
style: style,
|
|
70
|
+
TextComponent: _reactCore.Text,
|
|
71
|
+
maxLength: maxLength
|
|
72
|
+
}, _react.default.createElement(_styled.StyledWebInput, _extends({}, rest, {
|
|
73
|
+
fontStack: inputFontStack,
|
|
74
|
+
fontWeight: inputFontWeight,
|
|
75
|
+
disabled: disabled,
|
|
76
|
+
onFocus: handleFocus,
|
|
77
|
+
onBlur: handleBlur,
|
|
78
|
+
textAlignVertical: 'top',
|
|
79
|
+
multiline: true,
|
|
80
|
+
value: value,
|
|
81
|
+
maxLength: maxLength
|
|
82
|
+
})));
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
var _default = TextArea;
|
|
86
|
+
exports.default = _default;
|
|
87
|
+
//# sourceMappingURL=TextArea.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/TextArea/TextArea.tsx"],"names":["TextArea","label","labelColor","labelColorVariant","labelColorTone","labelTypography","labelStack","labelWeight","leftComponent","rightComponent","disabled","style","borderColor","borderColorGradation","inputFontStack","inputFontWeight","inputContainerStyle","variant","hintComponent","hint","onFocus","onBlur","value","maxLength","rest","focused","handleBlur","handleFocus","Text"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;;;;;AAKA,MAAMA,QAA2B,GAAG,CAAC;AACnCC,EAAAA,KADmC;AAEnCC,EAAAA,UAFmC;AAGnCC,EAAAA,iBAHmC;AAInCC,EAAAA,cAJmC;AAKnCC,EAAAA,eALmC;AAMnCC,EAAAA,UANmC;AAOnCC,EAAAA,WAPmC;AAQnCC,EAAAA,aARmC;AASnCC,EAAAA,cATmC;AAUnCC,EAAAA,QAVmC;AAWnCC,EAAAA,KAXmC;AAYnCC,EAAAA,WAZmC;AAanCC,EAAAA,oBAbmC;AAcnCC,EAAAA,cAAc,GAAG,SAdkB;AAenCC,EAAAA,eAAe,GAAG,MAfiB;AAgBnCC,EAAAA,mBAhBmC;AAiBnCC,EAAAA,OAAO,GAAG,SAjByB;AAkBnCC,EAAAA,aAlBmC;AAmBnCC,EAAAA,IAnBmC;AAoBnCC,EAAAA,OApBmC;AAqBnCC,EAAAA,MArBmC;AAsBnCC,EAAAA,KAtBmC;AAuBnCC,EAAAA,SAvBmC;AAwBnC,KAAGC;AAxBgC,CAAD,KAyB9B;AACJ,QAAM;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,UAAX;AAAuBC,IAAAA;AAAvB,MAAuC,8BAC3CP,OAD2C,EAE3CC,MAF2C,EAG3C,CAACX,QAH0C,CAA7C;AAMA,SACE,6BAAC,mBAAD;AACE,IAAA,KAAK,EAAET,KADT;AAEE,IAAA,UAAU,EAAEC,UAFd;AAGE,IAAA,iBAAiB,EAAEC,iBAHrB;AAIE,IAAA,cAAc,EAAEC,cAJlB;AAKE,IAAA,eAAe,EAAEC,eALnB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,WAAW,EAAEC,WAPf;AAQE,IAAA,cAAc,EAAEqB,eARlB;AASE,IAAA,aAAa,EAAEpB,aATjB;AAUE,IAAA,cAAc,EAAEC,cAVlB;AAWE,IAAA,WAAW,EAAEG,WAXf;AAYE,IAAA,oBAAoB,EAAEC,oBAZxB;AAaE,IAAA,mBAAmB,EAAEG,mBAbvB;AAcE,IAAA,OAAO,EAAES,OAdX;AAeE,IAAA,QAAQ,EAAEf,QAfZ;AAgBE,IAAA,OAAO,EAAEO,OAhBX;AAiBE,IAAA,KAAK,EAAEK,KAjBT;AAkBE,IAAA,aAAa,EAAEJ,aAlBjB;AAmBE,IAAA,IAAI,EAAEC,IAnBR;AAoBE,IAAA,KAAK,EAAER,KApBT;AAqBE,IAAA,aAAa,EAAEiB,eArBjB;AAsBE,IAAA,SAAS,EAAEL;AAtBb,KAwBE,6BAAC,sBAAD,eACMC,IADN;AAEE,IAAA,SAAS,EAAEV,cAFb;AAGE,IAAA,UAAU,EAAEC,eAHd;AAIE,IAAA,QAAQ,EAAEL,QAJZ;AAKE,IAAA,OAAO,EAAEiB,WALX;AAME,IAAA,MAAM,EAAED,UANV;AAOE,IAAA,iBAAiB,EAAE,KAPrB;AAQE,IAAA,SAAS,MARX;AASE,IAAA,KAAK,EAAEJ,KATT;AAUE,IAAA,SAAS,EAAEC;AAVb,KAxBF,CADF;AAuCD,CAvED;;eAyEevB,Q","sourcesContent":["import React, { FC } from 'react';\nimport {\n useInputFocus,\n TextAreaProps as ITACore,\n TextArea as TACore,\n Text,\n} from '@tecsinapse/react-core';\nimport { StyledWebInput } from './styled';\n\nexport interface TextAreaProps\n extends Omit<ITACore, 'TextComponent' | 'focused'> {}\n\nconst TextArea: FC<TextAreaProps> = ({\n label,\n labelColor,\n labelColorVariant,\n labelColorTone,\n labelTypography,\n labelStack,\n labelWeight,\n leftComponent,\n rightComponent,\n disabled,\n style,\n borderColor,\n borderColorGradation,\n inputFontStack = 'default',\n inputFontWeight = 'bold',\n inputContainerStyle,\n variant = 'default',\n hintComponent,\n hint,\n onFocus,\n onBlur,\n value,\n maxLength,\n ...rest\n}) => {\n const { focused, handleBlur, handleFocus } = useInputFocus(\n onFocus,\n onBlur,\n !disabled\n );\n\n return (\n <TACore\n label={label}\n labelColor={labelColor}\n labelColorVariant={labelColorVariant}\n labelColorTone={labelColorTone}\n labelTypography={labelTypography}\n labelStack={labelStack}\n labelWeight={labelWeight}\n LabelComponent={Text}\n leftComponent={leftComponent}\n rightComponent={rightComponent}\n borderColor={borderColor}\n borderColorGradation={borderColorGradation}\n inputContainerStyle={inputContainerStyle}\n focused={focused}\n disabled={disabled}\n variant={variant}\n value={value}\n hintComponent={hintComponent}\n hint={hint}\n style={style}\n TextComponent={Text}\n maxLength={maxLength}\n >\n <StyledWebInput\n {...rest}\n fontStack={inputFontStack}\n fontWeight={inputFontWeight}\n disabled={disabled}\n onFocus={handleFocus}\n onBlur={handleBlur}\n textAlignVertical={'top'}\n multiline\n value={value}\n maxLength={maxLength}\n />\n </TACore>\n );\n};\n\nexport default TextArea;\n"],"file":"TextArea.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TextArea, TextAreaProps } from './TextArea';
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "TextArea", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _TextArea.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "TextAreaProps", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _TextArea.TextAreaProps;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
var _TextArea = _interopRequireWildcard(require("./TextArea"));
|
|
20
|
+
|
|
21
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
22
|
+
|
|
23
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
24
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/TextArea/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as TextArea, TextAreaProps } from './TextArea';\n"],"file":"index.js"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.StyledWebInput = void 0;
|
|
7
|
+
|
|
8
|
+
var _native = _interopRequireDefault(require("@emotion/native"));
|
|
9
|
+
|
|
10
|
+
var _reactCore = require("@tecsinapse/react-core");
|
|
11
|
+
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
|
+
|
|
14
|
+
const StyledWebInput = (0, _native.default)(_reactCore.TextAreaInputBase)`
|
|
15
|
+
font-weight: ${({
|
|
16
|
+
theme,
|
|
17
|
+
fontWeight = 'regular'
|
|
18
|
+
}) => theme.font.weight[fontWeight]};
|
|
19
|
+
font-family: ${({
|
|
20
|
+
theme,
|
|
21
|
+
fontStack = 'default'
|
|
22
|
+
}) => `'${theme.font.stack[fontStack]}'`};
|
|
23
|
+
outline-width: 0;
|
|
24
|
+
`;
|
|
25
|
+
exports.StyledWebInput = StyledWebInput;
|
|
26
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/molecules/TextArea/styled.ts"],"names":["StyledWebInput","TextAreaInputBase","theme","fontWeight","font","weight","fontStack","stack"],"mappings":";;;;;;;AAAA;;AACA;;;;AAaO,MAAMA,cAAc,GAAG,qBAAOC,4BAAP,CAE5B;AACF,iBAAiB,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbD,KAAK,CAACE,IAAN,CAAWC,MAAX,CAAkBF,UAAlB,CAA8B;AAClC,iBAAiB,CAAC;AAAED,EAAAA,KAAF;AAASI,EAAAA,SAAS,GAAG;AAArB,CAAD,KACZ,IAAGJ,KAAK,CAACE,IAAN,CAAWG,KAAX,CAAiBD,SAAjB,CAA4B,GAAG;AACvC;AACA,CARO","sourcesContent":["import styled from '@emotion/native';\nimport {\n FontStackType,\n FontWeightType,\n StyleProps,\n TextAreaInputBase,\n} from '@tecsinapse/react-core';\nimport { TextAreaProps } from './TextArea';\n\ninterface Font {\n fontStack?: FontStackType;\n fontWeight?: FontWeightType;\n}\n\nexport const StyledWebInput = styled(TextAreaInputBase)<\n Font & Partial<TextAreaProps> & Partial<StyleProps>\n>`\n font-weight: ${({ theme, fontWeight = 'regular' }) =>\n theme.font.weight[fontWeight]};\n font-family: ${({ theme, fontStack = 'default' }) =>\n `'${theme.font.stack[fontStack]}'`};\n outline-width: 0;\n`;\n"],"file":"styled.js"}
|
|
@@ -23,6 +23,7 @@ export interface DataGridProps<Data> {
|
|
|
23
23
|
loading?: boolean;
|
|
24
24
|
skeletonComponent?: React.ReactNode;
|
|
25
25
|
style?: CSSProperties;
|
|
26
|
+
emptyPlaceholder?: React.ReactNode;
|
|
26
27
|
}
|
|
27
|
-
declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, style, }: DataGridProps<Data>) => JSX.Element;
|
|
28
|
+
declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, style, emptyPlaceholder, }: DataGridProps<Data>) => JSX.Element;
|
|
28
29
|
export default DataGrid;
|
|
@@ -43,7 +43,8 @@ const DataGrid = ({
|
|
|
43
43
|
onPageChange,
|
|
44
44
|
loading = false,
|
|
45
45
|
skeletonComponent,
|
|
46
|
-
style
|
|
46
|
+
style,
|
|
47
|
+
emptyPlaceholder
|
|
47
48
|
}) => {
|
|
48
49
|
if (selectable && (!selectedRows || !onSelectedRows)) {
|
|
49
50
|
throw new Error('[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)');
|
|
@@ -79,7 +80,7 @@ const DataGrid = ({
|
|
|
79
80
|
rowKeyExtractor: rowKeyExtractor,
|
|
80
81
|
selectedRows: selectedRows,
|
|
81
82
|
onSelected: onSelectedRows
|
|
82
|
-
}), !loading ? _react.default.createElement(_Table.TBody, null, (0, _utils.getData)(data, rowsCount, page, rowsPerPage).map(item => _react.default.createElement(_Row.Row, {
|
|
83
|
+
}), !loading ? _react.default.createElement(_Table.TBody, null, data.length > 0 ? (0, _utils.getData)(data, rowsCount, page, rowsPerPage, pagination).map(item => _react.default.createElement(_Row.Row, {
|
|
83
84
|
key: rowKeyExtractor(item),
|
|
84
85
|
rowKeyExtractor: rowKeyExtractor,
|
|
85
86
|
handleSelect: handleSelect,
|
|
@@ -87,7 +88,9 @@ const DataGrid = ({
|
|
|
87
88
|
headers: headers,
|
|
88
89
|
data: item,
|
|
89
90
|
checked: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.some(sel => rowKeyExtractor(sel) === rowKeyExtractor(item))
|
|
90
|
-
}))
|
|
91
|
+
})) : _react.default.createElement("tr", null, _react.default.createElement("td", {
|
|
92
|
+
colSpan: 99
|
|
93
|
+
}, emptyPlaceholder))) : _react.default.createElement(_Table.TBody, null, [...Array(rowsPerPage).keys()].map(idx => _react.default.createElement(_Table.Tr, {
|
|
91
94
|
key: `skeleton-${idx}`
|
|
92
95
|
}, _react.default.createElement(_Table.Td, {
|
|
93
96
|
colSpan: 99,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","style","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;AACA;;AAEA;;AACA;;AACA;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","style","emptyPlaceholder","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\nimport {\n Table,\n TableToolbar,\n TableContainer,\n Tr,\n Td,\n TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data> {\n headers: HeadersType<Data>[];\n data: Data[];\n /** Unique identifier for row data */\n rowKeyExtractor: (data: Data) => string;\n toolbarRightIcons?: React.ReactNode;\n toolbarFooter?: React.ReactNode;\n toolbarTitle: string;\n /** Enable rows selection */\n selectable?: boolean;\n /** Selected items */\n selectedRows?: Data[];\n /** Selection handler */\n onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n /** Shows pagination controls */\n pagination?: boolean;\n /** Results per page */\n rowsPerPage?: number;\n /** Results per page handler */\n onRowsPerPageChange?: (value: number) => void;\n rowsPerPageOptions?: number[];\n rowsPerPageLabel?: (value: number) => string;\n /** Export button label */\n exportLabel?: string;\n exportFunction?: () => void;\n /** Total data elements. Only specify this property if your data is server-side */\n rowsCount?: number;\n /** Current page. Always start in 0 */\n page?: number;\n /** Current page handler */\n onPageChange?: (page: number) => void;\n /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n loading?: boolean;\n /** Custom skeleton component for better visual */\n skeletonComponent?: React.ReactNode;\n /** CSS style spread to TableContainer */\n style?: CSSProperties;\n /** Empty state placeholder */\n emptyPlaceholder?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data extends unknown>({\n headers,\n data,\n rowKeyExtractor,\n toolbarTitle,\n toolbarFooter,\n toolbarRightIcons,\n selectable = false,\n selectedRows = [],\n onSelectedRows,\n pagination = false,\n rowsPerPage = 10,\n onRowsPerPageChange,\n rowsPerPageOptions: _rowsPerPageOptions,\n rowsPerPageLabel: _rowsPerPageLabel,\n exportLabel = 'Exportar',\n exportFunction,\n rowsCount,\n page = 0,\n onPageChange,\n loading = false,\n skeletonComponent,\n style,\n emptyPlaceholder,\n}: DataGridProps<Data>): JSX.Element => {\n if (selectable && (!selectedRows || !onSelectedRows)) {\n throw new Error(\n '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n );\n }\n\n const rowsPerPageLabel = React.useCallback(\n value =>\n _rowsPerPageLabel\n ? _rowsPerPageLabel(value)\n : `Exibir por página: ${value} itens`,\n [_rowsPerPageLabel]\n );\n const rowsPerPageOptions = React.useMemo(\n () => _rowsPerPageOptions ?? [10, 25, 50],\n [_rowsPerPageOptions]\n );\n\n const handleSelect = React.useCallback(\n (current, checked) => {\n if (checked) {\n onSelectedRows?.(prevState => [...prevState, current]);\n return;\n }\n\n onSelectedRows?.(prevState => {\n const idx = prevState.findIndex(\n el => rowKeyExtractor(el) === rowKeyExtractor(current)\n );\n return [...removeElement(prevState, idx)];\n });\n },\n [onSelectedRows, rowKeyExtractor]\n );\n\n return (\n <TableContainer style={style}>\n <TableToolbar\n title={toolbarTitle}\n rightIcons={toolbarRightIcons}\n footer={toolbarFooter}\n />\n <Table>\n <Header\n selectable={selectable}\n headers={headers}\n data={data}\n rowsCount={rowsCount ?? data.length}\n rowKeyExtractor={rowKeyExtractor}\n selectedRows={selectedRows}\n onSelected={onSelectedRows}\n />\n\n {!loading ? (\n <TBody>\n {data.length > 0 ? (\n getData(\n data,\n rowsCount,\n page,\n rowsPerPage,\n pagination\n ).map(item => (\n <Row\n key={rowKeyExtractor(item)}\n rowKeyExtractor={rowKeyExtractor}\n handleSelect={handleSelect}\n selectable={selectable}\n headers={headers}\n data={item}\n checked={selectedRows?.some(\n sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n )}\n />\n ))\n ) : (\n <tr>\n <td colSpan={99}>{emptyPlaceholder}</td>\n </tr>\n )}\n </TBody>\n ) : (\n <TBody>\n {[...Array(rowsPerPage).keys()].map(idx => (\n <Tr key={`skeleton-${idx}`}>\n <Td colSpan={99} style={{ padding: 0 }}>\n {skeletonComponent ?? (\n <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n <div style={{ width: '100%' }} />\n </Skeleton>\n )}\n </Td>\n </Tr>\n ))}\n </TBody>\n )}\n\n <Footer\n exportFunction={exportFunction}\n exportLabel={exportLabel}\n rowsPerPageLabel={rowsPerPageLabel}\n rowsPerPage={rowsPerPage}\n onRowsPerPageChange={onRowsPerPageChange}\n rowsPerPageOptions={rowsPerPageOptions}\n rowsCount={rowsCount ?? data.length}\n page={page}\n onPageChange={onPageChange}\n pagination={pagination}\n />\n </Table>\n </TableContainer>\n );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.js"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare function removeElement<T>(arr: T[], index: number): T[];
|
|
2
|
-
export declare const getData: <Data>(data: Data[], rowsCount: number | undefined, page: number, rowsPerPage: number) => Data[];
|
|
2
|
+
export declare const getData: <Data>(data: Data[], rowsCount: number | undefined, page: number, rowsPerPage: number, pagination: boolean) => Data[];
|
|
@@ -12,7 +12,7 @@ function removeElement(arr, index) {
|
|
|
12
12
|
return data;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
const getData = (data, rowsCount, page, rowsPerPage) => rowsCount ? data : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
|
|
15
|
+
const getData = (data, rowsCount, page, rowsPerPage, pagination) => rowsCount || !pagination ? data : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
|
|
16
16
|
|
|
17
17
|
exports.getData = getData;
|
|
18
18
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/utils.ts"],"names":["removeElement","arr","index","data","splice","getData","rowsCount","page","rowsPerPage","slice"],"mappings":";;;;;;;;AAAO,SAASA,aAAT,CAA0BC,GAA1B,EAAoCC,KAApC,EAAwD;AAC7D,QAAMC,IAAI,GAAGF,GAAb;AACAE,EAAAA,IAAI,CAACC,MAAL,CAAYF,KAAZ,EAAmB,CAAnB;AACA,SAAOC,IAAP;AACD;;AAEM,MAAME,OAAO,GAAG,CACrBF,IADqB,EAErBG,SAFqB,EAGrBC,IAHqB,EAIrBC,WAJqB,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/utils.ts"],"names":["removeElement","arr","index","data","splice","getData","rowsCount","page","rowsPerPage","pagination","slice"],"mappings":";;;;;;;;AAAO,SAASA,aAAT,CAA0BC,GAA1B,EAAoCC,KAApC,EAAwD;AAC7D,QAAMC,IAAI,GAAGF,GAAb;AACAE,EAAAA,IAAI,CAACC,MAAL,CAAYF,KAAZ,EAAmB,CAAnB;AACA,SAAOC,IAAP;AACD;;AAEM,MAAME,OAAO,GAAG,CACrBF,IADqB,EAErBG,SAFqB,EAGrBC,IAHqB,EAIrBC,WAJqB,EAKrBC,UALqB,KAOrBH,SAAS,IAAI,CAACG,UAAd,GACIN,IADJ,GAEIA,IAAI,CAACO,KAAL,CAAWH,IAAI,GAAGC,WAAlB,EAA+BD,IAAI,GAAGC,WAAP,GAAqBA,WAApD,CATC","sourcesContent":["export function removeElement<T>(arr: T[], index: number): T[] {\n const data = arr; // Sometimes looks like the data is removed from table, check if this is a bug. I'm copying the arr to a new variable for security reasons\n data.splice(index, 1);\n return data;\n}\n\nexport const getData = <Data>(\n data: Data[],\n rowsCount: number | undefined,\n page: number,\n rowsPerPage: number,\n pagination: boolean\n): Data[] =>\n rowsCount || !pagination\n ? data\n : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);\n"],"file":"utils.js"}
|
package/dist/index.d.ts
CHANGED
|
@@ -13,4 +13,5 @@ export { Skeleton, SkeletonProps } from './components/atoms/Skeleton';
|
|
|
13
13
|
export { Accordion, AccordionProps } from './components/atoms/Accordion';
|
|
14
14
|
export { DataGrid, DataGridProps, HeadersType, } from './components/organisms/DataGrid';
|
|
15
15
|
export { Modal, ModalProps } from './components/atoms/Modal';
|
|
16
|
+
export { TextArea, TextAreaProps } from './components/molecules/TextArea';
|
|
16
17
|
export * from './hooks';
|
package/dist/index.js
CHANGED
|
@@ -37,7 +37,9 @@ var _exportNames = {
|
|
|
37
37
|
DataGridProps: true,
|
|
38
38
|
HeadersType: true,
|
|
39
39
|
Modal: true,
|
|
40
|
-
ModalProps: true
|
|
40
|
+
ModalProps: true,
|
|
41
|
+
TextArea: true,
|
|
42
|
+
TextAreaProps: true
|
|
41
43
|
};
|
|
42
44
|
Object.defineProperty(exports, "Badge", {
|
|
43
45
|
enumerable: true,
|
|
@@ -243,6 +245,18 @@ Object.defineProperty(exports, "ModalProps", {
|
|
|
243
245
|
return _Modal.ModalProps;
|
|
244
246
|
}
|
|
245
247
|
});
|
|
248
|
+
Object.defineProperty(exports, "TextArea", {
|
|
249
|
+
enumerable: true,
|
|
250
|
+
get: function () {
|
|
251
|
+
return _TextArea.TextArea;
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
Object.defineProperty(exports, "TextAreaProps", {
|
|
255
|
+
enumerable: true,
|
|
256
|
+
get: function () {
|
|
257
|
+
return _TextArea.TextAreaProps;
|
|
258
|
+
}
|
|
259
|
+
});
|
|
246
260
|
|
|
247
261
|
var _reactCore = require("@tecsinapse/react-core");
|
|
248
262
|
|
|
@@ -286,6 +300,8 @@ var _DataGrid = require("./components/organisms/DataGrid");
|
|
|
286
300
|
|
|
287
301
|
var _Modal = require("./components/atoms/Modal");
|
|
288
302
|
|
|
303
|
+
var _TextArea = require("./components/molecules/TextArea");
|
|
304
|
+
|
|
289
305
|
var _hooks = require("./hooks");
|
|
290
306
|
|
|
291
307
|
Object.keys(_hooks).forEach(function (key) {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n default as Badge,\n BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n Button,\n useMouseHover,\n WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n InputPassword,\n InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport {\n Menubar,\n MenubarProps,\n MenubarOptionsType,\n MenubarItemsOptions,\n MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n Breadcrumbs,\n BreadcrumbsProps,\n BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n DataGrid,\n DataGridProps,\n HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport * from './hooks';\n"],"file":"index.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-web-kit",
|
|
3
3
|
"description": "TecSinapse React components",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.7.1",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"@emotion/native": "^11.0.0",
|
|
15
15
|
"@emotion/react": "^11.4.1",
|
|
16
16
|
"@emotion/styled": "^11.3.0",
|
|
17
|
-
"@tecsinapse/react-core": "^1.
|
|
17
|
+
"@tecsinapse/react-core": "^1.7.0",
|
|
18
18
|
"react-native-vector-icons": "^8.1.0",
|
|
19
19
|
"react-transition-group": "^4.4.2"
|
|
20
20
|
},
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"react-dom": ">=16.8.0",
|
|
33
33
|
"react-native-web": "^0.17.1"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "4348311e4287597e4d145255da8b1060d266fbf2"
|
|
36
36
|
}
|
|
@@ -11,8 +11,8 @@ export const StyledOverlay = styled('div')<Partial<StyleProps> & InjectedProps>`
|
|
|
11
11
|
right: 0;
|
|
12
12
|
bottom: 0;
|
|
13
13
|
display: flex;
|
|
14
|
-
z-index: ${({ theme,
|
|
15
|
-
|
|
14
|
+
z-index: ${({ theme, zIndex }: StyleProps & InjectedProps) =>
|
|
15
|
+
theme.zIndex[zIndex] - 1};
|
|
16
16
|
cursor: ${({ show }) => (show ? 'pointer' : 'default')};
|
|
17
17
|
position: fixed;
|
|
18
18
|
align-items: center;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Story } from '@storybook/react';
|
|
3
|
+
import TextArea, { TextAreaProps } from './TextArea';
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
title: 'Hybrid/Text Area',
|
|
7
|
+
component: TextArea,
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const Template: Story<TextAreaProps> = ({ value: _value, ...args }) => {
|
|
11
|
+
const [value, setValue] = React.useState(_value);
|
|
12
|
+
return <TextArea {...args} value={value} onChange={arg => setValue(arg)} />;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const Base = Template.bind({});
|
|
16
|
+
|
|
17
|
+
Base.args = {
|
|
18
|
+
value:
|
|
19
|
+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar leo vel est egestas laoreet. Nam facilisis, dui vitae convallis convallis, erat felis ornare massa, non auctor libero tortor eu nisi.',
|
|
20
|
+
numberOfLines: 3,
|
|
21
|
+
maxLength: 255,
|
|
22
|
+
label: 'Label',
|
|
23
|
+
placeholder: 'Placeholder',
|
|
24
|
+
};
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import React, { FC } from 'react';
|
|
2
|
+
import {
|
|
3
|
+
useInputFocus,
|
|
4
|
+
TextAreaProps as ITACore,
|
|
5
|
+
TextArea as TACore,
|
|
6
|
+
Text,
|
|
7
|
+
} from '@tecsinapse/react-core';
|
|
8
|
+
import { StyledWebInput } from './styled';
|
|
9
|
+
|
|
10
|
+
export interface TextAreaProps
|
|
11
|
+
extends Omit<ITACore, 'TextComponent' | 'focused'> {}
|
|
12
|
+
|
|
13
|
+
const TextArea: FC<TextAreaProps> = ({
|
|
14
|
+
label,
|
|
15
|
+
labelColor,
|
|
16
|
+
labelColorVariant,
|
|
17
|
+
labelColorTone,
|
|
18
|
+
labelTypography,
|
|
19
|
+
labelStack,
|
|
20
|
+
labelWeight,
|
|
21
|
+
leftComponent,
|
|
22
|
+
rightComponent,
|
|
23
|
+
disabled,
|
|
24
|
+
style,
|
|
25
|
+
borderColor,
|
|
26
|
+
borderColorGradation,
|
|
27
|
+
inputFontStack = 'default',
|
|
28
|
+
inputFontWeight = 'bold',
|
|
29
|
+
inputContainerStyle,
|
|
30
|
+
variant = 'default',
|
|
31
|
+
hintComponent,
|
|
32
|
+
hint,
|
|
33
|
+
onFocus,
|
|
34
|
+
onBlur,
|
|
35
|
+
value,
|
|
36
|
+
maxLength,
|
|
37
|
+
...rest
|
|
38
|
+
}) => {
|
|
39
|
+
const { focused, handleBlur, handleFocus } = useInputFocus(
|
|
40
|
+
onFocus,
|
|
41
|
+
onBlur,
|
|
42
|
+
!disabled
|
|
43
|
+
);
|
|
44
|
+
|
|
45
|
+
return (
|
|
46
|
+
<TACore
|
|
47
|
+
label={label}
|
|
48
|
+
labelColor={labelColor}
|
|
49
|
+
labelColorVariant={labelColorVariant}
|
|
50
|
+
labelColorTone={labelColorTone}
|
|
51
|
+
labelTypography={labelTypography}
|
|
52
|
+
labelStack={labelStack}
|
|
53
|
+
labelWeight={labelWeight}
|
|
54
|
+
LabelComponent={Text}
|
|
55
|
+
leftComponent={leftComponent}
|
|
56
|
+
rightComponent={rightComponent}
|
|
57
|
+
borderColor={borderColor}
|
|
58
|
+
borderColorGradation={borderColorGradation}
|
|
59
|
+
inputContainerStyle={inputContainerStyle}
|
|
60
|
+
focused={focused}
|
|
61
|
+
disabled={disabled}
|
|
62
|
+
variant={variant}
|
|
63
|
+
value={value}
|
|
64
|
+
hintComponent={hintComponent}
|
|
65
|
+
hint={hint}
|
|
66
|
+
style={style}
|
|
67
|
+
TextComponent={Text}
|
|
68
|
+
maxLength={maxLength}
|
|
69
|
+
>
|
|
70
|
+
<StyledWebInput
|
|
71
|
+
{...rest}
|
|
72
|
+
fontStack={inputFontStack}
|
|
73
|
+
fontWeight={inputFontWeight}
|
|
74
|
+
disabled={disabled}
|
|
75
|
+
onFocus={handleFocus}
|
|
76
|
+
onBlur={handleBlur}
|
|
77
|
+
textAlignVertical={'top'}
|
|
78
|
+
multiline
|
|
79
|
+
value={value}
|
|
80
|
+
maxLength={maxLength}
|
|
81
|
+
/>
|
|
82
|
+
</TACore>
|
|
83
|
+
);
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
export default TextArea;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as TextArea, TextAreaProps } from './TextArea';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import styled from '@emotion/native';
|
|
2
|
+
import {
|
|
3
|
+
FontStackType,
|
|
4
|
+
FontWeightType,
|
|
5
|
+
StyleProps,
|
|
6
|
+
TextAreaInputBase,
|
|
7
|
+
} from '@tecsinapse/react-core';
|
|
8
|
+
import { TextAreaProps } from './TextArea';
|
|
9
|
+
|
|
10
|
+
interface Font {
|
|
11
|
+
fontStack?: FontStackType;
|
|
12
|
+
fontWeight?: FontWeightType;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const StyledWebInput = styled(TextAreaInputBase)<
|
|
16
|
+
Font & Partial<TextAreaProps> & Partial<StyleProps>
|
|
17
|
+
>`
|
|
18
|
+
font-weight: ${({ theme, fontWeight = 'regular' }) =>
|
|
19
|
+
theme.font.weight[fontWeight]};
|
|
20
|
+
font-family: ${({ theme, fontStack = 'default' }) =>
|
|
21
|
+
`'${theme.font.stack[fontStack]}'`};
|
|
22
|
+
outline-width: 0;
|
|
23
|
+
`;
|
|
@@ -5,11 +5,13 @@ import {
|
|
|
5
5
|
GroupButtonOption,
|
|
6
6
|
GroupButtonValue,
|
|
7
7
|
Icon,
|
|
8
|
+
Text,
|
|
8
9
|
} from '@tecsinapse/react-core';
|
|
9
10
|
import DataGrid from './DataGrid';
|
|
10
11
|
import { Input } from '../../atoms/Input';
|
|
11
12
|
import { Skeleton } from '../../atoms/Skeleton';
|
|
12
13
|
import { HeadersType } from './types';
|
|
14
|
+
import styled from '@emotion/styled';
|
|
13
15
|
|
|
14
16
|
export default {
|
|
15
17
|
title: 'Web/Data Grid',
|
|
@@ -214,3 +216,34 @@ ClientSide.args = {
|
|
|
214
216
|
exportFunction: () => alert('Export handler'),
|
|
215
217
|
pagination: true,
|
|
216
218
|
};
|
|
219
|
+
|
|
220
|
+
const EmptyContainer = styled('div')`
|
|
221
|
+
display: flex;
|
|
222
|
+
flex-direction: column;
|
|
223
|
+
align-items: center;
|
|
224
|
+
`;
|
|
225
|
+
|
|
226
|
+
const EmptyState = React.memo(() => (
|
|
227
|
+
<EmptyContainer>
|
|
228
|
+
<Icon name="eye-off-outline" type={'material-community'} size={'mega'} />
|
|
229
|
+
<Text typography="h2" fontWeight="bold">
|
|
230
|
+
There is nothing to see
|
|
231
|
+
</Text>
|
|
232
|
+
<Text typography="h5">You may have to take another action first</Text>
|
|
233
|
+
</EmptyContainer>
|
|
234
|
+
));
|
|
235
|
+
|
|
236
|
+
const TemplateEmpty: Story = args => {
|
|
237
|
+
return (
|
|
238
|
+
<DataGrid
|
|
239
|
+
headers={HEADERS}
|
|
240
|
+
data={[]}
|
|
241
|
+
rowKeyExtractor={() => ''}
|
|
242
|
+
toolbarTitle="Empty Grid"
|
|
243
|
+
emptyPlaceholder={<EmptyState />}
|
|
244
|
+
{...args}
|
|
245
|
+
/>
|
|
246
|
+
);
|
|
247
|
+
};
|
|
248
|
+
|
|
249
|
+
export const EmptyGrid = TemplateEmpty.bind({});
|
|
@@ -51,6 +51,8 @@ export interface DataGridProps<Data> {
|
|
|
51
51
|
skeletonComponent?: React.ReactNode;
|
|
52
52
|
/** CSS style spread to TableContainer */
|
|
53
53
|
style?: CSSProperties;
|
|
54
|
+
/** Empty state placeholder */
|
|
55
|
+
emptyPlaceholder?: React.ReactNode;
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
/** Note: Consider memoizing functions for a better performance */
|
|
@@ -77,6 +79,7 @@ const DataGrid = <Data extends unknown>({
|
|
|
77
79
|
loading = false,
|
|
78
80
|
skeletonComponent,
|
|
79
81
|
style,
|
|
82
|
+
emptyPlaceholder,
|
|
80
83
|
}: DataGridProps<Data>): JSX.Element => {
|
|
81
84
|
if (selectable && (!selectedRows || !onSelectedRows)) {
|
|
82
85
|
throw new Error(
|
|
@@ -133,19 +136,31 @@ const DataGrid = <Data extends unknown>({
|
|
|
133
136
|
|
|
134
137
|
{!loading ? (
|
|
135
138
|
<TBody>
|
|
136
|
-
{
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
139
|
+
{data.length > 0 ? (
|
|
140
|
+
getData(
|
|
141
|
+
data,
|
|
142
|
+
rowsCount,
|
|
143
|
+
page,
|
|
144
|
+
rowsPerPage,
|
|
145
|
+
pagination
|
|
146
|
+
).map(item => (
|
|
147
|
+
<Row
|
|
148
|
+
key={rowKeyExtractor(item)}
|
|
149
|
+
rowKeyExtractor={rowKeyExtractor}
|
|
150
|
+
handleSelect={handleSelect}
|
|
151
|
+
selectable={selectable}
|
|
152
|
+
headers={headers}
|
|
153
|
+
data={item}
|
|
154
|
+
checked={selectedRows?.some(
|
|
155
|
+
sel => rowKeyExtractor(sel) === rowKeyExtractor(item)
|
|
156
|
+
)}
|
|
157
|
+
/>
|
|
158
|
+
))
|
|
159
|
+
) : (
|
|
160
|
+
<tr>
|
|
161
|
+
<td colSpan={99}>{emptyPlaceholder}</td>
|
|
162
|
+
</tr>
|
|
163
|
+
)}
|
|
149
164
|
</TBody>
|
|
150
165
|
) : (
|
|
151
166
|
<TBody>
|
|
@@ -8,8 +8,9 @@ export const getData = <Data>(
|
|
|
8
8
|
data: Data[],
|
|
9
9
|
rowsCount: number | undefined,
|
|
10
10
|
page: number,
|
|
11
|
-
rowsPerPage: number
|
|
11
|
+
rowsPerPage: number,
|
|
12
|
+
pagination: boolean
|
|
12
13
|
): Data[] =>
|
|
13
|
-
rowsCount
|
|
14
|
+
rowsCount || !pagination
|
|
14
15
|
? data
|
|
15
16
|
: data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
|
package/src/index.ts
CHANGED