LayoutsWidget

Source

OneByOne.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/LayoutsWidget.mcss';

export default function render(props) {
  return (
    <table
      className={props.active === '1x1' ? style.activeTable : style.table}
      name="1x1"
      onClick={props.onClick}
    >
      <tbody>
        <tr>
          <td
            className={props.activeRegion === 0 ? style.activeTd : style.td}
          />
        </tr>
      </tbody>
    </table>
  );
}

render.propTypes = {
  onClick: PropTypes.func,
  active: PropTypes.string,
  activeRegion: PropTypes.number,
};

render.defaultProps = {
  onClick: () => {},
  activeRegion: -1,
  active: undefined,
};

OneByTwo.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/LayoutsWidget.mcss';

export default function render(props) {
  return (
    <table
      className={props.active === '1x2' ? style.activeTable : style.table}
      name="1x2"
      onClick={props.onClick}
    >
      <tbody>
        <tr>
          <td
            className={props.activeRegion === 0 ? style.activeTd : style.td}
          />
        </tr>
        <tr>
          <td
            className={props.activeRegion === 1 ? style.activeTd : style.td}
          />
        </tr>
      </tbody>
    </table>
  );
}

render.propTypes = {
  onClick: PropTypes.func,
  active: PropTypes.string,
  activeRegion: PropTypes.number,
};

render.defaultProps = {
  onClick: () => {},
  activeRegion: -1,
  active: undefined,
};

TwoBottom.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/LayoutsWidget.mcss';

export default function render(props) {
  return (
    <table
      className={props.active === '3xB' ? style.activeTable : style.table}
      name="3xB"
      onClick={props.onClick}
    >
      <tbody>
        <tr>
          <td
            className={props.activeRegion === 0 ? style.activeTd : style.td}
          />
          <td
            className={props.activeRegion === 1 ? style.activeTd : style.td}
          />
        </tr>
        <tr>
          <td
            colSpan="2"
            className={props.activeRegion === 2 ? style.activeTd : style.td}
          />
        </tr>
      </tbody>
    </table>
  );
}

render.propTypes = {
  onClick: PropTypes.func,
  active: PropTypes.string,
  activeRegion: PropTypes.number,
};

render.defaultProps = {
  onClick: () => {},
  activeRegion: -1,
  active: undefined,
};

TwoByOne.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/LayoutsWidget.mcss';

export default function render(props) {
  return (
    <table
      className={props.active === '2x1' ? style.activeTable : style.table}
      name="2x1"
      onClick={props.onClick}
    >
      <tbody>
        <tr>
          <td
            className={props.activeRegion === 0 ? style.activeTd : style.td}
          />
          <td
            className={props.activeRegion === 1 ? style.activeTd : style.td}
          />
        </tr>
      </tbody>
    </table>
  );
}

render.propTypes = {
  onClick: PropTypes.func,
  active: PropTypes.string,
  activeRegion: PropTypes.number,
};

render.defaultProps = {
  onClick: () => {},
  activeRegion: -1,
  active: undefined,
};

TwoByTwo.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/LayoutsWidget.mcss';

export default function render(props) {
  return (
    <table
      className={props.active === '2x2' ? style.activeTable : style.table}
      name="2x2"
      onClick={props.onClick}
    >
      <tbody>
        <tr>
          <td
            className={props.activeRegion === 0 ? style.activeTd : style.td}
          />
          <td
            className={props.activeRegion === 1 ? style.activeTd : style.td}
          />
        </tr>
        <tr>
          <td
            className={props.activeRegion === 2 ? style.activeTd : style.td}
          />
          <td
            className={props.activeRegion === 3 ? style.activeTd : style.td}
          />
        </tr>
      </tbody>
    </table>
  );
}

render.propTypes = {
  onClick: PropTypes.func,
  active: PropTypes.string,
  activeRegion: PropTypes.number,
};

render.defaultProps = {
  onClick: () => {},
  activeRegion: -1,
  active: undefined,
};

TwoLeft.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/LayoutsWidget.mcss';

export default function render(props) {
  return (
    <table
      className={props.active === '3xL' ? style.activeTable : style.table}
      name="3xL"
      onClick={props.onClick}
    >
      <tbody>
        <tr>
          <td
            rowSpan="2"
            className={props.activeRegion === 0 ? style.activeTd : style.td}
          />
          <td
            className={props.activeRegion === 1 ? style.activeTd : style.td}
          />
        </tr>
        <tr>
          <td
            className={props.activeRegion === 2 ? style.activeTd : style.td}
          />
        </tr>
      </tbody>
    </table>
  );
}

render.propTypes = {
  onClick: PropTypes.func,
  active: PropTypes.string,
  activeRegion: PropTypes.number,
};

render.defaultProps = {
  onClick: () => {},
  activeRegion: -1,
  active: undefined,
};

TwoRight.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/LayoutsWidget.mcss';

export default function render(props) {
  return (
    <table
      className={props.active === '3xR' ? style.activeTable : style.table}
      name="3xR"
      onClick={props.onClick}
    >
      <tbody>
        <tr>
          <td
            className={props.activeRegion === 0 ? style.activeTd : style.td}
          />
          <td
            rowSpan="2"
            className={props.activeRegion === 1 ? style.activeTd : style.td}
          />
        </tr>
        <tr>
          <td
            className={props.activeRegion === 2 ? style.activeTd : style.td}
          />
        </tr>
      </tbody>
    </table>
  );
}

render.propTypes = {
  onClick: PropTypes.func,
  active: PropTypes.string,
  activeRegion: PropTypes.number,
};

render.defaultProps = {
  onClick: () => {},
  activeRegion: -1,
  active: undefined,
};

TwoTop.js

import React from 'react';
import PropTypes from 'prop-types';

import style from 'PVWStyle/ReactWidgets/LayoutsWidget.mcss';

export default function render(props) {
  return (
    <table
      className={props.active === '3xT' ? style.activeTable : style.table}
      name="3xT"
      onClick={props.onClick}
    >
      <tbody>
        <tr>
          <td
            colSpan="2"
            className={props.activeRegion === 0 ? style.activeTd : style.td}
          />
        </tr>
        <tr>
          <td
            className={props.activeRegion === 1 ? style.activeTd : style.td}
          />
          <td
            className={props.activeRegion === 2 ? style.activeTd : style.td}
          />
        </tr>
      </tbody>
    </table>
  );
}

render.propTypes = {
  onClick: PropTypes.func,
  active: PropTypes.string,
  activeRegion: PropTypes.number,
};

render.defaultProps = {
  onClick: () => {},
  activeRegion: -1,
  active: undefined,
};

index.js

import React from 'react';
import PropTypes from 'prop-types';

import TwoByTwo from './TwoByTwo';
import OneByTwo from './OneByTwo';
import TwoByOne from './TwoByOne';
import OneByOne from './OneByOne';
import TwoLeft from './TwoLeft';
import TwoTop from './TwoTop';
import TwoRight from './TwoRight';
import TwoBottom from './TwoBottom';

export default function render(props) {
  const onLayoutChange = (event) =>
    props.onChange(event.currentTarget.getAttribute('name'));

  return (
    <section className={props.className}>
      <TwoByTwo active={props.active} onClick={onLayoutChange} />
      <OneByTwo active={props.active} onClick={onLayoutChange} />
      <TwoByOne active={props.active} onClick={onLayoutChange} />
      <OneByOne active={props.active} onClick={onLayoutChange} />
      <TwoLeft active={props.active} onClick={onLayoutChange} />
      <TwoTop active={props.active} onClick={onLayoutChange} />
      <TwoRight active={props.active} onClick={onLayoutChange} />
      <TwoBottom active={props.active} onClick={onLayoutChange} />
    </section>
  );
}

render.propTypes = {
  onChange: PropTypes.func,
  active: PropTypes.string,
  className: PropTypes.string,
};

render.defaultProps = {
  onChange: () => {},
  active: undefined,
  className: '',
};