jornada-ui 0.4.10 → 0.4.11
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/lib/commonjs/components/supply-error-card/index.js +13 -12
- package/lib/commonjs/components/supply-error-card/index.js.map +1 -1
- package/lib/commonjs/stories/supply-error-card/supply-error-card.stories.js +14 -14
- package/lib/commonjs/stories/supply-error-card/supply-error-card.stories.js.map +1 -1
- package/lib/module/components/supply-error-card/index.js +13 -12
- package/lib/module/components/supply-error-card/index.js.map +1 -1
- package/lib/module/stories/supply-error-card/supply-error-card.stories.js +14 -14
- package/lib/module/stories/supply-error-card/supply-error-card.stories.js.map +1 -1
- package/lib/typescript/commonjs/src/components/supply-error-card/index.d.ts +3 -8
- package/lib/typescript/commonjs/src/components/supply-error-card/index.d.ts.map +1 -1
- package/lib/typescript/module/src/components/supply-error-card/index.d.ts +3 -8
- package/lib/typescript/module/src/components/supply-error-card/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/supply-error-card/index.tsx +109 -105
- package/src/components/supply-error-card/interface.d.ts +133 -139
- package/src/stories/supply-error-card/supply-error-card.stories.tsx +72 -72
|
@@ -14,8 +14,8 @@ var _theme = require("../../styles/theme/theme.js");
|
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
16
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
|
-
/**
|
|
18
|
-
* IMPORTS
|
|
17
|
+
/**
|
|
18
|
+
* IMPORTS
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
21
|
// componentes
|
|
@@ -26,19 +26,19 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
26
26
|
|
|
27
27
|
// styles / theme
|
|
28
28
|
|
|
29
|
-
/**
|
|
30
|
-
* Componente SupplyErrorCard para a interação da ui.
|
|
29
|
+
/**
|
|
30
|
+
* Componente SupplyErrorCard para a interação da ui.
|
|
31
31
|
*/const SupplyErrorCard = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
|
|
32
32
|
const {
|
|
33
33
|
backgroundColor,
|
|
34
|
-
|
|
34
|
+
errors,
|
|
35
35
|
handleOnPress
|
|
36
36
|
} = props;
|
|
37
37
|
const [isExpanded, setIsExpanded] = (0, _react.useState)(false);
|
|
38
38
|
|
|
39
39
|
/**Função para alternar a expansão do card */
|
|
40
40
|
const handleToggleExpand = () => setIsExpanded(prev => !prev);
|
|
41
|
-
const firstMessage =
|
|
41
|
+
const firstMessage = errors?.[0];
|
|
42
42
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
43
43
|
onPress: handleToggleExpand,
|
|
44
44
|
activeOpacity: 0.9,
|
|
@@ -74,11 +74,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
74
74
|
flexStyle: {
|
|
75
75
|
justifyContent: "center"
|
|
76
76
|
},
|
|
77
|
-
children: isExpanded ?
|
|
77
|
+
children: isExpanded ? errors?.map((error, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
|
|
78
78
|
activeOpacity: 0.7,
|
|
79
79
|
onPress: () => handleOnPress(error),
|
|
80
80
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
|
|
81
|
-
text: `${index + 1}. ${error.
|
|
81
|
+
text: `${index + 1}. ${error.descricao ?? "Sem mensagens de erro"}`,
|
|
82
82
|
color: _theme.theme.colors.red[900],
|
|
83
83
|
size: _theme.theme.fontSizes.sm,
|
|
84
84
|
fontFamily: _theme.theme.fonts.inter_medium_500,
|
|
@@ -86,7 +86,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
86
86
|
marginBottom: _theme.theme.margins.xs
|
|
87
87
|
})
|
|
88
88
|
}, error?.id)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.default, {
|
|
89
|
-
text: firstMessage ? `1. ${firstMessage.
|
|
89
|
+
text: firstMessage ? `1. ${firstMessage.descricao}` : "Nenhum erro disponível",
|
|
90
90
|
color: _theme.theme.colors.red[900],
|
|
91
91
|
size: _theme.theme.fontSizes.sm,
|
|
92
92
|
fontFamily: _theme.theme.fonts.inter_medium_500,
|
|
@@ -101,7 +101,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
101
101
|
},
|
|
102
102
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Icons, {
|
|
103
103
|
icon: isExpanded ? "ARROW_CHEVRON_UP" : "ARROW_CHEVRON_DOWN",
|
|
104
|
-
size: 32
|
|
104
|
+
size: 32,
|
|
105
|
+
color: _theme.theme.colors.gray[800]
|
|
105
106
|
})
|
|
106
107
|
})]
|
|
107
108
|
})
|
|
@@ -110,8 +111,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
110
111
|
});
|
|
111
112
|
SupplyErrorCard.displayName = "SupplyErrorCard";
|
|
112
113
|
|
|
113
|
-
/**
|
|
114
|
-
* EXPORTS
|
|
114
|
+
/**
|
|
115
|
+
* EXPORTS
|
|
115
116
|
*/
|
|
116
117
|
var _default = exports.default = (0, _asBaseComponent.asBaseComponent)(SupplyErrorCard);
|
|
117
118
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_interopRequireDefault","_index2","_index3","_asBaseComponent","_theme","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SupplyErrorCard","forwardRef","props","ref","backgroundColor","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_index","_interopRequireDefault","_index2","_index3","_asBaseComponent","_theme","_jsxRuntime","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","SupplyErrorCard","forwardRef","props","ref","backgroundColor","errors","handleOnPress","isExpanded","setIsExpanded","useState","handleToggleExpand","prev","firstMessage","jsx","TouchableOpacity","onPress","activeOpacity","children","width","borderStyled","borderRadius","theme","borderWidths","thick_medium","borderWidth","thin_medium","borderColor","colors","orange","jsxs","yellow","thin_bold","flexStyle","flexDirection","justifyContent","paddingStyle","padding","paddings","xs","Icons","icon","size","map","error","index","text","descricao","color","red","fontSizes","sm","fontFamily","fonts","inter_medium_500","lineHeight","lg","marginBottom","margins","id","alignItems","textAlign","gray","displayName","_default","exports","asBaseComponent"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/supply-error-card/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.SupplyErrorCardNotMessage = exports.Default = void 0;
|
|
7
7
|
var _index = _interopRequireDefault(require("../../components/supply-error-card/index.js"));
|
|
8
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
-
/**
|
|
10
|
-
* IMPORTS
|
|
9
|
+
/**
|
|
10
|
+
* IMPORTS
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
13
|
// component
|
|
@@ -16,19 +16,19 @@ const meta = {
|
|
|
16
16
|
title: "componente/SupplyErrorCard",
|
|
17
17
|
component: _index.default,
|
|
18
18
|
args: {
|
|
19
|
-
|
|
19
|
+
errors: [{
|
|
20
20
|
id: 101,
|
|
21
|
-
|
|
21
|
+
descricacao: "Erro ao sincronizar abastecimento #101. Clique para corrigir."
|
|
22
22
|
}, {
|
|
23
23
|
id: 203,
|
|
24
|
-
|
|
24
|
+
descricacao: "Valor inválido no abastecimento #203."
|
|
25
25
|
}, {
|
|
26
26
|
id: 310,
|
|
27
|
-
|
|
27
|
+
descricacao: "Imagem do comprovante ausente no abastecimento #310."
|
|
28
28
|
}]
|
|
29
29
|
},
|
|
30
30
|
argTypes: {
|
|
31
|
-
|
|
31
|
+
errors: {
|
|
32
32
|
description: "Lista de mensagens de erro/exceção relacionadas a abastecimentos.",
|
|
33
33
|
control: "object",
|
|
34
34
|
table: {
|
|
@@ -47,13 +47,13 @@ Ao **clicar**, expande e mostra a lista completa. O ícone alterna entre *chevro
|
|
|
47
47
|
|
|
48
48
|
## Uso básico
|
|
49
49
|
\`\`\`tsx
|
|
50
|
-
const
|
|
51
|
-
{ id: 101,
|
|
52
|
-
{ id: 203,
|
|
53
|
-
{ id: 310,
|
|
50
|
+
const errors = [
|
|
51
|
+
{ id: 101, descricao: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
|
|
52
|
+
{ id: 203, descricao: "Valor inválido no abastecimento #203." },
|
|
53
|
+
{ id: 310, descricao: "Imagem do comprovante ausente no abastecimento #310." },
|
|
54
54
|
];
|
|
55
55
|
|
|
56
|
-
<SupplyErrorCard
|
|
56
|
+
<SupplyErrorCard errors={mensagens} />
|
|
57
57
|
\`\`\`
|
|
58
58
|
|
|
59
59
|
## Dicas
|
|
@@ -66,7 +66,7 @@ var _default = exports.default = meta;
|
|
|
66
66
|
const Default = exports.Default = {
|
|
67
67
|
name: "supply-error-card-default",
|
|
68
68
|
args: {
|
|
69
|
-
|
|
69
|
+
errors: [{
|
|
70
70
|
id: 101,
|
|
71
71
|
mensagem: "Erro ao sincronizar abastecimento #101. Clique para corrigir."
|
|
72
72
|
}, {
|
|
@@ -81,7 +81,7 @@ const Default = exports.Default = {
|
|
|
81
81
|
const SupplyErrorCardNotMessage = exports.SupplyErrorCardNotMessage = {
|
|
82
82
|
name: "supply-error-card",
|
|
83
83
|
args: {
|
|
84
|
-
|
|
84
|
+
errors: []
|
|
85
85
|
}
|
|
86
86
|
};
|
|
87
87
|
//# sourceMappingURL=supply-error-card.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_index","_interopRequireDefault","require","e","__esModule","default","meta","title","component","SupplyErrorCard","args","
|
|
1
|
+
{"version":3,"names":["_index","_interopRequireDefault","require","e","__esModule","default","meta","title","component","SupplyErrorCard","args","errors","id","descricacao","argTypes","description","control","table","type","summary","parameters","notes","_default","exports","Default","name","mensagem","SupplyErrorCardNotMessage"],"sourceRoot":"..\\..\\..\\..\\src","sources":["stories/supply-error-card/supply-error-card.stories.tsx"],"mappings":";;;;;;AAOA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAiE,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAPjE;AACA;AACA;;AAIA;;AAGA,MAAMG,IAAkC,GAAG;EACzCC,KAAK,EAAE,4BAA4B;EACnCC,SAAS,EAAEC,cAA2B;EACtCC,IAAI,EAAE;IACJC,MAAM,EAAE,CACN;MAAEC,EAAE,EAAE,GAAG;MAAEC,WAAW,EAAE;IAAgE,CAAC,EACzF;MAAED,EAAE,EAAE,GAAG;MAAEC,WAAW,EAAE;IAAwC,CAAC,EACjE;MAAED,EAAE,EAAE,GAAG;MAAEC,WAAW,EAAE;IAAuD,CAAC;EAEpF,CAAC;EACDC,QAAQ,EAAE;IACRH,MAAM,EAAE;MACNI,WAAW,EAAE,mEAAmE;MAChFC,OAAO,EAAE,QAAQ;MACjBC,KAAK,EAAE;QACLC,IAAI,EAAE;UAAEC,OAAO,EAAE;QAA0C;MAC7D;IACF;EACF,CAAC;EACDC,UAAU,EAAE;IACVC,KAAK,EAAE;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE;AACF,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlB,OAAA,GAEaC,IAAI;AAIZ,MAAMkB,OAAc,GAAAD,OAAA,CAAAC,OAAA,GAAG;EAC5BC,IAAI,EAAE,2BAA2B;EACjCf,IAAI,EAAE;IACJC,MAAM,EAAE,CACN;MAAEC,EAAE,EAAE,GAAG;MAAEc,QAAQ,EAAE;IAAgE,CAAC,EACtF;MAAEd,EAAE,EAAE,GAAG;MAAEc,QAAQ,EAAE;IAAwC,CAAC,EAC9D;MAAEd,EAAE,EAAE,GAAG;MAAEc,QAAQ,EAAE;IAAuD,CAAC;EAEjF;AACF,CAAC;AAEM,MAAMC,yBAAgC,GAAAJ,OAAA,CAAAI,yBAAA,GAAG;EAC9CF,IAAI,EAAE,mBAAmB;EACzBf,IAAI,EAAE;IAAEC,MAAM,EAAE;EAAG;AACrB,CAAC","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
/**
|
|
4
|
-
* IMPORTS
|
|
3
|
+
/**
|
|
4
|
+
* IMPORTS
|
|
5
5
|
*/
|
|
6
6
|
import React, { forwardRef, useState } from "react";
|
|
7
7
|
import { TouchableOpacity } from "react-native";
|
|
@@ -20,21 +20,21 @@ import { asBaseComponent } from "../../@types/as-base-component.js";
|
|
|
20
20
|
// styles / theme
|
|
21
21
|
import { theme } from "../../styles/theme/theme.js";
|
|
22
22
|
|
|
23
|
-
/**
|
|
24
|
-
* Componente SupplyErrorCard para a interação da ui.
|
|
23
|
+
/**
|
|
24
|
+
* Componente SupplyErrorCard para a interação da ui.
|
|
25
25
|
*/
|
|
26
26
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
27
|
const SupplyErrorCard = /*#__PURE__*/forwardRef((props, ref) => {
|
|
28
28
|
const {
|
|
29
29
|
backgroundColor,
|
|
30
|
-
|
|
30
|
+
errors,
|
|
31
31
|
handleOnPress
|
|
32
32
|
} = props;
|
|
33
33
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
34
34
|
|
|
35
35
|
/**Função para alternar a expansão do card */
|
|
36
36
|
const handleToggleExpand = () => setIsExpanded(prev => !prev);
|
|
37
|
-
const firstMessage =
|
|
37
|
+
const firstMessage = errors?.[0];
|
|
38
38
|
return /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
39
39
|
onPress: handleToggleExpand,
|
|
40
40
|
activeOpacity: 0.9,
|
|
@@ -70,11 +70,11 @@ const SupplyErrorCard = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
70
70
|
flexStyle: {
|
|
71
71
|
justifyContent: "center"
|
|
72
72
|
},
|
|
73
|
-
children: isExpanded ?
|
|
73
|
+
children: isExpanded ? errors?.map((error, index) => /*#__PURE__*/_jsx(TouchableOpacity, {
|
|
74
74
|
activeOpacity: 0.7,
|
|
75
75
|
onPress: () => handleOnPress(error),
|
|
76
76
|
children: /*#__PURE__*/_jsx(Typography, {
|
|
77
|
-
text: `${index + 1}. ${error.
|
|
77
|
+
text: `${index + 1}. ${error.descricao ?? "Sem mensagens de erro"}`,
|
|
78
78
|
color: theme.colors.red[900],
|
|
79
79
|
size: theme.fontSizes.sm,
|
|
80
80
|
fontFamily: theme.fonts.inter_medium_500,
|
|
@@ -82,7 +82,7 @@ const SupplyErrorCard = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
82
82
|
marginBottom: theme.margins.xs
|
|
83
83
|
})
|
|
84
84
|
}, error?.id)) : /*#__PURE__*/_jsx(Typography, {
|
|
85
|
-
text: firstMessage ? `1. ${firstMessage.
|
|
85
|
+
text: firstMessage ? `1. ${firstMessage.descricao}` : "Nenhum erro disponível",
|
|
86
86
|
color: theme.colors.red[900],
|
|
87
87
|
size: theme.fontSizes.sm,
|
|
88
88
|
fontFamily: theme.fonts.inter_medium_500,
|
|
@@ -97,7 +97,8 @@ const SupplyErrorCard = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
97
97
|
},
|
|
98
98
|
children: /*#__PURE__*/_jsx(Icons, {
|
|
99
99
|
icon: isExpanded ? "ARROW_CHEVRON_UP" : "ARROW_CHEVRON_DOWN",
|
|
100
|
-
size: 32
|
|
100
|
+
size: 32,
|
|
101
|
+
color: theme.colors.gray[800]
|
|
101
102
|
})
|
|
102
103
|
})]
|
|
103
104
|
})
|
|
@@ -106,8 +107,8 @@ const SupplyErrorCard = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
106
107
|
});
|
|
107
108
|
SupplyErrorCard.displayName = "SupplyErrorCard";
|
|
108
109
|
|
|
109
|
-
/**
|
|
110
|
-
* EXPORTS
|
|
110
|
+
/**
|
|
111
|
+
* EXPORTS
|
|
111
112
|
*/
|
|
112
113
|
export default asBaseComponent(SupplyErrorCard);
|
|
113
114
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","forwardRef","useState","TouchableOpacity","Box","Typography","Icons","asBaseComponent","theme","jsx","_jsx","jsxs","_jsxs","SupplyErrorCard","props","ref","backgroundColor","
|
|
1
|
+
{"version":3,"names":["React","forwardRef","useState","TouchableOpacity","Box","Typography","Icons","asBaseComponent","theme","jsx","_jsx","jsxs","_jsxs","SupplyErrorCard","props","ref","backgroundColor","errors","handleOnPress","isExpanded","setIsExpanded","handleToggleExpand","prev","firstMessage","onPress","activeOpacity","children","width","borderStyled","borderRadius","borderWidths","thick_medium","borderWidth","thin_medium","borderColor","colors","orange","yellow","thin_bold","flexStyle","flexDirection","justifyContent","paddingStyle","padding","paddings","xs","icon","size","map","error","index","text","descricao","color","red","fontSizes","sm","fontFamily","fonts","inter_medium_500","lineHeight","lg","marginBottom","margins","id","alignItems","textAlign","gray","displayName"],"sourceRoot":"..\\..\\..\\..\\src","sources":["components/supply-error-card/index.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
/**
|
|
4
|
-
* IMPORTS
|
|
3
|
+
/**
|
|
4
|
+
* IMPORTS
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
// component
|
|
@@ -10,19 +10,19 @@ const meta = {
|
|
|
10
10
|
title: "componente/SupplyErrorCard",
|
|
11
11
|
component: SupplyErrorCard,
|
|
12
12
|
args: {
|
|
13
|
-
|
|
13
|
+
errors: [{
|
|
14
14
|
id: 101,
|
|
15
|
-
|
|
15
|
+
descricacao: "Erro ao sincronizar abastecimento #101. Clique para corrigir."
|
|
16
16
|
}, {
|
|
17
17
|
id: 203,
|
|
18
|
-
|
|
18
|
+
descricacao: "Valor inválido no abastecimento #203."
|
|
19
19
|
}, {
|
|
20
20
|
id: 310,
|
|
21
|
-
|
|
21
|
+
descricacao: "Imagem do comprovante ausente no abastecimento #310."
|
|
22
22
|
}]
|
|
23
23
|
},
|
|
24
24
|
argTypes: {
|
|
25
|
-
|
|
25
|
+
errors: {
|
|
26
26
|
description: "Lista de mensagens de erro/exceção relacionadas a abastecimentos.",
|
|
27
27
|
control: "object",
|
|
28
28
|
table: {
|
|
@@ -41,13 +41,13 @@ Ao **clicar**, expande e mostra a lista completa. O ícone alterna entre *chevro
|
|
|
41
41
|
|
|
42
42
|
## Uso básico
|
|
43
43
|
\`\`\`tsx
|
|
44
|
-
const
|
|
45
|
-
{ id: 101,
|
|
46
|
-
{ id: 203,
|
|
47
|
-
{ id: 310,
|
|
44
|
+
const errors = [
|
|
45
|
+
{ id: 101, descricao: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
|
|
46
|
+
{ id: 203, descricao: "Valor inválido no abastecimento #203." },
|
|
47
|
+
{ id: 310, descricao: "Imagem do comprovante ausente no abastecimento #310." },
|
|
48
48
|
];
|
|
49
49
|
|
|
50
|
-
<SupplyErrorCard
|
|
50
|
+
<SupplyErrorCard errors={mensagens} />
|
|
51
51
|
\`\`\`
|
|
52
52
|
|
|
53
53
|
## Dicas
|
|
@@ -60,7 +60,7 @@ export default meta;
|
|
|
60
60
|
export const Default = {
|
|
61
61
|
name: "supply-error-card-default",
|
|
62
62
|
args: {
|
|
63
|
-
|
|
63
|
+
errors: [{
|
|
64
64
|
id: 101,
|
|
65
65
|
mensagem: "Erro ao sincronizar abastecimento #101. Clique para corrigir."
|
|
66
66
|
}, {
|
|
@@ -75,7 +75,7 @@ export const Default = {
|
|
|
75
75
|
export const SupplyErrorCardNotMessage = {
|
|
76
76
|
name: "supply-error-card",
|
|
77
77
|
args: {
|
|
78
|
-
|
|
78
|
+
errors: []
|
|
79
79
|
}
|
|
80
80
|
};
|
|
81
81
|
//# sourceMappingURL=supply-error-card.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["SupplyErrorCard","meta","title","component","args","
|
|
1
|
+
{"version":3,"names":["SupplyErrorCard","meta","title","component","args","errors","id","descricacao","argTypes","description","control","table","type","summary","parameters","notes","Default","name","mensagem","SupplyErrorCardNotMessage"],"sourceRoot":"..\\..\\..\\..\\src","sources":["stories/supply-error-card/supply-error-card.stories.tsx"],"mappings":";;AAAA;AACA;AACA;;AAIA;AACA,OAAOA,eAAe,MAAM,6CAAoC;AAEhE,MAAMC,IAAkC,GAAG;EACzCC,KAAK,EAAE,4BAA4B;EACnCC,SAAS,EAAEH,eAA2B;EACtCI,IAAI,EAAE;IACJC,MAAM,EAAE,CACN;MAAEC,EAAE,EAAE,GAAG;MAAEC,WAAW,EAAE;IAAgE,CAAC,EACzF;MAAED,EAAE,EAAE,GAAG;MAAEC,WAAW,EAAE;IAAwC,CAAC,EACjE;MAAED,EAAE,EAAE,GAAG;MAAEC,WAAW,EAAE;IAAuD,CAAC;EAEpF,CAAC;EACDC,QAAQ,EAAE;IACRH,MAAM,EAAE;MACNI,WAAW,EAAE,mEAAmE;MAChFC,OAAO,EAAE,QAAQ;MACjBC,KAAK,EAAE;QACLC,IAAI,EAAE;UAAEC,OAAO,EAAE;QAA0C;MAC7D;IACF;EACF,CAAC;EACDC,UAAU,EAAE;IACVC,KAAK,EAAE;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE;AACF,CAAC;AAED,eAAed,IAAI;AAInB,OAAO,MAAMe,OAAc,GAAG;EAC5BC,IAAI,EAAE,2BAA2B;EACjCb,IAAI,EAAE;IACJC,MAAM,EAAE,CACN;MAAEC,EAAE,EAAE,GAAG;MAAEY,QAAQ,EAAE;IAAgE,CAAC,EACtF;MAAEZ,EAAE,EAAE,GAAG;MAAEY,QAAQ,EAAE;IAAwC,CAAC,EAC9D;MAAEZ,EAAE,EAAE,GAAG;MAAEY,QAAQ,EAAE;IAAuD,CAAC;EAEjF;AACF,CAAC;AAED,OAAO,MAAMC,yBAAgC,GAAG;EAC9CF,IAAI,EAAE,mBAAmB;EACzBb,IAAI,EAAE;IAAEC,MAAM,EAAE;EAAG;AACrB,CAAC","ignoreList":[]}
|
|
@@ -6,14 +6,8 @@ import React from "react";
|
|
|
6
6
|
* EXPORTS
|
|
7
7
|
*/
|
|
8
8
|
declare const _default: React.ComponentType<import("react-native").ViewProps & {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
mensagem: string;
|
|
12
|
-
}[];
|
|
13
|
-
handleOnPress: (data: {
|
|
14
|
-
id: number;
|
|
15
|
-
mensagem: string;
|
|
16
|
-
}) => void;
|
|
9
|
+
errors?: any[];
|
|
10
|
+
handleOnPress: (data: any) => void;
|
|
17
11
|
testID?: string;
|
|
18
12
|
borderStyled?: {
|
|
19
13
|
borderStyle?: "solid" | "dotted" | "dashed";
|
|
@@ -67,6 +61,7 @@ declare const _default: React.ComponentType<import("react-native").ViewProps & {
|
|
|
67
61
|
colorTextData?: string;
|
|
68
62
|
};
|
|
69
63
|
valor?: number;
|
|
64
|
+
messages?: string[];
|
|
70
65
|
erroIds?: number[];
|
|
71
66
|
} & React.RefAttributes<any>>;
|
|
72
67
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/supply-error-card/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAA+B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/supply-error-card/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAsGpD;;GAEG;;;;;;mBApFgC,CAAC;oBAAkD,CAAC;4BACjD,CAAC;2BACV,CAAC;+BAEF,CAAC;8BACM,CAAA;mBAEzB,CAAC;uBAGF,CAAC;wBAA+C,CAAC;sBAGlD,CAAL;yBAEO,CAAL;mBAA2C,CAAC;yBAC1B,CAAC;uBAA6B,CAAC;wBACzB,CAAC;sBACrB,CAAC;;;kBAMsD,CAAC;iBAEzD,CAAA;YAE0C,CAAC;qBAGzC,CAAF;gBACI,CAAP;iBACuB,CAAC;sBAEV,CAAC;;;cASA,CAAd;kBAAyC,CAAC;mBACV,CAAC;iBAEvB,CAAT;oBACO,CAAC;;;eAOE,CAAC;mBACJ,CAAD;oBAIH,CAAH;kBAEK,CAAJ;qBACmB,CAAC;;;;;;;gBAuByzB,CAAC;iBAAuB,CAAC;qBAA2B,CAAC;qBAA2B,CAAC;;;;;;AADt6B,wBAAgD"}
|
|
@@ -6,14 +6,8 @@ import React from "react";
|
|
|
6
6
|
* EXPORTS
|
|
7
7
|
*/
|
|
8
8
|
declare const _default: React.ComponentType<import("react-native").ViewProps & {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
mensagem: string;
|
|
12
|
-
}[];
|
|
13
|
-
handleOnPress: (data: {
|
|
14
|
-
id: number;
|
|
15
|
-
mensagem: string;
|
|
16
|
-
}) => void;
|
|
9
|
+
errors?: any[];
|
|
10
|
+
handleOnPress: (data: any) => void;
|
|
17
11
|
testID?: string;
|
|
18
12
|
borderStyled?: {
|
|
19
13
|
borderStyle?: "solid" | "dotted" | "dashed";
|
|
@@ -67,6 +61,7 @@ declare const _default: React.ComponentType<import("react-native").ViewProps & {
|
|
|
67
61
|
colorTextData?: string;
|
|
68
62
|
};
|
|
69
63
|
valor?: number;
|
|
64
|
+
messages?: string[];
|
|
70
65
|
erroIds?: number[];
|
|
71
66
|
} & React.RefAttributes<any>>;
|
|
72
67
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/supply-error-card/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAA+B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/supply-error-card/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAA+B,MAAM,OAAO,CAAC;AAsGpD;;GAEG;;;;;;mBApFgC,CAAC;oBAAkD,CAAC;4BACjD,CAAC;2BACV,CAAC;+BAEF,CAAC;8BACM,CAAA;mBAEzB,CAAC;uBAGF,CAAC;wBAA+C,CAAC;sBAGlD,CAAL;yBAEO,CAAL;mBAA2C,CAAC;yBAC1B,CAAC;uBAA6B,CAAC;wBACzB,CAAC;sBACrB,CAAC;;;kBAMsD,CAAC;iBAEzD,CAAA;YAE0C,CAAC;qBAGzC,CAAF;gBACI,CAAP;iBACuB,CAAC;sBAEV,CAAC;;;cASA,CAAd;kBAAyC,CAAC;mBACV,CAAC;iBAEvB,CAAT;oBACO,CAAC;;;eAOE,CAAC;mBACJ,CAAD;oBAIH,CAAH;kBAEK,CAAJ;qBACmB,CAAC;;;;;;;gBAuByzB,CAAC;iBAAuB,CAAC;qBAA2B,CAAC;qBAA2B,CAAC;;;;;;AADt6B,wBAAgD"}
|
package/package.json
CHANGED
|
@@ -1,105 +1,109 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* IMPORTS
|
|
3
|
-
*/
|
|
4
|
-
import React, { forwardRef, useState } from "react";
|
|
5
|
-
import { TouchableOpacity } from "react-native";
|
|
6
|
-
|
|
7
|
-
// componentes
|
|
8
|
-
import Box from "../box";
|
|
9
|
-
import Typography from "../typography";
|
|
10
|
-
|
|
11
|
-
// commons / icons
|
|
12
|
-
import { Icons } from "../../common/icons-svg";
|
|
13
|
-
|
|
14
|
-
// typings
|
|
15
|
-
import type { SupplyErrorCardProps } from "./interface";
|
|
16
|
-
import { asBaseComponent } from "../../@types/as-base-component";
|
|
17
|
-
|
|
18
|
-
// styles / theme
|
|
19
|
-
import { theme } from "../../styles/theme/theme";
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Componente SupplyErrorCard para a interação da ui.
|
|
23
|
-
*/
|
|
24
|
-
const SupplyErrorCard = forwardRef<any, SupplyErrorCardProps>((props, ref): React.ReactElement => {
|
|
25
|
-
const { backgroundColor,
|
|
26
|
-
const [isExpanded, setIsExpanded] = useState(false);
|
|
27
|
-
|
|
28
|
-
/**Função para alternar a expansão do card */
|
|
29
|
-
const handleToggleExpand = () => setIsExpanded((prev) => !prev);
|
|
30
|
-
|
|
31
|
-
const firstMessage =
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<TouchableOpacity onPress={handleToggleExpand} activeOpacity={0.9}>
|
|
35
|
-
<Box
|
|
36
|
-
ref={ref}
|
|
37
|
-
width={"100%"}
|
|
38
|
-
borderStyled={{
|
|
39
|
-
borderRadius: theme.borderWidths.thick_medium,
|
|
40
|
-
borderWidth: theme.borderWidths.thin_medium,
|
|
41
|
-
borderColor: theme.colors.orange[150],
|
|
42
|
-
}}
|
|
43
|
-
>
|
|
44
|
-
<Box
|
|
45
|
-
width={"100%"}
|
|
46
|
-
backgroundColor={backgroundColor ?? theme.colors.yellow[120]}
|
|
47
|
-
borderStyled={{ borderRadius: theme.borderWidths.thin_bold }}
|
|
48
|
-
flexStyle={{ flexDirection: "row", justifyContent: "space-between" }}
|
|
49
|
-
paddingStyle={{ padding: theme.paddings.xs }}
|
|
50
|
-
>
|
|
51
|
-
<Box width={"10%"}>
|
|
52
|
-
<Icons icon={"EXCLAMATION_TRIANGLE"} size={32} />
|
|
53
|
-
</Box>
|
|
54
|
-
|
|
55
|
-
<Box width={"70%"} flexStyle={{ justifyContent: "center" }}>
|
|
56
|
-
{isExpanded ? (
|
|
57
|
-
|
|
58
|
-
<TouchableOpacity
|
|
59
|
-
key={error?.id}
|
|
60
|
-
activeOpacity={0.7}
|
|
61
|
-
onPress={() => handleOnPress(error)}
|
|
62
|
-
>
|
|
63
|
-
<Typography
|
|
64
|
-
text={`${index + 1}. ${error.
|
|
65
|
-
color={theme.colors.red[900]}
|
|
66
|
-
size={theme.fontSizes.sm}
|
|
67
|
-
fontFamily={theme.fonts.inter_medium_500}
|
|
68
|
-
lineHeight={theme.fontSizes.lg}
|
|
69
|
-
marginBottom={theme.margins.xs}
|
|
70
|
-
/>
|
|
71
|
-
</TouchableOpacity>
|
|
72
|
-
))
|
|
73
|
-
) : (
|
|
74
|
-
<Typography
|
|
75
|
-
text={firstMessage ? `1. ${firstMessage.
|
|
76
|
-
color={theme.colors.red[900]}
|
|
77
|
-
size={theme.fontSizes.sm}
|
|
78
|
-
fontFamily={theme.fonts.inter_medium_500}
|
|
79
|
-
lineHeight={theme.fontSizes.lg}
|
|
80
|
-
/>
|
|
81
|
-
)}
|
|
82
|
-
</Box>
|
|
83
|
-
|
|
84
|
-
<Box
|
|
85
|
-
width={"10%"}
|
|
86
|
-
flexStyle={{
|
|
87
|
-
alignItems: "flex-end",
|
|
88
|
-
justifyContent: "flex-start",
|
|
89
|
-
textAlign: "center",
|
|
90
|
-
}}
|
|
91
|
-
>
|
|
92
|
-
<Icons
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
1
|
+
/**
|
|
2
|
+
* IMPORTS
|
|
3
|
+
*/
|
|
4
|
+
import React, { forwardRef, useState } from "react";
|
|
5
|
+
import { TouchableOpacity } from "react-native";
|
|
6
|
+
|
|
7
|
+
// componentes
|
|
8
|
+
import Box from "../box";
|
|
9
|
+
import Typography from "../typography";
|
|
10
|
+
|
|
11
|
+
// commons / icons
|
|
12
|
+
import { Icons } from "../../common/icons-svg";
|
|
13
|
+
|
|
14
|
+
// typings
|
|
15
|
+
import type { SupplyErrorCardProps } from "./interface";
|
|
16
|
+
import { asBaseComponent } from "../../@types/as-base-component";
|
|
17
|
+
|
|
18
|
+
// styles / theme
|
|
19
|
+
import { theme } from "../../styles/theme/theme";
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Componente SupplyErrorCard para a interação da ui.
|
|
23
|
+
*/
|
|
24
|
+
const SupplyErrorCard = forwardRef<any, SupplyErrorCardProps>((props, ref): React.ReactElement => {
|
|
25
|
+
const { backgroundColor, errors, handleOnPress } = props;
|
|
26
|
+
const [isExpanded, setIsExpanded] = useState(false);
|
|
27
|
+
|
|
28
|
+
/**Função para alternar a expansão do card */
|
|
29
|
+
const handleToggleExpand = () => setIsExpanded((prev) => !prev);
|
|
30
|
+
|
|
31
|
+
const firstMessage = errors?.[0];
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<TouchableOpacity onPress={handleToggleExpand} activeOpacity={0.9}>
|
|
35
|
+
<Box
|
|
36
|
+
ref={ref}
|
|
37
|
+
width={"100%"}
|
|
38
|
+
borderStyled={{
|
|
39
|
+
borderRadius: theme.borderWidths.thick_medium,
|
|
40
|
+
borderWidth: theme.borderWidths.thin_medium,
|
|
41
|
+
borderColor: theme.colors.orange[150],
|
|
42
|
+
}}
|
|
43
|
+
>
|
|
44
|
+
<Box
|
|
45
|
+
width={"100%"}
|
|
46
|
+
backgroundColor={backgroundColor ?? theme.colors.yellow[120]}
|
|
47
|
+
borderStyled={{ borderRadius: theme.borderWidths.thin_bold }}
|
|
48
|
+
flexStyle={{ flexDirection: "row", justifyContent: "space-between" }}
|
|
49
|
+
paddingStyle={{ padding: theme.paddings.xs }}
|
|
50
|
+
>
|
|
51
|
+
<Box width={"10%"}>
|
|
52
|
+
<Icons icon={"EXCLAMATION_TRIANGLE"} size={32} />
|
|
53
|
+
</Box>
|
|
54
|
+
|
|
55
|
+
<Box width={"70%"} flexStyle={{ justifyContent: "center" }}>
|
|
56
|
+
{isExpanded ? (
|
|
57
|
+
errors?.map((error, index) => (
|
|
58
|
+
<TouchableOpacity
|
|
59
|
+
key={error?.id}
|
|
60
|
+
activeOpacity={0.7}
|
|
61
|
+
onPress={() => handleOnPress(error)}
|
|
62
|
+
>
|
|
63
|
+
<Typography
|
|
64
|
+
text={`${index + 1}. ${error.descricao ?? "Sem mensagens de erro"}`}
|
|
65
|
+
color={theme.colors.red[900]}
|
|
66
|
+
size={theme.fontSizes.sm}
|
|
67
|
+
fontFamily={theme.fonts.inter_medium_500}
|
|
68
|
+
lineHeight={theme.fontSizes.lg}
|
|
69
|
+
marginBottom={theme.margins.xs}
|
|
70
|
+
/>
|
|
71
|
+
</TouchableOpacity>
|
|
72
|
+
))
|
|
73
|
+
) : (
|
|
74
|
+
<Typography
|
|
75
|
+
text={firstMessage ? `1. ${firstMessage.descricao}` : "Nenhum erro disponível"}
|
|
76
|
+
color={theme.colors.red[900]}
|
|
77
|
+
size={theme.fontSizes.sm}
|
|
78
|
+
fontFamily={theme.fonts.inter_medium_500}
|
|
79
|
+
lineHeight={theme.fontSizes.lg}
|
|
80
|
+
/>
|
|
81
|
+
)}
|
|
82
|
+
</Box>
|
|
83
|
+
|
|
84
|
+
<Box
|
|
85
|
+
width={"10%"}
|
|
86
|
+
flexStyle={{
|
|
87
|
+
alignItems: "flex-end",
|
|
88
|
+
justifyContent: "flex-start",
|
|
89
|
+
textAlign: "center",
|
|
90
|
+
}}
|
|
91
|
+
>
|
|
92
|
+
<Icons
|
|
93
|
+
icon={isExpanded ? "ARROW_CHEVRON_UP" : "ARROW_CHEVRON_DOWN"}
|
|
94
|
+
size={32}
|
|
95
|
+
color={theme.colors.gray[800]}
|
|
96
|
+
/>
|
|
97
|
+
</Box>
|
|
98
|
+
</Box>
|
|
99
|
+
</Box>
|
|
100
|
+
</TouchableOpacity>
|
|
101
|
+
);
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
SupplyErrorCard.displayName = "SupplyErrorCard";
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* EXPORTS
|
|
108
|
+
*/
|
|
109
|
+
export default asBaseComponent(SupplyErrorCard);
|
|
@@ -1,139 +1,133 @@
|
|
|
1
|
-
/* eslint-disable no-unused-vars */
|
|
2
|
-
/**
|
|
3
|
-
* IMPORTS
|
|
4
|
-
*/
|
|
5
|
-
import { type DimensionValue, type ViewProps } from "react-native";
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
* A
|
|
100
|
-
*/
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
*
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
/**
|
|
137
|
-
* EXPORT
|
|
138
|
-
*/
|
|
139
|
-
export type { SupplyErrorCardProps };
|
|
1
|
+
/* eslint-disable no-unused-vars */
|
|
2
|
+
/**
|
|
3
|
+
* IMPORTS
|
|
4
|
+
*/
|
|
5
|
+
import { type DimensionValue, type ViewProps } from "react-native";
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* INTERFACE
|
|
9
|
+
*/
|
|
10
|
+
type SupplyErrorCardProps = ViewProps & {
|
|
11
|
+
/**Propiedade responsavel por armazenar os error */
|
|
12
|
+
errors?: any[];
|
|
13
|
+
|
|
14
|
+
handleOnPress: (data: any) => void;
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* TestID para testes automático e identificação
|
|
18
|
+
*/
|
|
19
|
+
testID?: string;
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
|
|
23
|
+
*/
|
|
24
|
+
borderStyled?: {
|
|
25
|
+
borderStyle?: "solid" | "dotted" | "dashed";
|
|
26
|
+
|
|
27
|
+
borderRadius?: number | DimensionValue;
|
|
28
|
+
borderTopRightRadius?: number | DimensionValue;
|
|
29
|
+
borderTopLeftRadius?: number | DimensionValue;
|
|
30
|
+
borderBottomRightRadius?: number | DimensionValue;
|
|
31
|
+
borderBottomLeftRadius?: number | DimensionValue;
|
|
32
|
+
|
|
33
|
+
borderWidth?: number | DimensionValue;
|
|
34
|
+
borderLeftWidth?: number | DimensionValue;
|
|
35
|
+
borderRightWidth?: number | DimensionValue;
|
|
36
|
+
borderTopWidth?: number | DimensionValue;
|
|
37
|
+
borderBottomWidth?: number | DimensionValue;
|
|
38
|
+
|
|
39
|
+
borderColor?: string;
|
|
40
|
+
borderBottomColor?: string;
|
|
41
|
+
borderLeftColor?: string;
|
|
42
|
+
borderRightColor?: string;
|
|
43
|
+
borderTopColor?: string;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Propriedades que define a orientação do button que é usada para representar uma página. Na maioria das vezes, esse valores corresponde ao posicionamento alvo da página impressa, se aplicável.
|
|
48
|
+
*/
|
|
49
|
+
flexStyle?: {
|
|
50
|
+
alignItems?: "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
|
|
51
|
+
alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
|
|
52
|
+
flex?: string | number;
|
|
53
|
+
flexDirection?: "column" | "column-reverse" | "row" | "row-reverse";
|
|
54
|
+
flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
|
|
55
|
+
textAlign?: "auto" | "center" | "left" | "right" | "justify";
|
|
56
|
+
justifyContent?:
|
|
57
|
+
| "flex-start"
|
|
58
|
+
| "flex-end"
|
|
59
|
+
| "center"
|
|
60
|
+
| "space-between"
|
|
61
|
+
| "space-around"
|
|
62
|
+
| "space-evenly";
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* A propriedade margin do CSS define a área de margem nos quatro lados do elemento. É uma abreviação que define todas as margens individuais de uma só vez: margin-top, margin-right (en-US), margin-bottom, e margin-left (en-US).
|
|
67
|
+
*/
|
|
68
|
+
marginStyle?: {
|
|
69
|
+
margin?: number | DimensionValue;
|
|
70
|
+
marginLeft?: number | DimensionValue;
|
|
71
|
+
marginRight?: number | DimensionValue;
|
|
72
|
+
marginTop?: number | DimensionValue;
|
|
73
|
+
marginBottom?: number | DimensionValue;
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
/**
|
|
77
|
+
* A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).
|
|
78
|
+
*/
|
|
79
|
+
paddingStyle?: {
|
|
80
|
+
padding?: number | DimensionValue;
|
|
81
|
+
paddingLeft?: number | DimensionValue;
|
|
82
|
+
paddingRight?: number | DimensionValue;
|
|
83
|
+
paddingTop?: number | DimensionValue;
|
|
84
|
+
paddingBottom?: number | DimensionValue;
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* A propriedade CSS height define a altura de um elemento. A altura de um elemento é a distância do topo da borda superior do elemento ao fundo da borda inferior.
|
|
89
|
+
*/
|
|
90
|
+
height?: number | DimensionValue;
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* A propriedade CSS width define a largura de um elemento. A largura de um elemento é a distância do topo da borda esquerda do elemento ao fundo da borda direita.
|
|
94
|
+
*/
|
|
95
|
+
width?: number | DimensionValue;
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* O fundo abreviado CSS Propriedade define todas as propriedades do estilo de fundo de uma só vez, como cor, imagem, origem e tamanho ou método de repetição. As propriedades dos componentes não definidas no fundo da declaração de valor da propriedade abreviada são definidas como seus valores padrão..
|
|
99
|
+
* A Propriedade Background está sendo utilizada para definir a cor de fundo do cabeçalho do card e do ícone check.
|
|
100
|
+
*/
|
|
101
|
+
backgroundColor?: string;
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Propriedade texto que sera renderizado pro usuário final
|
|
105
|
+
*/
|
|
106
|
+
text?: string;
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* A propriedade CSS color define o valor da cor de primeiro plano do texto e das decorações de texto de um elemento e define o valor currentcolor. currentcolor pode ser usado como um valor indireto em outras propriedades e é o padrão para outras propriedades de cores, como border-color.
|
|
110
|
+
*/
|
|
111
|
+
color?: {
|
|
112
|
+
colorSvg?: string;
|
|
113
|
+
colorText?: string;
|
|
114
|
+
colorTextBold?: string;
|
|
115
|
+
colorTextData?: string;
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Propriedade que define o valor a ser pago
|
|
120
|
+
*/
|
|
121
|
+
valor?: number;
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* Lista de mensagens de erro (renderizadas uma abaixo da outra)
|
|
125
|
+
*/
|
|
126
|
+
messages?: string[];
|
|
127
|
+
erroIds?: number[];
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
/**
|
|
131
|
+
* EXPORT
|
|
132
|
+
*/
|
|
133
|
+
export type { SupplyErrorCardProps };
|
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* IMPORTS
|
|
3
|
-
*/
|
|
4
|
-
import type React from "react";
|
|
5
|
-
import type { Meta, StoryObj } from "@storybook/react";
|
|
6
|
-
|
|
7
|
-
// component
|
|
8
|
-
import SupplyErrorCard from "../../components/supply-error-card";
|
|
9
|
-
|
|
10
|
-
const meta: Meta<typeof SupplyErrorCard> = {
|
|
11
|
-
title: "componente/SupplyErrorCard",
|
|
12
|
-
component: SupplyErrorCard as React.FC,
|
|
13
|
-
args: {
|
|
14
|
-
|
|
15
|
-
{ id: 101,
|
|
16
|
-
{ id: 203,
|
|
17
|
-
{ id: 310,
|
|
18
|
-
],
|
|
19
|
-
},
|
|
20
|
-
argTypes: {
|
|
21
|
-
|
|
22
|
-
description: "Lista de mensagens de erro/exceção relacionadas a abastecimentos.",
|
|
23
|
-
control: "object",
|
|
24
|
-
table: {
|
|
25
|
-
type: { summary: "Array<{ id: number; mensagem: string }>" },
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
},
|
|
29
|
-
parameters: {
|
|
30
|
-
notes: `
|
|
31
|
-
# SupplyErrorCard
|
|
32
|
-
|
|
33
|
-
Card de alertas de abastecimento. Quando **fechado**, exibe apenas a primeira mensagem.
|
|
34
|
-
Ao **clicar**, expande e mostra a lista completa. O ícone alterna entre *chevron down/up*.
|
|
35
|
-
|
|
36
|
-
## Uso básico
|
|
37
|
-
\`\`\`tsx
|
|
38
|
-
const
|
|
39
|
-
{ id: 101,
|
|
40
|
-
{ id: 203,
|
|
41
|
-
{ id: 310,
|
|
42
|
-
];
|
|
43
|
-
|
|
44
|
-
<SupplyErrorCard
|
|
45
|
-
\`\`\`
|
|
46
|
-
|
|
47
|
-
## Dicas
|
|
48
|
-
- Renderize em um container com padding.
|
|
49
|
-
- Trate cliques/expansão no próprio componente; este story demonstra o comportamento padrão.
|
|
50
|
-
`,
|
|
51
|
-
},
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
export default meta;
|
|
55
|
-
|
|
56
|
-
type Story = StoryObj<typeof meta>;
|
|
57
|
-
|
|
58
|
-
export const Default: Story = {
|
|
59
|
-
name: "supply-error-card-default",
|
|
60
|
-
args: {
|
|
61
|
-
|
|
62
|
-
{ id: 101, mensagem: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
|
|
63
|
-
{ id: 203, mensagem: "Valor inválido no abastecimento #203." },
|
|
64
|
-
{ id: 310, mensagem: "Imagem do comprovante ausente no abastecimento #310." },
|
|
65
|
-
],
|
|
66
|
-
},
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
export const SupplyErrorCardNotMessage: Story = {
|
|
70
|
-
name: "supply-error-card",
|
|
71
|
-
args: {
|
|
72
|
-
};
|
|
1
|
+
/**
|
|
2
|
+
* IMPORTS
|
|
3
|
+
*/
|
|
4
|
+
import type React from "react";
|
|
5
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
6
|
+
|
|
7
|
+
// component
|
|
8
|
+
import SupplyErrorCard from "../../components/supply-error-card";
|
|
9
|
+
|
|
10
|
+
const meta: Meta<typeof SupplyErrorCard> = {
|
|
11
|
+
title: "componente/SupplyErrorCard",
|
|
12
|
+
component: SupplyErrorCard as React.FC,
|
|
13
|
+
args: {
|
|
14
|
+
errors: [
|
|
15
|
+
{ id: 101, descricacao: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
|
|
16
|
+
{ id: 203, descricacao: "Valor inválido no abastecimento #203." },
|
|
17
|
+
{ id: 310, descricacao: "Imagem do comprovante ausente no abastecimento #310." },
|
|
18
|
+
],
|
|
19
|
+
},
|
|
20
|
+
argTypes: {
|
|
21
|
+
errors: {
|
|
22
|
+
description: "Lista de mensagens de erro/exceção relacionadas a abastecimentos.",
|
|
23
|
+
control: "object",
|
|
24
|
+
table: {
|
|
25
|
+
type: { summary: "Array<{ id: number; mensagem: string }>" },
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
parameters: {
|
|
30
|
+
notes: `
|
|
31
|
+
# SupplyErrorCard
|
|
32
|
+
|
|
33
|
+
Card de alertas de abastecimento. Quando **fechado**, exibe apenas a primeira mensagem.
|
|
34
|
+
Ao **clicar**, expande e mostra a lista completa. O ícone alterna entre *chevron down/up*.
|
|
35
|
+
|
|
36
|
+
## Uso básico
|
|
37
|
+
\`\`\`tsx
|
|
38
|
+
const errors = [
|
|
39
|
+
{ id: 101, descricao: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
|
|
40
|
+
{ id: 203, descricao: "Valor inválido no abastecimento #203." },
|
|
41
|
+
{ id: 310, descricao: "Imagem do comprovante ausente no abastecimento #310." },
|
|
42
|
+
];
|
|
43
|
+
|
|
44
|
+
<SupplyErrorCard errors={mensagens} />
|
|
45
|
+
\`\`\`
|
|
46
|
+
|
|
47
|
+
## Dicas
|
|
48
|
+
- Renderize em um container com padding.
|
|
49
|
+
- Trate cliques/expansão no próprio componente; este story demonstra o comportamento padrão.
|
|
50
|
+
`,
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export default meta;
|
|
55
|
+
|
|
56
|
+
type Story = StoryObj<typeof meta>;
|
|
57
|
+
|
|
58
|
+
export const Default: Story = {
|
|
59
|
+
name: "supply-error-card-default",
|
|
60
|
+
args: {
|
|
61
|
+
errors: [
|
|
62
|
+
{ id: 101, mensagem: "Erro ao sincronizar abastecimento #101. Clique para corrigir." },
|
|
63
|
+
{ id: 203, mensagem: "Valor inválido no abastecimento #203." },
|
|
64
|
+
{ id: 310, mensagem: "Imagem do comprovante ausente no abastecimento #310." },
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export const SupplyErrorCardNotMessage: Story = {
|
|
70
|
+
name: "supply-error-card",
|
|
71
|
+
args: { errors: [] },
|
|
72
|
+
};
|