Skip to content

Commit

Permalink
fix: active bar always offset 1px
Browse files Browse the repository at this point in the history
  • Loading branch information
bbb169 committed Nov 3, 2024
1 parent d02ddec commit 05eeced
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 6 deletions.
24 changes: 19 additions & 5 deletions src/PickerInput/Selector/RangeSelector.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import useRootProps from './hooks/useRootProps';
import Icon, { ClearIcon } from './Icon';
import Input, { type InputRef } from './Input';
import { getoffsetUnit, getRealPlacement } from '../../utils/uiUtil';
import { getWin } from './util';

export type SelectorIdType =
| string
Expand Down Expand Up @@ -184,13 +185,26 @@ function RangeSelector<DateType extends object = any>(
const syncActiveOffset = useEvent(() => {
const input = getInput(activeIndex);
if (input) {
const { offsetWidth, offsetLeft, offsetParent } = input.nativeElement;
const parentWidth = (offsetParent as HTMLElement)?.offsetWidth || 0;
const activeOffset = placementRight ? parentWidth - offsetWidth - offsetLeft : offsetLeft;
const { offsetParent } = input.nativeElement;
// offsetLeft is an integer, which will cause incorrect reulst.
const { x = 0, width: inputWidth = 0 } = input.nativeElement.getBoundingClientRect() || {};
const { x: pX = 0, width: parentWidth = 0 } = offsetParent?.getBoundingClientRect() || {};
const parentStyles =
offsetParent && getWin(offsetParent as HTMLElement).getComputedStyle(offsetParent);
const parentBorderRightWidth = Number(
(placementRight ? parentStyles?.borderRightWidth : parentStyles?.borderLeftWidth)?.replace(
'px',
'',
) || 0,
);
const offsetLeft = x - pX;

const activeOffset = placementRight ? parentWidth - inputWidth - offsetLeft : offsetLeft;
setActiveBarStyle(({ position }) => ({
position,
width: offsetWidth,
[offsetUnit]: activeOffset,
width: inputWidth,
// parent will have border while focus, so need to cut `parentBorderWidth` on opposite side.
[offsetUnit]: activeOffset - parentBorderRightWidth,
}));
onActiveOffset(activeOffset);
}
Expand Down
6 changes: 5 additions & 1 deletion src/PickerInput/Selector/util.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,8 @@ export function getMaskRange(key: string): [startVal: number, endVal: number, de
};

return PresetRange[key];
}
}

export function getWin(ele: HTMLElement) {
return ele.ownerDocument.defaultView;
}

0 comments on commit 05eeced

Please sign in to comment.