@propellerads/button-drop-down 2.5.0 → 3.0.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/README.md +6 -3
- 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.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/style.d.ts +1 -1
- package/package.json +4 -5
- 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'}]}
|
|
@@ -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} 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: typeof BUTTON_TYPE;\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","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","BUTTON_DROPDOWN_TYPE","BUTTON_TYPE","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","PLAIN","isDisabled","title","ButtonDropDown","ADVANCED","isLoading","options","onMouseEnter","undefined","onMouseLeave","containerRef","useRef","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} 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: typeof BUTTON_TYPE;\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","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","BUTTON_TYPE","PLAIN","isDisabled","title","ADVANCED","isLoading","options","onMouseEnter","undefined","onMouseLeave","containerRef","useRef","useState","isExpanded","setExpanded","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","onItemClick","value","ref","length","map","key"],"mappings":"sVAGA,IAAMA,EAA0BC,EAAOC,oEAKjCC,EAA8BF,EAAOC,8RAMrBE,SACHC,eACGC,QACC,EAAVC,UAEEC,cAITC,EAAkCR,EAAOC,wJAIxB,EAAVK,UAA2B,EAAVA,UAGNG,UCjBlBC,EAAqB,SAACC,OACnBC,EAAmBD,EAAnBC,OAAQC,EAAWF,EAAXE,eAGbC,gBAACC,GACCC,UAAWJ,EAAOK,GAClBC,KAAMC,cAAYC,MAClBP,QAAS,kBAAMA,EAAQD,IACvBS,WAAYT,EAAOS,YAEnBP,gBAACN,OAAiCI,EAAOU,sCAlBXH,8BAmCb,SAACR,SAWlBA,EATFO,KAAAA,aAAOC,cAAYI,WACnBC,EAQEb,EARFa,UACAH,EAOEV,EAPFU,WACAL,EAMEL,EANFK,UACAS,EAKEd,EALFc,QACAH,EAIEX,EAJFW,MACAT,EAGEF,EAHFE,UAGEF,EAFFe,aAAAA,kBAAeC,MAEbhB,EADFiB,aAAAA,kBAAeD,IAGXE,EAAeC,SAAuB,QAEVC,YAAS,GAApCC,OAAYC,OAEnBC,aAAU,eACFC,EAAqB,SAACC,OACnBC,EAAWR,EAAXQ,QAEHA,IAAYA,EAAQC,SAASF,EAAMG,SACrCN,GAAY,WAIhBO,SAASC,iBAAiB,YAAaN,GACvCK,SAASC,iBAAiB,aAAcN,GACjC,WACLK,SAASE,oBAAoB,YAAaP,GAC1CK,SAASE,oBAAoB,aAAcP,MAE5C,CAACN,QAEEc,EAAc,SAACC,GACnBX,GAAY,GACZpB,EAAQ+B,WAIR9B,gBAACf,GAAwB8C,IAAKhB,GAG5Bf,gBAACC,GACCG,KAAMA,EACNM,UAAWA,EACXH,WAAYA,EACZL,UAAWA,EACXH,QAAS,kBAAMoB,GAAaD,IAC5BN,aAAcA,EACdE,aAAcA,GAEbN,GAGFU,GAAcP,EAAQqB,OAAS,GAC9BhC,gBAACZ,OACEuB,EAAQsB,KAAI,SAACnC,UACZE,gBAACJ,GAAmBE,OAAQA,EAAQoC,IAAKpC,EAAOK,GAAIJ,QAAS8B"}
|
|
@@ -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} 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: typeof BUTTON_TYPE;\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","ButtonDropDownListContainer","gray80","borderRadius","white","spacing","fontNormal","ButtonDropDownListItemContainer","gray95","BUTTON_DROPDOWN_TYPE","BUTTON_TYPE","ButtonDropDownList","props","option","onClick","React","Button","elementId","id","type","PLAIN","isDisabled","title","ButtonDropDown","ADVANCED","isLoading","options","onMouseEnter","undefined","onMouseLeave","containerRef","useRef","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,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
import { BUTTON_TYPE } from '@propellerads/button';
|
|
2
3
|
export declare const BUTTON_DROPDOWN_TYPE: typeof BUTTON_TYPE;
|
|
3
4
|
declare type DROPDOWN_OPTION_TYPE = {
|
|
@@ -16,5 +17,5 @@ interface IProps {
|
|
|
16
17
|
onMouseEnter: () => void | undefined;
|
|
17
18
|
onMouseLeave: () => void | undefined;
|
|
18
19
|
}
|
|
19
|
-
declare const ButtonDropDown: (props: IProps) => JSX.Element;
|
|
20
|
+
declare const ButtonDropDown: (props: IProps) => React.JSX.Element;
|
|
20
21
|
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.0",
|
|
4
4
|
"description": "ButtonDropDown component",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/button-drop-down.esm.js",
|
|
@@ -32,11 +32,10 @@
|
|
|
32
32
|
"@babel/preset-react": "^7.10.1",
|
|
33
33
|
"tsdx": "^0.14.1",
|
|
34
34
|
"tslib": "^2.3.1",
|
|
35
|
-
"typescript": "^4.
|
|
35
|
+
"typescript": "^4.9.5"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"react": "
|
|
38
|
+
"react": ">=18 <19",
|
|
39
39
|
"styled-components": "5.1.1"
|
|
40
|
-
}
|
|
41
|
-
"gitHead": "444f80c0ee88777023f510ac9a0aa739f333e914"
|
|
40
|
+
}
|
|
42
41
|
}
|
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
|