necolas

// We can listen for events (e.g., 'press. or 'focuswithin') that are fired from responders,
// if they are allowed to bubble.
// 
//   context.dispatchEvent(eventObject, listener, eventPriority, bubbles)
//
// This allows us to prevent certain events from bubbling up the tree, e.g., 'focus', 'scroll'.

import React, {useRef, useState} from 'react';
import {Pressable, Text, View} from 'react-ui';
import {PressListener} from 'react-events/press';

necolas

/**
 * Copyright (c) Nicolas Gallagher.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict-local
 */

type Groups = { [key: number]: Array<string> };

necolas

/**
 * OnLayout is built upon: View (and ResizeObserver), StyleSheet
 */
 
const elementBreakpoints = {
  small: { minWidth: 200 },
  medium: { minWidth: 300 }
  large: { minWidth: 500 }
};
 

necolas

import NextLink from 'next/link';
import React from 'react';
import { Text } from 'react-native-web';

// https://github.com/zeit/next.js#with-link
// Combines the Next.js <Link> with React Native's <Text> component.
// Enables use like this:
//
//    <Link
//      href={href}

necolas

import i18n from './i18n';
import theme from './theme';
import { bool, string } from 'prop-types';
import { I18nManager, StyleSheet, Text } from 'react-native';
import React, { Component } from 'react';

/**
 * React Component
 */
class AppText extends Component {

necolas

import createHoverMonitor from './createHoverMonitor';
import { element, func, oneOfType } from 'prop-types';
import React, { Component } from 'react';

const hover = createHoverMonitor();

/**
 * Use:
 * <Hoverable>
 *   {(hover) => <View style={hover && styles.hovered} />}

necolas

/**
 * This module is aliased to 'react-native' in our webpack config.
 
 * RNW currently uses inline styles. Our existing CSS – written using `css-modules`
 * and processed by `post-css` – needs to override RNW's default component styles
 * when RNW is being used to render the app. A postcss transform was added to our
 * webpack config to append `!important` to (almost) every CSS declaration.
 */

import findNodeHandle from 'react-native-web/dist/modules/findNodeHandle';

necolas

import styles from './styles.css';
import testIDs from './testIDs';

export render = (text) => (
  <button className={styles.button} data-test-id={testsIDs.button}>
    <span className={styles.icon}></span>
    {text}
  </button>
);

necolas

import ReactWebStyle, {WebComponent} from 'react-web-style';
import React, {PropTypes} from 'react';

import {Text, View} from 'react-web-sdk';

const styles = {
  root: {
    borderColor: 'red',
    padding: '10px',
    position: 'absolute',

necolas

import React from 'react';
import styles from './styles.css.js';

class Button extends React.Component{
  render() {
    return (
      <button className={styles.button}>
        <span className={styles.icon} />
        Button
      </button>