mirrors/remark42
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace classnames to faster and smaller package

Browse Source
This commit is contained in:
Pavel Mineev
2021-05-06 15:11:36 -05:00
committed by Umputun
parent 928be7d688
commit 9f98b46351
10 changed files with 62 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/components/auth/auth.tsx
+19 -17
View File
@@ -1,7 +1,7 @@
import { h, Fragment } from 'preact';
import { useState } from 'preact/hooks';
import { useIntl } from 'react-intl';
import cn from 'classnames';
import clsx from 'clsx';
import { useDispatch } from 'react-redux';
import { setUser } from 'store/user/actions';
@@ -105,11 +105,11 @@ export default function Auth() {
const isTokenView = view === 'token';
const formFooterJSX = (
<>
{errorMessage && <div className={cn('auth-error', styles.error)}>{errorMessage}</div>}
{errorMessage && <div className={clsx('auth-error', styles.error)}>{errorMessage}</div>}
<Button className="auth-submit" type="submit" disabled={isLoading}>
{isLoading ? (
<div
className={cn('spinner', styles.spinner)}
className={clsx('spinner', styles.spinner)}
role="presentation"
aria-label={intl.formatMessage(messages.loading)}
/>
@@ -120,7 +120,7 @@ export default function Auth() {
</>
);
return (
<div className={cn('auth', styles.root)}>
<div className={clsx('auth', styles.root)}>
<Button
className="auth-button"
selected={isDropdownShowed}
@@ -140,11 +140,11 @@ export default function Auth() {
{intl.formatMessage(messages.signin)}
</Button>
{isDropdownShowed && (
<div className={cn('auth-dropdown', styles.dropdown)} ref={ref}>
<form className={cn('auth-form', styles.form)} onSubmit={handleSubmit}>
<div className={clsx('auth-dropdown', styles.dropdown)} ref={ref}>
<form className={clsx('auth-form', styles.form)} onSubmit={handleSubmit}>
{isTokenView ? (
<>
<div className={cn('auth-row', styles.row)}>
<div className={clsx('auth-row', styles.row)}>
<div className={styles.backButton}>
<Button className="auth-back-button" size="small" kind="transparent" onClick={handleShowEmailStep}>
<svg
@@ -167,7 +167,7 @@ export default function Auth() {
</Button>
</div>
<button
className={cn('auth-close-button', styles.closeButton)}
className={clsx('auth-close-button', styles.closeButton)}
title="Close sign-in dropdown"
onClick={handleDropdownClose}
>
@@ -182,10 +182,10 @@ export default function Auth() {
</svg>
</button>
</div>
<div className={cn('auth-row', styles.row)}>
<div className={clsx('auth-row', styles.row)}>
<TextareaAutosize
name="token"
className={cn('auth-token-textatea', styles.textarea)}
className={clsx('auth-token-textatea', styles.textarea)}
placeholder={intl.formatMessage(messages.token)}
disabled={isLoading}
/>
@@ -196,19 +196,21 @@ export default function Auth() {
<>
{hasOAuthProviders && (
<>
<h5 className={cn('auth-form-title', styles.title)}>{intl.formatMessage(messages.oauthSource)}</h5>
<h5 className={clsx('auth-form-title', styles.title)}>
{intl.formatMessage(messages.oauthSource)}
</h5>
<OAuthProviders providers={oauthProviders} />
</>
)}
{hasOAuthProviders && hasFormProviders && (
<div className={cn('auth-divider', styles.divider)} title={intl.formatMessage(messages.or)} />
<div className={clsx('auth-divider', styles.divider)} title={intl.formatMessage(messages.or)} />
)}
{hasFormProviders && (
<>
{formProviders.length === 1 ? (
<h5 className={cn('auth-form-title', styles.title)}>{formProviders[0]}</h5>
<h5 className={clsx('auth-form-title', styles.title)}>{formProviders[0]}</h5>
) : (
<div className={cn('auth-tabs', styles.tabs)}>
<div className={clsx('auth-tabs', styles.tabs)}>
{formProviders.map((p) => (
<Fragment key={p}>
<input
@@ -220,14 +222,14 @@ export default function Auth() {
onChange={handleProviderChange}
checked={p === view}
/>
<label className={cn('auth-tabs-item', styles.provider)} htmlFor={`form-provider-${p}`}>
<label className={clsx('auth-tabs-item', styles.provider)} htmlFor={`form-provider-${p}`}>
{p.slice(0, 6)}
</label>
</Fragment>
))}
</div>
)}
<div className={cn('auth-row', styles.row)}>
<div className={clsx('auth-row', styles.row)}>
<Input
className="auth-input-username"
required
@@ -244,7 +246,7 @@ export default function Auth() {
/>
</div>
{view === 'email' && (
<div className={cn('auth-row', styles.row)}>
<div className={clsx('auth-row', styles.row)}>
<Input
className="auth-input-email"
required
frontend/app/components/auth/components/button.tsx
+11 -10
View File
@@ -1,11 +1,9 @@
import { h, FunctionComponent, JSX, VNode } from 'preact';
import classnames from 'classnames/bind';
import { h, JSX, VNode } from 'preact';
import clsx from 'clsx';
import styles from './button.module.css';
const cx = classnames.bind(styles);
export type ButtonProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'size'> & {
type Props = Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'size'> & {
size?: 'small';
kind?: 'transparent';
suffix?: VNode;
@@ -13,13 +11,16 @@ export type ButtonProps = Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'size'> &
selected?: boolean;
};
const Button: FunctionComponent<ButtonProps> = ({ children, size, kind, suffix, selected, className, ...props }) => {
export default function Button({ children, size, kind, suffix, selected, className, ...props }: Props) {
return (
<button className={cx(className, styles.button, kind, size, { selected })} {...props}>
<button
className={clsx(className, styles.button, kind && styles[kind], size && styles[size], {
[styles.selected]: selected,
})}
{...props}
>
{children}
{suffix && <div className={styles.suffix}>{suffix}</div>}
</button>
);
};
export default Button;
}
frontend/app/components/auth/components/oauth.tsx
+4 -4
View File
@@ -1,6 +1,6 @@
import { h, JSX } from 'preact';
import { useDispatch } from 'react-redux';
import cn from 'classnames';
import clsx from 'clsx';
import { useIntl } from 'react-intl';
import { siteId } from 'common/settings';
@@ -40,18 +40,18 @@ export default function OAuthProviders({ providers }: Props) {
};
return (
<ul className={cn('oauth', styles.root)}>
<ul className={clsx('oauth', styles.root)}>
{providers.map((p) => {
const { name, icon } = getProviderData(p, theme);
return (
<li className={cn('oauth-item', styles.item)}>
<li className={clsx('oauth-item', styles.item)}>
<a
target="_blank"
rel="noopener noreferrer"
href={`${BASE_URL}/auth/${p}/login?from=${location}&site=${siteId}`}
onClick={handleOathClick}
className={cn('oauth-button', styles.button, styles[buttonVariant], styles[p])}
className={clsx('oauth-button', styles.button, styles[buttonVariant], styles[p])}
data-provider-name={name}
title={intl.formatMessage(messages.oauthTitle, { provider: name })}
>
frontend/app/components/comment-form/text-expander.tsx
+9 -6
View File
@@ -1,7 +1,7 @@
import '@github/text-expander-element';
import { h, Fragment, render, FunctionalComponent } from 'preact';
import { useEffect, useRef } from 'preact/hooks';
import cx from 'classnames';
import clsx from 'clsx';
import { StaticStore } from 'common/static-store';
import { Theme } from 'common/types';
@@ -16,14 +16,17 @@ type Emoji = {
function SuggestionList({ items, theme }: { items: Array<Emoji>; theme: Theme }) {
const isDarkTheme = theme === `dark`;
const suggesterClass = cx(styles.suggester, { [styles.suggesterDark]: isDarkTheme });
const suggesterItemClass = cx(styles.suggesterItem, { [styles.suggesterItemDark]: isDarkTheme });
return (
<ul className={suggesterClass}>
<ul className={clsx(styles.suggester, { [styles.suggesterDark]: isDarkTheme })}>
{items.map(({ key, emoji }: Emoji) => {
return (
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
<li role="option" className={suggesterItemClass} data-value={key}>
<li
// eslint-disable-next-line jsx-a11y/role-has-required-aria-props
role="option"
className={clsx(styles.suggesterItem, { [styles.suggesterItemDark]: isDarkTheme })}
data-value={key}
>
<span className={styles.emojiResult}>{emoji}</span> {key}
</li>
);
frontend/app/components/input/index.ts
-1
View File
@@ -1,2 +1 @@
export { Input } from './input';
export type { InputProps } from './input';
frontend/app/components/input/input.tsx
+9 -9
View File
@@ -1,18 +1,18 @@
import { h, JSX } from 'preact';
import classnames from 'classnames/bind';
import clsx from 'clsx';
import styles from './input.module.css';
const cx = classnames.bind(styles);
export type InputProps = {
type Props = {
invalid?: boolean;
type?: string;
className?: string;
} & JSX.HTMLAttributes<HTMLInputElement>;
export const Input = ({ children, className, type = 'text', invalid, ...props }: InputProps) => (
<input className={cx(className, 'input', { invalid })} type={type} {...props}>
{children}
</input>
);
export function Input({ children, className, type = 'text', invalid, ...props }: Props) {
return (
<input className={clsx(className, styles.input, { [styles.input]: invalid })} type={type} {...props}>
{children}
</input>
);
}
frontend/app/components/list-comments/list-comments.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { h, FunctionComponent } from 'preact';
import { useIntl } from 'react-intl';
import classnames from 'classnames';
import clsx from 'clsx';
import type { Comment as CommentType } from 'common/types';
import Comment from 'components/comment';
@@ -15,7 +15,7 @@ const ListComments: FunctionComponent<ListCommentsProps> = ({ comments = [] }) =
const intl = useIntl();
return (
<div className={classnames('comments-list', styles.root)}>
<div className={clsx('comments-list', styles.root)}>
{comments.map((comment) => (
<Comment
intl={intl}
frontend/app/components/root/root.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { h, Component, FunctionComponent, Fragment } from 'preact';
import { useSelector } from 'react-redux';
import b from 'bem-react-helper';
import { IntlShape, useIntl, FormattedMessage, defineMessages } from 'react-intl';
import classnames from 'classnames';
import clsx from 'clsx';
import type { Sorting } from 'common/types';
import type { StoreState } from 'store';
@@ -339,7 +339,7 @@ export const ConnectedRoot: FunctionComponent = () => {
const intl = useIntl();
return (
<div className={classnames(b('root', {}, { theme: props.theme }), props.theme)}>
<div className={clsx(b('root', {}, { theme: props.theme }), props.theme)}>
<Root {...props} {...actions} intl={intl} />
<p className="root__copyright" role="contentinfo">
<FormattedMessage
frontend/package-lock.json
Generated
+5 -5
View File
@@ -3833,11 +3833,6 @@
}
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
},
"clean-css": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -3946,6 +3941,11 @@
}
}
},
"clsx": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
"integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
},
"co": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
frontend/package.json
+1 -1
View File
@@ -30,7 +30,7 @@
"@github/text-expander-element": "^2.2.0",
"@ungap/custom-elements": "^0.1.15",
"bem-react-helper": "^1.2.2",
"classnames": "^2.2.6",
"clsx": "^1.1.1",
"core-js": "^3.9.0",
"intersection-observer": "^0.12.0",
"lodash-es": "^4.17.21",