basic/PageFilter.js
- /**
- * Created by jakubniezgoda on 21/05/2018.
- */
-
- import React from 'react';
- import PropTypes from 'prop-types';
- import { connect } from 'react-redux';
-
- import Form from './form/Form';
-
- /**
- * PageFilter - a component showing dropdown with list of currently available pages.
- *
- * ## Access
- * `Stage.Basic.PageFilter`
- *
- * ## Usage
- * 
- *
- * ```
- * let value = 'dashboard';
- * <PageFilter name='pageId' value={value} />
- * ```
- *
- */
- class PageFilter extends React.Component {
- constructor(props, context) {
- super(props, context);
-
- this.state = PageFilter.initialState(props);
- }
-
- /**
- * propTypes
- *
- * @property {string} name name of the field
- * @property {string} value value of the field
- * @property {Array} pages array containing page objects - {id, name} - it is fetched from redux store automatically
- * @property {Function} [onChange=()=>{}] function called on input value change
- */
- static propTypes = {
- name: PropTypes.string.isRequired,
- value: PropTypes.string.isRequired,
- pages: PropTypes.array.isRequired,
- onChange: PropTypes.func,
- allowDrillDownPages: PropTypes.bool
- };
-
- static initialState = props => ({
- pageId: props.value,
- allowDrillDownPages: false
- });
-
- _handleInputChange(event, field) {
- this.setState({ pageId: field.value }, () => {
- this.props.onChange(event, {
- name: this.props.name,
- value: this.state.pageId
- });
- });
- }
-
- _getPageName(pages, pageId) {
- const page = _.find(pages, { id: pageId });
- if (page.isDrillDown) {
- return `${this._getPageName(pages, page.parent)} > ${page.name}`;
- }
- return page.name;
- }
-
- render() {
- const pages = this.props.allowDrillDownPages
- ? this.props.pages
- : _.filter(this.props.pages, page => !page.isDrillDown);
- const pagesOptions = _.map(pages, page => ({
- text: this._getPageName(pages, page.id),
- value: page.id,
- key: page.id
- }));
- pagesOptions.sort((a, b) => a.text.localeCompare(b.text));
- const defaultValue = pagesOptions[0].value;
-
- return (
- <Form.Dropdown
- name="pageId"
- search
- selection
- value={this.state.pageId || defaultValue}
- options={pagesOptions}
- onChange={this._handleInputChange.bind(this)}
- />
- );
- }
- }
-
- const mapStateToProps = state => {
- return {
- pages: state.pages
- };
- };
-
- export default connect(mapStateToProps)(PageFilter);