kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-03-27 22:54:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #290 from unix/select

Browse Source 
fix(ellipsis): set the height of ellipsis manually
This commit is contained in:
witt
2020-06-26 07:57:22 +08:00
committed by GitHub
parent 965654f91a e05195ab48
commit 0d7345f01c
8 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/auto-complete/auto-complete-item.tsx
View File

@@ -39,7 +39,7 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
return (
<div className={`item ${isActive ? 'active' : ''}`} onClick={selectHandler}>
<Ellipsis>{children}</Ellipsis>
<Ellipsis height={`calc(1.688 * ${theme.layout.gap})`}>{children}</Ellipsis>
<style jsx>{`
.item {
display: flex;
@@ -48,8 +48,8 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
font-weight: normal;
white-space: pre;
font-size: ${fontSize};
padding: ${theme.layout.gapHalf};
line-height: 1.2;
padding: 0 ${theme.layout.gapHalf};
height: calc(1.688 * ${theme.layout.gap});
background-color: ${theme.palette.background};
color: ${theme.palette.foreground};
user-select: none;

10
components/select/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -6,6 +6,7 @@ exports[`Select should render correctly 1`] = `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1.688 * 16pt);
min-width: 0;
}
</style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -93,6 +94,7 @@ exports[`Select should render correctly 1`] = `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1 * 16pt);
min-width: 0;
}
</style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -180,6 +182,7 @@ exports[`Select should render correctly 1`] = `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1.344 * 16pt);
min-width: 0;
}
</style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -267,6 +270,7 @@ exports[`Select should render correctly 1`] = `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(2 * 16pt);
min-width: 0;
}
</style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -358,6 +362,7 @@ exports[`Select should work correctly with labels 1`] = `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1.688 * 16pt);
min-width: 0;
}
</style></span></span><div class=\\"icon\\"><svg viewBox=\\"0 0 24 24\\" width=\\"1.25em\\" height=\\"1.25em\\" stroke-width=\\"1\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\"><path d=\\"M6 9l6 6 6-6\\"></path><style>
@@ -467,6 +472,7 @@ initialize {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1.688 * 16pt);
min-width: 0;
}
",
@@ -708,6 +714,7 @@ initialize {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1.688 * 16pt);
min-width: 0;
}
",
@@ -817,6 +824,7 @@ initialize {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1.688 * 16pt);
min-width: 0;
}
",
@@ -1130,6 +1138,7 @@ initialize {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1.688 * 16pt);
min-width: 0;
}
",
@@ -1316,6 +1325,7 @@ initialize {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1.688 * 16pt);
min-width: 0;
}
",

1
components/select/__tests__/__snapshots__/multiple.test.tsx.snap
View File

@@ -6,6 +6,7 @@ exports[`Select Multiple should render correctly 1`] = `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: calc(1.688 * 16pt);
min-width: 0;
}
</style></span></span><div class=\\"item mock \\"><style>

2
components/select/select-option.tsx
View File

@@ -81,7 +81,7 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
className={`option ${divider ? 'divider' : ''} ${label ? 'label' : ''} ${className}`}
onClick={clickHandler}
{...props}>
<Ellipsis>{children}</Ellipsis>
<Ellipsis height={`calc(1.688 * ${theme.layout.gap})`}>{children}</Ellipsis>
</div>
<style jsx>{`

2
components/select/select.tsx
View File

@@ -139,7 +139,7 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
{...props}>
{isEmpty && (
<span className="value placeholder">
<Ellipsis>{placeholder}</Ellipsis>
<Ellipsis height={sizes.height}>{placeholder}</Ellipsis>
</span>
)}
{value && !multiple && <span className="value">{selectedChild}</span>}

1
components/shared/__tests__/__snapshots__/ellipsis.test.tsx.snap
View File

@@ -6,6 +6,7 @@ exports[`Ellipsis should render correctly 1`] = `
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 10px;
min-width: 0;
}
</style></span></div>"

2
components/shared/__tests__/ellipsis.test.tsx
View File

@@ -6,7 +6,7 @@ describe('Ellipsis', () => {
it('should render correctly', () => {
const wrapper = mount(
<div style={{ width: '1px' }}>
<Ellipsis>text</Ellipsis>
<Ellipsis height="10px">text</Ellipsis>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()

7
components/shared/ellipsis.tsx
View File

@@ -1,6 +1,10 @@
import React from 'react'
const Ellipsis: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
export type EllipsisProps = {
height: string
}
const Ellipsis: React.FC<React.PropsWithChildren<EllipsisProps>> = ({ children, height }) => {
return (
<span>
{children}
@@ -9,6 +13,7 @@ const Ellipsis: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: ${height};
min-width: 0;
}
`}</style>