🔧 chore: dont render when props not provided

This commit is contained in:
Andre H 2024-03-01 14:00:08 +08:00
parent 596d8eb326
commit 893a499be5
2 changed files with 16 additions and 16 deletions

View File

@ -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">

View File

@ -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 =