Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit7be147c

Browse files
committed
Value precision fix
1 parent73fa11c commit7be147c

File tree

9 files changed

+81
-28
lines changed

9 files changed

+81
-28
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
1515

1616
- Removed unnecessary files from the packages
1717
-`react-container-query`
18-
-**[BREAKING]**ContainerQuery no longer returns an object for size, but width and height as
18+
-**[BREAKING]**ContainerQuery no longer returns an object for size, but width and height as
1919
the first parameter of the child function
2020
-**[BREAKING]** ContainerQuery now returns 1x1 dimensions before the ResizeObserver kicks in
21+
-`container-query`
22+
-**[BREAKING]** Set the pixel precision to be 0, so that whole numbers are
23+
applied by default.
2124

2225
###Removed
2326

‎packages/container-query/src/Container.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export default class Container {
8181
{
8282
adjustOnResize:true,
8383
adjustOnInstantiation:true,
84-
valuePrecision:2
84+
valuePrecision:0
8585
},
8686
opts
8787
);

‎packages/container-query/src/convertCompositValue.spec.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,16 @@ test("should respect precision", () => {
3636
expect(
3737
convertCompositValue({height:50,width:50},"20.25rh 20.25rw",4)
3838
).toBe("10.125px 10.125px");
39+
expect(
40+
convertCompositValue({height:50,width:50},"20.25rh 20.25rw",3)
41+
).toBe("10.125px 10.125px");
42+
expect(
43+
convertCompositValue({height:50,width:50},"20.25rh 20.25rw",2)
44+
).toBe("10.13px 10.13px");
45+
expect(
46+
convertCompositValue({height:50,width:50},"20.25rh 20.25rw",1)
47+
).toBe("10.1px 10.1px");
48+
expect(
49+
convertCompositValue({height:50,width:50},"20.25rh 20.25rw",0)
50+
).toBe("10px 10px");
3951
});

‎packages/container-query/src/convertSingleValue.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
importtype{ContainerSize}from"../flow/types";
33
import_from"lodash";
44

5+
constround=(value:number,precision:number):number=>{
6+
if(Number.isInteger(precision)){
7+
constshift=Math.pow(10,precision);
8+
returnMath.round(value*shift)/shift;
9+
}
10+
11+
returnMath.round(value);
12+
};
13+
514
/**
615
* Converts a value possibly using a container unit into a pixel value.
716
* (Respecting the given precision.)
@@ -41,9 +50,11 @@ export default function convertSingleValue(
4150
// Removing unnecessary precisions. (Otherwise it would get applied
4251
// inconsistently in chrome / firefox, which would not be a big issue, but
4352
// makes writing tests a pain.)
44-
constpreciseValue=`${valueNum.toFixed(precision)}`;
53+
// const preciseValue = `${valueNum.toFixed(precision)}`;
54+
55+
// const trimmedValue = _.trim(_.trim(preciseValue, " 0"), ".");
4556

46-
consttrimmedValue=_.trim(_.trim(preciseValue," 0"),".");
57+
constroundedValue=round(valueNum,precision);
4758

48-
return`${trimmedValue}px`;
59+
return`${roundedValue}px`;
4960
}

‎packages/container-query/src/convertSingleValue.spec.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,21 @@ test("should handle higher precisions", () => {
5050
"31.0575px"
5151
);
5252
});
53+
54+
test("should be able to round to various precisions",()=>{
55+
expect(convertSingleValue({width:123,height:321},"25.25rw",0)).toBe(
56+
"31px"
57+
);
58+
expect(convertSingleValue({width:123,height:321},"25.25rw",1)).toBe(
59+
"31.1px"
60+
);
61+
expect(convertSingleValue({width:123,height:321},"25.25rw",2)).toBe(
62+
"31.06px"
63+
);
64+
expect(convertSingleValue({width:123,height:321},"25.25rw",3)).toBe(
65+
"31.058px"
66+
);
67+
expect(convertSingleValue({width:123,height:321},"25.25rw",4)).toBe(
68+
"31.0575px"
69+
);
70+
});

‎tests/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import "core-js/fn/map";
1515
import"babel-regenerator-runtime";
1616

1717
// "Registering" test suits
18-
// import "./react/basic/index";
19-
// import "./react/hoc/index";
20-
// import "./react/manual/index";
21-
import"./react/non-oocss/index";
18+
// import "./react/basic";
19+
// import "./react/hoc";
20+
// import "./react/manual";
21+
import"./react/non-oocss";

‎tests/react/non-oocss/Container/Container.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,18 @@ import { meta } from "./styles.pcss";
44
importPropTypesfrom"prop-types";
55

66
constContainer=({ children, id})=>(
7-
<ContainerQuerymeta={meta}className="container"data-testid={`root-${id}`}>
7+
<ContainerQuery
8+
meta={meta}
9+
className="container"
10+
data-testid={`root-${id}`}
11+
options={
12+
{
13+
// Generating whole numbers to make assertions simpler across browsers
14+
// todo test this somewhere else
15+
// valuePrecision: 0
16+
}
17+
}
18+
>
819
<divclassName="marker"data-testid={`marker-${id}`}/>
920
{children ?(
1021
<divclassName="child"data-testid={`child-${id}`}>

‎tests/react/non-oocss/Container/styles.pcss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
width:100%;
1212
height:100%;
1313
border:2px solid;
14-
/*todo box-sizing: border-box;*/
1514
}
1615

1716
.marker {

‎tests/react/non-oocss/index.js‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { getByTestId } from "dom-testing-library";
1515
// as a child, should not affect the latter even if they're the same container types
1616
// - Tests whether the lib can work with CSS-modules built in to css-loader
1717
// - Tests r-units
18-
// todo make the tests assert whole numbers, to make cross-browser testing easier
1918
// todo add css-modules, and export the classes for reuse
2019
describe("Non OOCSS",()=>{
2120
constrefs={};
@@ -96,7 +95,7 @@ describe("Non OOCSS", () => {
9695

9796
awaitwaitForElementToHaveStyle(refs.marker3,{
9897
backgroundColor:"rgb(255, 0, 0)",
99-
width:"14.6875px"
98+
width:"15px"
10099
});
101100

102101
// Child wrappers should be adjusted with rh
@@ -115,17 +114,17 @@ describe("Non OOCSS", () => {
115114

116115
awaitwaitForElementToHaveStyle(refs.marker1,{
117116
backgroundColor:"rgb(0, 255, 0)",
118-
width:"30.2969px"
117+
width:"30px"
119118
});
120119

121120
awaitwaitForElementToHaveStyle(refs.marker2,{
122121
backgroundColor:"rgb(255, 0, 0)",
123-
width:"21.2031px"
122+
width:"21px"
124123
});
125124

126125
awaitwaitForElementToHaveStyle(refs.marker3,{
127126
backgroundColor:"rgb(255, 0, 0)",
128-
width:"14.8281px"
127+
width:"15px"
129128
});
130129

131130
// Child wrapper heights should not change
@@ -140,21 +139,21 @@ describe("Non OOCSS", () => {
140139
});
141140

142141
it("should change the second container's styles only",async()=>{
143-
changeRootSize({width:143});
142+
changeRootSize({width:144});
144143

145144
awaitwaitForElementToHaveStyle(refs.marker1,{
146145
backgroundColor:"rgb(0, 0, 255)",
147-
width:"42.8906px"
146+
width:"43px"
148147
});
149148

150149
awaitwaitForElementToHaveStyle(refs.marker2,{
151150
backgroundColor:"rgb(0, 255, 0)",
152-
width:"30.0156px"
151+
width:"30px"
153152
});
154153

155154
awaitwaitForElementToHaveStyle(refs.marker3,{
156155
backgroundColor:"rgb(255, 0, 0)",
157-
width:"21.0156px"
156+
width:"21px"
158157
});
159158

160159
// Child wrapper heights should not change
@@ -173,17 +172,17 @@ describe("Non OOCSS", () => {
173172

174173
awaitwaitForElementToHaveStyle(refs.marker1,{
175174
backgroundColor:"rgb(0, 0, 255)",
176-
width:"61.5px"
175+
width:"62px"
177176
});
178177

179178
awaitwaitForElementToHaveStyle(refs.marker2,{
180179
backgroundColor:"rgb(0, 0, 255)",
181-
width:"43.0469px"
180+
width:"43px"
182181
});
183182

184183
awaitwaitForElementToHaveStyle(refs.marker3,{
185184
backgroundColor:"rgb(0, 255, 0)",
186-
width:"30.125px"
185+
width:"30px"
187186
});
188187

189188
// Child wrapper heights should not change
@@ -198,21 +197,21 @@ describe("Non OOCSS", () => {
198197
});
199198

200199
it("should change the last container once again",async()=>{
201-
changeRootSize({width:286});
200+
changeRootSize({width:287});
202201

203202
awaitwaitForElementToHaveStyle(refs.marker1,{
204203
backgroundColor:"rgb(0, 0, 255)",
205-
width:"85.7969px"
204+
width:"86px"
206205
});
207206

208207
awaitwaitForElementToHaveStyle(refs.marker2,{
209208
backgroundColor:"rgb(0, 0, 255)",
210-
width:"60.0469px"
209+
width:"60px"
211210
});
212211

213212
awaitwaitForElementToHaveStyle(refs.marker3,{
214213
backgroundColor:"rgb(0, 0, 255)",
215-
width:"42.0312px"
214+
width:"42px"
216215
});
217216

218217
// Child wrapper heights should not change
@@ -241,7 +240,7 @@ describe("Non OOCSS", () => {
241240

242241
awaitwaitForElementToHaveStyle(refs.marker3,{
243242
backgroundColor:"rgb(255, 0, 0)",
244-
width:"14.6875px"
243+
width:"15px"
245244
});
246245

247246
// Child wrappers should be adjusted with rh

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp