Gecko [ gandhischool.edu.np ]

Name	Size	Permission	Action
index.css	1.34 KB	-rw-rw-r--
index.tsx	3.53 KB	-rw-rw-r--

Code Editor : index.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch, Action } from 'redux';
import { actions as commonActions } from 'containers/dashboard/store/common/actions';
import Autosuggest from 'react-autosuggest';
import { debounce } from 'throttle-debounce';
import './index.css';
export interface IndexProps {
  data?: any;
  handleSubmit?: any;
  loading?: boolean;
  placeholder?: any;
  getSuggestion?: any;
  autoSuggest?: any;
  onChange?: any;
  id: string;
  value?: string;
  searchSlug: string;
  searchCharCount?: number;
}

export interface IndexState {
  [key: string]: any;
  value: string;
  suggestions: any;
}

let valueColumn = 'value';
let displayColumn = 'label';
class Index extends React.Component<IndexProps, IndexState> {
  public constructor(props: any) {
    super(props);
    this.state = {
      value: this.props.value || '',
      suggestions: [],
      field_name: this.props.id,
    };
  }

public componentWillMount() {
    this.onSuggestionsFetchRequested = debounce(
      500,
      this.onSuggestionsFetchRequested,
    );
  }

public renderSuggestion = suggestion => {
    return (
      <div className="result">
        <div>{suggestion[displayColumn]}</div>
        {/* <div className="shortCode">{suggestion}</div> */}
      </div>
    );
  };

public handleChange = (_, { newValue }) => {
    const { id, onChange } = this.props;
    this.setState({
      value: newValue,
      field_name: id,
    });
    // onChange(id, newValue[valueColumn], newValue.id);
    onChange(id, newValue);
  };

public onSuggestionSelected = (
    event,
    { suggestion, suggestionValue, index, method },
  ) => {
    event.preventDefault();
    this.setState({ value: suggestion[valueColumn] });
  };

public onSuggestionsFetchRequested = ({ value }) => {
    const { searchSlug } = this.props;
    let url = `?search_slug=${searchSlug}&value=${value}`;
    this.props.getSuggestion(url);
  };

public onSuggestionsClearRequested = () => {
    this.setState({ suggestions: [] });
  };

public componentDidUpdate(prevProps) {
    const { autoSuggest } = this.props;
    if (prevProps.autoSuggest != autoSuggest && autoSuggest) {
      // if (autoSuggest) {
      //   const results = autoSuggest.map(h => h['name']);
      //   this.setState({ suggestions: results });
      // }
      this.setState({ suggestions: autoSuggest });
    }
  }

public render() {
    const { id, placeholder, searchCharCount } = this.props;
    const { suggestions, value } = this.state;
    const inputProps = {
      placeholder,
      value,
      onChange: this.handleChange,
    };

const length = searchCharCount ? searchCharCount : 1;

return (
      <Autosuggest
        id={id}
        focusFirstSuggestion
        onSuggestionSelected={this.onSuggestionSelected}
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
        onSuggestionsClearRequested={this.onSuggestionsClearRequested}
        getSuggestionValue={suggestion => suggestion}
        renderSuggestion={this.renderSuggestion}
        shouldRenderSuggestions={v => v.trim().length >= length}
        focusInputOnSuggestionClick={false}
        highlightFirstSuggestion={true}
        inputProps={inputProps}
      />
    );
  }
}

const mapStateToProps = state => ({
  autoSuggest: state.common.getResponse,
});

const mapDispatchToProps = (dispatch: Dispatch<Action>) => ({
  getSuggestion: (data: any) => dispatch(commonActions.getAutoSuggest(data)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Index);

${this.title}

Code Editor : index.tsx