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

底层组件修改

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