feat: improve field components
This commit is contained in:
		
							parent
							
								
									8bdbd804f0
								
							
						
					
					
						commit
						5fdbc1b10d
					
				@ -44,7 +44,7 @@ const createEnum = (enums: any) => {
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export const Select: React.FC<SelectProps> = styled((props: SelectProps) => {
 | 
					export const Select: React.FC<SelectProps> = styled((props: SelectProps) => {
 | 
				
			||||||
  const { dataSource = [], onChange, ...others } = props
 | 
					  const { dataSource = [], onChange, value, ...others } = props
 | 
				
			||||||
  const children = createEnum(dataSource).map(item => {
 | 
					  const children = createEnum(dataSource).map(item => {
 | 
				
			||||||
    const { label, value, children = [], ...others } = item
 | 
					    const { label, value, children = [], ...others } = item
 | 
				
			||||||
    if (children.length) {
 | 
					    if (children.length) {
 | 
				
			||||||
@ -78,6 +78,7 @@ export const Select: React.FC<SelectProps> = styled((props: SelectProps) => {
 | 
				
			|||||||
    <AntSelect
 | 
					    <AntSelect
 | 
				
			||||||
      className={props.className}
 | 
					      className={props.className}
 | 
				
			||||||
      {...others}
 | 
					      {...others}
 | 
				
			||||||
 | 
					      value={value === null ? undefined : value}
 | 
				
			||||||
      onChange={(value: any, options: any) => {
 | 
					      onChange={(value: any, options: any) => {
 | 
				
			||||||
        onChange(
 | 
					        onChange(
 | 
				
			||||||
          value,
 | 
					          value,
 | 
				
			||||||
 | 
				
			|||||||
@ -40,8 +40,8 @@ export function Details(props: any) {
 | 
				
			|||||||
        <Descriptions bordered column={1}>
 | 
					        <Descriptions bordered column={1}>
 | 
				
			||||||
          {fields.map((field: any) => {
 | 
					          {fields.map((field: any) => {
 | 
				
			||||||
            return (
 | 
					            return (
 | 
				
			||||||
              <Descriptions.Item label={field.title||field.name}>
 | 
					              <Descriptions.Item labelStyle={{minWidth: 200}} label={field.title||field.name}>
 | 
				
			||||||
                <Field schema={field} value={get(data, field.name)}/>
 | 
					                <Field viewType={'descriptions'} schema={field} value={get(data, field.name)}/>
 | 
				
			||||||
              </Descriptions.Item>
 | 
					              </Descriptions.Item>
 | 
				
			||||||
            )
 | 
					            )
 | 
				
			||||||
          })}
 | 
					          })}
 | 
				
			||||||
 | 
				
			|||||||
@ -1,9 +1,10 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
import React, { useEffect, useState } from 'react';
 | 
					import React, { useEffect, useState } from 'react';
 | 
				
			||||||
import moment from 'moment';
 | 
					import moment from 'moment';
 | 
				
			||||||
import { Tag } from 'antd';
 | 
					import { Tag, Popover } from 'antd';
 | 
				
			||||||
import Icon from '@/components/icons';
 | 
					import Icon from '@/components/icons';
 | 
				
			||||||
import get from 'lodash/get';
 | 
					import get from 'lodash/get';
 | 
				
			||||||
 | 
					import isEmpty from 'lodash/isEmpty';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const InterfaceTypes = new Map<string, any>();
 | 
					const InterfaceTypes = new Map<string, any>();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -32,7 +33,20 @@ export function StringField(props: any) {
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function TextareaField(props: any) {
 | 
					export function TextareaField(props: any) {
 | 
				
			||||||
  const { value } = props;
 | 
					  const { value, viewType } = props;
 | 
				
			||||||
 | 
					  if (!value) {
 | 
				
			||||||
 | 
					    return null;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  if (viewType !== 'table') {
 | 
				
			||||||
 | 
					    return value;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  if (value.length > 20) {
 | 
				
			||||||
 | 
					    return (
 | 
				
			||||||
 | 
					      <Popover content={<div onClick={(e) => {
 | 
				
			||||||
 | 
					        e.stopPropagation();
 | 
				
			||||||
 | 
					      }} style={{maxWidth: 300}}>{value}</div>}>{value.substring(0, 15)}...</Popover>
 | 
				
			||||||
 | 
					    );
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <>{value}</>
 | 
					    <>{value}</>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
@ -52,8 +66,21 @@ export function NumberField(props: any) {
 | 
				
			|||||||
  );
 | 
					  );
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export function isNumber(num) {
 | 
				
			||||||
 | 
					  if (typeof num === 'number') {
 | 
				
			||||||
 | 
					    return num - num === 0;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  if (typeof num === 'string' && num.trim() !== '') {
 | 
				
			||||||
 | 
					    return Number.isFinite ? Number.isFinite(+num) : isFinite(+num);
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					  return false;
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export function PercentField(props: any) {
 | 
					export function PercentField(props: any) {
 | 
				
			||||||
  const { schema: { precision }, value } = props;
 | 
					  const { schema: { precision }, value } = props;
 | 
				
			||||||
 | 
					  if (!isNumber(value)) {
 | 
				
			||||||
 | 
					    return null;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <>{value}%</>
 | 
					    <>{value}%</>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
@ -94,6 +121,9 @@ export function DataSourceField(props: any) {
 | 
				
			|||||||
  const { schema: { dataSource = [] }, value } = props;
 | 
					  const { schema: { dataSource = [] }, value } = props;
 | 
				
			||||||
  const items = toFlat(dataSource);
 | 
					  const items = toFlat(dataSource);
 | 
				
			||||||
  console.log(items);
 | 
					  console.log(items);
 | 
				
			||||||
 | 
					  if (isEmpty(value)) {
 | 
				
			||||||
 | 
					    return null;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
  if (Array.isArray(value)) {
 | 
					  if (Array.isArray(value)) {
 | 
				
			||||||
    return value.map(val => {
 | 
					    return value.map(val => {
 | 
				
			||||||
      const item = items.find(item => item.value === val);
 | 
					      const item = items.find(item => item.value === val);
 | 
				
			||||||
 | 
				
			|||||||
@ -56,7 +56,7 @@ export const components = ({data = {}, rowKey, mutate, onMoved}: Props) => {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
export function fields2columns(fields) {
 | 
					export function fields2columns(fields) {
 | 
				
			||||||
  const columns: any[] = fields.map(field => {
 | 
					  const columns: any[] = fields.map(field => {
 | 
				
			||||||
    field.render = (value) => field.interface === 'sort' ? <DragHandle/> : <Field schema={field} value={value}/>;
 | 
					    field.render = (value) => field.interface === 'sort' ? <DragHandle/> : <Field viewType={'table'} schema={field} value={value}/>;
 | 
				
			||||||
    return {
 | 
					    return {
 | 
				
			||||||
      ...field,
 | 
					      ...field,
 | 
				
			||||||
      ...(field.component||{}),
 | 
					      ...(field.component||{}),
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user