StepperTemplate.tsx 3.15 KB
Newer Older
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
1
2
3
4
5
6
7
import * as React from 'react';

import {PublishState} from 'model/common.model';

import Grid from '@material-ui/core/Grid';

import Loading from 'ui/common/Loading';
8
// import PageLayout from 'ui/layout/PageLayout';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
9
10
11
12
import StepNavigation from './StepNavigation';
import ProgressMenu from './progress-menu';
import TopSection from './TopSection';
import BottomSection from './BottomSection';
Oleksii Savran's avatar
Oleksii Savran committed
13
import ContentLayout from 'ui/layout/ContentLayout';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
14
15
16
17
18
19
20
21
22
23
24
25
26
27

interface IStepperTemplateProps extends React.ClassAttributes<any> {
  item: any;
  disabled: any;
  onGotoStep: any;
  onDelete: any;
  onPublish: any;
  onUnpublish: any;
  onApprove: any;
  steps: any;
  stillLoading: any;
  pageTitle: any;
  path: string;
  location: any;
28
  showHeader: boolean;
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
29
  t: any;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
30
31
32
33
34
}

class StepperTemplate<T> extends React.Component<T & IStepperTemplateProps> {

  protected setDisabled = (disabled: boolean) => {
35
36
37
38
39
40
41
42
    this.setState({...this.state, disabledNext: disabled});
  }

  protected setDisabledActions = (disabled: boolean) => {
    this.setState({...this.state, disabledActions: disabled});
  }
  protected setDisabledProgress = (disabled: boolean) => {
    this.setState({...this.state, disabledProgress: disabled});
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
43
44
45
46
47
48
  }

  private getStepNavigation = () => {
    const {disabled, onDelete, onPublish, onUnpublish, onApprove, steps, item, location} = this.props;
    return (
      <StepNavigation
49
        disabled={ this.state.disabledActions || disabled }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
        disabledNext={ this.state.disabledNext }
        onGotoStep={ this.gotoStep }
        onDelete={ onDelete }
        steps={ steps }
        location={ location }
        showStepName
        bottomDivider
        onPublish={ onPublish }
        onUnpublish={ onUnpublish }
        onApprove={ onApprove }
        itemState={ item && item.state || PublishState.DRAFT }
      />
    );
  }

  protected renderContent = () => (<h3>Not implemented in parent</h3>);

  protected gotoStep = (id) => (this.props.onGotoStep(id));

  public state = {
    disabledNext: false,
71
72
    disabledActions: false,
    disabledProgress: false,
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
73
74
75
76
  };

  public render() {

Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
77
    const {disabled, steps, stillLoading, pageTitle, path, location, showHeader, t} = this.props;
78
    const {disabledProgress} = this.state;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
79
80
81
    const child = this.renderContent();
    const stepNavigation = this.getStepNavigation();
    return (
Oleksii Savran's avatar
Oleksii Savran committed
82
83
84
85
86
      <ContentLayout right={
        <ProgressMenu disabled={ disabledProgress || disabled } onGotoStep={ this.gotoStep } steps={ steps }
                      location={ location }/>
      } customHeaderHeight>
        { showHeader && <TopSection pageTitle={ t(pageTitle) } backTarget={ `/dashboard/${path}` }/> }
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
87
88
        <Grid container spacing={ 0 }>
          <Grid container spacing={ 0 }>
Oleksii Savran's avatar
Oleksii Savran committed
89
            <Grid className="back-gray p-20">
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
90
91
              <Grid container spacing={ 0 } className="back-white">
                { stepNavigation }
Oleksii Savran's avatar
Oleksii Savran committed
92
93
94
                <Grid item xs={ 12 }>
                  { stillLoading ? <Loading/> : {...child} }
                </Grid>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
95
96
97
98
99
100
                { stepNavigation }
              </Grid>
            </Grid>
          </Grid>
          <BottomSection/>
        </Grid>
Oleksii Savran's avatar
Oleksii Savran committed
101
      </ContentLayout>
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
102
103
104
105
106
    );
  }
}

export default StepperTemplate;