muerwre/orchidmap-front
1
0
Fork 0
mirror of https://github.com/muerwre/orchidmap-front.git synced 2025-04-25 19:16:41 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

handling empty text

Browse source
This commit is contained in:
muerwre 2019-03-29 10:24:29 +07:00
parent 3a874583bc
commit 41f40a783f
2 changed files with 37 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/dialogs/TitleDialog.tsx
View file

@ -40,6 +40,11 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
const { height: title_height } = this.ref_title.getBoundingClientRect();
const { height: text_height } = this.ref_text.getBoundingClientRect();
if (text_height === 0) {
this.setState({ height: 0, height_raised: 0 });
return;
}
const title_margin = parseInt(getStyle(this.ref_title, 'margin-bottom'), 10) || 0;
const text_margins = (parseInt(getStyle(this.ref_text, 'margin-top'), 10) || 0) +
parseInt(getStyle(this.ref_text, 'margin-bottom'), 10) || 0;;
@ -47,15 +52,12 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
const container_height = sizer_height - title_height - title_margin - text_margins;
console.log(this.ref_text.getBoundingClientRect());
const min_height = (this.props.minLines || 3) * text_line;
const max_height = (this.props.maxLines || 20) * text_line;
const height = nearestInt(Math.min(container_height, Math.min(text_height, min_height)), text_line) + text_margins;
const height_raised = nearestInt(Math.min(container_height, Math.min(text_height, max_height)), text_line) + text_margins;
console.log({ height, height_raised });
this.setState({ height, height_raised });
};
@ -79,13 +81,16 @@ export class Component extends React.PureComponent<ITitleDialogProps, ITitleDial
</div>
<div
className="title-dialog-pane title-dialog-text"
style={{ height: raised ? height_raised : height }}
style={{
height: (raised ? height_raised : height),
display: height === 0 ? 'none' : 'block'
}}
ref={el => { this.ref_overflow = el; }}
>
<div
ref={el => { this.ref_text = el; }}
>
Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации "Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст.." Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по
</div>
</div>
</div>