@propellerads/button-drop-down 2.5.0 → 3.0.1
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/README.md +6 -3
- package/dist/button-drop-down.cjs.development.js +16 -29
- package/dist/button-drop-down.cjs.development.js.map +1 -1
- package/dist/button-drop-down.cjs.production.min.js.map +1 -1
- package/dist/button-drop-down.esm.js +16 -29
- package/dist/button-drop-down.esm.js.map +1 -1
- package/dist/index.d.ts +13 -4
- package/dist/style.d.ts +1 -1
- package/package.json +13 -15
- package/CHANGELOG.md +0 -40
package/README.md
CHANGED
|
@@ -7,11 +7,14 @@
|
|
|
7
7
|
[Github](https://github.com/propellerads/ui-components/tree/master/Components/ButtonDropDown)
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
|
-
|
|
10
|
+
|
|
11
|
+
- `yarn add @propellerads/button-drop-down` or `npm install @propellerads/button-drop-down -S`
|
|
11
12
|
|
|
12
13
|
### How to use
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
- `import ButtonDropDown from '@propellerads/button-drop-down';`
|
|
16
|
+
- And render
|
|
17
|
+
|
|
15
18
|
```
|
|
16
19
|
<ButtonDropDown
|
|
17
20
|
options={[{id: 'button-drop-down-0', title: 'Option'}]}
|
|
@@ -11,13 +11,8 @@ var Button__default = _interopDefault(Button);
|
|
|
11
11
|
var styled = _interopDefault(require('styled-components'));
|
|
12
12
|
var stylevariables = require('@propellerads/stylevariables');
|
|
13
13
|
|
|
14
|
-
function _taggedTemplateLiteralLoose(
|
|
15
|
-
|
|
16
|
-
raw = strings.slice(0);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
strings.raw = raw;
|
|
20
|
-
return strings;
|
|
14
|
+
function _taggedTemplateLiteralLoose(e, t) {
|
|
15
|
+
return t || (t = e.slice(0)), e.raw = t, e;
|
|
21
16
|
}
|
|
22
17
|
|
|
23
18
|
var _templateObject, _templateObject2, _templateObject3;
|
|
@@ -26,10 +21,9 @@ var ButtonDropDownListContainer = /*#__PURE__*/styled.div(_templateObject2 || (_
|
|
|
26
21
|
var ButtonDropDownListItemContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n text-align: left;\n min-height: 32px;\n padding: ", "px ", "px;\n\n &:hover {\n background-color: ", ";\n }\n"])), stylevariables.spacing * 2, stylevariables.spacing * 3, stylevariables.gray95);
|
|
27
22
|
|
|
28
23
|
var BUTTON_DROPDOWN_TYPE = Button.BUTTON_TYPE;
|
|
29
|
-
|
|
30
24
|
var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
31
25
|
var option = props.option,
|
|
32
|
-
|
|
26
|
+
_onClick = props.onClick;
|
|
33
27
|
return React__default.createElement(Button__default, {
|
|
34
28
|
elementId: option.id,
|
|
35
29
|
type: Button.BUTTON_TYPE.PLAIN,
|
|
@@ -39,35 +33,30 @@ var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
|
39
33
|
isDisabled: option.isDisabled
|
|
40
34
|
}, React__default.createElement(ButtonDropDownListItemContainer, null, option.title));
|
|
41
35
|
};
|
|
42
|
-
|
|
43
36
|
var ButtonDropDown = function ButtonDropDown(props) {
|
|
44
37
|
var _props$type = props.type,
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
38
|
+
type = _props$type === void 0 ? Button.BUTTON_TYPE.ADVANCED : _props$type,
|
|
39
|
+
isLoading = props.isLoading,
|
|
40
|
+
isDisabled = props.isDisabled,
|
|
41
|
+
elementId = props.elementId,
|
|
42
|
+
options = props.options,
|
|
43
|
+
title = props.title,
|
|
44
|
+
onClick = props.onClick,
|
|
45
|
+
_props$onMouseEnter = props.onMouseEnter,
|
|
46
|
+
onMouseEnter = _props$onMouseEnter === void 0 ? undefined : _props$onMouseEnter,
|
|
47
|
+
_props$onMouseLeave = props.onMouseLeave,
|
|
48
|
+
onMouseLeave = _props$onMouseLeave === void 0 ? undefined : _props$onMouseLeave;
|
|
56
49
|
var containerRef = React.useRef(null);
|
|
57
|
-
|
|
58
50
|
var _useState = React.useState(false),
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
51
|
+
isExpanded = _useState[0],
|
|
52
|
+
setExpanded = _useState[1];
|
|
62
53
|
React.useEffect(function () {
|
|
63
54
|
var handleClickOutside = function handleClickOutside(event) {
|
|
64
55
|
var current = containerRef.current;
|
|
65
|
-
|
|
66
56
|
if (current && !current.contains(event.target)) {
|
|
67
57
|
setExpanded(false);
|
|
68
58
|
}
|
|
69
59
|
};
|
|
70
|
-
|
|
71
60
|
document.addEventListener('mousedown', handleClickOutside);
|
|
72
61
|
document.addEventListener('touchstart', handleClickOutside);
|
|
73
62
|
return function () {
|
|
@@ -75,12 +64,10 @@ var ButtonDropDown = function ButtonDropDown(props) {
|
|
|
75
64
|
document.removeEventListener('touchstart', handleClickOutside);
|
|
76
65
|
};
|
|
77
66
|
}, [containerRef]);
|
|
78
|
-
|
|
79
67
|
var onItemClick = function onItemClick(value) {
|
|
80
68
|
setExpanded(false);
|
|
81
69
|
onClick(value);
|
|
82
70
|
};
|
|
83
|
-
|
|
84
71
|
return React__default.createElement(ButtonDropDownContainer, {
|
|
85
72
|
ref: containerRef
|
|
86
73
|
}, React__default.createElement(Button__default, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-drop-down.cjs.development.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {
|
|
1
|
+
{"version":3,"file":"button-drop-down.cjs.development.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {gray80, gray95, white, spacing, fontNormal, borderRadius} from '@propellerads/stylevariables';\n\nconst ButtonDropDownContainer = styled.div`\n position: relative;\n width: fit-content;\n`;\n\nconst ButtonDropDownListContainer = styled.div`\n position: absolute;\n display: flex;\n flex-direction: column;\n min-width: 100%;\n width: fit-content;\n border: 1px solid ${gray80};\n border-radius: ${borderRadius}px;\n background-color: ${white};\n padding: ${spacing * 2}px 0;\n margin-top: 2px;\n font-size: ${fontNormal}px;\n z-index: 1;\n`;\n\nconst ButtonDropDownListItemContainer = styled.div`\n width: 100%;\n text-align: left;\n min-height: 32px;\n padding: ${spacing * 2}px ${spacing * 3}px;\n\n &:hover {\n background-color: ${gray95};\n }\n`;\n\nexport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE, ButtonType} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\ntype DROPDOWN_OPTION_TYPE = {\n id: string;\n title: string;\n isDisabled?: boolean;\n};\n\nconst ButtonDropDownList = (props: {option: DROPDOWN_OPTION_TYPE; onClick: (value: DROPDOWN_OPTION_TYPE) => void}) => {\n const {option, onClick} = props;\n\n return (\n <Button\n elementId={option.id}\n type={BUTTON_TYPE.PLAIN}\n onClick={() => onClick(option)}\n isDisabled={option.isDisabled}\n >\n <ButtonDropDownListItemContainer>{option.title}</ButtonDropDownListItemContainer>\n </Button>\n );\n};\n\ninterface IProps {\n type: ButtonType;\n options: DROPDOWN_OPTION_TYPE[];\n elementId: string;\n isLoading: boolean;\n isDisabled: boolean;\n title: string;\n onClick: (value: DROPDOWN_OPTION_TYPE) => void;\n onMouseEnter: () => void | undefined;\n onMouseLeave: () => void | undefined;\n}\n\nconst ButtonDropDown = (props: IProps) => {\n const {\n type = BUTTON_TYPE.ADVANCED,\n isLoading,\n isDisabled,\n elementId,\n options,\n title,\n onClick,\n onMouseEnter = undefined,\n onMouseLeave = undefined,\n } = props;\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [isExpanded, setExpanded] = useState(false);\n\n useEffect(() => {\n const handleClickOutside = (event: any) => {\n const {current} = containerRef;\n\n if (current && !current.contains(event.target)) {\n setExpanded(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('touchstart', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('touchstart', handleClickOutside);\n };\n }, [containerRef]);\n\n const onItemClick = (value: DROPDOWN_OPTION_TYPE) => {\n setExpanded(false);\n onClick(value);\n };\n\n return (\n <ButtonDropDownContainer ref={containerRef}>\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n {/* @ts-ignore */}\n <Button\n type={type}\n isLoading={isLoading}\n isDisabled={isDisabled}\n elementId={elementId}\n onClick={() => setExpanded(!isExpanded)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n {title}\n </Button>\n\n {isExpanded && options.length > 0 && (\n <ButtonDropDownListContainer>\n {options.map((option) => (\n <ButtonDropDownList option={option} key={option.id} onClick={onItemClick} />\n ))}\n </ButtonDropDownListContainer>\n )}\n </ButtonDropDownContainer>\n );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","_templateObject","_taggedTemplateLiteralLoose","ButtonDropDownListContainer","_templateObject2","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","_templateObject3","gray95","BUTTON_DROPDOWN_TYPE","BUTTON_TYPE","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","PLAIN","isDisabled","title","ButtonDropDown","_props$type","ADVANCED","isLoading","options","_props$onMouseEnter","onMouseEnter","undefined","_props$onMouseLeave","onMouseLeave","containerRef","useRef","_useState","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-drop-down.cjs.production.min.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {
|
|
1
|
+
{"version":3,"file":"button-drop-down.cjs.production.min.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {gray80, gray95, white, spacing, fontNormal, borderRadius} from '@propellerads/stylevariables';\n\nconst ButtonDropDownContainer = styled.div`\n position: relative;\n width: fit-content;\n`;\n\nconst ButtonDropDownListContainer = styled.div`\n position: absolute;\n display: flex;\n flex-direction: column;\n min-width: 100%;\n width: fit-content;\n border: 1px solid ${gray80};\n border-radius: ${borderRadius}px;\n background-color: ${white};\n padding: ${spacing * 2}px 0;\n margin-top: 2px;\n font-size: ${fontNormal}px;\n z-index: 1;\n`;\n\nconst ButtonDropDownListItemContainer = styled.div`\n width: 100%;\n text-align: left;\n min-height: 32px;\n padding: ${spacing * 2}px ${spacing * 3}px;\n\n &:hover {\n background-color: ${gray95};\n }\n`;\n\nexport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE, ButtonType} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\ntype DROPDOWN_OPTION_TYPE = {\n id: string;\n title: string;\n isDisabled?: boolean;\n};\n\nconst ButtonDropDownList = (props: {option: DROPDOWN_OPTION_TYPE; onClick: (value: DROPDOWN_OPTION_TYPE) => void}) => {\n const {option, onClick} = props;\n\n return (\n <Button\n elementId={option.id}\n type={BUTTON_TYPE.PLAIN}\n onClick={() => onClick(option)}\n isDisabled={option.isDisabled}\n >\n <ButtonDropDownListItemContainer>{option.title}</ButtonDropDownListItemContainer>\n </Button>\n );\n};\n\ninterface IProps {\n type: ButtonType;\n options: DROPDOWN_OPTION_TYPE[];\n elementId: string;\n isLoading: boolean;\n isDisabled: boolean;\n title: string;\n onClick: (value: DROPDOWN_OPTION_TYPE) => void;\n onMouseEnter: () => void | undefined;\n onMouseLeave: () => void | undefined;\n}\n\nconst ButtonDropDown = (props: IProps) => {\n const {\n type = BUTTON_TYPE.ADVANCED,\n isLoading,\n isDisabled,\n elementId,\n options,\n title,\n onClick,\n onMouseEnter = undefined,\n onMouseLeave = undefined,\n } = props;\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [isExpanded, setExpanded] = useState(false);\n\n useEffect(() => {\n const handleClickOutside = (event: any) => {\n const {current} = containerRef;\n\n if (current && !current.contains(event.target)) {\n setExpanded(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('touchstart', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('touchstart', handleClickOutside);\n };\n }, [containerRef]);\n\n const onItemClick = (value: DROPDOWN_OPTION_TYPE) => {\n setExpanded(false);\n onClick(value);\n };\n\n return (\n <ButtonDropDownContainer ref={containerRef}>\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n {/* @ts-ignore */}\n <Button\n type={type}\n isLoading={isLoading}\n isDisabled={isDisabled}\n elementId={elementId}\n onClick={() => setExpanded(!isExpanded)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n {title}\n </Button>\n\n {isExpanded && options.length > 0 && (\n <ButtonDropDownListContainer>\n {options.map((option) => (\n <ButtonDropDownList option={option} key={option.id} onClick={onItemClick} />\n ))}\n </ButtonDropDownListContainer>\n )}\n </ButtonDropDownContainer>\n );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","_templateObject","_taggedTemplateLiteralLoose","ButtonDropDownListContainer","_templateObject2","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","_templateObject3","gray95","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","BUTTON_TYPE","PLAIN","isDisabled","title","_props$type","ADVANCED","isLoading","options","_props$onMouseEnter","onMouseEnter","undefined","_props$onMouseLeave","onMouseLeave","containerRef","useRef","_useState","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"sVAGA,IAAMA,EAA0BC,EAAOC,IAAGC,IAAAA,EAAAC,0DAKpCC,EAA8BJ,EAAOC,IAAGI,IAAAA,EAAAF,oRAMxBG,SACHC,eACGC,QACC,EAAVC,UAEEC,cAITC,EAAkCX,EAAOC,IAAGW,IAAAA,EAAAT,8IAI3B,EAAVM,UAA2B,EAAVA,UAGNI,UCjBlBC,EAAqB,SAACC,GAC1B,IAAOC,EAAmBD,EAAnBC,OAAQC,EAAWF,EAAXE,QAEf,OACEC,gBAACC,GACCC,UAAWJ,EAAOK,GAClBC,KAAMC,cAAYC,MAClBP,QAAS,WAAF,OAAQA,EAAQD,IACvBS,WAAYT,EAAOS,YAEnBP,gBAACP,OAAiCK,EAAOU,sCAlBXH,8BAmCb,SAACR,GACtB,IAAAY,EAUIZ,EATFO,KAAAA,WAAIK,EAAGJ,cAAYK,SAAQD,EAC3BE,EAQEd,EARFc,UACAJ,EAOEV,EAPFU,WACAL,EAMEL,EANFK,UACAU,EAKEf,EALFe,QACAJ,EAIEX,EAJFW,MACAT,EAGEF,EAHFE,QAAOc,EAGLhB,EAFFiB,aAAAA,WAAYD,OAAGE,EAASF,EAAAG,EAEtBnB,EADFoB,aAAAA,WAAYD,OAAGD,EAASC,EAGpBE,EAAeC,SAAuB,MAE5CC,EAAkCC,YAAS,GAApCC,EAAUF,KAAEG,EAAWH,KAE9BI,aAAU,WACR,IAAMC,EAAqB,SAACC,GAC1B,IAAOC,EAAWT,EAAXS,QAEHA,IAAYA,EAAQC,SAASF,EAAMG,SACrCN,GAAY,IAMhB,OAFAO,SAASC,iBAAiB,YAAaN,GACvCK,SAASC,iBAAiB,aAAcN,GACjC,WACLK,SAASE,oBAAoB,YAAaP,GAC1CK,SAASE,oBAAoB,aAAcP,MAE5C,CAACP,IAEJ,IAAMe,EAAc,SAACC,GACnBX,GAAY,GACZxB,EAAQmC,IAGV,OACElC,gBAACnB,GAAwBsD,IAAKjB,GAG5BlB,gBAACC,GACCG,KAAMA,EACNO,UAAWA,EACXJ,WAAYA,EACZL,UAAWA,EACXH,QAAS,WAAF,OAAQwB,GAAaD,IAC5BR,aAAcA,EACdG,aAAcA,GAEbT,GAGFc,GAAcV,EAAQwB,OAAS,GAC9BpC,gBAACd,OACE0B,EAAQyB,KAAI,SAACvC,GAAM,OAClBE,gBAACJ,GAAmBE,OAAQA,EAAQwC,IAAKxC,EAAOK,GAAIJ,QAASkC"}
|
|
@@ -3,13 +3,8 @@ import Button, { BUTTON_TYPE } from '@propellerads/button';
|
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { gray80, borderRadius, white, spacing, fontNormal, gray95 } from '@propellerads/stylevariables';
|
|
5
5
|
|
|
6
|
-
function _taggedTemplateLiteralLoose(
|
|
7
|
-
|
|
8
|
-
raw = strings.slice(0);
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
strings.raw = raw;
|
|
12
|
-
return strings;
|
|
6
|
+
function _taggedTemplateLiteralLoose(e, t) {
|
|
7
|
+
return t || (t = e.slice(0)), e.raw = t, e;
|
|
13
8
|
}
|
|
14
9
|
|
|
15
10
|
var _templateObject, _templateObject2, _templateObject3;
|
|
@@ -18,10 +13,9 @@ var ButtonDropDownListContainer = /*#__PURE__*/styled.div(_templateObject2 || (_
|
|
|
18
13
|
var ButtonDropDownListItemContainer = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n width: 100%;\n text-align: left;\n min-height: 32px;\n padding: ", "px ", "px;\n\n &:hover {\n background-color: ", ";\n }\n"])), spacing * 2, spacing * 3, gray95);
|
|
19
14
|
|
|
20
15
|
var BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;
|
|
21
|
-
|
|
22
16
|
var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
23
17
|
var option = props.option,
|
|
24
|
-
|
|
18
|
+
_onClick = props.onClick;
|
|
25
19
|
return React.createElement(Button, {
|
|
26
20
|
elementId: option.id,
|
|
27
21
|
type: BUTTON_TYPE.PLAIN,
|
|
@@ -31,35 +25,30 @@ var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
|
31
25
|
isDisabled: option.isDisabled
|
|
32
26
|
}, React.createElement(ButtonDropDownListItemContainer, null, option.title));
|
|
33
27
|
};
|
|
34
|
-
|
|
35
28
|
var ButtonDropDown = function ButtonDropDown(props) {
|
|
36
29
|
var _props$type = props.type,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
30
|
+
type = _props$type === void 0 ? BUTTON_TYPE.ADVANCED : _props$type,
|
|
31
|
+
isLoading = props.isLoading,
|
|
32
|
+
isDisabled = props.isDisabled,
|
|
33
|
+
elementId = props.elementId,
|
|
34
|
+
options = props.options,
|
|
35
|
+
title = props.title,
|
|
36
|
+
onClick = props.onClick,
|
|
37
|
+
_props$onMouseEnter = props.onMouseEnter,
|
|
38
|
+
onMouseEnter = _props$onMouseEnter === void 0 ? undefined : _props$onMouseEnter,
|
|
39
|
+
_props$onMouseLeave = props.onMouseLeave,
|
|
40
|
+
onMouseLeave = _props$onMouseLeave === void 0 ? undefined : _props$onMouseLeave;
|
|
48
41
|
var containerRef = useRef(null);
|
|
49
|
-
|
|
50
42
|
var _useState = useState(false),
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
43
|
+
isExpanded = _useState[0],
|
|
44
|
+
setExpanded = _useState[1];
|
|
54
45
|
useEffect(function () {
|
|
55
46
|
var handleClickOutside = function handleClickOutside(event) {
|
|
56
47
|
var current = containerRef.current;
|
|
57
|
-
|
|
58
48
|
if (current && !current.contains(event.target)) {
|
|
59
49
|
setExpanded(false);
|
|
60
50
|
}
|
|
61
51
|
};
|
|
62
|
-
|
|
63
52
|
document.addEventListener('mousedown', handleClickOutside);
|
|
64
53
|
document.addEventListener('touchstart', handleClickOutside);
|
|
65
54
|
return function () {
|
|
@@ -67,12 +56,10 @@ var ButtonDropDown = function ButtonDropDown(props) {
|
|
|
67
56
|
document.removeEventListener('touchstart', handleClickOutside);
|
|
68
57
|
};
|
|
69
58
|
}, [containerRef]);
|
|
70
|
-
|
|
71
59
|
var onItemClick = function onItemClick(value) {
|
|
72
60
|
setExpanded(false);
|
|
73
61
|
onClick(value);
|
|
74
62
|
};
|
|
75
|
-
|
|
76
63
|
return React.createElement(ButtonDropDownContainer, {
|
|
77
64
|
ref: containerRef
|
|
78
65
|
}, React.createElement(Button, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-drop-down.esm.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {
|
|
1
|
+
{"version":3,"file":"button-drop-down.esm.js","sources":["../src/style.tsx","../src/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {gray80, gray95, white, spacing, fontNormal, borderRadius} from '@propellerads/stylevariables';\n\nconst ButtonDropDownContainer = styled.div`\n position: relative;\n width: fit-content;\n`;\n\nconst ButtonDropDownListContainer = styled.div`\n position: absolute;\n display: flex;\n flex-direction: column;\n min-width: 100%;\n width: fit-content;\n border: 1px solid ${gray80};\n border-radius: ${borderRadius}px;\n background-color: ${white};\n padding: ${spacing * 2}px 0;\n margin-top: 2px;\n font-size: ${fontNormal}px;\n z-index: 1;\n`;\n\nconst ButtonDropDownListItemContainer = styled.div`\n width: 100%;\n text-align: left;\n min-height: 32px;\n padding: ${spacing * 2}px ${spacing * 3}px;\n\n &:hover {\n background-color: ${gray95};\n }\n`;\n\nexport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer};\n","import React, {useState, useEffect, useRef} from 'react';\nimport Button, {BUTTON_TYPE, ButtonType} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = BUTTON_TYPE;\n\ntype DROPDOWN_OPTION_TYPE = {\n id: string;\n title: string;\n isDisabled?: boolean;\n};\n\nconst ButtonDropDownList = (props: {option: DROPDOWN_OPTION_TYPE; onClick: (value: DROPDOWN_OPTION_TYPE) => void}) => {\n const {option, onClick} = props;\n\n return (\n <Button\n elementId={option.id}\n type={BUTTON_TYPE.PLAIN}\n onClick={() => onClick(option)}\n isDisabled={option.isDisabled}\n >\n <ButtonDropDownListItemContainer>{option.title}</ButtonDropDownListItemContainer>\n </Button>\n );\n};\n\ninterface IProps {\n type: ButtonType;\n options: DROPDOWN_OPTION_TYPE[];\n elementId: string;\n isLoading: boolean;\n isDisabled: boolean;\n title: string;\n onClick: (value: DROPDOWN_OPTION_TYPE) => void;\n onMouseEnter: () => void | undefined;\n onMouseLeave: () => void | undefined;\n}\n\nconst ButtonDropDown = (props: IProps) => {\n const {\n type = BUTTON_TYPE.ADVANCED,\n isLoading,\n isDisabled,\n elementId,\n options,\n title,\n onClick,\n onMouseEnter = undefined,\n onMouseLeave = undefined,\n } = props;\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [isExpanded, setExpanded] = useState(false);\n\n useEffect(() => {\n const handleClickOutside = (event: any) => {\n const {current} = containerRef;\n\n if (current && !current.contains(event.target)) {\n setExpanded(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n document.addEventListener('touchstart', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n document.removeEventListener('touchstart', handleClickOutside);\n };\n }, [containerRef]);\n\n const onItemClick = (value: DROPDOWN_OPTION_TYPE) => {\n setExpanded(false);\n onClick(value);\n };\n\n return (\n <ButtonDropDownContainer ref={containerRef}>\n {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}\n {/* @ts-ignore */}\n <Button\n type={type}\n isLoading={isLoading}\n isDisabled={isDisabled}\n elementId={elementId}\n onClick={() => setExpanded(!isExpanded)}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n >\n {title}\n </Button>\n\n {isExpanded && options.length > 0 && (\n <ButtonDropDownListContainer>\n {options.map((option) => (\n <ButtonDropDownList option={option} key={option.id} onClick={onItemClick} />\n ))}\n </ButtonDropDownListContainer>\n )}\n </ButtonDropDownContainer>\n );\n};\n\nexport default ButtonDropDown;\n"],"names":["ButtonDropDownContainer","styled","div","_templateObject","_taggedTemplateLiteralLoose","ButtonDropDownListContainer","_templateObject2","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","_templateObject3","gray95","BUTTON_DROPDOWN_TYPE","BUTTON_TYPE","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","PLAIN","isDisabled","title","ButtonDropDown","_props$type","ADVANCED","isLoading","options","_props$onMouseEnter","onMouseEnter","undefined","_props$onMouseLeave","onMouseLeave","containerRef","useRef","_useState","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":";;;;;;;;;;AAGA,IAAMA,uBAAuB,gBAAGC,MAAM,CAACC,GAAG,CAAAC,eAAA,KAAAA,eAAA,gBAAAC,2BAAA,wDAGzC;AAED,IAAMC,2BAA2B,gBAAGJ,MAAM,CAACC,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,gBAAAF,2BAAA,yRAMxBG,MAAM,EACTC,YAAY,EACTC,KAAK,EACdC,OAAO,GAAG,CAAC,EAETC,UAAU,CAExB;AAED,IAAMC,+BAA+B,gBAAGX,MAAM,CAACC,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,gBAAAT,2BAAA,iJAIrCM,OAAO,GAAG,CAAC,EAAMA,OAAO,GAAG,CAAC,EAGjBI,MAAM,CAE7B;;IC3BYC,oBAAoB,GAAGC,WAAW;AAQ/C,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAqF;EAC/G,IAAOC,MAAM,GAAaD,KAAK,CAAxBC,MAAM;IAAEC,QAAO,GAAIF,KAAK,CAAhBE,OAAO;EAEtB,OACEC,oBAACC,MAAM;IACLC,SAAS,EAAEJ,MAAM,CAACK,EAAE;IACpBC,IAAI,EAAET,WAAW,CAACU,KAAK;IACvBN,OAAO,EAAE,SAATA,OAAOA;MAAA,OAAQA,QAAO,CAACD,MAAM,CAAC;;IAC9BQ,UAAU,EAAER,MAAM,CAACQ;KAEnBN,oBAACT,+BAA+B,QAAEO,MAAM,CAACS,KAAK,CAAmC,CAC1E;AAEb,CAAC;AAcD,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAAIX,KAAa;EACnC,IAAAY,WAAA,GAUIZ,KAAK,CATPO,IAAI;IAAJA,IAAI,GAAAK,WAAA,cAAGd,WAAW,CAACe,QAAQ,GAAAD,WAAA;IAC3BE,SAAS,GAQPd,KAAK,CARPc,SAAS;IACTL,UAAU,GAORT,KAAK,CAPPS,UAAU;IACVJ,SAAS,GAMPL,KAAK,CANPK,SAAS;IACTU,OAAO,GAKLf,KAAK,CALPe,OAAO;IACPL,KAAK,GAIHV,KAAK,CAJPU,KAAK;IACLR,OAAO,GAGLF,KAAK,CAHPE,OAAO;IAAAc,mBAAA,GAGLhB,KAAK,CAFPiB,YAAY;IAAZA,YAAY,GAAAD,mBAAA,cAAGE,SAAS,GAAAF,mBAAA;IAAAG,mBAAA,GAEtBnB,KAAK,CADPoB,YAAY;IAAZA,YAAY,GAAAD,mBAAA,cAAGD,SAAS,GAAAC,mBAAA;EAG1B,IAAME,YAAY,GAAGC,MAAM,CAAiB,IAAI,CAAC;EAEjD,IAAAC,SAAA,GAAkCC,QAAQ,CAAC,KAAK,CAAC;IAA1CC,UAAU,GAAAF,SAAA;IAAEG,WAAW,GAAAH,SAAA;EAE9BI,SAAS,CAAC;IACR,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAIC,KAAU;MACpC,IAAOC,OAAO,GAAIT,YAAY,CAAvBS,OAAO;MAEd,IAAIA,OAAO,IAAI,CAACA,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAM,CAAC,EAAE;QAC9CN,WAAW,CAAC,KAAK,CAAC;;KAErB;IAEDO,QAAQ,CAACC,gBAAgB,CAAC,WAAW,EAAEN,kBAAkB,CAAC;IAC1DK,QAAQ,CAACC,gBAAgB,CAAC,YAAY,EAAEN,kBAAkB,CAAC;IAC3D,OAAO;MACLK,QAAQ,CAACE,mBAAmB,CAAC,WAAW,EAAEP,kBAAkB,CAAC;MAC7DK,QAAQ,CAACE,mBAAmB,CAAC,YAAY,EAAEP,kBAAkB,CAAC;KAC/D;GACF,EAAE,CAACP,YAAY,CAAC,CAAC;EAElB,IAAMe,WAAW,GAAG,SAAdA,WAAWA,CAAIC,KAA2B;IAC9CX,WAAW,CAAC,KAAK,CAAC;IAClBxB,OAAO,CAACmC,KAAK,CAAC;GACf;EAED,OACElC,oBAACrB,uBAAuB;IAACwD,GAAG,EAAEjB;KAG5BlB,oBAACC,MAAM;IACLG,IAAI,EAAEA,IAAI;IACVO,SAAS,EAAEA,SAAS;IACpBL,UAAU,EAAEA,UAAU;IACtBJ,SAAS,EAAEA,SAAS;IACpBH,OAAO,EAAE,SAATA,OAAOA;MAAA,OAAQwB,WAAW,CAAC,CAACD,UAAU,CAAC;;IACvCR,YAAY,EAAEA,YAAY;IAC1BG,YAAY,EAAEA;KAEbV,KAAK,CACC,EAERe,UAAU,IAAIV,OAAO,CAACwB,MAAM,GAAG,CAAC,IAC/BpC,oBAAChB,2BAA2B,QACzB4B,OAAO,CAACyB,GAAG,CAAC,UAACvC,MAAM;IAAA,OAClBE,oBAACJ,kBAAkB;MAACE,MAAM,EAAEA,MAAM;MAAEwC,GAAG,EAAExC,MAAM,CAACK,EAAE;MAAEJ,OAAO,EAAEkC;MAAe;GAC7E,CAAC,CAEL,CACuB;AAE9B,CAAC;;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ButtonType } from '@propellerads/button';
|
|
3
|
+
export declare const BUTTON_DROPDOWN_TYPE: {
|
|
4
|
+
readonly PRIMARY: "isPrimary";
|
|
5
|
+
readonly SECONDARY: "isSecondary";
|
|
6
|
+
readonly ADVANCED: "isAdvanced";
|
|
7
|
+
readonly LINK: "isLink";
|
|
8
|
+
readonly PLAIN: "isPlain";
|
|
9
|
+
readonly DANGER: "isDanger";
|
|
10
|
+
readonly SUCCESS: "isSuccess";
|
|
11
|
+
};
|
|
3
12
|
declare type DROPDOWN_OPTION_TYPE = {
|
|
4
13
|
id: string;
|
|
5
14
|
title: string;
|
|
6
15
|
isDisabled?: boolean;
|
|
7
16
|
};
|
|
8
17
|
interface IProps {
|
|
9
|
-
type:
|
|
18
|
+
type: ButtonType;
|
|
10
19
|
options: DROPDOWN_OPTION_TYPE[];
|
|
11
20
|
elementId: string;
|
|
12
21
|
isLoading: boolean;
|
|
@@ -16,5 +25,5 @@ interface IProps {
|
|
|
16
25
|
onMouseEnter: () => void | undefined;
|
|
17
26
|
onMouseLeave: () => void | undefined;
|
|
18
27
|
}
|
|
19
|
-
declare const ButtonDropDown: (props: IProps) => JSX.Element;
|
|
28
|
+
declare const ButtonDropDown: (props: IProps) => React.JSX.Element;
|
|
20
29
|
export default ButtonDropDown;
|
package/dist/style.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
declare const ButtonDropDownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
declare const ButtonDropDownListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
3
|
declare const ButtonDropDownListItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export { ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer
|
|
4
|
+
export { ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@propellerads/button-drop-down",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.1",
|
|
4
4
|
"description": "ButtonDropDown component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/button-drop-down.esm.js",
|
|
@@ -14,29 +14,27 @@
|
|
|
14
14
|
"url": "https://github.com/propellerads/ui-components/issues"
|
|
15
15
|
},
|
|
16
16
|
"scripts": {
|
|
17
|
-
"prepublishOnly": "tsdx build",
|
|
18
17
|
"start": "tsdx watch",
|
|
19
18
|
"build": "tsdx build"
|
|
20
19
|
},
|
|
21
20
|
"homepage": "https://github.com/propellerads/ui-components#readme",
|
|
22
21
|
"private": false,
|
|
23
22
|
"dependencies": {
|
|
24
|
-
"@propellerads/button": "^
|
|
25
|
-
"@propellerads/stylevariables": "^
|
|
26
|
-
"add": "
|
|
23
|
+
"@propellerads/button": "^8.0.1",
|
|
24
|
+
"@propellerads/stylevariables": "^2.0.1",
|
|
25
|
+
"add": "2.0.6"
|
|
27
26
|
},
|
|
28
27
|
"devDependencies": {
|
|
29
|
-
"@babel/core": "
|
|
30
|
-
"@babel/plugin-proposal-object-rest-spread": "
|
|
31
|
-
"@babel/preset-env": "
|
|
32
|
-
"@babel/preset-react": "
|
|
33
|
-
"tsdx": "
|
|
34
|
-
"tslib": "
|
|
35
|
-
"typescript": "
|
|
28
|
+
"@babel/core": "7.15.0",
|
|
29
|
+
"@babel/plugin-proposal-object-rest-spread": "7.14.7",
|
|
30
|
+
"@babel/preset-env": "7.15.0",
|
|
31
|
+
"@babel/preset-react": "7.14.5",
|
|
32
|
+
"tsdx": "0.14.1",
|
|
33
|
+
"tslib": "2.3.1",
|
|
34
|
+
"typescript": "4.9.5"
|
|
36
35
|
},
|
|
37
36
|
"peerDependencies": {
|
|
38
|
-
"react": "
|
|
37
|
+
"react": ">=18 <19",
|
|
39
38
|
"styled-components": "5.1.1"
|
|
40
|
-
}
|
|
41
|
-
"gitHead": "444f80c0ee88777023f510ac9a0aa739f333e914"
|
|
39
|
+
}
|
|
42
40
|
}
|
package/CHANGELOG.md
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
## `2.5.0`
|
|
2
|
-
|
|
3
|
-
* Added `isDisabled` prop for a single drop-down `option`
|
|
4
|
-
|
|
5
|
-
## `2.4.0`
|
|
6
|
-
|
|
7
|
-
* migrated to TypeScript
|
|
8
|
-
|
|
9
|
-
## `2.3.0`
|
|
10
|
-
|
|
11
|
-
* updated peerDependencies
|
|
12
|
-
|
|
13
|
-
## `2.2.0`
|
|
14
|
-
|
|
15
|
-
* added props mouse enter and leave
|
|
16
|
-
|
|
17
|
-
## `2.1.0`
|
|
18
|
-
|
|
19
|
-
* edit package json main and module data
|
|
20
|
-
|
|
21
|
-
## `2.0.0`
|
|
22
|
-
|
|
23
|
-
* update dependencies, remove rollup add tdx
|
|
24
|
-
|
|
25
|
-
## `1.2.0`
|
|
26
|
-
|
|
27
|
-
* update dependencies
|
|
28
|
-
|
|
29
|
-
## `1.1.0`
|
|
30
|
-
|
|
31
|
-
* update dependencies
|
|
32
|
-
|
|
33
|
-
## `1.0.1`
|
|
34
|
-
|
|
35
|
-
* Add hover state
|
|
36
|
-
* Fix items height
|
|
37
|
-
|
|
38
|
-
## `1.0.0`
|
|
39
|
-
|
|
40
|
-
* Add '@propellerads/button-drop-down' component
|