@zat-design/sisyphus-react 4.5.3 → 4.5.5-beta.1

package/es/ProConfigProvider/index.js

@@ -98,14 +98,17 @@ function reducer(state, action) {
 }
 const ThemeAwareConfigProvider = ({
   locale,
+  theme,
   children
 }) => {
   const {
     state: themeState
   } = useTheme();
+  // 外部传入的 theme 与 ThemeContext 的 antdConfig 深度合并，外部 theme 优先覆盖默认值
+  const mergedTheme = merge({}, themeState.antdConfig, theme);
   return /*#__PURE__*/_jsx(ConfigProvider, {
     locale: locale,
-    theme: themeState.antdConfig,
+    theme: mergedTheme,
     children: /*#__PURE__*/_jsx("div", {
       children: children
     })
@@ -149,6 +152,7 @@ export const ProConfigProvider = props => {
       },
       children: /*#__PURE__*/_jsx(ThemeAwareConfigProvider, {
         locale: antdLangMap[lang] ?? zhCN,
+        theme: props.theme,
         children: props.children
       })
     })

package/es/ProEditTable/components/RenderField/index.js

@@ -97,24 +97,29 @@ const RenderField = ({
   }
 
   // 单行正在编辑时，临时生成一套formItem用来存储中间值，点击取消时候重置回上一次状态
-  const namePath = getNamePath(name, virtualKey);
-  const rowData = form.getFieldValue([...namePath, index]) || record || {};
+  const namePathKey = useMemo(() => {
+    const path = getNamePath(name, virtualKey);
+    return Array.isArray(path) ? path.join('.') : String(path);
+  }, [name, virtualKey]);
+  const namePath = useMemo(() => getNamePath(name, virtualKey), [namePathKey, name, virtualKey]);
+  const rowNamePath = useMemo(() => [...namePath, index], [namePath, index]);
+  const rowData = form.getFieldValue(rowNamePath) || record || {};
   let currentValue = dataIndex ? rowData?.[dataIndex] : null;
 
   // 构建新的参数格式（与 ProForm 保持一致）
   const reactiveParams = useMemo(() => ({
     form,
     index,
-    namePath: [...namePath, index]
-  }), [form, index, namePath]);
+    namePath: rowNamePath
+  }), [form, index, rowNamePath]);
 
   // 保留 options 用于 viewRender 和 formatArgs（兼容旧格式）
   const options = useMemo(() => ({
     index,
     form,
     name: column?.name,
-    namePath: [...namePath, index]
-  }), [index, column?.name, namePath, form]);
+    namePath: rowNamePath
+  }), [index, column?.name, rowNamePath, form]);
 
   // 行参数 - 使用useMemo优化（新格式：values, { form, index, namePath }）
   const rowParams = useMemo(() => [rowData, reactiveParams], [rowData, reactiveParams]);
@@ -141,7 +146,7 @@ const RenderField = ({
     lastValueType = dynamicProps.valueType ?? valueType(currentValue, rowData, {
       index,
       form,
-      namePath: [...namePath, index],
+      namePath: rowNamePath,
       name: column?.name
     });
   }
@@ -253,8 +258,8 @@ const RenderField = ({
   if (hasFunctionDependency) {
     // 使用 shouldUpdate 监听同一行的数据变化；shouldUpdate 与 dependencies 互斥，始终优先 shouldUpdate
     lastFormItemProps.shouldUpdate = (prevValues, currentValues) => {
-      const prevRow = _get(prevValues, [...namePath, index]);
-      const currentRow = _get(currentValues, [...namePath, index]);
+      const prevRow = _get(prevValues, rowNamePath);
+      const currentRow = _get(currentValues, rowNamePath);
       // 如果行数据发生变化，则重新渲染
       return !_isEqual(prevRow, currentRow);
     };
@@ -391,8 +396,11 @@ const RenderField = ({
   // 使用useCallback优化debounceValidate函数
   const debounceValidate = useCallback((validateFieldKeys = []) => {
     setTimeout(() => {
+      // 行内联动被动触发的重校验：只校验、不滚动到报错位置（全局/主动保存校验仍会滚动）
+      // @ts-ignore 内部选项
       form.validateFields(validateFieldKeys, {
-        recursive: true
+        recursive: true,
+        __skipScrollOnError: true
       });
     }, 100);
   }, [form]);
@@ -408,12 +416,16 @@ const RenderField = ({
         errorStore.clearCell(record.rowKey, String(column?.dataIndex));
       }
       let callArgs = [...innerArgs];
-      const rowPath = [...namePath, index];
+      const rowPath = rowNamePath;
       if (!onFieldChange && !onChange) {
         if (dependencies?.length) {
           const validateFieldKeys = dependencies?.map?.(key => [...rowPath, key]);
           setTimeout(() => {
-            form.validateFields(validateFieldKeys);
+            // 依赖字段联动重校验：只校验、不滚动
+            // @ts-ignore 内部选项
+            form.validateFields(validateFieldKeys, {
+              __skipScrollOnError: true
+            });
           }, 100);
         }
         return;
@@ -531,7 +543,7 @@ const RenderField = ({
       return;
     }
     let callArgs = formatArgs(...args);
-    const rowPath = [...namePath, index];
+    const rowPath = rowNamePath;
     const row = form.getFieldValue(rowPath, true);
     const orgRow = _cloneDeep(row);
     callArgs[1] = row;
@@ -564,7 +576,7 @@ const RenderField = ({
     name: cellName,
     ...lastFieldProps,
     ...TargetComponent?.props,
-    namePath: [...namePath, index],
+    namePath: rowNamePath,
     disabled: lastDisabled,
     onChange: handleChange,
     onBlur: handleBlur,
@@ -574,7 +586,7 @@ const RenderField = ({
     otherProps: {
       form,
       names,
-      namePath: [...namePath, index],
+      namePath: rowNamePath,
       name: originalName,
       listName: cellName,
       // 用于下拉框去重消费，保持和formlist一致
@@ -643,11 +655,11 @@ const RenderField = ({
   // shouldUpdate 模式下重新获取最新行数据并重算所有响应式属性，返回最新渲染状态（不修改外层闭包）
   const recalcShouldUpdateState = () => {
     // 重新获取最新的行数据（shouldUpdate 触发时，通过 getFieldValue 拿到最新值）
-    const latestRowData = form.getFieldValue([...namePath, index]) || record || {};
+    const latestRowData = form.getFieldValue(rowNamePath) || record || {};
     const latestReactiveParams = {
       form,
       index,
-      namePath: [...namePath, index]
+      namePath: rowNamePath
     };
     const latestRowParams = [latestRowData, latestReactiveParams];
 

package/es/ProEditTable/components/RenderField/tools.js

@@ -3,7 +3,7 @@ import _isEqualWith from "lodash/isEqualWith";
 import _isEqual from "lodash/isEqual";
 import _get from "lodash/get";
 import { customEqualForFunction } from "../../../utils";
-import { getNamePath } from "../../utils/tools";
+import { getNamePath, isRecordShallowEqual } from "../../utils/tools";
 /** 列配置中不应透传到 Form.Item 或 DOM 的字段（与 ProForm Render 保持一致） */
 export const OMIT_FORM_ITEM_AND_DOM_KEYS = ['format', 'toISOString', 'toCSTString', 'switchValue', 'precision', 'clearNotShow', 'dependNames', 'shouldCellUpdate' // 表格内部性能优化属性，不应传递给 Form.Item
 ];
@@ -121,8 +121,8 @@ export const arePropsEqual = (prevProps, nextProps) => {
   // 优化：不直接调用函数，而是比较输入参数（record 和 reactiveParams）
   // 如果输入参数相同，fieldProps 的返回值应该相同（纯函数假设）
   if (_isFunction(prevColumn?.fieldProps) && _isFunction(nextColumn?.fieldProps)) {
-    // 比较 record 数据是否变化
-    if (!_isEqualWith(prevRecord, nextRecord, customEqualForFunction)) {
+    // 比较 record 数据是否变化（浅比较，虚拟滚动性能优化）
+    if (!isRecordShallowEqual(prevRecord, nextRecord)) {
       return false;
     }
     // reactiveParams 中的 form、index、namePath 已经在外层比较过了，无需重复比较
@@ -144,7 +144,7 @@ export const arePropsEqual = (prevProps, nextProps) => {
       // 函数引用变化说明闭包可能捕获了新的外部状态（如异步加载的 list），必须重渲染
       if (prevFunc !== nextFunc) return false;
       // 同引用函数，比较输入参数（纯函数假设：输入相同则输出相同）
-      return _isEqualWith(prevValues, nextValues, customEqualForFunction);
+      return isRecordShallowEqual(prevValues, nextValues);
     }
     return true; // 如果不是函数或只有一个是函数，认为相等
   };
@@ -187,15 +187,7 @@ export const arePropsEqual = (prevProps, nextProps) => {
   // 特殊处理：当使用自定义 component 函数时，比较整个 record 对象
   // 因为自定义组件可能依赖 record 中的其他字段（不只是当前列的 dataIndex）
   if (_isFunction(prevColumn?.component) || _isFunction(nextColumn?.component)) {
-    // 浅比较 record 的所有属性
-    const prevKeys = Object.keys(prevRecord || {});
-    const nextKeys = Object.keys(nextRecord || {});
-    if (prevKeys.length !== nextKeys.length) {
-      return false;
-    }
-
-    // 使用 some 方法代替 for 循环
-    if (prevKeys.some(key => prevRecord?.[key] !== nextRecord?.[key])) {
+    if (!isRecordShallowEqual(prevRecord, nextRecord)) {
       return false;
     }
   }

package/es/ProEditTable/utils/index.js

@@ -1,5 +1,4 @@
 import _isFunction from "lodash/isFunction";
-import _isEqual from "lodash/isEqual";
 import _isBoolean from "lodash/isBoolean";
 import _isArray from "lodash/isArray";
 import _cloneDeepWith from "lodash/cloneDeepWith";
@@ -9,7 +8,7 @@ import classnames from 'classnames';
 import { tools } from '@zat-design/utils';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { actions, defaultBtnNameMap, defaultSingleActionKeys, defaultMultipleActionKeys, defaultEditingActionKeys } from "./config";
-import { customValidate, getNamePath, splitNames, handleScrollToError, cloneDeepFilterNode } from "./tools";
+import { customValidate, getNamePath, splitNames, handleScrollToError, cloneDeepFilterNode, isRecordShallowEqual } from "./tools";
 import { filterInternalFields } from "../../ProForm/utils";
 import ProTooltip from "../../ProTooltip";
 import { RenderField, ActionButton } from "../components";
@@ -407,7 +406,7 @@ export const transformColumns = (columns = [], config, caches) => {
           if (record === prevRecord) {
             return true;
           }
-          return !_isEqual(record, prevRecord);
+          return !isRecordShallowEqual(record, prevRecord);
         }
         const key = item.dataIndex || item.key;
         if (!key) return true;

package/es/ProEditTable/utils/tools.js

@@ -35,6 +35,25 @@ export const buildTableRowKey = rowKey => {
   };
 };
 
+/**
+ * 表格行数据的浅比较：仅比较第一层字段引用/值，避免虚拟滚动时整行深比较开销。
+ * 行对象在本组件场景通常为扁平标量字段；同引用时由调用方另行处理。
+ */
+export const isRecordShallowEqual = (a, b) => {
+  if (a === b) {
+    return true;
+  }
+  if (!a || !b) {
+    return false;
+  }
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) {
+    return false;
+  }
+  return aKeys.every(key => a[key] === b[key]);
+};
+
 /**
  * 深层次对比两个对象且取出来差异值
  * @param object 比较对象

package/es/ProEditTable/utils/useShouldUpdateForTable.js

@@ -132,9 +132,10 @@ const useShouldUpdateForTable = props => {
   // 使用 ref 存储上一次的 rowParams，避免引用变化导致的重复调用
   const prevRowParamsRef = useRef(null);
 
-  // 只有当 rowParams 内容真正变化时才处理更新
-  // 或者是第一次初始化
-  const shouldProcess = !isInitializedRef.current || !_isEqualWith(prevRowParamsRef.current, rowParams, customEqualForFunction);
+  // 行数据引用 + 行索引均不变时跳过深比较（虚拟滚动常见路径）
+  const prevRowParams = prevRowParamsRef.current;
+  const rowDataUnchanged = isInitializedRef.current && prevRowParams?.[0] === rowParams[0] && prevRowParams?.[1]?.index === rowParams[1]?.index;
+  const shouldProcess = !isInitializedRef.current || !rowDataUnchanged && !_isEqualWith(prevRowParams, rowParams, customEqualForFunction);
   if (shouldProcess) {
     prevRowParamsRef.current = rowParams;
     isInitializedRef.current = true;

package/es/ProEnum/hooks/useEnumRequest.js

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react';
 import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
-import { diffCode, getEnumData, setEnumData, removeEnumData, cacheFieldNames, baseCacheKey, baseStorage } from "../utils";
+import { diffCode, getEnumData, setEnumData, removeEnumData, cacheFieldNames, cleanEnumResponse, baseCacheKey, baseStorage } from "../utils";
 import locale from "../../locale";
 import "../utils/eventCenter";
 const useEnumRequest = (props, dispatch) => {
@@ -209,19 +209,12 @@ const useEnumRequest = (props, dispatch) => {
           } else if (res.status === 200) {
             response = res.data;
           }
-          // 只返回fieldNames对象的key
-          if (clear) {
-            Object.keys(response).forEach(key => {
-              const options = [...response[key]];
-              if (ignoreCodes.includes(key)) {
-                response[key] = options;
-              } else {
-                response[key] = options.map(item => {
-                  return cacheFieldNames(fieldNames, item);
-                });
-              }
-            });
-          }
+          // 只返回fieldNames对象的key（非数组值会被安全跳过，避免展开报错）
+          response = cleanEnumResponse(response, {
+            clear,
+            ignoreCodes,
+            fieldNames
+          });
           cacheData.data = {
             ...cacheData.data,
             ...response

package/es/ProEnum/index.js

@@ -4,7 +4,7 @@ import _isString from "lodash/isString";
 import _isFunction from "lodash/isFunction";
 import _cloneDeep from "lodash/cloneDeep";
 import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
-import { message, Radio, Checkbox, Space } from 'antd';
+import { message, Radio, Checkbox, Space, Segmented } from 'antd';
 import React, { useState, useEffect, useMemo } from 'react';
 import ProSelect from "../ProSelect";
 import { useProConfig } from "../ProConfigProvider";
@@ -217,6 +217,17 @@ const ProEnum = props => {
           fieldValue: fieldValue,
           dataSource: list
         });
+      case 'Segmented':
+        return /*#__PURE__*/_jsx(Segmented, {
+          ..._omit(enumProps, ['fieldNames', 'showCodeName']),
+          options: list.map(item => ({
+            label: item[label],
+            value: item[fieldValue],
+            disabled: !!item.disabled
+          })),
+          value: value,
+          onChange: onChange
+        });
       default:
         return null;
     }

package/es/ProEnum/utils/index.js

@@ -313,4 +313,38 @@ export function cacheFieldNames(fieldNames, dataSource) {
     });
   }
   return result;
+}
+
+/**
+ * 对枚举请求返回的数据按 clear/fieldNames 进行清洗
+ * @param response 枚举数据 { code: DataOption[] }
+ * @param options clear 是否清洗、ignoreCodes 忽略清洗的 code、fieldNames 字段映射
+ * @returns 清洗后的新对象（不修改入参）
+ * @remark 某个 code 的值非数组时（脏缓存/异常返回）跳过清洗并原样透传，避免展开非可迭代值报错
+ */
+export function cleanEnumResponse(response, options) {
+  const {
+    clear = true,
+    ignoreCodes = [],
+    fieldNames
+  } = options;
+  if (!clear || typeof response !== 'object' || response === null) {
+    return response;
+  }
+  const result = {};
+  Object.keys(response).forEach(key => {
+    const value = response[key];
+    // 非数组值（脏缓存、异常返回等）无法展开清洗，原样透传，避免 not iterable 报错
+    if (!Array.isArray(value)) {
+      result[key] = value;
+      return;
+    }
+    const list = [...value];
+    if (ignoreCodes.includes(key)) {
+      result[key] = list;
+    } else {
+      result[key] = list.map(item => cacheFieldNames(fieldNames, item));
+    }
+  });
+  return result;
 }

package/es/ProForm/hooks/useForm.js

@@ -50,6 +50,15 @@ export const useForm = function (originForm, options) {
     return getFieldsValue(nameList, filterFunc);
   };
   const nextValidateFields = async (nameList, ...rest) => {
+    // 内部选项：行内联动等被动校验只想触发校验、不想滚动到报错位置；
+    // 全局/主动提交校验不传，保持滚动。提取后从传给 antd 底层的选项中剔除，避免污染原生 options。
+    // @ts-ignore
+    const skipScrollOnError = !!rest?.[0]?.__skipScrollOnError;
+    // @ts-ignore
+    const restForNative = rest?.[0] ? [(({
+      __skipScrollOnError,
+      ...opts
+    }) => opts)(rest[0]), ...rest.slice(1)] : rest;
     try {
       const isRecursive = rest?.[0]?.recursive;
       const stopOnFirstError = form?.__INTERNAL_CONFIG__?.stopOnFirstError;
@@ -62,18 +71,19 @@ export const useForm = function (originForm, options) {
         // eslint-disable-next-line no-restricted-syntax
         for (const field of allFields) {
           try {
-            // 创建不包含 stopOnFirstError 的选项
+            // 创建不包含 stopOnFirstError / 内部选项的选项
             // @ts-ignore
             const options = rest?.[0] ? {
               ...rest[0]
             } : {};
             delete options.stopOnFirstError;
+            delete options.__skipScrollOnError;
             // 验证单个字段
             // eslint-disable-next-line no-await-in-loop
             await validateFields([field], options);
           } catch (error) {
-            // 遇到错误，滚动到错误位置
-            if (scrollToError && error?.errorFields?.length) {
+            // 遇到错误，滚动到错误位置（skipScrollOnError 时跳过）
+            if (!skipScrollOnError && scrollToError && error?.errorFields?.length) {
               form.scrollToField(error.errorFields[0]?.name, {
                 block: 'center',
                 behavior: 'smooth'
@@ -112,7 +122,7 @@ export const useForm = function (originForm, options) {
         }
 
         // @ts-ignore
-        return await validateFields(validateNames, ...rest).then(values => {
+        return await validateFields(validateNames, ...restForNative).then(values => {
           return filterInternalFields(values, optimize);
         });
       }
@@ -124,17 +134,20 @@ export const useForm = function (originForm, options) {
           tablePagination?.click?.();
         }
       }
-      return await validateFields(nameList, ...rest).then(values => {
+      return await validateFields(nameList, ...restForNative).then(values => {
         return nameList ? values : nextGetFieldsValue();
       });
     } catch (error) {
-      if (scrollToError && error?.errorFields?.length && source === 'ProForm') {
-        form.scrollToField(error.errorFields[0]?.name, {
-          block: 'center',
-          behavior: 'smooth'
-        });
+      // skipScrollOnError（行内联动等被动校验）时不滚动，仅抛出错误
+      if (!skipScrollOnError) {
+        if (scrollToError && error?.errorFields?.length && source === 'ProForm') {
+          form.scrollToField(error.errorFields[0]?.name, {
+            block: 'center',
+            behavior: 'smooth'
+          });
+        }
+        handleScrollToErrorProEditTable();
       }
-      handleScrollToErrorProEditTable();
       throw error;
     }
   };

package/es/ProTable/components/RenderTabs/index.js

@@ -1,4 +1,4 @@
-import { Tabs, Form } from 'antd';
+import { Tabs, Form, Segmented } from 'antd';
 import { useMemo, useState, useEffect, memo } from 'react';
 import useEnum from "../../../ProEnum/hooks/useEnum";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -8,6 +8,8 @@ const RenderTabs = props => {
     dataSource = [],
     transformResponse,
     tabsProps,
+    segmentedProps,
+    mode = 'Segmented',
     name,
     formTableProps,
     transformParams
@@ -52,25 +54,38 @@ const RenderTabs = props => {
   if (!tabItems?.length) {
     return null;
   }
-  return /*#__PURE__*/_jsx(Tabs, {
-    className: "pro-table-tabs",
-    onChange: key => {
-      const fieldsValues = form?.getFieldsValue() || {};
-      setActiveKey(key);
-      form.setFieldValue(name, key);
-      let params = {
-        ...fieldsValues,
-        [name]: key
-      };
-      if (transformParams && typeof transformParams === 'function') {
-        params = transformParams(params);
-      }
-      onSearch?.(params);
-    },
-    type: "card",
-    ...tabsProps,
-    items: tabItems,
-    activeKey: activeKey
+  const handleChange = key => {
+    const fieldsValues = form?.getFieldsValue() || {};
+    setActiveKey(key);
+    form.setFieldValue(name, key);
+    let params = {
+      ...fieldsValues,
+      [name]: key
+    };
+    if (transformParams && typeof transformParams === 'function') {
+      params = transformParams(params);
+    }
+    onSearch?.(params);
+  };
+  if (mode === 'Tab') {
+    return /*#__PURE__*/_jsx(Tabs, {
+      className: "pro-table-tabs",
+      onChange: handleChange,
+      type: "card",
+      ...tabsProps,
+      items: tabItems,
+      activeKey: activeKey
+    });
+  }
+  return /*#__PURE__*/_jsx(Segmented, {
+    className: "pro-table-segmented",
+    options: tabItems.map(item => ({
+      label: item.label,
+      value: item.key
+    })),
+    ...segmentedProps,
+    onChange: value => handleChange(value),
+    value: activeKey
   });
 };
 export default /*#__PURE__*/memo(RenderTabs);

package/es/ProTable/style/index.less

@@ -644,3 +644,8 @@
     }
   }
 }
+
+// tabs mode 为 Segmented 时：宽度按内容自适应（靠左），与表格保持 8px 间距
+.pro-table-segmented {
+  margin-bottom: 8px;
+}

package/es/ProThemeTools/component/ProTools/index.js

@@ -1,6 +1,6 @@
 // 导入语句
-import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
-import { Button, Drawer, Radio, Switch } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { Button, ColorPicker, Drawer, Radio, Switch } from 'antd';
 import React, { useState, useEffect } from 'react';
 import { setThemes } from "../../utils/index";
 import { useProConfig } from "../../../ProConfigProvider";
@@ -31,46 +31,24 @@ const ProTools = ({
   } = useProConfig();
 
   // 状态和 Refs
-  const [active, setActive] = useState([{
-    color: '#006AFF',
-    active: true
-  }, {
-    color: '#00BC70',
-    active: false
-  }, {
-    color: '#FF8C16',
-    active: false
-  }, {
-    color: '#A00F20',
-    active: false
-  }, {
-    color: '#31AF96',
-    active: false
-  }]);
+  const [color, setColor] = useState('#006AFF');
 
   // 事件处理函数
-  const handleThemeColorClick = item => {
-    const array = active.map(activeItem => {
-      activeItem.active = false;
-      return {
-        color: activeItem.color,
-        active: item.color === activeItem.color
-      };
-    });
-    setActive(array);
+  const handleColorChange = hex => {
+    setColor(hex);
     setState({
       ...state,
-      zauiBrand: item.color
+      zauiBrand: hex
     });
     setThemes({
-      'zaui-brand': item.color
+      'zaui-brand': hex
     });
     dispatch({
       type: 'set',
       payload: {
         theme: {
-          primaryColor: item.color,
-          qiankunPrimaryColor: item.color
+          primaryColor: hex,
+          qiankunPrimaryColor: hex
         },
         forms: {}
       }
@@ -123,22 +101,7 @@ const ProTools = ({
     });
   };
   const handleResetClick = () => {
-    setActive([{
-      color: '#006AFF',
-      active: true
-    }, {
-      color: '#00BC70',
-      active: false
-    }, {
-      color: '#FF8C16',
-      active: false
-    }, {
-      color: '#A00F20',
-      active: false
-    }, {
-      color: '#31AF96',
-      active: false
-    }]);
+    setColor('#006AFF');
     onReset();
   };
 
@@ -155,14 +118,7 @@ const ProTools = ({
     // 优先使用 CSS 变量的值
     const finalZauiBrand = existingZauiBrand || zauiBrand;
     if (finalZauiBrand) {
-      const newArray = active.map(activeItem => {
-        activeItem.active = false;
-        return {
-          color: activeItem.color,
-          active: activeItem.color === finalZauiBrand.toLocaleUpperCase()
-        };
-      });
-      setActive(newArray);
+      setColor(finalZauiBrand);
       dispatch({
         type: 'set',
         payload: {
@@ -193,15 +149,10 @@ const ProTools = ({
       className: "pro-theme-tools-space",
       children: [/*#__PURE__*/_jsx("p", {
         children: `${locale.ProThemeTools.themeColor}`
-      }), /*#__PURE__*/_jsx("ul", {
-        className: "pro-theme-color",
-        children: active.map((item, index) => {
-          return /*#__PURE__*/_jsx("li", {
-            className: item.active ? 'active' : '',
-            onClick: () => handleThemeColorClick(item),
-            children: item.active ? /*#__PURE__*/_jsx(CheckOutlined, {}) : null
-          }, item.color);
-        })
+      }), /*#__PURE__*/_jsx(ColorPicker, {
+        value: color,
+        showText: true,
+        onChangeComplete: value => handleColorChange(value.toHexString())
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: "pro-theme-tools-space",