mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

One SearchInput to rule them all

Browse source
This commit is contained in:
Josh Perez 2021-05-10 20:50:43 -04:00 • committed by GitHub
parent c62b5a900e
commit 24b7790829
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 266 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

65
ts/components/Spinner.tsx
View file

@ -4,6 +4,8 @@
import React from 'react';
import classNames from 'classnames';
import { getClassNamesFor } from '../util/getClassNamesFor';
export const SpinnerSvgSizes = ['small', 'normal'] as const;
export type SpinnerSvgSize = typeof SpinnerSvgSizes[number];
@ -29,37 +31,38 @@ export const Spinner = ({
size,
svgSize,
direction,
}: Props): JSX.Element => (
<div
className={classNames(
'module-spinner__container',
`module-spinner__container--${svgSize}`,
direction ? `module-spinner__container--${direction}` : null,
direction ? `module-spinner__container--${svgSize}-${direction}` : null,
moduleClassName ? `${moduleClassName}__container` : null
)}
style={{
height: size,
width: size,
}}
>
}: Props): JSX.Element => {
const getClassName = getClassNamesFor('module-spinner', moduleClassName);
return (
<div
className={classNames(
'module-spinner__circle',
`module-spinner__circle--${svgSize}`,
direction ? `module-spinner__circle--${direction}` : null,
direction ? `module-spinner__circle--${svgSize}-${direction}` : null,
moduleClassName ? `${moduleClassName}__circle` : null
getClassName('__container'),
getClassName(`__container--${svgSize}`),
getClassName(direction && `__container--${direction}`),
getClassName(direction && `__container--${svgSize}-${direction}`)
)}
/>
<div
className={classNames(
'module-spinner__arc',
`module-spinner__arc--${svgSize}`,
direction ? `module-spinner__arc--${direction}` : null,
direction ? `module-spinner__arc--${svgSize}-${direction}` : null,
moduleClassName ? `${moduleClassName}__arc` : null
)}
/>
</div>
);
style={{
height: size,
width: size,
}}
>
<div
className={classNames(
getClassName('__circle'),
getClassName(`__circle--${svgSize}`),
getClassName(direction && `__circle--${direction}`),
getClassName(direction && `__circle--${svgSize}-${direction}`)
)}
/>
<div
className={classNames(
getClassName('__arc'),
getClassName(`__arc--${svgSize}`),
getClassName(direction && `__arc--${direction}`),
getClassName(direction && `__arc--${svgSize}-${direction}`)
)}
/>
</div>
);
};