Skip to content

Commit

Permalink
feat: maxTagCount="responsive" (#578)
Browse files Browse the repository at this point in the history
* feat: Support responsive

* feat: Support responsive

* bump rc-overflow

* update snapshot
  • Loading branch information
zombieJ authored Dec 23, 2020
1 parent 12caa24 commit d374483
Show file tree
Hide file tree
Showing 9 changed files with 828 additions and 639 deletions.
12 changes: 12 additions & 0 deletions assets/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -117,8 +117,20 @@
}
}

.@{select-prefix}-selection-overflow {
display: flex;
flex-wrap: wrap;
width: 100%;

&-item {
flex: none;
max-width: 100%;
}
}

.@{select-prefix}-selection-search {
position: relative;
max-width: 100%;

&-input,
&-mirror {
Expand Down
21 changes: 17 additions & 4 deletions examples/tags.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,20 @@ for (let i = 10; i < 36; i += 1) {

const Test: React.FC = () => {
const [disabled, setDisabled] = React.useState(false);
const [value, setValue] = React.useState<string[]>(['name2', 'name3']);
const [maxTagCount, setMaxTagCount] = React.useState<number>(null);
const [value, setValue] = React.useState<string[]>([
'name1',
'name2',
'name3',
'name4',
'name5',
'a10',
'b11',
'c12',
'd13',
]);
const [maxTagCount, setMaxTagCount] = React.useState<number | 'responsive'>('responsive');

const toggleMaxTagCount = (count: number) => {
const toggleMaxTagCount = (count: number | 'responsive') => {
setMaxTagCount(count);
};

Expand All @@ -29,7 +39,7 @@ const Test: React.FC = () => {
<Select
placeholder="placeholder"
mode="tags"
style={{ width: 500 }}
style={{ width: 400 }}
disabled={disabled}
maxTagCount={maxTagCount}
maxTagTextLength={10}
Expand Down Expand Up @@ -69,6 +79,9 @@ const Test: React.FC = () => {
<button type="button" onClick={() => toggleMaxTagCount(null)}>
toggle maxTagCount (null)
</button>
<button type="button" onClick={() => toggleMaxTagCount('responsive')}>
toggle maxTagCount (responsive)
</button>
</p>
<h2>tags select with open = false</h2>
<div>
Expand Down
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,16 @@
"@babel/runtime": "^7.10.1",
"classnames": "2.x",
"rc-motion": "^2.0.1",
"rc-overflow": "^0.0.0-alpha.5",
"rc-trigger": "^5.0.4",
"rc-util": "^5.0.1",
"rc-virtual-list": "^3.2.0",
"warning": "^4.0.3"
"rc-virtual-list": "^3.2.0"
},
"devDependencies": {
"@types/enzyme": "^3.10.5",
"@types/jest": "^26.0.0",
"@types/react": "^16.8.19",
"@types/react-dom": "^16.8.4",
"@types/warning": "^3.0.0",
"cross-env": "^7.0.0",
"enzyme": "^3.3.0",
"enzyme-to-json": "^3.4.0",
Expand Down
Loading

1 comment on commit d374483

@vercel
Copy link

@vercel vercel bot commented on d374483 Dec 23, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.