import React from 'react';
import clsx, { ClassValue } from 'clsx';
import { Typography } from '../Typography/Typography';
import stylesTypography from '../Typography/Typography.module.scss';
import styles from './Input.module.scss';
interface IInputProps extends React.ComponentPropsWithRef<'input'> {
caption?: string;
errorText?: string;
icon?: React.ReactNode;
wrapClassName?: ClassValue;
labelClassName?: ClassValue;
prefix?: 'от' | 'до' | undefined;
}
export const Input = React.forwardRef<HTMLInputElement, IInputProps>(
(
{
caption,
errorText,
placeholder = 'Введите текст',
wrapClassName,
labelClassName,
className,
icon,
prefix,
size = '100%',
...props
},
ref,
) => {
return (
<div
className={clsx(wrapClassName)}
style={{ width: size, padding: prefix ? '16px 12px 16px 41px' : '16px 12px 16px 16px' }}
>
<label className={clsx(labelClassName)}>
{caption && (
<Typography textStyle='textS' className={styles.Input_label}>
{caption}
</Typography>
)}
<div className={clsx(styles.Input_wrapper)}>
{prefix && <div className={styles.Input_prefix}>{prefix}</div>}
<input
{...props}
ref={ref}
placeholder={placeholder}
className={clsx(
stylesTypography.Typography_Style_TextM,
styles.Input,
prefix && styles.Input_prefixed,
errorText && styles.Input_invalid,
className,
)}
/>
{icon && <div className={styles.Input_icon}>{icon}</div>}
</div>
</label>
{errorText && (
<Typography textStyle='menuItem' className={styles.Input_error}>
{errorText}
</Typography>
)}
</div>
);
},
);
Input.displayName = 'Input';
const FieldTreeUI = ({
config,
isStratumShown,
onFieldSelection,
defaultStratumId,
stratumId,
expandItemValues,
placeholder,
isShowTitle = true,
isStretched,
...otherProps
}) => {
const dispatch = useDispatch();
const tree = useSelector(config.treeSelector);
const date = useSelector(getDate);
const ignoredValues = useSelector(getIgnoredValuesOnTree);
const { cleanStratumHandler } = useContextClear();
useEffect(() => {
defaultStratumId && dispatch(requestWellsStratum(defaultStratumId));
defaultStratumId && dispatch(requestContoursByStratum({ stratumId: defaultStratumId }));
}, [defaultStratumId]);
useEffect(() => {
if (!tree) {
dispatch(initTree(config));
dispatch(requestSetRoot(config, config.type, 'root', config.children[0].type));
}
}, [tree]);
const handleSelect = useCallback(
node => {
if (node.type === 'stratums') {
dispatch(clearWellsAndCounters());
dispatch(setSelectedStratum(node.id));
onFieldSelection && onFieldSelection(node);
} else {
dispatch(incorrectChoose());
}
},
[dispatch, onFieldSelection],
);
<TreePicker
value={stratumId}
expandItemValues={expandItemValues}
data={tree}
defaultExpandAll={false}
onExpand={handleExpand}
onSelect={handleSelect}
renderTreeNode={renderWithIcon}
locale={{
placeholder: placeholder || 'Выберите объект',
searchPlaceholder: 'Поиск',
noResultsText: 'Результаты не найдены',
}}
disabledItemValues={ignoredValues}
menuClassName="data-menu-colored"
onClean={cleanStratumHandler}
renderValue={(value, item, selectedElement) => {
console.log(`${item?.parentNode?.label} ${selectedElement}`);
}}
/>
)}