Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!2005 优化:BBS输入框长度调整不限制

Browse Source
pull/1981/MERGE
黄诗津 2 years ago committed by ChenX
parent a3ae58ebcc
commit f09bbf8e88
5 changed files with 123 additions and 146 deletions
Show Stats Download Patch File Download Diff File

100
src/UI/Components/BBS/BBSCommon.tsx
Unescape View File

@ -19,6 +19,7 @@ import { bbsEditorStore, TotalTabbarTitlesInfos } from '../../Store/BBSEditorSto
import { LinesType } from '../../Store/BoardInterface';
import { ToasterInput } from '../Toaster';
import { IBoardInfoOptions } from './BoardInfosList';
import { BBSBoardData } from './LookOverBoardInfos';
export interface SortBtnData
{
@ -33,8 +34,8 @@ interface ITitleBannerProps
sortBtnData: SortBtnData[],
style: any,
handleOrder: Function,
AutoWidth: (title: [string, string]) => void,
TitleResize: (e: React.PointerEvent<HTMLDivElement>, title: string) => void;
searchRes: BBSBoardData;
}
@observer
export class TitleBanner extends React.Component<ITitleBannerProps>
@ -78,6 +79,38 @@ export class TitleBanner extends React.Component<ITitleBannerProps>
width: userConfig.titleWidthMap.has(title) ? userConfig.titleWidthMap.get(title) : "auto"
};
};
AutoWidth = (title: [string, string]) =>
{
if (bbsEditorStore.noResize.some(i => TotalTabbarTitlesInfos[i][1] === title[1])) return;
let currentTitle = document.getElementsByClassName(title[1]);
let maxLenght: number = 5;
this.props.searchRes.dataBr.forEach(br =>
{
let content: string | number;
let contentLenght: number;
if ([2, 3, 4, 5, 15, 16, 17, 18].includes(TotalTabbarTitlesInfos.indexOf(title)))
content = br[title[1]];
else
content = br.BoardProcessOption[title[1]];
const REG_CH = /[\u4E00-\u9FA5]/g;
let chineseNum = content.toString().match(REG_CH)?.length ?? 0; //判断中文个数
contentLenght = Math.ceil(chineseNum + (content.toString().length - chineseNum) / 2);
if (contentLenght >= maxLenght)
maxLenght = contentLenght;
});
for (let i = 0; i < currentTitle.length; i++)
{
(currentTitle[i] as HTMLDivElement).style.width = (maxLenght + 2) * 12 + "px";
}
if (userConfig.titleWidthMap.get(title[1]) !== (maxLenght + 2) * 12)
userConfig.titleWidthMap.set(title[1], (maxLenght + 2) * 12);
};
render()
{
return (
@ -152,7 +185,7 @@ export class TitleBanner extends React.Component<ITitleBannerProps>
className='title-resize'
style={{ cursor: bbsEditorStore.noResize.includes(index) ? "auto" : "col-resize" }}
onPointerDown={(e) => { this.props.TitleResize(e, TotalTabbarTitlesInfos[index][1]); }}
onDoubleClick={(e) => { this.props.AutoWidth(TotalTabbarTitlesInfos[index]); }}
onDoubleClick={(e) => { this.AutoWidth(TotalTabbarTitlesInfos[index]); }}
/>
</div>
);
@ -639,52 +672,49 @@ export class BBSProcessGroupItem extends React.Component<IBBSProcessGroupItemPro
};
}
interface IBBSRemarksComponentProps extends IBBSSealingComponentProps
{
getCalcStyles: (key: string) => React.CSSProperties;
}
@observer
export class BBSRemarksComponent extends React.Component<IBBSRemarksComponentProps>
export class BBSRemarksComponent extends React.Component<IBBSSealingComponentProps>
{
render()
{
const { board, option, index, click } = this.props;
return (
<>
<div
className="bbs-list-td bbs-td remarks"
style={{
padding: "0 1px",
width: userConfig.titleWidthMap.get("remarks")
}}
>
{
option.remarks.length === 0 ?
<div className="bbs-list-td bbs-td remarks" style={this.props.getCalcStyles("remarks")}>
<input
className="bp3-input "
value=""
readOnly={true}
onClick={() => { click("remarks"); }}
/> :
<Tooltip
usePortal={false}
content={
<ul>
{
option.remarks.map((d, i) => <li key={i}>{d[0]} : {d[1]}</li>)
}
</ul>
}
position={Position.RIGHT}
intent={Intent.PRIMARY}
>
<input
className="bp3-input "
value=""
className="bp3-input"
value={option.remarks.reduce((s, r) => s += `${r[0]}:${r[1]} `, "")}
readOnly={true}
onClick={() => { click("remarks"); }}
/>
</div>
:
<div className="bbs-list-td bbs-td remarks" style={this.props.getCalcStyles("remarks")} >
<Tooltip
usePortal={false}
content={
<ul>
{
option.remarks.map((d, i) => <li key={i}>{d[0]} : {d[1]}</li>)
}
</ul>
}
position={Position.RIGHT}
intent={Intent.PRIMARY}
>
<input
className="bp3-input"
value={option.remarks.reduce((s, r) => s += `${r[0]}:${r[1]} `, "")}
readOnly={true}
onClick={() => { click("remarks"); }}
/>
</Tooltip>
</div>
</Tooltip>
}
</>
</div>
);
}
}

10
src/UI/Components/BBS/BoardInfosList.tsx
Unescape View File

@ -31,7 +31,6 @@ export interface IBoardInfoListProps
processGroupData: Map<string, ObjectId[]>;
style: React.CSSProperties;
isSelect: boolean;
getCalcStyles: (key: string) => React.CSSProperties;
}
type GetBBSBoardInfoType<T> = {
@ -235,13 +234,18 @@ export class BoardInfoList extends React.Component<IBoardInfoListProps, {}>
click={this.HandleOnClick}
board={dataBr}
option={this.option}
getCalcStyles={this.props.getCalcStyles}
ModifyDataRecord={ModifyDataRecord}
index={index}
/>;
default:
return (
<div className={`bbs-list-td bbs-td ${key}`} key={i} style={this.props.getCalcStyles(key)} >
<div
className={`bbs-list-td bbs-td ${key}`}
key={i}
style={{
padding: "0 1px",
width: userConfig.titleWidthMap.get(key)
}} >
<ToasterInput
type={CheckObjectType.BBS}
optKey={key}

13
src/UI/Components/BBS/BoardLIst.tsx
Unescape View File

@ -11,19 +11,15 @@ import { CommandWrap } from '../../../Editor/CommandMachine';
import { LinesType } from '../../Store/BoardInterface';
import { SortBtnData, TitleBanner } from './BBSCommon';
import { BoardInfoList, IBoardInfoOptions } from './BoardInfosList';
import { BBSBoardData } from './LookOverBoardInfos';
interface BoardData
{
dataBr: Board[];
realBr: Board[];
}
interface IBoardListProps
{
height: number;
width: number;
dragDivH: number;
searchRes: BoardData;
searchRes: BBSBoardData;
selectedBrOnList: Board[];
UpdateDisplayData: (dataSource?: Board[]) => void;
isCtrlDown: boolean;
@ -31,9 +27,7 @@ interface IBoardListProps
modifyBoardData: Map<Board, IBoardInfoOptions>;
UpdateSeletctedBr: (index: number, findSameTypeBrDataKey?: string) => void;
ModifyBoard: (br: Board, opts: IBoardInfoOptions) => void;
AutoWidth: (title: [string, string]) => void;
TitleResize: (e: React.PointerEvent<HTMLDivElement>, title: string) => void;
getCalcStyles: (key: string) => React.CSSProperties;
}
@observer
@ -67,8 +61,8 @@ export class BoardList extends React.Component<IBoardListProps>
style={{ height: listItemHeight }}
sortBtnData={this.sortBtnData}
handleOrder={this.HandleSort}
AutoWidth={this.props.AutoWidth}
TitleResize={this.props.TitleResize}
searchRes={this.props.searchRes}
/>
<AutoSizer>
{
@ -97,7 +91,6 @@ export class BoardList extends React.Component<IBoardListProps>
ModifyDataRecord={this.ModifyDataMap}
style={style}
processGroupData={this.props.processGroupMap}
getCalcStyles={this.props.getCalcStyles}
/>
)
);

63
src/UI/Components/BBS/LookOverBoardInfos.tsx
Unescape View File

@ -52,7 +52,7 @@ interface BoradDataInArray
br: Board;
arr: string[];
}
interface BoardData
export interface BBSBoardData
{
dataBr: Board[];
realBr: Board[];
@ -89,14 +89,14 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
{
dragDivH: number = 400 * 0.4;
//初始展示的板件数据
dataList: BoardData = { dataBr: [], realBr: [] };
dataList: BBSBoardData = { dataBr: [], realBr: [] };
//排钻个数(配件信息)
@observable drillCount: ICountType[] = [];
@observable hardwareCount: ICountType[] = [];
@observable areaCount: ICountType<Board>[] = [];
@observable sealCount: ICountType[] = [];
//列表展示的板件
@observable searchRes: BoardData = this.dataList;
@observable searchRes: BBSBoardData = this.dataList;
//搜素框的输入
@observable searchingStr = "";
//数组格式的板件数据
@ -831,8 +831,6 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
let currentWidth = move + originalWidth;
if (currentWidth < 62)
currentWidth = 62;
else if (currentWidth > 144)
currentWidth = 144;
for (let i = 0; i < titleElement.length; i++)
{
@ -842,7 +840,9 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
target.onmouseup = () =>
{
this.SetTitleWidthMap(title, (titleElement[0] as HTMLDivElement).offsetWidth);
let width = (titleElement[0] as HTMLDivElement).offsetWidth;
if (userConfig.titleWidthMap.get(title) !== width)
userConfig.titleWidthMap.set(title, width);
ismove = false;
clearTimeout(timer);
target.releasePointerCapture(e.pointerId);
@ -851,55 +851,6 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
};
};
AutoWidth = (title: [string, string]) =>
{
if (bbsEditorStore.noResize.some(i => TotalTabbarTitlesInfos[i][1] === title[1])) return;
let currentTitle = document.getElementsByClassName(title[1]);
let maxLenght: number = 5;
this.searchRes.dataBr.forEach(br =>
{
let content: string | number;
let contentLenght: number;
if ([2, 3, 4, 5, 15, 16, 17, 18].includes(TotalTabbarTitlesInfos.indexOf(title)))
content = br[title[1]];
else
content = br.BoardProcessOption[title[1]];
if (typeof content === "string")
contentLenght = content.length;
else
contentLenght = content.toString().length;
if (contentLenght >= maxLenght && contentLenght < 12)
maxLenght = contentLenght + 1;
else if (contentLenght >= 12)
maxLenght = 12;
});
for (let i = 0; i < currentTitle.length; i++)
{
(currentTitle[i] as HTMLDivElement).style.width = maxLenght * 12 + "px";
}
this.SetTitleWidthMap(title[1], maxLenght * 12 + 2);
};
SetTitleWidthMap = (title: string, value: number) =>
{
if (userConfig.titleWidthMap.get(title) !== value)
userConfig.titleWidthMap.set(title, value);
};
getCalcStyles = (key: string): React.CSSProperties =>
{
let titleElement = this.rootElRef.current.getElementsByClassName(key);
let width = (titleElement[0] as HTMLDivElement).offsetWidth;
return {
width: width,
padding: "0 1px"
};
};
//修改
Modify()
{
@ -1010,9 +961,7 @@ export class LookOverBoardInfosModal extends React.Component<LookOverBoardInfosM
modifyBoardData={this.modifyBoardData}
UpdateSeletctedBr={this.UpdateSeletctedBr}
ModifyBoard={this.ModifyBoard}
AutoWidth={this.AutoWidth}
TitleResize={this.TitleResize}
getCalcStyles={this.getCalcStyles}
/>
{/* 配件信息 */}
{

83
src/UI/Components/Modal/ModalStyle/LookOverBoardInfos.less
Unescape View File

@ -1,10 +1,13 @@
#modal .br-lookover {
height: 100%;
width : 100%;
width: 100%;
.bp3-dialog-body {
flex-direction: column;
.bp3-popover-target {
width: 100%;
}
.bp3-input {
width: 100%;
}
@ -17,20 +20,20 @@
}
.bp3-dialog-footer {
display : flex;
display: flex;
flex-wrap: wrap;
}
.bp3-dialog-footer-actions {
display : flex;
display: flex;
flex-wrap: nowrap;
width : 100%;
width: 100%;
.bp3-label {
margin-right: 20px;
}
.bp3-button>span>a {
.bp3-button > span > a {
text-decoration: none;
&:hover {
@ -47,16 +50,16 @@
overflow: auto;
.bp3-card {
width : 100%;
overflow : hidden;
padding-top : 5px;
height : 100%;
padding-right : 0px;
padding-left : 0px;
width: 100%;
overflow: hidden;
padding-top: 5px;
height: 100%;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
.react-draggable {
>span>div {
> span > div {
margin-top: 5px;
}
}
@ -66,14 +69,14 @@
.bbs-list,
.bbs-list * {
margin : 0 auto;
padding : 0;
margin: 0 auto;
padding: 0;
font-size: 14px;
}
.bbs-list {
// display: table;
width : 100%;
width: 100%;
border-collapse: collapse;
}
@ -81,67 +84,65 @@
// display: table-row;
padding-left: 5px;
>span {
width : 25px;
> span {
width: 25px;
text-align: center;
}
display : flex;
display: flex;
flex-wrap: nowrap;
}
.bbs-list-th {
display : table-cell;
font-weight : bold;
text-align : center;
display: table-cell;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
.bbs-list-td {
display : table-cell;
text-align : center;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.bbs-td {
line-height: 22px;
height : 22px;
width : 62px;
min-width : 62px;
height: 22px;
width: 62px;
min-width: 62px;
&:nth-child(1) {
min-width: 40px;
}
.sort-btn {
height : 18px !important;
padding : 0 !important;
height: 18px !important;
padding: 0 !important;
font-weight: bold;
width : 100%;
display : -webkit-inline-box;
width: 100%;
display: -webkit-inline-box;
.bp3-button-text {
margin: 0;
}
.bp3-icon svg {
width : 12px;
width: 12px;
height: 12px;
}
}
.title-resize{
.title-resize {
padding-left: 3px;
padding-right: 3px;
width: 7px;
height: 22px;
background-color: rgb(181,184,186);
background-color: rgb(181, 184, 186);
background-clip: content-box;
}
}
#commonModal .bbs-editor {
.bp3-dialog-body {
height: 600px;
@ -151,14 +152,14 @@
width: 320px;
height: 100%;
&>div {
& > div {
flex: 1;
&>ul {
outline : 1px solid #ccc;
& > ul {
outline: 1px solid #ccc;
padding-left: 5px;
overflow : auto;
height : calc(100% - 20px);
overflow: auto;
height: calc(100% - 20px);
li {
padding: 5px 0;
@ -166,7 +167,7 @@
li:hover {
background: rgb(65, 200, 209);
color : #fff;
color: #fff;
}
li.enter {

Write Preview
Loading…
Cancel
Save