storj.io/minio@v0.0.0-20230509071714-0cbc90f649b1/browser/app/js/buckets/MakeBucketModal.js (about)

     1  /*
     2   * MinIO Cloud Storage (C) 2018 MinIO, Inc.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  
    17  import React from "react"
    18  import { connect } from "react-redux"
    19  import { Modal, ModalBody } from "react-bootstrap"
    20  import * as actionsBuckets from "./actions"
    21  
    22  export class MakeBucketModal extends React.Component {
    23    constructor(props) {
    24      super(props)
    25      this.state = {
    26        bucketName: ""
    27      }
    28    }
    29    onSubmit(e) {
    30      e.preventDefault()
    31      const { makeBucket } = this.props
    32      const bucket = this.state.bucketName
    33      if (bucket) {
    34        makeBucket(bucket)
    35        this.hideModal()
    36      }
    37    }
    38    hideModal() {
    39      this.setState({
    40        bucketName: ""
    41      })
    42      this.props.hideMakeBucketModal()
    43    }
    44    render() {
    45      const { showMakeBucketModal } = this.props
    46      return (
    47        <Modal
    48          className="modal-create-bucket"
    49          bsSize="small"
    50          animation={false}
    51          show={showMakeBucketModal}
    52          onHide={this.hideModal.bind(this)}
    53        >
    54          <button className="close close-alt" onClick={this.hideModal.bind(this)}>
    55            <span>×</span>
    56          </button>
    57          <ModalBody>
    58            <form onSubmit={this.onSubmit.bind(this)}>
    59              <div className="input-group">
    60                <input
    61                  className="ig-text"
    62                  type="text"
    63                  placeholder="Bucket Name"
    64                  value={this.state.bucketName}
    65                  onChange={e => this.setState({ bucketName: e.target.value })}
    66                  autoFocus
    67                />
    68                <i className="ig-helpers" />
    69              </div>
    70            </form>
    71          </ModalBody>
    72        </Modal>
    73      )
    74    }
    75  }
    76  
    77  const mapStateToProps = state => {
    78    return {
    79      showMakeBucketModal: state.buckets.showMakeBucketModal
    80    }
    81  }
    82  
    83  const mapDispatchToProps = dispatch => {
    84    return {
    85      makeBucket: bucket => dispatch(actionsBuckets.makeBucket(bucket)),
    86      hideMakeBucketModal: () => dispatch(actionsBuckets.hideMakeBucketModal())
    87    }
    88  }
    89  
    90  export default connect(mapStateToProps, mapDispatchToProps)(MakeBucketModal)