@pipelinesolucoes/form 1.3.7 → 1.3.9
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/README.md
CHANGED
|
@@ -44,6 +44,9 @@ A biblioteca inclui os seguintes componentes:
|
|
|
44
44
|
|
|
45
45
|
- **NotificationSnackbar**
|
|
46
46
|
Componente que exibe uma notificação no topo da tela utilizando o Snackbar e Alert do Material UI.
|
|
47
|
+
|
|
48
|
+
- **Field**
|
|
49
|
+
Componente que exibe label e valor apenas para leitura.
|
|
47
50
|
---
|
|
48
51
|
|
|
49
52
|
## ✨ Características
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TypographyVariant } from '@mui/material/styles';
|
|
3
3
|
import { BorderProps, ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
4
|
-
export interface FieldProps extends Omit<ColorProps, 'backgroundHover' | 'backgroundFocused' | 'backgroundDisabled' | 'colorHover' | 'colorDisabled' | 'colorFocused'>, Omit<BorderProps, 'border'>, Pick<LayoutProps, 'height' | 'padding' | 'margin' | "maxWidth"> {
|
|
4
|
+
export interface FieldProps extends Omit<ColorProps, 'backgroundHover' | 'backgroundFocused' | 'backgroundDisabled' | 'colorHover' | 'colorDisabled' | 'colorFocused'>, Omit<BorderProps, 'border'>, Pick<LayoutProps, 'width' | 'height' | 'padding' | 'margin' | "maxWidth"> {
|
|
5
5
|
label: string;
|
|
6
6
|
textVariantLabel?: TypographyVariant;
|
|
7
|
-
colorLabel
|
|
7
|
+
colorLabel?: string;
|
|
8
8
|
value?: string | number | null;
|
|
9
9
|
textVariantField?: TypographyVariant;
|
|
10
|
+
width?: string;
|
|
10
11
|
}
|
|
11
12
|
declare const Field: React.FC<FieldProps>;
|
|
12
13
|
export default Field;
|
package/dist/components/Field.js
CHANGED
|
@@ -2,31 +2,18 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Box } from '@mui/material';
|
|
4
4
|
import { styled, useTheme } from '@mui/material/styles';
|
|
5
|
-
import { fbbackground, fbborderColor, fbborderRadius, fbboxShadow, fbcolor, fbheigth, fbmargin, fbpadding } from '
|
|
5
|
+
import { fbbackground, fbborderColor, fbborderRadius, fbboxShadow, fbcolor, fbheigth, fbmargin, fbpadding } from '../constant';
|
|
6
6
|
const StyledContainer = styled(Box, {
|
|
7
7
|
shouldForwardProp: (prop) => ![
|
|
8
|
-
'maxWidth',
|
|
9
|
-
'
|
|
10
|
-
'
|
|
11
|
-
'backgroundDisabled',
|
|
12
|
-
'color',
|
|
13
|
-
'colorFocused',
|
|
14
|
-
'colorDisabled',
|
|
15
|
-
'borderRadius',
|
|
16
|
-
'boxShadow',
|
|
17
|
-
'borderColor',
|
|
18
|
-
'textVariant',
|
|
19
|
-
'padding',
|
|
20
|
-
'height',
|
|
21
|
-
'margin',
|
|
22
|
-
'disabled',
|
|
23
|
-
'focused',
|
|
8
|
+
'maxWidth', 'background', 'backgroundFocused', 'backgroundDisabled', 'color',
|
|
9
|
+
'borderRadius', 'boxShadow', 'borderColor', 'padding',
|
|
10
|
+
'height', 'width', 'margin',
|
|
24
11
|
].includes(prop),
|
|
25
|
-
})(({ maxWidth, background, color, borderRadius, boxShadow, borderColor, padding, height, margin, typo, theme, }) => (Object.assign({ display: 'flex', flexDirection: 'column', minWidth: 150, maxWidth: maxWidth || '100%', background: background || 'transparent', color: color || theme.palette.text.primary, borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : theme.shape.borderRadius, boxShadow: boxShadow !== null && boxShadow !== void 0 ? boxShadow : 'none', border: borderColor ? `1px solid ${borderColor}` : 'none', padding: padding !== null && padding !== void 0 ? padding : theme.spacing(1), height: height !== null && height !== void 0 ? height : 'auto', margin: margin !== null && margin !== void 0 ? margin : 0 }, (typo !== null && typo !== void 0 ? typo : {}))));
|
|
12
|
+
})(({ maxWidth, background, color, borderRadius, boxShadow, borderColor, padding, height, width, margin, typo, theme, }) => (Object.assign({ display: 'flex', flexDirection: 'column', width: width, minWidth: 150, maxWidth: maxWidth || '100%', background: background || 'transparent', color: color || theme.palette.text.primary, borderRadius: borderRadius !== null && borderRadius !== void 0 ? borderRadius : theme.shape.borderRadius, boxShadow: boxShadow !== null && boxShadow !== void 0 ? boxShadow : 'none', border: borderColor ? `1px solid ${borderColor}` : 'none', padding: padding !== null && padding !== void 0 ? padding : theme.spacing(1), height: height !== null && height !== void 0 ? height : 'auto', margin: margin !== null && margin !== void 0 ? margin : 0 }, (typo !== null && typo !== void 0 ? typo : {}))));
|
|
26
13
|
const LabelStyle = styled(Box, {
|
|
27
14
|
shouldForwardProp: (prop) => !['color', 'typo',].includes(prop),
|
|
28
15
|
})(({ color, typo, theme, }) => (Object.assign({ color: color || theme.palette.text.primary }, (typo !== null && typo !== void 0 ? typo : {}))));
|
|
29
|
-
const Field = ({ label, textVariantLabel, colorLabel, value, background, color, borderRadius, boxShadow, borderColor, textVariantField, padding, height, margin, maxWidth = '100%' }) => {
|
|
16
|
+
const Field = ({ label, textVariantLabel = 'caption', colorLabel, value, background, color, borderRadius, boxShadow, borderColor, textVariantField = 'body1', padding, height, margin, width = 'auto', maxWidth = '100%' }) => {
|
|
30
17
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
31
18
|
const theme = useTheme();
|
|
32
19
|
// props -> tokens -> fallback
|
|
@@ -41,9 +28,9 @@ const Field = ({ label, textVariantLabel, colorLabel, value, background, color,
|
|
|
41
28
|
const hg = (_k = height !== null && height !== void 0 ? height : field === null || field === void 0 ? void 0 : field.height) !== null && _k !== void 0 ? _k : fbheigth;
|
|
42
29
|
const typoField = (_m = (_l = (textVariantField && theme.typography[textVariantField])) !== null && _l !== void 0 ? _l : field === null || field === void 0 ? void 0 : field.typography) !== null && _m !== void 0 ? _m : theme.typography.body1;
|
|
43
30
|
const labelTheme = (_p = (_o = theme.pipelinesolucoes) === null || _o === void 0 ? void 0 : _o.forms) === null || _p === void 0 ? void 0 : _p.label;
|
|
44
|
-
const typoLabel = (_r = (_q = (textVariantLabel && theme.typography[textVariantLabel])) !== null && _q !== void 0 ? _q : labelTheme === null || labelTheme === void 0 ? void 0 : labelTheme.typography) !== null && _r !== void 0 ? _r : theme.typography.
|
|
31
|
+
const typoLabel = (_r = (_q = (textVariantLabel && theme.typography[textVariantLabel])) !== null && _q !== void 0 ? _q : labelTheme === null || labelTheme === void 0 ? void 0 : labelTheme.typography) !== null && _r !== void 0 ? _r : theme.typography.caption;
|
|
45
32
|
const color_label = (_s = colorLabel !== null && colorLabel !== void 0 ? colorLabel : labelTheme === null || labelTheme === void 0 ? void 0 : labelTheme.color) !== null && _s !== void 0 ? _s : fbcolor;
|
|
46
|
-
return (_jsxs(StyledContainer, { maxWidth: maxWidth, background: bg, color: txt, borderRadius: br, boxShadow: sh, borderColor: bd, padding: pad, height: hg, margin: mg, typo: typoField, children: [_jsx(LabelStyle, { typo: typoLabel, color: color_label, children: label }), _jsx("div", { children: value !== null && value !== void 0 ? value : '-' })] }));
|
|
33
|
+
return (_jsxs(StyledContainer, { maxWidth: maxWidth, background: bg, color: txt, borderRadius: br, boxShadow: sh, borderColor: bd, padding: pad, height: hg, margin: mg, typo: typoField, width: width, children: [_jsx(LabelStyle, { typo: typoLabel, color: color_label, children: label }), _jsx("div", { children: value !== null && value !== void 0 ? value : '-' })] }));
|
|
47
34
|
};
|
|
48
35
|
Field.displayName = 'Field';
|
|
49
36
|
export default Field;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAa,MAAM,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAa,MAAM,EAAqB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAgB/H,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,EAAE;IAClC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC;QACC,UAAU,EAAE,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,OAAO;QAC5E,cAAc,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS;QACrD,QAAQ,EAAE,OAAO,EAAE,QAAQ;KAC5B,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC7B,CAAC,CAMA,CAAC,EAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EACjE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,CAAC,iBAEnD,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,QAAQ,IAAI,MAAM,EAC5B,UAAU,EAAE,UAAU,IAAI,aAAa,EACvC,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAC1C,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,CAAC,KAAK,CAAC,YAAY,EACtD,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,MAAM,EAC9B,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,aAAa,WAAW,EAAE,CAAC,CAAC,CAAC,MAAM,EACzD,OAAO,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EACpC,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,MAAM,EACxB,MAAM,EAAE,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,IAChB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EACf,CACH,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,EAAE;IAC7B,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAC1B,CAAC,CAAC,OAAO,EAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,IAAc,CAAC;CAC9C,CAAC,CAGA,CAAC,EAAC,KAAK,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,CAAC,iBAC1B,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,IACvC,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EACf,CACH,CAAC;AAGF,MAAM,KAAK,GAAyB,CAAC,EACnC,KAAK,EACL,gBAAgB,GAAG,SAAS,EAC5B,UAAU,EAEV,KAAK,EACL,UAAU,EACV,KAAK,EACL,YAAY,EACZ,SAAS,EACT,WAAW,EACX,gBAAgB,GAAG,OAAO,EAE1B,OAAO,EACP,MAAM,EACN,MAAM,EACN,KAAK,GAAC,MAAM,EACZ,QAAQ,GAAG,MAAM,EAAE,EAAE,EAAE;;IAGvB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,8BAA8B;IAC9B,MAAM,KAAK,GAAG,MAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,KAAK,0CAAE,KAAK,CAAC;IACnD,MAAM,EAAE,GAAG,MAAA,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,mCAAI,YAAY,CAAC;IAC3D,MAAM,GAAG,GAAG,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,mCAAI,OAAO,CAAC;IAC7C,MAAM,EAAE,GAAG,MAAA,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,mCAAI,cAAc,CAAC;IACjE,MAAM,EAAE,GAAG,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,SAAS,mCAAI,WAAW,CAAC;IACxD,MAAM,EAAE,GAAG,MAAA,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,mCAAI,aAAa,CAAC;IAC9D,MAAM,GAAG,GAAG,MAAA,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,mCAAI,SAAS,CAAC;IACnD,MAAM,EAAE,GAAG,MAAA,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,QAAQ,CAAC;IAC/C,MAAM,EAAE,GAAG,MAAA,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,mCAAI,QAAQ,CAAC;IAE/C,MAAM,SAAS,GACb,MAAA,MAAA,CAAC,gBAAgB,IAAI,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,mCACxD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,mCACjB,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;IAEzB,MAAM,UAAU,GAAG,MAAA,MAAA,KAAK,CAAC,gBAAgB,0CAAE,KAAK,0CAAE,KAAK,CAAC;IACxD,MAAM,SAAS,GACb,MAAA,MAAA,CAAC,gBAAgB,IAAI,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,mCACxD,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCACtB,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC;IAC3B,MAAM,WAAW,GAAG,MAAA,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,mCAAI,OAAO,CAAC;IAE/D,OAAO,CACL,MAAC,eAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,EACnD,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,WAAW,EAAE,EAAE,EAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aAEjE,KAAC,UAAU,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,YAAG,KAAK,GAAc,EACrE,wBAAM,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,GAAG,GAAO,IAET,CACnB,CAAC;AACJ,CAAC,CAAC;AAGF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC;AAC5B,eAAe,KAAK,CAAC"}
|