datastake-daf 0.6.274 → 0.6.276

package/dist/components/index.js

@@ -27307,11 +27307,12 @@ const Content = _ref => {
     getApiBaseUrl,
     getAppHeader,
     user,
-    evaluationConfig = []
+    evaluationConfig = [],
+    fullWidth = false
   } = _ref;
   const groupSingle = grps => {
     const form = Object.keys(grps).reduce((f, gKey) => {
-      if (grps[gKey].type !== 'modal' && !isGroupInput(grps[gKey], false, data) && !isGroupInput(grps[gKey], true, data) && grps[gKey].display !== 'group' && !grps[gKey].viewGroup && !grps[gKey].component) {
+      if (grps[gKey].type !== "modal" && !isGroupInput(grps[gKey], false, data) && !isGroupInput(grps[gKey], true, data) && grps[gKey].display !== "group" && !grps[gKey].viewGroup && !grps[gKey].component) {
         var _grps$gKey, _grps$gKey2, _grps$gKey4, _grps$gKey5;
         if (grps[gKey].group && !f[grps[gKey].group]) {
           f[grps[gKey].group] = {};
@@ -27362,7 +27363,7 @@ const Content = _ref => {
   };
   const getComponent = (component, key, config) => {
     switch (component) {
-      case 'repeatableModals':
+      case "repeatableModals":
         return /*#__PURE__*/jsxRuntime.jsx(RepeatableModals, {
           app: app,
           t: t,
@@ -27385,9 +27386,9 @@ const Content = _ref => {
         });
     }
   };
-  const isDisplayGroup = input => input.display && input.display === 'group';
-  const isSingleModal = input => input.type && input.type === 'modal';
-  const hasComponent = input => input.component && typeof input.component === 'string';
+  const isDisplayGroup = input => input.display && input.display === "group";
+  const isSingleModal = input => input.type && input.type === "modal";
+  const hasComponent = input => input.component && typeof input.component === "string";
   const typeRender = (groups, singleGroupsKeys, addedContent) => {
     const _length = Object.keys(groups || {}).length;
     const isEven = _length % 2 === 0;
@@ -27426,10 +27427,9 @@ const Content = _ref => {
             getToken: getToken,
             evaluationConfig: evaluationConfig,
             ajaxOptions: ajaxOptions
-          }, key)
-
+          }, key) :
           // repeatable group
-          : isGroupInput(groups[key], true, data) ? /*#__PURE__*/jsxRuntime.jsx(RepeatableGroup, {
+          isGroupInput(groups[key], true, data) ? /*#__PURE__*/jsxRuntime.jsx(RepeatableGroup, {
             app: app,
             t: t,
             ajaxForms: ajaxForms,
@@ -27445,9 +27445,9 @@ const Content = _ref => {
             linkingData: linkingData,
             linkingForms: linkingForms,
             ajaxOptions: ajaxOptions
-          }, key)
+          }, key) :
           // single inputs grouped
-          : singleGroupsKeys.includes(key) ? (() => {
+          singleGroupsKeys.includes(key) ? (() => {
             if (!addedContent.includes(key)) {
               var _groups$key;
               const currentGroup = Object.keys(groupSingle(groups)).find(k => Object.keys(groupSingle(groups)[k]).includes(key));
@@ -27481,7 +27481,7 @@ const Content = _ref => {
                   data: data,
                   allData: data,
                   linkingData: linkingData,
-                  className: isEven ? ind === _length - 1 || ind === _length - 2 ? 'last' : undefined : ind === _length - 1 ? 'last' : undefined,
+                  className: isEven ? ind === _length - 1 || ind === _length - 2 ? "last" : undefined : ind === _length - 1 ? "last" : undefined,
                   linkingForms: linkingForms,
                   ajaxOptions: ajaxOptions,
                   evaluationConfig: evaluationConfig,
@@ -27489,9 +27489,9 @@ const Content = _ref => {
                 }, key)]
               }, "".concat(currentGroup, "-").concat(Date.now()));
             }
-          })()
+          })() :
           // display group
-          : isDisplayGroup(groups[key]) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+          isDisplayGroup(groups[key]) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "group display",
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {
               className: "title",
@@ -27499,10 +27499,9 @@ const Content = _ref => {
                 children: groups[key].label
               })
             }), typeRender(getDisplayGroupConfig(groups, key), singleGroupsKeys, addedContent)]
-          }, key)
-
+          }, key) :
           // single modal
-          : isSingleModal(groups[key]) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+          isSingleModal(groups[key]) ? /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "group",
             children: [/*#__PURE__*/jsxRuntime.jsx("div", {
               className: "title",
@@ -27538,18 +27537,18 @@ const Content = _ref => {
   };
   React.useEffect(() => {
     setTimeout(() => {
-      const groups = Array.from(document.getElementsByClassName('group'));
-      const rows = Array.from(document.querySelectorAll('.repetable-row-extra'));
+      const groups = Array.from(document.getElementsByClassName("group"));
+      const rows = Array.from(document.querySelectorAll(".repetable-row-extra"));
       rows.forEach(row => {
-        const inputs = Array.from(row.querySelectorAll('.input'));
+        const inputs = Array.from(row.querySelectorAll(".input"));
         const lasts = getLastRow(inputs.map((i, ind) => ind), 4);
         if (lasts) {
-          lasts.forEach(index => inputs[index].classList.add('last'));
+          lasts.forEach(index => inputs[index].classList.add("last"));
         }
       });
       groups.forEach(group => {
         // const isRepeatable = Array.from(group.classList).includes('repeatable');
-        const inputs = Array.from(group.querySelectorAll('.input'));
+        const inputs = Array.from(group.querySelectorAll(".input"));
         // if (inputs.length && !isRepeatable) {
         //   if (inputs.length % 2 === 0) {
         //     inputs[inputs.length - 1].classList.add('last');
@@ -27570,8 +27569,8 @@ const Content = _ref => {
   React.useState({});
   const renderContent = function (f) {
     if (f) {
-      const alertType = ['error', 'warning', 'info', 'success'];
-      if (f.alertConf && f.alertConf.type === 'warning') {
+      const alertType = ["error", "warning", "info", "success"];
+      if (f.alertConf && f.alertConf.type === "warning") {
         return /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
           message: f.alertConf.text,
           type: f.alertConf.type,
@@ -27592,15 +27591,15 @@ const Content = _ref => {
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
           className: "wrapper",
           style: {
-            width: 700
+            width: fullWidth ? "100%" : 700
           },
           children: [f.alertConf ? /*#__PURE__*/jsxRuntime.jsx(antd.Alert, {
             className: "w-100",
             style: {
-              marginBottom: '20px'
+              marginBottom: "20px"
             },
             message: f.alertConf.text,
-            type: alertType.includes(f.alertConf.type) ? f.alertConf.type : 'info',
+            type: alertType.includes(f.alertConf.type) ? f.alertConf.type : "info",
             showIcon: true
           }) : null, typeRender(groups, singleGroupsKeys, addedContent)]
         }, Date.now())
@@ -33795,7 +33794,8 @@ const EditForm = _ref => {
     errors = {},
     changeErrors = () => {},
     evaluationConfig = [],
-    staticWidth = "614px"
+    staticWidth = "614px",
+    fullWidth = false
   } = _ref;
   const [isSubmitting] = React.useState(false);
   const formData = JSON.parse(JSON.stringify(convertUndefinedToNull(data) || {}));
@@ -34013,9 +34013,9 @@ const EditForm = _ref => {
           name: id,
           layout: "vertical",
           style: {
-            maxWidth: 700
+            maxWidth: fullWidth ? "unset" : 700
           },
-          className: "main-form".concat(formClass ? " ".concat(formClass) : ""),
+          className: "main-form".concat(formClass ? " ".concat(formClass) : "", " "),
           onValuesChange: (_changedValue, _allValues) => {
             const changedValue = _objectSpread2({}, _changedValue);
             const allValues = _objectSpread2({}, _allValues);
@@ -61514,6 +61514,32 @@ function DataPoint(_ref) {
   });
 }
 
+const CountryFlag = _ref => {
+  let {
+    countryName,
+    code,
+    hasTooltip = true
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+    title: countryName,
+    visible: hasTooltip || !countryName,
+    children: /*#__PURE__*/jsxRuntime.jsx("img", {
+      alt: code,
+      style: {
+        width: 24,
+        borderRadius: 100,
+        height: 24
+      },
+      src: "https://flagcdn.com/w80/".concat(code.toLowerCase(), ".png")
+    })
+  });
+};
+CountryFlag.propTypes = {
+  countryName: PropTypes__default["default"].string.isRequired,
+  code: PropTypes__default["default"].string.isRequired,
+  hasTooltip: PropTypes__default["default"].bool
+};
+
 exports.AccountTable = AccountTable;
 exports.ActionWidget = ActionWidget;
 exports.AdminDashboard = AdminDashboard;
@@ -61531,6 +61557,7 @@ exports.Button = DafButton;
 exports.CarouselWidget = CarouselWidget;
 exports.ColumnChart = ColumnChart;
 exports.ComponentWithFocus = ComponentWithFocus;
+exports.CountryFlag = CountryFlag;
 exports.CustomIcon = CustomIcon;
 exports.DafDashboardDetails = Details;
 exports.DafTheme = DafTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.274",
+	"version": "0.6.276",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/EditForm/EditForm.stories.js

@@ -93,6 +93,7 @@ const EForm = () => {
 						data={editValues}
 						getAppHeader={storyData.getAppHeader}
 						getApiBaseUrl={storyData.getApiBaseUrl}
+						fullWidth={true}
 						evaluationConfig={
 							[
 								// {

package/src/@daf/core/components/EditForm/_index.scss

@@ -53,6 +53,7 @@
     line-height: 20px !important;
     color: #001529;
   }
+
   .ant-page-header {
     .ant-page-header-heading-left {
       overflow: initial;
@@ -355,6 +356,7 @@
       overflow: auto;
       flex-direction: column;
       padding: 20px 100px 0 100px;
+
       &.has-section {
         width: calc(100% - 200px);
       }
@@ -366,6 +368,10 @@
         min-height: 100%;
         margin: auto;
 
+        &.full-width-form {
+          max-width: unset;
+        }
+
         @media screen and (max-width: 1200px) {
           min-width: 700px;
         }
@@ -375,16 +381,16 @@
         }
 
         .with-comment {
-          & > .ant-form-item-label > label {
+          &>.ant-form-item-label>label {
             width: 100%;
 
-            & > span {
+            &>span {
               display: flex;
               justify-content: space-between;
               width: 100%;
 
-              & > span {
-                & > button {
+              &>span {
+                &>button {
                   line-height: 1;
                   height: inherit;
                   font-size: 14px;
@@ -394,7 +400,7 @@
             }
           }
 
-          &.i-radioGroup > .ant-form-item-label > label > span {
+          &.i-radioGroup>.ant-form-item-label>label>span {
             font-style: normal;
             font-weight: bold;
             font-size: 18px;
@@ -473,20 +479,25 @@
             width: 100%;
             display: flex;
             flex-direction: column;
+
             .ant-transfer-list {
               height: 300px;
+
               .ant-transfer-list-body {
                 overflow-y: auto;
+
                 .ant-transfer-list-body-customize-wrapper {
                   padding: 0;
                 }
               }
+
               .ant-transfer-list-header {
                 .ant-transfer-list-header-selected {
                   display: flex;
                   flex-direction: row-reverse;
                   width: 100%;
                   justify-content: space-between;
+
                   .ant-transfer-list-header-title {
                     position: inherit;
                     font-size: var(--font-size-lg);
@@ -496,13 +507,16 @@
                 }
               }
             }
+
             .ant-transfer-operation {
               display: flex;
               justify-content: space-around;
               width: 100px;
               margin: 10px;
+
               button {
                 transform: rotate(90deg);
+
                 .anticon {
                   position: absolute;
                   top: 4px;
@@ -513,6 +527,7 @@
             }
           }
         }
+
         .ant-row.ant-form-item.comment-textarea {
           margin-top: -12px;
 
@@ -556,7 +571,8 @@
           align-self: stretch;
           flex-grow: 0;
         }
-        .i-transfer > .ant-form-item-label > label {
+
+        .i-transfer>.ant-form-item-label>label {
           padding: 14px 0;
         }
 
@@ -568,7 +584,7 @@
         }
 
         .i-modal {
-          & > .ant-col.ant-form-item-label label {
+          &>.ant-col.ant-form-item-label label {
             margin-top: 1.5rem !important;
             font-size: 18px;
             font-weight: 700;
@@ -576,7 +592,7 @@
             line-height: 22px;
             color: #001529;
 
-            span > span {
+            span>span {
               font-size: 18px;
               font-weight: 700;
               font-style: normal;
@@ -600,6 +616,7 @@
             line-height: var(--size);
             min-height: 32px;
             padding: 5px 0;
+
             &.even {
               background: #f9fafc;
             }
@@ -701,20 +718,25 @@
       }
     }
   }
+
   .total100 {
     display: flex;
     flex-direction: column;
     width: 100%;
+
     .ant-space-item:nth-of-type(3n) {
       flex-grow: initial;
     }
+
     .ant-space-item:not(:last-of-type) {
       width: calc(50% - 4px);
     }
+
     .ant-space {
       margin-top: 8px;
     }
   }
+
   .risk-plan {
     display: flex;
     flex-direction: row;
@@ -725,10 +747,12 @@
     border-radius: 2px;
     color: #001529;
     flex-wrap: wrap;
+
     .subScore {
       display: flex;
       min-width: 100px;
       padding-top: 3.5px;
+
       p {
         margin: 0;
         margin-bottom: 4px;
@@ -752,10 +776,12 @@
       }
     }
   }
+
   .risk-name {
     color: #001529;
     font-style: italic;
   }
+
   .i-imageUpload {
     margin-top: 22px;
   }
@@ -908,9 +934,11 @@
     line-height: 20px !important;
     color: #001529;
   }
+
   .ant-page-header {
     .ant-space {
       width: 100%;
+
       .ant-space-item {
         width: 100%;
       }
@@ -1238,6 +1266,10 @@
         min-height: 100%;
         margin: auto;
 
+        &.full-width-form {
+          max-width: unset;
+        }
+
         .ant-input-number-group-wrapper {
           width: 100%;
         }
@@ -1258,13 +1290,13 @@
           .ant-form-item-label label {
             width: 100%;
 
-            & > span {
+            &>span {
               display: flex;
               justify-content: space-between;
               width: 100%;
 
-              & > span {
-                & > button {
+              &>span {
+                &>button {
                   line-height: 1;
                   height: inherit;
                   font-size: 14px;
@@ -1274,7 +1306,7 @@
             }
           }
 
-          &.i-radioGroup > .ant-form-item-label > label > span {
+          &.i-radioGroup>.ant-form-item-label>label>span {
             font-style: normal;
             font-weight: bold;
             font-size: 18px;
@@ -1353,20 +1385,25 @@
             width: 100%;
             display: flex;
             flex-direction: column;
+
             .ant-transfer-list {
               height: 300px;
+
               .ant-transfer-list-body {
                 overflow-y: auto;
+
                 .ant-transfer-list-body-customize-wrapper {
                   padding: 0;
                 }
               }
+
               .ant-transfer-list-header {
                 .ant-transfer-list-header-selected {
                   display: flex;
                   flex-direction: row-reverse;
                   width: 100%;
                   justify-content: space-between;
+
                   .ant-transfer-list-header-title {
                     position: inherit;
                     font-size: var(--font-size-lg);
@@ -1376,13 +1413,16 @@
                 }
               }
             }
+
             .ant-transfer-operation {
               display: flex;
               justify-content: space-around;
               width: 100px;
               margin: 10px;
+
               button {
                 transform: rotate(90deg);
+
                 .anticon {
                   position: absolute;
                   top: 4px;
@@ -1410,6 +1450,7 @@
               display: none;
             }
           }
+
           .ant-form-item-control-input {
             max-width: 100%;
           }
@@ -1456,7 +1497,7 @@
           flex: 1;
         }
 
-        .i-transfer > .ant-form-item-label > label {
+        .i-transfer>.ant-form-item-label>label {
           padding: 14px 0;
         }
 
@@ -1499,7 +1540,7 @@
         }
 
         .i-modal {
-          & > .ant-col.ant-form-item-label label {
+          &>.ant-col.ant-form-item-label label {
             margin-top: 1.5rem !important;
             font-size: 18px;
             font-weight: 700;
@@ -1507,7 +1548,7 @@
             line-height: 22px;
             color: #001529;
 
-            span > span {
+            span>span {
               font-size: 18px;
               font-weight: 700;
               font-style: normal;
@@ -1563,6 +1604,7 @@
           .ajax-modal-view {
             padding-top: 0px;
           }
+
           .total-inputs-1 {
             .ajax-modal-view {
               .remove-button-row {
@@ -1827,16 +1869,20 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+
     .ant-space-item:nth-of-type(3n) {
       flex-grow: initial;
     }
+
     .ant-space-item:not(:last-of-type) {
       width: calc(50% - 4px);
     }
+
     .ant-space {
       margin-top: 8px;
     }
   }
+
   .risk-plan {
     padding: var(--size-lg);
     border-radius: 4px;
@@ -1908,11 +1954,11 @@
   }
 
   .ant-upload-list {
-    width: var(--static-width, 614px) !important;  
+    width: var(--static-width, 614px) !important;
   }
 
   .ant-select-selector {
-    width: var(--static-width) !important;    
+    width: var(--static-width) !important;
   }
 
   .ant-upload-list-item-container {
@@ -2082,4 +2128,4 @@
       flex: 1;
     }
   }
-}
+}

package/src/@daf/core/components/EditForm/form.jsx

@@ -54,6 +54,7 @@ export const EditForm = ({
 	changeErrors = () => {},
 	evaluationConfig = [],
 	staticWidth = "614px",
+	fullWidth = false,
 }) => {
 	const [isSubmitting] = useState(false);
 	const formData = JSON.parse(JSON.stringify(convertUndefinedToNull(data) || {}));
@@ -342,8 +343,8 @@ export const EditForm = ({
 						key={id}
 						name={id}
 						layout="vertical"
-						style={{ maxWidth: 700 }}
-						className={`main-form${formClass ? ` ${formClass}` : ""}`}
+						style={{ maxWidth: fullWidth ? "unset" : 700 }}
+						className={`main-form${formClass ? ` ${formClass}` : ""} `}
 						onValuesChange={(_changedValue, _allValues) => {
 							const changedValue = { ..._changedValue };
 							const allValues = { ..._allValues };

package/src/@daf/core/components/UI/CountryFlag/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Tooltip } from 'antd'
+import PropTypes from 'prop-types'
+
+const CountryFlag = ({ countryName, code, hasTooltip = true }) => {
+  return (
+    <Tooltip title={countryName} visible={hasTooltip || !countryName}>
+      <img
+        alt={code}
+        style={{ width: 24, borderRadius: 100, height: 24 }}
+        src={`https://flagcdn.com/w80/${code.toLowerCase()}.png`}
+      />
+    </Tooltip>
+  )
+}
+
+CountryFlag.propTypes = {
+  countryName: PropTypes.string.isRequired,
+  code: PropTypes.string.isRequired,
+  hasTooltip: PropTypes.bool,
+}
+
+export default CountryFlag

package/src/@daf/core/components/ViewForm/ViewForm.stories.js

@@ -35,6 +35,7 @@ const ViewForm = ({ evalConfig }) => {
 			user={{ language: "en" }}
 			getApiBaseUrl={storyData.getApiBaseUrl}
 			evaluationConfig={evalConfig}
+			fullWidth={true}
 		/>
 	);
 };