@undp/carbon-library 1.0.135-CARBON-343.1 → 1.0.135-CARBON-343.2

package/dist/cjs/types/Components/Ndc/ndcDetailsComponent.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-declare const NdcDetailsComponent: (props: any) => React.JSX.Element;
-export default NdcDetailsComponent;
+export declare const NdcDetailsComponent: (props: any) => React.JSX.Element;

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { PlusOutlined, FilterOutlined, BankOutlined, SafetyOutlined, AuditOutlined, ExperimentOutlined, UploadOutlined, UserOutlined, MinusCircleOutlined, StarOutlined, ToolOutlined, EyeOutlined, SearchOutlined, EllipsisOutlined, EditOutlined, DeleteOutlined, FileAddOutlined, CheckCircleOutlined, ExclamationCircleOutlined, BookOutlined, CaretDownOutlined, EyeInvisibleOutlined, GlobalOutlined, FlagOutlined, LineChartOutlined, LikeOutlined, DislikeOutlined } from '@ant-design/icons';
 import { Input, Radio, Space, Row, Col, Button, Dropdown, Table, Empty, message, Form, Steps, Upload, Tooltip, Select, Modal, Alert, Skeleton, Card, Tag, Checkbox, DatePicker, InputNumber, Popover, List, Typography, Spin, Tabs, Progress } from 'antd';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useContext } from 'react';
 import { DateTime } from 'luxon';
 import { Buffer } from 'buffer';
 import PhoneInput, { formatPhoneNumberIntl, formatPhoneNumber } from 'react-phone-number-input';
@@ -23548,7 +23548,239 @@ var RegistryDashboardComponent = function (props) {
                                     lastUpdateTransferLocations))))))))) : ("")));
 };
 
-React.createContext(null);
+var EditableContext = React.createContext(null);
+var EditableRow = function (_a) {
+    _a.index; var props = __rest(_a, ["index"]);
+    var form = Form.useForm()[0];
+    return (React.createElement(Form, { form: form, component: false },
+        React.createElement(EditableContext.Provider, { value: form },
+            React.createElement("tr", __assign({}, props)))));
+};
+var EditableCell = function (_a) {
+    var title = _a.title, editable = _a.editable, children = _a.children, dataIndex = _a.dataIndex, record = _a.record, handleSave = _a.handleSave, restProps = __rest(_a, ["title", "editable", "children", "dataIndex", "record", "handleSave"]);
+    var _b = useState(false), editing = _b[0], setEditing = _b[1];
+    var inputRef = useRef(null);
+    var form = useContext(EditableContext);
+    useEffect(function () {
+        if (editing) {
+            inputRef.current.focus();
+        }
+    }, [editing]);
+    var toggleEdit = function () {
+        var _a;
+        setEditing(!editing);
+        form.setFieldsValue((_a = {}, _a[dataIndex] = record[dataIndex], _a));
+    };
+    var save = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var values, errInfo_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, form.validateFields()];
+                case 1:
+                    values = _a.sent();
+                    toggleEdit();
+                    handleSave(__assign(__assign({}, record), values));
+                    return [3 /*break*/, 3];
+                case 2:
+                    errInfo_1 = _a.sent();
+                    console.log('Save failed:', errInfo_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var childNode = children;
+    if (editable) {
+        childNode = editing ? (React.createElement(Form.Item, { style: { margin: 0 }, name: dataIndex, rules: [
+                {
+                    required: true,
+                    message: "".concat(title, " is required."),
+                },
+            ] },
+            React.createElement(Input, { ref: inputRef, onPressEnter: save, onBlur: save }))) : (React.createElement("div", { className: "editable-cell-value-wrap", style: { paddingRight: 24 }, onClick: toggleEdit }, children));
+    }
+    return React.createElement("td", __assign({}, restProps), childNode);
+};
+
+var NdcDetailsComponent = function (props) {
+    var t = props.t; props.useConnection;
+    var RangePicker = DatePicker.RangePicker;
+    var _a = useState([]), ndcDetailsData = _a[0], setNdcDetailsData = _a[1];
+    var _b = useState(false), loading = _b[0]; _b[1];
+    var _c = useState([]), periodItems = _c[0], setPeriodItems = _c[1];
+    var _d = useState('add_new'), selectedTab = _d[0], setSelectedTab = _d[1];
+    var selectedPeriod = useRef({});
+    var handleSave = function (row) {
+        var newData = __spreadArray([], ndcDetailsData, true);
+        var index = newData.findIndex(function (item) { return row.key === item.key; });
+        var item = newData[index];
+        newData.splice(index, 1, __assign(__assign({}, item), row));
+        setNdcDetailsData(newData);
+    };
+    var defaultColumns = [
+        {
+            title: t('ndc:ndcColumnsStartDate'),
+            dataIndex: 'startDate',
+            key: 'startDate',
+            align: 'left',
+            editable: true,
+            render: function (record) {
+                return (React.createElement("div", null,
+                    React.createElement("p", null, moment(record.startDate).format('DD-MM-YYYY'))));
+            },
+        },
+        {
+            title: t('ndc:ndcColumnsEndDate'),
+            dataIndex: 'endDate',
+            key: 'endDate',
+            align: 'left',
+            editable: true,
+            render: function (record) {
+                return (React.createElement("div", null,
+                    React.createElement("p", null, moment(record.endDate).format('DD-MM-YYYY'))));
+            },
+        },
+        {
+            title: t('ndc:ndcColumnsNationalPlanObj'),
+            dataIndex: 'nationalPlanObj',
+            key: 'nationalPlanObj',
+            align: 'left',
+            editable: true,
+        },
+        {
+            title: t('ndc:ndcColumnsKpi'),
+            dataIndex: 'kpi',
+            key: 'kpi',
+            align: 'left',
+            editable: true,
+        },
+    ];
+    var columns = defaultColumns.map(function (col) {
+        if (!col.editable) {
+            return col;
+        }
+        return __assign(__assign({}, col), { onCell: function (record) { return ({
+                record: record,
+                editable: col.editable,
+                dataIndex: col.dataIndex,
+                title: col.title,
+                handleSave: handleSave,
+            }); } });
+    });
+    function onAddNewNdcDetail() {
+        var newData = {
+            startDate: new Date('2014-12-24 23:12:00'),
+            endDate: new Date('2014-12-24 23:12:00'),
+            nationalPlanObj: 'sample text2',
+            kpi: 34,
+        };
+        setNdcDetailsData(__spreadArray(__spreadArray([], ndcDetailsData, true), [newData], false));
+    }
+    var components = {
+        body: {
+            row: EditableRow,
+            cell: EditableCell,
+        },
+    };
+    //commented because rendering issue
+    function ndcDetailsTableContent() {
+        return (React.createElement("div", null)
+        // <div>
+        //   <Button
+        //     onClick={onAddNewNdcDetail}
+        //     type="primary"
+        //     style={{
+        //       marginBottom: 16,
+        //     }}
+        //   >
+        //     Add a row
+        //   </Button>
+        //   <Table
+        //     components={components}
+        //     rowClassName={() => 'editable-row'}
+        //     bordered
+        //     dataSource={ndcDetailsData}
+        //     columns={columns}
+        //   />
+        // </div>
+        );
+    }
+    var onCancelPeriod = function () { };
+    var onAddNewPeriod = function () {
+        if (selectedPeriod && selectedPeriod.current) {
+            var newPeriodItem_1 = {
+                key: "".concat(selectedPeriod.current.start, "-").concat(selectedPeriod.current.end),
+                label: "".concat(selectedPeriod.current.start, "-").concat(selectedPeriod.current.end),
+                children: ndcDetailsTableContent(),
+            };
+            setPeriodItems(function (items) { return __spreadArray(__spreadArray([], items, true), [newPeriodItem_1], false); });
+        }
+    };
+    var onDateRangeChanged = function (range) {
+        var period = {
+            start: Number(moment(range[0]).year()),
+            end: Number(moment(range[1]).year()),
+        };
+        selectedPeriod.current = period;
+    };
+    function addNewPeriodContent() {
+        return (React.createElement("div", null,
+            React.createElement(Row, null,
+                React.createElement(RangePicker, { onChange: onDateRangeChanged, picker: "year" })),
+            React.createElement(Row, null,
+                React.createElement("div", { className: "steps-actions" },
+                    React.createElement(Button, { type: "primary", onClick: onAddNewPeriod, htmlType: "submit", loading: loading }, t('ndc:submit')),
+                    React.createElement(Button, { className: "back-btn", onClick: onCancelPeriod, loading: loading }, t('ndc:back'))))));
+    }
+    var onTabChange = function (key) {
+        setSelectedTab(key);
+    };
+    useEffect(function () {
+        var defaultNdcDetails = [
+            {
+                startDate: new Date('2022-03-25'),
+                endDate: new Date('2023-03-25'),
+                nationalPlanObj: 'sample text1',
+                kpi: 23,
+            },
+            {
+                startDate: new Date('2023-03-25'),
+                endDate: new Date('2024-03-25'),
+                nationalPlanObj: 'sample text2',
+                kpi: 34,
+            },
+            {
+                startDate: new Date('2024-03-25'),
+                endDate: new Date('2025-03-25'),
+                nationalPlanObj: 'sample text3',
+                kpi: 25,
+            },
+        ];
+        var addNewItem = {
+            key: 'add_new',
+            label: 'Add New',
+            children: addNewPeriodContent(),
+        };
+        setPeriodItems([addNewItem]);
+        setNdcDetailsData(defaultNdcDetails);
+    }, []);
+    return (React.createElement("div", { className: "ndc-management content-container" },
+        React.createElement("div", { className: "title-bar" },
+            React.createElement(Row, { justify: "space-between", align: "middle" },
+                React.createElement(Col, { span: 20 },
+                    React.createElement("div", { className: "body-title" }, t('ndc:NdcTitle')),
+                    React.createElement("div", { className: "body-sub-title" }, t('ndc:NdcSubTitle'))))),
+        React.createElement("div", null,
+            React.createElement(Tabs, { defaultActiveKey: "1", items: periodItems, onChange: onTabChange })),
+        selectedTab !== 'add_new' && (React.createElement("div", null,
+            React.createElement("div", null,
+                React.createElement(Button, { onClick: onAddNewNdcDetail, type: "primary", style: {
+                        marginBottom: 16,
+                    } }, "Add a row"),
+                React.createElement(Table, { components: components, rowClassName: function () { return 'editable-row'; }, bordered: true, dataSource: ndcDetailsData, columns: columns }))))));
+};
 
 var ImgWithFallback = function (_a) {
     var src = _a.src, alt = _a.alt, fallbackSrc = _a.fallbackSrc, mediaType = _a.mediaType, className = _a.className, delegated = __rest(_a, ["src", "alt", "fallbackSrc", "mediaType", "className"]);
@@ -24983,5 +25215,5 @@ var TimelineBody = function (props) {
             React.createElement("div", { className: "remark-body" }, remark)))));
 };
 
-export { Action, AddNdcActionComponent, AddNewCompanyComponent, AddNewUserComponent, AdminBGColor, AdminColor, BaseEntity, CarbonSystemType, CertBGColor, CertColor, CoBenifitsComponent, Company, CompanyManagementColumns, CompanyManagementComponent, CompanyProfileComponent, CompanyRole, CompanyState, ConfigurationSettingsType, CreditTransferComponent, CreditTransferStage, DevBGColor, DevColor, DocType, DocumentStatus, ESGType, EnergyGenerationUnits, FormElementType, GovBGColor, GovColor, ImgWithFallback, InfoView, Instrument, InvestmentBGColor, InvestmentBody, InvestmentColor, InvestmentCreationComponent, InvestmentLevel, InvestmentManagementComponent, InvestmentStatus, InvestmentStream, InvestmentType, LandAreaUnits, LegendItem, Loading, ManagerBGColor, ManagerColor, MapComponent, MapTypes, MapboxComponent, MinBGColor, MinColor, MitigationTypes, MrvDashboardComponent, MrvStatsCardsTypes, NdcActionBody, NdcActionManagementComponent, NdcActionStatus, NdcActionTypes, NdcActionViewComponent, OrganisationStatus, ProfileIcon, ProgrammeCertify, ProgrammeCreationComponent, ProgrammeDocuments, ProgrammeEntity, ProgrammeIssueForm, ProgrammeManagementColumns, ProgrammeManagementComponent, ProgrammeRetireForm, ProgrammeRevokeForm, ProgrammeStageLegend, ProgrammeStageMRV, ProgrammeStageR, ProgrammeStageUnified, ProgrammeTransfer, ProgrammeTransferForm, RadioButtonStatus, RadioButtonStatus2, RegistryDashboardComponent, RejectDocumentationConfirmationModel, RetireType, Role, RoleIcon, RootBGColor, RootColor, SdgGoals$1 as SdgGoals, Sector, SectoralScope, StasticCard, StatsCardsTypes, SystemNames, TimelineBody, Titles, TooltipColor, TransferActionModel, TxType, TypeOfMitigation, UnitField, User, UserManagementColumns, UserManagementComponent, UserProfileComponent, UserRoleIcon, ViewBGColor, ViewColor, WidgetType, addCommSep, addCommSepRound, addRoundNumber, addSpaces, consumerGroupList, creditUnit, dateFormat, dateTimeFormat, energyGenerationUnitList, getBase64, getCompanyBgColor, getCreditStageVal, getFinancialFields, getGeneralFields, getInvestmentStatusEnumVal, getNdcActionStatusEnumVal, getNdcStatusTagType, getRetirementTypeString, getStageEnumVal, getStageTagType, getStageTagTypeMRV, getStageTransferEnumVal, getStatusTagType, getTransferStageTagType, isBase64, landAreaUnitList, mitigationTypeList, ndcActionTypeList, sectorMitigationTypesListMapped, sumArray, titleList };
+export { Action, AddNdcActionComponent, AddNewCompanyComponent, AddNewUserComponent, AdminBGColor, AdminColor, BaseEntity, CarbonSystemType, CertBGColor, CertColor, CoBenifitsComponent, Company, CompanyManagementColumns, CompanyManagementComponent, CompanyProfileComponent, CompanyRole, CompanyState, ConfigurationSettingsType, CreditTransferComponent, CreditTransferStage, DevBGColor, DevColor, DocType, DocumentStatus, ESGType, EnergyGenerationUnits, FormElementType, GovBGColor, GovColor, ImgWithFallback, InfoView, Instrument, InvestmentBGColor, InvestmentBody, InvestmentColor, InvestmentCreationComponent, InvestmentLevel, InvestmentManagementComponent, InvestmentStatus, InvestmentStream, InvestmentType, LandAreaUnits, LegendItem, Loading, ManagerBGColor, ManagerColor, MapComponent, MapTypes, MapboxComponent, MinBGColor, MinColor, MitigationTypes, MrvDashboardComponent, MrvStatsCardsTypes, NdcActionBody, NdcActionManagementComponent, NdcActionStatus, NdcActionTypes, NdcActionViewComponent, NdcDetailsComponent, OrganisationStatus, ProfileIcon, ProgrammeCertify, ProgrammeCreationComponent, ProgrammeDocuments, ProgrammeEntity, ProgrammeIssueForm, ProgrammeManagementColumns, ProgrammeManagementComponent, ProgrammeRetireForm, ProgrammeRevokeForm, ProgrammeStageLegend, ProgrammeStageMRV, ProgrammeStageR, ProgrammeStageUnified, ProgrammeTransfer, ProgrammeTransferForm, RadioButtonStatus, RadioButtonStatus2, RegistryDashboardComponent, RejectDocumentationConfirmationModel, RetireType, Role, RoleIcon, RootBGColor, RootColor, SdgGoals$1 as SdgGoals, Sector, SectoralScope, StasticCard, StatsCardsTypes, SystemNames, TimelineBody, Titles, TooltipColor, TransferActionModel, TxType, TypeOfMitigation, UnitField, User, UserManagementColumns, UserManagementComponent, UserProfileComponent, UserRoleIcon, ViewBGColor, ViewColor, WidgetType, addCommSep, addCommSepRound, addRoundNumber, addSpaces, consumerGroupList, creditUnit, dateFormat, dateTimeFormat, energyGenerationUnitList, getBase64, getCompanyBgColor, getCreditStageVal, getFinancialFields, getGeneralFields, getInvestmentStatusEnumVal, getNdcActionStatusEnumVal, getNdcStatusTagType, getRetirementTypeString, getStageEnumVal, getStageTagType, getStageTagTypeMRV, getStageTransferEnumVal, getStatusTagType, getTransferStageTagType, isBase64, landAreaUnitList, mitigationTypeList, ndcActionTypeList, sectorMitigationTypesListMapped, sumArray, titleList };
 //# sourceMappingURL=index.js.map