How to use the classnames.bind function in classnames
To help you get started, we’ve selected a few classnames examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
cockroachdb / cockroach-gen / pkg / ui / src / views / sessions / sessionDetails.tsx View on Github 
import {Col, Row} from "antd";
import {nodeDisplayNameByIDSelector} from "src/redux/nodes";
import {NodeLink, StatementLinkTarget} from "src/views/statements/statementsTableContent";
import TerminateSessionModal, {TerminateSessionModalRef} from "src/views/sessions/terminateSessionModal";
import TerminateQueryModal, {TerminateQueryModalRef} from "src/views/sessions/terminateQueryModal";
interface OwnProps {
id: string;
nodeNames: { [nodeId: string]: string };
session: SessionInfo;
sessionError: Error | null;
refreshSessions: typeof refreshSessions;
}
const cx = classNames.bind(styles);
const summaryCardStylesCx = classNames.bind(summaryCardStyles);
export type SessionDetailsProps = OwnProps & RouteComponentProps;
function yesOrNo(b: boolean) {
return b ? "Yes" : "No";
}
export const MemoryUsageItem: React.FC<{
alloc_bytes: Long
max_alloc_bytes: Long,
}> = ( {alloc_bytes, max_alloc_bytes}) => (render() {
const { className, ...other } = this.props;
return (
<div>
<div id="editor">
</div>
);
}
}</div>import {Bytes, DATE_FORMAT} from "src/util/format";
import {Col, Row} from "antd";
import {nodeDisplayNameByIDSelector} from "src/redux/nodes";
import {NodeLink, StatementLinkTarget} from "src/views/statements/statementsTableContent";
import TerminateSessionModal, {TerminateSessionModalRef} from "src/views/sessions/terminateSessionModal";
import TerminateQueryModal, {TerminateQueryModalRef} from "src/views/sessions/terminateQueryModal";
interface OwnProps {
id: string;
nodeNames: { [nodeId: string]: string };
session: SessionInfo;
sessionError: Error | null;
refreshSessions: typeof refreshSessions;
}
const cx = classNames.bind(styles);
const summaryCardStylesCx = classNames.bind(summaryCardStyles);
export type SessionDetailsProps = OwnProps & RouteComponentProps;
function yesOrNo(b: boolean) {
return b ? "Yes" : "No";
}
export const MemoryUsageItem: React.FC<{
alloc_bytes: Long
max_alloc_bytes: Long,
}> = ( {alloc_bytes, max_alloc_bytes}) => (import * as React from 'react';
import * as classnames from 'classnames';
import {DivProps, SpanProps, ButtonProps as AttrButtonProps, Elements as Attr} from '../../Attributes';
import {Icon, IconSize, IconAttributes} from '../Icon';
const css = classnames.bind(require('../../Button.scss'));
export interface ButtonComponentType {}
export interface ButtonAttributes {
container?: AttrButtonProps;
icon?: SpanProps;
}
export interface ButtonProps extends React.Props {
/** Button title attribute */
title?: string;
/** Button type attribute */
type?: string;
/** Icon name (from Segoe UI MDL font) */
icon?: string;
/** Use primary style */classnames
A simple utility for conditionally joining classNames together
