Skip to content

Commit

Permalink
fix(range-input): prefix and suffix content reactive render (#3085)
Browse files Browse the repository at this point in the history
  • Loading branch information
@uyarn
uyarn authored Jul 12, 2023
1 parent c2a3ce9 commit c7b6a97
Showing 1 changed file with 116 additions and 115 deletions.
231 changes: 116 additions & 115 deletions src/range-input/range-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,12 +45,6 @@ export default defineComponent({
((props.clearable && props.value?.length && !disabled.value) || props.showClearIconOnEmpty) && isHover.value,
);

const labelContent = renderTNodeJSX('label');
const prefixIconContent = renderTNodeJSX('prefixIcon');
const suffixContent = renderTNodeJSX('suffix');
const suffixIconContent = renderTNodeJSX('suffixIcon');
const tips = renderTNodeJSX('tips');

const inputRefs = {
firstInputRef: ref(),
secondInputRef: ref(),
Expand Down Expand Up @@ -102,115 +96,122 @@ export default defineComponent({
},
});

return () => (
<div
class={[
COMPONENT_NAME.value,
{
[SIZE.value[props.size]]: props.size !== 'medium',
[STATUS.value.disabled]: disabled.value,
[STATUS.value.focused]: focused.value,
[STATUS.value.success]: props.status === 'success',
[STATUS.value.warning]: props.status === 'warning',
[STATUS.value.error]: props.status === 'error',
[`${COMPONENT_NAME.value}--prefix`]: prefixIconContent || labelContent,
[`${COMPONENT_NAME.value}--suffix`]: suffixContent || suffixIconContent,
},
]}
onMouseenter={handleMouseEnter}
onMouseleave={handleMouseLeave}
>
<div class={`${COMPONENT_NAME.value}__inner`}>
{prefixIconContent && <div class={`${COMPONENT_NAME.value}__prefix`}>{prefixIconContent}</div>}
{labelContent ? <div class={`${COMPONENT_NAME.value}__prefix`}>{labelContent}</div> : null}
<Input
ref={inputRefs.firstInputRef}
class={`${COMPONENT_NAME.value}__inner-left`}
inputClass={{
[`${classPrefix.value}-is-focused`]: props.activeIndex === 0,
}}
placeholder={placeholder.value[0]}
disabled={disabled.value}
readonly={props.readonly}
format={format.value[0]}
value={innerValue.value?.[0]}
onClick={({ e }: { e: MouseEvent }) => props.onClick?.({ e, position: 'first' })}
onClear={() => setInnerValue([], { position: 'first', trigger: 'input' })}
onEnter={(val, { e }) =>
handleEnter([val, innerValue.value?.[1]], { e, position: 'first' } as {
e: any;
position: RangeInputPosition;
})
}
onFocus={(val, { e }) =>
handleFocus([val, innerValue.value?.[1]], { e, position: 'first' } as {
e: any;
position: RangeInputPosition;
})
}
onBlur={(val, { e }) =>
handleBlur([val, innerValue.value?.[1]], { e, position: 'first' } as {
e: any;
position: RangeInputPosition;
})
}
onChange={(val, { e }) =>
setInnerValue([val, innerValue.value?.[1]], { e, position: 'first', trigger: 'input' })
}
{...inputProps.value[0]}
/>

<div class={`${COMPONENT_NAME.value}__inner-separator`}>{props.separator}</div>

<Input
ref={inputRefs.secondInputRef}
class={`${COMPONENT_NAME.value}__inner-right`}
inputClass={{
[`${classPrefix.value}-is-focused`]: props.activeIndex === 1,
}}
placeholder={placeholder.value[1]}
disabled={disabled.value}
readonly={props.readonly}
format={format.value[1]}
value={innerValue.value?.[1]}
onClick={({ e }: { e: MouseEvent }) => props.onClick?.({ e, position: 'second' })}
onClear={() => setInnerValue([], { position: 'second', trigger: 'input' })}
onEnter={(val, { e }) =>
handleEnter([innerValue.value?.[0], val], { e, position: 'second' } as {
e: any;
position: RangeInputPosition;
})
}
onFocus={(val, { e }) =>
handleFocus([innerValue.value?.[0], val], { e, position: 'second' } as {
e: any;
position: RangeInputPosition;
})
}
onBlur={(val, { e }) =>
handleBlur([innerValue.value?.[0], val], { e, position: 'second' } as {
e: any;
position: RangeInputPosition;
})
}
onChange={(val, { e }) =>
setInnerValue([innerValue.value?.[0], val], { e, position: 'second', trigger: 'input' })
}
{...inputProps.value[1]}
/>
{suffixContent ? <div class={`${COMPONENT_NAME.value}__suffix`}>{suffixContent}</div> : null}
{suffixIconContent && (
<span class={`${COMPONENT_NAME.value}__suffix ${COMPONENT_NAME.value}__suffix-icon`}>
{isShowClearIcon.value ? (
<CloseCircleFilledIcon class={`${COMPONENT_NAME.value}__suffix-clear`} onClick={handleClear} />
) : (
suffixIconContent
)}
</span>
)}
return () => {
const labelContent = renderTNodeJSX('label');
const prefixIconContent = renderTNodeJSX('prefixIcon');
const suffixContent = renderTNodeJSX('suffix');
const suffixIconContent = renderTNodeJSX('suffixIcon');
const tips = renderTNodeJSX('tips');
return (
<div
class={[
COMPONENT_NAME.value,
{
[SIZE.value[props.size]]: props.size !== 'medium',
[STATUS.value.disabled]: disabled.value,
[STATUS.value.focused]: focused.value,
[STATUS.value.success]: props.status === 'success',
[STATUS.value.warning]: props.status === 'warning',
[STATUS.value.error]: props.status === 'error',
[`${COMPONENT_NAME.value}--prefix`]: prefixIconContent || labelContent,
[`${COMPONENT_NAME.value}--suffix`]: suffixContent || suffixIconContent,
},
]}
onMouseenter={handleMouseEnter}
onMouseleave={handleMouseLeave}
>
<div class={`${COMPONENT_NAME.value}__inner`}>
{prefixIconContent && <div class={`${COMPONENT_NAME.value}__prefix`}>{prefixIconContent}</div>}
{labelContent ? <div class={`${COMPONENT_NAME.value}__prefix`}>{labelContent}</div> : null}
<Input
ref={inputRefs.firstInputRef}
class={`${COMPONENT_NAME.value}__inner-left`}
inputClass={{
[`${classPrefix.value}-is-focused`]: props.activeIndex === 0,
}}
placeholder={placeholder.value[0]}
disabled={disabled.value}
readonly={props.readonly}
format={format.value[0]}
value={innerValue.value?.[0]}
onClick={({ e }: { e: MouseEvent }) => props.onClick?.({ e, position: 'first' })}
onClear={() => setInnerValue([], { position: 'first', trigger: 'input' })}
onEnter={(val, { e }) =>
handleEnter([val, innerValue.value?.[1]], { e, position: 'first' } as {
e: any;
position: RangeInputPosition;
})
}
onFocus={(val, { e }) =>
handleFocus([val, innerValue.value?.[1]], { e, position: 'first' } as {
e: any;
position: RangeInputPosition;
})
}
onBlur={(val, { e }) =>
handleBlur([val, innerValue.value?.[1]], { e, position: 'first' } as {
e: any;
position: RangeInputPosition;
})
}
onChange={(val, { e }) =>
setInnerValue([val, innerValue.value?.[1]], { e, position: 'first', trigger: 'input' })
}
{...inputProps.value[0]}
/>

<div class={`${COMPONENT_NAME.value}__inner-separator`}>{props.separator}</div>

<Input
ref={inputRefs.secondInputRef}
class={`${COMPONENT_NAME.value}__inner-right`}
inputClass={{
[`${classPrefix.value}-is-focused`]: props.activeIndex === 1,
}}
placeholder={placeholder.value[1]}
disabled={disabled.value}
readonly={props.readonly}
format={format.value[1]}
value={innerValue.value?.[1]}
onClick={({ e }: { e: MouseEvent }) => props.onClick?.({ e, position: 'second' })}
onClear={() => setInnerValue([], { position: 'second', trigger: 'input' })}
onEnter={(val, { e }) =>
handleEnter([innerValue.value?.[0], val], { e, position: 'second' } as {
e: any;
position: RangeInputPosition;
})
}
onFocus={(val, { e }) =>
handleFocus([innerValue.value?.[0], val], { e, position: 'second' } as {
e: any;
position: RangeInputPosition;
})
}
onBlur={(val, { e }) =>
handleBlur([innerValue.value?.[0], val], { e, position: 'second' } as {
e: any;
position: RangeInputPosition;
})
}
onChange={(val, { e }) =>
setInnerValue([innerValue.value?.[0], val], { e, position: 'second', trigger: 'input' })
}
{...inputProps.value[1]}
/>
{suffixContent ? <div class={`${COMPONENT_NAME.value}__suffix`}>{suffixContent}</div> : null}
{suffixIconContent && (
<span class={`${COMPONENT_NAME.value}__suffix ${COMPONENT_NAME.value}__suffix-icon`}>
{isShowClearIcon.value ? (
<CloseCircleFilledIcon class={`${COMPONENT_NAME.value}__suffix-clear`} onClick={handleClear} />
) : (
suffixIconContent
)}
</span>
)}
</div>
{tips && <div class={`${COMPONENT_NAME.value}__tips`}>{tips}</div>}
</div>
{tips && <div class={`${COMPONENT_NAME.value}__tips`}>{tips}</div>}
</div>
);
);
};
},
});

0 comments on commit c7b6a97

Please sign in to comment.