{"size": 823, "ext": "js", "max_stars_repo_path": "src/components/KeywordSearch/index.js", "max_stars_repo_name": "shhhplus/antd-console-components", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/KeywordSearch/index.js", "max_issues_repo_name": "shhhplus/antd-console-components", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/KeywordSearch/index.js", "max_forks_repo_name": "shhhplus/antd-console-components", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.6578947368, "max_line_length": 72, "alphanum_fraction": 0.5358444714}
import React, { useEffect, useState } from 'react';
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import styles from './index.module.scss';

export default ({
  left,
  value,
  onChange,
  onSubmit,
  placeholder = '请输入关键字搜索',
}) => {
  const [val, setVal] = useState(value);

  useEffect(() => {
    setVal(value);
  }, [value]);

  return (
    <div className={styles['container']}>
      <div>{left}</div>
      <Input
        value={val}
        onChange={(e) => {
          const value = e.target.value;
          setVal(value);
          onChange && onChange(value);
        }}
        placeholder={placeholder}
        onPressEnter={(e) => {
          onSubmit(val);
        }}
        prefix={<SearchOutlined style={{ color: 'rgba(0,0,0,.25)' }} />}
      />
    </div>
  );
};
