@cleartrip/ct-design-dropdown 5.7.0-SNAPSHOT-native-main.6 → 5.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Dropdown.d.ts.map +1 -1
- package/dist/ct-design-dropdown.browser.cjs.js +1 -1
- package/dist/ct-design-dropdown.browser.cjs.js.map +1 -1
- package/dist/ct-design-dropdown.browser.esm.js +1 -1
- package/dist/ct-design-dropdown.browser.esm.js.map +1 -1
- package/dist/ct-design-dropdown.cjs.js +38 -56
- package/dist/ct-design-dropdown.cjs.js.map +1 -1
- package/dist/ct-design-dropdown.esm.js +38 -56
- package/dist/ct-design-dropdown.esm.js.map +1 -1
- package/dist/ct-design-dropdown.umd.js +38 -56
- package/dist/ct-design-dropdown.umd.js.map +1 -1
- package/dist/style.d.ts +6 -19
- package/dist/style.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/Dropdown.tsx +38 -17
- package/src/style.ts +6 -19
package/dist/Dropdown.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../packages/components/Dropdown/src/Dropdown.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../packages/components/Dropdown/src/Dropdown.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAQ,MAAM,QAAQ,CAAC;AA2E7C,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA8HrC,CAAC;AAYF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),o=require("react"),t=require("@cleartrip/ct-design-typography"),r=require("@cleartrip/ct-design-style-manager"),n=require("@cleartrip/ct-design-icons");const i=
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),o=require("react"),t=require("@cleartrip/ct-design-typography"),r=require("@cleartrip/ct-design-style-manager"),n=require("@cleartrip/ct-design-icons");const i=e=>({flex:1,height:e,justifyContent:"center",paddingHorizontal:12}),a=r.makeStyles(()=>({root:{width:"100%",backgroundColor:"#fff",position:"relative"},dropDownItemListContainer:{width:"100%",maxHeight:240,borderRadius:5,position:"absolute",overflow:"hidden",shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.22,shadowRadius:2.22,elevation:3,backgroundColor:"#fff"},dropDownItemContainer:{width:"100%",justifyContent:"center",paddingHorizontal:16,paddingVertical:12},chevronDownContainer:{height:24,left:3,paddingRight:12},scrollArea:{maxHeight:240,overflowY:"auto"}})),l=({item:o,index:n,isSelected:i,dropdownItem:a,onSelect:l,customItemContainer:s=[],customItemTextContainer:d={}})=>{const c=r.useStyles(()=>({root:{backgroundColor:i?"#1a1a1a":"#fff",cursor:"pointer",width:"100%",justifyContent:"center",paddingHorizontal:16,paddingVertical:12}}),[i]),p=r.useWebMergeStyles([c.root,...s],[c.root,s]);return e.jsx("div",{className:p,onClick:()=>l(o,n),children:e.jsx(t.Typography,{styleConfig:d,variant:t.TypographyVariant.HM4,color:i?t.TypographyColor.NEUTRAL:t.TypographyColor.PRIMARY,children:a})})};exports.Dropdown=({placeHolder:s,itemList:d,height:c=40,styleConfig:p={},dropDownValue:u,defaultSelectedIndex:h,onItemSelect:g,renderItem:m,showDropDownListOnTop:C=!0})=>{const{placeHolderContainer:y=[],placeHolderTextContainer:f=[],dropDownItemListContainer:w=[],dropDownItemContainer:x=[],dropDownItemTextContainer:v={}}=p,I=o.useRef(null),[b,S]=o.useState(!1),[T,D]=o.useState(null!=h?h:-1);o.useEffect(()=>{if(!b)return;const e=e=>{I.current&&!I.current.contains(e.target)&&S(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[b]);const H=r.useStyles(e=>({placeHolderContainer:{width:"100%",height:c,backgroundColor:"#fff",borderRadius:5,flexDirection:"row",alignItems:"center",borderColor:b?e.color.border.primary:"#e0e0e0",borderWidth:1},placeHolderTextContainer:i(c)}),[b,c]),j=(e,o)=>{D(o),null==g||g(e,o),S(!1)},M=C,R=r.useWebMergeStyles([a.root],[]),L=r.useWebMergeStyles([H.placeHolderContainer,...y],[H.placeHolderContainer,y]),k=r.useWebMergeStyles([H.placeHolderTextContainer],[H.placeHolderTextContainer]),N=r.useWebMergeStyles([a.chevronDownContainer],[]),W=M?{bottom:c}:{top:c},A=r.useWebMergeStyles([a.dropDownItemListContainer,W,a.scrollArea,...w],[M,c,w]);return e.jsxs("div",{ref:I,className:R,children:[e.jsxs("div",{className:L,onClick:()=>S(e=>!e),children:[e.jsx("div",{className:k,children:e.jsx(t.Typography,{color:u.length>0?t.TypographyColor.PRIMARY:t.TypographyColor.DISABLED,lineClamp:1,styleConfig:{root:f},variant:t.TypographyVariant.HM4,children:u.length>0?u:s})}),e.jsx("div",{className:N,children:e.jsx(n.ChevronDown,{})})]}),b&&e.jsx("div",{className:A,children:d.map((o,t)=>{const r=(null==m?void 0:m(o,t))||(null==o?void 0:o.label),n=t===T;return e.jsx(l,{item:o,index:t,isSelected:n,dropdownItem:r,onSelect:j,customItemContainer:x,customItemTextContainer:v},`${o.value}-${t}`)})})]})};
|
|
2
2
|
//# sourceMappingURL=ct-design-dropdown.browser.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dropdown.browser.cjs.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["
|
|
1
|
+
{"version":3,"file":"ct-design-dropdown.browser.cjs.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["getPlaceHolderTextContainerStyles","height","flex","justifyContent","paddingHorizontal","staticStyles","makeStyles","root","width","backgroundColor","position","dropDownItemListContainer","maxHeight","borderRadius","overflow","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","dropDownItemContainer","paddingVertical","chevronDownContainer","left","paddingRight","scrollArea","overflowY","DropdownListItem","item","index","isSelected","dropdownItem","onSelect","customItemContainer","customItemTextContainer","itemDynamicStyles","useStyles","cursor","mergedItemClassName","useWebMergeStyles","_jsx","className","onClick","children","Typography","styleConfig","variant","TypographyVariant","HM4","color","TypographyColor","NEUTRAL","PRIMARY","placeHolder","itemList","dropDownValue","defaultSelectedIndex","onItemSelect","renderItem","showDropDownListOnTop","placeHolderContainer","customPlaceHolderContainer","placeHolderTextContainer","customPlaceHolderTextContainer","customDropDownItemListContainer","customDropDownItemContainer","dropDownItemTextContainer","rootRef","useRef","focus","setFocus","useState","singleSelectIndex","setSingleSelectIndex","useEffect","handleOutside","event","current","contains","target","document","addEventListener","removeEventListener","dynamicStyles","theme","flexDirection","alignItems","borderColor","border","primary","borderWidth","singleSelectClickHandler","isShownOnTop","mergedRootClassName","mergedPlaceHolderClassName","mergedPlaceHolderTextClassName","mergedChevronClassName","listPositionStyle","bottom","top","mergedListClassName","_jsxs","ref","state","length","DISABLED","lineClamp","jsx","ChevronDown","map","label","value"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useRef as t,useState as
|
|
1
|
+
import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useRef as t,useState as r,useEffect as n}from"react";import{Typography as i,TypographyColor as a,TypographyVariant as l}from"@cleartrip/ct-design-typography";import{makeStyles as d,useStyles as c,useWebMergeStyles as s}from"@cleartrip/ct-design-style-manager";import{ChevronDown as m}from"@cleartrip/ct-design-icons";const p=e=>({flex:1,height:e,justifyContent:"center",paddingHorizontal:12}),h=d(()=>({root:{width:"100%",backgroundColor:"#fff",position:"relative"},dropDownItemListContainer:{width:"100%",maxHeight:240,borderRadius:5,position:"absolute",overflow:"hidden",shadowColor:"#000",shadowOffset:{width:0,height:1},shadowOpacity:.22,shadowRadius:2.22,elevation:3,backgroundColor:"#fff"},dropDownItemContainer:{width:"100%",justifyContent:"center",paddingHorizontal:16,paddingVertical:12},chevronDownContainer:{height:24,left:3,paddingRight:12},scrollArea:{maxHeight:240,overflowY:"auto"}})),u=({item:e,index:t,isSelected:r,dropdownItem:n,onSelect:d,customItemContainer:m=[],customItemTextContainer:p={}})=>{const h=c(()=>({root:{backgroundColor:r?"#1a1a1a":"#fff",cursor:"pointer",width:"100%",justifyContent:"center",paddingHorizontal:16,paddingVertical:12}}),[r]),u=s([h.root,...m],[h.root,m]);return o("div",{className:u,onClick:()=>d(e,t),children:o(i,{styleConfig:p,variant:l.HM4,color:r?a.NEUTRAL:a.PRIMARY,children:n})})},C=({placeHolder:d,itemList:C,height:f=40,styleConfig:g={},dropDownValue:w,defaultSelectedIndex:v,onItemSelect:I,renderItem:x,showDropDownListOnTop:H=!0})=>{const{placeHolderContainer:D=[],placeHolderTextContainer:b=[],dropDownItemListContainer:y=[],dropDownItemContainer:L=[],dropDownItemTextContainer:R={}}=g,T=t(null),[N,S]=r(!1),[k,A]=r(null!=v?v:-1);n(()=>{if(!N)return;const e=e=>{T.current&&!T.current.contains(e.target)&&S(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[N]);const j=c(e=>({placeHolderContainer:{width:"100%",height:f,backgroundColor:"#fff",borderRadius:5,flexDirection:"row",alignItems:"center",borderColor:N?e.color.border.primary:"#e0e0e0",borderWidth:1},placeHolderTextContainer:p(f)}),[N,f]),E=(e,o)=>{A(o),null==I||I(e,o),S(!1)},M=H,z=s([h.root],[]),O=s([j.placeHolderContainer,...D],[j.placeHolderContainer,D]),V=s([j.placeHolderTextContainer],[j.placeHolderTextContainer]),Y=s([h.chevronDownContainer],[]),P=M?{bottom:f}:{top:f},$=s([h.dropDownItemListContainer,P,h.scrollArea,...y],[M,f,y]);return e("div",{ref:T,className:z,children:[e("div",{className:O,onClick:()=>S(e=>!e),children:[o("div",{className:V,children:o(i,{color:w.length>0?a.PRIMARY:a.DISABLED,lineClamp:1,styleConfig:{root:b},variant:l.HM4,children:w.length>0?w:d})}),o("div",{className:Y,children:o(m,{})})]}),N&&o("div",{className:$,children:C.map((e,t)=>{const r=(null==x?void 0:x(e,t))||(null==e?void 0:e.label);return o(u,{item:e,index:t,isSelected:t===k,dropdownItem:r,onSelect:E,customItemContainer:L,customItemTextContainer:R},`${e.value}-${t}`)})})]})};export{C as Dropdown};
|
|
2
2
|
//# sourceMappingURL=ct-design-dropdown.browser.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dropdown.browser.esm.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["
|
|
1
|
+
{"version":3,"file":"ct-design-dropdown.browser.esm.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["getPlaceHolderTextContainerStyles","height","flex","justifyContent","paddingHorizontal","staticStyles","makeStyles","root","width","backgroundColor","position","dropDownItemListContainer","maxHeight","borderRadius","overflow","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","dropDownItemContainer","paddingVertical","chevronDownContainer","left","paddingRight","scrollArea","overflowY","DropdownListItem","item","index","isSelected","dropdownItem","onSelect","customItemContainer","customItemTextContainer","itemDynamicStyles","useStyles","cursor","mergedItemClassName","useWebMergeStyles","_jsx","className","onClick","children","Typography","styleConfig","variant","TypographyVariant","HM4","color","TypographyColor","NEUTRAL","PRIMARY","Dropdown","placeHolder","itemList","dropDownValue","defaultSelectedIndex","onItemSelect","renderItem","showDropDownListOnTop","placeHolderContainer","customPlaceHolderContainer","placeHolderTextContainer","customPlaceHolderTextContainer","customDropDownItemListContainer","customDropDownItemContainer","dropDownItemTextContainer","rootRef","useRef","focus","setFocus","useState","singleSelectIndex","setSingleSelectIndex","useEffect","handleOutside","event","current","contains","target","document","addEventListener","removeEventListener","dynamicStyles","theme","flexDirection","alignItems","borderColor","border","primary","borderWidth","singleSelectClickHandler","isShownOnTop","mergedRootClassName","mergedPlaceHolderClassName","mergedPlaceHolderTextClassName","mergedChevronClassName","listPositionStyle","bottom","top","mergedListClassName","_jsxs","ref","state","length","DISABLED","lineClamp","ChevronDown","map","label","value"],"mappings":"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"}
|
|
@@ -6,68 +6,43 @@ var ctDesignTypography = require('@cleartrip/ct-design-typography');
|
|
|
6
6
|
var ctDesignStyleManager = require('@cleartrip/ct-design-style-manager');
|
|
7
7
|
var ctDesignIcons = require('@cleartrip/ct-design-icons');
|
|
8
8
|
|
|
9
|
-
const getDropdownListContainerStyles = () => ({
|
|
10
|
-
width: '100%',
|
|
11
|
-
maxHeight: 240,
|
|
12
|
-
borderRadius: 5,
|
|
13
|
-
position: 'absolute',
|
|
14
|
-
overflow: 'hidden',
|
|
15
|
-
shadowColor: '#000',
|
|
16
|
-
shadowOffset: { width: 0, height: 1 },
|
|
17
|
-
shadowOpacity: 0.22,
|
|
18
|
-
shadowRadius: 2.22,
|
|
19
|
-
elevation: 3,
|
|
20
|
-
backgroundColor: '#fff',
|
|
21
|
-
zIndex: 1,
|
|
22
|
-
});
|
|
23
|
-
const getDropdownItemContainerStyles = () => ({
|
|
24
|
-
display: 'flex',
|
|
25
|
-
width: '100%',
|
|
26
|
-
justifyContent: 'center',
|
|
27
|
-
alignItems: 'center',
|
|
28
|
-
paddingHorizontal: 16,
|
|
29
|
-
paddingVertical: 12,
|
|
30
|
-
});
|
|
31
|
-
const getRootContainerStyles = () => ({
|
|
32
|
-
width: '100%',
|
|
33
|
-
backgroundColor: '#fff',
|
|
34
|
-
position: 'relative',
|
|
35
|
-
});
|
|
36
9
|
const getChevronContainerStyles = () => ({
|
|
37
|
-
display: 'flex',
|
|
38
|
-
alignItems: 'center',
|
|
39
|
-
justifyContent: 'center',
|
|
40
|
-
flexShrink: 0,
|
|
41
10
|
height: 24,
|
|
11
|
+
left: 3,
|
|
42
12
|
paddingRight: 12,
|
|
43
13
|
});
|
|
44
|
-
const getPlaceHolderContainerStyles = (theme, height, focus) => ({
|
|
45
|
-
display: 'flex',
|
|
46
|
-
flexDirection: 'row',
|
|
47
|
-
alignItems: 'center',
|
|
48
|
-
width: '100%',
|
|
49
|
-
height,
|
|
50
|
-
backgroundColor: '#fff',
|
|
51
|
-
borderRadius: 5,
|
|
52
|
-
borderColor: focus ? theme.color.border.primary : '#e0e0e0',
|
|
53
|
-
borderWidth: 1,
|
|
54
|
-
borderStyle: 'solid',
|
|
55
|
-
boxSizing: 'border-box',
|
|
56
|
-
cursor: 'pointer',
|
|
57
|
-
});
|
|
58
14
|
const getPlaceHolderTextContainerStyles = (height) => ({
|
|
59
|
-
display: 'flex',
|
|
60
15
|
flex: 1,
|
|
61
|
-
minWidth: 0,
|
|
62
16
|
height,
|
|
63
|
-
|
|
17
|
+
justifyContent: 'center',
|
|
64
18
|
paddingHorizontal: 12,
|
|
65
19
|
});
|
|
66
20
|
|
|
67
21
|
const staticStyles = ctDesignStyleManager.makeStyles(() => ({
|
|
68
|
-
root:
|
|
69
|
-
|
|
70
|
-
|
|
22
|
+
root: {
|
|
23
|
+
width: '100%',
|
|
24
|
+
backgroundColor: '#fff',
|
|
25
|
+
position: 'relative',
|
|
26
|
+
},
|
|
27
|
+
dropDownItemListContainer: {
|
|
28
|
+
width: '100%',
|
|
29
|
+
maxHeight: 240,
|
|
30
|
+
borderRadius: 5,
|
|
31
|
+
position: 'absolute',
|
|
32
|
+
overflow: 'hidden',
|
|
33
|
+
shadowColor: '#000',
|
|
34
|
+
shadowOffset: { width: 0, height: 1 },
|
|
35
|
+
shadowOpacity: 0.22,
|
|
36
|
+
shadowRadius: 2.22,
|
|
37
|
+
elevation: 3,
|
|
38
|
+
backgroundColor: '#fff',
|
|
39
|
+
},
|
|
40
|
+
dropDownItemContainer: {
|
|
41
|
+
width: '100%',
|
|
42
|
+
justifyContent: 'center',
|
|
43
|
+
paddingHorizontal: 16,
|
|
44
|
+
paddingVertical: 12,
|
|
45
|
+
},
|
|
71
46
|
chevronDownContainer: getChevronContainerStyles(),
|
|
72
47
|
scrollArea: {
|
|
73
48
|
maxHeight: 240,
|
|
@@ -77,17 +52,15 @@ const staticStyles = ctDesignStyleManager.makeStyles(() => ({
|
|
|
77
52
|
const DropdownListItem = ({ item, index, isSelected, dropdownItem, onSelect, customItemContainer = [], customItemTextContainer = {}, }) => {
|
|
78
53
|
const itemDynamicStyles = ctDesignStyleManager.useStyles(() => ({
|
|
79
54
|
root: {
|
|
80
|
-
display: 'flex',
|
|
81
55
|
backgroundColor: isSelected ? '#1a1a1a' : '#fff',
|
|
82
56
|
cursor: 'pointer',
|
|
83
57
|
width: '100%',
|
|
84
58
|
justifyContent: 'center',
|
|
85
|
-
alignItems: 'center',
|
|
86
59
|
paddingHorizontal: 16,
|
|
87
60
|
paddingVertical: 12,
|
|
88
61
|
},
|
|
89
62
|
}), [isSelected]);
|
|
90
|
-
const mergedItemClassName = ctDesignStyleManager.useWebMergeStyles([
|
|
63
|
+
const mergedItemClassName = ctDesignStyleManager.useWebMergeStyles([itemDynamicStyles.root, ...customItemContainer], [itemDynamicStyles.root, customItemContainer]);
|
|
91
64
|
return (jsxRuntime.jsx("div", { className: mergedItemClassName, onClick: () => onSelect(item, index), children: jsxRuntime.jsx(ctDesignTypography.Typography, { styleConfig: customItemTextContainer, variant: ctDesignTypography.TypographyVariant.HM4, color: isSelected ? ctDesignTypography.TypographyColor.NEUTRAL : ctDesignTypography.TypographyColor.PRIMARY, children: dropdownItem }) }));
|
|
92
65
|
};
|
|
93
66
|
const Dropdown = ({ placeHolder, itemList, height = 40, styleConfig = {}, dropDownValue, defaultSelectedIndex, onItemSelect, renderItem, showDropDownListOnTop = true, }) => {
|
|
@@ -107,7 +80,16 @@ const Dropdown = ({ placeHolder, itemList, height = 40, styleConfig = {}, dropDo
|
|
|
107
80
|
return () => document.removeEventListener('mousedown', handleOutside);
|
|
108
81
|
}, [focus]);
|
|
109
82
|
const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
|
|
110
|
-
placeHolderContainer:
|
|
83
|
+
placeHolderContainer: {
|
|
84
|
+
width: '100%',
|
|
85
|
+
height,
|
|
86
|
+
backgroundColor: '#fff',
|
|
87
|
+
borderRadius: 5,
|
|
88
|
+
flexDirection: 'row',
|
|
89
|
+
alignItems: 'center',
|
|
90
|
+
borderColor: focus ? theme.color.border.primary : '#e0e0e0',
|
|
91
|
+
borderWidth: 1,
|
|
92
|
+
},
|
|
111
93
|
placeHolderTextContainer: getPlaceHolderTextContainerStyles(height),
|
|
112
94
|
}), [focus, height]);
|
|
113
95
|
const singleSelectClickHandler = (item, index) => {
|
|
@@ -128,7 +110,7 @@ const Dropdown = ({ placeHolder, itemList, height = 40, styleConfig = {}, dropDo
|
|
|
128
110
|
staticStyles.scrollArea,
|
|
129
111
|
...customDropDownItemListContainer,
|
|
130
112
|
], [isShownOnTop, height, customDropDownItemListContainer]);
|
|
131
|
-
return (jsxRuntime.jsxs("div", { ref: rootRef, className: mergedRootClassName, children: [jsxRuntime.jsxs("div", { className: mergedPlaceHolderClassName, onClick: toggleDropDown,
|
|
113
|
+
return (jsxRuntime.jsxs("div", { ref: rootRef, className: mergedRootClassName, children: [jsxRuntime.jsxs("div", { className: mergedPlaceHolderClassName, onClick: toggleDropDown, children: [jsxRuntime.jsx("div", { className: mergedPlaceHolderTextClassName, children: jsxRuntime.jsx(ctDesignTypography.Typography, { color: dropDownValue.length > 0 ? ctDesignTypography.TypographyColor.PRIMARY : ctDesignTypography.TypographyColor.DISABLED, lineClamp: 1, styleConfig: { root: customPlaceHolderTextContainer }, variant: ctDesignTypography.TypographyVariant.HM4, children: dropDownValue.length > 0 ? dropDownValue : placeHolder }) }), jsxRuntime.jsx("div", { className: mergedChevronClassName, children: jsxRuntime.jsx(ctDesignIcons.ChevronDown, {}) })] }), focus && (jsxRuntime.jsx("div", { className: mergedListClassName, children: itemList.map((item, index) => {
|
|
132
114
|
const dropdownItem = (renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index)) || (item === null || item === void 0 ? void 0 : item.label);
|
|
133
115
|
const isSelected = index === singleSelectIndex;
|
|
134
116
|
return (jsxRuntime.jsx(DropdownListItem, { item: item, index: index, isSelected: isSelected, dropdownItem: dropdownItem, onSelect: singleSelectClickHandler, customItemContainer: customDropDownItemContainer, customItemTextContainer: dropDownItemTextContainer }, `${item.value}-${index}`));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dropdown.cjs.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["makeStyles","useStyles","useWebMergeStyles","_jsx","Typography","TypographyVariant","TypographyColor","useRef","useState","useEffect","_jsxs","ChevronDown"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"ct-design-dropdown.cjs.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["makeStyles","useStyles","useWebMergeStyles","_jsx","Typography","TypographyVariant","TypographyColor","useRef","useState","useEffect","_jsxs","ChevronDown"],"mappings":"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"}
|
|
@@ -4,68 +4,43 @@ import { Typography, TypographyColor, TypographyVariant } from '@cleartrip/ct-de
|
|
|
4
4
|
import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
|
|
5
5
|
import { ChevronDown } from '@cleartrip/ct-design-icons';
|
|
6
6
|
|
|
7
|
-
const getDropdownListContainerStyles = () => ({
|
|
8
|
-
width: '100%',
|
|
9
|
-
maxHeight: 240,
|
|
10
|
-
borderRadius: 5,
|
|
11
|
-
position: 'absolute',
|
|
12
|
-
overflow: 'hidden',
|
|
13
|
-
shadowColor: '#000',
|
|
14
|
-
shadowOffset: { width: 0, height: 1 },
|
|
15
|
-
shadowOpacity: 0.22,
|
|
16
|
-
shadowRadius: 2.22,
|
|
17
|
-
elevation: 3,
|
|
18
|
-
backgroundColor: '#fff',
|
|
19
|
-
zIndex: 1,
|
|
20
|
-
});
|
|
21
|
-
const getDropdownItemContainerStyles = () => ({
|
|
22
|
-
display: 'flex',
|
|
23
|
-
width: '100%',
|
|
24
|
-
justifyContent: 'center',
|
|
25
|
-
alignItems: 'center',
|
|
26
|
-
paddingHorizontal: 16,
|
|
27
|
-
paddingVertical: 12,
|
|
28
|
-
});
|
|
29
|
-
const getRootContainerStyles = () => ({
|
|
30
|
-
width: '100%',
|
|
31
|
-
backgroundColor: '#fff',
|
|
32
|
-
position: 'relative',
|
|
33
|
-
});
|
|
34
7
|
const getChevronContainerStyles = () => ({
|
|
35
|
-
display: 'flex',
|
|
36
|
-
alignItems: 'center',
|
|
37
|
-
justifyContent: 'center',
|
|
38
|
-
flexShrink: 0,
|
|
39
8
|
height: 24,
|
|
9
|
+
left: 3,
|
|
40
10
|
paddingRight: 12,
|
|
41
11
|
});
|
|
42
|
-
const getPlaceHolderContainerStyles = (theme, height, focus) => ({
|
|
43
|
-
display: 'flex',
|
|
44
|
-
flexDirection: 'row',
|
|
45
|
-
alignItems: 'center',
|
|
46
|
-
width: '100%',
|
|
47
|
-
height,
|
|
48
|
-
backgroundColor: '#fff',
|
|
49
|
-
borderRadius: 5,
|
|
50
|
-
borderColor: focus ? theme.color.border.primary : '#e0e0e0',
|
|
51
|
-
borderWidth: 1,
|
|
52
|
-
borderStyle: 'solid',
|
|
53
|
-
boxSizing: 'border-box',
|
|
54
|
-
cursor: 'pointer',
|
|
55
|
-
});
|
|
56
12
|
const getPlaceHolderTextContainerStyles = (height) => ({
|
|
57
|
-
display: 'flex',
|
|
58
13
|
flex: 1,
|
|
59
|
-
minWidth: 0,
|
|
60
14
|
height,
|
|
61
|
-
|
|
15
|
+
justifyContent: 'center',
|
|
62
16
|
paddingHorizontal: 12,
|
|
63
17
|
});
|
|
64
18
|
|
|
65
19
|
const staticStyles = makeStyles(() => ({
|
|
66
|
-
root:
|
|
67
|
-
|
|
68
|
-
|
|
20
|
+
root: {
|
|
21
|
+
width: '100%',
|
|
22
|
+
backgroundColor: '#fff',
|
|
23
|
+
position: 'relative',
|
|
24
|
+
},
|
|
25
|
+
dropDownItemListContainer: {
|
|
26
|
+
width: '100%',
|
|
27
|
+
maxHeight: 240,
|
|
28
|
+
borderRadius: 5,
|
|
29
|
+
position: 'absolute',
|
|
30
|
+
overflow: 'hidden',
|
|
31
|
+
shadowColor: '#000',
|
|
32
|
+
shadowOffset: { width: 0, height: 1 },
|
|
33
|
+
shadowOpacity: 0.22,
|
|
34
|
+
shadowRadius: 2.22,
|
|
35
|
+
elevation: 3,
|
|
36
|
+
backgroundColor: '#fff',
|
|
37
|
+
},
|
|
38
|
+
dropDownItemContainer: {
|
|
39
|
+
width: '100%',
|
|
40
|
+
justifyContent: 'center',
|
|
41
|
+
paddingHorizontal: 16,
|
|
42
|
+
paddingVertical: 12,
|
|
43
|
+
},
|
|
69
44
|
chevronDownContainer: getChevronContainerStyles(),
|
|
70
45
|
scrollArea: {
|
|
71
46
|
maxHeight: 240,
|
|
@@ -75,17 +50,15 @@ const staticStyles = makeStyles(() => ({
|
|
|
75
50
|
const DropdownListItem = ({ item, index, isSelected, dropdownItem, onSelect, customItemContainer = [], customItemTextContainer = {}, }) => {
|
|
76
51
|
const itemDynamicStyles = useStyles(() => ({
|
|
77
52
|
root: {
|
|
78
|
-
display: 'flex',
|
|
79
53
|
backgroundColor: isSelected ? '#1a1a1a' : '#fff',
|
|
80
54
|
cursor: 'pointer',
|
|
81
55
|
width: '100%',
|
|
82
56
|
justifyContent: 'center',
|
|
83
|
-
alignItems: 'center',
|
|
84
57
|
paddingHorizontal: 16,
|
|
85
58
|
paddingVertical: 12,
|
|
86
59
|
},
|
|
87
60
|
}), [isSelected]);
|
|
88
|
-
const mergedItemClassName = useWebMergeStyles([
|
|
61
|
+
const mergedItemClassName = useWebMergeStyles([itemDynamicStyles.root, ...customItemContainer], [itemDynamicStyles.root, customItemContainer]);
|
|
89
62
|
return (jsx("div", { className: mergedItemClassName, onClick: () => onSelect(item, index), children: jsx(Typography, { styleConfig: customItemTextContainer, variant: TypographyVariant.HM4, color: isSelected ? TypographyColor.NEUTRAL : TypographyColor.PRIMARY, children: dropdownItem }) }));
|
|
90
63
|
};
|
|
91
64
|
const Dropdown = ({ placeHolder, itemList, height = 40, styleConfig = {}, dropDownValue, defaultSelectedIndex, onItemSelect, renderItem, showDropDownListOnTop = true, }) => {
|
|
@@ -105,7 +78,16 @@ const Dropdown = ({ placeHolder, itemList, height = 40, styleConfig = {}, dropDo
|
|
|
105
78
|
return () => document.removeEventListener('mousedown', handleOutside);
|
|
106
79
|
}, [focus]);
|
|
107
80
|
const dynamicStyles = useStyles((theme) => ({
|
|
108
|
-
placeHolderContainer:
|
|
81
|
+
placeHolderContainer: {
|
|
82
|
+
width: '100%',
|
|
83
|
+
height,
|
|
84
|
+
backgroundColor: '#fff',
|
|
85
|
+
borderRadius: 5,
|
|
86
|
+
flexDirection: 'row',
|
|
87
|
+
alignItems: 'center',
|
|
88
|
+
borderColor: focus ? theme.color.border.primary : '#e0e0e0',
|
|
89
|
+
borderWidth: 1,
|
|
90
|
+
},
|
|
109
91
|
placeHolderTextContainer: getPlaceHolderTextContainerStyles(height),
|
|
110
92
|
}), [focus, height]);
|
|
111
93
|
const singleSelectClickHandler = (item, index) => {
|
|
@@ -126,7 +108,7 @@ const Dropdown = ({ placeHolder, itemList, height = 40, styleConfig = {}, dropDo
|
|
|
126
108
|
staticStyles.scrollArea,
|
|
127
109
|
...customDropDownItemListContainer,
|
|
128
110
|
], [isShownOnTop, height, customDropDownItemListContainer]);
|
|
129
|
-
return (jsxs("div", { ref: rootRef, className: mergedRootClassName, children: [jsxs("div", { className: mergedPlaceHolderClassName, onClick: toggleDropDown,
|
|
111
|
+
return (jsxs("div", { ref: rootRef, className: mergedRootClassName, children: [jsxs("div", { className: mergedPlaceHolderClassName, onClick: toggleDropDown, children: [jsx("div", { className: mergedPlaceHolderTextClassName, children: jsx(Typography, { color: dropDownValue.length > 0 ? TypographyColor.PRIMARY : TypographyColor.DISABLED, lineClamp: 1, styleConfig: { root: customPlaceHolderTextContainer }, variant: TypographyVariant.HM4, children: dropDownValue.length > 0 ? dropDownValue : placeHolder }) }), jsx("div", { className: mergedChevronClassName, children: jsx(ChevronDown, {}) })] }), focus && (jsx("div", { className: mergedListClassName, children: itemList.map((item, index) => {
|
|
130
112
|
const dropdownItem = (renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index)) || (item === null || item === void 0 ? void 0 : item.label);
|
|
131
113
|
const isSelected = index === singleSelectIndex;
|
|
132
114
|
return (jsx(DropdownListItem, { item: item, index: index, isSelected: isSelected, dropdownItem: dropdownItem, onSelect: singleSelectClickHandler, customItemContainer: customDropDownItemContainer, customItemTextContainer: dropDownItemTextContainer }, `${item.value}-${index}`));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dropdown.esm.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["_jsx","_jsxs"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"ct-design-dropdown.esm.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
@@ -4,68 +4,43 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemDropdown = {}, global.jsxRuntime, global.React, global.ctDesignTypography, global.ctDesignStyleManager, global.ctDesignIcons));
|
|
5
5
|
})(this, (function (exports, jsxRuntime, react, ctDesignTypography, ctDesignStyleManager, ctDesignIcons) { 'use strict';
|
|
6
6
|
|
|
7
|
-
const getDropdownListContainerStyles = () => ({
|
|
8
|
-
width: '100%',
|
|
9
|
-
maxHeight: 240,
|
|
10
|
-
borderRadius: 5,
|
|
11
|
-
position: 'absolute',
|
|
12
|
-
overflow: 'hidden',
|
|
13
|
-
shadowColor: '#000',
|
|
14
|
-
shadowOffset: { width: 0, height: 1 },
|
|
15
|
-
shadowOpacity: 0.22,
|
|
16
|
-
shadowRadius: 2.22,
|
|
17
|
-
elevation: 3,
|
|
18
|
-
backgroundColor: '#fff',
|
|
19
|
-
zIndex: 1,
|
|
20
|
-
});
|
|
21
|
-
const getDropdownItemContainerStyles = () => ({
|
|
22
|
-
display: 'flex',
|
|
23
|
-
width: '100%',
|
|
24
|
-
justifyContent: 'center',
|
|
25
|
-
alignItems: 'center',
|
|
26
|
-
paddingHorizontal: 16,
|
|
27
|
-
paddingVertical: 12,
|
|
28
|
-
});
|
|
29
|
-
const getRootContainerStyles = () => ({
|
|
30
|
-
width: '100%',
|
|
31
|
-
backgroundColor: '#fff',
|
|
32
|
-
position: 'relative',
|
|
33
|
-
});
|
|
34
7
|
const getChevronContainerStyles = () => ({
|
|
35
|
-
display: 'flex',
|
|
36
|
-
alignItems: 'center',
|
|
37
|
-
justifyContent: 'center',
|
|
38
|
-
flexShrink: 0,
|
|
39
8
|
height: 24,
|
|
9
|
+
left: 3,
|
|
40
10
|
paddingRight: 12,
|
|
41
11
|
});
|
|
42
|
-
const getPlaceHolderContainerStyles = (theme, height, focus) => ({
|
|
43
|
-
display: 'flex',
|
|
44
|
-
flexDirection: 'row',
|
|
45
|
-
alignItems: 'center',
|
|
46
|
-
width: '100%',
|
|
47
|
-
height,
|
|
48
|
-
backgroundColor: '#fff',
|
|
49
|
-
borderRadius: 5,
|
|
50
|
-
borderColor: focus ? theme.color.border.primary : '#e0e0e0',
|
|
51
|
-
borderWidth: 1,
|
|
52
|
-
borderStyle: 'solid',
|
|
53
|
-
boxSizing: 'border-box',
|
|
54
|
-
cursor: 'pointer',
|
|
55
|
-
});
|
|
56
12
|
const getPlaceHolderTextContainerStyles = (height) => ({
|
|
57
|
-
display: 'flex',
|
|
58
13
|
flex: 1,
|
|
59
|
-
minWidth: 0,
|
|
60
14
|
height,
|
|
61
|
-
|
|
15
|
+
justifyContent: 'center',
|
|
62
16
|
paddingHorizontal: 12,
|
|
63
17
|
});
|
|
64
18
|
|
|
65
19
|
const staticStyles = ctDesignStyleManager.makeStyles(() => ({
|
|
66
|
-
root:
|
|
67
|
-
|
|
68
|
-
|
|
20
|
+
root: {
|
|
21
|
+
width: '100%',
|
|
22
|
+
backgroundColor: '#fff',
|
|
23
|
+
position: 'relative',
|
|
24
|
+
},
|
|
25
|
+
dropDownItemListContainer: {
|
|
26
|
+
width: '100%',
|
|
27
|
+
maxHeight: 240,
|
|
28
|
+
borderRadius: 5,
|
|
29
|
+
position: 'absolute',
|
|
30
|
+
overflow: 'hidden',
|
|
31
|
+
shadowColor: '#000',
|
|
32
|
+
shadowOffset: { width: 0, height: 1 },
|
|
33
|
+
shadowOpacity: 0.22,
|
|
34
|
+
shadowRadius: 2.22,
|
|
35
|
+
elevation: 3,
|
|
36
|
+
backgroundColor: '#fff',
|
|
37
|
+
},
|
|
38
|
+
dropDownItemContainer: {
|
|
39
|
+
width: '100%',
|
|
40
|
+
justifyContent: 'center',
|
|
41
|
+
paddingHorizontal: 16,
|
|
42
|
+
paddingVertical: 12,
|
|
43
|
+
},
|
|
69
44
|
chevronDownContainer: getChevronContainerStyles(),
|
|
70
45
|
scrollArea: {
|
|
71
46
|
maxHeight: 240,
|
|
@@ -75,17 +50,15 @@
|
|
|
75
50
|
const DropdownListItem = ({ item, index, isSelected, dropdownItem, onSelect, customItemContainer = [], customItemTextContainer = {}, }) => {
|
|
76
51
|
const itemDynamicStyles = ctDesignStyleManager.useStyles(() => ({
|
|
77
52
|
root: {
|
|
78
|
-
display: 'flex',
|
|
79
53
|
backgroundColor: isSelected ? '#1a1a1a' : '#fff',
|
|
80
54
|
cursor: 'pointer',
|
|
81
55
|
width: '100%',
|
|
82
56
|
justifyContent: 'center',
|
|
83
|
-
alignItems: 'center',
|
|
84
57
|
paddingHorizontal: 16,
|
|
85
58
|
paddingVertical: 12,
|
|
86
59
|
},
|
|
87
60
|
}), [isSelected]);
|
|
88
|
-
const mergedItemClassName = ctDesignStyleManager.useWebMergeStyles([
|
|
61
|
+
const mergedItemClassName = ctDesignStyleManager.useWebMergeStyles([itemDynamicStyles.root, ...customItemContainer], [itemDynamicStyles.root, customItemContainer]);
|
|
89
62
|
return (jsxRuntime.jsx("div", { className: mergedItemClassName, onClick: () => onSelect(item, index), children: jsxRuntime.jsx(ctDesignTypography.Typography, { styleConfig: customItemTextContainer, variant: ctDesignTypography.TypographyVariant.HM4, color: isSelected ? ctDesignTypography.TypographyColor.NEUTRAL : ctDesignTypography.TypographyColor.PRIMARY, children: dropdownItem }) }));
|
|
90
63
|
};
|
|
91
64
|
const Dropdown = ({ placeHolder, itemList, height = 40, styleConfig = {}, dropDownValue, defaultSelectedIndex, onItemSelect, renderItem, showDropDownListOnTop = true, }) => {
|
|
@@ -105,7 +78,16 @@
|
|
|
105
78
|
return () => document.removeEventListener('mousedown', handleOutside);
|
|
106
79
|
}, [focus]);
|
|
107
80
|
const dynamicStyles = ctDesignStyleManager.useStyles((theme) => ({
|
|
108
|
-
placeHolderContainer:
|
|
81
|
+
placeHolderContainer: {
|
|
82
|
+
width: '100%',
|
|
83
|
+
height,
|
|
84
|
+
backgroundColor: '#fff',
|
|
85
|
+
borderRadius: 5,
|
|
86
|
+
flexDirection: 'row',
|
|
87
|
+
alignItems: 'center',
|
|
88
|
+
borderColor: focus ? theme.color.border.primary : '#e0e0e0',
|
|
89
|
+
borderWidth: 1,
|
|
90
|
+
},
|
|
109
91
|
placeHolderTextContainer: getPlaceHolderTextContainerStyles(height),
|
|
110
92
|
}), [focus, height]);
|
|
111
93
|
const singleSelectClickHandler = (item, index) => {
|
|
@@ -126,7 +108,7 @@
|
|
|
126
108
|
staticStyles.scrollArea,
|
|
127
109
|
...customDropDownItemListContainer,
|
|
128
110
|
], [isShownOnTop, height, customDropDownItemListContainer]);
|
|
129
|
-
return (jsxRuntime.jsxs("div", { ref: rootRef, className: mergedRootClassName, children: [jsxRuntime.jsxs("div", { className: mergedPlaceHolderClassName, onClick: toggleDropDown,
|
|
111
|
+
return (jsxRuntime.jsxs("div", { ref: rootRef, className: mergedRootClassName, children: [jsxRuntime.jsxs("div", { className: mergedPlaceHolderClassName, onClick: toggleDropDown, children: [jsxRuntime.jsx("div", { className: mergedPlaceHolderTextClassName, children: jsxRuntime.jsx(ctDesignTypography.Typography, { color: dropDownValue.length > 0 ? ctDesignTypography.TypographyColor.PRIMARY : ctDesignTypography.TypographyColor.DISABLED, lineClamp: 1, styleConfig: { root: customPlaceHolderTextContainer }, variant: ctDesignTypography.TypographyVariant.HM4, children: dropDownValue.length > 0 ? dropDownValue : placeHolder }) }), jsxRuntime.jsx("div", { className: mergedChevronClassName, children: jsxRuntime.jsx(ctDesignIcons.ChevronDown, {}) })] }), focus && (jsxRuntime.jsx("div", { className: mergedListClassName, children: itemList.map((item, index) => {
|
|
130
112
|
const dropdownItem = (renderItem === null || renderItem === void 0 ? void 0 : renderItem(item, index)) || (item === null || item === void 0 ? void 0 : item.label);
|
|
131
113
|
const isSelected = index === singleSelectIndex;
|
|
132
114
|
return (jsxRuntime.jsx(DropdownListItem, { item: item, index: index, isSelected: isSelected, dropdownItem: dropdownItem, onSelect: singleSelectClickHandler, customItemContainer: customDropDownItemContainer, customItemTextContainer: dropDownItemTextContainer }, `${item.value}-${index}`));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ct-design-dropdown.umd.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["makeStyles","useStyles","useWebMergeStyles","_jsx","Typography","TypographyVariant","TypographyColor","useRef","useState","useEffect","_jsxs","ChevronDown"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"ct-design-dropdown.umd.js","sources":["../packages/components/Dropdown/src/style.ts","../packages/components/Dropdown/src/Dropdown.tsx"],"sourcesContent":[null,null],"names":["makeStyles","useStyles","useWebMergeStyles","_jsx","Typography","TypographyVariant","TypographyColor","useRef","useState","useEffect","_jsxs","ChevronDown"],"mappings":"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"}
|
package/dist/style.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export declare const getDropdownListContainerStyles: () => {
|
|
|
3
3
|
width: string;
|
|
4
4
|
maxHeight: number;
|
|
5
5
|
borderRadius: number;
|
|
6
|
-
position:
|
|
6
|
+
position: string;
|
|
7
7
|
overflow: string;
|
|
8
8
|
shadowColor: string;
|
|
9
9
|
shadowOffset: {
|
|
@@ -14,49 +14,36 @@ export declare const getDropdownListContainerStyles: () => {
|
|
|
14
14
|
shadowRadius: number;
|
|
15
15
|
elevation: number;
|
|
16
16
|
backgroundColor: string;
|
|
17
|
-
zIndex: number;
|
|
18
17
|
};
|
|
19
18
|
export declare const getDropdownItemContainerStyles: () => {
|
|
20
|
-
display: "flex";
|
|
21
19
|
width: string;
|
|
22
|
-
justifyContent:
|
|
23
|
-
alignItems: "center";
|
|
20
|
+
justifyContent: string;
|
|
24
21
|
paddingHorizontal: number;
|
|
25
22
|
paddingVertical: number;
|
|
26
23
|
};
|
|
27
24
|
export declare const getRootContainerStyles: () => {
|
|
28
25
|
width: string;
|
|
29
26
|
backgroundColor: string;
|
|
30
|
-
position: "relative";
|
|
31
27
|
};
|
|
32
28
|
export declare const getChevronContainerStyles: () => {
|
|
33
|
-
display: "flex";
|
|
34
|
-
alignItems: "center";
|
|
35
|
-
justifyContent: "center";
|
|
36
|
-
flexShrink: number;
|
|
37
29
|
height: number;
|
|
30
|
+
left: number;
|
|
38
31
|
paddingRight: number;
|
|
39
32
|
};
|
|
40
33
|
export declare const getPlaceHolderContainerStyles: (theme: Theme, height: number, focus: boolean) => {
|
|
41
|
-
display: "flex";
|
|
42
|
-
flexDirection: "row";
|
|
43
|
-
alignItems: "center";
|
|
44
34
|
width: string;
|
|
45
35
|
height: number;
|
|
46
36
|
backgroundColor: string;
|
|
47
37
|
borderRadius: number;
|
|
38
|
+
flexDirection: string;
|
|
39
|
+
alignItems: string;
|
|
48
40
|
borderColor: string;
|
|
49
41
|
borderWidth: number;
|
|
50
|
-
borderStyle: "solid";
|
|
51
|
-
boxSizing: "border-box";
|
|
52
|
-
cursor: "pointer";
|
|
53
42
|
};
|
|
54
43
|
export declare const getPlaceHolderTextContainerStyles: (height: number) => {
|
|
55
|
-
display: "flex";
|
|
56
44
|
flex: number;
|
|
57
|
-
minWidth: number;
|
|
58
45
|
height: number;
|
|
59
|
-
|
|
46
|
+
justifyContent: "center";
|
|
60
47
|
paddingHorizontal: number;
|
|
61
48
|
};
|
|
62
49
|
//# sourceMappingURL=style.d.ts.map
|
package/dist/style.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Dropdown/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAExD,eAAO,MAAM,8BAA8B
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../packages/components/Dropdown/src/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAExD,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;CAYzC,CAAC;AAEH,eAAO,MAAM,8BAA8B;;;;;CAKzC,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;CAGjC,CAAC;AAEH,eAAO,MAAM,yBAAyB;;;;CAIpC,CAAC;AAEH,eAAO,MAAM,6BAA6B,GAAI,OAAO,KAAK,EAAE,QAAQ,MAAM,EAAE,OAAO,OAAO;;;;;;;;;CASxF,CAAC;AAEH,eAAO,MAAM,iCAAiC,GAAI,QAAQ,MAAM;;;;;CAK9D,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cleartrip/ct-design-dropdown",
|
|
3
|
-
"version": "5.7.0
|
|
3
|
+
"version": "5.7.0",
|
|
4
4
|
"description": "Dropdown Component",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"main": "./dist/ct-design-dropdown.cjs.js",
|
|
@@ -24,12 +24,12 @@
|
|
|
24
24
|
"src"
|
|
25
25
|
],
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@cleartrip/ct-design-
|
|
28
|
-
"@cleartrip/ct-design-
|
|
29
|
-
"@cleartrip/ct-design-container": "5.7.0
|
|
30
|
-
"@cleartrip/ct-design-
|
|
31
|
-
"@cleartrip/ct-design-
|
|
32
|
-
"@cleartrip/ct-design-style-manager": "5.7.0
|
|
27
|
+
"@cleartrip/ct-design-types": "5.7.0",
|
|
28
|
+
"@cleartrip/ct-design-theme": "5.7.0",
|
|
29
|
+
"@cleartrip/ct-design-container": "5.7.0",
|
|
30
|
+
"@cleartrip/ct-design-typography": "5.7.0",
|
|
31
|
+
"@cleartrip/ct-design-icons": "41.0.0",
|
|
32
|
+
"@cleartrip/ct-design-style-manager": "5.7.0"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=16.8.0",
|
package/src/Dropdown.tsx
CHANGED
|
@@ -4,24 +4,38 @@ import { Typography, TypographyVariant, TypographyColor } from '@cleartrip/ct-de
|
|
|
4
4
|
import { makeStyles, useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
|
|
5
5
|
import { ChevronDown } from '@cleartrip/ct-design-icons';
|
|
6
6
|
|
|
7
|
-
import {
|
|
8
|
-
getChevronContainerStyles,
|
|
9
|
-
getDropdownItemContainerStyles,
|
|
10
|
-
getDropdownListContainerStyles,
|
|
11
|
-
getPlaceHolderContainerStyles,
|
|
12
|
-
getPlaceHolderTextContainerStyles,
|
|
13
|
-
getRootContainerStyles,
|
|
14
|
-
} from './style';
|
|
7
|
+
import { getChevronContainerStyles, getPlaceHolderTextContainerStyles } from './style';
|
|
15
8
|
import { DropdownProps, Item } from './type';
|
|
16
9
|
|
|
17
10
|
const staticStyles = makeStyles(() => ({
|
|
18
|
-
root:
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
root: {
|
|
12
|
+
width: '100%',
|
|
13
|
+
backgroundColor: '#fff',
|
|
14
|
+
position: 'relative',
|
|
15
|
+
},
|
|
16
|
+
dropDownItemListContainer: {
|
|
17
|
+
width: '100%',
|
|
18
|
+
maxHeight: 240,
|
|
19
|
+
borderRadius: 5,
|
|
20
|
+
position: 'absolute',
|
|
21
|
+
overflow: 'hidden',
|
|
22
|
+
shadowColor: '#000',
|
|
23
|
+
shadowOffset: { width: 0, height: 1 },
|
|
24
|
+
shadowOpacity: 0.22,
|
|
25
|
+
shadowRadius: 2.22,
|
|
26
|
+
elevation: 3,
|
|
27
|
+
backgroundColor: '#fff',
|
|
28
|
+
},
|
|
29
|
+
dropDownItemContainer: {
|
|
30
|
+
width: '100%',
|
|
31
|
+
justifyContent: 'center',
|
|
32
|
+
paddingHorizontal: 16,
|
|
33
|
+
paddingVertical: 12,
|
|
34
|
+
},
|
|
21
35
|
chevronDownContainer: getChevronContainerStyles(),
|
|
22
36
|
scrollArea: {
|
|
23
37
|
maxHeight: 240,
|
|
24
|
-
overflowY: 'auto'
|
|
38
|
+
overflowY: 'auto',
|
|
25
39
|
},
|
|
26
40
|
}));
|
|
27
41
|
|
|
@@ -37,12 +51,10 @@ const DropdownListItem: React.FC<DropdownListItemProps> = ({
|
|
|
37
51
|
const itemDynamicStyles = useStyles(
|
|
38
52
|
() => ({
|
|
39
53
|
root: {
|
|
40
|
-
display: 'flex',
|
|
41
54
|
backgroundColor: isSelected ? '#1a1a1a' : '#fff',
|
|
42
55
|
cursor: 'pointer',
|
|
43
56
|
width: '100%',
|
|
44
57
|
justifyContent: 'center',
|
|
45
|
-
alignItems: 'center',
|
|
46
58
|
paddingHorizontal: 16,
|
|
47
59
|
paddingVertical: 12,
|
|
48
60
|
},
|
|
@@ -51,7 +63,7 @@ const DropdownListItem: React.FC<DropdownListItemProps> = ({
|
|
|
51
63
|
);
|
|
52
64
|
|
|
53
65
|
const mergedItemClassName = useWebMergeStyles(
|
|
54
|
-
[
|
|
66
|
+
[itemDynamicStyles.root, ...customItemContainer],
|
|
55
67
|
[itemDynamicStyles.root, customItemContainer],
|
|
56
68
|
);
|
|
57
69
|
|
|
@@ -104,7 +116,16 @@ const Dropdown: React.FC<DropdownProps> = ({
|
|
|
104
116
|
|
|
105
117
|
const dynamicStyles = useStyles(
|
|
106
118
|
(theme) => ({
|
|
107
|
-
placeHolderContainer:
|
|
119
|
+
placeHolderContainer: {
|
|
120
|
+
width: '100%',
|
|
121
|
+
height,
|
|
122
|
+
backgroundColor: '#fff',
|
|
123
|
+
borderRadius: 5,
|
|
124
|
+
flexDirection: 'row',
|
|
125
|
+
alignItems: 'center',
|
|
126
|
+
borderColor: focus ? theme.color.border.primary : '#e0e0e0',
|
|
127
|
+
borderWidth: 1,
|
|
128
|
+
},
|
|
108
129
|
placeHolderTextContainer: getPlaceHolderTextContainerStyles(height),
|
|
109
130
|
}),
|
|
110
131
|
[focus, height],
|
|
@@ -148,7 +169,7 @@ const Dropdown: React.FC<DropdownProps> = ({
|
|
|
148
169
|
|
|
149
170
|
return (
|
|
150
171
|
<div ref={rootRef} className={mergedRootClassName}>
|
|
151
|
-
<div className={mergedPlaceHolderClassName} onClick={toggleDropDown}
|
|
172
|
+
<div className={mergedPlaceHolderClassName} onClick={toggleDropDown}>
|
|
152
173
|
<div className={mergedPlaceHolderTextClassName}>
|
|
153
174
|
<Typography
|
|
154
175
|
color={dropDownValue.length > 0 ? TypographyColor.PRIMARY : TypographyColor.DISABLED}
|
package/src/style.ts
CHANGED
|
@@ -4,7 +4,7 @@ export const getDropdownListContainerStyles = () => ({
|
|
|
4
4
|
width: '100%',
|
|
5
5
|
maxHeight: 240,
|
|
6
6
|
borderRadius: 5,
|
|
7
|
-
position: 'absolute'
|
|
7
|
+
position: 'absolute',
|
|
8
8
|
overflow: 'hidden',
|
|
9
9
|
shadowColor: '#000',
|
|
10
10
|
shadowOffset: { width: 0, height: 1 },
|
|
@@ -12,14 +12,11 @@ export const getDropdownListContainerStyles = () => ({
|
|
|
12
12
|
shadowRadius: 2.22,
|
|
13
13
|
elevation: 3,
|
|
14
14
|
backgroundColor: '#fff',
|
|
15
|
-
zIndex: 1,
|
|
16
15
|
});
|
|
17
16
|
|
|
18
17
|
export const getDropdownItemContainerStyles = () => ({
|
|
19
|
-
display: 'flex' as const,
|
|
20
18
|
width: '100%',
|
|
21
|
-
justifyContent: 'center'
|
|
22
|
-
alignItems: 'center' as const,
|
|
19
|
+
justifyContent: 'center',
|
|
23
20
|
paddingHorizontal: 16,
|
|
24
21
|
paddingVertical: 12,
|
|
25
22
|
});
|
|
@@ -27,38 +24,28 @@ export const getDropdownItemContainerStyles = () => ({
|
|
|
27
24
|
export const getRootContainerStyles = () => ({
|
|
28
25
|
width: '100%',
|
|
29
26
|
backgroundColor: '#fff',
|
|
30
|
-
position: 'relative' as const,
|
|
31
27
|
});
|
|
32
28
|
|
|
33
29
|
export const getChevronContainerStyles = () => ({
|
|
34
|
-
display: 'flex' as const,
|
|
35
|
-
alignItems: 'center' as const,
|
|
36
|
-
justifyContent: 'center' as const,
|
|
37
|
-
flexShrink: 0,
|
|
38
30
|
height: 24,
|
|
31
|
+
left: 3,
|
|
39
32
|
paddingRight: 12,
|
|
40
33
|
});
|
|
41
34
|
|
|
42
35
|
export const getPlaceHolderContainerStyles = (theme: Theme, height: number, focus: boolean) => ({
|
|
43
|
-
display: 'flex' as const,
|
|
44
|
-
flexDirection: 'row' as const,
|
|
45
|
-
alignItems: 'center' as const,
|
|
46
36
|
width: '100%',
|
|
47
37
|
height,
|
|
48
38
|
backgroundColor: '#fff',
|
|
49
39
|
borderRadius: 5,
|
|
40
|
+
flexDirection: 'row',
|
|
41
|
+
alignItems: 'center',
|
|
50
42
|
borderColor: focus ? theme.color.border.primary : '#e0e0e0',
|
|
51
43
|
borderWidth: 1,
|
|
52
|
-
borderStyle: 'solid' as const,
|
|
53
|
-
boxSizing: 'border-box' as const,
|
|
54
|
-
cursor: 'pointer' as const,
|
|
55
44
|
});
|
|
56
45
|
|
|
57
46
|
export const getPlaceHolderTextContainerStyles = (height: number) => ({
|
|
58
|
-
display: 'flex' as const,
|
|
59
47
|
flex: 1,
|
|
60
|
-
minWidth: 0,
|
|
61
48
|
height,
|
|
62
|
-
|
|
49
|
+
justifyContent: 'center' as const,
|
|
63
50
|
paddingHorizontal: 12,
|
|
64
51
|
});
|