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: '',
};