Skip to content

Commit

Permalink
fixed datePicker will reopen when click non input area (#269)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akashdeep98
Akashdeep98 authored Jul 1, 2021
1 parent 8d71782 commit 9ba45e4
Showing 1 changed file with 31 additions and 26 deletions.
57 changes: 31 additions & 26 deletions src/RangePicker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,15 +137,18 @@ type RangeShowTimeObject<DateType> = Omit<SharedTimeProps<DateType>, 'defaultVal
defaultValue?: DateType[];
};

export type RangePickerBaseProps<DateType> = {} & RangePickerSharedProps<DateType> & OmitPickerProps<PickerBaseProps<DateType>>;
export type RangePickerBaseProps<DateType> = {} & RangePickerSharedProps<DateType> &
OmitPickerProps<PickerBaseProps<DateType>>;

export type RangePickerDateProps<DateType> = {
showTime?: boolean | RangeShowTimeObject<DateType>;
} & RangePickerSharedProps<DateType> & OmitPickerProps<PickerDateProps<DateType>>;
} & RangePickerSharedProps<DateType> &
OmitPickerProps<PickerDateProps<DateType>>;

export type RangePickerTimeProps<DateType> = {
order?: boolean;
} & RangePickerSharedProps<DateType> & OmitPickerProps<PickerTimeProps<DateType>>;
} & RangePickerSharedProps<DateType> &
OmitPickerProps<PickerTimeProps<DateType>>;

export type RangePickerProps<DateType> =
| RangePickerBaseProps<DateType>
Expand Down Expand Up @@ -239,9 +242,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
});

// Operation ref
const operationRef: React.MutableRefObject<ContextOperationRefProps | null> = useRef<
ContextOperationRefProps
>(null);
const operationRef: React.MutableRefObject<ContextOperationRefProps | null> =
useRef<ContextOperationRefProps>(null);

const mergedDisabled = React.useMemo<[boolean, boolean]>(() => {
if (Array.isArray(disabled)) {
Expand All @@ -255,7 +257,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
const [mergedValue, setInnerValue] = useMergedState<RangeValue<DateType>>(null, {
value,
defaultValue,
postState: values =>
postState: (values) =>
picker === 'time' && !order ? values : reorderValues(values, generateConfig),
});

Expand All @@ -270,7 +272,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {

// ========================= Select Values =========================
const [selectedValue, setSelectedValue] = useMergedState(mergedValue, {
postState: values => {
postState: (values) => {
let postValues = values;

if (mergedDisabled[0] && mergedDisabled[1]) {
Expand Down Expand Up @@ -322,8 +324,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
const [mergedOpen, triggerInnerOpen] = useMergedState(false, {
value: open,
defaultValue: defaultOpen,
postState: postOpen => (mergedDisabled[mergedActivePickerIndex] ? false : postOpen),
onChange: newOpen => {
postState: (postOpen) => (mergedDisabled[mergedActivePickerIndex] ? false : postOpen),
onChange: (newOpen) => {
if (onOpenChange) {
onOpenChange(newOpen);
}
Expand Down Expand Up @@ -533,12 +535,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {

const [startText, triggerStartTextChange, resetStartText] = useTextValueMapping({
valueTexts: startValueTexts,
onTextChange: newText => onTextChange(newText, 0),
onTextChange: (newText) => onTextChange(newText, 0),
});

const [endText, triggerEndTextChange, resetEndText] = useTextValueMapping({
valueTexts: endValueTexts,
onTextChange: newText => onTextChange(newText, 1),
onTextChange: (newText) => onTextChange(newText, 1),
});

const [rangeHoverValue, setRangeHoverValue] = useState<RangeValue<DateType>>(null);
Expand Down Expand Up @@ -583,7 +585,12 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
onBlur,
isClickOutside: (target: EventTarget | null) =>
!elementsContains(
[panelDivRef.current, startInputDivRef.current, endInputDivRef.current],
[
panelDivRef.current,
startInputDivRef.current,
endInputDivRef.current,
containerRef.current,
],
target as HTMLElement,
),
onFocus: (e: React.FocusEvent<HTMLInputElement>) => {
Expand Down Expand Up @@ -731,7 +738,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
// ============================ Ranges =============================
const rangeLabels = Object.keys(ranges || {});

const rangeList = rangeLabels.map(label => {
const rangeList = rangeLabels.map((label) => {
const range = ranges![label];
const newValues = typeof range === 'function' ? range() : range;

Expand Down Expand Up @@ -766,10 +773,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
panelHoverRangedValue = hoverRangedValue;
}

let panelShowTime:
| boolean
| SharedTimeProps<DateType>
| undefined = showTime as SharedTimeProps<DateType>;
let panelShowTime: boolean | SharedTimeProps<DateType> | undefined =
showTime as SharedTimeProps<DateType>;
if (showTime && typeof showTime === 'object' && showTime.defaultValue) {
const timeDefaultValues: DateType[] = showTime.defaultValue!;
panelShowTime = {
Expand Down Expand Up @@ -805,7 +810,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
style={undefined}
direction={direction}
disabledDate={mergedActivePickerIndex === 0 ? disabledStartDate : disabledEndDate}
disabledTime={date => {
disabledTime={(date) => {
if (disabledTime) {
return disabledTime(date, mergedActivePickerIndex === 0 ? 'start' : 'end');
}
Expand Down Expand Up @@ -903,13 +908,13 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
const showDoublePanel = currentMode === picker;
const leftPanel = renderPanel(showDoublePanel ? 'left' : false, {
pickerValue: viewDate,
onPickerValueChange: newViewDate => {
onPickerValueChange: (newViewDate) => {
setViewDate(newViewDate, mergedActivePickerIndex);
},
});
const rightPanel = renderPanel('right', {
pickerValue: nextViewDate,
onPickerValueChange: newViewDate => {
onPickerValueChange: (newViewDate) => {
setViewDate(
getClosingViewDate(newViewDate, picker, generateConfig, -1),
mergedActivePickerIndex,
Expand Down Expand Up @@ -957,7 +962,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
className={`${prefixCls}-panel-container`}
style={{ marginLeft: panelLeft }}
ref={panelDivRef}
onMouseDown={e => {
onMouseDown={(e) => {
e.preventDefault();
}}
>
Expand Down Expand Up @@ -991,11 +996,11 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
) {
clearNode = (
<span
onMouseDown={e => {
onMouseDown={(e) => {
e.preventDefault();
e.stopPropagation();
}}
onMouseUp={e => {
onMouseUp={(e) => {
e.preventDefault();
e.stopPropagation();
let values = mergedValue;
Expand Down Expand Up @@ -1101,7 +1106,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
disabled={mergedDisabled[0]}
readOnly={inputReadOnly || typeof formatList[0] === 'function' || !startTyping}
value={startHoverValue || startText}
onChange={e => {
onChange={(e) => {
triggerStartTextChange(e.target.value);
}}
autoFocus={autoFocus}
Expand All @@ -1126,7 +1131,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
disabled={mergedDisabled[1]}
readOnly={inputReadOnly || typeof formatList[0] === 'function' || !endTyping}
value={endHoverValue || endText}
onChange={e => {
onChange={(e) => {
triggerEndTextChange(e.target.value);
}}
placeholder={getValue(placeholder, 1) || ''}
Expand Down

0 comments on commit 9ba45e4

Please sign in to comment.