fix: 暂存处理

packages/li-p2/src/LayerAttribute/components/ScaleSelector/constants.ts

@@ -16,4 +16,9 @@ export const DEHAULT_OPTIONS: ColorScaleSelectOptionType[] = [
     value: 'cat',
     type: 'string',
   },
+  {
+    label: '自定义',
+    value: 'custom',
+    type: 'all',
+  },
 ];

packages/li-p2/src/LayerAttribute/components/ScaleSelector/demos/default.tsx

@@ -0,0 +1,53 @@
+import { ScaleSelector } from '@antv/li-p2';
+import { Form, FormItem } from '@formily/antd-v5';
+import type { Form as FormInstance } from '@formily/core';
+import { createForm, onFormValuesChange } from '@formily/core';
+import { createSchemaField, FormConsumer } from '@formily/react';
+import React from 'react';
+
+const form = createForm({
+  initialValues: {},
+  effects() {
+    onFormValuesChange((formIns: FormInstance<any>) => {
+      console.log('formIns.values: ', formIns.values);
+    });
+  },
+});
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    ScaleSelector,
+  },
+});
+
+const schema = {
+  type: 'object',
+  properties: {
+    fillColorScale: {
+      type: 'string',
+      title: '颜色划分',
+      'x-decorator': 'FormItem',
+      'x-component': 'ScaleSelector',
+      'x-component-props': {
+        placeholder: '请选择',
+        type: 'number',
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <Form form={form} style={{ width: '300px' }}>
+      <SchemaField schema={schema} />
+      <FormConsumer>
+        {() => (
+          <code>
+            <pre>{JSON.stringify(form.values, null, 2)}</pre>
+          </code>
+        )}
+      </FormConsumer>
+    </Form>
+  );
+};

packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.md

@@ -0,0 +1,24 @@
+---
+toc: content
+order: 10
+group:
+  title: formily 组件
+  order: 1
+nav:
+  title: 组件
+  path: /components
+---
+
+# 颜色选择器 - ColorPicker
+
+## 介绍
+
+用于单个颜色选择场景
+
+## 代码演示
+
+### 默认示例
+
+<code src="./demos/default.tsx"></code>
+
+<API></API>

packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx

@@ -2,20 +2,28 @@ import { connect } from '@formily/react';
 import type { SelectProps } from 'antd';
 import { Select } from 'antd';
 import type { DefaultOptionType } from 'antd/es/select';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import cls from 'classnames';
+import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import { DEHAULT_OPTIONS } from './constants';
+import useStyle from './style';
 
 export interface ColorScaleSelectOptionType extends DefaultOptionType {
-  type: 'string' | 'number';
+  type: 'string' | 'number' | 'all';
 }
 
 export type ScaleSelectorProps = SelectProps<string, ColorScaleSelectOptionType> & { type: 'string' | 'number' };
 
 const Internal = (props: ScaleSelectorProps) => {
+  const prefixCls = usePrefixCls('formily-scale-selector', props);
+  const [open, setOpen] = useState(true);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [value, setValue] = useState('');
+
   const selectOptions = useMemo(() => {
     const options = props.options ?? DEHAULT_OPTIONS;
     const type = ['string', 'number'].includes(props.type) ? props.type : 'string';
-    return options.filter((item) => item.type === type);
+    return options.filter((item) => item.type === type || item.type === 'all');
   }, [props.type, props.options]);
 
   useEffect(() => {
@@ -27,16 +35,41 @@ const Internal = (props: ScaleSelectorProps) => {
     }
   }, [selectOptions]);
 
-  return (
-    <Select {...props}>
-      {selectOptions?.map((item, index) => {
+  const onTypeChange = (type: string) => {
+    setValue(type);
+  };
+
+  return wrapSSR(
+    <Select
+      {...props}
+      open={open}
+      className={cls(`${prefixCls}`, hashId)}
+      // onDropdownVisibleChange={(visible) => setOpen(visible)}
+      dropdownRender={() => {
         return (
-          <Select.Option value={item.value} key={index.toString()}>
-            {item.label}
-          </Select.Option>
+          <div className={cls(`${prefixCls}-dropdown`, hashId)}>
+            {value !== 'custom' && (
+              <>
+                {selectOptions.map((item) => {
+                  return (
+                    <div
+                      className={cls(`${prefixCls}-select-option`, hashId, {
+                        [`${prefixCls}-select-option-selected`]: item.value === value,
+                      })}
+                      key={item?.value?.toString()}
+                      onClick={() => onTypeChange(item.value as string)}
+                    >
+                      {item.label}
+                    </div>
+                  );
+                })}
+              </>
+            )}
+            {value}
+          </div>
         );
-      })}
-    </Select>
+      }}
+    />,
   );
 };
 

packages/li-p2/src/LayerAttribute/components/ScaleSelector/style.ts

@@ -0,0 +1,30 @@
+import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
+
+export default genStyleHook('scale-selector', (token) => {
+  const { componentCls, antCls, controlItemBgHover, controlItemBgActive, colorTextBase } = token;
+
+  return {
+    [componentCls]: {},
+
+    [`${componentCls}-dropdown`]: {
+      padding: '4px',
+    },
+
+    [`${componentCls}-select-option`]: {
+      cursor: 'pointer',
+      height: '32px',
+      padding: '5px 12px',
+      borderRadius: '4px',
+      fontSize: '14px',
+      color: colorTextBase,
+
+      '&:hover': {
+        background: controlItemBgHover,
+      },
+    },
+
+    [`${componentCls}-select-option-selected`]: {
+      background: controlItemBgActive,
+    },
+  };
+});