Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-23 20:33:16 -05:00
Code Issues Activity

refactor(console): select dropdown should always pop downwards (#4654)

Browse source
This commit is contained in:
Charles Zhao 2023-10-15 22:02:45 -05:00 committed by GitHub
parent 35f57639e5
commit 4ec15f2219
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 3 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/console/src/ds-components/Dropdown/index.tsx
View file

@ -10,7 +10,7 @@ import { useRef } from 'react';
import ReactModal from 'react-modal'; import ReactModal from 'react-modal';
import usePosition from '@/hooks/use-position'; import usePosition from '@/hooks/use-position';
import type { HorizontalAlignment, VerticalAlignment } from '@/types/positioning'; import type { HorizontalAlignment } from '@/types/positioning';
import { onKeyDownHandler } from '@/utils/a11y'; import { onKeyDownHandler } from '@/utils/a11y';
import OverlayScrollbar from '../OverlayScrollbar'; import OverlayScrollbar from '../OverlayScrollbar';
@ -29,7 +29,6 @@ type Props = {
className?: string; className?: string;
titleClassName?: string; titleClassName?: string;
horizontalAlign?: HorizontalAlignment; horizontalAlign?: HorizontalAlignment;
verticalAlign?: VerticalAlignment;
hasOverflowContent?: boolean; hasOverflowContent?: boolean;
}; };
@ -50,15 +49,14 @@ function Dropdown({
className, className,
titleClassName, titleClassName,
horizontalAlign = 'end', horizontalAlign = 'end',
verticalAlign = 'bottom',
hasOverflowContent, hasOverflowContent,
}: Props) { }: Props) {
const overlayRef = useRef<HTMLDivElement>(null); const overlayRef = useRef<HTMLDivElement>(null);
const { position, positionState, mutate } = usePosition({ const { position, positionState, mutate } = usePosition({
verticalAlign, verticalAlign: 'bottom',
horizontalAlign, horizontalAlign,
offset: { vertical: verticalAlign === 'bottom' ? 4 : -4, horizontal: 0 }, offset: { vertical: 4, horizontal: 0 },
anchorRef, anchorRef,
overlayRef, overlayRef,
}); });

4
packages/console/src/ds-components/Select/index.tsx
View file

@ -5,7 +5,6 @@ import { useRef, useState } from 'react';
import Close from '@/assets/icons/close.svg'; import Close from '@/assets/icons/close.svg';
import KeyboardArrowDown from '@/assets/icons/keyboard-arrow-down.svg'; import KeyboardArrowDown from '@/assets/icons/keyboard-arrow-down.svg';
import KeyboardArrowUp from '@/assets/icons/keyboard-arrow-up.svg'; import KeyboardArrowUp from '@/assets/icons/keyboard-arrow-up.svg';
import { type VerticalAlignment } from '@/types/positioning';
import { onKeyDownHandler } from '@/utils/a11y'; import { onKeyDownHandler } from '@/utils/a11y';
import Dropdown, { DropdownItem } from '../Dropdown'; import Dropdown, { DropdownItem } from '../Dropdown';
@ -28,7 +27,6 @@ type Props<T> = {
placeholder?: ReactNode; placeholder?: ReactNode;
isClearable?: boolean; isClearable?: boolean;
size?: 'small' | 'medium' | 'large'; size?: 'small' | 'medium' | 'large';
dropdownPosition?: VerticalAlignment;
}; };
function Select<T extends string>({ function Select<T extends string>({
@ -41,7 +39,6 @@ function Select<T extends string>({
placeholder, placeholder,
isClearable, isClearable,
size = 'large', size = 'large',
dropdownPosition = 'bottom',
}: Props<T>) { }: Props<T>) {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const anchorRef = useRef<HTMLInputElement>(null); const anchorRef = useRef<HTMLInputElement>(null);
@ -100,7 +97,6 @@ function Select<T extends string>({
</div> </div>
<Dropdown <Dropdown
isFullWidth isFullWidth
verticalAlign={dropdownPosition}
anchorRef={anchorRef} anchorRef={anchorRef}
className={styles.dropdown} className={styles.dropdown}
isOpen={isOpen} isOpen={isOpen}

1
packages/console/src/pages/TenantSettings/TenantBasicSettings/SigningKeys/index.tsx
View file

@ -185,7 +185,6 @@ function SigningKeys() {
title: value, title: value,
value, value,
}))} }))}
dropdownPosition="top"
value={rotateKeyAlgorithm} value={rotateKeyAlgorithm}
onChange={(value) => { onChange={(value) => {
if (!value) { if (!value) {