How to use the grommet/utils/Intl.getMessage function in grommet

To help you get started, we’ve selected a few grommet 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 grommet / grommet-index / src / js / components / Filters.js View on Github external
_renderMenu ({ filters, sort, classNames }) {
    const { direction } = this.props;
    const a11yTitle = Intl.getMessage(this.context.intl, 'Filter');
    const icon = this._renderIcon();

    return (
      
        <menu direction="column">
          
            {filters}
            {sort}
          
        </menu>
        {this._renderCounts()}
github grommet / grommet-index / src / js / components / Sort.js View on Github external
let boxProps = Props.pick(this.props, Object.keys(Box.propTypes));
    let classNames = [CLASS_ROOT];
    if (this.props.className) {
      classNames.push(this.props.className);
    }

    const options = attributes
      .map(attribute =&gt; {
        return (
          <option value="{attribute.name}">
            {attribute.label || attribute.name}
          </option>
        );
      });

    let title = Intl.getMessage(this.context.intl, 'Sort');

    return (
      
        <header size="small">
          {title}
        </header>
        
          <select value="{this.state.name}">
            {options}
          </select>
          
            <button>}
              onClick={this._onChangeDirection.bind(this, 'asc')} /&gt;</button>
github grommet / grommet-index / src / js / components / Header.js View on Github external
<div>
          
          <span>
            {result.unfilteredTotal}
          </span>
          <span>
            {result.total}
          </span>
        </div>
      );
    }

    let placeHolder = Intl.getMessage(this.context.intl, 'Search');

    return (
      <header size="large">
        {this.props.navControl}
        <span>{this.props.label}</span>
        
          
          {filters}
          {this.props.addControl}</header>
github grommet / grommet-index / src / js / components / Header.js View on Github external
render () {
    const { attributes } = this.props;

    const classes = classnames(CLASS_ROOT, this.props.className);

    const filterOrSortAttributes = attributes.filter(a =&gt; a.filter || a.sort);

    const placeHolder = Intl.getMessage(this.context.intl, 'Search');

    return (
      <header size="large">
        {this.props.navControl}
        <span>{this.props.label}</span>
        
          
          {this.props.addControl}
          {filterOrSortAttributes.length &gt; 0 &amp;&amp; this.props.filterControl}</header>
github grommet / grommet-index / src / js / components / Index.js View on Github external
);
    }

    let empty;
    if (data) {
      let emptyMessage;
      let addControl;
      if (data.unfilteredTotal === 0) {
        emptyMessage = this.props.emptyMessage;
        if (this.props.emptyAddControl) {
          addControl = this.props.emptyAddControl;
        } else {
          addControl = this.props.addControl;
        }
      } else if (data.total === 0) {
        emptyMessage = Intl.getMessage(this.context.intl, 'No matches');
      }
      if (emptyMessage) {
        empty = (
          
            <span>{emptyMessage}</span>
            {addControl}
          
        );
      }
    }

    let view = this.props.view;
    let itemComponent = this.props.itemComponent;
    if (typeof view === 'object') {
github grommet / grommet-cli / templates / app / src / js / screens / Dashboard.js View on Github external
direction='row'
          justify='between'
          size='large'
          pad={{ horizontal: 'medium', between: 'small' }}
        &gt;
          
        
        {errorNode}
        
          
            Running Tasks
          
          
            The backend here is using request polling (5 second interval).
            See  page for an example
            of websocket communication.
          
        
        {listNode}
      
    );
  }
}
github grommet / grommet-cli / templates / app / src / js / screens / Tasks.js View on Github external
listNode = (
        
          {tasksNode}
        
      );
    }

    return (
      <article>
        <header size="large" direction="row">
          
        </header>
        {errorNode}
        
          
            The backend here is using websocket.
          
        
        {listNode}
      </article>
    );
  }
}
github grommet / grommet-index / src / js / components / Filters.js View on Github external
_renderSidebar ({ filters, sort, classNames }) {
    const { direction } = this.props;
    const icon = this._renderIcon();
    let heading;

    if (filters.length) {
      heading = (
        
          {Intl.getMessage(this.context.intl, 'Filter by')}
        
      );
    }

    return (
      
        
          <header size="large">
            
              {heading}
            
            
              <button>
              {this._renderCounts()}
            
          </button></header>