<commit_before>import {PropTypes} from 'react';
import DateTimePicker from './index';

export default function Period(props) {
  const {
    style, className, key, value, onChange,
    connector, format, limit, startEndOf, inputIconClass
  } = props;
  return (
    <div key={key} className={`period ${className || ''}`} style={style}>
      <DateTimePicker
        inputIconClass={inputIconClass}
        format={format}
        value={value.start}
        startOf={startEndOf}
        limit={{max: value.end, min: limit.min}}
        onChange={(v) => {
          value.start = v;
          onChange(value);
        }}
      />
      <span className='period__to'>{connector}</span>
      <DateTimePicker
        inputIconClass={inputIconClass}
        format={format}
        value={value.end}
        endOf={startEndOf}
        limit={{min: value.start, max: limit.max}}
        onChange={(v) => {
          value.end = v;
          onChange(value);
        }}
      />
    </div>
  );
}

Period.propTypes = {
  key: PropTypes.string,
  value: PropTypes.object,
  className: PropTypes.string,
  style: PropTypes.object,
  format: PropTypes.string,
  connector: PropTypes.any,
  onChange: PropTypes.func,
  startEndOf: PropTypes.bool,
  limit: PropTypes.object,
  inputIconClass: PropTypes.string
};

Period.defaultProps = {
  value: {},
  connector: '-',
  inputIconClass: '',
  limit: {}
};<commit_msg>Period: add clearable prop<commit_after>import {PropTypes} from 'react';
import DateTimePicker from './index';

export default function Period(props) {
  const {
    style, className, key, value, onChange, clearable,
    connector, format, limit, startEndOf, inputIconClass
  } = props;
  return (
    <div key={key} className={`period ${className || ''}`} style={style}>
      <DateTimePicker
        inputIconClass={inputIconClass}
        format={format}
        value={value.start}
        clearable={clearable}
        startOf={startEndOf}
        limit={{max: value.end, min: limit.min}}
        onChange={(v) => {
          value.start = v;
          onChange(value);
        }}
      />
      <span className='period__to'>{connector}</span>
      <DateTimePicker
        inputIconClass={inputIconClass}
        format={format}
        value={value.end}
        clearable={clearable}
        endOf={startEndOf}
        limit={{min: value.start, max: limit.max}}
        onChange={(v) => {
          value.end = v;
          onChange(value);
        }}
      />
    </div>
  );
}

Period.propTypes = {
  key: PropTypes.string,
  value: PropTypes.object,
  className: PropTypes.string,
  style: PropTypes.object,
  format: PropTypes.string,
  connector: PropTypes.any,
  onChange: PropTypes.func,
  startEndOf: PropTypes.bool,
  limit: PropTypes.object,
  clearable: PropTypes.bool,
  inputIconClass: PropTypes.string
};

Period.defaultProps = {
  value: {},
  connector: '-',
  inputIconClass: '',
  limit: {}
};
{'fraction_non_alphanumeric': 0.14266164899076292, 'fraction_numerical': 0.0, 'mean_word_length': 2.739130434782609, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2585884', 'n_tokens_mistral': 870, 'n_tokens_neox': 902, 'n_words': 178}