@factorearth/component-library 8.1.0-alpha.0 → 8.2.0-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.
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { Colors } from "Theme/types";
|
|
3
|
-
interface PhotologRowProps {
|
|
3
|
+
interface PhotologRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
|
|
4
4
|
colorPalette: Colors;
|
|
5
5
|
fields: React.ReactNode[] | JSX.Element[];
|
|
6
|
+
checkedRows: string[];
|
|
7
|
+
setCheckedRows: React.Dispatch<React.SetStateAction<string[]>>;
|
|
8
|
+
rowId: string;
|
|
6
9
|
}
|
|
7
10
|
export declare const PhotologRow: (props: PhotologRowProps) => React.JSX.Element;
|
|
8
11
|
export {};
|
|
@@ -3,12 +3,12 @@ import styled from "@emotion/styled";
|
|
|
3
3
|
const Row = styled.div `
|
|
4
4
|
display: flex;
|
|
5
5
|
height: 56px;
|
|
6
|
-
border-color: green;
|
|
7
6
|
border-top: ${({ colorPalette }) => `${colorPalette.border.primary} 0.5px solid`};
|
|
8
7
|
border-bottom: ${({ colorPalette }) => `${colorPalette.border.primary} 0.5px solid`};
|
|
9
8
|
background: ${({ colorPalette }) => colorPalette.background.primary};
|
|
10
9
|
gap: 20px;
|
|
11
|
-
padding: 8px;
|
|
10
|
+
padding: 8px;
|
|
11
|
+
align-items: center;
|
|
12
12
|
`;
|
|
13
13
|
const Column = styled.div `
|
|
14
14
|
display: flex;
|
|
@@ -18,10 +18,27 @@ const Column = styled.div `
|
|
|
18
18
|
align-content: center;
|
|
19
19
|
flex: 1 0 0;
|
|
20
20
|
`;
|
|
21
|
+
const StyledCheckbox = styled.input `
|
|
22
|
+
display: flex;
|
|
23
|
+
padding: 16px;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
align-items: center;
|
|
26
|
+
gap: 16px;
|
|
27
|
+
width: 20px;
|
|
28
|
+
height: 20px;
|
|
29
|
+
flex-shrink: 0;
|
|
30
|
+
border: solid 2px purple
|
|
31
|
+
`;
|
|
21
32
|
export const PhotologRow = (props) => {
|
|
22
|
-
const { colorPalette, fields, } = props;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
33
|
+
const { colorPalette, fields, checkedRows, setCheckedRows, rowId } = props;
|
|
34
|
+
const handleCheckOrUncheck = (id) => {
|
|
35
|
+
setCheckedRows((prev) => prev.includes(id)
|
|
36
|
+
? prev.filter((row) => row !== id)
|
|
37
|
+
: [...prev, id]);
|
|
38
|
+
};
|
|
39
|
+
return (React.createElement(Row, { colorPalette: colorPalette },
|
|
40
|
+
React.createElement(StyledCheckbox, { type: "checkbox", id: rowId, checked: checkedRows.includes(rowId), onChange: () => handleCheckOrUncheck(rowId) }),
|
|
41
|
+
Array.isArray(fields) &&
|
|
42
|
+
fields.map((element) => React.createElement(Column, { colorPalette: colorPalette }, element))));
|
|
26
43
|
};
|
|
27
44
|
//# sourceMappingURL=PhotologRow.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PhotologRow.js","sourceRoot":"","sources":["../../../lib/Molecules/PhotologRow/PhotologRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAA2B
|
|
1
|
+
{"version":3,"file":"PhotologRow.js","sourceRoot":"","sources":["../../../lib/Molecules/PhotologRow/PhotologRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAGrC,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAA2B;;;kBAG/B,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,cAAc;qBAC/D,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,cAAc;kBACrE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,OAAO;;;;CAItE,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAA2B;;;;;;;CAOnD,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAI;;;;;;;;;;CAUtC,CAAC;AAaF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACnD,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,KAAK,EAAC,GAAG,KAAK,CAAC;IAE5E,MAAM,oBAAoB,GAAG,CAAC,EAAU,EAAE,EAAE;QAC1C,cAAc,CAAC,CAAC,IAAI,EAAE,EAAE,CACtB,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YACf,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC;YAClC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,EAAE,CAAC,CAClB,CAAC;IACJ,CAAC,CAAC;IAEA,OAAO,CACH,oBAAC,GAAG,IAAC,YAAY,EAAE,YAAY;QAC3B,oBAAC,cAAc,IACX,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,KAAK,EACT,OAAO,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,EACpC,QAAQ,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,GAC7C;QACD,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC;YAClB,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,oBAAC,MAAM,IAAC,YAAY,EAAE,YAAY,IAAG,OAAO,CAAU,CAAC,CACjF,CACT,CAAC;AACN,CAAC,CAAC"}
|
package/dist/Theme/tokens.json
CHANGED
|
@@ -153,6 +153,11 @@
|
|
|
153
153
|
"value": "#142541",
|
|
154
154
|
"type": "color",
|
|
155
155
|
"description": "Metcalf Bison Blue"
|
|
156
|
+
},
|
|
157
|
+
"attention-orange": {
|
|
158
|
+
"value": "#FFAA00",
|
|
159
|
+
"type": "color",
|
|
160
|
+
"description": "Sync alert color when there are out of sync changes."
|
|
156
161
|
}
|
|
157
162
|
},
|
|
158
163
|
"border-radius-sm": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@factorearth/component-library",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.2.0-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": "52d1b987296f89d41f3914038bcdb0553255be46",
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@emotion/react": "^11.13.0",
|
|
52
52
|
"@emotion/styled": "^11.13.0",
|