How to use @axa-fr/react-toolkit-core - 10 common examples

/* if (typeof children === 'string') {
    return (
      
        <span>{children}</span>
      
    );
  } */

  return (
    
      {children}
    
  );
};
export type ThProps = ThComponentProps &amp; WithClassModifierOptions;
const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

Th.defaultProps = defaultProps;
Th.displayName = 'Table.Th';

export default enhance(Th);

const propTypes = {
  ...Constants.propTypes,
  classModifier: PropTypes.string,
  className: PropTypes.string,
  children: PropTypes.any.isRequired,
  title: PropTypes.any.isRequired,
  active: PropTypes.bool.isRequired,
  setActiveIndex: PropTypes.func,
  index: PropTypes.number,
  disabled: PropTypes.bool,
};

const defaultClassName = 'af-tabs__item';

const defaultProps = {
  ...Constants.defaultProps,
  className: defaultClassName,
  children: null,
  title: null,
  active: false,
  role: 'TITLE',
  onChange: () => {},
  index: 0,
  disabled: false,
};

class Tab extends React.Component {
  /* eslint-disable no-unused-expressions */
  onChange = () => {
    const { disabled, index, onChange } = this.props;
    disabled
      ? e => {

const TabsStateless = ({
  activeIndex,
  className,
  classModifier,
  children,
  onChange,
}) => {
  const componentClassName = ClassManager.getComponentClassName(
    className,
    classModifier,
    defaultClassName
  );
  return (
    <div>
      <ul>
        {React.Children.map(children, (tab, index) =&gt;
          React.cloneElement(tab, {
            active: activeIndex === index,
            onChange,
            role: 'TITLE',
            // index as a key is ok here, no better candidate
            key: index, // eslint-disable-line
            index,
          })</ul></div>

disabled,
                     value,
                     isChecked,
                     id,
                     name,
                     inputRef,
                     readOnly,
                     onChange,
                     onBlur,
                     onFocus,
                     children,
                     label,
                     ...otherProps
                   }) => {
  const newLabel = children || label;
  const newId = InputManager.getInputId(id); // id is require on this component
  return (
    <div>
      </div>

const defaultProps: Partial = {
  children: null,
};

const omitProperties = PropsManager.omit(['classModifier']);

const BadgeRaw: React.SFC = ({ children, ...otherProps }) => (
  <span>{children}</span>
);

BadgeRaw.defaultProps = defaultProps;

interface BadgeProps extends WithClassModifierOptions, BadgeBaseProps {}

const enhance = compose(
  withClassDefault(DEFAULT_CLASSNAME),
  withClassModifier
);

const Enhanced = enhance(BadgeRaw);
Enhanced.displayName = 'Badge';
export default Enhanced;

tabIndex: 0,
  href: '#',
};

const omitProperties = PropsManager.omit(['classModifier']);

const ActionCore: React.FC = ({ icon, ...otherProps }) => (
  <a>
    <i>
  </i></a><i>
);

ActionCore.defaultProps = defaultProps;

const enhance = compose(
  withClassDefault(defaultClassName),
  withClassModifier,
  withProps(({ onClick, href, role }: ActionCoreProps) =&gt; ({
    href: onClick ? '#' : href || undefined,
    role: onClick ? 'button' : role || undefined,
  }))
);

const Enhanced = enhance(ActionCore);
Enhanced.displayName = 'ActionCore';
export default Enhanced;
</i>

};

const omitProperties = PropsManager.omit(['classModifier']);

const ActionCore: React.FC = ({ icon, ...otherProps }) => (
  <a>
    <i>
  </i></a><i>
);

ActionCore.defaultProps = defaultProps;

const enhance = compose(
  withClassDefault(defaultClassName),
  withClassModifier,
  withProps(({ onClick, href, role }: ActionCoreProps) =&gt; ({
    href: onClick ? '#' : href || undefined,
    role: onClick ? 'button' : role || undefined,
  }))
);

const Enhanced = enhance(ActionCore);
Enhanced.displayName = 'ActionCore';
export default Enhanced;
</i>

const defaultClassModifier = 'error';

type AlertProps = Pick> & {
  icon?: string;
};

const setWithProps = ({ icon, ...otherProps }: AlertProps): AlertCoreProps => {
  const firstModifier = otherProps.classModifier.split(' ')[0];
  return {
    ...otherProps,
    iconClassName: `glyphicon glyphicon-${icon || icons[firstModifier]}`,
  };
};

const Enhanced = compose(withProps(setWithProps))(AlertCore);

Enhanced.displayName = 'Alert';
Enhanced.defaultProps = {
  classModifier: defaultClassModifier,
};

export default Enhanced;

export interface ActionCoreProps
  extends React.DetailedHTMLProps<
      React.AnchorHTMLAttributes,
      HTMLAnchorElement
    > {
  icon: string;
  className?: string;
}

const defaultProps: Partial = {
  tabIndex: 0,
  href: '#',
};

const omitProperties = PropsManager.omit(['classModifier']);

const ActionCore: React.FC = ({ icon, ...otherProps }) => (
  <a>
    <i>
  </i></a><i>
);

ActionCore.defaultProps = defaultProps;

const enhance = compose(
  withClassDefault(defaultClassName),
  withClassModifier,
  withProps(({ onClick, href, role }: ActionCoreProps) =&gt; ({
    href: onClick ? '#' : href || undefined,
    role: onClick ? 'button' : role || undefined,
  }))</i>

import * as React from 'react';
import {
  PropsManager,
  withClassDefault,
  withClassModifier,
  WithClassModifierOptions,
  compose
} from '@axa-fr/react-toolkit-core';

const DEFAULT_CLASSNAME = 'btn af-btn';

const omitProperties = PropsManager.omit(['classModifier']);

interface ButtonCoreComponentProps
  extends React.DetailedHTMLProps<
      React.ButtonHTMLAttributes,
      HTMLButtonElement
    > {}

const ButtonRaw: React.SFC = props => {
  const buttonProps: ButtonCoreComponentProps = omitProperties(props);
  return <button>;
};

export type ButtonCoreProps = ButtonCoreComponentProps &amp;
  WithClassModifierOptions;

const enhance = compose(</button>