Commit e5d4c28b authored by 李晓静's avatar 李晓静

底层组件修改

parent 0413ff18
import React from 'react';
import React, { useRef } from 'react';
import { DatePicker } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import styles from './styles.less';
export const ApolloDate = (props: any) => {
const { onChange } = props;
const { origin, onChange } = props;
const selfProps = antiAssign(props, ['onChange', 'columnConfig']);
const isOpen = useRef();
const changeValue = (date, dateString) => {
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function' && !isOpen.current) {
onBlurFn({ ...props, value: date });
}
onChange(date, dateString);
}
};
return (
const inputOnBlurFn = (e: boolean) => {
isOpen.current = e;
};
return (origin === 'editForm' ?
<DatePicker
className={styles.date}
// value={inputVal}
dropdownClassName={styles.dropdownClassName}
popupStyle={{ width: '350px' }}
{...selfProps}
onChange={changeValue}
onOpenChange={inputOnBlurFn}
/> :
<DatePicker
className={styles.date}
dropdownClassName={styles.dropdownClassName}
......
import React from 'react';
import React, { useState, useEffect } from 'react';
import { Input } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import { ApolloInputProps } from '../editInterface';
import { Consumer } from '../../../context';
export const ApolloInput = (props: ApolloInputProps) => {
const { maxLength, onChange, value, style } = props;
const { maxLength, onChange, value, style, origin } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'style', 'onEmitChange']);
const [inputVal, setInputVal] = useState(value)
useEffect(() => {
setInputVal(value);
}, [value]);
const changeValue = (value: any) => {
if (typeof onChange === 'function') {
onChange(value);
}
};
const inputOnBlurFn = () => {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
}
};
const newStyle: any = {
...style,
};
......@@ -33,18 +42,31 @@ export const ApolloInput = (props: ApolloInputProps) => {
{({ locale }) => {
return (
<div className={styles.container}>
<Input
className={styles.input}
style={newStyle}
{...selfProps}
onChange={(e) => {
changeValue(e.target.value);
}}
/>
{
origin === 'editForm' ? <Input
className={styles.input}
style={newStyle}
{...selfProps}
value={inputVal}
onBlur={inputOnBlurFn}
onChange={(e) => {
changeValue(e.target.value);
setInputVal(e.target.value)
}}
/> : <Input
className={styles.input}
style={newStyle}
{...selfProps}
onChange={(e) => {
changeValue(e.target.value);
}}
/>
}
{!!maxLength && (
<span className={styles.wordNumber} style={wordNumStyle}>{`${locale.alreadyInput} ${
(value || '').length
}/${maxLength}`}</span>
}/${maxLength}`}</span>
)}
</div>
);
......
import React from 'react';
import React, { useState, useEffect } from 'react';
import { InputNumber } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { ApolloNumberProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
export const ApolloNumber = (props: ApolloNumberProps) => {
const { onChange, origin }: any = props;
const { onChange, origin, value }: any = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange']);
const [inputVal, setInputVal] = useState(value)
useEffect(() => {
setInputVal(value);
}, [value]);
const changeValue = (newValue: any) => {
if (typeof onChange === 'function') {
onChange(newValue);
setInputVal(inputVal);
}
};
const { onEmitChange, ...o } = selfProps;
......@@ -17,5 +23,12 @@ export const ApolloNumber = (props: ApolloNumberProps) => {
if (origin === 'editForm') {
style.height = '32px';
}
return <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
const inputOnBlurFn = () => {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
}
};
return origin === 'editForm' ?
<InputNumber value={inputVal} onBlur={inputOnBlurFn} className={styles.number} style={style} {...o} onChange={changeValue} />
: <InputNumber className={styles.number} style={style} {...o} onChange={changeValue} />;
};
import React from 'react';
import { onBlurFn } from '../onBlurFn';
import { ApolloNumber } from '../number';
import { isNumber } from '../../../../utils/utils';
export const ApolloPercentage = (props) => {
export const ApolloPercentage = (props: any) => {
const inputOnBlurFn = () => {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
}
};
return (
<ApolloNumber
{...props}
......@@ -18,6 +24,7 @@ export const ApolloPercentage = (props) => {
}
return '';
}}
onBlur={inputOnBlurFn}
/>
);
};
import React from 'react';
import React, { useRef } from 'react';
import { message } from 'antd';
import Search from '../../extra/associationSearch';
import { ApolloSearchProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
import { onBlurFn } from '../onBlurFn';
import s from './index.less';
export const ApolloSearch = (props: ApolloSearchProps) => {
const { onChange, maxCount, isMultiple, request } = props;
const { onChange, maxCount, isMultiple, request, origin } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options', 'request', 'maxCount']);
const changeValue = (value) => {
const isOpen = useRef();
if (isMultiple) {
selfProps.mode = 'multiple';
}
const changeValue = (value: any) => {
if (isMultiple && maxCount && maxCount < value.length) {
message.warn(`最多选择${maxCount}个`);
return;
}
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function' && !isOpen.current) {
onBlurFn({ ...props, value });
}
onChange(value, value);
}
};
if (isMultiple) {
selfProps.mode = 'multiple';
}
const singleBlurFn = (e: boolean) => {
isOpen.current = e;
};
const multipleBlurFn = (e: boolean) => {
isOpen.current = e;
if (typeof onBlurFn === 'function' && !e) {
onBlurFn(props);
}
};
return (
<Search
className={s.search}
request={request}
fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
{...selfProps}
onChange={changeValue}
initDataType="onfocus"
/>
origin === 'editForm' ?
<Search
className={s.search}
request={request}
fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
{...selfProps}
onChange={changeValue}
onDropdownVisibleChange={selfProps.mode === 'multiple' ? multipleBlurFn : singleBlurFn}
initDataType="onfocus"
/> : <Search
className={s.search}
request={request}
fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
{...selfProps}
onChange={changeValue}
initDataType="onfocus"
/>
);
};
import React from 'react';
import React, { useRef } from 'react';
import { Select } from 'antd';
import { onBlurFn } from '../onBlurFn';
import { ApolloSelectProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
import styles from './styles.less';
export const ApolloSelect = (props: ApolloSelectProps) => {
const { options = [], onChange, isMultiple } = props;
const { options = [], onChange, isMultiple, origin } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'isMultiple', 'options']);
const isOpen = useRef();
if (isMultiple) {
selfProps.mode = 'multiple';
}
const changeValue = (value: any, option: any) => {
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function' && !isOpen.current) {
onBlurFn({ ...props, value });
}
onChange(value, option);
}
};
if (isMultiple) {
selfProps.mode = 'multiple';
}
return (
const singleBlurFn = (e: boolean) => {
isOpen.current = e;
};
const multipleBlurFn = (e: boolean) => {
isOpen.current = e;
if (typeof onBlurFn === 'function' && !e) {
onBlurFn(props);
}
};
return (origin === 'editForm' ?
<Select
className={styles.select}
{...selfProps}
onChange={changeValue}
onDropdownVisibleChange={selfProps.mode === 'multiple' ? multipleBlurFn : singleBlurFn}
>
{options.map((item) => {
return (
<Select.Option key={item.id} value={item.id}>
{item.name}
</Select.Option>
);
})}
</Select> : <Select
className={styles.select}
{...selfProps}
onChange={changeValue}
>
{options.map((item) => {
return (
......
import React from 'react';
import React, { useRef } from 'react';
import InputSearch from '../../extra/dataEntry/textSelect';
import { ApolloInputSearchProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
import { onBlurFn } from '../onBlurFn';
import s from './index.less';
export const ApolloInputSearch = (props: ApolloInputSearchProps) => {
const { onChange, request, type } = props;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'request']);
const changeValue = (value) => {
const isOpen = useRef();
const changeValue = (value: any) => {
if (typeof onChange === 'function') {
if (typeof onBlurFn === 'function' && !isOpen.current) {
onBlurFn({ ...props, value });
}
onChange(value, value);
}
};
const singleBlurFn = (e: boolean) => {
isOpen.current = e;
};
return (
<InputSearch
className={s.select}
request={(val) => { return request({ name: val, fieldValueName: type }); }}
fieldNames={{ value: 'fieldValueValue', label: 'fieldValueName' }}
{...selfProps}
onDropdownVisibleChange={singleBlurFn}
onChange={changeValue}
initDataType="onfocus"
/>
......
import React, { useEffect, useState } from 'react';
import { Input, Modal } from 'antd';
import styles from './styles.less';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import { ApolloTextAreaProps } from '../editInterface';
import { Consumer } from '../../../context';
export const ApolloTextArea = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, value, cutLength, getDetail, rowData, onEmitChange, columnConfig, origin } = props;
const { maxLength, onChange, value, getDetail, rowData, onEmitChange, columnConfig, origin } = props;
const { columnChsName } = columnConfig;
const selfProps = antiAssign(props, ['columnConfig', 'onChange', 'value', 'cutLength', 'getDetail', 'rowData', 'onEmitChange']);
const [curValue, setCurValue] = useState(value);
......@@ -22,14 +23,21 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
// getMore();
// }
// }, []);
const changeValue = (e) => {
const [inputVal, setInputVal] = useState(value)
useEffect(() => {
setInputVal(value);
}, [value]);
const changeValue = (e: any) => {
if (typeof onChange === 'function') {
onChange(e.target.value);
}
};
const changeCurValue = (e) => {
const inputOnBlurFn = () => {
if (typeof onBlurFn === 'function') {
onBlurFn(props);
}
};
const changeCurValue = (e: any) => {
if (typeof onChange === 'function') {
setCurValue(e.target.value);
}
......@@ -59,7 +67,6 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
}
}
};
if (origin === 'editForm') {
return (
<Consumer>
......@@ -69,9 +76,14 @@ export const ApolloTextArea = (props: ApolloTextAreaProps) => {
<Input.TextArea
className={styles.inputForm}
{...selfProps}
value={value}
onChange={changeValue}
value={inputVal}
onBlur={inputOnBlurFn}
onChange={(e) => {
changeValue(e)
setInputVal(e.target.value)
}}
/>
{!!maxLength && (
<span className={styles.wordNumberForm}>
{`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
......
......@@ -4,6 +4,7 @@ import classNames from 'classnames';
import { ApolloUploadProps } from '../editInterface';
import { antiAssign } from '../../../../utils/utils';
import s from './index.less';
import { onBlurFn } from '../onBlurFn';
import Upload from '../../extra/upload';
import addIcon from '../../../../assets/addIcon.png';
......@@ -53,6 +54,7 @@ export const ApolloUpload = (props: ApolloUploadProps) => {
onChange(value);
}
toggleUploadDialog(false);
onBlurFn({ ...props, value })
};
const onCancel = () => {
if (typeof onEmitChange === 'function') {
......
......@@ -20,9 +20,9 @@ interface Props {
}
enum Loaded {
Init='init',
Has='has',
Empty='empty',
Init = 'init',
Has = 'has',
Empty = 'empty',
}
interface State {
......@@ -214,7 +214,7 @@ class AssociationSearch extends React.Component<Props, State> {
}
};
notFoundContent = (locale:any) => {
notFoundContent = (locale: any) => {
const { fetching, loaded } = this.state;
if (fetching) {
return <Spin size="small" />;
......@@ -230,7 +230,7 @@ class AssociationSearch extends React.Component<Props, State> {
const { selfCom, autoFocus, onChange, ...rest } = this.props;
return (
<Consumer>
{({ locale }:any) => {
{({ locale }: any) => {
return (
<Select
filterOption={false}
......
......@@ -3,7 +3,7 @@ import React from 'react';
import { transferAttr } from './_utils/transferAttr';
import { BaseComponentProps, BaseComponentState } from '../interface';
export const setFormat = (config:any, columnConfig: any, value: any, option?: any) => {
export const setFormat = (config: any, columnConfig: any, value: any, option?: any) => {
const { columnAttrObj, columnType } = columnConfig || {};
const transferColumn = transferAttr(columnType, {
...(config.componentAttr || {}),
......@@ -13,7 +13,7 @@ export const setFormat = (config:any, columnConfig: any, value: any, option?: an
return value;
};
export const getFormat = (config:any, columnConfig: any, value: any) => {
export const getFormat = (config: any, columnConfig: any, value: any) => {
const { columnAttrObj, columnType } = columnConfig || {};
if (!value || !Array.isArray(value) || value.length <= 0) return undefined;
const transferColumn = transferAttr(columnType, {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment