@undp/carbon-library 1.0.152-CARBON-343.0 → 1.0.152-CARBON-343.1

package/dist/cjs/types/Components/Common/AntComponents/antTableComponents.d.ts

@@ -1,21 +1,20 @@
 import React from "react";
-interface Item {
+type NdcDetail = {
     key: string;
-    name: string;
-    age: string;
-    address: string;
-}
-interface EditableRowProps {
+    startDate: Date;
+    endDate: Date;
+    nationalPlanObj: string;
+    kpi: number;
+    subNdcDetails?: [];
+};
+interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
+    editing: boolean;
+    dataIndex: string;
+    title: any;
+    inputType: "number" | "text";
+    record: NdcDetail;
     index: number;
-}
-export declare const EditableRow: React.FC<EditableRowProps>;
-interface EditableCellProps {
-    title: React.ReactNode;
-    editable: boolean;
     children: React.ReactNode;
-    dataIndex: keyof Item;
-    record: Item;
-    handleSave: (record: Item) => void;
 }
 export declare const EditableCell: React.FC<EditableCellProps>;
 export {};

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, useContext } from 'react';
+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, Popconfirm } from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
 import { DateTime } from 'luxon';
 import { Buffer } from 'buffer';
 import PhoneInput, { formatPhoneNumberIntl, formatPhoneNumber } from 'react-phone-number-input';
@@ -24435,60 +24435,16 @@ var RegistryDashboardComponent = function (props) {
                                     lastUpdateTransferLocations))))))))) : ("")));
 };
 
-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)))));
-};
+React.createContext(null);
 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, minWidth: "100px", minHeight: "20px" }, onClick: toggleEdit }, children));
-    }
-    return React.createElement("td", __assign({}, restProps), childNode);
+    var editing = _a.editing, dataIndex = _a.dataIndex, title = _a.title, inputType = _a.inputType; _a.record; _a.index; var children = _a.children, restProps = __rest(_a, ["editing", "dataIndex", "title", "inputType", "record", "index", "children"]);
+    var inputNode = inputType === "number" ? React.createElement(InputNumber, null) : React.createElement(Input, null);
+    return (React.createElement("td", __assign({}, restProps), editing ? (React.createElement(Form.Item, { name: dataIndex, style: { margin: 0 }, rules: [
+            {
+                required: true,
+                message: "Please Input ".concat(title, "!"),
+            },
+        ] }, inputNode)) : (children)));
 };
 
 var css_248z$4 = ".ndc-steps-actions {\n  display: flex;\n  flex-direction: row-reverse;\n  margin-right: 1rem;\n  justify-content: center; }\n  .ndc-steps-actions .action-btn {\n    border: 1px solid #16b1ff;\n    color: #16b1ff;\n    margin-right: 1rem; }\n  .ndc-steps-actions .back-btn {\n    border: 1px solid rgba(140, 140, 140, 0.7);\n    color: rgba(140, 140, 140, 0.7);\n    margin-right: 1rem; }\n  .ndc-steps-actions .mg-left-1 {\n    margin-left: 1rem; }\n";
@@ -24511,7 +24467,17 @@ var NdcDetailsComponent = function (props) {
     var addedNdcDetailId = useRef(0);
     var selectedNdcDetail = useRef({});
     var _e = useState(0), tableKey = _e[0], setTableKey = _e[1];
+    var form = Form.useForm()[0];
+    var _f = useState(""), editingKey = _f[0], setEditingKey = _f[1];
     var userInfoState = useUserContext().userInfoState;
+    var isEditing = function (record) { return record.key === editingKey; };
+    var onEditRow = function (record) {
+        form.setFieldsValue(__assign({ nationalPlanObj: "", kpi: "", ministry: "" }, record));
+        setEditingKey(record.key);
+    };
+    var onEditCancel = function () {
+        setEditingKey("");
+    };
     var isAddRangeVisible = function () {
         return (((userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.MINISTRY ||
             (userInfoState === null || userInfoState === void 0 ? void 0 : userInfoState.companyRole) === CompanyRole.GOVERNMENT) &&
@@ -24524,37 +24490,63 @@ var NdcDetailsComponent = function (props) {
     var inRange = function (num, min, max) {
         return num >= min && num <= max;
     };
-    var handleSave = function (row) {
-        if (row.type === NdcActionType.main) {
-            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);
-        }
-        else {
-            var newData = __spreadArray([], ndcDetailsData, true);
-            var parentIndex = newData.findIndex(function (item) { return row.ndcActionId === item.key; });
-            var parentItem = newData[parentIndex];
-            if (parentItem) {
-                if (parentItem.subNdcDetails) {
-                    var itemIndex = parentItem.subNdcDetails.findIndex(function (item) { return row.key === item.key; });
-                    if (itemIndex === -1) {
-                        parentItem.subNdcDetails.push(row);
+    var onHandleSave = function (record) { return __awaiter(void 0, void 0, void 0, function () {
+        var updatedNdcDetails, editedData, index, parentIndex, parentItem, itemIndex, errInfo_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    updatedNdcDetails = __spreadArray([], ndcDetailsData, true);
+                    return [4 /*yield*/, form.validateFields()];
+                case 1:
+                    editedData = (_a.sent());
+                    if (record) {
+                        if (record.type === NdcActionType.main) {
+                            index = updatedNdcDetails.findIndex(function (item) { return record.key === item.key; });
+                            updatedNdcDetails.splice(index, 1, __assign(__assign({}, record), editedData));
+                            setNdcDetailsData(updatedNdcDetails);
+                        }
+                        else {
+                            parentIndex = updatedNdcDetails.findIndex(function (item) { return record.ndcActionId === item.key; });
+                            parentItem = updatedNdcDetails[parentIndex];
+                            if (parentItem) {
+                                if (parentItem.subNdcDetails) {
+                                    itemIndex = parentItem.subNdcDetails.findIndex(function (item) { return record.key === item.key; });
+                                    if (itemIndex !== -1) {
+                                        parentItem.subNdcDetails.splice(itemIndex, 1, __assign(__assign({}, record), editedData));
+                                    }
+                                    if (itemIndex + 1 === parentItem.subNdcDetails.length) {
+                                        parentItem.subNdcDetails.push({
+                                            key: ++addedNdcDetailId.current,
+                                            ndcActionId: parentItem.key,
+                                            type: NdcActionType.sub,
+                                            startDate: new Date("2019-03-25"),
+                                            endDate: new Date("2020-03-25"),
+                                            nationalPlanObj: "",
+                                            kpi: "",
+                                            ministry: "",
+                                        });
+                                    }
+                                }
+                                updatedNdcDetails.splice(parentIndex, 1, __assign({}, parentItem));
+                                setNdcDetailsData(updatedNdcDetails);
+                            }
+                        }
+                        setEditingKey("");
+                        setTableKey(function (key) { return key + 1; });
                     }
                     else {
-                        parentItem.subNdcDetails.splice(itemIndex, 1, __assign({}, row));
+                        throw new Error("Save failed");
                     }
-                }
-                else {
-                    parentItem.subNdcDetails = [row];
-                }
+                    return [3 /*break*/, 3];
+                case 2:
+                    errInfo_1 = _a.sent();
+                    console.log("Validate Failed:", errInfo_1);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
             }
-            newData.splice(parentIndex, 1, __assign({}, parentItem));
-            setNdcDetailsData(newData);
-            setTableKey(function (key) { return key + 1; });
-        }
-    };
+        });
+    }); };
     var getNdcDetailsForPeriod = function () {
         var range = selectedTab.split("-");
         if (range.length > 1) {
@@ -24584,6 +24576,8 @@ var NdcDetailsComponent = function (props) {
             align: "left",
             editable: true,
             width: 800,
+            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(Space, { size: "middle" },
+                React.createElement("span", null, record.nationalPlanObj))) : (React.createElement("input", { className: "ant-input", disabled: true, type: "text" })))); },
         },
         {
             title: t("ndc:ndcColumnsKpi"),
@@ -24592,6 +24586,8 @@ var NdcDetailsComponent = function (props) {
             align: "left",
             editable: true,
             width: 100,
+            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(Space, { size: "middle" },
+                React.createElement("span", null, record.kpi))) : (React.createElement("input", { className: "ant-input", disabled: true, type: "text" })))); },
         },
         {
             title: "Ministry",
@@ -24599,6 +24595,19 @@ var NdcDetailsComponent = function (props) {
             key: "ministry",
             align: "left",
             editable: true,
+            render: function (_, record) { return (React.createElement(React.Fragment, null, record.nationalPlanObj ? (React.createElement(Space, { size: "middle" },
+                React.createElement("span", null, record.ministry))) : (React.createElement("input", { className: "ant-input", disabled: true, type: "text" })))); },
+        },
+        {
+            title: "operation",
+            dataIndex: "operation",
+            render: function (_, record) {
+                var editable = isEditing(record);
+                return editable ? (React.createElement("span", null,
+                    React.createElement(Typography.Link, { onClick: function () { return onHandleSave(record); }, style: { marginRight: 8 } }, "Save"),
+                    React.createElement(Popconfirm, { title: "Sure to cancel?", onConfirm: onEditCancel },
+                        React.createElement("a", null, "Cancel")))) : (React.createElement(Typography.Link, { disabled: editingKey !== "", onClick: function () { return onEditRow(record); } }, "Edit"));
+            },
         },
     ];
     var columns = defaultColumns.map(function (col) {
@@ -24610,7 +24619,7 @@ var NdcDetailsComponent = function (props) {
                 editable: col.editable,
                 dataIndex: col.dataIndex,
                 title: col.title,
-                handleSave: handleSave,
+                editing: isEditing(record),
             }); } });
     });
     function onAddNewNdcDetail() {
@@ -24641,32 +24650,11 @@ var NdcDetailsComponent = function (props) {
     }
     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>
-        );
+        return React.createElement("div", null);
     }
     var onCancelPeriod = function () { };
     var onAddNewPeriod = function () {
@@ -24924,17 +24912,18 @@ var NdcDetailsComponent = function (props) {
             React.createElement(Tabs, { centered: false, defaultActiveKey: "1", items: periodItems, activeKey: selectedTab, onChange: onTabChange })),
         selectedTab !== "add_new" && (React.createElement("div", null,
             React.createElement("div", null,
-                React.createElement(Table, { key: tableKey, components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getNdcDetailsForPeriod(), columns: columns, expandable: {
-                        expandedRowRender: function (record) { return getSubNdcActionContent(record); },
-                        indentSize: 0,
-                        defaultExpandedRowKeys: [selectedNdcDetail.current.key],
-                    }, footer: function () {
-                        return isAddNdcActionVisible() && (React.createElement(Row, { justify: "center" },
-                            React.createElement(Button, { onClick: onAddNewNdcDetail, type: "default", style: {
-                                    marginBottom: 16,
-                                    width: "100%",
-                                } }, t("ndc:addNdcAction"))));
-                    } }))))));
+                React.createElement(Form, { form: form, component: false },
+                    React.createElement(Table, { key: tableKey, components: components, rowClassName: function () { return "editable-row"; }, bordered: true, dataSource: getNdcDetailsForPeriod(), columns: columns, expandable: {
+                            expandedRowRender: function (record) { return getSubNdcActionContent(record); },
+                            indentSize: 0,
+                            defaultExpandedRowKeys: [selectedNdcDetail.current.key],
+                        }, footer: function () {
+                            return isAddNdcActionVisible() && (React.createElement(Row, { justify: "center" },
+                                React.createElement(Button, { onClick: onAddNewNdcDetail, type: "default", style: {
+                                        marginBottom: 16,
+                                        width: "100%",
+                                    } }, t("ndc:addNdcAction"))));
+                        } })))))));
 };
 
 var ImgWithFallback = function (_a) {