ui-soxo-bootstrap-core 2.6.1-dev.3 → 2.6.1-dev.31

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -11,21 +11,26 @@ import 'react-phone-input-2/lib/style.css';
 import PropTypes from 'prop-types';
 import './phone-input.scss';
 
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur,className }) {
+export default function CountryPhoneInput({
+  value,
+  onChange,
+  disabled,
+  disableCountryCode,
+  required,
+  defaultCountryCode,
+  onBlur,
+  className,
+  onKeyDown,
+}) {
   const inputRef = useRef();
   const hasInitializedRef = useRef(false); // IMPORTANT
 
   const [phone, setPhone] = useState('');
-
   /**
    * run ONLY ONCE when initial value has dial code
    */
   useEffect(() => {
-    if (
-      !hasInitializedRef.current &&
-      value?.code?.dialCode &&
-      value?.value
-    ) {
+    if (!hasInitializedRef.current && value?.code?.dialCode && value?.value) {
       setPhone(value.code.dialCode + value.value);
       hasInitializedRef.current = true; // 👈 mark as done
     }
@@ -54,7 +59,7 @@ export default function CountryPhoneInput({ value, onChange, disabled, disableCo
         // country={disableCountryCode ? false : 'in'}
         value={phone}
         onChange={handleInput}
-        inputProps={{ required: required }}
+        inputProps={{ required: required, onKeyDown: onKeyDown }}
         disabled={disabled}
         onBlur={onBlur}
       />
@@ -73,4 +78,4 @@ CountryPhoneInput.propTypes = {
   disableCountryCode: PropTypes.bool,
   /** A boolean indicating whether the input is required or not. This prop is optional. */
   required: PropTypes.bool,
-};
+};

package/core/lib/elements/basic/dragabble-wrapper/draggable-wrapper.js

@@ -102,7 +102,7 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
         >
           <div style={{ flex: 1 }}>
             {dragEnabled && <span style={{ marginRight: 8 }}>⋮⋮</span>}
-            <span>{item.name}</span>
+            <span>{item.caption}</span>
             {dragEnabled ? (
               <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>
             ) : (

package/core/lib/elements/basic/menu-tree/menu-tree.js

@@ -23,7 +23,7 @@
  */
 
 import React from 'react';
-import { Checkbox, Collapse } from 'antd';
+import { Checkbox, Collapse, Tag } from 'antd';
 
 const { Panel } = Collapse;
 
@@ -73,11 +73,15 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
               background: '#fff',
               display: 'flex',
               alignItems: 'center',
-              gap: 8,
+              justifyContent: 'space-between',
             }}
           >
-            {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
-            <span>{menu.title || menu.caption}</span>
+            {/* Left Side */}
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
+              <span>{menu.caption}</span>
+            </div>
+            <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
           </div>
         );
       }
@@ -91,15 +95,24 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
           <Panel
             key={menu.id}
             header={
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                {showCheckbox && (
-                  <Checkbox
-                    checked={children.every((c) => selectedMenus.includes(c.id))}
-                    indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
-                    onChange={(e) => onParentChange(e.target.checked)}
-                  />
-                )}
-                <span>{menu.title || menu.caption}</span>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  {showCheckbox && (
+                    <Checkbox
+                      checked={children.every((c) => selectedMenus.includes(c.id))}
+                      indeterminate={children.some((c) => selectedMenus.includes(c.id)) && !children.every((c) => selectedMenus.includes(c.id))}
+                      onChange={(e) => onParentChange(e.target.checked)}
+                    />
+                  )}
+                  <span>{menu.caption}</span>
+                </div>
+                <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
               </div>
             }
           >