Skip to content

Commit 3f1a9ac

Browse files
author
KaWaite
committed
Finalize extendability code
Move align logic into GridArea Move some deps into devDeps
1 parent 2de3854 commit 3f1a9ac

File tree

5 files changed

+85
-62
lines changed

5 files changed

+85
-62
lines changed

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,23 +59,23 @@
5959
"@types/react": "^17.0.8",
6060
"@types/react-dom": "^17.0.5",
6161
"babel-loader": "^8.2.2",
62+
"cssnano": "^5.0.7",
6263
"husky": "^6.0.0",
64+
"postcss": "^8.3.6",
6365
"react": "^17.0.2",
6466
"react-dom": "^17.0.2",
6567
"react-is": "^17.0.2",
68+
"rollup-plugin-postcss": "^4.0.0",
6669
"rollup-plugin-svg": "^2.0.0",
6770
"size-limit": "^4.11.0",
6871
"tsdx": "^0.14.1",
6972
"tslib": "^2.2.0",
7073
"typescript": "^4.2.4"
7174
},
7275
"dependencies": {
73-
"cssnano": "^5.0.6",
7476
"glamor": "^2.20.40",
75-
"postcss": "^8.3.5",
7677
"react-dnd": "^14.0.2",
7778
"react-dnd-html5-backend": "^14.0.0",
78-
"react-svg": "^13.0.6",
79-
"rollup-plugin-postcss": "^4.0.0"
79+
"react-svg": "^13.0.6"
8080
}
8181
}

‎src/Grid/GridArea/index.tsx

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export type AreaProps<T extends Location> = {
1717
end?: boolean;
1818
droppable?: boolean; // optional to override or not use editorMode context **Needs to be accompanied with GridItems draggable prop**
1919
align?: Alignments;
20-
onAlignChange?: () => void;
20+
setAlign?: React.Dispatch<React.SetStateAction<Alignments>>;
2121
location: T;
2222
// Extra customizable parts only for the really picky
2323
styles?: CSSProperties;
@@ -33,7 +33,7 @@ const GridArea: React.FC<AreaProps<Location>> = ({
3333
end,
3434
droppable,
3535
align,
36-
onAlignChange,
36+
setAlign,
3737
location,
3838
children,
3939
// Picky stuff
@@ -43,6 +43,22 @@ const GridArea: React.FC<AreaProps<Location>> = ({
4343
}) => {
4444
const { editorMode }: EditorModeContextType = useContext();
4545

46+
const onAlignChange = (align?: Alignments, setAlign?: React.Dispatch<React.SetStateAction<Alignments>>) => {
47+
if (!align || !setAlign) return;
48+
49+
switch (align) {
50+
case "start":
51+
setAlign("centered");
52+
break;
53+
case "centered":
54+
setAlign("end");
55+
break;
56+
default:
57+
setAlign("start");
58+
break;
59+
}
60+
};
61+
4662
// ***************************************
4763
// Drop logic
4864
const [{ isOver }, drop] = useDrop(() => ({
@@ -120,7 +136,7 @@ const GridArea: React.FC<AreaProps<Location>> = ({
120136
? "alignStartV"
121137
: "alignStart"}
122138
styles={{ color: iconColor, cursor: (droppable ?? editorMode) && align && !!React.Children.count(children) ? "pointer" : "default" }}
123-
onClick={(droppable ?? editorMode) && align && !!React.Children.count(children) ? onAlignChange : undefined}
139+
onClick={(droppable ?? editorMode) && align && !!React.Children.count(children) ? () => onAlignChange(align, setAlign) : undefined}
124140
/>
125141
</div>
126142
</div>

‎src/Grid/GridItem/index.tsx

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@ const GridItem: React.FC<ItemProps<Location>> = ({
4949
id,
5050
index,
5151
extendable,
52-
// extended, <------------------------ NEED TO UNCOMMENT OUT !!!!!!!!!!!!!!!!!!
52+
extended,
5353
draggable,
5454
onReorder,
5555
onMoveArea,
56-
// onExtend, <----------------------- NEED TO UNCOMMENT !!!!!!!!!!!!
56+
onExtend,
5757
// Passed from parent (aka GridArea).
5858
location,
5959
end,
@@ -68,13 +68,11 @@ const GridItem: React.FC<ItemProps<Location>> = ({
6868
const { editorMode }: EditorModeContextType = useContext();
6969

7070
const [isHovered, setHovered] = useState(false);
71-
const [isExpanded, setExpanded] = useState(false); // TO DELETE. Need to replace isExpanded in below styles with !!!!!!!!!!!!!!!!!!!!!!!
71+
console.log(extended, "extended")
7272

7373
const handleExtend = () => {
74-
if (!extendable) return;
75-
// if (!expandable || !onExtend) return; <--------change to
76-
setExpanded(!isExpanded); // TO DELETE !!!!!!!!!!!!!!!!!!!!!!!
77-
// onExtend(id); <------- change to
74+
if (!extendable || !onExtend) return;
75+
onExtend(id);
7876
setHovered(false);
7977
};
8078

@@ -149,22 +147,22 @@ const GridItem: React.FC<ItemProps<Location>> = ({
149147
() => ({
150148
opacity: isDragging ? 0.5 : 1,
151149
minHeight: isHovered && editorMode ? "40px" : undefined,
152-
width: !vertical && isExpanded ? "100%" : undefined,
150+
width: !vertical && extended ? "100%" : undefined,
153151
minWidth: isHovered && editorMode ? extendable ? "70px" : "30px" : undefined,
154-
height: vertical && isExpanded ? "100%" : undefined,
152+
height: vertical && extended ? "100%" : undefined,
155153
}),
156-
[isDragging, isHovered, isExpanded, vertical],
154+
[isDragging, isHovered, extended, vertical],
157155
);
158156

159157
const containerStyle: CSSProperties = useMemo(() => ({
160158
position: "relative",
161159
display: "inline-block",
162160
minHeight: isHovered && editorMode ? "40px" : undefined,
163-
width: !vertical && isExpanded ? "100%" : undefined,
161+
width: !vertical && extended ? "100%" : undefined,
164162
minWidth: isHovered && editorMode ? extendable ? "70px" : "30px" : undefined,
165-
height: vertical && isExpanded ? "100%" : undefined,
163+
height: vertical && extended ? "100%" : undefined,
166164
}),
167-
[isHovered, isExpanded, vertical],
165+
[isHovered, extended, vertical],
168166
);
169167

170168
const overlayStyles: CSSProperties = {
@@ -189,7 +187,7 @@ const GridItem: React.FC<ItemProps<Location>> = ({
189187
// ***************************************
190188

191189
const childrenWithParentProps = React.Children.map(
192-
children, child => React.cloneElement(child as React.ReactElement<{ extended: boolean }>, { extended: isExpanded })
190+
children, child => React.cloneElement(child as React.ReactElement<{ extended: boolean }>, { extended: extended })
193191
);
194192

195193
return (

‎test/wrapper.test.tsx

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import React from 'react';
2-
import * as ReactDOM from 'react-dom';
3-
import GridWrapper from '../src/Grid/GridWrapper';
1+
// TO DO: TESTS
42

5-
describe('GridWrapper', () => {
6-
it('renders without crashing', () => {
7-
const div = document.createElement('div');
8-
ReactDOM.render(<GridWrapper />, div);
9-
});
10-
});
3+
// import React from 'react';
4+
// import * as ReactDOM from 'react-dom';
5+
// import GridWrapper from '../src/Grid/GridWrapper';
6+
7+
// describe('GridWrapper', () => {
8+
// it('renders without crashing', () => {
9+
// const div = document.createElement('div');
10+
// ReactDOM.render(<GridWrapper />, div);
11+
// });
12+
// });

‎yarn.lock

Lines changed: 39 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2741,9 +2741,9 @@
27412741
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
27422742

27432743
"@types/q@^1.5.1":
2744-
version "1.5.4"
2745-
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
2746-
integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
2744+
version "1.5.5"
2745+
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
2746+
integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
27472747

27482748
"@types/qs@^6.9.5":
27492749
version "6.9.6"
@@ -4497,7 +4497,7 @@ collection-visit@^1.0.0:
44974497
map-visit "^1.0.0"
44984498
object-visit "^1.0.0"
44994499

4500-
color-convert@^1.9.0, color-convert@^1.9.1:
4500+
color-convert@^1.9.0, color-convert@^1.9.3:
45014501
version "1.9.3"
45024502
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
45034503
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -4521,31 +4521,31 @@ color-name@^1.0.0, color-name@~1.1.4:
45214521
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
45224522
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
45234523

4524-
color-string@^1.5.4:
4525-
version "1.5.5"
4526-
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014"
4527-
integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==
4524+
color-string@^1.6.0:
4525+
version "1.6.0"
4526+
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.6.0.tgz#c3915f61fe267672cb7e1e064c9d692219f6c312"
4527+
integrity sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==
45284528
dependencies:
45294529
color-name "^1.0.0"
45304530
simple-swizzle "^0.2.2"
45314531

45324532
color@^3.0.0:
4533-
version "3.1.3"
4534-
resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
4535-
integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==
4533+
version "3.2.1"
4534+
resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
4535+
integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
45364536
dependencies:
4537-
color-convert "^1.9.1"
4538-
color-string "^1.5.4"
4537+
color-convert "^1.9.3"
4538+
color-string "^1.6.0"
45394539

45404540
colord@^2.0.0:
45414541
version "2.0.0"
45424542
resolved "https://registry.yarnpkg.com/colord/-/colord-2.0.0.tgz#f8c19f2526b7dc5b22d6e57ef102f03a2a43a3d8"
45434543
integrity sha512-WMDFJfoY3wqPZNpKUFdse3HhD5BHCbE9JCdxRzoVH+ywRITGOeWAHNkGEmyxLlErEpN9OLMWgdM9dWQtDk5dog==
45444544

45454545
colord@^2.0.1:
4546-
version "2.0.1"
4547-
resolved "https://registry.yarnpkg.com/colord/-/colord-2.0.1.tgz#1e7fb1f9fa1cf74f42c58cb9c20320bab8435aa0"
4548-
integrity sha512-vm5YpaWamD0Ov6TSG0GGmUIwstrWcfKQV/h2CmbR7PbNu41+qdB5PW9lpzhjedrpm08uuYvcXi0Oel1RLZIJuA==
4546+
version "2.5.0"
4547+
resolved "https://registry.yarnpkg.com/colord/-/colord-2.5.0.tgz#1813c5e46e81052475d0542150b78b3be6a259ff"
4548+
integrity sha512-EeswvDseZAYGju9qVFHIf1ftRsWayhVZgCaZvp25UZzDON7ESYj/MoXD+qvf1lnRrgweeaCGHr389t2r1Huo7w==
45494549

45504550
colorette@^1.2.1, colorette@^1.2.2:
45514551
version "1.2.2"
@@ -5137,14 +5137,15 @@ cssnano@^5.0.2:
51375137
cssnano-preset-default "^5.1.1"
51385138
is-resolvable "^1.1.0"
51395139

5140-
cssnano@^5.0.6:
5141-
version "5.0.6"
5142-
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.0.6.tgz#2a91ad34c6521ae31eab3da9c90108ea3093535d"
5143-
integrity sha512-NiaLH/7yqGksFGsFNvSRe2IV/qmEBAeDE64dYeD8OBrgp6lE8YoMeQJMtsv5ijo6MPyhuoOvFhI94reahBRDkw==
5140+
cssnano@^5.0.7:
5141+
version "5.0.7"
5142+
resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-5.0.7.tgz#e81894bdf31aa01a0ca3d1d0eee47be18f7f3012"
5143+
integrity sha512-7C0tbb298hef3rq+TtBbMuezBQ9VrFtrQEsPNuBKNVgWny/67vdRsnq8EoNu7TRjAHURgYvWlRIpCUmcMZkRzw==
51445144
dependencies:
5145-
cosmiconfig "^7.0.0"
51465145
cssnano-preset-default "^5.1.3"
51475146
is-resolvable "^1.1.0"
5147+
lilconfig "^2.0.3"
5148+
yaml "^1.10.2"
51485149

51495150
csso@^4.0.2, csso@^4.2.0:
51505151
version "4.2.0"
@@ -5743,21 +5744,22 @@ es-abstract@^1.17.0-next.0, es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next
57435744
unbox-primitive "^1.0.1"
57445745

57455746
es-abstract@^1.17.2:
5746-
version "1.18.3"
5747-
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.3.tgz#25c4c3380a27aa203c44b2b685bba94da31b63e0"
5748-
integrity sha512-nQIr12dxV7SSxE6r6f1l3DtAeEYdsGpps13dR0TwJg1S8gyp4ZPgy3FZcHBgbiQqnoqSTb+oC+kO4UQ0C/J8vw==
5747+
version "1.18.5"
5748+
resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.5.tgz#9b10de7d4c206a3581fd5b2124233e04db49ae19"
5749+
integrity sha512-DDggyJLoS91CkJjgauM5c0yZMjiD1uK3KcaCeAmffGwZ+ODWzOkPN4QwRbsK5DOFf06fywmyLci3ZD8jLGhVYA==
57495750
dependencies:
57505751
call-bind "^1.0.2"
57515752
es-to-primitive "^1.2.1"
57525753
function-bind "^1.1.1"
57535754
get-intrinsic "^1.1.1"
57545755
has "^1.0.3"
57555756
has-symbols "^1.0.2"
5757+
internal-slot "^1.0.3"
57565758
is-callable "^1.2.3"
57575759
is-negative-zero "^2.0.1"
57585760
is-regex "^1.1.3"
57595761
is-string "^1.0.6"
5760-
object-inspect "^1.10.3"
5762+
object-inspect "^1.11.0"
57615763
object-keys "^1.1.1"
57625764
object.assign "^4.1.2"
57635765
string.prototype.trimend "^1.0.4"
@@ -9651,6 +9653,11 @@ object-inspect@^1.10.3, object-inspect@^1.9.0:
96519653
resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.3.tgz#c2aa7d2d09f50c99375704f7a0adf24c5782d369"
96529654
integrity sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==
96539655

9656+
object-inspect@^1.11.0:
9657+
version "1.11.0"
9658+
resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.0.tgz#9dceb146cedd4148a0d9e51ab88d34cf509922b1"
9659+
integrity sha512-jp7ikS6Sd3GxQfZJPyH3cjcbJF6GZPClgdV+EFygjFLQ5FmW/dRUnTd9PQ9k0JhoNDabWFbpF1yCdSWCC6gexg==
9660+
96549661
object-is@^1.0.1:
96559662
version "1.1.5"
96569663
resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
@@ -10582,9 +10589,9 @@ postcss-modules-values@^4.0.0:
1058210589
icss-utils "^5.0.0"
1058310590

1058410591
postcss-modules@^4.0.0:
10585-
version "4.1.3"
10586-
resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-4.1.3.tgz#c4c4c41d98d97d24c70e88dacfc97af5a4b3e21d"
10587-
integrity sha512-dBT39hrXe4OAVYJe/2ZuIZ9BzYhOe7t+IhedYeQ2OxKwDpAGlkEN/fR0fGnrbx4BvgbMReRX4hCubYK9cE/pJQ==
10592+
version "4.2.2"
10593+
resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-4.2.2.tgz#5e7777c5a8964ea176919d90b2e54ef891321ce5"
10594+
integrity sha512-/H08MGEmaalv/OU8j6bUKi/kZr2kqGF6huAW8m9UAgOLWtpFdhA14+gPBoymtqyv+D4MLsmqaF2zvIegdCxJXg==
1058810595
dependencies:
1058910596
generic-names "^2.0.1"
1059010597
icss-replace-symbols "^1.1.0"
@@ -10910,10 +10917,10 @@ postcss@^8.2.1, postcss@^8.2.15:
1091010917
nanoid "^3.1.23"
1091110918
source-map-js "^0.6.2"
1091210919

10913-
postcss@^8.3.5:
10914-
version "8.3.5"
10915-
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709"
10916-
integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA==
10920+
postcss@^8.3.6:
10921+
version "8.3.6"
10922+
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
10923+
integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A==
1091710924
dependencies:
1091810925
colorette "^1.2.2"
1091910926
nanoid "^3.1.23"

0 commit comments

Comments
 (0)