zipkin-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From GitBox <...@apache.org>
Subject [GitHub] [incubator-zipkin] tacigar commented on a change in pull request #2633: [WIP] Use Material-UI for GlobalSearch component
Date Wed, 19 Jun 2019 03:21:59 GMT
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:
   `connect` connects between React and Redux state system.
   We need execute `connect` when access states and dispatcher managed by Redux in React components.
   
   ---
   
   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:
users@infra.apache.org


With regards,
Apache Git Services

Mime
View raw message