%PDF-
%PDF-
Mini Shell
Mini Shell
import React from "react";
import PropTypes from "prop-types";
import { Checkbox } from "../Checkbox";
import { TextInput } from "../TextInput";
import { TEXT_KINDS, TEXT_SIZES } from "../Text";
import { FlexRow, Wrapper, StyledText } from "./Field.styles";
const components = {
CHECKBOX: Checkbox,
TEXT: TextInput,
};
export const FIELD_COMPONENTS = Object.keys(components).reduce(
(accumulator, key) => ({ ...accumulator, [key]: key }),
{},
);
export function Field({
label,
labelRight,
component,
propsToPass,
name,
form,
required,
...rest
}) {
const fieldComponent = components[component];
const value = name ? form?.[name] : rest.value;
const onChange = name
? (newValue) => {
rest.onChange(newValue, name);
}
: rest.onChange;
const fieldComponentProps = {
...rest, value, onChange, ...propsToPass,
};
return (
<Wrapper>
{label && (
<StyledText
kind={TEXT_KINDS.LABEL}
size={TEXT_SIZES.MEDIUM}
disabled={rest.disabled}
bottomMargin
>
{`${label}${required ? " *" : ""}`}
</StyledText>
)}
<FlexRow>
{fieldComponent(fieldComponentProps)}
{labelRight && (
<StyledText
kind={TEXT_KINDS.BODY}
size={TEXT_SIZES.MEDIUM}
disabled={rest.disabled}
leftMargin
>
{labelRight}
</StyledText>
)}
</FlexRow>
</Wrapper>
);
}
Field.propTypes = {
label: PropTypes.string,
labelRight: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
component: PropTypes.oneOf(Object.values(FIELD_COMPONENTS)).isRequired,
propsToPass: PropTypes.object,
name: PropTypes.string,
form: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
required: PropTypes.bool,
};
Field.defaultProps = {
label: null,
labelRight: null,
propsToPass: {},
name: null,
form: null,
required: false,
};
Zerion Mini Shell 1.0