How to use the classnames/bind.bind function in classnames

/* @flow */

import React from 'react';
import className from 'classnames/bind';
// import { Link } from 'react-router-dom';
import Tooltip from 'rc-tooltip';
import 'rc-tooltip/assets/bootstrap_white.css';
import { CHANGE_PROFILE_INFO_SUCCESS } from '../../constants/profileConstants/changeProfileInfo';
import globalStyles from '../../theme/global.scss';
import createNamespaceStyles from '../../containers/CreateNamespace/index.scss';

const createNamespaceClass = className.bind(createNamespaceStyles);
const globalClass = className.bind(globalStyles);

const rightContent = globalClass(
  'contentBlockContent',
  'contentBlockContentCardBlock',
  'contentBlockContentCardBlockDollars'
);

const containerLeft = createNamespaceClass(
  'namespacePlanBlockContainerLeft',
  'namespacePlanBlockDollars'
);

type Props = {
  data: Array,
  tariffName: string,

this.props.data[type].map((item, key) => {
      if (!this.state[type] && key > 1) return;
      const Data = item.split('|');
      return (
        <div>
          <div>{Data[1]}</div>
          <p>
            {Data[2]}
            {Data[3] ? ` ${Data[3]}` : null}
          </p>
        </div>
      );
    });

import PropTypes from 'prop-types';
import { injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames/bind';
import Parser from 'html-react-parser';
import CrossIcon from 'common/img/cross-icon-inline.svg';
import { withTooltip } from 'components/main/tooltips/tooltip';
import styles from './selectedItem.scss';

const cx = classNames.bind(styles);

const messages = defineMessages({
  selectMoreItems: {
    id: 'LaunchesPage.selectMoreItems',
    defaultMessage: 'You must select more than one item',
  },
  notYourOwnLaunch: {
    id: 'LaunchesPage.notYourOwnLaunch',
    defaultMessage: 'You are not a launch owner',
  },
  launchNotInProgress: {
    id: 'LaunchesPage.launchNotInProgress',
    defaultMessage: 'Launch should not be in the status In progress!',
  },
  launchFinished: {
    id: 'LaunchesPage.launchFinished',

import React from 'react';
import styles from './PageTemplate.scss';
import classNames from 'classnames/bind';
import Footer from 'components/common/Footer'
import { Container } from 'reactstrap';


const cx = classNames.bind(styles);

const PageTemplate = ({ header, children }) => {
  return (
    <div>
      <header>
        {header}
      </header>
      <main>
        
          {children}
        
      </main>
      <footer>
    </footer></div>
  )
};

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames/bind';
import { PRODUCT_BUG, AUTOMATION_BUG, SYSTEM_ISSUE } from 'common/constants/defectTypes';
import { injectIntl, intlShape, defineMessages } from 'react-intl';
import styles from './infoLine.scss';
import { BarChart } from './barChart';
import { Duration } from './duration';
import { Owner } from './owner';
import { Attributes } from './attributes';
import { Description } from './description';
import { DefectTypeBlock } from './defectTypeBlock';

const cx = classNames.bind(styles);
const messages = defineMessages({
  parent: {
    id: 'InfoLine.parent',
    defaultMessage: 'Parent',
  },
  passed: {
    id: 'InfoLine.passed',
    defaultMessage: 'Passed {value}%',
  },
  total: {
    id: 'InfoLine.total',
    defaultMessage: 'Total {value}',
  },
});

const normalizeExecutions = (executions) => ({

import PropTypes from 'prop-types';
import { defineMessages, injectIntl, intlShape } from 'react-intl';
import { ModalLayout, withModal, ModalField } from 'components/main/modal';
import { FieldProvider } from 'components/fields/fieldProvider';
import { FieldErrorHint } from 'components/fields/fieldErrorHint';
import { commonValidators } from 'common/utils';
import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
import { reduxForm } from 'redux-form';
import { Input } from 'components/inputs/input';
import { InputCheckbox } from 'components/inputs/inputCheckbox';
import { PROFILE_PAGE_EVENTS } from 'components/main/analytics/events';
import classNames from 'classnames/bind';
import styles from './changePasswordModal.scss';

const LABEL_WIDTH = 90;
const cx = classNames.bind(styles);
const messages = defineMessages({
  header: {
    id: 'ChangePasswordModal.header',
    defaultMessage: 'Change password',
  },
  oldPasswordPlaceholder: {
    id: 'ChangePasswordModal.oldPasswordPlaceholder',
    defaultMessage: 'Enter old password',
  },
  newPasswordPlaceholder: {
    id: 'ChangePasswordModal.newPasswordPlaceholder',
    defaultMessage: 'Enter new password',
  },
  confirmPlaceholder: {
    id: 'ChangePasswordModal.confirmPlaceholder',
    defaultMessage: 'Confirm new password',

import React from 'react';
import { Flex } from 'reflexbox';
import { observer } from 'mobx-react';
import { Line } from 'react-chartjs-2';
import numeral from 'numeral';

import { formatNumber } from 'utils/formatting';
import { sortByType } from 'utils/sortBy';

import CurrencyColor from 'components/CurrencyColor';
import ChangeHighlight from 'components/ChangeHighlight';
import ColoredChange from 'components/ColoredChange';

import classNames from 'classnames/bind';
import styles from './PriceList.scss';
const cx = classNames.bind(styles);

const PriceList = ({ assets, visibleCurrencies, sortBy }) => {
  const includedAssets = assets.filter(asset =>
    visibleCurrencies.includes(asset.symbol));
  const sorted = sortByType(includedAssets, sortBy);

  return (
    
      {sorted.map(asset => )}
    
  );
};

const AssetRow = (
  {
    symbol,

import classNames from 'classnames/bind';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import DefaultUserImage from 'common/img/default-user-avatar.png';
import { ADMINISTRATOR } from 'common/constants/accountRoles';
import { URLS } from 'common/urls';
import { userInfoSelector, photoTimeStampSelector } from 'controllers/user';
import { logoutAction } from 'controllers/auth';
import { API_PAGE, ADMINISTRATE_PAGE, USER_PROFILE_PAGE } from 'controllers/pages/constants';
import { HEADER_EVENTS } from 'components/main/analytics/events';
import { NavLink } from 'components/main/navLink';
import { Image } from 'components/main/image';
import styles from './userBlock.scss';

const cx = classNames.bind(styles);

@connect(
  (state) => ({
    user: userInfoSelector(state),
    photoTimeStamp: photoTimeStampSelector(state),
  }),
  {
    logout: logoutAction,
  },
)
@track()
export class UserBlock extends Component {
  static propTypes = {
    logout: PropTypes.func.isRequired,
    user: PropTypes.object,
    photoTimeStamp: PropTypes.number,

import React from 'react';
import PropTypes from 'prop-types';
import {
  Icon, Input, Modal, Tooltip,
} from 'antd';
import classNames from 'classnames/bind';
import CopyToClipboard from 'react-copy-to-clipboard';
import Magician from '../../../../common/Magician/Magician';
import axios from '../../../../../utilities/axios';
import styles from './Share.scss';

const cx = classNames.bind(styles);

const ShareType = {
  PROJECT: 'PROJECT',
  WORKSPACE: 'WORKSPACE',
};

const Permissions = {
  READ: 'READ',
  WRITE: 'WRITE',
};

const Descriptions = {
  PROJECT: {
    TITLE: 'Share Project',
    INFO: 'Share link expires in 24 hours.',
    READ: 'A public link to view your project but not make any edits.',

content = (
      
    );
  }
  return (
    <div style="{{">
      {content}
    </div>
  );
};