Skip to content

Commit d7b93c3

Browse files
morewingsmorewings
committed
refactor(code-style): change max line length
1 parent e4cb37d commit d7b93c3

File tree

9 files changed

+84
-31
lines changed

9 files changed

+84
-31
lines changed

‎.editorconfig‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ end_of_line = lf
44
indent_size = 4
55
indent_style = space
66
insert_final_newline = true
7-
max_line_length = 120
7+
max_line_length = 90
88
tab_width = 4
99
trim_trailing_whitespace = true
1010
ij_continuation_indent_size = 8

‎src/env/Examples/Mouse/Mouse.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,10 @@ export const Mouse: FC = () => {
2525
event.clientX - ref.current!.getBoundingClientRect().left,
2626
ref.current!.offsetWidth - trackerRef.current!.offsetWidth
2727
);
28-
setTheme({left: `${Math.floor(offsetLeft)}px`, top: `${Math.floor(offsetTop)}px`});
28+
setTheme({
29+
left: `${Math.floor(offsetLeft)}px`,
30+
top: `${Math.floor(offsetTop)}px`,
31+
});
2932
},
3033
[setTheme, ref, trackerRef]
3134
);
@@ -38,7 +41,10 @@ export const Mouse: FC = () => {
3841

3942
return (
4043
<div className={classes.box}>
41-
<LocalRoot theme={theme} onMouseMove={handleMove} className={classes.trackingArea}>
44+
<LocalRoot
45+
theme={theme}
46+
onMouseMove={handleMove}
47+
className={classes.trackingArea}>
4248
<img
4349
ref={trackerRef}
4450
src={image as string}

‎src/env/Examples/Rotation3D/Cube.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
.cube {
1616
height: 200px;
1717
position: relative;
18-
transform: translateZ(-100px) rotateY(var(--rotateY)) rotateX(var(--rotateX)) rotateZ(var(--rotateZ));
18+
transform: translateZ(-100px) rotateY(var(--rotateY)) rotateX(var(--rotateX))
19+
rotateZ(var(--rotateZ));
1920
transform-style: preserve-3d;
2021
width: 200px;
2122
}

‎src/env/Examples/Rotation3D/Rotation3D.tsx‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,20 @@ export const Rotation3D: FC = () => {
6464
onChange={handleXChange}
6565
/>
6666
<datalist id="x-values" className={classes.scale}>
67-
<option className={classes.mark} value="-180" label="-180°"></option>
68-
<option className={classes.mark} value="-90" label="-90°"></option>
67+
<option
68+
className={classes.mark}
69+
value="-180"
70+
label="-180°"></option>
71+
<option
72+
className={classes.mark}
73+
value="-90"
74+
label="-90°"></option>
6975
<option className={classes.mark} value="0" label="0°"></option>
7076
<option className={classes.mark} value="90" label="90°"></option>
71-
<option className={classes.mark} value="180" label="180°"></option>
77+
<option
78+
className={classes.mark}
79+
value="180"
80+
label="180°"></option>
7281
</datalist>
7382
</div>
7483
<div className={classes.control}>
@@ -86,11 +95,20 @@ export const Rotation3D: FC = () => {
8695
onChange={handleYChange}
8796
/>
8897
<datalist id="y-values" className={classes.scale}>
89-
<option className={classes.mark} value="-180" label="-180°"></option>
90-
<option className={classes.mark} value="-90" label="-90°"></option>
98+
<option
99+
className={classes.mark}
100+
value="-180"
101+
label="-180°"></option>
102+
<option
103+
className={classes.mark}
104+
value="-90"
105+
label="-90°"></option>
91106
<option className={classes.mark} value="0" label="0°"></option>
92107
<option className={classes.mark} value="90" label="90°"></option>
93-
<option className={classes.mark} value="180" label="180°"></option>
108+
<option
109+
className={classes.mark}
110+
value="180"
111+
label="180°"></option>
94112
</datalist>
95113
</div>
96114
<div className={classes.control}>
@@ -108,11 +126,20 @@ export const Rotation3D: FC = () => {
108126
onChange={handleZChange}
109127
/>
110128
<datalist id="z-values" className={classes.scale}>
111-
<option className={classes.mark} value="-180" label="-180°"></option>
112-
<option className={classes.mark} value="-90" label="-90°"></option>
129+
<option
130+
className={classes.mark}
131+
value="-180"
132+
label="-180°"></option>
133+
<option
134+
className={classes.mark}
135+
value="-90"
136+
label="-90°"></option>
113137
<option className={classes.mark} value="0" label="0°"></option>
114138
<option className={classes.mark} value="90" label="90°"></option>
115-
<option className={classes.mark} value="180" label="180°"></option>
139+
<option
140+
className={classes.mark}
141+
value="180"
142+
label="180°"></option>
116143
</datalist>
117144
</div>
118145
<div className={classes.count}>Reconciliation count: {renderCount}</div>

‎src/lib/LocalTheme/useLocalTheme.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,10 @@ export const useLocalTheme = <TElement extends HTMLElement>() => {
3232

3333
const getTheme = useCallback(() => themeRef.current, []);
3434

35-
const getVariable = useCallback((variableName: string) => themeRef.current?.[variableName], []);
35+
const getVariable = useCallback(
36+
(variableName: string) => themeRef.current?.[variableName],
37+
[]
38+
);
3639

3740
const setVariable = useCallback((variableName: string, variableValue: UnitType) => {
3841
setCSSVariable(elementRef.current!)(variableName, variableValue);

‎src/lib/RootTheme/RootThemeProvider.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ import {useRootTheme} from './useRootTheme';
1010
/**
1111
* @public
1212
*/
13-
export type RootThemeProviderProps = DataAttributes & LibraryProps & {children: ReactNode; theme: ThemeType};
13+
export type RootThemeProviderProps = DataAttributes &
14+
LibraryProps & {children: ReactNode; theme: ThemeType};
1415

1516
/**
1617
* @public
@@ -26,7 +27,8 @@ export const RootThemeProvider: FC<RootThemeProviderProps> = ({
2627
id = ROOT_ID,
2728
...nativeProps
2829
}) => {
29-
const {setTheme, style, getTheme, getVariable, setVariable, removeVariable} = useRootTheme(theme);
30+
const {setTheme, style, getTheme, getVariable, setVariable, removeVariable} =
31+
useRootTheme(theme);
3032

3133
const {Provider} = RootContext;
3234

‎src/lib/RootTheme/useRootTheme.ts‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,22 @@ import {useCallback, useRef} from 'react';
22
import type {CSSProperties} from 'react';
33
import type {ThemeType} from 'css-vars-hook';
44

5-
import {createStyleObject, getRootVariable, removeRootVariable, setRootVariable} from '../utils';
5+
import {
6+
createStyleObject,
7+
getRootVariable,
8+
removeRootVariable,
9+
setRootVariable,
10+
} from '../utils';
611
import type {HookInterface} from './HookInterfaceType';
712
import type {UnitType} from '../UnitType';
813

914
/**
1015
* @private
1116
* Logic for root theme handling such as updates and CSS style creation
1217
*/
13-
export const useRootTheme = (theme: ThemeType): HookInterface & {style: CSSProperties} => {
18+
export const useRootTheme = (
19+
theme: ThemeType
20+
): HookInterface & {style: CSSProperties} => {
1421
const themeRef = useRef(theme);
1522

1623
const setTheme = useCallback((nextTheme: ThemeType) => {
@@ -23,7 +30,10 @@ export const useRootTheme = (theme: ThemeType): HookInterface & {style: CSSPrope
2330

2431
const getTheme = useCallback(() => themeRef.current, []);
2532

26-
const getVariable = useCallback((variableName: string) => getRootVariable(variableName), []);
33+
const getVariable = useCallback(
34+
(variableName: string) => getRootVariable(variableName),
35+
[]
36+
);
2737
const setVariable = useCallback((variableName: string, value: UnitType) => {
2838
setRootVariable(variableName, value);
2939
themeRef.current = {

‎src/lib/RootTheme/useRootThemePublic.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {useRootContext} from './RootContext';
88
* @see https://github.com/morewings/css-vars-hook#type-safety
99
*/
1010
export const useRootThemePublic = () => {
11-
const {setTheme, getTheme, setVariable, getVariable, removeVariable} = useRootContext();
11+
const {setTheme, getTheme, setVariable, getVariable, removeVariable} =
12+
useRootContext();
1213
return {
1314
/** Effect to apply new theme to the application */
1415
setTheme,

‎src/lib/utils.ts‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,30 @@ const normalizeUnit = (unit: UnitType) => {
1414
* @name setCSSVariable
1515
* @description Set CSS variable at the provided DOM node
1616
*/
17-
export const setCSSVariable = (element: HTMLElement) => (variableName: string, value: UnitType) => {
18-
element.style.setProperty(`--${variableName}`, normalizeUnit(value));
19-
};
17+
export const setCSSVariable =
18+
(element: HTMLElement) => (variableName: string, value: UnitType) => {
19+
element.style.setProperty(`--${variableName}`, normalizeUnit(value));
20+
};
2021

2122
/** @function
2223
* @name removeCSSVariable
2324
* @description Remove CSS variable from the provided DOM node
2425
*/
25-
export const removeCSSVariable = (ref: MutableRefObject<HTMLElement>) => (variableName: string) => {
26-
const element = ref.current;
27-
element?.style?.removeProperty?.(`--${variableName}`);
28-
};
26+
export const removeCSSVariable =
27+
(ref: MutableRefObject<HTMLElement>) => (variableName: string) => {
28+
const element = ref.current;
29+
element?.style?.removeProperty?.(`--${variableName}`);
30+
};
2931

3032
/** @function
3133
* @name getCSSVariable
3234
* @description Get CSS variable value at the provided DOM node
3335
*/
34-
export const getCSSVariable = (ref: MutableRefObject<HTMLElement>) => (variableName: string) => {
35-
const element = ref.current;
36-
return element?.style?.getPropertyValue?.(`--${variableName}`);
37-
};
36+
export const getCSSVariable =
37+
(ref: MutableRefObject<HTMLElement>) => (variableName: string) => {
38+
const element = ref.current;
39+
return element?.style?.getPropertyValue?.(`--${variableName}`);
40+
};
3841

3942
/** @function
4043
* @name createStyleObject

0 commit comments

Comments
 (0)