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) => {
 | 
			
		||||
  const { dataSource = [], onChange, ...others } = props
 | 
			
		||||
  const { dataSource = [], onChange, value, ...others } = props
 | 
			
		||||
  const children = createEnum(dataSource).map(item => {
 | 
			
		||||
    const { label, value, children = [], ...others } = item
 | 
			
		||||
    if (children.length) {
 | 
			
		||||
@ -78,6 +78,7 @@ export const Select: React.FC<SelectProps> = styled((props: SelectProps) => {
 | 
			
		||||
    <AntSelect
 | 
			
		||||
      className={props.className}
 | 
			
		||||
      {...others}
 | 
			
		||||
      value={value === null ? undefined : value}
 | 
			
		||||
      onChange={(value: any, options: any) => {
 | 
			
		||||
        onChange(
 | 
			
		||||
          value,
 | 
			
		||||
 | 
			
		||||
@ -40,8 +40,8 @@ export function Details(props: any) {
 | 
			
		||||
        <Descriptions bordered column={1}>
 | 
			
		||||
          {fields.map((field: any) => {
 | 
			
		||||
            return (
 | 
			
		||||
              <Descriptions.Item label={field.title||field.name}>
 | 
			
		||||
                <Field schema={field} value={get(data, field.name)}/>
 | 
			
		||||
              <Descriptions.Item labelStyle={{minWidth: 200}} label={field.title||field.name}>
 | 
			
		||||
                <Field viewType={'descriptions'} schema={field} value={get(data, field.name)}/>
 | 
			
		||||
              </Descriptions.Item>
 | 
			
		||||
            )
 | 
			
		||||
          })}
 | 
			
		||||
 | 
			
		||||
@ -1,9 +1,10 @@
 | 
			
		||||
 | 
			
		||||
import React, { useEffect, useState } from 'react';
 | 
			
		||||
import moment from 'moment';
 | 
			
		||||
import { Tag } from 'antd';
 | 
			
		||||
import { Tag, Popover } from 'antd';
 | 
			
		||||
import Icon from '@/components/icons';
 | 
			
		||||
import get from 'lodash/get';
 | 
			
		||||
import isEmpty from 'lodash/isEmpty';
 | 
			
		||||
 | 
			
		||||
const InterfaceTypes = new Map<string, any>();
 | 
			
		||||
 | 
			
		||||
@ -32,7 +33,20 @@ export function StringField(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 (
 | 
			
		||||
    <>{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) {
 | 
			
		||||
  const { schema: { precision }, value } = props;
 | 
			
		||||
  if (!isNumber(value)) {
 | 
			
		||||
    return null;
 | 
			
		||||
  }
 | 
			
		||||
  return (
 | 
			
		||||
    <>{value}%</>
 | 
			
		||||
  );
 | 
			
		||||
@ -94,6 +121,9 @@ export function DataSourceField(props: any) {
 | 
			
		||||
  const { schema: { dataSource = [] }, value } = props;
 | 
			
		||||
  const items = toFlat(dataSource);
 | 
			
		||||
  console.log(items);
 | 
			
		||||
  if (isEmpty(value)) {
 | 
			
		||||
    return null;
 | 
			
		||||
  }
 | 
			
		||||
  if (Array.isArray(value)) {
 | 
			
		||||
    return value.map(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) {
 | 
			
		||||
  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 {
 | 
			
		||||
      ...field,
 | 
			
		||||
      ...(field.component||{}),
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user