tacigar commented on a change in pull request #2633: [WIP] Use Material-UI for GlobalSearch component URL: https://github.com/apache/incubator-zipkin/pull/2633#discussion_r295106528
########## File path: zipkin-lens/src/components/GlobalSearch/GlobalSearchConditionKey.jsx ########## @@ -0,0 +1,140 @@ +/* + * Copyright 2015-2019 The OpenZipkin Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + */ +import PropTypes from 'prop-types'; +import React from 'react'; +import { connect } from 'react-redux'; +import ReactSelect from 'react-select'; + +import { buildConditionKeyOptions } from './util'; +import { globalSearchConditionsPropTypes } from '../../prop-types'; +import * as globalSearchActionCreators from '../../actions/global-search-action'; +import * as autocompleteValuesActionCreators from '../../actions/autocomplete-values-action'; +import { theme } from '../../colors'; + +const propTypes = { + autocompleteKeys: PropTypes.arrayOf(PropTypes.string).isRequired, + conditionIndex: PropTypes.number.isRequired, + conditions: globalSearchConditionsPropTypes.isRequired, + isFocused: PropTypes.bool.isRequired, + onFocus: PropTypes.func.isRequired, + onBlur: PropTypes.func.isRequired, + onChange: PropTypes.func.isRequired, + fetchAutocompleteValues: PropTypes.func.isRequired, +}; + +const GlobalSearchConditionKey = ({ + autocompleteKeys, + conditionIndex, + conditions, + isFocused, + onFocus, + onBlur, + onChange, + fetchAutocompleteValues, +}) => { + const { key: conditionKey } = conditions[conditionIndex]; + + const handleKeyChange = (selected) => { + const key = selected.value; + onChange(conditionIndex, key); + if (autocompleteKeys.includes(key)) { + fetchAutocompleteValues(key); + } + }; + + const options = buildConditionKeyOptions( + conditionKey, + conditions, + autocompleteKeys, + ).map(opt => ({ + value: opt.conditionKey, + label: opt.conditionKey, + isDisabled: opt.isDisabled, + })); + + const styles = { + control: base => ({ + ...base, + width: isFocused + ? '15rem' + : '12rem', + height: '2.4rem', + minHeight: '2.4rem', + border: 0, + borderTopLeftRadius: '0.2rem', + borderTopRightRadius: 0, + borderBottomLeftRadius: '0.2rem', + borderBottomRightRadius: 0, + backgroundColor: isFocused ? theme.palette.primary.dark : theme.palette.primary.main, + '&:hover': { + backgroundColor: theme.palette.primary.dark, + }, + cursor: 'pointer', + }), + menuPortal: base => ({ + ...base, + zIndex: 10000, + width: '15rem', + }), + singleValue: base => ({ + ...base, + color: theme.palette.primary.contrastText, + }), + indicatorsContainer: base => ({ + ...base, + display: 'none', + }), + input: base => ({ + ...base, + color: theme.palette.primary.contrastText, + }), + }; + + return ( + <ReactSelect + autoFocus + isSearchable={false} + value={{ value: conditionKey, label: conditionKey }} + options={options} + onFocus={onFocus} + onBlur={onBlur} + onChange={handleKeyChange} + styles={styles} + defaultMenuIsOpen + backspaceRemovesValue + /> + ); +}; + +GlobalSearchConditionKey.propTypes = propTypes; + +const mapStateToProps = state => ({ + autocompleteKeys: state.autocompleteKeys.autocompleteKeys, + conditions: state.globalSearch.conditions, +}); + +const mapDispatchToProps = (dispatch) => { + const { changeConditionKey } = globalSearchActionCreators; + const { fetchAutocompleteValues } = autocompleteValuesActionCreators; + + return { + onChange: (idx, key) => dispatch(changeConditionKey(idx, key)), + fetchAutocompleteValues: key => dispatch(fetchAutocompleteValues(key)), + }; +}; + +export default connect( Review comment: Before, `connect` was executed in the other files. In other words, I placed Presentation components and Container components in separate files. The directory structure was as follows. ``` src/ |- components/ | |- GlobalSearch/ | |- GlobalSearch.jsx |- containers/ |- GlobalSearch/ |- GlobalSearchContainer.jsx <- execute connect(mapStateToProps, mapDispatchToProps)(GlobalSearch) ``` I did so because such a method was taken in the redux tutorial which I read. But, I think this method is redundant now, so I decided to remove `containers` directory and execute `connect` in `components` directory. In the some famous products written in React, I confirmed that `connect` is executed this way. ---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services
