feat: improve styling
This commit is contained in:
		
							parent
							
								
									1c30baffcf
								
							
						
					
					
						commit
						e82139cfc8
					
				@ -30,52 +30,52 @@ const usePlaceholder = (value?: any) => {
 | 
				
			|||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const Input: React.FC<InputProps> = (props) => {
 | 
					const Input: React.FC<InputProps> = (props) => {
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-text', props);
 | 
					  const prefixCls = usePrefixCls('description-input', props);
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <Space className={cls(prefixCls, props.className)} style={props.style}>
 | 
					    <div className={cls(prefixCls, props.className)} style={props.style}>
 | 
				
			||||||
      {props.addonBefore}
 | 
					      {props.addonBefore}
 | 
				
			||||||
      {props.prefix}
 | 
					      {props.prefix}
 | 
				
			||||||
      {usePlaceholder(props.value)}
 | 
					      {usePlaceholder(props.value)}
 | 
				
			||||||
      {props.suffix}
 | 
					      {props.suffix}
 | 
				
			||||||
      {props.addonAfter}
 | 
					      {props.addonAfter}
 | 
				
			||||||
    </Space>
 | 
					    </div>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const URL: React.FC<InputProps> = (props) => {
 | 
					const URL: React.FC<InputProps> = (props) => {
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-text', props);
 | 
					  const prefixCls = usePrefixCls('description-url', props);
 | 
				
			||||||
  const content = props.value && (
 | 
					  const content = props.value && (
 | 
				
			||||||
    <a target={'_blank'} href={props.value as any}>
 | 
					    <a target={'_blank'} href={props.value as any}>
 | 
				
			||||||
      {props.value}
 | 
					      {props.value}
 | 
				
			||||||
    </a>
 | 
					    </a>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <Space className={cls(prefixCls, props.className)} style={props.style}>
 | 
					    <div className={cls(prefixCls, props.className)} style={props.style}>
 | 
				
			||||||
      {props.addonBefore}
 | 
					      {props.addonBefore}
 | 
				
			||||||
      {props.prefix}
 | 
					      {props.prefix}
 | 
				
			||||||
      {content}
 | 
					      {content}
 | 
				
			||||||
      {props.suffix}
 | 
					      {props.suffix}
 | 
				
			||||||
      {props.addonAfter}
 | 
					      {props.addonAfter}
 | 
				
			||||||
    </Space>
 | 
					    </div>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const InputNumber: React.FC<InputProps & InputNumberProps> = (props) => {
 | 
					const InputNumber: React.FC<InputProps & InputNumberProps> = (props) => {
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-text', props);
 | 
					  const prefixCls = usePrefixCls('description-input-number', props);
 | 
				
			||||||
  const value = usePlaceholder(props.value);
 | 
					  const value = usePlaceholder(props.value);
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <Space className={cls(prefixCls, props.className)} style={props.style}>
 | 
					    <div className={cls(prefixCls, props.className)} style={props.style}>
 | 
				
			||||||
      {props.addonBefore}
 | 
					      {props.addonBefore}
 | 
				
			||||||
      {props.prefix}
 | 
					      {props.prefix}
 | 
				
			||||||
      {props.formatter ? props.formatter(value) : value}
 | 
					      {props.formatter ? props.formatter(value) : value}
 | 
				
			||||||
      {props.suffix}
 | 
					      {props.suffix}
 | 
				
			||||||
      {props.addonAfter}
 | 
					      {props.addonAfter}
 | 
				
			||||||
    </Space>
 | 
					    </div>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const TextArea: React.FC<any> = (props) => {
 | 
					const TextArea: React.FC<any> = (props) => {
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-text', props);
 | 
					  const prefixCls = usePrefixCls('description-textarea', props);
 | 
				
			||||||
  const ellipsis = props.ellipsis === true ? {} : props.ellipsis;
 | 
					  const ellipsis = props.ellipsis === true ? {} : props.ellipsis;
 | 
				
			||||||
  const content = props.ellipsis ? (
 | 
					  const content = props.ellipsis ? (
 | 
				
			||||||
    <div>
 | 
					    <div>
 | 
				
			||||||
@ -100,19 +100,19 @@ const TextArea: React.FC<any> = (props) => {
 | 
				
			|||||||
    usePlaceholder(props.value)
 | 
					    usePlaceholder(props.value)
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <Space className={cls(prefixCls, props.className)} style={props.style}>
 | 
					    <div className={cls(prefixCls, props.className)} style={props.style}>
 | 
				
			||||||
      {props.addonBefore}
 | 
					      {props.addonBefore}
 | 
				
			||||||
      {props.prefix}
 | 
					      {props.prefix}
 | 
				
			||||||
      {content}
 | 
					      {content}
 | 
				
			||||||
      {props.suffix}
 | 
					      {props.suffix}
 | 
				
			||||||
      {props.addonAfter}
 | 
					      {props.addonAfter}
 | 
				
			||||||
    </Space>
 | 
					    </div>
 | 
				
			||||||
  );
 | 
					  );
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const Select: React.FC<SelectProps<any>> = observer((props) => {
 | 
					const Select: React.FC<SelectProps<any>> = observer((props) => {
 | 
				
			||||||
  const field = useField<Formily.Core.Models.Field>();
 | 
					  const field = useField<Formily.Core.Models.Field>();
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-text', props);
 | 
					  const prefixCls = usePrefixCls('description-select', props);
 | 
				
			||||||
  const dataSource: any[] = field?.dataSource?.length
 | 
					  const dataSource: any[] = field?.dataSource?.length
 | 
				
			||||||
    ? field.dataSource
 | 
					    ? field.dataSource
 | 
				
			||||||
    : props?.options?.length
 | 
					    : props?.options?.length
 | 
				
			||||||
@ -156,7 +156,7 @@ const Select: React.FC<SelectProps<any>> = observer((props) => {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
const ObjectSelect: React.FC<SelectProps<any>> = observer((props) => {
 | 
					const ObjectSelect: React.FC<SelectProps<any>> = observer((props) => {
 | 
				
			||||||
  const field = useField<Formily.Core.Models.Field>();
 | 
					  const field = useField<Formily.Core.Models.Field>();
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-text', props);
 | 
					  const prefixCls = usePrefixCls('description-select', props);
 | 
				
			||||||
  const dataSource: any[] = field?.dataSource?.length
 | 
					  const dataSource: any[] = field?.dataSource?.length
 | 
				
			||||||
    ? field.dataSource
 | 
					    ? field.dataSource
 | 
				
			||||||
    : props?.options?.length
 | 
					    : props?.options?.length
 | 
				
			||||||
@ -201,7 +201,7 @@ const ObjectSelect: React.FC<SelectProps<any>> = observer((props) => {
 | 
				
			|||||||
const TreeSelect: React.FC<TreeSelectProps<any>> = observer((props) => {
 | 
					const TreeSelect: React.FC<TreeSelectProps<any>> = observer((props) => {
 | 
				
			||||||
  const field = useField<Formily.Core.Models.Field>();
 | 
					  const field = useField<Formily.Core.Models.Field>();
 | 
				
			||||||
  const placeholder = usePlaceholder();
 | 
					  const placeholder = usePlaceholder();
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-text', props);
 | 
					  const prefixCls = usePrefixCls('description-tree-select', props);
 | 
				
			||||||
  const dataSource = field?.dataSource?.length
 | 
					  const dataSource = field?.dataSource?.length
 | 
				
			||||||
    ? field.dataSource
 | 
					    ? field.dataSource
 | 
				
			||||||
    : props?.options?.length
 | 
					    : props?.options?.length
 | 
				
			||||||
@ -259,7 +259,7 @@ const TreeSelect: React.FC<TreeSelectProps<any>> = observer((props) => {
 | 
				
			|||||||
const Cascader: React.FC<CascaderProps> = observer((props) => {
 | 
					const Cascader: React.FC<CascaderProps> = observer((props) => {
 | 
				
			||||||
  const field = useField<Formily.Core.Models.Field>();
 | 
					  const field = useField<Formily.Core.Models.Field>();
 | 
				
			||||||
  const placeholder = usePlaceholder();
 | 
					  const placeholder = usePlaceholder();
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-text', props);
 | 
					  const prefixCls = usePrefixCls('description-cascader', props);
 | 
				
			||||||
  const dataSource: any[] = field?.dataSource?.length
 | 
					  const dataSource: any[] = field?.dataSource?.length
 | 
				
			||||||
    ? field.dataSource
 | 
					    ? field.dataSource
 | 
				
			||||||
    : props?.options?.length
 | 
					    : props?.options?.length
 | 
				
			||||||
@ -302,7 +302,7 @@ const DatePicker: React.FC<DatePickerProps> = (props: any) => {
 | 
				
			|||||||
    return <div></div>;
 | 
					    return <div></div>;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
  const placeholder = usePlaceholder();
 | 
					  const placeholder = usePlaceholder();
 | 
				
			||||||
  const prefixCls = usePrefixCls('description-text', props);
 | 
					  const prefixCls = usePrefixCls('description-date-picker', props);
 | 
				
			||||||
  const getDefaultFormat = () => {
 | 
					  const getDefaultFormat = () => {
 | 
				
			||||||
    const { dateFormat, showTime, timeFormat } = props;
 | 
					    const { dateFormat, showTime, timeFormat } = props;
 | 
				
			||||||
    let format = dateFormat;
 | 
					    let format = dateFormat;
 | 
				
			||||||
 | 
				
			|||||||
@ -39,6 +39,13 @@
 | 
				
			|||||||
  .ant-formily-item-label {
 | 
					  .ant-formily-item-label {
 | 
				
			||||||
    min-height: 0 !important;
 | 
					    min-height: 0 !important;
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .ant-description-input {
 | 
				
			||||||
 | 
					    width: 100%;
 | 
				
			||||||
 | 
					    white-space: nowrap;
 | 
				
			||||||
 | 
					    overflow: hidden;
 | 
				
			||||||
 | 
					    text-overflow: ellipsis;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
.nb-kanban-drag-overlay {
 | 
					.nb-kanban-drag-overlay {
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
		Reference in New Issue
	
	Block a user