dce-reactkit 1.0.19 → 2.0.1

package/src-old/components/Chart/Scatter.js

@@ -1,162 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import rechart components
-import {
-  ResponsiveContainer,
-  ScatterChart as ScatterChartLib,
-  Scatter,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-} from 'recharts';
-
-// Import helpers
-import csvToString from '../../common/csvToString';
-
-// Import other components
-import Holder from './Holder';
-
-// Import default colors
-import colors from './colors';
-
-class ScatterChart extends Component {
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      color,
-      width,
-      height,
-      xLabel,
-      xUnit,
-      yLabel,
-      yUnit,
-      data,
-      noTooltipOnHover,
-      noDownload,
-      showLegend,
-      seriesName,
-    } = this.props;
-
-    // Create download content
-    let csvContents;
-    if (!noDownload) {
-      const xField = `${xLabel}${xUnit ? ' (' + xUnit + ')' : ''}`;
-      const yField = `${yLabel}${yUnit ? ' (' + yUnit + ')' : ''}`;
-      const csv = {
-        fields: [xField, yField],
-        data: data.map((datum) => {
-          return [datum.x, datum.y];
-        }),
-      };
-      csvContents = csvToString(csv);
-    }
-
-    return (
-      <Holder
-        title={title}
-        xLabel={xLabel}
-        xUnit={xUnit}
-        yLabel={yLabel}
-        yUnit={yUnit}
-        width={width}
-        height={height}
-        csvContents={csvContents}
-      >
-        <ResponsiveContainer
-          width="100%"
-          height="100%"
-        >
-          <ScatterChartLib>
-            <CartesianGrid />
-            <YAxis
-              dataKey="y"
-              type="number"
-              name={yLabel}
-            />
-            <XAxis
-              dataKey="x"
-              type="number"
-              name={xLabel}
-            />
-            {!noTooltipOnHover && (
-              <Tooltip
-                cursor={{
-                  strokeDasharray: '3 3',
-                }}
-              />
-            )}
-            {showLegend && (
-              <Legend />
-            )}
-            <Scatter
-              name={seriesName}
-              data={data}
-              fill={color}
-            />
-          </ScatterChartLib>
-        </ResponsiveContainer>
-      </Holder>
-    );
-  }
-}
-
-ScatterChart.propTypes = {
-  // Title of the chart
-  title: PropTypes.string,
-  // CSS color (#123456 or 'white') for the points
-  color: PropTypes.string,
-  // Width ('100%' or 50)
-  width: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  // Height ('100%' or 50)
-  height: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
-  // Label for the x axis
-  xLabel: PropTypes.string,
-  // Unit for the x axis
-  xUnit: PropTypes.string,
-  // Label for the y axis
-  yLabel: PropTypes.string,
-  // Unit for the y axis
-  yUnit: PropTypes.string,
-  // Array of data objects
-  data: PropTypes.arrayOf(
-    PropTypes.shape({
-      x: PropTypes.number,
-      y: PropTypes.number,
-    })
-  ).isRequired,
-  // If true, no tooltip is shown when hovering over a point
-  noTooltipOnHover: PropTypes.bool,
-  // If true, no download button is shown
-  noDownload: PropTypes.bool,
-  // Name of the series (included and required for legend)
-  seriesName: PropTypes.string,
-  // If true, legend is included
-  showLegend: PropTypes.bool,
-};
-
-ScatterChart.defaultProps = {
-  title: null,
-  color: colors.defaultBlue,
-  width: '100%',
-  height: '500px',
-  xLabel: 'x-axis',
-  xUnit: null,
-  yLabel: 'y-axis',
-  yUnit: null,
-  seriesName: 'Chart',
-  noTooltipOnHover: false,
-  noDownload: false,
-  showLegend: false,
-};
-
-export default ScatterChart;

package/src-old/components/Chart/colors.js

@@ -1,20 +0,0 @@
-export default {
-  defaultBlue: '#419bf7',
-  assortment: [
-    '#ec4f6a',
-    '#f19542',
-    '#f6c353',
-    '#61cbcc',
-    '#419bf7',
-    '#005392',
-    '#7d5297',
-    '#d261ab',
-    '#7edfcf',
-    '#5eac88',
-
-    '#f4ce63',
-    '#929000',
-    '#5e5e5e',
-    '#008e00',
-  ],
-};

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

@@ -1,106 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import bootstrap components
-import { Button } from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-// Import custom styles
-import './style.css';
-
-// Import glyphs
-import Check from '../../glyphs/Check';
-
-/* Same properties as button component, plus:
- * - onChange: (index, optionText) function
- */
-
-class Checkbox extends Component {
-  constructor(props) {
-    super(props);
-
-    // Deconstruct props
-    const { startChecked } = this.props;
-    const checked = !!startChecked;
-
-    // Initialize state
-    this.state = {
-      checked,
-    };
-
-    // Bind functions
-    this.onClick = this.onClick.bind(this);
-
-    // Update parent
-    const { onChange } = this.props;
-    if (onChange) {
-      onChange(checked);
-    }
-  }
-
-  onClick() {
-    // Toggle checkbox
-    let { checked } = this.state;
-    checked = !checked;
-    this.setState({
-      checked,
-    });
-
-    // Call onChange handler
-    const { onChange } = this.props;
-    if (onChange) {
-      onChange(checked);
-    }
-  }
-
-  render() {
-    // Extract properties
-    const { light } = this.props;
-
-    // Deconstruct state
-    const { checked } = this.state;
-
-    // Create the checkbox
-    return (
-      <Button
-        title={checked ? 'Click to uncheck' : 'Click to check'}
-        onClick={this.onClick}
-        color={(
-          light
-            ? 'light'
-            : 'dark'
-        )}
-        style={{
-          border: (light ? '2px solid black' : null),
-        }}
-      >
-        {checked
-          ? (<Check grow="10" />)
-          : (<Check grow="3" opacity="0.2" />)
-        }
-      </Button>
-    );
-  }
-}
-
-Checkbox.propTypes = {
-  // If true, the checkbox starts checked (when initialized)
-  startChecked: PropTypes.bool,
-  /**
-   * If included, this function is called when the checkbox is toggled with a
-   *   boolean (is checked) as an argument
-   * @param {boolean} isChecked true if the checkbox was just checked
-   */
-  onChange: PropTypes.func,
-  // If true, the light theme is applied to the checkbox
-  light: PropTypes.bool,
-};
-
-Checkbox.defaultProps = {
-  startChecked: false,
-  onChange: null,
-  light: false,
-};
-
-export default Checkbox;

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

@@ -1,11 +0,0 @@
-/* Class that disables text selection (so that drags on the checkbox don't look
-     strange) */
-.no-select {
-  -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
-}

package/src-old/components/DatePicker.js

@@ -1,59 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import date picker
-import ReactDatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-
-class DatePicker extends Component {
-  constructor(props) {
-    super(props);
-
-    // Initialize date
-    const { defaultDate } = this.props;
-    this.defaultDate = (defaultDate || new Date());
-    this.state = {
-      date: this.defaultDate,
-    };
-
-    // Bind functions
-    this.onDateChanged = this.onDateChanged.bind(this);
-  }
-
-  onDateChanged(date) {
-    // Update state
-    this.setState({
-      date,
-    });
-
-    // Update parent via handler
-    const { onChange } = this.props;
-    onChange(date);
-  }
-
-  render() {
-    // Deconstruct state
-    const { date } = this.state;
-
-    return (
-      <ReactDatePicker
-        selected={date}
-        onChange={this.onDateChanged}
-        className="form-control"
-      />
-    );
-  }
-}
-
-DatePicker.propTypes = {
-  /* The default date to display in the chooser */
-  defaultDate: PropTypes.instanceOf(Date),
-  /* Handler to call when date is changed */
-  onChange: PropTypes.func.isRequired,
-};
-
-DatePicker.defaultProps = {
-  defaultDate: null,
-};
-
-export default DatePicker;

package/src-old/components/DownloadButton.js

@@ -1,72 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import file download button
-import DownloadLink from 'react-download-link';
-
-// Import glyphs
-import Download from '../glyphs/Download';
-
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-class DownloadButton extends Component {
-  render() {
-    const {
-      text,
-      filename,
-      contents,
-      large,
-      marginLeft,
-      marginRight,
-      marginTop,
-      marginBottom,
-    } = this.props;
-
-    return (
-      <DownloadLink
-        filename={filename}
-        exportFile={() => { return contents; }}
-        label={
-          (
-            <span>
-              <Download className="mr-2" />
-              {text}
-            </span>
-          )
-        }
-        tagName="div"
-        className={`btn btn-dark text-white${large ? ' btn-lg' : ''}`}
-        style={{
-          textDecoration: 'none !important',
-          marginLeft,
-          marginRight,
-          marginTop,
-          marginBottom,
-        }}
-      />
-    );
-  }
-}
-
-DownloadButton.propTypes = {
-  text: PropTypes.string,
-  filename: PropTypes.string.isRequired,
-  contents: PropTypes.string.isRequired,
-  large: PropTypes.bool,
-  marginLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  marginRight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  marginTop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  marginBottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
-
-DownloadButton.defaultProps = {
-  text: 'Download',
-  large: false,
-  marginLeft: null,
-  marginRight: null,
-  marginTop: null,
-  marginBottom: null,
-};
-
-export default DownloadButton;

package/src-old/components/Dropdown.js

@@ -1,120 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import genUUID from 'uuid/v1';
-
-// Import bootstrap components
-import {
-  Dropdown as BootstrapDropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-} from 'reactstrap';
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-class Dropdown extends Component {
-  constructor(props) {
-    super(props);
-
-    // Initialize state
-    this.state = {
-      dropdownOpen: false,
-    };
-
-    // Bind functions
-    this.toggle = this.toggle.bind(this);
-  }
-
-  toggle() {
-    const { dropdownOpen } = this.state;
-
-    this.setState({
-      dropdownOpen: !dropdownOpen,
-    });
-  }
-
-  render() {
-    // Deconstruct props
-    const {
-      title,
-      color,
-      rightAligned,
-      inline,
-      items,
-      ...props
-    } = this.props;
-
-    // Deconstruct state
-    const { dropdownOpen } = this.state;
-
-    const itemElements = items.map((item) => {
-      return (
-        <DropdownItem
-          header={item.header}
-          divider={item.divider}
-          disabled={item.disabled}
-          onClick={item.onClick}
-          key={genUUID()}
-        >
-          {item.text}
-        </DropdownItem>
-      );
-    });
-
-    return (
-      <BootstrapDropdown
-        isOpen={dropdownOpen}
-        toggle={this.toggle}
-        className={inline ? 'd-inline-block' : null}
-      >
-        <DropdownToggle
-          color={color}
-          caret
-          {...props}
-        >
-          {title}
-        </DropdownToggle>
-        <DropdownMenu
-          right={rightAligned}
-        >
-          {itemElements}
-        </DropdownMenu>
-      </BootstrapDropdown>
-    );
-  }
-}
-
-Dropdown.propTypes = {
-  /* Title/label of the dropdown */
-  title: PropTypes.string.isRequired,
-  /* The bootstrap color of the dropdown button */
-  color: PropTypes.string,
-  /* If true, the dropdown menu is right-aligned (left-aligned otherwise) */
-  rightAligned: PropTypes.bool,
-  /* If true, the dropdown menu is inserted in-line (instead of block) */
-  inline: PropTypes.bool,
-  /* The dropdown items */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      /* The title of the item */
-      text: PropTypes.string,
-      /* If true, this item is a divider (text is ignored) */
-      divider: PropTypes.bool,
-      /* If true, this item is a header item (not clickable) */
-      header: PropTypes.bool,
-      /* If true, this item is disabled (not clickable) */
-      disabled: PropTypes.bool,
-      /* Handler to call when item is clicked */
-      onClick: PropTypes.func,
-    })
-  ),
-};
-
-Dropdown.defaultProps = {
-  color: 'secondary',
-  rightAligned: false,
-  inline: false,
-  items: [],
-};
-
-export default Dropdown;

package/src-old/components/Layout/LeftAddon.js

@@ -1,63 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-/*
-Looks like:
-...............................................................................
-| .............. ............................................................ |
-| | Left Addon | |   Right area fills the rest of the space (second child)  | |
-| '''''''''''''' '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' |
-'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
-*/
-
-class LeftAddon extends Component {
-  render() {
-    const {
-      children,
-      centerVertically,
-    } = this.props;
-    const leftChild = (children.length > 0 ? children[0] : {});
-    const rightChild = (children.length > 1 ? children[1] : {});
-
-    // Create classnames
-    const leftClassName = (
-      'flex-column' + (centerVertically ? ' align-self-center' : '')
-    );
-    const rightClassName = (
-      'flex-column flex-fill' + (centerVertically ? ' align-self-center' : '')
-    );
-
-    return (
-      <div className="d-flex flex-row">
-        <div className={leftClassName}>
-          {leftChild}
-        </div>
-        <div
-          className={rightClassName}
-        >
-          <div className="d-inline-block">
-            {rightChild}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-LeftAddon.propTypes = {
-  /* Must have two children: first child is the item that's added on the left,
-   * the second child is the item that spans the rest of the row
-   */
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // If true, the items are vertically centered
-  centerVertically: PropTypes.bool,
-};
-
-LeftAddon.defaultProps = {
-  centerVertically: false,
-};
-
-export default LeftAddon;

package/src-old/components/Layout/RightAddon.js

@@ -1,64 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-// Import bootstrap stylesheet
-import 'bootstrap/dist/css/bootstrap.min.css';
-
-/*
-Looks like:
-................................................................................
-| ............................................................ ............... |
-| |    Left area fills the rest of the space (first child)   | | Right Addon | |
-| '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ''''''''''''''' |
-''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
-*/
-
-class RightAddon extends Component {
-  render() {
-    const {
-      children,
-      centerVertically,
-    } = this.props;
-    const leftChild = (children.length > 0 ? children[0] : {});
-    const rightChild = (children.length > 1 ? children[1] : {});
-
-    // Create classnames
-    const leftClassName = (
-      'flex-column flex-fill' + (centerVertically ? ' align-self-center' : '')
-    );
-    const rightClassName = (
-      'flex-column' + (centerVertically ? ' align-self-center' : '')
-    );
-
-    return (
-      <div className="d-flex flex-row">
-        <div className={leftClassName}>
-          {leftChild}
-        </div>
-        <div
-          className={rightClassName}
-        >
-          <div className="d-inline-block">
-            {rightChild}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-RightAddon.propTypes = {
-  /* Must have two children: first child is the item on the left that fills up
-   * the ret of the space, the second child is the item that's added on the
-   * right
-   */
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-  // If true, the items are vertically centered
-  centerVertically: PropTypes.bool,
-};
-
-RightAddon.defaultProps = {
-  centerVertically: false,
-};
-
-export default RightAddon;