How to use @airbnb/lunar - 10 common examples

private handleRender = (mutator: MutationFunction, result: MutationResult<data>) =&gt; {
    if (result.loading) {
      return renderElementOrFunction(this.props.loading) || ;
    }

    if (result.error &amp;&amp; (!this.props.ignoreGraphQLErrors || result.error.networkError)) {
      // istanbul ignore next (need to fix tests)
      return (
        renderElementOrFunction(this.props.error, result.error) || (
          
        )
      );
    }

    return this.props.children(mutator, result);
  };
</data>

private handleRender = (mutator: MutationFunction, result: MutationResult<data>) =&gt; {
    if (result.loading) {
      return renderElementOrFunction(this.props.loading) || ;
    }

    if (result.error &amp;&amp; (!this.props.ignoreGraphQLErrors || result.error.networkError)) {
      // istanbul ignore next (need to fix tests)
      return (
        renderElementOrFunction(this.props.error, result.error) || (
          
        )
      );
    }

    return this.props.children(mutator, result);
  };
</data>

bootstrapClient() {
    if (this.client) {
      return;
    }

    const { links, resolvers, typeDefs } = this.settings;

    this.client = new ApolloClient({
      cache: new InMemoryCache(),
      connectToDevTools: __DEV__,
      link: ApolloLink.from(links),
      name: Core.settings.name,
      resolvers,
      typeDefs,
      version: pkg.version,
    });

    if (__DEV__) {
      // eslint-disable-next-line no-underscore-dangle
      window.__APOLLO_CLIENT__ = this.client;
    }
  }

render() {
        const { app, ...props } = this.props;

        // @ts-ignore Props spreading
        return ;
      }
    }

    function ConnectToAppWrapper(props: Props) {
      return (
        {app => }
      );
    }

    return withBoundary(scope)(finishHOC('connectToApp', ConnectToAppWrapper, WrappedComponent));
  };
}

/* eslint-disable jsx-a11y/click-events-have-key-events */
/* eslint-disable no-magic-numbers */
import React, { CSSProperties, useMemo } from 'react';
import { HEIGHT_TO_PX } from '@airbnb/lunar/lib/components/DataTable/constants';
import { RendererProps } from '@airbnb/lunar/lib/components/DataTable/types';
import { NumberFormatter } from '@superset-ui/number-format';
import { TimeFormatter } from '@superset-ui/time-format';
import HTMLRenderer from './components/HTMLRenderer';

const NEGATIVE_COLOR = '#FFA8A8';
const POSITIVE_COLOR = '#ced4da';
const SELECTION_COLOR = '#EBEBEB';

const NOOP = () => {};

const HEIGHT = HEIGHT_TO_PX.micro;

export type ColumnType = {
  key: string;
  label: string;
  format?: NumberFormatter | TimeFormatter | undefined;
  type: 'metric' | 'string';
  maxValue?: number;
  minValue?: number;
};

export type Cell = {
  key: string;
  value: any;
};

const NUMBER_STYLE: CSSProperties = {

import 'airbnb-js-shims';
import { stripHexcode } from 'emojibase';
import Lunar from '@airbnb/lunar';
import { THEME } from './constants';

Lunar.initialize({
  name: 'Lunar',
  emojiCDN: (hexcode, large) =>
    `https://cdn.jsdelivr.net/emojione/assets/4.5/png/${large ? 64 : 32}/${stripHexcode(
      hexcode,
    ).toLowerCase()}.png`,
  logger: console.log,
  theme: THEME,
});

import Lunar from '@airbnb/lunar';
import moon from './images/moon.jpg';
import stars from './images/stars.jpg';
import lunar from './images/lunar.png';

global.log = (...args) => console.log(...args);
global.debug = key => (...args) => console.log(key, ...args);
global.images = { moon, stars, lunar };

Lunar.initialize({
  emojiCDN: hexcode =>
    `https://cdnjs.cloudflare.com/ajax/libs/emojione/2.2.7/assets/png/${hexcode.toLowerCase()}.png`,
  logger: global.log,
});

export default function LayoutShell({ children, sideBar }: Props) {
  const [styles, cx] = useStyles(styleSheet);

  return (
    <div>
      {sideBar &amp;&amp; <aside>{sideBar}</aside>}

      <div>{children}</div>
    </div>
  );
}

export default function SideBar({ accessibilityLabel, children }: Props) {
  const [styles, cx] = useStyles(styleSheet);

  return (
    <nav>
      <ul aria-label="{accessibilityLabel}" role="menubar">
        {children}
      </ul>
    </nav>
  );
}

export default function Layout({
  after,
  before,
  centerAlign,
  children,
  fluid,
  minHeight,
  noBackground,
  noPadding,
}: Props & AsideProps) {
  const [styles, cx] = useStyles(styleSheet);

  return (
    <div>
      {before}

      <main role="main">
        </main></div>