Skip to content

Commit 3a5952a

Browse files
akula-koteswaruduKoteswarudu Akula
akula-koteswarudu
and
Koteswarudu Akula
authored
feat : combobox for multiselect and search features (#32)
* updated antd select to radix select * changed switch from antd to radix * changed switch in formBuilder * added story for switch and fixed props for select in FormBuilder * Changed antd radio to radix * chore: changed storybook for Radio * fix: updated yarn lock to fix rollup plugin version issue * feat: replaced antd slider with radix slider * feat: removed antd from image * feat: removed antd tag and created a new tag component * feat: added a simple preview option to Image * feat: created a new component combobox combobox provides multi select and search features BREAKING CHANGE: select doesn't provide multi select or search feature. if we need them, we need to use combobox. combobox for multiselect and search feature #31 * style: minor styling changes Co-authored-by: Koteswarudu Akula <koteswaruduakula@koteswarudu-a.optilink>
1 parent 77348e5 commit 3a5952a

File tree

16 files changed

+479
-33
lines changed

16 files changed

+479
-33
lines changed

‎packages/apsara-ui/src/Combobox/Combobox.stories.tsx

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
import Combobox from "./Combobox";
3+
import {SelectProps} from 'rc-select';
4+
5+
6+
export default {
7+
title: "General/Combobox",
8+
component: Combobox,
9+
argTypes: {mode: {control:'select', options :['multiple','tags', 'combobox', undefined]}}
10+
};
11+
12+
const options = [
13+
{value:"2",label:"Lamborghini Diablo"},
14+
{value:"3",label:"Ford Raptor"},
15+
{value:"4",label:"Ferrari Testarossa"},
16+
{value:"5",label:"Porsche 911 Carrera"},
17+
{value:"6",label:"Jensen Interceptor"},
18+
{value:"7",label:"Lamborghini Huracán"},
19+
{value:"8",label:"Ferrari 812 Superfast"},
20+
{value:"9",label:"Jeep Gladiator"},
21+
{value:"10",label:"Land Rover Defender"},
22+
{value:"11",label:"Rolls-Royce Wraith"},
23+
{value:"12",label:"Suzuki Samurai"},
24+
]
25+
26+
const Template = (args : SelectProps) => <Combobox {...args}/>
27+
28+
export const MultiSelectWithSearch = Template.bind({})
29+
30+
MultiSelectWithSearch.args = {
31+
placeholder: "Please Select",
32+
options: options,
33+
allowClear: true,
34+
showSearch: true,
35+
showArrow: true,
36+
mode:"multiple"
37+
}
38+

‎packages/apsara-ui/src/Combobox/Combobox.styles.tsx

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
import styled, { css } from "styled-components";
2+
import Select from 'rc-select'
3+
4+
export const DropdownStyle = css`
5+
.rc-select{
6+
box-sizing: border-box;
7+
position: relative;
8+
vertical-align: middle;
9+
width: 100%;
10+
}
11+
12+
.rc-select-dropdown-hidden{
13+
display: none;
14+
}
15+
16+
.rc-select-dropdown{
17+
background-color: ${({theme})=>theme?.combobox?.dropdown};
18+
border: 1px solid ${({theme})=>theme?.combobox?.border};
19+
box-shadow: 0 0px 10px ${({theme})=>theme?.combobox?.border};
20+
border-radius: 2px;
21+
z-index: 99999;
22+
position: absolute;
23+
}
24+
25+
.rc-select-item{
26+
padding: 5px;
27+
padding-left: 10px;
28+
width: 100%;
29+
color: ${({theme})=>theme?.combobox?.color}
30+
}
31+
32+
.rc-select-item-option-active{
33+
background-color: ${({theme})=>theme?.combobox?.active};
34+
cursor: pointer;
35+
color: ${({theme})=>theme?.combobox?.activeClr};
36+
}
37+
38+
.rc-select-item-option-selected{
39+
color: ${({theme})=>theme?.combobox?.optionClr};
40+
background-color: ${({theme})=>theme?.combobox?.optionBg};
41+
display: inline-flex;
42+
align-items: center;
43+
justify-content: space-between;
44+
padding-right: 20px;
45+
}
46+
47+
.rc-select-focused{
48+
.rc-select-selector{
49+
border-color: ${({theme})=>theme?.combobox?.focus};
50+
}
51+
}
52+
53+
.rc-select-dropdown-slide-enter,
54+
.rc-select-dropdown-slide-appear {
55+
animation-duration: .3s;
56+
animation-fill-mode: both;
57+
transform-origin: 0 0;
58+
opacity: 0;
59+
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
60+
animation-play-state: paused;
61+
}
62+
.rc-select-dropdown-slide-leave {
63+
animation-duration: .3s;
64+
animation-fill-mode: both;
65+
transform-origin: 0 0;
66+
opacity: 1;
67+
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
68+
animation-play-state: paused;
69+
}
70+
.rc-select-dropdown-slide-enter.rc-select-dropdown-slide-enter-active.rc-select-dropdown-placement-bottomLeft,
71+
.rc-select-dropdown-slide-appear.rc-select-dropdown-slide-appear-active.rc-select-dropdown-placement-bottomLeft {
72+
animation-name: rcSelectDropdownSlideUpIn;
73+
animation-play-state: running;
74+
}
75+
.rc-select-dropdown-slide-leave.rc-select-dropdown-slide-leave-active.rc-select-dropdown-placement-bottomLeft {
76+
animation-name: rcSelectDropdownSlideUpOut;
77+
animation-play-state: running;
78+
}
79+
.rc-select-dropdown-slide-enter.rc-select-dropdown-slide-enter-active.rc-select-dropdown-placement-topLeft,
80+
.rc-select-dropdown-slide-appear.rc-select-dropdown-slide-appear-active.rc-select-dropdown-placement-topLeft {
81+
animation-name: rcSelectDropdownSlideDownIn;
82+
animation-play-state: running;
83+
}
84+
.rc-select-dropdown-slide-leave.rc-select-dropdown-slide-leave-active.rc-select-dropdown-placement-topLeft {
85+
animation-name: rcSelectDropdownSlideDownOut;
86+
animation-play-state: running;
87+
}
88+
@keyframes rcSelectDropdownSlideUpIn {
89+
0% {
90+
opacity: 0;
91+
transform-origin: 0% 0%;
92+
transform: scaleY(0);
93+
}
94+
100% {
95+
opacity: 1;
96+
transform-origin: 0% 0%;
97+
transform: scaleY(1);
98+
}
99+
}
100+
@keyframes rcSelectDropdownSlideUpOut {
101+
0% {
102+
opacity: 1;
103+
transform-origin: 0% 0%;
104+
transform: scaleY(1);
105+
}
106+
100% {
107+
opacity: 0;
108+
transform-origin: 0% 0%;
109+
transform: scaleY(0);
110+
}
111+
}
112+
@keyframes rcSelectDropdownSlideDownIn {
113+
0% {
114+
opacity: 0;
115+
transform-origin: 0% 100%;
116+
transform: scaleY(0);
117+
}
118+
100% {
119+
opacity: 1;
120+
transform-origin: 0% 100%;
121+
transform: scaleY(1);
122+
}
123+
}
124+
@keyframes rcSelectDropdownSlideDownOut {
125+
0% {
126+
opacity: 1;
127+
transform-origin: 0% 100%;
128+
transform: scaleY(1);
129+
}
130+
100% {
131+
opacity: 0;
132+
transform-origin: 0% 100%;
133+
transform: scaleY(0);
134+
}
135+
}
136+
137+
138+
139+
`
140+
141+
export const StyledMultiSelect = styled(Select)<{showInputIcon?:boolean}>`
142+
143+
144+
.rc-select-selection-search-input {
145+
width: auto;
146+
border: none;
147+
font-size: 100%;
148+
background: transparent;
149+
padding-left: 10px;
150+
outline: 0;
151+
152+
${({mode})=> (!mode || mode=='combobox') &&
153+
css`position:absolute;
154+
top:0;
155+
height:100%;
156+
z-index: 2;` }
157+
158+
159+
}
160+
161+
.rc-select-selector {
162+
box-sizing: border-box;
163+
position:relative;
164+
min-height: 32px;
165+
box-sizing: border-box;
166+
display:flex;
167+
border-radius: 2px;
168+
align-items: center;
169+
z-index:1;
170+
background: transparent;
171+
border: 1px solid ${({theme})=>theme?.combobox?.border};
172+
padding-right:45px;
173+
overflow-x : hidden;
174+
175+
&:hover{
176+
border-color:${({theme})=>theme?.combobox?.focus};
177+
cursor: pointer;
178+
}
179+
}
180+
181+
.rc-select-selection-placeholder{
182+
position: absolute;
183+
top:0;
184+
left:0px;
185+
padding-left: 10px;
186+
display:flex;
187+
align-items:center;
188+
width:100%;
189+
height:100%;
190+
color: ${({theme})=>theme?.combobox?.placeholder};
191+
}
192+
193+
.rc-select-selection-overflow{
194+
position: relative;
195+
z-index:2;
196+
width:100%;
197+
height:100%;
198+
display: flex;
199+
align-items: center;
200+
justify-content: start;
201+
flex-wrap: wrap;
202+
overflow: hidden;
203+
text-overflow: ellipsis;
204+
}
205+
206+
.rc-select-selection-search-mirror{
207+
display: none;
208+
}
209+
210+
.rc-select-selection-item{
211+
box-sizing: border-box;
212+
margin-left: 10px;
213+
214+
215+
${({mode,theme})=> (mode=='multiple' || mode=='tags') ?
216+
css`
217+
color:${theme?.combobox?.tagClr};
218+
background-color:${theme?.combobox?.tagBg};
219+
padding: 0px 6px;
220+
display: flex;
221+
align-items: center;
222+
justify-content: space-between;
223+
margin-top:3px;
224+
margin-bottom:3px;
225+
border: 1px solid ${theme?.combobox?.border};
226+
border-radius: 2px;
227+
font-size : 12px;
228+
`:
229+
css`color: ${theme?.combobox?.color}`
230+
}
231+
}
232+
233+
.rc-select-selection-item-remove-icon{
234+
margin-left: 3px;
235+
font-size: 17px;
236+
237+
&:hover{
238+
cursor: pointer;
239+
}
240+
}
241+
242+
.rc-select-clear{
243+
position: absolute;
244+
top:3px;
245+
right:20px;
246+
z-index: 3;
247+
&:hover{
248+
cursor: pointer;
249+
}
250+
251+
.rc-select-clear-icon{
252+
font-size:17px;
253+
}
254+
}
255+
256+
.rc-select-arrow{
257+
258+
${({showInputIcon,open,showSearch})=>!showInputIcon ? css`display: none` :
259+
open ? showSearch ? css`position: absolute;
260+
top:6px;
261+
right:20px;`
262+
:
263+
css`display: none;`
264+
:
265+
css`position: absolute;
266+
top:3px;
267+
right:20px;
268+
transform: rotate(90deg);
269+
`
270+
}
271+
}
272+
`
273+
274+
export const NotFoundContent = styled('div')`
275+
height: 100px;
276+
display: flex;
277+
align-items: center;
278+
justify-content: center;
279+
gap: 10px;
280+
z-index: 99999;
281+
margin-bottom : 0px;
282+
`

0 commit comments

Comments
 (0)