Skip to content

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

修改textlink样式逻辑

parent 2ac5ce37
Hide 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) => {
componentAttr={transferColumn}
formatter={detailConfig.getFormatter}
cellRenderProps={cellRenderProps}
changeEdit={()=>{
setStatus('edit');
}}
/>
</div>
)}
......
components/apolloTable/component/base/config.tsx
View file @ 0cabe760
......@@ -21,6 +21,7 @@ import {
ApolloTextArea,
ApolloDateRange,
ApolloRegion,
ApolloTextLink,
} from './edit';
import {
ApolloInputDetail,
......@@ -69,10 +70,13 @@ export const config: any = {
// },
2: {
name: '超链接',
editComp: ApolloTextArea,
cellComp: CellContainer(ApolloTextArea),
editComp: ApolloTextLink,
cellComp: ApolloTextLink,
getFormatter: GetFormatter.TEXTLINK,
setFormatter: SetFormatter.TEXTLINK,
componentAttr: {
autoSize: { minRows: 3 },
},
detailComp: ApolloTextLinkDetail,
icon: 'iconziduan-chaolianjie',
},
......
components/apolloTable/component/base/detail/text-link/index.less
View file @ 0cabe760
......@@ -11,22 +11,29 @@
overflow: hidden;
.innerContainer {
display: flex;
.item {
margin-right: 10px;
//background: #e9eef9;
border-radius: 12px;
&.multi {
border-radius: @borderRadius;
}
.itemBgTxt {
height: 24px;
padding: 5px 10px;
line-height: 1;
font-size: 14px;
color: @textGeneralColor;
}
&:last-child {
margin-right: 0;
.content {
display: flex;
.item {
margin-right: 10px;
//background: #e9eef9;
border-radius: 12px;
&.multi {
border-radius: @borderRadius;
}
.itemBgTxt {
height: 24px;
padding: 5px 10px;
line-height: 1;
font-size: 14px;
color: @textGeneralColor;
}
&:last-child {
margin-right: 0;
}
}
}
}
......@@ -36,18 +43,24 @@
font-size: 12px;
cursor: pointer;
text-align: center;
display: none;
.extend {
width: 14px;
border-radius: 50%;
}
}
&:hover{
.moreBtn{
display: block;
}
}
}
.popContainer{
.popContainer {
width: 200px;
:global(.ant-popover-inner-content){
:global(.ant-popover-inner-content) {
padding: 0;
}
.popContent{
.popContent {
padding: @paddingGen;
}
}
......
components/apolloTable/component/base/detail/text-link/index.tsx
View file @ 0cabe760
......@@ -5,7 +5,7 @@ import s from './index.less';
import IconFont from '@/submodule/components/IconFont';
export const ApolloTextLinkDetail = (props: any) => {
const { value, origin, formatter } = props;
const { value, origin, formatter, changeEdit } = props;
const newValue = formatter ? formatter(value) : value;
if (!newValue) return null;
// 以逗号分隔
......@@ -38,59 +38,77 @@ export const ApolloTextLinkDetail = (props: any) => {
<div className={s.container}>
<div className={s.outContainer} ref={outer} style={outStyle}>
<div className={s.innerContainer} ref={inner} style={innerStyle}>
{arr.map((item, i) => {
return (
<a
key={i}
target="_blank"
href={item}
className={s.item}
style={itemStyle}
rel="noopener noreferrer"
>
{item}
</a>
);
})}
</div>
</div>
{dotVisible && (
<Popover
trigger="click"
onClick={(e) => {
e.stopPropagation();
}}
placement="left"
overlayClassName={s.popContainer}
content={
<div
className={s.popContent}
onClick={(e) => {
e.stopPropagation();
}}
{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) => {
return (
<a
key={i}
target="_blank"
href={item}
className={s.item}
style={itemStyle}
rel="noopener noreferrer"
>
{item}
</a>
);
})}
</div>
</Popover>
) : (
<div className={s.content} style={innerStyle}>
{arr.map((item, i) => {
return (
<a
key={i}
target="_blank"
href={item}
className={s.popItem}
className={s.item}
style={itemStyle}
rel="noopener noreferrer"
>
<div className={s.popItemBgTxt}>{item}</div>
{item}
</a>
);
})}
</div>
}
>
<div className={s.moreBtn}>
<IconFont type="iconzhankai1" />
</div>
</Popover>
)}
)}
</div>
</div>
<div
className={s.moreBtn}
onClick={() => {
changeEdit();
}}
>
<IconFont type="iconzhankai1" />
</div>
</div>
);
};
components/apolloTable/component/base/edit/index.ts
View file @ 0cabe760
......@@ -16,6 +16,7 @@ import { ApolloTreeSelect } from './tree-select';
import { ApolloUpload } from './upload';
import { ApolloDateRange } from './dateRange';
import ApolloRegion from './region';
import { ApolloTextLink } from './text-link';
export {
ApolloInput,
......@@ -36,4 +37,5 @@ export {
ApolloTextArea,
ApolloDateRange,
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