Skip to content

S
submodule
Commit 0cabe760 authored by zhangwenshuai's avatar zhangwenshuai
Browse files
Options

修改textlink样式逻辑

parent 2ac5ce37
Show whitespace changes
Inline Side-by-side
Showing with 235 additions and 61 deletions
components/apolloTable/component/Cell.tsx
View file @ 0cabe760
...@@ -269,6 +269,9 @@ const Cell = (props: CellProps) => { ...@@ -269,6 +269,9 @@ const Cell = (props: CellProps) => {
componentAttr={transferColumn} componentAttr={transferColumn}
formatter={detailConfig.getFormatter} formatter={detailConfig.getFormatter}
cellRenderProps={cellRenderProps} cellRenderProps={cellRenderProps}
changeEdit={()=>{
setStatus('edit');
}}
/> />
</div> </div>
)} )}
......
components/apolloTable/component/base/config.tsx
View file @ 0cabe760
...@@ -21,6 +21,7 @@ import { ...@@ -21,6 +21,7 @@ import {
ApolloTextArea, ApolloTextArea,
ApolloDateRange, ApolloDateRange,
ApolloRegion, ApolloRegion,
ApolloTextLink,
} from './edit'; } from './edit';
import { import {
ApolloInputDetail, ApolloInputDetail,
...@@ -69,10 +70,13 @@ export const config: any = { ...@@ -69,10 +70,13 @@ export const config: any = {
// }, // },
2: { 2: {
name: '超链接', name: '超链接',
editComp: ApolloTextArea, editComp: ApolloTextLink,
cellComp: CellContainer(ApolloTextArea), cellComp: ApolloTextLink,
getFormatter: GetFormatter.TEXTLINK, getFormatter: GetFormatter.TEXTLINK,
setFormatter: SetFormatter.TEXTLINK, setFormatter: SetFormatter.TEXTLINK,
componentAttr: {
autoSize: { minRows: 3 },
},
detailComp: ApolloTextLinkDetail, detailComp: ApolloTextLinkDetail,
icon: 'iconziduan-chaolianjie', icon: 'iconziduan-chaolianjie',
}, },
......
components/apolloTable/component/base/detail/text-link/index.less
View file @ 0cabe760
...@@ -11,13 +11,18 @@ ...@@ -11,13 +11,18 @@
overflow: hidden; overflow: hidden;
.innerContainer { .innerContainer {
display: flex; display: flex;
.content {
display: flex;
.item { .item {
margin-right: 10px; margin-right: 10px;
//background: #e9eef9; //background: #e9eef9;
border-radius: 12px; border-radius: 12px;
&.multi { &.multi {
border-radius: @borderRadius; border-radius: @borderRadius;
} }
.itemBgTxt { .itemBgTxt {
height: 24px; height: 24px;
padding: 5px 10px; padding: 5px 10px;
...@@ -25,29 +30,37 @@ ...@@ -25,29 +30,37 @@
font-size: 14px; font-size: 14px;
color: @textGeneralColor; color: @textGeneralColor;
} }
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
} }
} }
}
.moreBtn { .moreBtn {
width: 30px; width: 30px;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
display: none;
.extend { .extend {
width: 14px; width: 14px;
border-radius: 50%; border-radius: 50%;
} }
} }
&:hover{
.moreBtn{
display: block;
}
}
} }
.popContainer{ .popContainer {
width: 200px; width: 200px;
:global(.ant-popover-inner-content){ :global(.ant-popover-inner-content) {
padding: 0; padding: 0;
} }
.popContent{ .popContent {
padding: @paddingGen; padding: @paddingGen;
} }
} }
......
components/apolloTable/component/base/detail/text-link/index.tsx
View file @ 0cabe760
...@@ -5,7 +5,7 @@ import s from './index.less'; ...@@ -5,7 +5,7 @@ import s from './index.less';
import IconFont from '@/submodule/components/IconFont'; import IconFont from '@/submodule/components/IconFont';
export const ApolloTextLinkDetail = (props: any) => { export const ApolloTextLinkDetail = (props: any) => {
const { value, origin, formatter } = props; const { value, origin, formatter, changeEdit } = props;
const newValue = formatter ? formatter(value) : value; const newValue = formatter ? formatter(value) : value;
if (!newValue) return null; if (!newValue) return null;
// 以逗号分隔 // 以逗号分隔
...@@ -38,6 +38,33 @@ export const ApolloTextLinkDetail = (props: any) => { ...@@ -38,6 +38,33 @@ export const ApolloTextLinkDetail = (props: any) => {
<div className={s.container}> <div className={s.container}>
<div className={s.outContainer} ref={outer} style={outStyle}> <div className={s.outContainer} ref={outer} style={outStyle}>
<div className={s.innerContainer} ref={inner} style={innerStyle}> <div className={s.innerContainer} ref={inner} style={innerStyle}>
{dotVisible ? (
<Popover
placement="left"
overlayClassName={s.popContainer}
content={
<div className={s.popContent} onClick={(e)=>{
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
}}>
{arr.map((item, i) => {
return (
<a
key={i}
target="_blank"
href={item}
className={s.popItem}
style={itemStyle}
rel="noopener noreferrer"
>
<div className={s.popItemBgTxt}>{item}</div>
</a>
);
})}
</div>
}
>
<div className={s.content} style={innerStyle}>
{arr.map((item, i) => { {arr.map((item, i) => {
return ( return (
<a <a
...@@ -53,44 +80,35 @@ export const ApolloTextLinkDetail = (props: any) => { ...@@ -53,44 +80,35 @@ export const ApolloTextLinkDetail = (props: any) => {
); );
})} })}
</div> </div>
</div> </Popover>
{dotVisible && ( ) : (
<Popover <div className={s.content} style={innerStyle}>
trigger="click"
onClick={(e) => {
e.stopPropagation();
}}
placement="left"
overlayClassName={s.popContainer}
content={
<div
className={s.popContent}
onClick={(e) => {
e.stopPropagation();
}}
>
{arr.map((item, i) => { {arr.map((item, i) => {
return ( return (
<a <a
key={i} key={i}
target="_blank" target="_blank"
href={item} href={item}
className={s.popItem} className={s.item}
style={itemStyle} style={itemStyle}
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<div className={s.popItemBgTxt}>{item}</div> {item}
</a> </a>
); );
})} })}
</div> </div>
} )}
</div>
</div>
<div
className={s.moreBtn}
onClick={() => {
changeEdit();
}}
> >
<div className={s.moreBtn}>
<IconFont type="iconzhankai1" /> <IconFont type="iconzhankai1" />
</div> </div>
</Popover>
)}
</div> </div>
); );
}; };
components/apolloTable/component/base/edit/index.ts
View file @ 0cabe760
...@@ -16,6 +16,7 @@ import { ApolloTreeSelect } from './tree-select'; ...@@ -16,6 +16,7 @@ import { ApolloTreeSelect } from './tree-select';
import { ApolloUpload } from './upload'; import { ApolloUpload } from './upload';
import { ApolloDateRange } from './dateRange'; import { ApolloDateRange } from './dateRange';
import ApolloRegion from './region'; import ApolloRegion from './region';
import { ApolloTextLink } from './text-link';
export { export {
ApolloInput, ApolloInput,
...@@ -36,4 +37,5 @@ export { ...@@ -36,4 +37,5 @@ export {
ApolloTextArea, ApolloTextArea,
ApolloDateRange, ApolloDateRange,
ApolloRegion, ApolloRegion,
ApolloTextLink,
}; };
components/apolloTable/component/base/edit/text-link/index.tsx 0 → 100644
View file @ 0cabe760
import React, { useEffect, useState } from 'react';
import { Input, Modal } from 'antd';
import styles from './styles.less';
import { antiAssign } from '../../../../utils/utils';
import { ApolloTextAreaProps } from '../editInterface';
import { Consumer } from '../../../context';
export const ApolloTextLink = (props: ApolloTextAreaProps) => {
const { maxLength, onChange, value, cutLength, 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);
const [visible, setVisible] = useState(false);
useEffect(() => {
if (origin !== 'editForm') {
setCurValue(value);
getMore();
}
}, [value]);
// useEffect(() => {
// if (value && value.length === cutLength) {
// getMore();
// }
// }, []);
const changeValue = (e) => {
if (typeof onChange === 'function') {
onChange(e.target.value);
}
};
const changeCurValue = (e) => {
if (typeof onChange === 'function') {
setCurValue(e.target.value);
}
};
const hide = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(value);
}
setVisible(false);
}
const confirmChange = () => {
if (typeof onEmitChange === 'function') {
onEmitChange(curValue);
}
setVisible(false);
}
const getMore = async () => {
setVisible(true);
};
if (origin === 'editForm') {
return (
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<Input.TextArea
className={styles.inputForm}
{...selfProps}
value={value}
onChange={changeValue}
/>
{!!maxLength && (
<span className={styles.wordNumberForm}>
{`${locale.alreadyInput} ${(value || '').length}/${maxLength}`}
</span>
)}
</div>
);
}}
</Consumer>
)
}
return (
<Consumer>
{({ locale }) => {
return (
<div className={styles.container}>
<Input
{...selfProps}
value={value}
onChange={changeValue}
/>
<Modal visible={visible} title={columnChsName} onCancel={hide} onOk={confirmChange}>
<Input.TextArea
className={styles.input}
{...selfProps}
value={curValue}
onChange={changeCurValue}
/>
{!!maxLength && (
<span className={styles.wordNumber}>
{`${locale.alreadyInput} ${(curValue || '').length}/${maxLength}`}
</span>
)}
</Modal>
</div>
);
}}
</Consumer>
);
};
components/apolloTable/component/base/edit/text-link/styles.less 0 → 100644
View file @ 0cabe760
.container {
position: relative;
top: 0;
left: 0;
.inputForm{
padding-bottom: 18px;
}
.wordNumberForm {
position: absolute;
right: 20px;
bottom: 2px;
color: #e1e1e1;
font-size: 12px;
}
}
.input {
padding-bottom: 18px;
max-height: 500px !important;
}
.wordNumber {
position: absolute;
right: 35px;
bottom: 80px;
color: #e1e1e1;
font-size: 12px;
}
\ No newline at end of file
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