Skip to content

Commit

Permalink
fix: regenerate classes only when styles prop changes (#235)
Browse files Browse the repository at this point in the history 
* fix: regenerate classes only when styles prop changes

* update undefined props

Co-authored-by: Egor <egor.kirpichev@gmail.com>
  • Loading branch information
@nowseemee @eeegor
nowseemee and eeegor authored Jun 4, 2020
1 parent 890cc3a commit c1f16dc
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 50 deletions.
82 changes: 41 additions & 41 deletions packages/components/src/components/progress-bar/__snapshots__/progress-bar.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ exports[`ProgressBar should contain progress-bar-inner-text css class when text
<scale-progress-bar text-inside="true">
<mock:shadow-root>
<style>
.progress-bar-0-0-55 {
.progress-bar-0-0-64 {
width: 100%;
display: flex;
box-sizing: border-box;
align-items: center;
}
.progress-bar__outer-0-0-56 {
.progress-bar__outer-0-0-65 {
width: 400px;
height: 6px;
margin: 12px 12px 12px 0;
Expand All @@ -19,7 +19,7 @@ exports[`ProgressBar should contain progress-bar-inner-text css class when text
background: #ebeef5;
border-radius: 100px;
}
.progress-bar__inner-0-0-57 {
.progress-bar__inner-0-0-66 {
top: 0;
left: 0;
height: 100%;
Expand All @@ -31,34 +31,34 @@ exports[`ProgressBar should contain progress-bar-inner-text css class when text
border-radius: 100px;
justify-content: flex-end;
}
.progress-bar__inner-text-0-0-58 {
.progress-bar__inner-text-0-0-67 {
color: #fff;
padding: 0 12px;
font-size: 12px;
}
.progress-bar__text-0-0-59 {
.progress-bar__text-0-0-68 {
color: #606266;
display: inline-block;
font-size: 14px;
}
.progress-bar--variant-success-0-0-60 {
.progress-bar--variant-success-0-0-69 {
background: #28a745;
}
.progress-bar--variant-info-0-0-61 {
.progress-bar--variant-info-0-0-70 {
background: #409eff;
}
.progress-bar--variant-warning-0-0-62 {
.progress-bar--variant-warning-0-0-71 {
background: #ffc107;
}
.progress-bar--variant-danger-0-0-63 {
.progress-bar--variant-danger-0-0-72 {
background: #dc3545;
}
</style>
<div class="progress-bar-0-0-55">
<div class="progress-bar__outer-0-0-56" style="height: 6px;">
<div class="progress-bar-0-0-55 progress-bar__inner-0-0-57" style="width: undefined%;">
<div class="progress-bar__inner-text-0-0-58">
undefined%
<div class="progress-bar-0-0-64">
<div class="progress-bar__outer-0-0-65" style="height: 6px;">
<div class="progress-bar-0-0-64 progress-bar__inner-0-0-66" style="width: 0%;">
<div class="progress-bar__inner-text-0-0-67">
0%
</div>
</div>
</div>
Expand All @@ -72,13 +72,13 @@ exports[`ProgressBar should contain progress-bar-text css class when show text i
<scale-progress-bar show-text="true">
<mock:shadow-root>
<style>
.progress-bar-0-0-37 {
.progress-bar-0-0-46 {
width: 100%;
display: flex;
box-sizing: border-box;
align-items: center;
}
.progress-bar__outer-0-0-38 {
.progress-bar__outer-0-0-47 {
width: 400px;
height: 6px;
margin: 12px 12px 12px 0;
Expand All @@ -87,7 +87,7 @@ exports[`ProgressBar should contain progress-bar-text css class when show text i
background: #ebeef5;
border-radius: 100px;
}
.progress-bar__inner-0-0-39 {
.progress-bar__inner-0-0-48 {
top: 0;
left: 0;
height: 100%;
Expand All @@ -99,35 +99,35 @@ exports[`ProgressBar should contain progress-bar-text css class when show text i
border-radius: 100px;
justify-content: flex-end;
}
.progress-bar__inner-text-0-0-40 {
.progress-bar__inner-text-0-0-49 {
color: #fff;
padding: 0 12px;
font-size: 12px;
}
.progress-bar__text-0-0-41 {
.progress-bar__text-0-0-50 {
color: #606266;
display: inline-block;
font-size: 14px;
}
.progress-bar--variant-success-0-0-42 {
.progress-bar--variant-success-0-0-51 {
background: #28a745;
}
.progress-bar--variant-info-0-0-43 {
.progress-bar--variant-info-0-0-52 {
background: #409eff;
}
.progress-bar--variant-warning-0-0-44 {
.progress-bar--variant-warning-0-0-53 {
background: #ffc107;
}
.progress-bar--variant-danger-0-0-45 {
.progress-bar--variant-danger-0-0-54 {
background: #dc3545;
}
</style>
<div class="progress-bar-0-0-37">
<div class="progress-bar__outer-0-0-38" style="height: 6px;">
<div class="progress-bar-0-0-37 progress-bar__inner-0-0-39" style="width: undefined%;"></div>
<div class="progress-bar-0-0-46">
<div class="progress-bar__outer-0-0-47" style="height: 6px;">
<div class="progress-bar-0-0-46 progress-bar__inner-0-0-48" style="width: 0%;"></div>
</div>
<div class="progress-bar__text-0-0-41">
undefined%
<div class="progress-bar__text-0-0-50">
0%
</div>
</div>
</mock:shadow-root>
Expand All @@ -139,13 +139,13 @@ exports[`ProgressBar should have css property width 24px when stroke width is se
<scale-progress-bar stroke-width="24">
<mock:shadow-root>
<style>
.progress-bar-0-0-10 {
.progress-bar-0-0-28 {
width: 100%;
display: flex;
box-sizing: border-box;
align-items: center;
}
.progress-bar__outer-0-0-11 {
.progress-bar__outer-0-0-29 {
width: 400px;
height: 6px;
margin: 12px 12px 12px 0;
Expand All @@ -154,7 +154,7 @@ exports[`ProgressBar should have css property width 24px when stroke width is se
background: #ebeef5;
border-radius: 100px;
}
.progress-bar__inner-0-0-12 {
.progress-bar__inner-0-0-30 {
top: 0;
left: 0;
height: 100%;
Expand All @@ -166,32 +166,32 @@ exports[`ProgressBar should have css property width 24px when stroke width is se
border-radius: 100px;
justify-content: flex-end;
}
.progress-bar__inner-text-0-0-13 {
.progress-bar__inner-text-0-0-31 {
color: #fff;
padding: 0 12px;
font-size: 12px;
}
.progress-bar__text-0-0-14 {
.progress-bar__text-0-0-32 {
color: #606266;
display: inline-block;
font-size: 14px;
}
.progress-bar--variant-success-0-0-15 {
.progress-bar--variant-success-0-0-33 {
background: #28a745;
}
.progress-bar--variant-info-0-0-16 {
.progress-bar--variant-info-0-0-34 {
background: #409eff;
}
.progress-bar--variant-warning-0-0-17 {
.progress-bar--variant-warning-0-0-35 {
background: #ffc107;
}
.progress-bar--variant-danger-0-0-18 {
.progress-bar--variant-danger-0-0-36 {
background: #dc3545;
}
</style>
<div class="progress-bar-0-0-10">
<div class="progress-bar__outer-0-0-11" style="height: 24px;">
<div class="progress-bar-0-0-10 progress-bar__inner-0-0-12" style="width: undefined%;"></div>
<div class="progress-bar-0-0-28">
<div class="progress-bar__outer-0-0-29" style="height: 24px;">
<div class="progress-bar-0-0-28 progress-bar__inner-0-0-30" style="width: 0%;"></div>
</div>
</div>
</mock:shadow-root>
Expand Down Expand Up @@ -255,7 +255,7 @@ exports[`ProgressBar should match snapshot 1`] = `
</style>
<div class="progress-bar-0-0-10">
<div class="progress-bar__outer-0-0-11" style="height: 6px;">
<div class="progress-bar-0-0-10 progress-bar__inner-0-0-12" style="width: undefined%;"></div>
<div class="progress-bar-0-0-10 progress-bar__inner-0-0-12" style="width: 0%;"></div>
</div>
</div>
</mock:shadow-root>
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/progress-bar/progress-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export class ProgressBar implements Base {
/** (optional) Progress bar class */
@Prop() customClass?: string = '';
/** (required) Progress bar percentage */
@Prop() percentage: number;
@Prop() percentage: number = 0;
/** (optional) Progress bar variant */
@Prop() variant?: string;
/** (optional) Progress bar stroke width */
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/components/progress-bar/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ------------------------------------------- | ---------------------------------------- | ----------- |
| `customClass` | `custom-class` | (optional) Progress bar class | `string` | `''` |
| `percentage` | `percentage` | (required) Progress bar percentage | `number` | `undefined` |
| `percentage` | `percentage` | (required) Progress bar percentage | `number` | `0` |
| `showText` | `show-text` | (optional) Progress bar percentage text | `boolean` | `undefined` |
| `strokeWidth` | `stroke-width` | (optional) Progress bar stroke width | `number` | `6` |
| `styles` | -- | (optional) Injected jss styles | `StyleSheet<string \| number \| symbol>` | `undefined` |
Expand Down
9 changes: 2 additions & 7 deletions packages/components/src/utils/css-in-js.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,11 @@ declare type CssInJsDecorator = (
) => void;

const getKeys = obj => {
const blackListedProps = ['stylesheet', 'value', 'key'];
const whiteListedTypes = ['boolean', 'string', 'object'];
const whitelistedProps = ['styles'];
const keys = [];

for (const key in obj) {
if (
obj[key] &&
whiteListedTypes.includes(typeof obj[key]) &&
!blackListedProps.includes(key)
) {
if (obj[key] && !whitelistedProps.includes(key)) {
keys.push(key);
}
}
Expand Down

0 comments on commit c1f16dc

Please sign in to comment.