Skip to content

Commit 039e07c

Browse files
committed
add: dropdown exceptance
1 parent 665e20f commit 039e07c

File tree

4 files changed

+38
-3
lines changed

4 files changed

+38
-3
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@beeinventor/dasiot-react-component-lib",
3-
"version": "1.2.10",
3+
"version": "1.3.0",
44
"module": "lib/index.js",
55
"types": "lib/index.d.ts",
66
"files": [

src/components/Dropdown/Dropdown.stories.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,14 @@ Default.args = {
6565
list,
6666
};
6767

68+
export const Exceptance: Story<DropDownProps> = Template.bind({});
69+
70+
Exceptance.args = {
71+
placeholder: 'Select',
72+
list,
73+
isExceptance: true,
74+
};
75+
6876
export const Selected: Story<DropDownProps> = Template.bind({});
6977

7078
Selected.args = {

src/components/Dropdown/Dropdown.tsx

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,20 +49,42 @@ const List = styled(Box)(({ theme }) => ({
4949
},
5050
}));
5151

52-
const Item = styled(Box, { label: 'Dropdown-item' })(({ theme }) => ({
52+
interface ItemProps {
53+
isExceptance?: boolean;
54+
}
55+
56+
const Item = styled(Box, {
57+
label: 'Dropdown-item',
58+
shouldForwardProp: (prop) => prop !== 'isExceptance',
59+
})<ItemProps>(({ theme, isExceptance }) => ({
5360
...theme.typography.h3,
5461
cursor: 'pointer',
5562
display: 'flex',
5663
alignItems: 'center',
5764
lineHeight: 2.5,
65+
position: 'relative',
5866
'&:hover': {
5967
backgroundColor: 'rgba(0, 0, 0, .05)',
6068
},
69+
'&:before': {
70+
content: '""',
71+
position: 'absolute',
72+
left: 0,
73+
right: 0,
74+
bottom: 0,
75+
height: '1px',
76+
width: '98%',
77+
margin: 'auto',
78+
borderBottom: isExceptance
79+
? `1px solid ${theme.color.secondary.$40}`
80+
: 'none',
81+
},
6182
}));
6283

6384
const Dropdown: React.VFC<DropDownProps> = (props) => {
6485
const {
6586
list,
87+
isExceptance,
6688
itemProps,
6789
placeholder,
6890
selectedId,
@@ -115,11 +137,12 @@ const Dropdown: React.VFC<DropDownProps> = (props) => {
115137

116138
const items = list
117139
.filter((item) => item.id !== selectionId)
118-
.map((item) => (
140+
.map((item, i) => (
119141
<Item
120142
key={`dropdown-item-${item.id}`}
121143
className="Dropdown-item"
122144
onClick={() => handleOnClick(item)}
145+
isExceptance={isExceptance && i === 0}
123146
{...itemProps}
124147
>
125148
<Icon className="Dropdown-icon">

src/components/Dropdown/Dropdown.type.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ export interface DropDownProps extends Omit<BoxProps, 'onSelect'> {
1616
* Item list
1717
*/
1818
list: DropDownItem[];
19+
/**
20+
* Contain Exceptance
21+
*/
22+
isExceptance?: boolean;
1923
/**
2024
* Placeholder
2125
*/

0 commit comments

Comments
 (0)