@pipelinesolucoes/form 1.3.8 → 1.3.10
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.
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TypographyVariant } from '@mui/material/styles';
|
|
3
|
-
import {
|
|
4
|
-
export interface FieldProps extends
|
|
3
|
+
import { ColorProps, LayoutProps } from '@pipelinesolucoes/theme';
|
|
4
|
+
export interface FieldProps extends Pick<ColorProps, 'background' | 'color'>, Pick<LayoutProps, 'width' | "maxWidth"> {
|
|
5
5
|
label: string;
|
|
6
6
|
textVariantLabel?: TypographyVariant;
|
|
7
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,48 +2,25 @@
|
|
|
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,
|
|
5
|
+
import { fbbackground, fbcolor } from '../constant';
|
|
6
6
|
const StyledContainer = styled(Box, {
|
|
7
|
-
shouldForwardProp: (prop) => ![
|
|
8
|
-
|
|
9
|
-
'background',
|
|
10
|
-
'backgroundFocused',
|
|
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',
|
|
24
|
-
].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 : {}))));
|
|
7
|
+
shouldForwardProp: (prop) => !['maxWidth', 'background', 'color', 'width'].includes(prop),
|
|
8
|
+
})(({ maxWidth, background, color, width, typo, theme, }) => (Object.assign({ display: 'flex', flexDirection: 'column', width: width, minWidth: 150, maxWidth: maxWidth || '100%', background: background || 'transparent', color: color || theme.palette.text.primary, height: 'auto', margin: 0 }, (typo !== null && typo !== void 0 ? typo : {}))));
|
|
26
9
|
const LabelStyle = styled(Box, {
|
|
27
10
|
shouldForwardProp: (prop) => !['color', 'typo',].includes(prop),
|
|
28
11
|
})(({ color, typo, theme, }) => (Object.assign({ color: color || theme.palette.text.primary }, (typo !== null && typo !== void 0 ? typo : {}))));
|
|
29
|
-
const Field = ({ label, textVariantLabel = 'caption', colorLabel, value, background, color,
|
|
30
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l
|
|
12
|
+
const Field = ({ label, textVariantLabel = 'caption', colorLabel, value, background, color, textVariantField = 'body1', width = 'auto', maxWidth = '100%' }) => {
|
|
13
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
31
14
|
const theme = useTheme();
|
|
32
15
|
// props -> tokens -> fallback
|
|
33
16
|
const field = (_b = (_a = theme.pipelinesolucoes) === null || _a === void 0 ? void 0 : _a.forms) === null || _b === void 0 ? void 0 : _b.field;
|
|
34
17
|
const bg = (_c = background !== null && background !== void 0 ? background : field === null || field === void 0 ? void 0 : field.background) !== null && _c !== void 0 ? _c : fbbackground;
|
|
35
18
|
const txt = (_d = color !== null && color !== void 0 ? color : field === null || field === void 0 ? void 0 : field.color) !== null && _d !== void 0 ? _d : fbcolor;
|
|
36
|
-
const
|
|
37
|
-
const
|
|
38
|
-
const
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
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
|
-
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
|
-
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.caption;
|
|
45
|
-
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 : '-' })] }));
|
|
19
|
+
const typoField = (_f = (_e = (textVariantField && theme.typography[textVariantField])) !== null && _e !== void 0 ? _e : field === null || field === void 0 ? void 0 : field.typography) !== null && _f !== void 0 ? _f : theme.typography.body1;
|
|
20
|
+
const labelTheme = (_h = (_g = theme.pipelinesolucoes) === null || _g === void 0 ? void 0 : _g.forms) === null || _h === void 0 ? void 0 : _h.label;
|
|
21
|
+
const typoLabel = (_k = (_j = (textVariantLabel && theme.typography[textVariantLabel])) !== null && _j !== void 0 ? _j : labelTheme === null || labelTheme === void 0 ? void 0 : labelTheme.typography) !== null && _k !== void 0 ? _k : theme.typography.caption;
|
|
22
|
+
const color_label = (_l = colorLabel !== null && colorLabel !== void 0 ? colorLabel : labelTheme === null || labelTheme === void 0 ? void 0 : labelTheme.color) !== null && _l !== void 0 ? _l : fbcolor;
|
|
23
|
+
return (_jsxs(StyledContainer, { maxWidth: maxWidth, background: bg, color: txt, typo: typoField, width: width, children: [_jsx(LabelStyle, { typo: typoLabel, color: color_label, children: label }), _jsx("div", { children: value !== null && value !== void 0 ? value : '-' })] }));
|
|
47
24
|
};
|
|
48
25
|
Field.displayName = 'Field';
|
|
49
26
|
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,
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"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"}
|