@readr-media/react-election-widgets
Version:
544 lines (483 loc) • 18.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CouncilMember = CouncilMember;
exports.default = EVC;
var _react = _interopRequireWildcard(require("react"));
var _selector = _interopRequireDefault(require("./selector"));
var _breakpoint = _interopRequireDefault(require("./breakpoint"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _list = _interopRequireDefault(require("./list"));
var _theme = _interopRequireDefault(require("./theme"));
var _manager = require("./manager");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @typedef {import('./typedef').District} District
* @typedef {import('./typedef').Election} Election
* @typedef {import('./typedef').ReferendumElection} ReferendumElection
* @typedef {import('./typedef').PresidentElection} PresidentElection
* @typedef {import('./typedef').LegislatorElection} LegislatorElection
* @typedef {import('./typedef').LegislatorPartyElection} LegislatorPartyElection
* @typedef {import('./typedef').LegislatorIndigenousElection} LegislatorIndigenousElection
* @typedef {import('./manager').DataManager} DataManager
*/
// eslint-disable-line
const dirstrictTypeEnum = {
normal: 'normal',
indigenous: 'indigenous',
plainIndigenous: 'plainIndigenous',
mountainIndigenous: 'mountainIndigenous'
};
const tabEnum = dirstrictTypeEnum;
const StyledTab = _styledComponents.default.div.withConfig({
displayName: "react-components__StyledTab",
componentId: "sc-1h5joga-0"
})(["cursor:pointer;font-weight:700;color:", ";", ""],
/**
* @param {Object} props
* @param {boolean} props.active
* @param {Object} [props.theme]
*/
props => props.active ? props.theme.tab.color.active : props.theme.tab.color.normal, props => {
var _props$theme;
switch ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.device) {
case 'mobile':
return `
min-width: 128px;
font-size: 16px;
margin-right: 16px;
margin-left: 16px;
`;
case 'rwd':
default:
{
return `
@media ${_breakpoint.default.devices.tablet} {
min-width: 120px;
font-size: 24px;
line-height: 130%;
margin-right: 40px;
margin-left: 40px;
}
@media ${_breakpoint.default.devices.tabletBelow} {
min-width: 80px;
font-size: 16px;
margin-right: 16px;
margin-left: 16px;
}
`;
}
}
});
const StyledTabBorder = _styledComponents.default.div.withConfig({
displayName: "react-components__StyledTabBorder",
componentId: "sc-1h5joga-1"
})(["width:0px;height:16px;border-right:2px solid black;@media ", "{height:20px;}"], _breakpoint.default.devices.tablet);
const StyledTabs = _styledComponents.default.div.withConfig({
displayName: "react-components__StyledTabs",
componentId: "sc-1h5joga-2"
})(["text-align:center;margin-bottom:48px;> div{display:inline-block;}", ""], props => {
var _props$theme2;
switch ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.device) {
case 'mobile':
{
return `
margin-top: 28px;
`;
}
case 'rwd':
default:
{
return `
@media ${_breakpoint.default.devices.mobileS} {
margin-top: 28px;
}
@media ${_breakpoint.default.devices.tablet} {
margin-top: 38px;
}
@media ${_breakpoint.default.devices.laptop} {
margin-top: 48px;
}
`;
}
}
});
const StyledSelector = (0, _styledComponents.default)(_selector.default).withConfig({
displayName: "react-components__StyledSelector",
componentId: "sc-1h5joga-3"
})(["margin:40px auto 20px auto;", ""], props => {
var _props$theme3;
switch ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.device) {
case 'mobile':
{
return `
width: 256px;
`;
}
case 'rwd':
default:
{
return `
@media ${_breakpoint.default.devices.laptop} {
display: none;
}
@media ${_breakpoint.default.devices.laptopBelow} and ${_breakpoint.default.devices.tablet} {
width: 288px;
}
@media ${_breakpoint.default.devices.tabletBelow} {
width: 256px;
}
`;
}
}
});
const StyledList = (0, _styledComponents.default)(_list.default).withConfig({
displayName: "react-components__StyledList",
componentId: "sc-1h5joga-4"
})([""]);
const Container = _styledComponents.default.div.withConfig({
displayName: "react-components__Container",
componentId: "sc-1h5joga-5"
})(["width:100%;*{box-sizing:border-box;}background-color:", ";padding-bottom:60px;", "{margin-left:auto;margin-right:auto;}", ""], ({
theme
}) => {
var _theme$container, _theme$container2;
return theme !== null && theme !== void 0 && (_theme$container = theme.container) !== null && _theme$container !== void 0 && _theme$container.backgroundColor ? theme === null || theme === void 0 ? void 0 : (_theme$container2 = theme.container) === null || _theme$container2 === void 0 ? void 0 : _theme$container2.backgroundColor : '#fff8f3';
}, StyledList, props => {
var _props$theme4;
switch ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.device) {
case 'mobile':
{
return '';
}
case 'rwd':
default:
{
return `
@media ${_breakpoint.default.devices.laptop} {
min-height: 100vh;
}
`;
}
}
});
const Header = _styledComponents.default.header.withConfig({
displayName: "react-components__Header",
componentId: "sc-1h5joga-6"
})(["display:", ";", ";"], ({
theme
}) => theme.header.display, props => {
var _props$theme5;
const baseCss = `
border-top: 4px solid black;
border-bottom: 4px solid black;
margin-bottom: 48px;
h3 {
line-height: 120%;
font-weight: 700;
margin: 0;
}
background-color: ${props.theme.title.bottomBlock.backgroundColor};
h3:first-child {
background-color: ${props.theme.title.topBlock.backgroundColor};
color: ${props.theme.title.topBlock.color};
}
h3:last-child {
color: ${props.theme.title.bottomBlock.color};
}
`;
const mobileCss = `
h3 {
font-size: 24px;
display: block;
text-align: center;
padding: 12px 0;
}
h3:last-child {
border-top: 4px solid black;
}
`;
switch ((_props$theme5 = props.theme) === null || _props$theme5 === void 0 ? void 0 : _props$theme5.device) {
case 'mobile':
{
return `
${baseCss}
${mobileCss}
`;
}
case 'rwd':
default:
{
return `
${baseCss}
@media ${_breakpoint.default.devices.tablet} {
h3 {
padding: 25px 40px;
display: inline-block;
font-size: 32px;
}
h3:last-child {
border-left: 4px solid black;
}
}
@media ${_breakpoint.default.devices.tablet} and ${_breakpoint.default.devices.laptopBelow} {
h3:first-child {
padding-left: 38px;
padding-right: 38px;
}
}
@media ${_breakpoint.default.devices.laptop} and ${_breakpoint.default.devices.laptopLBelow} {
h3:first-child {
padding-left: 82px;
padding-right: 82px;
}
}
@media ${_breakpoint.default.devices.laptopL} {
h3:first-child {
padding-left: 106px;
padding-right: 106px;
}
}
@media ${_breakpoint.default.devices.tabletBelow} {
${mobileCss}
}
`;
}
}
});
/**
* @param {Object} props
* @param {string} [props.className]
* @param {string} props.year
* @param {string} props.title
* @param {District[]} [props.districts=[]]
* @param {string} [props.scrollTo] - the first row with the district name to scroll to
* @param {OnChange} [props.onChange=()=>{}]
* @returns {React.ReactElement}
*/
function CouncilMember({
className,
districts: allDistricts = [],
year,
title,
scrollTo,
onChange = () => {}
}) {
var _separatedDistricts$n;
const [tab, setTab] = (0, _react.useState)(tabEnum.normal);
const separatedDistricts = (0, _react.useMemo)(() => {
return {
indigenous: allDistricts.filter(d => d.type === dirstrictTypeEnum.indigenous),
plainIndigenous: allDistricts.filter(d => d.type === dirstrictTypeEnum.plainIndigenous),
mountainIndigenous: allDistricts.filter(d => d.type === dirstrictTypeEnum.mountainIndigenous),
normal: allDistricts.filter(d => d.type === dirstrictTypeEnum.normal)
};
}, [allDistricts]);
const showTabs = ((_separatedDistricts$n = separatedDistricts.normal) === null || _separatedDistricts$n === void 0 ? void 0 : _separatedDistricts$n.length) !== allDistricts.length;
let tabsJsx = null;
let districts = separatedDistricts === null || separatedDistricts === void 0 ? void 0 : separatedDistricts[tab];
/**
* @callback OnTab
* @param {string} tab - value could be 'normal', 'indigenous', 'plainIndigenous' or 'mountainIndigenous'
* @returns {void}
*/
/**
* @type {OnTab}
*/
const onTab = t => {
var _separatedDistricts$t, _separatedDistricts$t2;
setTab(t);
setDistrictName(separatedDistricts === null || separatedDistricts === void 0 ? void 0 : (_separatedDistricts$t = separatedDistricts[t]) === null || _separatedDistricts$t === void 0 ? void 0 : (_separatedDistricts$t2 = _separatedDistricts$t[0]) === null || _separatedDistricts$t2 === void 0 ? void 0 : _separatedDistricts$t2.districtName);
onChange('tab', t);
};
tabsJsx = showTabs ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledTabs, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTab, {
active: tab === tabEnum.normal,
onClick: () => onTab(tabEnum.normal),
children: "\u5340\u57DF"
}), separatedDistricts.indigenous.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTabBorder, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTab, {
active: tab === tabEnum.indigenous,
onClick: () => onTab(tabEnum.indigenous),
children: "\u539F\u4F4F\u6C11"
})]
}) : null, separatedDistricts.plainIndigenous.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTabBorder, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTab, {
active: tab === tabEnum.plainIndigenous,
onClick: () => onTab(tabEnum.plainIndigenous),
children: "\u5E73\u5730\u539F\u4F4F\u6C11"
})]
}) : null, separatedDistricts.mountainIndigenous.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTabBorder, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTab, {
active: tab === tabEnum.mountainIndigenous,
onClick: () => onTab(tabEnum.mountainIndigenous),
children: "\u5C71\u5730\u539F\u4F4F\u6C11"
})]
}) : null]
}) : null;
const dataManager = (0, _manager.dataManagerFactory)().newDataManager({
districts,
type: 'councilMember',
year,
title
});
/** @type {string[]} */
const options = districts.map(d => d.fullDistrictName || dataManager.genFullDistrictName(d.districtName));
const [districtName, setDistrictName] = (0, _react.useState)(scrollTo || (options === null || options === void 0 ? void 0 : options[0]));
(0, _react.useEffect)(() => {
setDistrictName(scrollTo || (options === null || options === void 0 ? void 0 : options[0]));
}, [scrollTo, districts]);
(0, _react.useEffect)(() => {
setTab(tabEnum.normal);
}, [allDistricts]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
className: className,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
children: year
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
children: title
})]
}), tabsJsx, /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSelector, {
options: options,
defaultValue: districtName,
onSelect: n => {
setDistrictName(n);
if (typeof n === 'string') {
onChange('selector', n);
}
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
dataManager: dataManager,
scrollTo: districtName
})]
});
}
/**
* @callback OnChange
* @param {'selector'|'tab'} type
* @param {string} value - selector option or tab name
*/
/**
* @param {Object} props
* @param {string} [props.className]
* @param {Election | ReferendumElection | PresidentElection | LegislatorPartyElection | LegislatorIndigenousElection | LegislatorElection } props.election
* @param {'mobile'|'rwd'} [props.device='rwd']
* @param {'openRelations'|'electionMap'|'mnewsElection2022'} [props.theme='openRelations']
* @param {string} [props.stickyTopOffset]
* @param {OnChange} [props.onChange]
* @param {string} [props.scrollTo] - the first row with the district name to scroll to
*/
function EVC({
className,
election,
device = 'rwd',
theme = 'openRelations',
stickyTopOffset,
scrollTo,
onChange
}) {
const dataManager = (0, _manager.dataManagerFactory)().newDataManager(election);
switch (election === null || election === void 0 ? void 0 : election.type) {
case 'councilMember':
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: Object.assign({
device,
stickyTopOffset
}, _theme.default[theme]),
children: theme === 'electionMap' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_EVC, {
className: className,
dataManager: dataManager,
scrollTo: scrollTo,
onChange: onChange
}, election.title + election.type + election.year) : /*#__PURE__*/(0, _jsxRuntime.jsx)(CouncilMember, {
className: className,
districts: election === null || election === void 0 ? void 0 : election.districts,
year: election === null || election === void 0 ? void 0 : election.year,
title: election === null || election === void 0 ? void 0 : election.title,
scrollTo: scrollTo,
onChange: onChange
})
});
case 'legislator':
case 'legislator-district':
case 'legislator-mountainIndigenous':
case 'legislator-plainIndigenous':
case 'legislator-party':
case 'legislator-recall':
case 'mayor':
case 'referendum':
case 'president':
{
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
theme: Object.assign({
device,
stickyTopOffset
}, _theme.default[theme]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EVC, {
className: className,
dataManager: dataManager,
scrollTo: scrollTo,
onChange: onChange
}, election.title + election.type + election.year)
});
}
default:
{
return null;
}
}
}
/**
* @callback RenderFullOption
* @param {string} option
* @returns {string}
*/
/**
* @param {Object} props
* @param {string} [props.className]
* @param {DataManager} props.dataManager
* @param {string} [props.scrollTo] - the first row with the district name to scroll to
* @param {OnChange} [props.onChange=() => {}]
* @returns {React.ReactElement}
*/
function _EVC({
className,
dataManager,
scrollTo,
onChange = () => {}
}) {
/** @type {Election} */
const data = dataManager.getData();
const options = data === null || data === void 0 ? void 0 : data.districts.map(c => c.fullDistrictName || dataManager.genFullDistrictName(c.districtName));
const [districtName, setDistrictName] = (0, _react.useState)(scrollTo || (options === null || options === void 0 ? void 0 : options[0]));
(0, _react.useEffect)(() => {
setDistrictName(scrollTo || (options === null || options === void 0 ? void 0 : options[0]));
}, [scrollTo, data]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
className: className,
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
children: data === null || data === void 0 ? void 0 : data.year
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
children: data === null || data === void 0 ? void 0 : data.title
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSelector, {
options: options,
defaultValue: districtName,
onSelect: n => {
setDistrictName(n);
if (typeof n === 'string') {
onChange('selector', n);
}
}
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
dataManager: dataManager,
scrollTo: districtName
})]
});
}