@porsche-design-system/components-react
Version:
Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.
21 lines (18 loc) • 1.82 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { splitChildren } from '../../splitChildren.mjs';
import { Label } from './label.mjs';
import { descriptionId } from '../../../../../../components/dist/utils/esm/utils-entry.mjs';
import { messageId, StateMessage } from './state-message.mjs';
const InputBase = ({ children,
// host,
id, label, description, required, disabled, state, message, theme, readOnly, type, form, placeholder, maxLength, minLength, max, min, value, step, autoComplete, name,
// onInput,
onWheel,
// onChange,
// onBlur,
// refElement,
start, end, }) => {
const { namedSlotChildren } = splitChildren(children);
return (jsxs("div", { className: "root", children: [jsx(Label, { hasLabel: !!label || namedSlotChildren.filter(({ props: { slot } }) => slot === 'label').length > 0, hasDescription: !!description || namedSlotChildren.filter(({ props: { slot } }) => slot === 'description').length > 0, host: null, label: label, description: description, htmlFor: id, isRequired: required, isDisabled: disabled }), jsxs("div", { className: "wrapper", children: [jsx("slot", { name: "start" }), start, jsx("input", { "aria-describedby": `${descriptionId} ${messageId}`, "aria-invalid": state === 'error' ? 'true' : null, id: id, onWheel: onWheel, name: name, form: form, type: type, required: required, placeholder: placeholder, maxLength: maxLength, minLength: minLength, max: max, min: min, step: step, value: value, readOnly: readOnly, autoComplete: autoComplete, disabled: disabled }), end, jsx("slot", { name: "end" })] }), jsx(StateMessage, { hasMessage: (message || namedSlotChildren.filter(({ props: { slot } }) => slot === 'message').length > 0) && ['success', 'error'].includes(state), state: state, message: message, theme: theme, host: null })] }));
};
export { InputBase };