@platformbuilders/react-elements
Version:
Platform Builders Shared Components Library For React Web
1,550 lines (1,496 loc) • 32.7 kB
JavaScript
import { useEffect, Fragment } from 'react';
import { useLocation } from 'react-router-dom';
import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
import styled, { css } from 'styled-components';
import ButtonBase from '@material-ui/core/ButtonBase';
import { Paper as Paper$1, Typography as Typography$1, Link as Link$1, CircularProgress, Button as Button$1, TextField, Checkbox as Checkbox$1, FormControlLabel, Switch as Switch$1, Radio as Radio$1 } from '@material-ui/core';
import { getTheme, ifStyle, pxToRem, toOnlyNumbers } from '@platformbuilders/helpers';
import MaterialIcon from '@material-ui/core/Icon';
import IconButton from '@material-ui/core/IconButton';
import MaterialAvatar from '@material-ui/core/Avatar';
import Animation from 'react-lottie';
import MaskedInput from 'react-text-mask';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
import ReactInputMask from 'react-input-mask';
import { Formik } from 'formik';
import FormHelperText from '@material-ui/core/FormHelperText';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
import Select$1 from '@material-ui/core/Select';
import { Autocomplete as Autocomplete$1 } from '@material-ui/lab';
const ScrollToTop = ({ children }) => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return children;
};
const If = ({ condition, children }) => condition ? children : null;
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
function __rest(s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
}
const CustomTouchable = styled(ButtonBase) ``;
const Touchable = (_a) => {
var { children, onPress } = _a, rest = __rest(_a, ["children", "onPress"]);
return (jsx(CustomTouchable, Object.assign({ onClick: onPress }, rest, { children: children })));
};
const ObjectType = {
STRING: '[object String]',
};
const getType = (value) => {
return Object.prototype.toString.call(value);
};
const isString = (value) => getType(value) === ObjectType.STRING;
const brandPrimary = getTheme('brand.primary.main');
const brandSecondary = getTheme('brand.secondary.main');
const brandTertiary = getTheme('brand.tertiary.main');
const brandAccent = getTheme('brand.accent.main');
const infoMain = getTheme('info.main');
const dangerMain = getTheme('danger.main');
const warningMain = getTheme('warning.main');
const brandPrimaryContrast = getTheme('brand.primary.contrast');
const brandSecondaryContrast = getTheme('brand.secondary.contrast');
const brandTertiaryContrast = getTheme('brand.tertiary.contrast');
const brandAccentContrast = getTheme('brand.accent.contrast');
const infoContrast = getTheme('info.contrast');
const dangerContrast = getTheme('danger.contrast');
const warningContrast = getTheme('warning.contrast');
const getBackgroundColor = (props) => {
if (props.disabled) {
return `${brandPrimary(props)}70`;
}
switch (props.variant) {
case 'primary':
return brandPrimary(props);
case 'secondary':
return brandSecondary(props);
case 'tertiary':
return brandTertiary(props);
case 'accent':
return brandAccent(props);
case 'info':
return infoMain(props);
case 'warning':
return warningMain(props);
case 'danger':
return dangerMain(props);
default:
return brandPrimary(props);
}
};
const getTextColor = (props) => {
if (props.disabled) {
return brandPrimaryContrast(props);
}
switch (props.variant) {
case 'primary':
return brandPrimaryContrast(props);
case 'secondary':
return brandSecondaryContrast(props);
case 'tertiary':
return brandTertiaryContrast(props);
case 'accent':
return brandAccentContrast(props);
case 'danger':
return dangerContrast(props);
case 'info':
return infoContrast(props);
case 'warning':
return warningContrast(props);
default:
return brandPrimaryContrast(props);
}
};
const Wrapper = styled(Paper$1) `
padding: ${getTheme('spacing.md')}px;
`;
const Paper = (_a) => {
var { children } = _a, rest = __rest(_a, ["children"]);
return (jsx(Wrapper, Object.assign({}, rest, { children: children })));
};
const Icon = (_a) => {
var { name, color = 'inherit', size = 'default' } = _a, rest = __rest(_a, ["name", "color", "size"]);
return (jsx(IconButton, Object.assign({ color: "inherit", edge: "start" }, rest, { children: jsx(MaterialIcon, Object.assign({ color: color, fontSize: size }, { children: name })) })));
};
const DefaultAvatar = styled((_a) => {
var { onPress } = _a, rest = __rest(_a, ["onPress"]);
return (jsx(Touchable, Object.assign({ onPress: onPress }, { children: jsx(MaterialAvatar, Object.assign({}, rest)) })));
}) ``;
const Avatar = (_a) => {
var { src, alt = '', variant = 'circle', onPress } = _a, rest = __rest(_a, ["src", "alt", "variant", "onPress"]);
return (jsx(DefaultAvatar, Object.assign({ alt: alt, src: src, variant: variant, onPress: onPress }, rest)));
};
const CustomTypography = styled(Typography$1) ``;
const Typography = (_a) => {
var { variant, children } = _a, rest = __rest(_a, ["variant", "children"]);
return (jsx(CustomTypography, Object.assign({ variant: variant }, rest, { children: children })));
};
var v = "4.6.0";
var fr = 29.9700012207031;
var ip = 0;
var op = 49.0000019958109;
var w = 200;
var h = 200;
var nm = "loading_ring_medium";
var ddd = 0;
var assets = [
];
var layers = [
{
ddd: 0,
ind: 1,
ty: 4,
nm: "green ring 1",
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 1,
k: [
{
i: {
x: [
0.833
],
y: [
0.833
]
},
o: {
x: [
0.167
],
y: [
0.167
]
},
n: [
"0p833_0p833_0p167_0p167"
],
t: 0,
s: [
0
],
e: [
360
]
},
{
t: 49.0000019958109
}
]
},
p: {
a: 0,
k: [
100,
100,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 0,
k: [
200,
200,
100
]
}
},
ao: 0,
shapes: [
{
ty: "gr",
it: [
{
d: 1,
ty: "el",
s: {
a: 0,
k: [
54,
54
]
},
p: {
a: 0,
k: [
0,
0
]
},
nm: "Ellipse Path 1",
mn: "ADBE Vector Shape - Ellipse"
},
{
ty: "st",
c: {
a: 0,
k: [
0.949,
0.6,
0.29,
1
]
},
o: {
a: 0,
k: 100
},
w: {
a: 0,
k: 6
},
lc: 2,
lj: 1,
ml: 4,
nm: "Stroke 1",
mn: "ADBE Vector Graphic - Stroke"
},
{
ty: "tr",
p: {
a: 0,
k: [
0,
0
],
ix: 2
},
a: {
a: 0,
k: [
0,
0
],
ix: 1
},
s: {
a: 0,
k: [
100,
100
],
ix: 3
},
r: {
a: 0,
k: 0,
ix: 6
},
o: {
a: 0,
k: 100,
ix: 7
},
sk: {
a: 0,
k: 0,
ix: 4
},
sa: {
a: 0,
k: 0,
ix: 5
},
nm: "Transform"
}
],
nm: "Ellipse 1",
np: 3,
mn: "ADBE Vector Group"
},
{
ty: "tm",
s: {
a: 1,
k: [
{
i: {
x: [
0.667
],
y: [
1
]
},
o: {
x: [
0.644
],
y: [
0
]
},
n: [
"0p667_1_0p644_0"
],
t: 10,
s: [
0
],
e: [
100
]
},
{
t: 50.0000020365418
}
],
ix: 1
},
e: {
a: 1,
k: [
{
i: {
x: [
0.667
],
y: [
1
]
},
o: {
x: [
0.333
],
y: [
0
]
},
n: [
"0p667_1_0p333_0"
],
t: -1,
s: [
0
],
e: [
100
]
},
{
t: 37.0000015070409
}
],
ix: 2
},
o: {
a: 0,
k: 0,
ix: 3
},
m: 1,
ix: 2,
nm: "Trim Paths 1",
mn: "ADBE Vector Filter - Trim"
}
],
ip: 0,
op: 50.0000020365418,
st: -1.00000004073083,
bm: 0,
sr: 1
},
{
ddd: 0,
ind: 2,
ty: 4,
nm: "flamingo ring 3",
parent: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 1,
k: [
{
i: {
x: [
0.785
],
y: [
1
]
},
o: {
x: [
1
],
y: [
0
]
},
n: [
"0p785_1_1_0"
],
t: 17,
s: [
14.2
],
e: [
360
]
},
{
t: 50.0000020365418
}
]
},
p: {
a: 0,
k: [
0,
0,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
shapes: [
{
ty: "gr",
it: [
{
d: 1,
ty: "el",
s: {
a: 0,
k: [
54,
54
]
},
p: {
a: 0,
k: [
0,
0
]
},
nm: "Ellipse Path 1",
mn: "ADBE Vector Shape - Ellipse"
},
{
ty: "st",
c: {
a: 0,
k: [
0.435,
0.812,
0.592,
1
]
},
o: {
a: 0,
k: 100
},
w: {
a: 0,
k: 6
},
lc: 2,
lj: 1,
ml: 4,
nm: "Stroke 1",
mn: "ADBE Vector Graphic - Stroke"
},
{
ty: "tr",
p: {
a: 0,
k: [
0,
0
],
ix: 2
},
a: {
a: 0,
k: [
0,
0
],
ix: 1
},
s: {
a: 0,
k: [
100,
100
],
ix: 3
},
r: {
a: 0,
k: 0,
ix: 6
},
o: {
a: 0,
k: 100,
ix: 7
},
sk: {
a: 0,
k: 0,
ix: 4
},
sa: {
a: 0,
k: 0,
ix: 5
},
nm: "Transform"
}
],
nm: "Ellipse 1",
np: 3,
mn: "ADBE Vector Group"
},
{
ty: "tm",
s: {
a: 1,
k: [
{
i: {
x: [
0.833
],
y: [
0.833
]
},
o: {
x: [
0.167
],
y: [
0.167
]
},
n: [
"0p833_0p833_0p167_0p167"
],
t: 42,
s: [
0
],
e: [
1
]
},
{
t: 44.0000017921567
}
],
ix: 1
},
e: {
a: 1,
k: [
{
i: {
x: [
0.833
],
y: [
1
]
},
o: {
x: [
0.333
],
y: [
0
]
},
n: [
"0p833_1_0p333_0"
],
t: 20,
s: [
0
],
e: [
1
]
},
{
t: 44.0000017921567
}
],
ix: 2
},
o: {
a: 0,
k: 0,
ix: 3
},
m: 1,
ix: 2,
nm: "Trim Paths 1",
mn: "ADBE Vector Filter - Trim"
}
],
ip: 17.0000006924242,
op: 44.0000017921567,
st: -1.00000004073083,
bm: 0,
sr: 1
},
{
ddd: 0,
ind: 3,
ty: 4,
nm: "flamingo ring 2",
parent: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 1,
k: [
{
i: {
x: [
0.612
],
y: [
1
]
},
o: {
x: [
1
],
y: [
0
]
},
n: [
"0p612_1_1_0"
],
t: 17,
s: [
14.2
],
e: [
360
]
},
{
t: 50.0000020365418
}
]
},
p: {
a: 0,
k: [
0,
0,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
shapes: [
{
ty: "gr",
it: [
{
d: 1,
ty: "el",
s: {
a: 0,
k: [
54,
54
]
},
p: {
a: 0,
k: [
0,
0
]
},
nm: "Ellipse Path 1",
mn: "ADBE Vector Shape - Ellipse"
},
{
ty: "st",
c: {
a: 0,
k: [
0.435,
0.812,
0.592,
1
]
},
o: {
a: 0,
k: 100
},
w: {
a: 0,
k: 6
},
lc: 2,
lj: 1,
ml: 4,
nm: "Stroke 1",
mn: "ADBE Vector Graphic - Stroke"
},
{
ty: "tr",
p: {
a: 0,
k: [
0,
0
],
ix: 2
},
a: {
a: 0,
k: [
0,
0
],
ix: 1
},
s: {
a: 0,
k: [
100,
100
],
ix: 3
},
r: {
a: 0,
k: 0,
ix: 6
},
o: {
a: 0,
k: 100,
ix: 7
},
sk: {
a: 0,
k: 0,
ix: 4
},
sa: {
a: 0,
k: 0,
ix: 5
},
nm: "Transform"
}
],
nm: "Ellipse 1",
np: 3,
mn: "ADBE Vector Group"
},
{
ty: "tm",
s: {
a: 1,
k: [
{
i: {
x: [
0.833
],
y: [
0.833
]
},
o: {
x: [
0.167
],
y: [
0.167
]
},
n: [
"0p833_0p833_0p167_0p167"
],
t: 42,
s: [
0
],
e: [
13.7
]
},
{
t: 44.0000017921567
}
],
ix: 1
},
e: {
a: 1,
k: [
{
i: {
x: [
0.833
],
y: [
1
]
},
o: {
x: [
0.333
],
y: [
0
]
},
n: [
"0p833_1_0p333_0"
],
t: 20,
s: [
0
],
e: [
13.7
]
},
{
t: 44.0000017921567
}
],
ix: 2
},
o: {
a: 0,
k: 0,
ix: 3
},
m: 1,
ix: 2,
nm: "Trim Paths 1",
mn: "ADBE Vector Filter - Trim"
}
],
ip: 17.0000006924242,
op: 44.0000017921567,
st: -1.00000004073083,
bm: 0,
sr: 1
},
{
ddd: 0,
ind: 4,
ty: 4,
nm: "flaming ring 1",
parent: 1,
ks: {
o: {
a: 0,
k: 100
},
r: {
a: 0,
k: 0
},
p: {
a: 0,
k: [
0,
0,
0
]
},
a: {
a: 0,
k: [
0,
0,
0
]
},
s: {
a: 0,
k: [
100,
100,
100
]
}
},
ao: 0,
shapes: [
{
ty: "gr",
it: [
{
d: 1,
ty: "el",
s: {
a: 0,
k: [
54,
54
]
},
p: {
a: 0,
k: [
0,
0
]
},
nm: "Ellipse Path 1",
mn: "ADBE Vector Shape - Ellipse"
},
{
ty: "st",
c: {
a: 0,
k: [
0.435,
0.812,
0.592,
1
]
},
o: {
a: 0,
k: 100
},
w: {
a: 0,
k: 6
},
lc: 2,
lj: 1,
ml: 4,
nm: "Stroke 1",
mn: "ADBE Vector Graphic - Stroke"
},
{
ty: "tr",
p: {
a: 0,
k: [
0,
0
],
ix: 2
},
a: {
a: 0,
k: [
0,
0
],
ix: 1
},
s: {
a: 0,
k: [
100,
100
],
ix: 3
},
r: {
a: 0,
k: 0,
ix: 6
},
o: {
a: 0,
k: 100,
ix: 7
},
sk: {
a: 0,
k: 0,
ix: 4
},
sa: {
a: 0,
k: 0,
ix: 5
},
nm: "Transform"
}
],
nm: "Ellipse 1",
np: 3,
mn: "ADBE Vector Group"
},
{
ty: "tm",
s: {
a: 1,
k: [
{
i: {
x: [
0.667
],
y: [
1
]
},
o: {
x: [
1
],
y: [
0
]
},
n: [
"0p667_1_1_0"
],
t: 8,
s: [
0
],
e: [
100
]
},
{
t: 48.0000019550801
}
],
ix: 1
},
e: {
a: 1,
k: [
{
i: {
x: [
0.667
],
y: [
1
]
},
o: {
x: [
1
],
y: [
0
]
},
n: [
"0p667_1_1_0"
],
t: -1,
s: [
0
],
e: [
100
]
},
{
t: 37.0000015070409
}
],
ix: 2
},
o: {
a: 0,
k: 0,
ix: 3
},
m: 1,
ix: 2,
nm: "Trim Paths 1",
mn: "ADBE Vector Filter - Trim"
}
],
ip: 15.0000006109625,
op: 44.0000017921567,
st: -1.00000004073083,
bm: 0,
sr: 1
}
];
var loading = {
v: v,
fr: fr,
ip: ip,
op: op,
w: w,
h: h,
nm: nm,
ddd: ddd,
assets: assets,
layers: layers
};
var Sizes;
(function (Sizes) {
Sizes[Sizes["small"] = 30] = "small";
Sizes[Sizes["medium"] = 45] = "medium";
Sizes[Sizes["large"] = 60] = "large";
})(Sizes || (Sizes = {}));
const defaultOptions = {
loop: true,
autoplay: true,
animationData: loading,
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice',
},
};
const LoadingIndicator = ({ size = 'medium' }) => (jsx(Animation, { options: defaultOptions, isStopped: false, isPaused: false, height: Sizes[size], width: Sizes[size] }));
const primary = getTheme('brand.primary.main');
const CustomLink = styled(Link$1) `
color: ${primary};
text-decoration: none;
cursor: pointer;
&:hover {
text-decoration: none;
}
`;
const Link = (_a) => {
var { onPress, children } = _a, rest = __rest(_a, ["onPress", "children"]);
return (jsx(CustomLink, Object.assign({ onClick: onPress }, rest, { children: children })));
};
const Wrapper$1 = styled(Fragment) ``;
const LoadingIndicatorWrapper = styled.div `
display: flex;
justify-content: ${({ justifyLoadingIndicator }) => justifyLoadingIndicator};
align-items: ${({ alignLoadingIndicator }) => alignLoadingIndicator};
`;
const LoadingIndicator$1 = styled(CircularProgress) `
&.MuiCircularProgress-root {
color: ${getTextColor};
${({ customLoadingColor }) => customLoadingColor &&
css `
color: ${customLoadingColor};
`}
}
`;
const LazyWrapper = ({ loading = false, customLoadingIndicatorSize, customLoadingIndicator: CustomLoadingIndicator, justifyLoadingIndicator = 'flex-start', alignLoadingIndicator = 'flex-start', customLoadingColor, children, }) => {
return (jsxs(Wrapper$1, { children: [jsx(If, Object.assign({ condition: loading && !CustomLoadingIndicator }, { children: jsx(LoadingIndicatorWrapper, Object.assign({ justifyLoadingIndicator: justifyLoadingIndicator, alignLoadingIndicator: alignLoadingIndicator }, { children: jsx(LoadingIndicator$1, Object.assign({ loading: loading, customLoadingColor: customLoadingColor, size: customLoadingIndicatorSize ? customLoadingIndicatorSize : 20 }, { children: jsx(Fragment, {}) })) })) })), jsx(If, Object.assign({ condition: loading && !!CustomLoadingIndicator }, { children: jsx(LoadingIndicatorWrapper, Object.assign({ justifyLoadingIndicator: justifyLoadingIndicator, alignLoadingIndicator: alignLoadingIndicator }, { children: CustomLoadingIndicator })) })), jsx(If, Object.assign({ condition: !loading }, { children: children }))] }));
};
const spacingSm = getTheme('spacing.sm');
const borderRadiusMax = getTheme('borderRadius.max');
const isFlat = ifStyle('flat');
const hasBorder = ifStyle('hasBorder');
const StyledButton = styled((props) => (jsx(Button$1, Object.assign({}, props, { secondary: undefined })))) `
&.MuiButton-root {
background-color: ${isFlat('transparent', getBackgroundColor)};
min-width: 155px;
border-radius: ${borderRadiusMax}px;
padding: ${spacingSm}px;
color: ${isFlat(getBackgroundColor, getTextColor)};
border: ${hasBorder(1, 0)}px solid ${getBackgroundColor};
:hover {
background: ${isFlat('transparent', getBackgroundColor)};
}
}
`;
const LoadingIndicator$2 = styled((props) => (jsx(CircularProgress, Object.assign({}, props, { size: 20 })))) `
&.MuiCircularProgress-root {
color: ${getTextColor};
}
`;
const Button = (_a) => {
var { children, type, onPress, loading = false, disabled = false, variant = 'primary' } = _a, rest = __rest(_a, ["children", "type", "onPress", "loading", "disabled", "variant"]);
return (jsxs(StyledButton, Object.assign({ onClick: onPress, variant: variant, disabled: disabled, type: type || undefined }, rest, { children: [jsx(If, Object.assign({ condition: !!loading }, { children: jsx(LoadingIndicator$2, {}) })), jsx(If, Object.assign({ condition: !loading }, { children: children }))] })));
};
const textColor = getTheme('text');
const primaryMain = getTheme('primary.main');
const smallSpacing = getTheme('smallSpacing');
const failureColor = getTheme('failure');
const hasError = ifStyle('selected');
const Wrapper$2 = styled.div `
position: relative;
`;
const Input = styled(TextField) `
font-size: ${pxToRem(16)};
padding: ${smallSpacing} 0;
display: block;
width: ${pxToRem(300)};
border: none;
border-bottom: ${pxToRem(1)} solid ${textColor}80;
color: ${hasError(failureColor, textColor)};
:focus {
outline: none;
}
:focus ~ label {
top: ${pxToRem(-20)};
font-size: ${pxToRem(14)};
color: ${primaryMain};
}
:valid ~ label {
top: ${pxToRem(-20)};
font-size: ${pxToRem(14)};
}
:focus ~ .bar:before,
:focus ~ .bar:after {
width: 50%;
}
`;
const Bar = styled.span `
position: absolute;
bottom: ${pxToRem(-1)};
display: block;
width: 100%;
:before,
:after {
content: '';
height: ${pxToRem(2)};
width: 0;
bottom: ${pxToRem(1)};
position: absolute;
background: ${hasError(failureColor, primaryMain)};
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
:before {
left: 50%;
width: ${hasError('50%', 0)};
}
:after {
right: 50%;
width: ${hasError('50%', 0)};
}
`;
const Label = styled.label `
color: ${hasError(failureColor, textColor)};
font-size: ${pxToRem(18)};
font-weight: normal;
position: absolute;
pointer-events: none;
top: ${pxToRem(10)};
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
`;
const defaultMaskOptions = {
prefix: 'R$ ',
suffix: '',
includeThousandsSeparator: true,
thousandsSeparatorSymbol: '.',
allowDecimal: true,
decimalSymbol: ',',
decimalLimit: 2,
};
const CurrencyInputComponent = ({ error, label, id, name, onChangeText, onBlur, onFocus, value, variant = 'standard', }) => {
const currencyMask = createNumberMask(defaultMaskOptions);
const handleChange = (event) => {
if (onChangeText && event.target.value) {
onChangeText(Object.assign(Object.assign({}, event), { target: Object.assign(Object.assign({}, event.target), { value: toOnlyNumbers(event.target.value) }) }));
}
};
return (jsx(FormError, Object.assign({ error: error }, { children: jsxs(Wrapper$2, { children: [jsx(MaskedInput, { mask: currencyMask, placeholder: "R$ 0,00", id: id, name: name, value: value, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, render: (ref, props) => (jsx(Input, Object.assign({ ref: ref, variant: variant, error: error }, props))) }), jsx(Bar, { className: "bar", error: error }), jsx(Label, Object.assign({ error: error }, { children: label }))] }) })));
};
const brandPrimaryMain = getTheme('brand.primary.main');
const Input$1 = styled(TextField) `
& label {
font-size: 1em;
}
& label.Mui-focused {
color: ${brandPrimaryMain};
}
& .MuiInput-underline:after {
border-bottom-color: ${brandPrimaryMain};
}
`;
const InputWrapper = styled.div `
flex-direction: column;
`;
var Mask;
(function (Mask) {
Mask["cep"] = "99999-999";
Mask["cpf"] = "999.999.999-99";
Mask["cnpj"] = "99.999.999/9999-99";
Mask["birthdate"] = "99/99/9999";
Mask["phone"] = "(99) 9999-9999";
Mask["cellphone"] = "(99) 99999-9999";
})(Mask || (Mask = {}));
const TextInputMask = (_a) => {
var { mask, maskType = '', onChange, onBlur, onFocus, inputProps, error, variant = 'standard' } = _a, rest = __rest(_a, ["mask", "maskType", "onChange", "onBlur", "onFocus", "inputProps", "error", "variant"]);
const maskOption = Mask[maskType] || mask;
return (jsx(ReactInputMask, Object.assign({ mask: maskOption, onChange: onChange, onBlur: onBlur, onFocus: onFocus }, rest, { children: (inputMaskProps) => (jsx(Input$1, Object.assign({ margin: "normal", error: !!error, inputProps: inputProps, variant: variant }, inputMaskProps, rest))) })));
};
const TextInput = (_a) => {
var { mask, maskType = '', error = '', onChange, onBlur, onFocus, inputProps, maxlength, variant = 'standard' } = _a, rest = __rest(_a, ["mask", "maskType", "error", "onChange", "onBlur", "onFocus", "inputProps", "maxlength", "variant"]);
const hasMask = mask || maskType;
const renderTextInput = () => {
if (maskType === 'currency') {
return (jsx(CurrencyInputComponent, Object.assign({}, rest, { onChangeText: onChange, onBlur: onBlur, onFocus: onFocus, variant: variant })));
}
if (hasMask) {
return (jsx(TextInputMask, Object.assign({}, rest, { mask: mask, maskType: maskType, onChange: onChange, onBlur: onBlur, onFocus: onFocus, error: !!error, variant: variant, inputProps: Object.assign({ maxLength: maxlength }, inputProps) })));
}
return (jsx(Input$1, Object.assign({}, rest, { margin: "normal", onChange: onChange, onBlur: onBlur, onFocus: onFocus, error: !!error, inputProps: Object.assign({ maxLength: maxlength }, inputProps), variant: variant })));
};
return (jsx(InputWrapper, Object.assign({}, rest, { children: jsx(FormError, Object.assign({ error: error }, { children: renderTextInput() })) })));
};
const ErrorText = styled(Typography).attrs({ variant: 'caption' }) `
color: ${getTheme('danger.main')};
`;
const FormError = (_a) => {
var { children, error } = _a, rest = __rest(_a, ["children", "error"]);
const isErrorValid = isString(error);
return (jsxs(Fragment$1, { children: [children, isErrorValid && jsx(ErrorText, Object.assign({}, rest, { children: error }))] }));
};
const FormContainer = (_a) => {
var { validateOnChange, validationSchema, initialValues, onSubmit, children } = _a, rest = __rest(_a, ["validateOnChange", "validationSchema", "initialValues", "onSubmit", "children"]);
return (jsx(Formik, Object.assign({ validateOnChange: validateOnChange, validationSchema: validationSchema, initialValues: initialValues, onSubmit: onSubmit }, rest, { children: children })));
};
const brandPrimaryMain$1 = getTheme('brand.primary.main');
const successMain = getTheme('success.main');
const Wrapper$3 = styled.div `
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 10px;
`;
const ColoredCheckbox = styled((props) => (jsx(Checkbox$1, Object.assign({ color: "default", checked: props.checked, onChange: props.onChange }, props)))) `
color: ${brandPrimaryMain$1};
& .Mui-checked {
color: ${successMain};
}
`;
const StyledCheckbox = styled((props) => (jsx(FormControlLabel, { control: jsx(ColoredCheckbox, { checked: props.checked, onChange: props.onChange }), label: props.label }))) ``;
const Checkbox = ({ checked, onChange, label, name, error, }) => (jsx(Wrapper$3, { children: jsx(FormError, Object.assign({ error: error }, { children: jsx(StyledCheckbox, { label: label, name: name, checked: checked, onChange: onChange }) })) }));
const Wrapper$4 = styled(FormControl) ``;
const MaterialSelect = styled(Select$1) `
.MuiSelect-select {
width: calc(100% - 32px) !important;
}
`;
const Item = styled(MenuItem) `
.MuiListItem-root {
width: 100% !important;
}
`;
const Select = (_a) => {
var { onChange, error = '', label = '', selectedValue, values, id } = _a, rest = __rest(_a, ["onChange", "error", "label", "selectedValue", "values", "id"]);
return (jsxs(Wrapper$4, Object.assign({ error: error !== '' }, rest, { children: [jsx(InputLabel, { children: label }), jsx(MaterialSelect, Object.assign({ id: id, value: selectedValue, onChange: (event) => onChange(event.target.value) }, rest, { children: values.map((item) => (jsx(Item, Object.assign({ id: id && `${id}-option-${item.value}`, value: item.value }, rest, { children: item.label }), item.value))) })), jsx(FormHelperText, { children: error })] })));
};
const Autocomplete = (props) => {
return jsx(Autocomplete$1, Object.assign({}, props));
};
const StyledSwitch = styled((_a) => {
var { labelPlacement, label } = _a, rest = __rest(_a, ["labelPlacement", "label"]);
return (jsx(FormControlLabel, { control: jsx(Switch$1, Object.assign({}, rest)), labelPlacement: labelPlacement, label: label }));
}) `
&.MuiSwitch-switchBase.Mui-checked {
color: ${getBackgroundColor};
&:hover {
background-color: ${getBackgroundColor}70;
}
}
&.MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track {
background-color: ${getBackgroundColor},
},
`;
const Switch = (props) => {
return jsx(StyledSwitch, Object.assign({}, props));
};
const StyledRadio = styled((_a) => {
var { label, labelPlacement, value } = _a, rest = __rest(_a, ["label", "labelPlacement", "value"]);
return (jsx(FormControlLabel, { control: jsx(Radio$1, Object.assign({}, rest)), label: label, labelPlacement: labelPlacement, value: value }));
}) `
&.MuiRadio-colorSecondary.Mui-checked {
color: ${getBackgroundColor} !important;
&:hover {
background-color: ${getBackgroundColor}70 !important;
}
}
&.MuiRadio-colorSecondary.Mui-checked + .MuiRadio-track {
background-color: ${getBackgroundColor} !important;
}
`;
const Radio = (props) => {
return jsx(StyledRadio, Object.assign({}, props));
};
export { Autocomplete, Avatar, Button, Checkbox, FormContainer, FormError, Icon, If, LazyWrapper, Link, LoadingIndicator, Paper, Radio, ScrollToTop, Select, Switch, TextInput, Touchable, Typography };
//# sourceMappingURL=index.esm.js.map