react-canada-map/lib/Canada.js

react module for an interactive map of Canada

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
import React, { Component } from "react";
import data from "./data/data";
import Province from "./Province";
import drawDetails from "./svgUtils";
export var Provinces;
(function (Provinces) {
    Provinces["BC"] = "BC";
    Provinces["AB"] = "AB";
    Provinces["SK"] = "SK";
    Provinces["MB"] = "MB";
    Provinces["ON"] = "ON";
    Provinces["QC"] = "QC";
    Provinces["NB"] = "NB";
    Provinces["NS"] = "NS";
    Provinces["PE"] = "PE";
    Provinces["NL"] = "NL";
    Provinces["YT"] = "YT";
    Provinces["NT"] = "NT";
    Provinces["NU"] = "NU";
})(Provinces || (Provinces = {}));
var Canada = /** @class */ (function (_super) {
    __extends(Canada, _super);
    function Canada() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.fillProvinceColor = function (province) {
            if (_this.props.customize &&
                _this.props.customize[province] &&
                _this.props.customize[province].fillColor) {
                return _this.props.customize[province].fillColor;
            }
            return _this.props.fillColor;
        };
        _this.fillProvinceHoverColor = function (province) {
            if (_this.props.customize &&
                _this.props.customize[province] &&
                _this.props.customize[province].onHoverColor) {
                return _this.props.customize[province].onHoverColor;
            }
            return _this.props.onHoverColor;
        };
        _this.buildProvinces = function () {
            var paths = [];
            var prov_data = data["default"];
            var _loop_1 = function (province) {
                var path = (React.createElement(Province, { key: province, dimensions: prov_data[province]["dimensions"], provinceAbbreviation: province, provinceName: prov_data[province]["name"], fillColor: _this.fillProvinceColor(province), onHoverColor: _this.fillProvinceHoverColor(province), onClick: function (e) {
                        return _this.props.onClick(Provinces[province], e);
                    } }));
                paths.push(path);
            };
            for (var province in prov_data) {
                _loop_1(province);
            }
            return paths;
        };
        return _this;
    }
    Canada.prototype.render = function () {
        return (React.createElement("svg", { className: "canada-map", xmlns: "http://www.w3.org/2000/svg", width: this.props.width, height: this.props.height, viewBox: "-24500 -15050 55700 32000" },
            drawDetails(),
            this.buildProvinces()));
    };
    Canada.defaultProps = {
        onClick: function () { },
        width: 1113,
        height: 942,
        fillColor: "#D3D3D3",
        onHoverColor: "#ffffff",
        customize: {},
    };
    return Canada;
}(Component));
export default Canada;
//# sourceMappingURL=Canada.js.map