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

Merge pull request #248 from unix/placeholder

Browse Source 
fix: fix placeholder does not show ellipsis
This commit is contained in:
witt
2020-05-28 21:05:18 +08:00
committed by GitHub
parent 2682131fc8 e5d1d6f9e3
commit b357291f0b
9 changed files with 319 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,8 @@ import React, { useMemo } from 'react'
import withDefaults from '../utils/with-defaults'
import useTheme from '../styles/use-theme'
import { useAutoCompleteContext } from './auto-complete-context'
import { NormalSizes } from 'components/utils/prop-types'
import { NormalSizes } from '../utils/prop-types'
import Ellipsis from '../shared/ellipsis'
interface Props {
value: string
@@ -37,7 +38,7 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
return (
<div className={`item ${isActive ? 'active' : ''}`} onClick={selectHandler}>
<span>{children}</span>
<Ellipsis>{children}</Ellipsis>
<style jsx>{`
.item {
display: flex;
@@ -56,13 +57,6 @@ const AutoCompleteItem: React.FC<React.PropsWithChildren<AutoCompleteItemProps>>
transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.item:first-of-type {
border-top-left-radius: ${theme.layout.radius};
border-top-right-radius: ${theme.layout.radius};

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

@@ -1,7 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Select should render correctly 1`] = `
"<div><div class=\\"select \\"><span class=\\"value placeholder\\"></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>
"<div><div class=\\"select \\"><span class=\\"value placeholder\\"><span><style>
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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>
svg {
color: inherit;
stroke: currentColor;
@@ -81,7 +88,14 @@ exports[`Select should render correctly 1`] = `
align-items: center;
color: #666;
}
</style></div><div class=\\"select \\"><span class=\\"value placeholder\\"></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>
</style></div><div class=\\"select \\"><span class=\\"value placeholder\\"><span><style>
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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>
svg {
color: inherit;
stroke: currentColor;
@@ -161,7 +175,14 @@ exports[`Select should render correctly 1`] = `
align-items: center;
color: #666;
}
</style></div><div class=\\"select \\"><span class=\\"value placeholder\\"></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>
</style></div><div class=\\"select \\"><span class=\\"value placeholder\\"><span><style>
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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>
svg {
color: inherit;
stroke: currentColor;
@@ -241,7 +262,14 @@ exports[`Select should render correctly 1`] = `
align-items: center;
color: #666;
}
</style></div><div class=\\"select \\"><span class=\\"value placeholder\\"></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>
</style></div><div class=\\"select \\"><span class=\\"value placeholder\\"><span><style>
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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>
svg {
color: inherit;
stroke: currentColor;
@@ -325,7 +353,14 @@ exports[`Select should render correctly 1`] = `
`;
exports[`Select should work correctly with labels 1`] = `
"<div class=\\"select \\"><span class=\\"value placeholder\\"></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>
"<div class=\\"select \\"><span class=\\"value placeholder\\"><span><style>
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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>
svg {
color: inherit;
stroke: currentColor;
@@ -419,7 +454,48 @@ initialize {
"attribs": Object {
"class": "value placeholder",
},
"children": Array [],
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
",
"next": null,
"parent": [Circular],
"prev": null,
"type": "text",
},
],
"name": "style",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "style",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
@@ -619,7 +695,48 @@ initialize {
"attribs": Object {
"class": "value placeholder",
},
"children": Array [],
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
",
"next": null,
"parent": [Circular],
"prev": null,
"type": "text",
},
],
"name": "style",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "style",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
@@ -687,7 +804,48 @@ initialize {
"attribs": Object {
"class": "value placeholder",
},
"children": Array [],
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
",
"next": null,
"parent": [Circular],
"prev": null,
"type": "text",
},
],
"name": "style",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "style",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": Object {
@@ -959,7 +1117,48 @@ initialize {
"attribs": Object {
"class": "value placeholder",
},
"children": Array [],
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
",
"next": null,
"parent": [Circular],
"prev": null,
"type": "text",
},
],
"name": "style",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "style",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],
@@ -1104,7 +1303,48 @@ initialize {
"attribs": Object {
"class": "value placeholder",
},
"children": Array [],
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"attribs": Object {},
"children": Array [
Object {
"data": "
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
",
"next": null,
"parent": [Circular],
"prev": null,
"type": "text",
},
],
"name": "style",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "style",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": null,
"parent": [Circular],
"prev": null,
"type": "tag",
"x-attribsNamespace": Object {},
"x-attribsPrefix": Object {},
},
],
"name": "span",
"namespace": "http://www.w3.org/1999/xhtml",
"next": [Circular],

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

@@ -1,7 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Select Multiple should render correctly 1`] = `
"<div class=\\"select multiple \\"><span class=\\"value placeholder\\"></span><div class=\\"item mock \\"><style>
"<div class=\\"select multiple \\"><span class=\\"value placeholder\\"><span><style>
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
</style></span></span><div class=\\"item mock \\"><style>
.item {
}

5
components/select/__tests__/multiple.test.tsx
View File

@@ -24,7 +24,10 @@ describe('Select Multiple', () => {
</Select>,
)
expect(wrapper.find('.option').length).toBeGreaterThan(1)
const text = wrapper.find('.option').map(item => item.text())
const text = wrapper
.find('.option')
.map(item => item.text())
.reduce((pre, current) => `${pre}${current}`, '')
expect(text.includes('test-1')).toBeTruthy()
expect(text.includes('test-2')).toBeTruthy()
expect(text.includes('test-3')).not.toBeTruthy()

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

@@ -3,6 +3,7 @@ import withDefaults from '../utils/with-defaults'
import useTheme from '../styles/use-theme'
import { useSelectContext } from './select-context'
import useWarning from '../utils/use-warning'
import Ellipsis from '../shared/ellipsis'
interface Props {
value?: string
@@ -80,7 +81,7 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
className={`option ${divider ? 'divider' : ''} ${label ? 'label' : ''} ${className}`}
onClick={clickHandler}
{...props}>
<span>{children}</span>
<Ellipsis>{children}</Ellipsis>
</div>
<style jsx>{`
@@ -101,13 +102,6 @@ const SelectOption: React.FC<React.PropsWithChildren<SelectOptionProps>> = ({
transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.option:hover {
background-color: ${hoverBgColor};
color: ${theme.palette.accents_7};

7
components/select/select.tsx
View File

@@ -11,6 +11,7 @@ import SelectMultipleValue from './select-multiple-value'
import Grid from '../grid'
import { SelectContext, SelectConfig } from './select-context'
import { getSizes } from './styles'
import Ellipsis from '../shared/ellipsis'
interface Props {
disabled?: boolean
@@ -136,7 +137,11 @@ const Select: React.FC<React.PropsWithChildren<SelectProps>> = ({
ref={ref}
onClick={clickHandler}
{...props}>
{isEmpty && <span className="value placeholder">{placeholder}</span>}
{isEmpty && (
<span className="value placeholder">
<Ellipsis>{placeholder}</Ellipsis>
</span>
)}
{value && !multiple && <span className="value">{selectedChild}</span>}
{value && multiple && <Grid.Container gap={0.5}>{selectedChild}</Grid.Container>}
<SelectDropdown

12
components/shared/__tests__/__snapshots__/ellipsis.test.tsx.snap Normal file
View File

@@ -0,0 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Ellipsis should render correctly 1`] = `
"<div style=\\"width: 1px;\\"><span>text<style>
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
</style></span></div>"
`;

15
components/shared/__tests__/ellipsis.test.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from 'react'
import { mount } from 'enzyme'
import Ellipsis from '../ellipsis'
describe('Ellipsis', () => {
it('should render correctly', () => {
const wrapper = mount(
<div style={{ width: '1px' }}>
<Ellipsis>text</Ellipsis>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
})

19
components/shared/ellipsis.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react'
const Ellipsis: React.FC<React.PropsWithChildren<{}>> = ({ children }) => {
return (
<span>
{children}
<style jsx>{`
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
`}</style>
</span>
)
}
export default React.memo(Ellipsis)