@propellerads/button-drop-down 3.0.1 → 3.0.2
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/button-drop-down.cjs.development.js +3 -3
- package/dist/button-drop-down.cjs.development.js.map +1 -1
- package/dist/button-drop-down.cjs.production.min.js +1 -1
- package/dist/button-drop-down.cjs.production.min.js.map +1 -1
- package/dist/button-drop-down.esm.js +4 -4
- package/dist/button-drop-down.esm.js.map +1 -1
- package/dist/index.d.ts +7 -7
- package/package.json +3 -3
|
@@ -20,13 +20,13 @@ var ButtonDropDownContainer = /*#__PURE__*/styled.div(_templateObject || (_templ
|
|
|
20
20
|
var ButtonDropDownListContainer = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n flex-direction: column;\n min-width: 100%;\n width: fit-content;\n border: 1px solid ", ";\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px 0;\n margin-top: 2px;\n font-size: ", "px;\n z-index: 1;\n"])), stylevariables.gray80, stylevariables.borderRadius, stylevariables.white, stylevariables.spacing * 2, stylevariables.fontNormal);
|
|
21
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);
|
|
22
22
|
|
|
23
|
-
var BUTTON_DROPDOWN_TYPE = Button.
|
|
23
|
+
var BUTTON_DROPDOWN_TYPE = Button.ButtonType;
|
|
24
24
|
var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
25
25
|
var option = props.option,
|
|
26
26
|
_onClick = props.onClick;
|
|
27
27
|
return React__default.createElement(Button__default, {
|
|
28
28
|
elementId: option.id,
|
|
29
|
-
type: Button.
|
|
29
|
+
type: Button.ButtonType.Plain,
|
|
30
30
|
onClick: function onClick() {
|
|
31
31
|
return _onClick(option);
|
|
32
32
|
},
|
|
@@ -35,7 +35,7 @@ var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
|
35
35
|
};
|
|
36
36
|
var ButtonDropDown = function ButtonDropDown(props) {
|
|
37
37
|
var _props$type = props.type,
|
|
38
|
-
type = _props$type === void 0 ? Button.
|
|
38
|
+
type = _props$type === void 0 ? Button.ButtonType.Advanced : _props$type,
|
|
39
39
|
isLoading = props.isLoading,
|
|
40
40
|
isDisabled = props.isDisabled,
|
|
41
41
|
elementId = props.elementId,
|
|
@@ -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 {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, {
|
|
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, {ButtonType} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = ButtonType;\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={ButtonType.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 = ButtonType.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","ButtonType","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,2 +1,2 @@
|
|
|
1
|
-
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,i
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n,t,o,i=require("react"),r=e(i),a=require("@propellerads/button"),d=e(a),u=e(require("styled-components")),l=require("@propellerads/stylevariables");function s(e,n){return n||(n=e.slice(0)),e.raw=n,e}var c=u.div(n||(n=s(["\n position: relative;\n width: fit-content;\n"]))),p=u.div(t||(t=s(["\n position: absolute;\n display: flex;\n flex-direction: column;\n min-width: 100%;\n width: fit-content;\n border: 1px solid ",";\n border-radius: ","px;\n background-color: ",";\n padding: ","px 0;\n margin-top: 2px;\n font-size: ","px;\n z-index: 1;\n"])),l.gray80,l.borderRadius,l.white,2*l.spacing,l.fontNormal),v=u.div(o||(o=s(["\n width: 100%;\n text-align: left;\n min-height: 32px;\n padding: ","px ","px;\n\n &:hover {\n background-color: ",";\n }\n"])),2*l.spacing,3*l.spacing,l.gray95),f=function(e){var n=e.option,t=e.onClick;return r.createElement(d,{elementId:n.id,type:a.ButtonType.Plain,onClick:function(){return t(n)},isDisabled:n.isDisabled},r.createElement(v,null,n.title))};exports.BUTTON_DROPDOWN_TYPE=a.ButtonType,exports.default=function(e){var n=e.type,t=void 0===n?a.ButtonType.Advanced:n,o=e.isLoading,u=e.isDisabled,l=e.elementId,s=e.options,v=e.title,m=e.onClick,g=e.onMouseEnter,x=void 0===g?void 0:g,b=e.onMouseLeave,y=void 0===b?void 0:b,E=i.useRef(null),h=i.useState(!1),k=h[0],w=h[1];i.useEffect((function(){var e=function(e){var n=E.current;n&&!n.contains(e.target)&&w(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[E]);var L=function(e){w(!1),m(e)};return r.createElement(c,{ref:E},r.createElement(d,{type:t,isLoading:o,isDisabled:u,elementId:l,onClick:function(){return w(!k)},onMouseEnter:x,onMouseLeave:y},v),k&&s.length>0&&r.createElement(p,null,s.map((function(e){return r.createElement(f,{option:e,key:e.id,onClick:L})}))))};
|
|
2
2
|
//# sourceMappingURL=button-drop-down.cjs.production.min.js.map
|
|
@@ -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 {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, {
|
|
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, {ButtonType} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = ButtonType;\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={ButtonType.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 = ButtonType.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","ButtonType","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,aAAWC,MACjBP,QAAS,WAAF,OAAQA,EAAQD,IACvBS,WAAYT,EAAOS,YAEnBP,gBAACP,OAAiCK,EAAOU,sCAlBXH,6BAmCb,SAACR,GACtB,IAAAY,EAUIZ,EATFO,KAAAA,WAAIK,EAAGJ,aAAWK,SAAQD,EAC1BE,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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { useRef, useState, useEffect } from 'react';
|
|
2
|
-
import Button, {
|
|
2
|
+
import Button, { ButtonType } from '@propellerads/button';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
4
|
import { gray80, borderRadius, white, spacing, fontNormal, gray95 } from '@propellerads/stylevariables';
|
|
5
5
|
|
|
@@ -12,13 +12,13 @@ var ButtonDropDownContainer = /*#__PURE__*/styled.div(_templateObject || (_templ
|
|
|
12
12
|
var ButtonDropDownListContainer = /*#__PURE__*/styled.div(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: absolute;\n display: flex;\n flex-direction: column;\n min-width: 100%;\n width: fit-content;\n border: 1px solid ", ";\n border-radius: ", "px;\n background-color: ", ";\n padding: ", "px 0;\n margin-top: 2px;\n font-size: ", "px;\n z-index: 1;\n"])), gray80, borderRadius, white, spacing * 2, fontNormal);
|
|
13
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);
|
|
14
14
|
|
|
15
|
-
var BUTTON_DROPDOWN_TYPE =
|
|
15
|
+
var BUTTON_DROPDOWN_TYPE = ButtonType;
|
|
16
16
|
var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
17
17
|
var option = props.option,
|
|
18
18
|
_onClick = props.onClick;
|
|
19
19
|
return React.createElement(Button, {
|
|
20
20
|
elementId: option.id,
|
|
21
|
-
type:
|
|
21
|
+
type: ButtonType.Plain,
|
|
22
22
|
onClick: function onClick() {
|
|
23
23
|
return _onClick(option);
|
|
24
24
|
},
|
|
@@ -27,7 +27,7 @@ var ButtonDropDownList = function ButtonDropDownList(props) {
|
|
|
27
27
|
};
|
|
28
28
|
var ButtonDropDown = function ButtonDropDown(props) {
|
|
29
29
|
var _props$type = props.type,
|
|
30
|
-
type = _props$type === void 0 ?
|
|
30
|
+
type = _props$type === void 0 ? ButtonType.Advanced : _props$type,
|
|
31
31
|
isLoading = props.isLoading,
|
|
32
32
|
isDisabled = props.isDisabled,
|
|
33
33
|
elementId = props.elementId,
|
|
@@ -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 {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, {
|
|
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, {ButtonType} from '@propellerads/button';\n\nimport {ButtonDropDownContainer, ButtonDropDownListContainer, ButtonDropDownListItemContainer} from './style';\n\nexport const BUTTON_DROPDOWN_TYPE = ButtonType;\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={ButtonType.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 = ButtonType.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","ButtonType","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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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ButtonType } from '@propellerads/button';
|
|
3
3
|
export declare const BUTTON_DROPDOWN_TYPE: {
|
|
4
|
-
readonly
|
|
5
|
-
readonly
|
|
6
|
-
readonly
|
|
7
|
-
readonly
|
|
8
|
-
readonly
|
|
9
|
-
readonly
|
|
10
|
-
readonly
|
|
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
11
|
};
|
|
12
12
|
declare type DROPDOWN_OPTION_TYPE = {
|
|
13
13
|
id: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@propellerads/button-drop-down",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2",
|
|
4
4
|
"description": "ButtonDropDown component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/button-drop-down.esm.js",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"homepage": "https://github.com/propellerads/ui-components#readme",
|
|
21
21
|
"private": false,
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@propellerads/button": "^
|
|
24
|
-
"@propellerads/stylevariables": "^2.0.
|
|
23
|
+
"@propellerads/button": "^9.0.0",
|
|
24
|
+
"@propellerads/stylevariables": "^2.0.2",
|
|
25
25
|
"add": "2.0.6"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|