Просмотр исходного кода

Add `Back` button to Endpoint modal

Show `Back` button instead of `Cancel` if the modal is opened after
`ChooseProvider` modal and switch to `ChooseProvider` modal on `Back`
button click.
Sergiu Miclea 8 лет назад
Родитель
Сommit
8d09d4aff9

+ 6 - 1
src/components/organisms/Endpoint/Endpoint.jsx

@@ -91,6 +91,7 @@ const StatusError = styled.div`
 class Endpoint extends React.Component {
   static propTypes = {
     type: PropTypes.string,
+    cancelButtonText: PropTypes.string,
     deleteOnCancel: PropTypes.bool,
     endpoint: PropTypes.object,
     connectionInfo: PropTypes.object,
@@ -102,6 +103,10 @@ class Endpoint extends React.Component {
     providerStore: PropTypes.object,
   }
 
+  static defaultProps = {
+    cancelButtonText: 'Cancel',
+  }
+
   static getStores() {
     return [EndpointStore, ProviderStore]
   }
@@ -418,7 +423,7 @@ class Endpoint extends React.Component {
           {Tooltip.rebuild()}
         </Fields>
         <Buttons>
-          <Button large secondary onClick={() => { this.handleCancelClick() }}>Cancel</Button>
+          <Button large secondary onClick={() => { this.handleCancelClick() }}>{this.props.cancelButtonText}</Button>
           {this.renderActionButton()}
         </Buttons>
       </Wrapper>

+ 6 - 1
src/components/organisms/PageHeader/PageHeader.jsx

@@ -151,6 +151,10 @@ class PageHeader extends React.Component {
     this.setState({ showEndpointModal: false })
   }
 
+  handleBackEndpointModal() {
+    this.setState({ showChooseProviderModal: true, showEndpointModal: false })
+  }
+
   render() {
     return (
       <Wrapper>
@@ -186,7 +190,8 @@ class PageHeader extends React.Component {
           <Endpoint
             deleteOnCancel
             type={this.state.providerType}
-            onCancelClick={() => { this.handleCloseEndpointModal() }}
+            cancelButtonText="Back"
+            onCancelClick={() => { this.handleBackEndpointModal() }}
           />
         </Modal>
       </Wrapper>