296 lines
No EOL
11 KiB
JavaScript
296 lines
No EOL
11 KiB
JavaScript
'use client';
|
|
|
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps", "data-active-range-position"];
|
|
import * as React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import clsx from 'clsx';
|
|
import { styled, useThemeProps } from '@mui/material/styles';
|
|
import refType from '@mui/utils/refType';
|
|
import useForkRef from '@mui/utils/useForkRef';
|
|
import composeClasses from '@mui/utils/composeClasses';
|
|
import useId from '@mui/utils/useId';
|
|
import InputLabel from '@mui/material/InputLabel';
|
|
import FormHelperText from '@mui/material/FormHelperText';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import { getPickersTextFieldUtilityClass } from "./pickersTextFieldClasses.js";
|
|
import { PickersOutlinedInput } from "./PickersOutlinedInput/index.js";
|
|
import { PickersFilledInput } from "./PickersFilledInput/index.js";
|
|
import { PickersInput } from "./PickersInput/index.js";
|
|
import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
|
|
import { PickerTextFieldOwnerStateContext } from "./usePickerTextFieldOwnerState.js";
|
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
const VARIANT_COMPONENT = {
|
|
standard: PickersInput,
|
|
filled: PickersFilledInput,
|
|
outlined: PickersOutlinedInput
|
|
};
|
|
const PickersTextFieldRoot = styled(FormControl, {
|
|
name: 'MuiPickersTextField',
|
|
slot: 'Root'
|
|
})({
|
|
maxWidth: '100%'
|
|
});
|
|
const useUtilityClasses = (classes, ownerState) => {
|
|
const {
|
|
isFieldFocused,
|
|
isFieldDisabled,
|
|
isFieldRequired
|
|
} = ownerState;
|
|
const slots = {
|
|
root: ['root', isFieldFocused && !isFieldDisabled && 'focused', isFieldDisabled && 'disabled', isFieldRequired && 'required']
|
|
};
|
|
return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
|
|
};
|
|
const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(inProps, ref) {
|
|
const props = useThemeProps({
|
|
props: inProps,
|
|
name: 'MuiPickersTextField'
|
|
});
|
|
const {
|
|
// Props used by FormControl
|
|
onFocus,
|
|
onBlur,
|
|
className,
|
|
classes: classesProp,
|
|
color = 'primary',
|
|
disabled = false,
|
|
error = false,
|
|
variant = 'outlined',
|
|
required = false,
|
|
hiddenLabel = false,
|
|
// Props used by PickersInput
|
|
InputProps,
|
|
inputProps,
|
|
inputRef,
|
|
sectionListRef,
|
|
elements,
|
|
areAllSectionsEmpty,
|
|
onClick,
|
|
onKeyDown,
|
|
onKeyUp,
|
|
onPaste,
|
|
onInput,
|
|
endAdornment,
|
|
startAdornment,
|
|
tabIndex,
|
|
contentEditable,
|
|
focused,
|
|
value,
|
|
onChange,
|
|
fullWidth,
|
|
id: idProp,
|
|
name,
|
|
// Props used by FormHelperText
|
|
helperText,
|
|
FormHelperTextProps,
|
|
// Props used by InputLabel
|
|
label,
|
|
InputLabelProps,
|
|
// @ts-ignore
|
|
'data-active-range-position': dataActiveRangePosition
|
|
} = props,
|
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
const rootRef = React.useRef(null);
|
|
const handleRootRef = useForkRef(ref, rootRef);
|
|
const id = useId(idProp);
|
|
const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
|
|
const inputLabelId = label && id ? `${id}-label` : undefined;
|
|
const fieldOwnerState = useFieldOwnerState({
|
|
disabled: props.disabled,
|
|
required: props.required,
|
|
readOnly: InputProps?.readOnly
|
|
});
|
|
const ownerState = React.useMemo(() => _extends({}, fieldOwnerState, {
|
|
isFieldValueEmpty: areAllSectionsEmpty,
|
|
isFieldFocused: focused ?? false,
|
|
hasFieldError: error ?? false,
|
|
inputSize: props.size ?? 'medium',
|
|
inputColor: color ?? 'primary',
|
|
isInputInFullWidth: fullWidth ?? false,
|
|
hasStartAdornment: Boolean(startAdornment ?? InputProps?.startAdornment),
|
|
hasEndAdornment: Boolean(endAdornment ?? InputProps?.endAdornment),
|
|
inputHasLabel: !!label,
|
|
isLabelShrunk: Boolean(InputLabelProps?.shrink)
|
|
}), [fieldOwnerState, areAllSectionsEmpty, focused, error, props.size, color, fullWidth, startAdornment, endAdornment, InputProps?.startAdornment, InputProps?.endAdornment, label, InputLabelProps?.shrink]);
|
|
const classes = useUtilityClasses(classesProp, ownerState);
|
|
const PickersInputComponent = VARIANT_COMPONENT[variant];
|
|
const inputAdditionalProps = {};
|
|
if (variant === 'outlined') {
|
|
if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
|
|
inputAdditionalProps.notched = InputLabelProps.shrink;
|
|
}
|
|
inputAdditionalProps.label = label;
|
|
} else if (variant === 'filled') {
|
|
inputAdditionalProps.hiddenLabel = hiddenLabel;
|
|
}
|
|
return /*#__PURE__*/_jsx(PickerTextFieldOwnerStateContext.Provider, {
|
|
value: ownerState,
|
|
children: /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
|
|
className: clsx(classes.root, className),
|
|
ref: handleRootRef,
|
|
focused: focused,
|
|
disabled: disabled,
|
|
variant: variant,
|
|
error: error,
|
|
color: color,
|
|
fullWidth: fullWidth,
|
|
required: required,
|
|
ownerState: ownerState
|
|
}, other, {
|
|
children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
|
|
htmlFor: id,
|
|
id: inputLabelId
|
|
}, InputLabelProps, {
|
|
children: label
|
|
})), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
|
|
elements: elements,
|
|
areAllSectionsEmpty: areAllSectionsEmpty,
|
|
onClick: onClick,
|
|
onKeyDown: onKeyDown,
|
|
onKeyUp: onKeyUp,
|
|
onInput: onInput,
|
|
onPaste: onPaste,
|
|
onFocus: onFocus,
|
|
onBlur: onBlur,
|
|
endAdornment: endAdornment,
|
|
startAdornment: startAdornment,
|
|
tabIndex: tabIndex,
|
|
contentEditable: contentEditable,
|
|
value: value,
|
|
onChange: onChange,
|
|
id: id,
|
|
fullWidth: fullWidth,
|
|
inputProps: inputProps,
|
|
inputRef: inputRef,
|
|
sectionListRef: sectionListRef,
|
|
label: label,
|
|
name: name,
|
|
role: "group",
|
|
"aria-labelledby": inputLabelId,
|
|
"aria-describedby": helperTextId,
|
|
"aria-live": helperTextId ? 'polite' : undefined,
|
|
"data-active-range-position": dataActiveRangePosition
|
|
}, inputAdditionalProps, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
|
|
id: helperTextId
|
|
}, FormHelperTextProps, {
|
|
children: helperText
|
|
}))]
|
|
}))
|
|
});
|
|
});
|
|
if (process.env.NODE_ENV !== "production") PickersTextField.displayName = "PickersTextField";
|
|
process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
|
|
// ----------------------------- Warning --------------------------------
|
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
// ----------------------------------------------------------------------
|
|
/**
|
|
* Is `true` if the current values equals the empty value.
|
|
* For a single item value, it means that `value === null`
|
|
* For a range value, it means that `value === [null, null]`
|
|
*/
|
|
areAllSectionsEmpty: PropTypes.bool.isRequired,
|
|
className: PropTypes.string,
|
|
/**
|
|
* The color of the component.
|
|
* It supports both default and custom theme colors, which can be added as shown in the
|
|
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
|
|
* @default 'primary'
|
|
*/
|
|
color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
|
|
component: PropTypes.elementType,
|
|
/**
|
|
* If true, the whole element is editable.
|
|
* Useful when all the sections are selected.
|
|
*/
|
|
contentEditable: PropTypes.bool.isRequired,
|
|
disabled: PropTypes.bool.isRequired,
|
|
/**
|
|
* The elements to render.
|
|
* Each element contains the prop to edit a section of the value.
|
|
*/
|
|
elements: PropTypes.arrayOf(PropTypes.shape({
|
|
after: PropTypes.object.isRequired,
|
|
before: PropTypes.object.isRequired,
|
|
container: PropTypes.object.isRequired,
|
|
content: PropTypes.object.isRequired
|
|
})).isRequired,
|
|
endAdornment: PropTypes.node,
|
|
error: PropTypes.bool.isRequired,
|
|
/**
|
|
* If `true`, the component is displayed in focused state.
|
|
*/
|
|
focused: PropTypes.bool,
|
|
FormHelperTextProps: PropTypes.object,
|
|
fullWidth: PropTypes.bool,
|
|
/**
|
|
* The helper text content.
|
|
*/
|
|
helperText: PropTypes.node,
|
|
/**
|
|
* If `true`, the label is hidden.
|
|
* This is used to increase density for a `FilledInput`.
|
|
* Be sure to add `aria-label` to the `input` element.
|
|
* @default false
|
|
*/
|
|
hiddenLabel: PropTypes.bool,
|
|
id: PropTypes.string,
|
|
InputLabelProps: PropTypes.object,
|
|
inputProps: PropTypes.object,
|
|
/**
|
|
* Props applied to the Input element.
|
|
* It will be a [`FilledInput`](/material-ui/api/filled-input/),
|
|
* [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
|
|
* component depending on the `variant` prop value.
|
|
*/
|
|
InputProps: PropTypes.object,
|
|
inputRef: refType,
|
|
label: PropTypes.node,
|
|
/**
|
|
* If `dense` or `normal`, will adjust vertical spacing of this and contained components.
|
|
* @default 'none'
|
|
*/
|
|
margin: PropTypes.oneOf(['dense', 'none', 'normal']),
|
|
name: PropTypes.string,
|
|
onBlur: PropTypes.func.isRequired,
|
|
onChange: PropTypes.func.isRequired,
|
|
onClick: PropTypes.func.isRequired,
|
|
onFocus: PropTypes.func.isRequired,
|
|
onInput: PropTypes.func.isRequired,
|
|
onKeyDown: PropTypes.func.isRequired,
|
|
onPaste: PropTypes.func.isRequired,
|
|
readOnly: PropTypes.bool,
|
|
/**
|
|
* If `true`, the label will indicate that the `input` is required.
|
|
* @default false
|
|
*/
|
|
required: PropTypes.bool,
|
|
sectionListRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
|
current: PropTypes.shape({
|
|
getRoot: PropTypes.func.isRequired,
|
|
getSectionContainer: PropTypes.func.isRequired,
|
|
getSectionContent: PropTypes.func.isRequired,
|
|
getSectionIndexFromDOMElement: PropTypes.func.isRequired
|
|
})
|
|
})]),
|
|
/**
|
|
* The size of the component.
|
|
* @default 'medium'
|
|
*/
|
|
size: PropTypes.oneOf(['medium', 'small']),
|
|
startAdornment: PropTypes.node,
|
|
style: PropTypes.object,
|
|
/**
|
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
*/
|
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
|
value: PropTypes.string.isRequired,
|
|
/**
|
|
* The variant to use.
|
|
* @default 'outlined'
|
|
*/
|
|
variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
|
|
} : void 0;
|
|
export { PickersTextField }; |