dce-reactkit 1.0.20 → 2.0.0

package/src-old/components/Wizard/Question/Form/Field/NumberItem.js

@@ -1,374 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import genUUID from 'uuid/v1';
-
-// Import bootstrap componenets
-import {
-  Input as BootstrapInput,
-  FormFeedback,
-  InputGroup,
-  InputGroupAddon,
-} from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-// Import other components
-import Field from '.';
-import Well from '../../../../Well';
-import Button from '../../../../Button';
-import RightAddonLayout from '../../../../Layout/RightAddon';
-
-// Import glyphs
-import Minus from '../../../../../glyphs/Minus';
-import Plus from '../../../../../glyphs/Plus';
-
-// Import helpers
-import isFloat from '../../../../../common/isFloat';
-import isInteger from '../../../../../common/isInteger';
-import math from '../../../../../common/math';
-
-class NumberItem extends Component {
-  constructor(props) {
-    super(props);
-
-    this.key = genUUID();
-
-    // Deconstruct props
-    const {
-      min,
-      max,
-      integer,
-      step,
-      onChange,
-      defaultNumber,
-    } = this.props;
-
-    // Determine step
-    this.step = step;
-    if (step === null) {
-      this.step = (
-        integer
-          ? 1
-          : 0.1
-      );
-    }
-
-    // Determine defaultNumber
-    this.defaultNumber = defaultNumber;
-    if (defaultNumber === null) {
-      this.defaultNumber = (
-        min !== null
-          ? min
-          : 0
-      );
-    }
-
-    // Create initial state
-    let value = defaultNumber;
-
-    // Apply min and max right away
-    if (min !== null && value < min) {
-      value = min;
-    }
-    if (max !== null && value > max) {
-      value = max;
-    }
-
-    const haltSubmit = false;
-    this.state = {
-      number: value,
-      string: String(value),
-      haltSubmit,
-    };
-
-    // Bind functions
-    this.onInputBlurred = this.onInputBlurred.bind(this);
-
-    // Update parent
-    onChange(value, haltSubmit);
-  }
-
-  onInputBlurred() {
-    // Deconstruct props
-    const {
-      min,
-      max,
-      integer,
-      numDecimals,
-      onChange,
-    } = this.props;
-
-    // Deconstruct state
-    let { string } = this.state;
-
-    let number = null;
-    let err = null;
-
-    // Check for empty field
-    if (!string || string.trim().length === 0) {
-      // Use the default number
-      number = this.defaultNumber;
-    // Validate number
-    } else if (integer) {
-      if (!isFloat(string)) {
-        err = 'This needs to be a valid number';
-      } else if (!isInteger(string)) {
-        err = 'This item only accepts whole numbers (integers)';
-      } else {
-        // Valid int! Parse it
-        number = parseInt(string);
-      }
-    } else if (!isFloat(string)) {
-      err = 'This needs to be a valid number';
-    } else {
-      // Valid float! Save it
-      number = parseFloat(string);
-    }
-
-    // Check min/max
-    if (number !== null) {
-      if (min !== null && number < min) {
-        err = `This number is smaller than the minimum (must be ${min} or larger)`;
-      }
-      if (max !== null && number > max) {
-        err = `This number is larger than the maximum (must be no greater than ${max})`;
-      }
-    }
-
-    // Number should be null if there's an error
-    if (err) {
-      number = null;
-    }
-
-    // Create string from number with appropriate number of decimals
-    if (number !== null) {
-      if (numDecimals !== null) {
-        string = String(number.toFixed(numDecimals));
-        number = parseFloat(string);
-      } else {
-        string = String(number);
-      }
-    }
-
-    // Update state
-    const haltSubmit = !!err;
-    this.setState({
-      number,
-      err,
-      haltSubmit,
-      string,
-    });
-
-    // Update handler
-    onChange(number, haltSubmit);
-  }
-
-  onButtonClicked(isAdder) {
-    // Deconstruct props
-    const { onChange } = this.props;
-
-    // Get current number
-    const { number } = this.state;
-    const newNumber = (
-      isAdder
-        ? math.add(number, this.step)
-        : math.sub(number, this.step)
-    );
-
-    // Update state
-    const haltSubmit = false;
-    this.setState({
-      haltSubmit,
-      err: null,
-      number: newNumber,
-      string: newNumber,
-    });
-
-    onChange(newNumber, haltSubmit);
-  }
-
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      name,
-      subtitle,
-      min,
-      max,
-      integer,
-      numDecimals,
-      children,
-    } = this.props;
-
-    // Deconstruct state
-    const {
-      number,
-      string,
-      haltSubmit,
-      err,
-    } = this.state;
-
-    // Determine the step size
-    let { step } = this.props;
-    if (step === null) {
-      step = (
-        integer
-          ? 1
-          : 0.1
-      );
-    }
-
-    // Disable adder and subtracter
-    let adderDisabled;
-    let subberDisabled;
-    if (number === null) {
-      adderDisabled = true;
-      subberDisabled = true;
-    } else {
-      adderDisabled = (
-        max !== null
-          ? number + step > max
-          : false
-      );
-      subberDisabled = (
-        min !== null
-          ? number - step < min
-          : false
-      );
-    }
-
-    // Create content
-    let content = children;
-    if (!content) {
-      if (title || subtitle) {
-        content = (
-          <div>
-            <h5
-              className="mb-0"
-            >
-              {title}
-            </h5>
-            {subtitle && (
-              <p className="mb-0 mt-2">{subtitle}</p>
-            )}
-          </div>
-        );
-      } else {
-        content = (
-          <h5>
-            Unnamed Item
-          </h5>
-        );
-      }
-    }
-
-    // Render the field
-    return (
-      <Field
-        name={name}
-      >
-        <Well
-          className={`p-2 border mb-0${haltSubmit ? ' border-danger' : ' border-secondary'}`}
-        >
-          <RightAddonLayout centerVertically>
-            {content}
-            <div className="text-nowrap">
-              <InputGroup>
-                <InputGroupAddon addonType="prepend">
-                  <Button
-                    color="info"
-                    disabled={subberDisabled}
-                    onClick={() => {
-                      this.onButtonClicked(false);
-                    }}
-                  >
-                    <Minus />
-                  </Button>
-                </InputGroupAddon>
-                <BootstrapInput
-                  value={string}
-                  className="border-info"
-                  placeholder={this.defaultNumber}
-                  bsSize="lg"
-                  style={{
-                    width: '5em',
-                  }}
-                  min={min}
-                  max={max}
-                  decimals={numDecimals}
-                  step={step}
-                  onChange={(event) => {
-                    // Update string in state
-                    this.setState({
-                      string: event.target.value,
-                    });
-                  }}
-                  onBlur={this.onInputBlurred}
-                />
-                <InputGroupAddon addonType="append">
-                  <Button
-                    color="info"
-                    disabled={adderDisabled}
-                    onClick={() => {
-                      this.onButtonClicked(true);
-                    }}
-                  >
-                    <Plus />
-                  </Button>
-                </InputGroupAddon>
-              </InputGroup>
-            </div>
-          </RightAddonLayout>
-        </Well>
-        <FormFeedback
-          className={haltSubmit ? 'd-block' : null}
-        >
-          {err}
-        </FormFeedback>
-      </Field>
-    );
-  }
-}
-
-NumberItem.propTypes = {
-  /* Title of the number item (replaced by children if children are included) */
-  title: PropTypes.string,
-  /* The field name (to be used as a key in the form) */
-  name: PropTypes.string.isRequired,
-  /* Subtitle of the item (replaced by children if children are included) */
-  subtitle: PropTypes.string,
-  /* Minimum allowed number */
-  min: PropTypes.number,
-  /* Maximum allowed number */
-  max: PropTypes.number,
-  /* Increment step (for when + or - are clicked) */
-  step: PropTypes.number,
-  /* Handler to call when number is changed */
-  onChange: PropTypes.func,
-  /* Default value of the number field (reverts to this if field is emptied) */
-  defaultNumber: PropTypes.number,
-  /* If true, only integers are allowed */
-  integer: PropTypes.bool,
-  /* The number of decimals to display and round to */
-  numDecimals: PropTypes.number,
-  /* The children of this component (displayed as content) */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-};
-
-NumberItem.defaultProps = {
-  title: null,
-  subtitle: null,
-  min: null,
-  max: null,
-  step: null,
-  onChange: () => {},
-  defaultNumber: null,
-  integer: false,
-  numDecimals: null,
-  children: null,
-};
-
-export default NumberItem;

package/src-old/components/Wizard/Question/Form/Field/index.js

@@ -1,34 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-class Field extends Component {
-  render() {
-    // Deconstruct props
-    const {
-      name,
-      children,
-    } = this.props;
-
-    // Render a chooser
-    return (
-      <div
-        key={name}
-        className="mb-2"
-      >
-        {children}
-      </div>
-    );
-  }
-}
-
-Field.propTypes = {
-  /* The field name (to be used as a key in the form) */
-  name: PropTypes.string.isRequired,
-  /* The children of this component */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-};
-
-export default Field;

package/src-old/components/Wizard/Question/Form/Field/readme.md

@@ -1,7 +0,0 @@
-Also, every Field component must have a property called `name`.
-
-Each field must call its own `props.onChange(answer, haltSubmit)` function when its value is changed
-
-- haltSubmit = true if the submit button should be disabled (this field is not valid)
-
-Upon creation, send an onChange update!

package/src-old/components/Wizard/Question/Form/index.js

@@ -1,175 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import custom styles
-import './style.css';
-
-// Import other components
-import Question from '..';
-import Button from '../../../Button';
-
-const SUBMIT_ERROR_TIMEOUT = 2000; // ms to show submit button error
-
-/**
- * onAnswered is called with the following:
- * {
- *   <form field name>: <form field value>,
- *   ...
- * }
- */
-
-class Form extends Component {
-  constructor(props) {
-    super(props);
-
-    // Initialize state
-    this.state = {
-      answerMap: {}, // field name => answer of field
-      haltSubmitMap: {}, // field name => true/false (field is halting submit)
-      submitButtonError: false,
-    };
-
-    // Bind functions
-    this.onSubmitClicked = this.onSubmitClicked.bind(this);
-  }
-
-  onSubmitClicked() {
-    // Deconstruct props
-    const { onAnswered } = this.props;
-
-    // Deconstruct state
-    const {
-      answerMap,
-      haltSubmitMap,
-    } = this.state;
-
-    // Halt submission
-    const haltSubmit = Object.values(haltSubmitMap).some((x) => { return x; });
-    if (haltSubmit) {
-      // Turn the submit button red for some time
-      this.setState({
-        submitButtonError: true,
-      });
-      setTimeout(() => {
-        this.setState({
-          submitButtonError: false,
-        });
-      }, SUBMIT_ERROR_TIMEOUT);
-      return;
-    }
-    this.setState({
-      submitButtonError: false,
-    });
-
-    // Call handler
-    onAnswered(answerMap);
-  }
-
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      subtitle,
-      submitColor,
-      submitTitle,
-    } = this.props;
-
-    // Turn children into an array if it isn't already
-    let { children } = this.props;
-    if (!Array.isArray(children)) {
-      children = [children];
-    }
-
-    // Deconstruct state
-    const {
-      submitButtonError,
-    } = this.state;
-
-    // Wrap form fields
-    const wrappedChildren = children.map((child) => {
-      if (!child.props) {
-        return child;
-      }
-      const childOnChange = child.props.onChange;
-      return React.cloneElement(child, {
-        onChange: (answer, haltSubmit) => {
-          // Call child's onChange handler
-          if (childOnChange) {
-            childOnChange(answer, haltSubmit);
-          }
-
-          // Update form results
-          const {
-            answerMap,
-            haltSubmitMap,
-          } = this.state;
-          answerMap[child.props.name] = answer;
-          haltSubmitMap[child.props.name] = haltSubmit;
-          this.setState({
-            answerMap,
-            haltSubmitMap,
-          });
-        },
-        key: child.props.name,
-      });
-    });
-
-    // Create submit button
-    const submitButton = (
-      <Button
-        text={(
-          submitButtonError
-            ? 'Fix Issues Above First'
-            : submitTitle
-        )}
-        disabled={submitButtonError}
-        color={(
-          submitButtonError
-            ? 'danger'
-            : submitColor
-        )}
-        onClick={this.onSubmitClicked}
-        block
-      />
-    );
-
-    // Render a chooser
-    return (
-      <Question
-        title={title}
-        subtitle={subtitle}
-      >
-        {wrappedChildren}
-        {submitButton}
-      </Question>
-    );
-  }
-}
-
-Form.propTypes = {
-  /* The title of the form */
-  title: PropTypes.string,
-  /* The subtitle of the form */
-  subtitle: PropTypes.string,
-  /* The title of the submit button */
-  submitTitle: PropTypes.string,
-  /* The color of the submit button */
-  submitColor: PropTypes.string,
-  /* Handler to call when the form is submitted */
-  onAnswered: PropTypes.func,
-  /* The children of this component */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-};
-
-Form.defaultProps = {
-  title: 'Please Complete this Form:',
-  subtitle: null,
-  submitTitle: 'Continue',
-  submitColor: 'info',
-  onAnswered: () => {},
-};
-
-export default Form;

package/src-old/components/Wizard/Question/Form/style.css

@@ -1,3 +0,0 @@
-.submit-error {
-  background-color: red;
-}

package/src-old/components/Wizard/Question/OneButton.js

@@ -1,80 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import other components
-import Question from '.';
-import Button from '../../Button';
-
-/**
- * onAnswered is called with the following:
- * {
- *   true
- * }
- */
-
-class OneButton extends Component {
-  constructor(props) {
-    super(props);
-
-    this.onAddClicked = this.onAddClicked.bind(this);
-  }
-
-  onAddClicked() {
-    // Deconstruct props
-    const { onAnswered } = this.props;
-
-    if (onAnswered) {
-      onAnswered(true);
-    }
-  }
-
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      subtitle,
-      buttonTitle,
-      buttonColor,
-    } = this.props;
-
-    // Render a chooser
-    return (
-      <Question
-        title={title}
-        subtitle={subtitle}
-      >
-        <Button
-          text={buttonTitle}
-          color={buttonColor}
-          size="lg"
-          block
-          onClick={() => {
-            this.onAddClicked();
-          }}
-        />
-      </Question>
-    );
-  }
-}
-
-OneButton.propTypes = {
-  /* The title of the question */
-  title: PropTypes.string,
-  /* The subtitle of the question */
-  subtitle: PropTypes.string,
-  /* The title of the button to click */
-  buttonTitle: PropTypes.string,
-  /* The color of the button to click */
-  buttonColor: PropTypes.string,
-  /* Function to call when button is clicked */
-  onAnswered: PropTypes.func.isRequired,
-};
-
-OneButton.defaultProps = {
-  title: 'Click to continue:',
-  subtitle: null,
-  buttonTitle: 'Click Here',
-  buttonColor: 'info',
-};
-
-export default OneButton;

package/src-old/components/Wizard/Question/index.js

@@ -1,46 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import other components
-import Card from '../../Card';
-
-class Question extends Component {
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      subtitle,
-      children,
-    } = this.props;
-
-    // Render a chooser
-    return (
-      <Card
-        title={title}
-        subtitle={subtitle}
-        className="mb-2"
-      >
-        {children}
-      </Card>
-    );
-  }
-}
-
-Question.propTypes = {
-  /* The question title */
-  title: PropTypes.string,
-  /* The subtitle of the question */
-  subtitle: PropTypes.string,
-  /* The children of this question (displayed in the body) */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-};
-
-Question.defaultProps = {
-  title: 'Please complete the following to continue',
-  subtitle: null,
-};
-
-export default Question;