How to use the @friendsofreactjs/react-css-themr.themr function in @friendsofreactjs/react-css-themr

To help you get started, we’ve selected a few @friendsofreactjs/react-css-themr 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.

github neos / neos-ui / packages / react-ui-components / src / Tabs / index.js View on Github external
import style from './style.css';
import Tabs from './tabs';
import Panel from './panel';

const ThemedTabs = themr(identifiers.tabs, style)(Tabs);

//
// Dependency injection
//
import injectProps from './../_lib/injectProps';
import Icon from './../Icon';

const FinalTabsComponent = injectProps({
    IconComponent: Icon
})(ThemedTabs);
FinalTabsComponent.Panel = themr(identifiers.tabsPanel, style)(Panel);

export default FinalTabsComponent;
github neos / neos-ui / packages / react-ui-components / src / ToggablePanel / index.js View on Github external
import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import style from './style.css';
import ToggablePanel, {
    Header,
    Contents
} from './toggablePanel';

const ThemedToggablePanel = themr(identifiers.toggablePanel, style)(ToggablePanel);
const ThemedToggablePanelHeader = themr(identifiers.toggablePanelHeader, style)(Header);
const ThemedToggablePanelContents = themr(identifiers.toggablePanelContents, style)(Contents);

//
// Dependency injection
//
import injectProps from './../_lib/injectProps';
import Headline from './../Headline';
import IconButton from './../IconButton';

ThemedToggablePanel.Header = injectProps({
    HeadlineComponent: Headline,
    IconButtonComponent: IconButton
})(ThemedToggablePanelHeader);
ThemedToggablePanel.Contents = ThemedToggablePanelContents;

export default ThemedToggablePanel;
github emgage / engage-ui / src / components / Card / CardFooter.tsx View on Github external
const cardFooter = ({ children, theme, componentStyle, componentClass  }: Props) => {

  const footerClass = classNames(
        theme.footer,
        componentClass
      );

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

export default themr(CARD, baseTheme)(cardFooter) as ThemedComponentClass;
github emgage / engage-ui / src / components / Table / TableRow.tsx View on Github external
rowClickCallback = () =&gt; {
    if (this.props.onClick) {
      this.props.onClick(this.props.callbackValue);
    }
  }

  render () {
    return (
      
        { this.props.children }
      
    );
  }
}

export default themr(TABLE, baseTheme)(TableRow) as ThemedComponentClass;
github emgage / engage-ui / src / components / DateTimePicker / DateTimePicker.tsx View on Github external
value={dateTime}
                onBlur={() =&gt; { this.setState({ open: false }); }}
                open={open}
                closeOnSelect
                className={theme.dateTimeInput}
                onChange={(dateTime: any) =&gt; { this.setDateTime(dateTime); }}
                timeFormat={timePicker}
                dateFormat={dateFormat}
            /&gt;
        
    );
  }
}

export { DateTimePicker as UnthemedDropdown };
export default themr(DATETIMEPICKER, baseTheme)(DateTimePicker) as ThemedComponentClass;
github emgage / engage-ui / src / components / Alert / Alert.tsx View on Github external
default:
        style = '';
        color = '#000';
    }

    classes = theme.alert + ' ' + style;
    return (
      
      { this.state.isActive &amp;&amp; <div>
        <p>{children}</p><button type="button"> this.closeAlert()}&gt;</button>
      </div>}
      
    );
  }
}
export default themr(ALERT, baseTheme)(Alert) as ThemedComponentClass;
github neos / neos-ui / packages / react-ui-components / src / Button / index.js View on Github external
import {themr} from '@friendsofreactjs/react-css-themr';
import identifiers from '../identifiers';
import style from './style.css';
import Button from './button';

export default themr(identifiers.button, style)(Button);
github emgage / engage-ui / src / components / Link / Link.tsx View on Github external
const link = ({ url, children, onClick, external, theme }: Props) =&gt; {
  return url
    ? (
      
        {children}
      
    )
    : (
      <button>
        {children}
      </button>
    );
};

export default themr(LINK)(link) as ThemedComponentClass;
github emgage / engage-ui / src / components / Grid / GridContent.tsx View on Github external
theme[gridType],
    componentClass
  );

  const thisChildren = React.Children.map(children, (child: React.ReactElement) =&gt; {
    if (onClick &amp;&amp; !child.props.disableClick) {
      return React.cloneElement(child, { onClick, returnValue });
    }

    return React.cloneElement(child);
  });

  return <div style="{componentStyle}">{thisChildren}</div>;
};

export default themr(GRID, baseTheme)(GridContent) as ThemedComponentClass;
github emgage / engage-ui / src / components / Grid / GridFooter.tsx View on Github external
const GridFooter = ({
  children,
  componentClass,
  componentStyle,
  theme,
}: Props) =&gt; {
  const gridFooterClass = classNames(
    theme.gridFooter,
    componentClass
  );

  return <div style="{componentStyle}">{children}</div>;
};

export default themr(GRID, baseTheme)(GridFooter) as ThemedComponentClass;

@friendsofreactjs/react-css-themr

Friends of ReactJS: React CSS Themr

MIT
Latest version published 4 years ago

Package Health Score

53 / 100
Full package analysis

Popular @friendsofreactjs/react-css-themr functions