@factorearth/component-library 4.3.7-alpha.0 → 4.4.1-alpha.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/Atoms/OptionsDropdown/OptionsDropdown.d.ts +17 -0
- package/dist/Atoms/OptionsDropdown/OptionsDropdown.js +84 -0
- package/dist/Atoms/OptionsDropdown/OptionsDropdown.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Colors } from "Theme/types";
|
|
3
|
+
interface OptionsDropdownProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
|
|
4
|
+
colorPalette: Colors;
|
|
5
|
+
optionsObj: Record<string, Category>;
|
|
6
|
+
}
|
|
7
|
+
type Option = {
|
|
8
|
+
name: string;
|
|
9
|
+
onClick: () => void;
|
|
10
|
+
icon?: React.JSX.Element;
|
|
11
|
+
};
|
|
12
|
+
type Category = {
|
|
13
|
+
icon?: React.JSX.Element;
|
|
14
|
+
options: Option[];
|
|
15
|
+
};
|
|
16
|
+
export declare const OptionsDropdown: (props: OptionsDropdownProps) => React.JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import React, { useState, useRef, useEffect } from "react";
|
|
2
|
+
import styled from "@emotion/styled";
|
|
3
|
+
import { Typography } from "../Typography/Typography";
|
|
4
|
+
const OptionsDropdownDiv = styled.div `
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: flex-start;
|
|
7
|
+
width: fit-content;
|
|
8
|
+
border-radius: 4px;
|
|
9
|
+
border: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
|
|
10
|
+
`;
|
|
11
|
+
const CategoryDiv = styled.div `
|
|
12
|
+
padding: 8px;
|
|
13
|
+
border-left: ${({ colorPalette }) => colorPalette.text.tertiary} 1px solid;
|
|
14
|
+
background: ${({ expanded, colorPalette }) => expanded ? colorPalette.text.tertiary : "none"};
|
|
15
|
+
color: ${({ expanded, colorPalette }) => expanded ? colorPalette.background.primary : colorPalette.text.tertiary};
|
|
16
|
+
position: relative;
|
|
17
|
+
|
|
18
|
+
&:first-child {
|
|
19
|
+
border-left: none;
|
|
20
|
+
}
|
|
21
|
+
`;
|
|
22
|
+
const CategoryTitle = styled.div `
|
|
23
|
+
display: inline-flex;
|
|
24
|
+
align-items: flex-start;
|
|
25
|
+
gap: 8px;
|
|
26
|
+
|
|
27
|
+
`;
|
|
28
|
+
const OptionsDiv = styled.div `
|
|
29
|
+
border-top: ${({ colorPalette }) => colorPalette.background.primary} 1px solid;
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
position: absolute;
|
|
33
|
+
left: 0;
|
|
34
|
+
top: calc(100% + 1px);
|
|
35
|
+
background: ${({ colorPalette }) => colorPalette.text.tertiary};
|
|
36
|
+
border-radius: 0 0 4px 4px;
|
|
37
|
+
padding: 8px;
|
|
38
|
+
`;
|
|
39
|
+
const OptionDiv = styled.div `
|
|
40
|
+
display: flex;
|
|
41
|
+
align-items: flex-start;
|
|
42
|
+
align-self: stretch;
|
|
43
|
+
gap: 8px;
|
|
44
|
+
padding: 8px;
|
|
45
|
+
width: max-content;
|
|
46
|
+
`;
|
|
47
|
+
export const OptionsDropdown = (props) => {
|
|
48
|
+
const { colorPalette, optionsObj, ...inputProps } = props;
|
|
49
|
+
const [open, setOpen] = useState(null);
|
|
50
|
+
const [categories, setCategories] = useState();
|
|
51
|
+
const ref = useRef(null);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
54
|
+
return () => {
|
|
55
|
+
document.removeEventListener("mousedown", handleClickOutside);
|
|
56
|
+
};
|
|
57
|
+
}, []);
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
setCategories(Object.keys(optionsObj));
|
|
60
|
+
}, []);
|
|
61
|
+
const handleClickOutside = (event) => {
|
|
62
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
63
|
+
setOpen(null);
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
const toggleOpen = (location) => {
|
|
67
|
+
if (open === location) {
|
|
68
|
+
setOpen(null);
|
|
69
|
+
}
|
|
70
|
+
else {
|
|
71
|
+
setOpen(location);
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
return (React.createElement(OptionsDropdownDiv, { colorPalette: colorPalette, ref: ref }, categories?.map(cat => {
|
|
75
|
+
return (React.createElement(CategoryDiv, { colorPalette: colorPalette, expanded: open === cat },
|
|
76
|
+
React.createElement(CategoryTitle, { colorPalette: colorPalette, onClick: () => { toggleOpen(cat); } },
|
|
77
|
+
optionsObj[cat]?.icon,
|
|
78
|
+
React.createElement(Typography, { textColor: open === cat ? colorPalette.background.primary : colorPalette.text.tertiary, content: cat, variant: "Small" })),
|
|
79
|
+
open === cat && React.createElement(OptionsDiv, { colorPalette: colorPalette }, optionsObj[cat].options.map(op => React.createElement(OptionDiv, { colorPalette: colorPalette, onClick: op.onClick },
|
|
80
|
+
op?.icon,
|
|
81
|
+
React.createElement(Typography, { textColor: open === cat ? colorPalette.background.primary : colorPalette.text.tertiary, content: op.name, variant: "Small" }))))));
|
|
82
|
+
})));
|
|
83
|
+
};
|
|
84
|
+
//# sourceMappingURL=OptionsDropdown.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"OptionsDropdown.js","sourceRoot":"","sources":["../../../lib/Atoms/OptionsDropdown/OptionsDropdown.tsx"],"names":[],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export * from "./Atoms/SelectField/SelectField";
|
|
|
13
13
|
export * from "./Atoms/Tab/Tab";
|
|
14
14
|
export * from "./Atoms/ProgressBar/ProgressBar";
|
|
15
15
|
export * from "./Atoms/Typography/Typography";
|
|
16
|
+
export * from "./Atoms/OptionsDropdown/OptionsDropdown";
|
|
16
17
|
export * from "./Molecules/Form/Form";
|
|
17
18
|
export * from "./Molecules/Thumbnail/Thumbnail";
|
|
18
19
|
export * from "./Molecules/TableRow/TableRow";
|
package/dist/index.js
CHANGED
|
@@ -15,6 +15,7 @@ export * from "./Atoms/SelectField/SelectField";
|
|
|
15
15
|
export * from "./Atoms/Tab/Tab";
|
|
16
16
|
export * from "./Atoms/ProgressBar/ProgressBar";
|
|
17
17
|
export * from "./Atoms/Typography/Typography";
|
|
18
|
+
export * from "./Atoms/OptionsDropdown/OptionsDropdown";
|
|
18
19
|
// Molecules
|
|
19
20
|
export * from "./Molecules/Form/Form";
|
|
20
21
|
export * from "./Molecules/Thumbnail/Thumbnail";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,qDAAqD;AACrD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAA;AACvD,cAAc,+BAA+B,CAAA;AAC7C,SAAS;AACT,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iCAAiC,CAAC;AAChD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,qBAAqB,CAAC;AACpC,qDAAqD;AACrD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,iBAAiB,CAAC;AAChC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yCAAyC,CAAC;AACxD,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,iCAAiC,CAAC;AAChD,cAAc,+BAA+B,CAAC;AAC9C,YAAY;AACZ,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAA;AACvD,cAAc,+BAA+B,CAAA;AAC7C,SAAS;AACT,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.1-alpha.0",
|
|
4
4
|
"description": " A storybook component library for FactorEarth",
|
|
5
5
|
"author": "madtrx <marlin.makori@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/FactorEarth/RecordMiddleware#readme",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"access": "public",
|
|
47
47
|
"registry": "https://registry.npmjs.org/"
|
|
48
48
|
},
|
|
49
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "83c285c14f8053cab94b8ded9e8aa0a56a67917f",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|