Skip to content

Commit

Permalink
feat(content): notify parents of hight changing
Browse files Browse the repository at this point in the history
  • Loading branch information
@crimx
crimx committed Apr 20, 2018
1 parent d52697a commit 1d90c45
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 23 deletions.
13 changes: 8 additions & 5 deletions src/content/components/DictItem/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@

.panel-DictItem_Header {
display: flex;
align-items: center;
align-items: flex-start;
height: 20px;
border-top: 1px #ddd solid;
}

.panel-DictItem_Logo {
align-self: flex-start;
width: 19px;
height: 19px;
margin-top: -1px;
Expand All @@ -21,20 +21,23 @@
padding: 3px;
font-size: 12px;
font-weight: normal;
color: #444;
text-decoration: none;

a {
color: #444;
text-decoration: none;
}
}

.panel-DictItem_Body {
overflow: hidden;
position: relative;
margin-bottom: 10px;
font-size: 12px;
line-height: 1.6;
color: #333;
}

.panel-DictItem_Loader {
align-self: center;
position: relative;
overflow: hidden;
width: 120px;
Expand Down
24 changes: 18 additions & 6 deletions src/content/components/DictItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export type DictItemProps = {
searchStatus: SearchStatus
searchResult: any
requestSearchText: () => any
updateItemHeight: ({ id, height }: { id: DictID, height: number }) => any
}

export type DictItemState = {
Expand All @@ -28,11 +29,12 @@ export type DictItemState = {

export class DictItem extends React.PureComponent<DictItemProps & { t: TranslationFunction }, DictItemState> {
bodyRef = React.createRef<HTMLElement>()
prevItemHeight = 0

state = {
copySearchStatus: null,
bodyHeight: 0,
displayHeight: 0,
bodyHeight: 10,
displayHeight: 10,
isUnfold: false,
}

Expand Down Expand Up @@ -67,7 +69,7 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati

calcBodyHeight (force?: boolean): Partial<DictItemState> | null {
if (this.bodyRef.current) {
const bodyHeight = this.bodyRef.current.offsetHeight || 0
const bodyHeight = Math.max(this.bodyRef.current.offsetHeight, 10) || 10
if (force || this.state.bodyHeight !== bodyHeight) {
return { bodyHeight, displayHeight: Math.min(bodyHeight, this.props.preferredHeight) }
}
Expand Down Expand Up @@ -125,6 +127,7 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
preferredHeight,
searchStatus,
searchResult,
updateItemHeight,
} = this.props

const {
Expand All @@ -133,12 +136,21 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
isUnfold,
} = this.state

const finalBodyHeight = isUnfold ? displayHeight : 10

// plus header
const itemHeight = finalBodyHeight + 20
if (itemHeight !== this.prevItemHeight) {
this.prevItemHeight = itemHeight
updateItemHeight({ id, height: itemHeight })
}

return (
<section className='panel-DictItem'>
<header className='panel-DictItem_Header' onClick={this.toggleFolding}>
<img className='panel-DictItem_Logo' src={require('@/components/dictionaries/' + id + '/favicon.png')} alt='dict logo' />
<h1 className='panel-DictItem_Title'>
<a className='panel-DictItem_Title' href={dictURL} onClick={this.openDictURL}>{t(`dict_${id}`)}</a>
<a href={dictURL} onClick={this.openDictURL}>{t(`dict_${id}`)}</a>
</h1>
{ searchStatus === SearchStatus.Searching &&
<div className='panel-DictItem_Loader'>
Expand All @@ -155,8 +167,8 @@ export class DictItem extends React.PureComponent<DictItemProps & { t: Translati
</svg>
</button>
</header>
<Motion defaultStyle={{ height: 0, opacity: 0 }}
style={{ height: spring(isUnfold ? displayHeight : 0), opacity: spring(isUnfold ? 1 : 0) }}
<Motion defaultStyle={{ height: 10, opacity: 0 }}
style={{ height: spring(finalBodyHeight), opacity: spring(isUnfold ? 1 : 0) }}
>
{({ height, opacity }) => (
<div className='panel-DictItem_Body'
Expand Down
3 changes: 3 additions & 0 deletions test/specs/components/content/DictItem.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ describe('Component/content/DictItem', () => {
preferredHeight: 100,
panelWidth: 400,
searchStatus: SearchStatus.OnHold,
updateItemHeight: _.noop,
requestSearchText: _.noop
}
expect(mount(<DictItem {...props} />)).toMatchSnapshot()
Expand All @@ -44,6 +45,7 @@ describe('Component/content/DictItem', () => {
preferredHeight: 100,
panelWidth: 400,
searchStatus: SearchStatus.Searching,
updateItemHeight: _.noop,
requestSearchText: _.noop
}
const mounted = mount(<DictItem {...props} />)
Expand All @@ -68,6 +70,7 @@ describe('Component/content/DictItem', () => {
preferredHeight: 100,
panelWidth: 400,
searchStatus: SearchStatus.Searching,
updateItemHeight: _.noop,
requestSearchText: jest.fn()
}
const shallowed = shallow(<DictItem {...props} />)
Expand Down
24 changes: 12 additions & 12 deletions test/specs/components/content/__snapshots__/DictItem.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ exports[`Component/content/DictItem should render pending correctly 1`] = `
searchResult={null}
searchStatus={0}
t={[Function]}
updateItemHeight={[Function]}
>
<section
className="panel-DictItem"
Expand All @@ -28,7 +29,6 @@ exports[`Component/content/DictItem should render pending correctly 1`] = `
className="panel-DictItem_Title"
>
<a
className="panel-DictItem_Title"
href="https://google.com"
onClick={[Function]}
>
Expand All @@ -55,7 +55,7 @@ exports[`Component/content/DictItem should render pending correctly 1`] = `
<Motion
defaultStyle={
Object {
"height": 0,
"height": 10,
"opacity": 0,
}
}
Expand All @@ -65,7 +65,7 @@ exports[`Component/content/DictItem should render pending correctly 1`] = `
"damping": 26,
"precision": 0.01,
"stiffness": 170,
"val": 0,
"val": 10,
},
"opacity": Object {
"damping": 26,
Expand All @@ -81,7 +81,7 @@ exports[`Component/content/DictItem should render pending correctly 1`] = `
style={
Object {
"fontSize": 14,
"height": 0,
"height": 10,
}
}
>
Expand Down Expand Up @@ -129,6 +129,7 @@ exports[`Component/content/DictItem should render result correctly 1`] = `
searchResult={null}
searchStatus={1}
t={[Function]}
updateItemHeight={[Function]}
>
<section
className="panel-DictItem"
Expand All @@ -146,7 +147,6 @@ exports[`Component/content/DictItem should render result correctly 1`] = `
className="panel-DictItem_Title"
>
<a
className="panel-DictItem_Title"
href="https://google.com"
onClick={[Function]}
>
Expand Down Expand Up @@ -192,7 +192,7 @@ exports[`Component/content/DictItem should render result correctly 1`] = `
<Motion
defaultStyle={
Object {
"height": 0,
"height": 10,
"opacity": 0,
}
}
Expand All @@ -202,7 +202,7 @@ exports[`Component/content/DictItem should render result correctly 1`] = `
"damping": 26,
"precision": 0.01,
"stiffness": 170,
"val": 0,
"val": 10,
},
"opacity": Object {
"damping": 26,
Expand All @@ -218,7 +218,7 @@ exports[`Component/content/DictItem should render result correctly 1`] = `
style={
Object {
"fontSize": 14,
"height": 0,
"height": 10,
}
}
>
Expand Down Expand Up @@ -266,6 +266,7 @@ exports[`Component/content/DictItem should render result correctly 2`] = `
searchResult="result1"
searchStatus={2}
t={[Function]}
updateItemHeight={[Function]}
>
<section
className="panel-DictItem"
Expand All @@ -283,7 +284,6 @@ exports[`Component/content/DictItem should render result correctly 2`] = `
className="panel-DictItem_Title"
>
<a
className="panel-DictItem_Title"
href="https://google.com"
onClick={[Function]}
>
Expand All @@ -310,7 +310,7 @@ exports[`Component/content/DictItem should render result correctly 2`] = `
<Motion
defaultStyle={
Object {
"height": 0,
"height": 10,
"opacity": 0,
}
}
Expand All @@ -320,7 +320,7 @@ exports[`Component/content/DictItem should render result correctly 2`] = `
"damping": 26,
"precision": 0.01,
"stiffness": 170,
"val": 0,
"val": 10,
},
"opacity": Object {
"damping": 26,
Expand All @@ -336,7 +336,7 @@ exports[`Component/content/DictItem should render result correctly 2`] = `
style={
Object {
"fontSize": 14,
"height": 0,
"height": 10,
}
}
>
Expand Down

0 comments on commit 1d90c45

Please sign in to comment.