Skip to content

Shimmer: fixing casing on enums #4542

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
manishgarg1 merged 6 commits into from
Apr 13, 2018
Merged

Shimmer: fixing casing on enums #4542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a527f19
Replaces LINE with line
Apr 13, 2018
1ff0294
Replaces CIRCLE with circle.
Apr 13, 2018
952bcab
Replaces GAP with gap.
Apr 13, 2018
90564b4
Replaces CENTER, TOP, BOTTOM with center, top , bottom.
Apr 13, 2018
704d368
Rush change log.
Apr 13, 2018
f526a99
Adds deprecation warnings to enums.
Apr 13, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@uifabric/experiments/v-vibr-EnumFix_2018-04-13-01-58.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "@uifabric/experiments",
"comment": "Shimmer: Changes casing on enums in Shimmer.types",
"type": "patch"
}
],
"packageName": "@uifabric/experiments",
"email": "v-vibr@microsoft.com"
}
18 changes: 9 additions & 9 deletions packages/experiments/src/components/Shimmer/Shimmer.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,23 +66,23 @@ export function getRenderedElements(lineElements?: Array<ICircle | IGap | ILine>
const renderedElements: React.ReactNode = lineElements ?
lineElements.map((elem: ICircle | ILine | IGap, index: number): JSX.Element => {
switch (elem.type) {
case ShimmerElementType.CIRCLE:
case ShimmerElementType.circle:
return (
<ShimmerCircle
key={ index }
{ ...elem }
borderStyle={ getBorderStyles(elem, rowHeight) }
/>
);
case ShimmerElementType.GAP:
case ShimmerElementType.gap:
return (
<ShimmerGap
key={ index }
{ ...elem }
borderStyle={ getBorderStyles(elem, rowHeight) }
/>
);
case ShimmerElementType.LINE:
case ShimmerElementType.line:
return (
<ShimmerLine
key={ index }
Expand All @@ -107,17 +107,17 @@ export function getBorderStyles(elem: ICircle | IGap | ILine, rowHeight?: number

let borderStyle: IStyleSet | undefined;

if (!elem.verticalAlign || elem.verticalAlign === ShimmerElementVerticalAlign.CENTER) {
if (!elem.verticalAlign || elem.verticalAlign === ShimmerElementVerticalAlign.center) {
borderStyle = {
borderBottom: `${dif ? Math.floor(dif / 2) : 0}px solid ${DefaultPalette.white}`,
borderTop: `${dif ? Math.ceil(dif / 2) : 0}px solid ${DefaultPalette.white}`
};
} else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.TOP) {
} else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.top) {
borderStyle = {
borderBottom: `${dif ? dif : 0}px solid ${DefaultPalette.white}`,
borderTop: `0px solid ${DefaultPalette.white}`
};
} else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.BOTTOM) {
} else if (elem.verticalAlign && elem.verticalAlign === ShimmerElementVerticalAlign.bottom) {
borderStyle = {
borderBottom: `0px solid ${DefaultPalette.white}`,
borderTop: `${dif ? dif : 0}px solid ${DefaultPalette.white}`
Expand All @@ -130,15 +130,15 @@ export function getBorderStyles(elem: ICircle | IGap | ILine, rowHeight?: number
export function findMaxElementHeight(elements: Array<ICircle | IGap | ILine>): number {
const itemsDefaulted: Array<ICircle | IGap | ILine> = elements.map((elem: ICircle | IGap | ILine): ICircle | IGap | ILine => {
switch (elem.type) {
case ShimmerElementType.CIRCLE:
case ShimmerElementType.circle:
if (!elem.height) {
elem.height = CIRCLE_DEFAULT_HEIGHT;
}
case ShimmerElementType.LINE:
case ShimmerElementType.line:
if (!elem.height) {
elem.height = LINE_DEFAULT_HEIGHT;
}
case ShimmerElementType.GAP:
case ShimmerElementType.gap:
if (!elem.height) {
elem.height = GAP_DEFAULT_HEIGHT;
}
Expand Down
18 changes: 16 additions & 2 deletions packages/experiments/src/components/Shimmer/Shimmer.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,14 +136,28 @@ export interface IShimmerStyles {
dataWrapper?: IStyle;
}

/**
* The CAPS lock values will be deprecated soon.
* @deprecated
*/
export const enum ShimmerElementType {
LINE = 'line',
CIRCLE = 'circle',
GAP = 'gap'
GAP = 'gap',
line = 'line',
circle = 'circle',
gap = 'gap'
}

/**
* The CAPS lock values will be deprecated soon.
* @deprecated
*/
export const enum ShimmerElementVerticalAlign {
CENTER = 'center',
BOTTOM = 'bottom',
TOP = 'top'
TOP = 'top',
center = 'center',
bottom = 'bottom',
top = 'top'
}
22 changes: 11 additions & 11 deletions packages/experiments/src/components/Shimmer/ShimmerTile/ShimmerTile.base.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const PLACEHOLDER_SIZES: {
const getClassNames = classNamesFunction<IShimmerTileStyleProps, IShimmerTileStyles>();

export class ShimmerTileBase extends BaseComponent<IShimmerTileProps, {}> {
private _classNames: {[key in keyof IShimmerTileStyles]: string};
private _classNames: { [key in keyof IShimmerTileStyles]: string };

constructor(props: IShimmerTileProps) {
super(props);
Expand Down Expand Up @@ -120,23 +120,23 @@ export class ShimmerTileBase extends BaseComponent<IShimmerTileProps, {}> {
getRenderedElements(
[
{
type: ElemType.GAP,
type: ElemType.gap,
widthInPixel: (contentSize.width - squareWidth) / 2,
height: squareHeight
},
itemThumbnail ?
{
type: ElemType.LINE,
type: ElemType.line,
widthInPixel: squareWidth,
height: squareHeight
} :
{
type: ElemType.GAP,
type: ElemType.gap,
widthInPixel: squareWidth,
height: squareHeight
},
{
type: ElemType.GAP,
type: ElemType.gap,
widthInPixel: (contentSize.width - squareWidth) / 2,
height: squareHeight
}
Expand All @@ -161,17 +161,17 @@ export class ShimmerTileBase extends BaseComponent<IShimmerTileProps, {}> {
getRenderedElements(
[
{
type: ElemType.GAP,
type: ElemType.gap,
widthInPixel: (contentSize.width - nameWidth) / 2,
height: nameplateNameHeight
},
{
type: ElemType.LINE,
type: ElemType.line,
widthInPixel: nameWidth,
height: nameHeight
},
{
type: ElemType.GAP,
type: ElemType.gap,
widthInPixel: (contentSize.width - nameWidth) / 2,
height: nameplateNameHeight
}
Expand All @@ -190,17 +190,17 @@ export class ShimmerTileBase extends BaseComponent<IShimmerTileProps, {}> {
getRenderedElements(
[
{
type: ElemType.GAP,
type: ElemType.gap,
widthInPixel: (contentSize.width - activityWidth) / 2,
height: nameplateActivityHeight
},
{
type: ElemType.LINE,
type: ElemType.line,
widthInPixel: activityWidth,
height: activityHeight
},
{
type: ElemType.GAP,
type: ElemType.gap,
widthInPixel: (contentSize.width - activityWidth) / 2,
height: nameplateActivityHeight
}
Expand Down
64 changes: 32 additions & 32 deletions packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,53 +27,53 @@ export class ShimmerBasicExample extends React.Component<{}, {}> {
Custom Shimmer with elements provided.
<Shimmer
lineElements={ [
{ type: ElemType.CIRCLE },
{ type: ElemType.GAP, widthInPercentage: 2 },
{ type: ElemType.LINE },
{ type: ElemType.circle },
{ type: ElemType.gap, widthInPercentage: 2 },
{ type: ElemType.line },
] }
/>
Notice how the same elements change relative to the shimmer width provided.
<Shimmer
lineElements={ [
{ type: ElemType.CIRCLE, height: 24 },
{ type: ElemType.GAP, widthInPercentage: 2 },
{ type: ElemType.LINE, height: 16, widthInPercentage: 20 },
{ type: ElemType.GAP, widthInPercentage: 5 },
{ type: ElemType.LINE, height: 16, widthInPercentage: 20 },
{ type: ElemType.GAP, widthInPercentage: 10 },
{ type: ElemType.LINE, height: 16, widthInPercentage: 15 },
{ type: ElemType.GAP, widthInPercentage: 10 },
{ type: ElemType.LINE, height: 16 }
{ type: ElemType.circle, height: 24 },
{ type: ElemType.gap, widthInPercentage: 2 },
{ type: ElemType.line, height: 16, widthInPercentage: 20 },
{ type: ElemType.gap, widthInPercentage: 5 },
{ type: ElemType.line, height: 16, widthInPercentage: 20 },
{ type: ElemType.gap, widthInPercentage: 10 },
{ type: ElemType.line, height: 16, widthInPercentage: 15 },
{ type: ElemType.gap, widthInPercentage: 10 },
{ type: ElemType.line, height: 16 }
] }
/>
<Shimmer
width={ 70 }
lineElements={ [
{ type: ElemType.CIRCLE, height: 24 },
{ type: ElemType.GAP, widthInPercentage: 2 },
{ type: ElemType.LINE, height: 16, widthInPercentage: 20 },
{ type: ElemType.GAP, widthInPercentage: 5 },
{ type: ElemType.LINE, height: 16, widthInPercentage: 20 },
{ type: ElemType.GAP, widthInPercentage: 10 },
{ type: ElemType.LINE, height: 16, widthInPercentage: 15 },
{ type: ElemType.GAP, widthInPercentage: 10 },
{ type: ElemType.LINE, height: 16 }
{ type: ElemType.circle, height: 24 },
{ type: ElemType.gap, widthInPercentage: 2 },
{ type: ElemType.line, height: 16, widthInPercentage: 20 },
{ type: ElemType.gap, widthInPercentage: 5 },
{ type: ElemType.line, height: 16, widthInPercentage: 20 },
{ type: ElemType.gap, widthInPercentage: 10 },
{ type: ElemType.line, height: 16, widthInPercentage: 15 },
{ type: ElemType.gap, widthInPercentage: 10 },
{ type: ElemType.line, height: 16 }
] }
/>
Variations of vertical alignment for Circles and Lines.
<Shimmer
lineElements={ [
{ type: ElemType.CIRCLE },
{ type: ElemType.GAP, widthInPercentage: 2 },
{ type: ElemType.CIRCLE, height: 15, verticalAlign: ElemVerticalAlign.TOP },
{ type: ElemType.GAP, widthInPercentage: 2 },
{ type: ElemType.LINE, verticalAlign: ElemVerticalAlign.BOTTOM, widthInPercentage: 20 },
{ type: ElemType.GAP, widthInPercentage: 2 },
{ type: ElemType.LINE, height: 5, verticalAlign: ElemVerticalAlign.TOP, widthInPercentage: 20 },
{ type: ElemType.GAP, widthInPercentage: 2 },
{ type: ElemType.LINE, height: 16, widthInPercentage: 15 },
{ type: ElemType.GAP, widthInPercentage: 2 },
{ type: ElemType.LINE, height: 10, verticalAlign: ElemVerticalAlign.BOTTOM }
{ type: ElemType.circle },
{ type: ElemType.gap, widthInPercentage: 2 },
{ type: ElemType.circle, height: 15, verticalAlign: ElemVerticalAlign.top },
{ type: ElemType.gap, widthInPercentage: 2 },
{ type: ElemType.line, verticalAlign: ElemVerticalAlign.bottom, widthInPercentage: 20 },
{ type: ElemType.gap, widthInPercentage: 2 },
{ type: ElemType.line, height: 5, verticalAlign: ElemVerticalAlign.top, widthInPercentage: 20 },
{ type: ElemType.gap, widthInPercentage: 2 },
{ type: ElemType.line, height: 16, widthInPercentage: 15 },
{ type: ElemType.gap, widthInPercentage: 2 },
{ type: ElemType.line, height: 10, verticalAlign: ElemVerticalAlign.bottom }
] }
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/experiments/src/components/TilesList/examples/TilesList.Document.Example.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ export class TilesListDocumentExample extends React.Component<ITilesListDocument
{
getRenderedElements(
[
{ type: ElemType.LINE, height: HEADER_FONT_SIZE, widthInPercentage: 100 },
{ type: ElemType.line, height: HEADER_FONT_SIZE, widthInPercentage: 100 },
],
HEADER_VERTICAL_PADDING * 2 + HEADER_FONT_SIZE
)
Expand Down