@atlaskit/embedded-document 0.7.29

package/dist/es2019/components/toolbar.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import ButtonGroup from '@atlaskit/button/button-group';
+import Button from '@atlaskit/button/custom-theme-button';
+import styled from 'styled-components';
+import WithDocumentActions from '../consumers/with-document-actions';
+const Toolbar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 20px;
+  height: 80px;
+`;
+export default (props => {
+  const {
+    mode,
+    editorActions
+  } = props;
+  return /*#__PURE__*/React.createElement(WithDocumentActions, {
+    render: actions => {
+      switch (mode) {
+        case 'edit':
+        case 'create':
+          return /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+            appearance: "primary",
+            onClick: async () => {
+              const value = await editorActions.getValue();
+
+              try {
+                await (mode === 'create' ? actions.createDocument(value) : actions.updateDocument(value));
+              } catch (err) {}
+            }
+          }, "Publish"), /*#__PURE__*/React.createElement(Button, {
+            appearance: "subtle",
+            onClick: () => actions.cancelEdit()
+          }, "Close"));
+
+        default:
+          return /*#__PURE__*/React.createElement(Toolbar, null, /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+            appearance: "primary",
+            onClick: () => actions.editDocument()
+          }, "Edit")));
+      }
+    }
+  });
+});

package/dist/es2019/consumers/consumer.js

@@ -0,0 +1,62 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { PureComponent } from 'react';
+import { Context } from '../context/context';
+export class Consumer extends PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "getPropsFromActions", actions => {
+      const {
+        actionsMapper
+      } = this.props;
+
+      if (actionsMapper) {
+        if (!this.previousActions || !this.propsFromActions || this.previousActions !== actions) {
+          this.propsFromActions = actionsMapper(actions);
+        }
+      }
+
+      this.previousActions = actions;
+      return this.propsFromActions;
+    });
+
+    _defineProperty(this, "getPropsFromState", state => {
+      const {
+        stateMapper
+      } = this.props;
+
+      if (stateMapper) {
+        return stateMapper(state);
+      }
+
+      return undefined;
+    });
+
+    _defineProperty(this, "getRenderProps", renderProps => {
+      const {
+        renderPropsMapper
+      } = this.props;
+
+      if (renderPropsMapper) {
+        return renderPropsMapper(renderProps);
+      }
+
+      return undefined;
+    });
+
+    _defineProperty(this, "renderChildren", ({
+      actions,
+      value,
+      renderProps
+    }) => {
+      const props = Object.assign({}, this.getPropsFromState(value), this.getPropsFromActions(actions), this.getRenderProps(renderProps));
+      return this.props.children(props);
+    });
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Context.Consumer, null, this.renderChildren);
+  }
+
+}

package/dist/es2019/consumers/document-body.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { PureComponent } from 'react';
+import { Consumer } from './consumer';
+import { default as Document } from '../components/document';
+export default class DocumentBody extends PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "renderChild", props => {
+      return /*#__PURE__*/React.createElement(Document, _extends({}, this.props, props));
+    });
+
+    _defineProperty(this, "stateMapper", state => {
+      const {
+        doc,
+        hasError,
+        isLoading,
+        mode
+      } = state;
+      return {
+        doc,
+        hasError,
+        isLoading,
+        mode
+      };
+    });
+
+    _defineProperty(this, "renderPropsMapper", renderProps => {
+      const {
+        renderTitle,
+        renderToolbar
+      } = renderProps;
+      return {
+        renderTitle,
+        renderToolbar
+      };
+    });
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Consumer, {
+      stateMapper: this.stateMapper,
+      renderPropsMapper: this.renderPropsMapper
+    }, this.renderChild);
+  }
+
+}

package/dist/es2019/consumers/with-document-actions.js

@@ -0,0 +1,35 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { PureComponent } from 'react';
+import { Consumer } from '../consumers/consumer';
+export default class WithDocumentActions extends PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "actionsMapper", actions => ({
+      async createDocument(value) {
+        return actions.createDocument(value);
+      },
+
+      async editDocument() {
+        actions.setDocumentMode('edit');
+      },
+
+      async updateDocument(value) {
+        return actions.updateDocument(value);
+      },
+
+      async cancelEdit() {
+        actions.setDocumentMode('view');
+      }
+
+    }));
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Consumer, {
+      actionsMapper: this.actionsMapper
+    }, this.props.render);
+  }
+
+}

package/dist/es2019/context/context.js

@@ -0,0 +1,19 @@
+import { createContext } from 'react';
+
+const noop = () => {};
+
+export const Context = /*#__PURE__*/createContext({
+  value: {},
+  actions: {
+    getDocument: noop,
+    getDocumentByObjectId: noop,
+    setDocumentMode: noop,
+    updateDocument: async () => {
+      throw new Error('Not implemented.');
+    },
+    createDocument: async () => {
+      throw new Error('Not implemented.');
+    }
+  },
+  renderProps: {}
+});

package/dist/es2019/context/embedded-document.js

@@ -0,0 +1,216 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { Component } from 'react';
+import styled from 'styled-components';
+import { Context } from './context';
+import { getProvider } from '../provider';
+import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+export const akEditorFullPageMaxWidth = 680;
+const Content = styled.div`
+  line-height: 24px;
+  height: 100%;
+  width: 100%;
+  max-width: ${akEditorFullPageMaxWidth + akEditorGutterPadding * 2}px;
+  padding-top: 50px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding-bottom: 55px;
+
+  & > * {
+    padding: 0 32px;
+  }
+`;
+export default class EmbeddedDocument extends Component {
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "getDocumentByObjectId", async (objectId, language) => {
+      this.setState({
+        isLoading: true
+      });
+      const doc = await this.provider.getDocumentByObjectId(objectId, language);
+      this.setDocumentState(doc);
+    });
+
+    _defineProperty(this, "getDocument", async (documentId, language) => {
+      this.setState({
+        isLoading: true
+      });
+      const doc = await this.provider.getDocument(documentId, language);
+      this.setDocumentState(doc);
+    });
+
+    _defineProperty(this, "setDocumentMode", async mode => {
+      this.setState({
+        mode
+      });
+    });
+
+    _defineProperty(this, "updateDocument", async body => {
+      const {
+        documentId,
+        objectId,
+        language
+      } = this.state.doc || this.props;
+
+      if (!documentId) {
+        return this.createDocument(body);
+      }
+
+      const doc = await this.provider.updateDocument(documentId, JSON.stringify(body), objectId, '', language);
+
+      if (doc) {
+        this.setState({
+          doc,
+          mode: 'view'
+        });
+        return doc;
+      } else {
+        this.setState({
+          hasError: true,
+          mode: 'view'
+        });
+        throw new Error('Failed to update document');
+      }
+    });
+
+    _defineProperty(this, "createDocument", async body => {
+      const {
+        objectId,
+        language
+      } = this.props;
+      const doc = await this.provider.createDocument(JSON.stringify(body), objectId, '', language);
+
+      if (doc) {
+        this.setState({
+          doc,
+          mode: 'view'
+        });
+        return doc;
+      } else {
+        this.setState({
+          hasError: true,
+          mode: 'view'
+        });
+        throw new Error('Failed to create document');
+      }
+    });
+
+    _defineProperty(this, "setDocumentState", doc => {
+      if (doc) {
+        this.setState({
+          isLoading: false,
+          doc
+        });
+      } else {
+        this.setState({
+          isLoading: false,
+          mode: 'edit'
+        });
+      }
+    });
+
+    this.actions = {
+      getDocument: this.getDocument,
+      setDocumentMode: this.setDocumentMode,
+      updateDocument: this.updateDocument,
+      createDocument: this.createDocument,
+      getDocumentByObjectId: this.getDocumentByObjectId
+    };
+    this.provider = getProvider(props);
+    this.state = {
+      mode: props.mode || 'view',
+      isLoading: true
+    };
+  }
+
+  async componentDidMount() {
+    const {
+      documentId,
+      language,
+      objectId
+    } = this.props;
+
+    if (documentId) {
+      await this.getDocument(documentId, language);
+    } else {
+      await this.getDocumentByObjectId(objectId, language);
+    }
+  }
+
+  /**
+   * Toolbar will only be rendered here if we're in "view"-mode.
+   *
+   * In all other modes, the toolbar rendering will be triggered
+   * by the Document-component.
+   */
+  renderToolbar() {
+    const {
+      mode
+    } = this.state;
+    const {
+      renderToolbar
+    } = this.props;
+
+    if (mode !== 'view' || !renderToolbar) {
+      return;
+    }
+
+    return renderToolbar(mode);
+  }
+  /**
+   * Title will only be rendered here if we're in "view"-mode.
+   *
+   * In all other modes, the title rendering will be triggered
+   * by the Document-component.
+   */
+
+
+  renderTitle() {
+    const {
+      mode,
+      doc
+    } = this.state;
+    const {
+      renderTitle
+    } = this.props;
+
+    if (mode !== 'view' || !renderTitle) {
+      return;
+    }
+
+    return renderTitle(mode, doc);
+  }
+
+  renderContent() {
+    const {
+      mode
+    } = this.state;
+
+    if (mode === 'view') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderToolbar(), /*#__PURE__*/React.createElement(Content, null, this.renderTitle(), this.props.children));
+    }
+
+    return this.props.children;
+  }
+
+  render() {
+    const {
+      renderTitle,
+      renderToolbar
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Context.Provider, {
+      value: {
+        value: this.state,
+        actions: this.actions,
+        renderProps: {
+          renderTitle,
+          renderToolbar
+        }
+      }
+    }, this.renderContent());
+  }
+
+}

package/dist/es2019/index.js

@@ -0,0 +1,5 @@
+export { default as EmbeddedDocument } from './context/embedded-document';
+export { default as DocumentBody } from './consumers/document-body';
+export { default as WithDocumentActions } from './consumers/with-document-actions';
+export { default as ServiceProvider } from './provider/service-provider';
+export { default as Toolbar } from './components/toolbar';

package/dist/es2019/model/index.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/provider/index.js

@@ -0,0 +1,18 @@
+import { default as ServiceProvider } from './service-provider';
+export { ServiceProvider };
+export const getProvider = ({
+  provider,
+  url
+}) => {
+  if (provider) {
+    return provider;
+  }
+
+  if (url) {
+    return new ServiceProvider({
+      url
+    });
+  }
+
+  throw new Error('Missing provider');
+};