How to use _onClose method in Puppeteer

1// (C) Copyright 2014-2017 Hewlett Packard Enterprise Development LP
2
3import React, { Component } from 'react';
4import Button from 'grommet/components/Button';
5import Layer from 'grommet/components/Layer';
6import InteractiveExample from '../../../components/InteractiveExample';
7import SampleArticle from '../samples/SampleArticle';
8import ConfirmationForm from '../samples/ConfirmationForm';
9import FullForm from '../samples/FullForm';
10import LazyList from '../samples/LazyList';
11import LazyTiles from '../samples/LazyTiles';
12import LazyTable from '../samples/LazyTable';
13
14Layer.displayName = 'Layer';
15
16const PROPS_SCHEMA = {
17  closer: { value: true },
18  flush: { value: true },
19  align: { options: ['center', 'top', 'bottom', 'left', 'right'] },
20  overlayClose: { value: false }
21};
22
23const CONTENTS_SCHEMA = {
24  contents: { options: [
25    'article', 'form', 'confirmation', 'lazy list', 'lazy tiles', 'lazy table'
26  ] }
27};
28
29export default class ColumnsExamplesDoc extends Component {
30
31  constructor () {
32    super();
33    this._onClose = this._onClose.bind(this);
34    this.state = {
35      active: false, contents: {}, elementProps: {}
36    };
37  }
38
39  _onClose () {
40    this.setState({ active: false });
41  }
42
43  render () {
44    const { active, contents, elementProps } = this.state;
45
46    let content;
47    if ('article' === contents.contents || ! contents.contents) {
48      content = <SampleArticle />;
49    } else if ('form' === contents.contents) {
50      content = (
51        <FullForm onCancel={this._onClose} onSubmit={this._onClose} />
52      );
53    } else if ('confirmation' === contents.contents) {
54      content = (
55        <ConfirmationForm onCancel={this._onClose} onSubmit={this._onClose} />
56      );
57    } else if ('lazy list' === contents.contents) {
58      content = <LazyList />;
59    } else if ('lazy tiles' === contents.contents) {
60      content = <LazyTiles />;
61    } else if ('lazy table' === contents.contents) {
62      content = <LazyTable />;
63    }
64
65    const layer = (
66      <Layer {...elementProps} onClose={this._onClose}>
67        {content}
68      </Layer>
69    );
70
71    const control = (
72      <Button label='Show layer'
73        onClick={() => this.setState({ active: true })} />
74    );
75
76    const element = active ? layer : control;
77
78    return (
79      <InteractiveExample contextLabel='Layer' contextPath='/docs/layer'
80        preamble={`import Layer from 'grommet/components/Layer';`}
81        propsSchema={PROPS_SCHEMA}
82        codeElement={layer}
83        contentsSchema={CONTENTS_SCHEMA}
84        element={element}
85        onChange={(elementProps, contents) => {
86          this.setState({ elementProps, contents });
87        }} />
88    );
89  }
90};
91

Source: LayerExamplesDoc.js

// (C) Copyright 2014-2017 Hewlett Packard Enterprise Development LP

import React, { Component } from 'react';
import Button from 'grommet/components/Button';
import Layer from 'grommet/components/Layer';
import InteractiveExample from '../../../components/InteractiveExample';
import SampleArticle from '../samples/SampleArticle';
import ConfirmationForm from '../samples/ConfirmationForm';
import FullForm from '../samples/FullForm';
import LazyList from '../samples/LazyList';
import LazyTiles from '../samples/LazyTiles';
import LazyTable from '../samples/LazyTable';

Layer.displayName = 'Layer';

const PROPS_SCHEMA = {
  closer: { value: true },
  flush: { value: true },
  align: { options: ['center', 'top', 'bottom', 'left', 'right'] },
  overlayClose: { value: false }
};

const CONTENTS_SCHEMA = {
  contents: { options: [
    'article', 'form', 'confirmation', 'lazy list', 'lazy tiles', 'lazy table'
  ] }
};

export default class ColumnsExamplesDoc extends Component {

  constructor () {
    super();
    this._onClose = this._onClose.bind(this);
    this.state = {
      active: false, contents: {}, elementProps: {}
    };
  }

  _onClose () {
    this.setState({ active: false });
  }

  render () {
    const { active, contents, elementProps } = this.state;

    let content;
    if ('article' === contents.contents || ! contents.contents) {
      content = <SampleArticle />;
    } else if ('form' === contents.contents) {
      content = (
        <FullForm onCancel={this._onClose} onSubmit={this._onClose} />
      );
    } else if ('confirmation' === contents.contents) {
      content = (
        <ConfirmationForm onCancel={this._onClose} onSubmit={this._onClose} />
      );
    } else if ('lazy list' === contents.contents) {
      content = <LazyList />;
    } else if ('lazy tiles' === contents.contents) {
      content = <LazyTiles />;
    } else if ('lazy table' === contents.contents) {
      content = <LazyTable />;
    }

    const layer = (
      <Layer {...elementProps} onClose={this._onClose}>
        {content}
      </Layer>
    );

    const control = (
      <Button label='Show layer'
        onClick={() => this.setState({ active: true })} />
    );

    const element = active ? layer : control;

    return (
      <InteractiveExample contextLabel='Layer' contextPath='/docs/layer'
        preamble={`import Layer from 'grommet/components/Layer';`}
        propsSchema={PROPS_SCHEMA}
        codeElement={layer}
        contentsSchema={CONTENTS_SCHEMA}
        element={element}
        onChange={(elementProps, contents) => {
          this.setState({ elementProps, contents });
        }} />
    );
  }
};

1// @flow
2
3import React from 'react';
4import { KeyboardAvoidingView, SafeAreaView } from 'react-native';
5
6import { ColorSchemeRegistry } from '../../../base/color-scheme';
7import { translate } from '../../../base/i18n';
8import { HeaderWithNavigation, SlidingView } from '../../../base/react';
9import { connect } from '../../../base/redux';
10import { StyleType } from '../../../base/styles';
11
12import AbstractChat, {
13    _mapDispatchToProps,
14    _mapStateToProps as _abstractMapStateToProps,
15    type Props as AbstractProps
16} from '../AbstractChat';
17
18import ChatInputBar from './ChatInputBar';
19import MessageContainer from './MessageContainer';
20import MessageRecipient from './MessageRecipient';
21import styles from './styles';
22
23type Props = AbstractProps & {
24
25    /**
26     * The color-schemed stylesheet of the feature.
27     */
28    _styles: StyleType
29};
30
31/**
32 * Implements a React native component that renders the chat window (modal) of
33 * the mobile client.
34 */
35class Chat extends AbstractChat<Props> {
36    /**
37     * Instantiates a new instance.
38     *
39     * @inheritdoc
40     */
41    constructor(props: Props) {
42        super(props);
43
44        this._onClose = this._onClose.bind(this);
45    }
46
47    /**
48     * Implements React's {@link Component#render()}.
49     *
50     * @inheritdoc
51     */
52    render() {
53        const { _styles } = this.props;
54
55        return (
56            <SlidingView
57                onHide = { this._onClose }
58                position = 'bottom'
59                show = { this.props._isOpen } >
60                <KeyboardAvoidingView
61                    behavior = 'padding'
62                    style = { styles.chatContainer }>
63                    <HeaderWithNavigation
64                        headerLabelKey = 'chat.title'
65                        onPressBack = { this._onClose } />
66                    <SafeAreaView style = { _styles.backdrop }>
67                        <MessageContainer messages = { this.props._messages } />
68                        <MessageRecipient />
69                        <ChatInputBar onSend = { this.props._onSendMessage } />
70                    </SafeAreaView>
71                </KeyboardAvoidingView>
72            </SlidingView>
73        );
74    }
75
76    _onClose: () => boolean
77
78    /**
79     * Closes the chat window.
80     *
81     * @returns {boolean}
82     */
83    _onClose() {
84        if (this.props._isOpen) {
85            this.props._onToggleChat();
86
87            return true;
88        }
89
90        return false;
91    }
92}
93
94/**
95 * Maps part of the redux state to the props of this component.
96 *
97 * @param {Object} state - The Redux state.
98 * @returns {Props}
99 */
100function _mapStateToProps(state) {
101    return {
102        ..._abstractMapStateToProps(state),
103        _styles: ColorSchemeRegistry.get(state, 'Chat')
104    };
105}
106
107export default translate(connect(_mapStateToProps, _mapDispatchToProps)(Chat));
108

Source: Chat.js

// @flow

import React from 'react';
import { KeyboardAvoidingView, SafeAreaView } from 'react-native';

import { ColorSchemeRegistry } from '../../../base/color-scheme';
import { translate } from '../../../base/i18n';
import { HeaderWithNavigation, SlidingView } from '../../../base/react';
import { connect } from '../../../base/redux';
import { StyleType } from '../../../base/styles';

import AbstractChat, {
    _mapDispatchToProps,
    _mapStateToProps as _abstractMapStateToProps,
    type Props as AbstractProps
} from '../AbstractChat';

import ChatInputBar from './ChatInputBar';
import MessageContainer from './MessageContainer';
import MessageRecipient from './MessageRecipient';
import styles from './styles';

type Props = AbstractProps & {

    /**
     * The color-schemed stylesheet of the feature.
     */
    _styles: StyleType
};

/**
 * Implements a React native component that renders the chat window (modal) of
 * the mobile client.
 */
class Chat extends AbstractChat<Props> {
    /**
     * Instantiates a new instance.
     *
     * @inheritdoc
     */
    constructor(props: Props) {
        super(props);

        this._onClose = this._onClose.bind(this);
    }

    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     */
    render() {
        const { _styles } = this.props;

        return (
            <SlidingView
                onHide = { this._onClose }
                position = 'bottom'
                show = { this.props._isOpen } >
                <KeyboardAvoidingView
                    behavior = 'padding'
                    style = { styles.chatContainer }>
                    <HeaderWithNavigation
                        headerLabelKey = 'chat.title'
                        onPressBack = { this._onClose } />
                    <SafeAreaView style = { _styles.backdrop }>
                        <MessageContainer messages = { this.props._messages } />
                        <MessageRecipient />
                        <ChatInputBar onSend = { this.props._onSendMessage } />
                    </SafeAreaView>
                </KeyboardAvoidingView>
            </SlidingView>
        );
    }

    _onClose: () => boolean

    /**
     * Closes the chat window.
     *
     * @returns {boolean}
     */
    _onClose() {
        if (this.props._isOpen) {
            this.props._onToggleChat();

            return true;
        }

        return false;
    }
}

/**
 * Maps part of the redux state to the props of this component.
 *
 * @param {Object} state - The Redux state.
 * @returns {Props}
 */
function _mapStateToProps(state) {
    return {
        ..._abstractMapStateToProps(state),
        _styles: ColorSchemeRegistry.get(state, 'Chat')
    };
}

export default translate(connect(_mapStateToProps, _mapDispatchToProps)(Chat));