{"size": 3762, "ext": "js", "max_stars_repo_path": "dialog-component-explorer/src/components/SettingsDialogSize.js", "max_stars_repo_name": "damato3/react-native-dialog-component", "max_stars_repo_stars_event_min_datetime": "2017-01-29T09:03:55.000Z", "max_stars_repo_stars_event_max_datetime": "2020-11-12T09:04:15.000Z", "max_issues_repo_path": "dialog-component-explorer/src/components/SettingsDialogSize.js", "max_issues_repo_name": "damato3/react-native-dialog-component", "max_issues_repo_issues_event_min_datetime": "2017-02-04T21:17:48.000Z", "max_issues_repo_issues_event_max_datetime": "2021-04-20T15:51:24.000Z", "max_forks_repo_path": "dialog-component-explorer/src/components/SettingsDialogSize.js", "max_forks_repo_name": "damato3/react-native-dialog-component", "max_forks_repo_forks_event_min_datetime": "2017-02-04T10:46:42.000Z", "max_forks_repo_forks_event_max_datetime": "2021-01-12T20:22:00.000Z"}
{"max_stars_count": 87, "max_issues_count": 18, "max_forks_count": 38, "avg_line_length": 24.4285714286, "max_line_length": 81, "alphanum_fraction": 0.5909090909}
// @flow

import React, { Component } from 'react';
import { View, Text, Slider, Switch, Dimensions } from 'react-native';
import _ from 'lodash';
import Section from './Section';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

type Props = {
  onSettingsUpdated: Function;
  autoDialogSize: boolean;
  dialogSizeWithPercentage: boolean;
  width: number;
  height: number;
}

export default class SettingsDialogSize extends Component {
  props: Props;

  static defaultProps = {
    onSettingsUpdated: () => null,
    autoDialogSize: true,
    dialogSizeWithPercentage: false,
    width: screenWidth,
    height: 300,
  }

  constructor(props) {
    super(props);

    this.state = {
      autoDialogSize: props.autoDialogSize,
      dialogSizeWithPercentage: props.dialogSizeWithPercentage,
      width: props.width,
      height: props.height,
    };

    this.autoDialogSizeSwitchChange = this.autoDialogSizeSwitchChange.bind(this);
    this.dialogSizeSwitchChange = this.dialogSizeSwitchChange.bind(this);
    this.widthChange = this.widthChange.bind(this);
    this.heightChange = this.heightChange.bind(this);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return (!_.isEqual(this.state, nextState));
  }

  componentDidUpdate() {
    this.props.onSettingsUpdated({ ...this.state });
  }

  autoDialogSizeSwitchChange(value) {
    this.setState({ autoDialogSize: value });
    if (value) {
      this.setState({
        width: null,
        height: null,
      });
    }
  }

  dialogSizeSwitchChange(value) {
    const isPercentage = value;
    let { width, height } = this.state;

    width = isPercentage ? (width / screenWidth) : (width * screenWidth);
    height = isPercentage ? (height / screenHeight) : (height * screenHeight);

    this.setState({
      dialogSizeWithPercentage: value,
      width,
      height,
    });
  }

  widthChange(value) {
    this.setState({ width: value });
  }

  heightChange(value) {
    this.setState({ height: value });
  }

  render() {
    let percentageSwitch;
    let widthSlider;
    let heightSlider;

    const isPercentage = this.state.dialogSizeWithPercentage;

    if (!this.state.autoDialogSize) {
      percentageSwitch = (
        <View>
          <Switch
            onValueChange={this.dialogSizeSwitchChange}
            value={this.state.dialogSizeWithPercentage}
          />
          <Text>
            Use Percentage: {`${this.state.dialogSizeWithPercentage}`}
          </Text>
        </View>
      );

      widthSlider = (
        <View>
          <Slider
            step={isPercentage ? 0.1 : 1}
            value={this.state.width}
            minimumValue={isPercentage ? 0.1 : 1}
            maximumValue={isPercentage ? 1.0 : screenWidth}
            onValueChange={this.widthChange}
          />
          <Text>
            Dialog Width: {this.state.width}
          </Text>
        </View>
      );
      heightSlider = (
        <View>
          <Slider
            step={isPercentage ? 0.1 : 1}
            value={this.state.height}
            minimumValue={isPercentage ? 0.1 : 1}
            maximumValue={isPercentage ? 1.0 : screenHeight}
            onValueChange={this.heightChange}
          />
          <Text>
            Dialog Height: {this.state.height}
          </Text>
        </View>
      );
    }

    return (
      <Section title="Dialog Size">
        <View>
          <Switch
            onValueChange={this.autoDialogSizeSwitchChange}
            value={this.state.autoDialogSize}
          />
          <Text>
            Auto Size: {`${this.state.autoDialogSize}`}
          </Text>

          {percentageSwitch}
          {widthSlider}
          {heightSlider}
        </View>
      </Section>
    );
  }
}
