dce-reactkit 1.0.20 → 2.0.0

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

@@ -1,10 +0,0 @@
-Each question must have the following properties:
-
-```js
-{
-  onAnswered,
-  questionKey,
-}
-```
-
-Each question must at least look like a Question component.

package/src-old/components/Wizard/QuestionGroup/AnswerAll.js

@@ -1,126 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import glyphs
-import Check from '../../../glyphs/Check';
-
-// Import other components
-import Question from '../Question';
-import Button from '../../Button';
-
-/**
- * onAnswered is called with the following:
- * {
- *   questionKey: answer from question,
- *   ...
- * }
- */
-
-class AnswerAll extends Component {
-  constructor(props) {
-    super(props);
-
-    // Initialize state
-    this.state = {
-      answerMap: {},
-      answeredMap: {}, // questionKey => true if answered
-    };
-  }
-
-  render() {
-    // Deconstruct state
-    const { answeredMap } = this.state;
-
-    // Deconstruct props
-    const {
-      onAnswered,
-    } = this.props;
-
-    // Turn children into an array if it isn't already
-    let { children } = this.props;
-    if (!Array.isArray(children)) {
-      children = [children];
-    }
-
-    // Wrap children so that if any child answers a question, our onAnswered is
-    // called
-    const wrappedChildren = children.map((child) => {
-      const childOnAnswered = child.props.onAnswered;
-      if (answeredMap[child.props.questionKey]) {
-        // This is an answered question. Make it smaller
-        return (
-          <Question
-            title={child.props.title}
-            subtitle={child.props.subtitle}
-          >
-            <div className="text-center text-success">
-              <h2>
-                <Check className="mr-2" />
-                Done
-              </h2>
-              <Button
-                text="Change Response"
-                onClick={() => {
-                  answeredMap[child.props.questionKey] = false;
-                  this.setState({
-                    answeredMap,
-                  });
-                }}
-              />
-            </div>
-          </Question>
-        );
-      }
-      const wrappedChild = React.cloneElement(child, {
-        onAnswered: (childAnswer) => {
-          // Call child's onAnswered handler
-          if (childOnAnswered) {
-            childOnAnswered(childAnswer);
-          }
-
-          // Update state
-          const {
-            answerMap,
-          } = this.state;
-          answerMap[child.props.questionKey] = childAnswer;
-          answeredMap[child.props.questionKey] = true;
-          this.setState({
-            answerMap,
-            answeredMap,
-          });
-
-          // Call AnswerAll's onAnswered handler if all answers are in
-          const numAnswered = (
-            Object.values(answeredMap)
-              .map((x) => { return (x ? 1 : 0); })
-              .reduce((total, x) => { return total + x; })
-          );
-          const allAnswered = (numAnswered === children.length);
-          if (allAnswered) {
-            onAnswered(answerMap);
-          }
-        },
-        key: child.props.questionKey,
-      });
-      return wrappedChild;
-    });
-
-    return (
-      <div>
-        {wrappedChildren}
-      </div>
-    );
-  }
-}
-
-AnswerAll.propTypes = {
-  /* A function to call when the one of the questions is answered */
-  onAnswered: PropTypes.func.isRequired,
-  /* The children of this component (must be questions) */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-};
-
-export default AnswerAll;

package/src-old/components/Wizard/QuestionGroup/AnswerAny.js

@@ -1,60 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/**
- * onAnswered is called with the following:
- * {
- *   questionKey: answer from the question that was answered
- * }
- */
-
-class AnswerAny extends Component {
-  render() {
-    // Deconstruct state
-    const {
-      onAnswered,
-      children,
-    } = this.props;
-
-    // Wrap children so that if any child answers a question, our onAnswered is
-    // called
-    const wrappedChildren = children.map((child) => {
-      const childOnAnswered = child.props.onAnswered;
-      const wrappedChild = React.cloneElement(child, {
-        onAnswered: (childAnswer) => {
-          // Call child's onAnswered handler
-          if (childOnAnswered) {
-            childOnAnswered(childAnswer);
-          }
-
-          // Call AnswerAny's onAnswered handler
-          if (onAnswered) {
-            const answer = {};
-            answer[child.props.questionKey] = childAnswer;
-            onAnswered(answer);
-          }
-        },
-        key: child.props.questionKey,
-      });
-      return wrappedChild;
-    });
-
-    return (
-      <div>
-        {wrappedChildren}
-      </div>
-    );
-  }
-}
-
-AnswerAny.propTypes = {
-  /* A function to call when the one of the questions is answered */
-  onAnswered: PropTypes.func.isRequired,
-  /* The children of this component (must be questions) */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-};
-
-export default AnswerAny;

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

@@ -1,233 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import bootstrap components
-import {
-  Pagination,
-  PaginationItem,
-  PaginationLink,
-} from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-// Import custom styles
-import './style.css';
-
-// Import other components
-import Alert from '../Alert';
-
-// Import glyphs
-import Ellipsis from '../../glyphs/Ellipsis';
-
-class Wizard extends Component {
-  constructor(props) {
-    super(props);
-
-    // Initialize state
-    this.state = {
-      currentStep: 0,
-      results: {},
-    };
-  }
-
-  render() {
-    // Deconstruct state
-    const {
-      currentStep,
-      results,
-    } = this.state;
-
-    // Deconstruct props
-    const {
-      title,
-      subtitle,
-      color,
-      onFinish,
-    } = this.props;
-
-    // Turn children into an array if it isn't already
-    let { children } = this.props;
-    if (!Array.isArray(children)) {
-      children = [children];
-    }
-
-    // Pre-process and wrap child
-    const currQuestion = children[currentStep];
-    const originalOnAnswered = currQuestion.props.onAnswered;
-    const wrappedChild = React.cloneElement(currQuestion, {
-      onAnswered: (answer) => {
-        // Call original onChoose listener
-        if (originalOnAnswered) {
-          originalOnAnswered(answer);
-        }
-
-        // Record answer
-        results[currQuestion.props.questionKey] = answer;
-
-        // Finish (if done)
-        if (currentStep === children.length - 1) {
-          // Done!
-          if (onFinish) {
-            onFinish(results);
-          }
-          return;
-        }
-
-        // Advance to the next step
-        this.setState({
-          currentStep: currentStep + 1,
-          results,
-        });
-      },
-    });
-
-    // Create breadcrumbs (pages)
-    const breadcrumbs = [];
-    // Show 4 steps at maximum
-    // > Create a function that turns a child into a page item
-    const childToPage = (child, index) => {
-      let buttonTitle = 'Complete this step to advance';
-      if (index < currentStep) {
-        buttonTitle = 'Back to this step';
-      } else if (index > currentStep) {
-        buttonTitle = 'Complete previous steps to advance';
-      } else if (
-        (index === currentStep)
-        && (index === children.length - 1)
-      ) {
-        buttonTitle = 'Complete this step to finish';
-      }
-      return (
-        <PaginationItem
-          disabled={index > currentStep}
-          className={(index > currentStep ? 'faded-item' : null)}
-          title={buttonTitle}
-        >
-          <PaginationLink
-            href="#"
-            className={(index === currentStep ? 'active-link' : 'inactive-link')}
-            onClick={() => {
-              if (index !== currentStep) {
-                // Update current step (jump back in the chain)
-                this.setState({
-                  currentStep: index,
-                });
-              }
-            }}
-          >
-            {child.props.stepTitle || `Step ${index + 1}`}
-          </PaginationLink>
-        </PaginationItem>
-      );
-    };
-    const leavingOutSteps = (children.length > 4);
-    let firstStepInBlock = 0;
-    let lastStepInBlock = children.length - 1;
-    if (leavingOutSteps) {
-      if (currentStep === children.length - 1) {
-        // On the last step
-        firstStepInBlock = Math.max(currentStep - 3, 0);
-        lastStepInBlock = currentStep;
-      } else if (currentStep === 0) {
-        // On the first step
-        firstStepInBlock = 0;
-        lastStepInBlock = 2;
-      } else {
-        // On a middle step
-        firstStepInBlock = currentStep - 1;
-        lastStepInBlock = currentStep + 1;
-      }
-    }
-    // Add start ellipses
-    if (firstStepInBlock > 0) {
-      // Skipping at least one child
-      // > Add initial child (for start over)
-      breadcrumbs.push(childToPage(children[0], 0));
-      // > Add '...'
-      breadcrumbs.push((
-        <PaginationItem
-          style={{ opacity: 0.7 }}
-          disabled
-        >
-          <PaginationLink>
-            <Ellipsis
-              style={{ color: '#aaa' }}
-            />
-          </PaginationLink>
-        </PaginationItem>
-      ));
-    }
-    // Add block of steps
-    for (let i = firstStepInBlock; i <= lastStepInBlock; i++) {
-      breadcrumbs.push(childToPage(children[i], i));
-    }
-    // Add end ellipses
-    if (lastStepInBlock < children.length - 1) {
-      // > Add '...'
-      breadcrumbs.push((
-        <PaginationItem
-          style={{ opacity: 0.7 }}
-          disabled
-        >
-          <PaginationLink>
-            <Ellipsis
-              style={{ color: '#aaa' }}
-            />
-          </PaginationLink>
-        </PaginationItem>
-      ));
-    }
-
-    // Render wizard
-    return (
-      <Alert
-        color={color}
-        className="mb-2 pb-0 text-center"
-      >
-        <h4>
-          {title}
-        </h4>
-        {subtitle && (
-          <div>
-            {subtitle}
-          </div>
-        )}
-        <Pagination
-          style={{
-            justifyContent: 'center',
-            whiteSpace: 'nowrap',
-          }}
-          className="mb-0"
-          aria-label="Steps navigator"
-        >
-          {breadcrumbs}
-        </Pagination>
-        {wrappedChild}
-      </Alert>
-    );
-  }
-}
-
-Wizard.propTypes = {
-  /* Title of the wizard */
-  title: PropTypes.string,
-  /* Subtitle of the wizard */
-  subtitle: PropTypes.string,
-  /* Bootstrap color of the wizard (background) */
-  color: PropTypes.string,
-  /* Handler to call when wizard is complete */
-  onFinish: PropTypes.func.isRequired,
-  /* The child questions of the wizard (shown one-by-one) */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-};
-
-Wizard.defaultProps = {
-  title: 'Complete these steps to continue:',
-  subtitle: null,
-  color: 'info',
-};
-
-export default Wizard;

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

@@ -1,21 +0,0 @@
-.active-link {
-  color: white;
-  background-color: #333;
-}
-.active-link:hover {
-  color: white;
-  background-color: #000;
-}
-
-.inactive-link {
-  color: black;
-  background-color: #f8f8f8;
-}
-.inactive-link:hover {
-  color: black;
-  background-color: #fff;
-}
-
-.faded-item {
-  opacity: 0.7;
-}

package/src-old/glyphs/Adjust.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAdjust } from '@fortawesome/free-solid-svg-icons';
-
-class Adjust extends Component {
-  render() {
-    return (
-      <FontAwesomeIcon icon={faAdjust} {...this.props} />
-    );
-  }
-}
-
-export default Adjust;

package/src-old/glyphs/Angle.js

@@ -1,57 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faAngleUp,
-  faAngleDown,
-  faAngleRight,
-  faAngleLeft,
-} from '@fortawesome/free-solid-svg-icons';
-
-/* use direction="up|down|left|right" (default is "right")
- */
-
-class Angle extends Component {
-  render() {
-    // Extract props
-    const {
-      direction,
-      ...props
-    } = this.props;
-
-    switch (direction) {
-      case 'up':
-        return (
-          <FontAwesomeIcon icon={faAngleUp} {...props} />
-        );
-      case 'down':
-        return (
-          <FontAwesomeIcon icon={faAngleDown} {...props} />
-        );
-      case 'left':
-        return (
-          <FontAwesomeIcon icon={faAngleLeft} {...props} />
-        );
-      default:
-        return (
-          <FontAwesomeIcon icon={faAngleRight} {...props} />
-        );
-    }
-  }
-}
-
-Angle.propTypes = {
-  /* Direction of the angle */
-  direction: PropTypes.oneOf([
-    'up',
-    'down',
-    'left',
-    'right',
-  ]),
-};
-
-Angle.defaultProps = {
-  direction: 'right',
-};
-
-export default Angle;

package/src-old/glyphs/Archive.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArchive } from '@fortawesome/free-solid-svg-icons';
-
-class Archive extends Component {
-  render() {
-    return (
-      <FontAwesomeIcon icon={faArchive} {...this.props} />
-    );
-  }
-}
-
-export default Archive;

package/src-old/glyphs/Arrow.js

@@ -1,85 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-  faArrowUp,
-  faArrowDown,
-  faArrowRight,
-  faArrowLeft,
-  faArrowCircleUp,
-  faArrowCircleDown,
-  faArrowCircleRight,
-  faArrowCircleLeft,
-} from '@fortawesome/free-solid-svg-icons';
-
-/* use direction="up|down|left|right" (default is "right")
- * add circled prop to put the chevron in a circle bubble
- */
-
-class Arrow extends Component {
-  render() {
-    // Extract props
-    const {
-      circled,
-      direction,
-      ...props
-    } = this.props;
-
-    if (circled) {
-      switch (direction) {
-        case 'up':
-          return (
-            <FontAwesomeIcon icon={faArrowCircleUp} {...props} />
-          );
-        case 'down':
-          return (
-            <FontAwesomeIcon icon={faArrowCircleDown} {...props} />
-          );
-        case 'left':
-          return (
-            <FontAwesomeIcon icon={faArrowCircleLeft} {...props} />
-          );
-        default:
-          return (
-            <FontAwesomeIcon icon={faArrowCircleRight} {...props} />
-          );
-      }
-    } else {
-      switch (direction) {
-        case 'up':
-          return (
-            <FontAwesomeIcon icon={faArrowUp} {...props} />
-          );
-        case 'down':
-          return (
-            <FontAwesomeIcon icon={faArrowDown} {...props} />
-          );
-        case 'left':
-          return (
-            <FontAwesomeIcon icon={faArrowLeft} {...props} />
-          );
-        default:
-          return (
-            <FontAwesomeIcon icon={faArrowRight} {...props} />
-          );
-      }
-    }
-  }
-}
-
-Arrow.propTypes = {
-  circled: PropTypes.bool,
-  direction: PropTypes.oneOf([
-    'up',
-    'down',
-    'left',
-    'right',
-  ]),
-};
-
-Arrow.defaultProps = {
-  circled: false,
-  direction: 'right',
-};
-
-export default Arrow;

package/src-old/glyphs/ArrowsHorizontal.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons';
-
-class ArrowsHorizontal extends Component {
-  render() {
-    return (
-      <FontAwesomeIcon icon={faArrowsAltH} {...this.props} />
-    );
-  }
-}
-
-export default ArrowsHorizontal;

package/src-old/glyphs/ArrowsVertical.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowsAltV } from '@fortawesome/free-solid-svg-icons';
-
-class ArrowsVertical extends Component {
-  render() {
-    return (
-      <FontAwesomeIcon icon={faArrowsAltV} {...this.props} />
-    );
-  }
-}
-
-export default ArrowsVertical;

package/src-old/glyphs/Award.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAward } from '@fortawesome/free-solid-svg-icons';
-
-class Award extends Component {
-  render() {
-    return (
-      <FontAwesomeIcon icon={faAward} {...this.props} />
-    );
-  }
-}
-
-export default Award;

package/src-old/glyphs/Ban.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBan } from '@fortawesome/free-solid-svg-icons';
-
-class Ban extends Component {
-  render() {
-    return (
-      <FontAwesomeIcon icon={faBan} {...this.props} />
-    );
-  }
-}
-
-export default Ban;

package/src-old/glyphs/Barcode.js

@@ -1,13 +0,0 @@
-import React, { Component } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBarcode } from '@fortawesome/free-solid-svg-icons';
-
-class Barcode extends Component {
-  render() {
-    return (
-      <FontAwesomeIcon icon={faBarcode} {...this.props} />
-    );
-  }
-}
-
-export default Barcode;