wix-style-react/src/Range/test/RangeTemplate.js

wix-style-react

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Range from '..';
import DatePicker from '../../DatePicker';
import Input from '../../Input';
import Text from '../../Text';

export default class Form extends Component {
  static propTypes = {
    onChange: PropTypes.func.isRequired,
    withLabel: PropTypes.bool,
    label: PropTypes.object,
    firstInput: PropTypes.object,
    lastInput: PropTypes.object,
    firstDate: PropTypes.object,
    lastDate: PropTypes.object,
    required: PropTypes.bool,
    info: PropTypes.string,
    rangeType: PropTypes.object,
    dataHook: PropTypes.string,
  };

  componentDidUpdate(props) {
    props.onChange(() => {});
  }

  componentDidMount() {
    this.props.onChange(() => {});
  }

  getComponent() {
    return (
      <Range
        dataHook={this.props.dataHook}
        required={this.props.required}
        info={this.props.info}
      >
        {this.props.withLabel ? (
          <Text tagName="label">{this.props.label}</Text>
        ) : null}
        {this.props.rangeType.value === 'InputRange' ? (
          <Input dataHook="first-item" id="first" {...this.props.firstInput} />
        ) : (
          <DatePicker
            dataHook="first-item"
            placeholderText="From"
            id="fromDate"
            {...this.props.firstDate}
          />
        )}
        {this.props.rangeType.value === 'InputRange' ? (
          <Input dataHook="last-item" id="last" {...this.props.lastInput} />
        ) : (
          <DatePicker
            dataHook="last-item"
            placeholderText="To"
            id="toDate"
            {...this.props.lastDate}
          />
        )}
      </Range>
    );
  }

  render() {
    return this.getComponent();
  }
}