🔧 chore: dont render when props not provided
This commit is contained in:
parent
596d8eb326
commit
893a499be5
@ -47,15 +47,15 @@ export const Input = ({
|
|||||||
helperIcon: helperIconCls,
|
helperIcon: helperIconCls,
|
||||||
} = inputTheme({ ...styleProps });
|
} = inputTheme({ ...styleProps });
|
||||||
|
|
||||||
const renderLabels = useMemo(
|
const renderLabels = useMemo(() => {
|
||||||
() => (
|
if (!label && !description) return null;
|
||||||
<div className="space-y-1">
|
return (
|
||||||
|
<div className="flex flex-col gap-y-1">
|
||||||
<p className={labelCls()}>{label}</p>
|
<p className={labelCls()}>{label}</p>
|
||||||
<p className={descriptionCls()}>{description}</p>
|
<p className={descriptionCls()}>{description}</p>
|
||||||
</div>
|
</div>
|
||||||
),
|
);
|
||||||
[labelCls, descriptionCls, label, description],
|
}, [labelCls, descriptionCls, label, description]);
|
||||||
);
|
|
||||||
|
|
||||||
const renderLeftIcon = useMemo(() => {
|
const renderLeftIcon = useMemo(() => {
|
||||||
return (
|
return (
|
||||||
@ -73,8 +73,9 @@ export const Input = ({
|
|||||||
);
|
);
|
||||||
}, [cloneIcon, iconCls, iconContainerCls, rightIcon]);
|
}, [cloneIcon, iconCls, iconContainerCls, rightIcon]);
|
||||||
|
|
||||||
const renderHelperText = useMemo(
|
const renderHelperText = useMemo(() => {
|
||||||
() => (
|
if (!helperText) return null;
|
||||||
|
return (
|
||||||
<div className={helperTextCls()}>
|
<div className={helperTextCls()}>
|
||||||
{state &&
|
{state &&
|
||||||
cloneIcon(<WarningIcon className={helperIconCls()} />, {
|
cloneIcon(<WarningIcon className={helperIconCls()} />, {
|
||||||
@ -82,9 +83,8 @@ export const Input = ({
|
|||||||
})}
|
})}
|
||||||
<p>{helperText}</p>
|
<p>{helperText}</p>
|
||||||
</div>
|
</div>
|
||||||
),
|
);
|
||||||
[cloneIcon, state, helperIconCls, helperText, helperTextCls],
|
}, [cloneIcon, state, helperIconCls, helperText, helperTextCls]);
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-y-2">
|
<div className="flex flex-col gap-y-2">
|
||||||
|
@ -320,8 +320,9 @@ export const Select = ({
|
|||||||
);
|
);
|
||||||
}, [cloneIcon, theme, rightIcon]);
|
}, [cloneIcon, theme, rightIcon]);
|
||||||
|
|
||||||
const renderHelperText = useMemo(
|
const renderHelperText = useMemo(() => {
|
||||||
() => (
|
if (!helperText) return null;
|
||||||
|
return (
|
||||||
<div className={theme.helperText()}>
|
<div className={theme.helperText()}>
|
||||||
{error &&
|
{error &&
|
||||||
cloneIcon(<WarningIcon className={theme.helperIcon()} />, {
|
cloneIcon(<WarningIcon className={theme.helperIcon()} />, {
|
||||||
@ -329,9 +330,8 @@ export const Select = ({
|
|||||||
})}
|
})}
|
||||||
<p>{helperText}</p>
|
<p>{helperText}</p>
|
||||||
</div>
|
</div>
|
||||||
),
|
);
|
||||||
[cloneIcon, error, theme, helperText],
|
}, [cloneIcon, error, theme, helperText]);
|
||||||
);
|
|
||||||
|
|
||||||
const isMultipleHasValue = multiple && selectedItems.length > 0;
|
const isMultipleHasValue = multiple && selectedItems.length > 0;
|
||||||
const isMultipleHasValueButNotSearchable =
|
const isMultipleHasValueButNotSearchable =
|
||||||
|
Loading…
Reference in New Issue
Block a user