Nocobase next color select (#157)
* feat: add useCompile hook * feat: add ColorSelect component into schema component
This commit is contained in:
		
							parent
							
								
									58683a7657
								
							
						
					
					
						commit
						6ef6dd7717
					
				@ -0,0 +1,51 @@
 | 
				
			|||||||
 | 
					import { LoadingOutlined } from '@ant-design/icons';
 | 
				
			||||||
 | 
					import { connect, mapProps, mapReadPretty } from '@formily/react';
 | 
				
			||||||
 | 
					import { Select, Tag } from 'antd';
 | 
				
			||||||
 | 
					import React from 'react';
 | 
				
			||||||
 | 
					import { useCompile } from '../../hooks/useCompile';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const colors = {
 | 
				
			||||||
 | 
					  red: '{{t("Red")}}',
 | 
				
			||||||
 | 
					  magenta: '{{t("Magenta")}}',
 | 
				
			||||||
 | 
					  volcano: '{{t("Volcano")}}',
 | 
				
			||||||
 | 
					  orange: '{{t("Orange")}}',
 | 
				
			||||||
 | 
					  gold: '{{t("Gold")}}',
 | 
				
			||||||
 | 
					  lime: '{{t("Lime")}}',
 | 
				
			||||||
 | 
					  green: '{{t("Green")}}',
 | 
				
			||||||
 | 
					  cyan: '{{t("Cyan")}}',
 | 
				
			||||||
 | 
					  blue: '{{t("Blue")}}',
 | 
				
			||||||
 | 
					  geekblue: '{{t("Geek blue")}}',
 | 
				
			||||||
 | 
					  purple: '{{t("Purple")}}',
 | 
				
			||||||
 | 
					  default: '{{t("Default")}}',
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export const ColorSelect = connect(
 | 
				
			||||||
 | 
					  (props) => {
 | 
				
			||||||
 | 
					    const compile = useCompile();
 | 
				
			||||||
 | 
					    return (
 | 
				
			||||||
 | 
					      <Select {...props}>
 | 
				
			||||||
 | 
					        {Object.keys(colors).map((color) => (
 | 
				
			||||||
 | 
					          <Select.Option value={color}>
 | 
				
			||||||
 | 
					            <Tag color={color}>{compile(colors[color] || colors.default)}</Tag>
 | 
				
			||||||
 | 
					          </Select.Option>
 | 
				
			||||||
 | 
					        ))}
 | 
				
			||||||
 | 
					      </Select>
 | 
				
			||||||
 | 
					    );
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  mapProps((props, field) => {
 | 
				
			||||||
 | 
					    return {
 | 
				
			||||||
 | 
					      ...props,
 | 
				
			||||||
 | 
					      suffix: <span>{field?.['loading'] || field?.['validating'] ? <LoadingOutlined /> : props.suffix}</span>,
 | 
				
			||||||
 | 
					    };
 | 
				
			||||||
 | 
					  }),
 | 
				
			||||||
 | 
					  mapReadPretty((props) => {
 | 
				
			||||||
 | 
					    const compile = useCompile();
 | 
				
			||||||
 | 
					    const { value } = props;
 | 
				
			||||||
 | 
					    if (!colors[value]) {
 | 
				
			||||||
 | 
					      return null;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    return <Tag color={value}>{compile(colors[value] || colors.default)}</Tag>;
 | 
				
			||||||
 | 
					  }),
 | 
				
			||||||
 | 
					);
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default ColorSelect;
 | 
				
			||||||
@ -0,0 +1,41 @@
 | 
				
			|||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * title: 勾选
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					import { FormItem } from '@formily/antd';
 | 
				
			||||||
 | 
					import { ColorSelect, SchemaComponent, SchemaComponentProvider } from '@nocobase/client';
 | 
				
			||||||
 | 
					import React from 'react';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const schema = {
 | 
				
			||||||
 | 
					  type: 'object',
 | 
				
			||||||
 | 
					  properties: {
 | 
				
			||||||
 | 
					    input: {
 | 
				
			||||||
 | 
					      type: 'boolean',
 | 
				
			||||||
 | 
					      title: `编辑模式`,
 | 
				
			||||||
 | 
					      'x-decorator': 'FormItem',
 | 
				
			||||||
 | 
					      'x-component': 'ColorSelect',
 | 
				
			||||||
 | 
					      'x-reactions': {
 | 
				
			||||||
 | 
					        target: 'read',
 | 
				
			||||||
 | 
					        fulfill: {
 | 
				
			||||||
 | 
					          state: {
 | 
				
			||||||
 | 
					            value: '{{$self.value}}',
 | 
				
			||||||
 | 
					          },
 | 
				
			||||||
 | 
					        },
 | 
				
			||||||
 | 
					      },
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					    read: {
 | 
				
			||||||
 | 
					      type: 'boolean',
 | 
				
			||||||
 | 
					      title: `阅读模式`,
 | 
				
			||||||
 | 
					      'x-read-pretty': true,
 | 
				
			||||||
 | 
					      'x-decorator': 'FormItem',
 | 
				
			||||||
 | 
					      'x-component': 'ColorSelect',
 | 
				
			||||||
 | 
					    },
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default () => {
 | 
				
			||||||
 | 
					  return (
 | 
				
			||||||
 | 
					    <SchemaComponentProvider components={{ ColorSelect, FormItem }}>
 | 
				
			||||||
 | 
					      <SchemaComponent schema={schema} />
 | 
				
			||||||
 | 
					    </SchemaComponentProvider>
 | 
				
			||||||
 | 
					  );
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
@ -6,3 +6,9 @@ group:
 | 
				
			|||||||
---
 | 
					---
 | 
				
			||||||
 | 
					
 | 
				
			||||||
# ColorSelect
 | 
					# ColorSelect
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## Examples
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					### ColorSelect usage
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<code src="./demos/demo1.tsx" />
 | 
				
			||||||
 | 
				
			|||||||
@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					export * from './ColorSelect';
 | 
				
			||||||
@ -1,7 +1,8 @@
 | 
				
			|||||||
export * from './checkbox';
 | 
					 | 
				
			||||||
export * from './action';
 | 
					export * from './action';
 | 
				
			||||||
 | 
					export * from './block-item';
 | 
				
			||||||
 | 
					export * from './checkbox';
 | 
				
			||||||
 | 
					export * from './color-select';
 | 
				
			||||||
 | 
					export * from './dnd-context';
 | 
				
			||||||
export * from './form';
 | 
					export * from './form';
 | 
				
			||||||
export * from './form-item';
 | 
					export * from './form-item';
 | 
				
			||||||
export * from './block-item';
 | 
					 | 
				
			||||||
export * from './dnd-context';
 | 
					 | 
				
			||||||
export * from './grid';
 | 
					export * from './grid';
 | 
				
			||||||
 | 
				
			|||||||
@ -1,3 +1,4 @@
 | 
				
			|||||||
export * from './useAttach';
 | 
					export * from './useAttach';
 | 
				
			||||||
 | 
					export * from './useCompile';
 | 
				
			||||||
export * from './useDesignable';
 | 
					export * from './useDesignable';
 | 
				
			||||||
export * from './useFieldProps';
 | 
					export * from './useFieldProps';
 | 
				
			||||||
 | 
				
			|||||||
							
								
								
									
										9
									
								
								packages/client/src/schema-component/hooks/useCompile.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										9
									
								
								packages/client/src/schema-component/hooks/useCompile.ts
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,9 @@
 | 
				
			|||||||
 | 
					import { compile } from '@formily/json-schema/lib/compiler';
 | 
				
			||||||
 | 
					import { useTranslation } from 'react-i18next';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export const useCompile = () => {
 | 
				
			||||||
 | 
					  const { t } = useTranslation();
 | 
				
			||||||
 | 
					  return (source: any) => {
 | 
				
			||||||
 | 
					    return compile(source, { t });
 | 
				
			||||||
 | 
					  };
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user