forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-20 05:26:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed block and inline dropdown buttons

Browse Source
This commit is contained in:
Alejandro Celaya
2023-05-27 09:40:49 +02:00
parent 3da2b56426
commit afc574aceb
5 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/utils/DropdownBtn.scss
View File

@@ -2,13 +2,17 @@
@import '../utils/mixins/vertical-align';
.dropdown-btn__toggle.dropdown-btn__toggle {
text-align: left;
padding-right: 1.75rem;
}
.dropdown-btn__toggle.dropdown-btn__toggle,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,
.dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
.show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
text-align: left;
color: var(--input-text-color);
background-color: var(--primary-color);
border-color: var(--input-border-color);

6
src/utils/DropdownBtn.tsx
View File

@@ -1,3 +1,4 @@
import classNames from 'classnames';
import type { FC, PropsWithChildren } from 'react';
import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
import { useToggle } from './helpers/hooks';
@@ -9,14 +10,15 @@ export type DropdownBtnProps = PropsWithChildren<{
className?: string;
dropdownClassName?: string;
right?: boolean;
inline?: boolean;
minWidth?: number;
}>;
export const DropdownBtn: FC<DropdownBtnProps> = (
{ text, disabled = false, className = '', children, dropdownClassName, right = false, minWidth },
{ text, disabled = false, className, children, dropdownClassName, right = false, minWidth, inline },
) => {
const [isOpen, toggle] = useToggle();
const toggleClasses = `dropdown-btn__toggle btn-block ${className}`;
const toggleClasses = classNames('dropdown-btn__toggle', className, { 'btn-block': !inline });
const style = { minWidth: minWidth && `${minWidth}px` };
return (

4
src/utils/ExportBtn.tsx
View File

@@ -5,10 +5,10 @@ import type { ButtonProps } from 'reactstrap';
import { Button } from 'reactstrap';
import { prettify } from './helpers/numbers';
interface ExportBtnProps extends Omit<ButtonProps, 'outline' | 'color' | 'disabled'> {
type ExportBtnProps = Omit<ButtonProps, 'outline' | 'color' | 'disabled'> & {
amount?: number;
loading?: boolean;
}
};
export const ExportBtn: FC<ExportBtnProps> = ({ amount = 0, loading = false, ...rest }) => (
<Button {...rest} outline color="primary" disabled={loading}>