How to use terra-application - 10 common examples

* or even where it was.
   */
  location: PropTypes.shape({
    pathname: PropTypes.string,
  }),

  /**
   * Injected by react-router: the object representing browser history.
   */
  // eslint-disable-next-line react/forbid-prop-types
  history: PropTypes.object,

  /**
   * Injected by with disclosure manager.
   */
  disclosureManager: disclosureManagerShape.isRequired,
};

const defaultProps = {
  location: undefined,
  history: undefined,
};

class DevSiteNavigation extends React.Component {
  static propExistsAndChanged(nextProp, currentProp) {
    return nextProp !== undefined && nextProp !== currentProp;
  }

  static getActiveNavigationItemPath(location, navigationItems) {
    for (let i = 0, numberOfNavigationItems = navigationItems.length; i < numberOfNavigationItems; i += 1) {
      if (matchPath(location.pathname, navigationItems[i].path)) {
        return navigationItems[i].path;

environment: environmentTemplate,
  expected: '',
  isOpen: false,
  issueType: 'bug',
  mentions: '',
  selectedPackage: 'terra-action-footer',
  solution: '',
  steps: '',
  title: '',
};

const propTypes = {
  /**
   * Injected by disclosure manager
   */
  disclosureManager: disclosureManagerShape.isRequired,
};

const IssueForm = ({ disclosureManager }) => {
  // Initialize state variables and setter functions.
  const [context, setContext] = useState(initialState.context);
  const [count, setCount] = useState(initialState.count);
  const [description, setDescription] = useState(initialState.description);
  const [environment, setEnvironment] = useState(initialState.environment);
  const [expected, setExpected] = useState(initialState.expected);
  const [isOpen, setIsOpen] = useState(initialState.isOpen);
  const [issueType, setIssueType] = useState(initialState.issueType);
  const [mentions, setMentions] = useState(initialState.mentions);
  const [selectedPackage, setPackage] = useState(initialState.selectedPackage);
  const [solution, setSolution] = useState(initialState.solution);
  const [steps, setSteps] = useState(initialState.steps);
  const [title, setTitle] = useState(initialState.title);

import React from 'react';
import ContentContainer from 'terra-content-container';
import ActionHeader from 'terra-action-header';
import { disclosureManagerShape, withDisclosureManager } from 'terra-application/lib/disclosure-manager';
import StatusView from 'terra-status-view';

const propTypes = {
  /**
   * Injected by disclosure manager
   */
  disclosureManager: disclosureManagerShape.isRequired,
};

const TestExtension = ({ disclosureManager }) => (
  
    )}
    fill
  >
    
  
);

header={(
      
    )}
    fill
  >
    
  
);

TestExtension.propTypes = propTypes;

export default withDisclosureManager(TestExtension);

const propTypes = {
  /**
   * Apps config
   */
  apps: PropTypes.arrayOf(
    PropTypes.shape({
      path: PropTypes.string,
      title: PropTypes.string,
    }),
  ).isRequired,

  basename: PropTypes.string.isRequired,
  /**
   * Injected by disclosure manager
   */
  disclosureManager: disclosureManagerShape.isRequired,
};

/**
 * render a component to display apps available to switch to.
 * @param {*} props.disclosureManager disclosure manager object
 * @param {*} props.apps the apps to display
 */
const ApplicationSwitcher = ({ disclosureManager, apps, basename }) => (
  
    )}
    fill
  >
    
      {apps.map(app => (

import SelectField from 'terra-form-select/lib/SelectField';
import { withAppSettings } from './_AppSettingsContext';

const propTypes = {
  config: PropTypes.shape({
    themes: PropTypes.arrayOf(PropTypes.string),
    locales: PropTypes.arrayOf(PropTypes.string),
    directions: PropTypes.arrayOf(PropTypes.string),
  }).isRequired,
  appSettings: PropTypes.shape({
    locale: PropTypes.string,
    theme: PropTypes.string,
    direction: PropTypes.string,
  }).isRequired,
  onChangeSettings: PropTypes.func.isRequired,
  disclosureManager: disclosureManagerShape.isRequired,
};

class SettingsPicker extends React.Component {
  constructor(props) {
    super(props);

    const { locale, theme, direction } = props.appSettings;

    this.state = {
      locale,
      theme,
      direction,
    };
  }

  render() {

import ActionHeader from 'terra-action-header';
import InfiniteList, { Item } from 'terra-infinite-list';
import { disclosureManagerShape, withDisclosureManager } from 'terra-application/lib/disclosure-manager';
import Fuse from 'fuse.js';
import StatusView from 'terra-status-view';
import classNames from 'classnames/bind';
import styles from './search.module.scss';

const cx = classNames.bind(styles);

const propTypes = {
  fetchSearchItems: PropTypes.func.isRequired,
  /**
   * Injected by disclosure manager
   */
  disclosureManager: disclosureManagerShape.isRequired,

  onItemSelected: PropTypes.func.isRequired,
};

const clearResults = setState => setState({ results: [] });

const handleSearch = (string, fetchSearchItems, setState) => {
  const options = {
    shouldSort: true,
    tokenize: true,
    includeMatches: true,
    threshold: 0.4,
    location: 0,
    distance: 100,
    maxPatternLength: 32,
    minMatchCharLength: 2,

}}
            >
              {config.directions.map(value => (
                
              ))}
            
          ) : undefined}
        
      
    );
  }
}

SettingsPicker.propTypes = propTypes;

export default withAppSettings(withDisclosureManager(SettingsPicker));

notFoundComponent={}
                settingsConfig={settingsConfig}
                capabilities={capabilities}
              />
            ),
          })
        }
      
    );
  }
}

DevSiteNavigation.propTypes = propTypes;
DevSiteNavigation.defaultProps = defaultProps;

export default withDisclosureManager(withRouter(DevSiteNavigation));

)}
    fill
  >
    
      {apps.map(app => (
        
          {app.title}
        
      ))}
    
  
);

ApplicationSwitcher.propTypes = propTypes;

export default withDisclosureManager(ApplicationSwitcher);