How to use @blueprintjs/core - 10 common examples

* distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { AnchorButton, Classes, setHotkeysDialogProps, Tag } from "@blueprintjs/core";
import { IDocsCompleteData } from "@blueprintjs/docs-data";
import { Documentation, IDocumentationProps, INavMenuItemProps, NavMenuItem } from "@blueprintjs/docs-theme";
import { IHeadingNode, IPageData, isPageNode, ITsDocBase } from "@documentalist/client";
import classNames from "classnames";
import * as React from "react";
import { NavHeader } from "./navHeader";
import { NavIcon } from "./navIcons";

const DARK_THEME = Classes.DARK;
const LIGHT_THEME = "";
const THEME_LOCAL_STORAGE_KEY = "blueprint-docs-theme";

const GITHUB_SOURCE_URL = "https://github.com/palantir/blueprint/blob/develop";
const NPM_URL = "https://www.npmjs.com/package";

// detect Components page and subheadings
const COMPONENTS_PATTERN = /\/components(\.[\w-]+)?$/;
const isNavSection = ({ route }: IHeadingNode) => COMPONENTS_PATTERN.test(route);

/** Return the current theme className. */
export function getTheme(): string {
    return localStorage.getItem(THEME_LOCAL_STORAGE_KEY) || LIGHT_THEME;
}

/** Persist the current theme className in local storage. */

} = this.props;

    const { copied } = this.state;

    return (
      <div>
        <div>
          <input value="{address}/" disabled="">

          <div>
             this.setState({ copied: true })}&gt;
              <button size="small">
                {copied ? t('address.copied') : t('address.copy')}
              </button>
            
          </div>

          {/* <div>
            <button size="small"> openInvitePopup()}&gt;{t('inviteReferralsByEmail')}</button>
          </div> */}
        </div>
      </div>
    );
  }
}

<div>
            <div>
              <h2>
                Type or paste below the first EOS transaction id containing the file
              </h2>
              <p>Hint: try 16d1fd7fc2d3ccc4a2141ba71ce32a96a30f848838bb6879ca2967905e97d7ca</p>
              
            </div>
          </div>
        

        <div>
          <div>
            {fileStore.isLoading ? (
              <div>
                <h2>
                  Fetching the file transactions
                </h2>
                {/* Maybe a component */}
                {fileStore.transactions.map((t: any) =&gt; (
                  <p>{t}</p>
                ))}</div></div></div>

// @flow
import React from 'react';
import { MenuItem, Intent } from '@blueprintjs/core';
import { MultiSelect } from '@blueprintjs/select';

const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING];

type Indicator = {
  name: string,
  active: boolean,
  height: number,
  rank: number,
};

type Props = {
  indicators: Array,
  onUpdateIndicators: (Indicator, boolean) => void,
};
type State = {
  indicators: Array,
};

private handleItemCreate = (query: string, evt?: React.SyntheticEvent) => {
        // we keep a cached createNewItem in state, but might as well recompute
        // the result just to be sure it's perfectly in sync with the query.
        const item = Utils.safeInvoke(this.props.createNewItemFromQuery, query);
        if (item != null) {
            Utils.safeInvoke(this.props.onItemSelect, item, evt);
            this.setQuery("", true);
        }
    };

let nextActiveItem: T | undefined;
        const nextQueries = [];

        // Find an exising item that exactly matches each pasted value, or
        // create a new item if possible. Ignore unmatched values if creating
        // items is disabled.
        const pastedItemsToEmit = [];

        for (const query of queries) {
            const equalItem = getMatchingItem(query, this.props);

            if (equalItem !== undefined) {
                nextActiveItem = equalItem;
                pastedItemsToEmit.push(equalItem);
            } else if (this.canCreateItems()) {
                const newItem = Utils.safeInvoke(createNewItemFromQuery, query);
                if (newItem !== undefined) {
                    pastedItemsToEmit.push(newItem);
                }
            } else {
                nextQueries.push(query);
            }
        }

        // UX nicety: combine all unmatched queries into a single
        // comma-separated query in the input, so we don't lose any information.
        // And don't reset the active item; we'll do that ourselves below.
        this.setQuery(nextQueries.join(", "), false);

        // UX nicety: update the active item if we matched with at least one
        // existing item.
        if (nextActiveItem !== undefined) {

this.input.blur();
      }
      nextOpenState = false;
    }
    // the internal state should only change when uncontrolled.
    if (this.props.selectedItem === undefined) {
      this.setState({
        isOpen: nextOpenState,
        selectedItem: item,
      });
    } else {
      // otherwise just set the next open state.
      this.setState({ isOpen: nextOpenState });
    }

    Utils.safeInvoke(this.props.onItemSelect, item, event);
  };

private handleKeyUp = (event: React.KeyboardEvent) => {
        const { onKeyUp } = this.props;
        const { activeItem } = this.state;
        // using keyup for enter to play nice with Button's keyboard clicking.
        // if we were to process enter on keydown, then Button would click itself on keyup
        // and the popvoer would re-open out of our control :(.
        if (event.keyCode === Keys.ENTER) {
            event.preventDefault();
            if (activeItem == null || isCreateNewItem(activeItem)) {
                this.handleItemCreate(this.state.query, event);
            } else {
                this.handleItemSelect(activeItem, event);
            }
        }
        Utils.safeInvoke(onKeyUp, event);
    };

this.setState(newState);
        } else {
            // component is controlled, and there's a new value
            // so set inputs' text based off of _old_ value and later fire onChange with new value
            if (hasNewValue) {
                this.setState(this.getFullStateFromValue(this.state.value, this.props.useAmPm));
            } else {
                // no new value, this means only text has changed (from user typing)
                // we want inputs to change, so update state with new text for the inputs
                // but don't change actual value
                this.setState({ ...newState, value: DateUtils.clone(this.state.value) });
            }
        }

        if (hasNewValue) {
            BlueprintUtils.safeInvoke(this.props.onChange, newState.value);
        }
    }
}

render() {
    const {
      hideModal,
      // sequenceData = { sequence: "" },
      // handleSubmit,
      editorName
      // circular,
      // upsertFeature
    } = this.props;
    // const sequenceLength = sequenceData.sequence.length;
    const isCirc = (this.state || {}).circular;
    return (
      <div>
        <div style="{{">
          
            <button> {
                this.setState({ circular: true });
              }}
              active={isCirc}
            &gt;
              Circular
            </button>
            <button> {
                this.setState({ circular: false });
              }}
              active={!isCirc}
            &gt;</button></div></div>