@procore/labs-markup-toolbars
Toolbar UI for Document Markup
Last updated 12 days ago by eyvettesou .
SEE LICENSE IN LICENSE · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @procore/labs-markup-toolbars 
SYNC missed versions from official npm registry.

Markup Toolbar

A library that contains components for a viewer, toolbars, and tools to interact with pages.

Installation

yarn add @procore/labs-markup-toolbars

Requirements

Peer dependencies

  • core-react >8.18
  • react >16.8
  • react-dom >16.8
  • redux >4.0
  • styled-components >5.0
  • @procore/labs-jsskit >3.0

Translations

  • Include these translations in your bundle from Procore core.* views.global.* views.generic.* views.utilities.*

Providers

To use most components within this library, you must wrap this component (root level of your app) in these providers

  • I18nProvider from @procore/core-react
import { I18nProvider } from '@procore/core-react';

<I18nProvider I18n={window.I18n}>
  <App />
</I18nProvider>
  • ThemeProvider from @procore/core-react
import { ThemeProvider } from 'styled-components';
import { createTheme } from '@procore/labs-jsskit';

<ThemeProvider theme={createTheme()}>
  <App/>
</ThemeProvider>

To use MarkupViewerContainer and any of its connected components, you must wrap it inside our provided PermissionProvider.

import { PermissionProvider, MarkupViewerContainer } from '@procore/core-react';

<PermissionProvider>
  <MarkupViewerContainer>
    <App />
  </MarkupViewerContainer>
</PermissionProvider>

Full Example

import { I18nProvider } from '@procore/core-react';
import {
  PermissionProvider,
  MarkupViewerContainer,
  PageContainer,
  ScrollView,
  FloatingPageControls,
  TopToobar,
  LeftToolbar,
  RightToolbar,
  DocumentTitle,
  PageNavigator,
  SelectTool,
} from '@procore/labs-keyboard-shortcut';

const App = () => (
  <I18nProvider I18n={window.I18n}>
    <ThemeProvider theme={createTheme()}>
      <PermissionProvider>
        <MarkupViewerContainer>
          <>
            <PageContainer>
              <ScrollView />
              <FloatingPageControls />
            </PageContainer>
            <TopToolbar>
                <DocumentTitle/>
            </TopToolbar>
            <LeftToolbar>
              <PageNavigator initialIsOpen />
              <SelectTool />
            </LeftToolbar>
            <RightToolbar/>
          </>
        </MarkupViewerContainer>
      </PermissionProvider>
    </ThemeProvider>
  </I18nProvider>
);

Current Tags

269 Versions


Copyright 2014 - 2016 © taobao.org |