Skip to content

Commit

Permalink
feat : combobox for multiselect and search features (#32)
Browse files Browse the repository at this point in the history 
* 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>
  • Loading branch information
@akula-koteswarudu
akula-koteswarudu and Koteswarudu Akula authored Aug 8, 2022
1 parent 77348e5 commit 3a5952a
Show file tree
Hide file tree
Showing 16 changed files with 479 additions and 33 deletions.
38 changes: 38 additions & 0 deletions packages/apsara-ui/src/Combobox/Combobox.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react'
import Combobox from "./Combobox";
import {SelectProps} from 'rc-select';


export default {
title: "General/Combobox",
component: Combobox,
argTypes: {mode: {control:'select', options :['multiple','tags', 'combobox', undefined]}}
};

const options = [
{value:"2",label:"Lamborghini Diablo"},
{value:"3",label:"Ford Raptor"},
{value:"4",label:"Ferrari Testarossa"},
{value:"5",label:"Porsche 911 Carrera"},
{value:"6",label:"Jensen Interceptor"},
{value:"7",label:"Lamborghini Huracán"},
{value:"8",label:"Ferrari 812 Superfast"},
{value:"9",label:"Jeep Gladiator"},
{value:"10",label:"Land Rover Defender"},
{value:"11",label:"Rolls-Royce Wraith"},
{value:"12",label:"Suzuki Samurai"},
]

const Template = (args : SelectProps) => <Combobox {...args}/>

export const MultiSelectWithSearch = Template.bind({})

MultiSelectWithSearch.args = {
placeholder: "Please Select",
options: options,
allowClear: true,
showSearch: true,
showArrow: true,
mode:"multiple"
}

282 changes: 282 additions & 0 deletions packages/apsara-ui/src/Combobox/Combobox.styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,282 @@
import styled, { css } from "styled-components";
import Select from 'rc-select'

export const DropdownStyle = css`
.rc-select{
box-sizing: border-box;
position: relative;
vertical-align: middle;
width: 100%;
}
.rc-select-dropdown-hidden{
display: none;
}
.rc-select-dropdown{
background-color: ${({theme})=>theme?.combobox?.dropdown};
border: 1px solid ${({theme})=>theme?.combobox?.border};
box-shadow: 0 0px 10px ${({theme})=>theme?.combobox?.border};
border-radius: 2px;
z-index: 99999;
position: absolute;
}
.rc-select-item{
padding: 5px;
padding-left: 10px;
width: 100%;
color: ${({theme})=>theme?.combobox?.color}
}
.rc-select-item-option-active{
background-color: ${({theme})=>theme?.combobox?.active};
cursor: pointer;
color: ${({theme})=>theme?.combobox?.activeClr};
}
.rc-select-item-option-selected{
color: ${({theme})=>theme?.combobox?.optionClr};
background-color: ${({theme})=>theme?.combobox?.optionBg};
display: inline-flex;
align-items: center;
justify-content: space-between;
padding-right: 20px;
}
.rc-select-focused{
.rc-select-selector{
border-color: ${({theme})=>theme?.combobox?.focus};
}
}
.rc-select-dropdown-slide-enter,
.rc-select-dropdown-slide-appear {
animation-duration: .3s;
animation-fill-mode: both;
transform-origin: 0 0;
opacity: 0;
animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
animation-play-state: paused;
}
.rc-select-dropdown-slide-leave {
animation-duration: .3s;
animation-fill-mode: both;
transform-origin: 0 0;
opacity: 1;
animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
animation-play-state: paused;
}
.rc-select-dropdown-slide-enter.rc-select-dropdown-slide-enter-active.rc-select-dropdown-placement-bottomLeft,
.rc-select-dropdown-slide-appear.rc-select-dropdown-slide-appear-active.rc-select-dropdown-placement-bottomLeft {
animation-name: rcSelectDropdownSlideUpIn;
animation-play-state: running;
}
.rc-select-dropdown-slide-leave.rc-select-dropdown-slide-leave-active.rc-select-dropdown-placement-bottomLeft {
animation-name: rcSelectDropdownSlideUpOut;
animation-play-state: running;
}
.rc-select-dropdown-slide-enter.rc-select-dropdown-slide-enter-active.rc-select-dropdown-placement-topLeft,
.rc-select-dropdown-slide-appear.rc-select-dropdown-slide-appear-active.rc-select-dropdown-placement-topLeft {
animation-name: rcSelectDropdownSlideDownIn;
animation-play-state: running;
}
.rc-select-dropdown-slide-leave.rc-select-dropdown-slide-leave-active.rc-select-dropdown-placement-topLeft {
animation-name: rcSelectDropdownSlideDownOut;
animation-play-state: running;
}
@keyframes rcSelectDropdownSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@keyframes rcSelectDropdownSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0);
}
}
@keyframes rcSelectDropdownSlideDownIn {
0% {
opacity: 0;
transform-origin: 0% 100%;
transform: scaleY(0);
}
100% {
opacity: 1;
transform-origin: 0% 100%;
transform: scaleY(1);
}
}
@keyframes rcSelectDropdownSlideDownOut {
0% {
opacity: 1;
transform-origin: 0% 100%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 100%;
transform: scaleY(0);
}
}
`

export const StyledMultiSelect = styled(Select)<{showInputIcon?:boolean}>`
.rc-select-selection-search-input {
width: auto;
border: none;
font-size: 100%;
background: transparent;
padding-left: 10px;
outline: 0;
${({mode})=> (!mode || mode=='combobox') &&
css`position:absolute;
top:0;
height:100%;
z-index: 2;` }
}
.rc-select-selector {
box-sizing: border-box;
position:relative;
min-height: 32px;
box-sizing: border-box;
display:flex;
border-radius: 2px;
align-items: center;
z-index:1;
background: transparent;
border: 1px solid ${({theme})=>theme?.combobox?.border};
padding-right:45px;
overflow-x : hidden;
&:hover{
border-color:${({theme})=>theme?.combobox?.focus};
cursor: pointer;
}
}
.rc-select-selection-placeholder{
position: absolute;
top:0;
left:0px;
padding-left: 10px;
display:flex;
align-items:center;
width:100%;
height:100%;
color: ${({theme})=>theme?.combobox?.placeholder};
}
.rc-select-selection-overflow{
position: relative;
z-index:2;
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: start;
flex-wrap: wrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rc-select-selection-search-mirror{
display: none;
}
.rc-select-selection-item{
box-sizing: border-box;
margin-left: 10px;
${({mode,theme})=> (mode=='multiple' || mode=='tags') ?
css`
color:${theme?.combobox?.tagClr};
background-color:${theme?.combobox?.tagBg};
padding: 0px 6px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top:3px;
margin-bottom:3px;
border: 1px solid ${theme?.combobox?.border};
border-radius: 2px;
font-size : 12px;
`:
css`color: ${theme?.combobox?.color}`
}
}
.rc-select-selection-item-remove-icon{
margin-left: 3px;
font-size: 17px;
&:hover{
cursor: pointer;
}
}
.rc-select-clear{
position: absolute;
top:3px;
right:20px;
z-index: 3;
&:hover{
cursor: pointer;
}
.rc-select-clear-icon{
font-size:17px;
}
}
.rc-select-arrow{
${({showInputIcon,open,showSearch})=>!showInputIcon ? css`display: none` :
open ? showSearch ? css`position: absolute;
top:6px;
right:20px;`
:
css`display: none;`
:
css`position: absolute;
top:3px;
right:20px;
transform: rotate(90deg);
`
}
}
`

export const NotFoundContent = styled('div')`
height: 100px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 99999;
margin-bottom : 0px;
`
Loading

0 comments on commit 3a5952a

Please sign in to comment.