ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-05-31 14:11:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

Replace classnames with clsx

Browse Source
This commit is contained in:
SleepWalker
2019-12-07 21:43:08 +02:00
parent d226fb2974
commit c638c1566e
29 changed files with 73 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app/components/ui/Panel.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import clsx from 'clsx';
import { omit } from 'app/functions';
import styles from './panel.scss';
@@ -89,7 +89,7 @@ export class PanelBodyHeader extends React.Component<
close = <span className={styles.close} onClick={this.onClose} />;
}
const className = classNames(styles[`${type}BodyHeader`], {
const className = clsx(styles[`${type}BodyHeader`], {
[styles.isClosed]: this.state.isClosed,
});

4
packages/app/components/ui/form/Button.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import clsx from 'clsx';
import buttons from 'app/components/ui/buttons.scss';
import { COLOR_GREEN } from 'app/components/ui';
import { MessageDescriptor } from 'react-intl';
@@ -35,7 +35,7 @@ export default class Button extends FormComponent<
return (
<ComponentProp
className={classNames(
className={clsx(
buttons[color],
{
[buttons.loading]: loading,

4
packages/app/components/ui/form/Captcha.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import clsx from 'clsx';
import { CaptchaID } from 'app/services/captcha';
import { Skin } from 'app/components/ui';
import captcha from 'app/services/captcha';
@@ -58,7 +58,7 @@ export default class Captcha extends FormInputComponent<
<div
ref={this.elRef}
className={classNames(styles.captcha, styles[`${skin}Captcha`])}
className={clsx(styles.captcha, styles[`${skin}Captcha`])}
/>
{this.renderError()}

4
packages/app/components/ui/form/Checkbox.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { MessageDescriptor } from 'react-intl';
import classNames from 'classnames';
import clsx from 'clsx';
import { SKIN_DARK, COLOR_GREEN, Color, Skin } from 'app/components/ui';
import { omit } from 'app/functions';
@@ -29,7 +29,7 @@ export default class Checkbox extends FormInputComponent<{
return (
<div
className={classNames(
className={clsx(
styles[`${color}MarkableRow`],
styles[`${skin}MarkableRow`],
)}

4
packages/app/components/ui/form/Dropdown.js
View File

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import clsx from 'clsx';
import { omit } from 'app/functions';
import { colors, COLOR_GREEN } from 'app/components/ui';
@@ -62,7 +62,7 @@ export default class Dropdown extends FormInputComponent {
return (
<div>
<div
className={classNames(styles[color], {
className={clsx(styles[color], {
[styles.block]: block,
[styles.opened]: isActive,
})}

4
packages/app/components/ui/form/Form.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import clsx from 'clsx';
import logger from 'app/services/logger';
import FormModel from './FormModel';
@@ -81,7 +81,7 @@ export default class Form extends React.Component<Props, State> {
return (
<form
className={classNames(styles.form, {
className={clsx(styles.form, {
[styles.isFormLoading]: isLoading,
[styles.formTouched]: this.state.isTouched,
})}

10
packages/app/components/ui/form/Input.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { MessageDescriptor } from 'react-intl';
import classNames from 'classnames';
import clsx from 'clsx';
import { uniqueId, omit } from 'app/functions';
import copy from 'app/services/copy';
import icons from 'app/components/ui/icons.scss';
@@ -96,15 +96,13 @@ export default class Input extends FormInputComponent<
if (iconType) {
baseClass = styles.formIconRow;
icon = (
<span className={classNames(styles.textFieldIcon, icons[iconType])} />
);
icon = <span className={clsx(styles.textFieldIcon, icons[iconType])} />;
}
if (showCopyIcon) {
copyIcon = (
<div
className={classNames(styles.copyIcon, {
className={clsx(styles.copyIcon, {
[icons.clipboard]: !wasCopied,
[icons.checkmark]: wasCopied,
[styles.copyCheckmark]: wasCopied,
@@ -120,7 +118,7 @@ export default class Input extends FormInputComponent<
<div className={styles.textFieldContainer}>
<input
ref={this.elRef}
className={classNames(
className={clsx(
styles[`${skin}TextField`],
styles[`${color}TextField`],
{

4
packages/app/components/ui/form/Radio.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react';
import { MessageDescriptor } from 'react-intl';
import classNames from 'classnames';
import clsx from 'clsx';
import { SKIN_DARK, COLOR_GREEN } from 'app/components/ui';
import { omit } from 'app/functions';
import { Color, Skin } from 'app/components/ui';
@@ -32,7 +32,7 @@ export default class Radio extends FormInputComponent<
return (
<div
className={classNames(
className={clsx(
styles[`${color}MarkableRow`],
styles[`${skin}MarkableRow`],
)}

4
packages/app/components/ui/form/TextArea.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { MessageDescriptor } from 'react-intl';
import TextareaAutosize from 'react-textarea-autosize';
import classNames from 'classnames';
import clsx from 'clsx';
import { uniqueId, omit } from 'app/functions';
import { SKIN_DARK, COLOR_GREEN, Skin, Color } from 'app/components/ui';
@@ -73,7 +73,7 @@ export default class TextArea extends FormInputComponent<
<div className={styles.textAreaContainer}>
<TextareaAutosize
inputRef={this.elRef}
className={classNames(
className={clsx(
styles.textArea,
styles[`${skin}TextField`],
styles[`${color}TextField`],

9
packages/app/components/ui/loader/ComponentLoader.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import clsx from 'clsx';
import { Skin } from 'app/components/ui';
import styles from './componentLoader.scss';
@@ -7,15 +7,12 @@ import styles from './componentLoader.scss';
function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
return (
<div
className={classNames(
styles.componentLoader,
styles[`${skin}ComponentLoader`],
)}
className={clsx(styles.componentLoader, styles[`${skin}ComponentLoader`])}
>
<div className={styles.spins}>
{new Array(5).fill(0).map((_, index) => (
<div
className={classNames(styles.spin, styles[`spin${index}`])}
className={clsx(styles.spin, styles[`spin${index}`])}
key={index}
/>
))}

4
packages/app/components/ui/loader/ImageLoader.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import clsx from 'clsx';
import { ComponentLoader } from 'app/components/ui/loader';
import { SKIN_LIGHT } from 'app/components/ui';
@@ -59,7 +59,7 @@ export default class ImageLoader extends React.Component<
)}
<div
className={classNames(styles.image, {
className={clsx(styles.image, {
[styles.imageLoaded]: !isLoading,
})}
>

2
packages/app/components/ui/popup/PopupStack.tsx
View File

@@ -35,7 +35,7 @@ export class PopupStack extends React.Component<{
return (
<CSSTransition
key={index}
classNames={{
clsx={{
enter: styles.trEnter,
enterActive: styles.trEnterActive,
exit: styles.trExit,

6
packages/app/components/ui/stepper/Stepper.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import classNames from 'classnames';
import clsx from 'clsx';
import { Color, COLOR_GREEN } from 'app/components/ui';
import styles from './stepper.scss';
@@ -14,10 +14,10 @@ export default function Stepper({
color?: Color;
}) {
return (
<div className={classNames(styles.steps, styles[`${color}Steps`])}>
<div className={clsx(styles.steps, styles[`${color}Steps`])}>
{new Array(totalSteps).fill(0).map((_, step) => (
<div
className={classNames(styles.step, {
className={clsx(styles.step, {
[styles.activeStep]: step <= activeStep,
})}
key={step}