This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 42
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #148 from AparnaKarve/react_bootstrap_select
Custom Dropdown component with search support
- Loading branch information
Showing
9 changed files
with
186 additions
and
131 deletions.
There are no files selected for viewing
1 change: 0 additions & 1 deletion
1
app/javascript/react/screens/App/Overview/screens/MappingWizard/MappingWizard.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 0 additions & 101 deletions
101
.../App/Overview/screens/MappingWizard/components/SourceClusterSelect/SourceClusterSelect.js
This file was deleted.
Oops, something went wrong.
11 changes: 0 additions & 11 deletions
11
...pp/Overview/screens/MappingWizard/components/SourceClusterSelect/SourceClusterSelect.scss
This file was deleted.
Oops, something went wrong.
25 changes: 25 additions & 0 deletions
25
app/javascript/react/screens/App/Overview/screens/MappingWizard/components/helpers.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| export const getClusterOptions = clusterMappings => { | ||
| const sourceClustersWithAssociatedTargetClusters = clusterMappings.reduce( | ||
| (mappings, targetClusterWithSourceClusters) => { | ||
| const { | ||
| nodes: sourceClusters, | ||
| ...targetCluster | ||
| } = targetClusterWithSourceClusters; | ||
| const sourceToTargetMappings = sourceClusters.map(sourceCluster => ({ | ||
| sourceCluster, | ||
| targetCluster, | ||
| sourceClusterMappedToTargetCluster: { | ||
| name: `${sourceCluster.name} (${targetCluster.name})`, | ||
| id: sourceCluster.id | ||
| } | ||
| })); | ||
| return mappings.concat(sourceToTargetMappings); | ||
| }, | ||
| [] | ||
| ); | ||
|
|
||
| return sourceClustersWithAssociatedTargetClusters.map( | ||
| ({ sourceClusterMappedToTargetCluster }) => | ||
| sourceClusterMappedToTargetCluster | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
115 changes: 115 additions & 0 deletions
115
app/javascript/react/screens/App/common/forms/BootstrapSelect.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { | ||
| Form, | ||
| FormGroup, | ||
| Grid, | ||
| ControlLabel, | ||
| bindMethods | ||
| } from 'patternfly-react'; | ||
| import { focus } from 'redux-form'; | ||
|
|
||
| const $ = require('jquery'); | ||
| require('bootstrap-select'); | ||
|
|
||
| export class BootstrapSelect extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| bindMethods(this, ['renderFormGroup']); | ||
| } | ||
| componentDidMount() { | ||
| const { | ||
| input, | ||
| form_name, | ||
| meta: { visited, dispatch }, | ||
| onSelect, | ||
| pre_selected_value | ||
| } = this.props; | ||
|
|
||
| $(`#${input.name}`).selectpicker('val', input.value || pre_selected_value); | ||
|
|
||
| $(`.${input.name}_select`).on('click', '.dropdown-toggle', e => { | ||
| if (!visited) dispatch(focus(form_name, input.name)); | ||
| }); | ||
| if (onSelect) | ||
| $(`#${input.name}`).on('changed.bs.select', e => { | ||
| onSelect(e.target.value); | ||
| }); | ||
| } | ||
|
|
||
| renderFormGroup = (labelWidth, controlWidth) => { | ||
| const { | ||
| input, | ||
| label, | ||
| required, | ||
| data_live_search, | ||
| options, | ||
| option_key, | ||
| option_value, | ||
| choose_text, | ||
| meta: { visited, error, active } | ||
| } = this.props; | ||
| const formGroupProps = { key: { label }, ...this.props }; | ||
|
|
||
| if (visited && !active && error) formGroupProps.validationState = 'error'; | ||
|
|
||
| return ( | ||
| <FormGroup {...formGroupProps}> | ||
| <Grid.Col componentClass={ControlLabel} sm={labelWidth}> | ||
| {label} | ||
| {required && ' *'} | ||
| </Grid.Col> | ||
| <Grid.Col sm={controlWidth}> | ||
| <select | ||
| id={input.name} | ||
| data-live-search={data_live_search} | ||
| className={`form-control ${input.name}_select`} | ||
| {...input} | ||
| > | ||
| <option disabled value=""> | ||
| {choose_text || `<${__('Choose')}>`} | ||
| </option> | ||
| {options.map(val => ( | ||
| <option value={val[option_key]} key={val[option_value]}> | ||
| {val[option_value]} | ||
| </option> | ||
| ))} | ||
| </select> | ||
| {visited && | ||
| !active && | ||
| error && <Form.HelpBlock>{error}</Form.HelpBlock>} | ||
| </Grid.Col> | ||
| </FormGroup> | ||
| ); | ||
| }; | ||
|
|
||
| render = () => { | ||
| const { render_within_form } = this.props; | ||
|
|
||
| if (render_within_form) { | ||
| return ( | ||
| <div> | ||
| <Form horizontal>{this.renderFormGroup(6, 4)}</Form> | ||
| </div> | ||
| ); | ||
| } | ||
| return this.renderFormGroup(2, 9); | ||
| }; | ||
| } | ||
|
|
||
| BootstrapSelect.propTypes = { | ||
| label: PropTypes.string, | ||
| input: PropTypes.object, | ||
| required: PropTypes.bool, | ||
| data_live_search: PropTypes.string, | ||
| type: PropTypes.string, | ||
| options: PropTypes.array, | ||
| option_key: PropTypes.string, | ||
| option_value: PropTypes.string, | ||
| meta: PropTypes.object, | ||
| form_name: PropTypes.string, | ||
| onSelect: PropTypes.func, | ||
| pre_selected_value: PropTypes.string, | ||
| choose_text: PropTypes.string, | ||
| render_within_form: PropTypes.string | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters