From aa7008f1d7608bd071e587737d59ee9953033718 Mon Sep 17 00:00:00 2001 From: David Hu Date: Mon, 11 Nov 2019 22:18:22 -0800 Subject: [PATCH] Revert "unit props deprecation: update proptypes and interfaces + bounceloader/barLoader/beatLoader (#136)" (#137) This reverts commit 3e27ca5ea7631715d05678caf73f378295537bdc. --- __tests__/BarLoader-tests.tsx | 85 ++++++------------ __tests__/BeatLoader-tests.tsx | 80 ++++------------- __tests__/BounceLoader-tests.tsx | 61 ++++--------- .../__snapshots__/BarLoader-tests.tsx.snap | 4 +- .../__snapshots__/BeatLoader-tests.tsx.snap | 3 +- .../__snapshots__/BounceLoader-tests.tsx.snap | 3 +- __tests__/helpers/proptypes-tests.ts | 65 +++++++------- __tests__/helpers/unitConverter-tests.ts | 77 ++++++----------- docs/index.html | 2 +- examples/index.tsx | 12 +-- src/BarLoader.tsx | 12 +-- src/BeatLoader.tsx | 10 +-- src/BounceLoader.tsx | 16 ++-- src/helpers/proptypes.ts | 86 ++++++++++++------- src/helpers/unitConverter.ts | 14 +-- src/interfaces.ts | 18 ++-- tslint.json | 3 +- 17 files changed, 219 insertions(+), 332 deletions(-) diff --git a/__tests__/BarLoader-tests.tsx b/__tests__/BarLoader-tests.tsx index 0e2906b8..c2c5e625 100644 --- a/__tests__/BarLoader-tests.tsx +++ b/__tests__/BarLoader-tests.tsx @@ -46,69 +46,36 @@ describe("BarLoader", () => { expect(loader.find("div div")).toHaveStyleRule("background-color", color); }); - describe("height prop", () => { - it("should render the height with px unit when size is a number", () => { - let height: number = 10; - loader = mount(); - expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`); - expect(loader).toHaveStyleRule("height", `${height}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule( - "height", - `${defaultHeight}${defaultUnit}` - ); - expect(loader.find("div div")).toHaveStyleRule("height", `${height}${defaultUnit}`); - }); - - it("should render the height as is when height is a string with valid css unit", () => { - let height: string = "18%"; - loader = mount(); - expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`); - expect(loader).toHaveStyleRule("height", `${height}`); - expect(loader.find("div div")).not.toHaveStyleRule( - "height", - `${defaultHeight}${defaultUnit}` - ); - expect(loader.find("div div")).toHaveStyleRule("height", `${height}`); - }); - - it("should render the height with default unit of px when the unit is incorrect", () => { - let length: number = 18; - let unit: string = "ad"; - let height: string = `${length}${unit}`; - loader = mount(); - expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`); - expect(loader).toHaveStyleRule("height", `${length}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule( - "height", - `${defaultHeight}${defaultUnit}` - ); - expect(loader.find("div div")).toHaveStyleRule("height", `${length}${defaultUnit}`); - }); + it("should render the correct height based on props", () => { + let height: number = 10; + loader = mount(); + expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`); + expect(loader).toHaveStyleRule("height", `${height}${defaultUnit}`); + expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`); + expect(loader.find("div div")).toHaveStyleRule("height", `${height}${defaultUnit}`); }); - describe("width prop", () => { - it("should render the width with px unit when size is a number", () => { - let width: number = 10; - loader = mount(); - expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`); - expect(loader).toHaveStyleRule("width", `${width}${defaultUnit}`); - }); + it("should render the correct heightUnit basd on passed in props", () => { + let unit: string = "%"; + loader = mount(); + expect(loader).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`); + expect(loader).toHaveStyleRule("height", `${defaultHeight}${unit}`); + expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultHeight}${defaultUnit}`); + expect(loader.find("div div")).toHaveStyleRule("height", `${defaultHeight}${unit}`); + }); - it("should render the height as is when height is a string with valid css unit", () => { - let width: string = "18%"; - loader = mount(); - expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`); - expect(loader).toHaveStyleRule("width", `${width}`); - }); + it("should render the correct width based on props", () => { + let width: number = 10; + loader = mount(); + expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`); + expect(loader).toHaveStyleRule("width", `${width}${defaultUnit}`); + }); - it("should render the width with default unit of px when the unit is incorrect", () => { - let length: number = 18; - let unit: string = "ad"; - let width: string = `${length}${unit}`; - loader = mount(); - expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`); - expect(loader).toHaveStyleRule("width", `${length}${defaultUnit}`); - }); + it("should render the correct widthUnit basd on passed in props", () => { + let unit: string = "%"; + loader = mount(); + expect(loader).not.toHaveStyleRule("width", `${defaultWidth}${defaultUnit}`); + expect(loader).toHaveStyleRule("width", `${defaultWidth}${unit}`); }); it("should render the css override based on props", () => { diff --git a/__tests__/BeatLoader-tests.tsx b/__tests__/BeatLoader-tests.tsx index 7df2da05..001079bb 100644 --- a/__tests__/BeatLoader-tests.tsx +++ b/__tests__/BeatLoader-tests.tsx @@ -12,7 +12,6 @@ describe("BeatLoader", () => { let props: LoaderSizeMarginProps; let defaultColor: string = "#000000"; let defaultSize: number = 15; - let defaultMargin: number = 2; let defaultUnit: string = "px"; it("should match snapshot", () => { @@ -44,69 +43,28 @@ describe("BeatLoader", () => { expect(loader.find("div div")).toHaveStyleRule("background-color", "#e2e2e2"); }); - describe("size prop", () => { - it("should render the size with px unit when size is a number", () => { - let size: number = 18; - loader = mount(); - expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).toHaveStyleRule("height", `${size}${defaultUnit}`); - expect(loader.find("div div")).toHaveStyleRule("width", `${size}${defaultUnit}`); - }); - - it("should render the size as is when size is a string with valid css unit", () => { - let size: string = "18px"; - loader = mount(); - expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).toHaveStyleRule("height", `${size}`); - expect(loader.find("div div")).toHaveStyleRule("width", `${size}`); - }); - - it("should render the size with default unit of px when the unit is incorrect", () => { - let length: number = 18; - let unit: string = "ad"; - let size: string = `${length}${unit}`; - loader = mount(); - expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).toHaveStyleRule("height", `${length}${defaultUnit}`); - expect(loader.find("div div")).toHaveStyleRule("width", `${length}${defaultUnit}`); - }); + it("should render the correct size based on props", () => { + let size: number = 18; + loader = mount(); + expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); + expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); + expect(loader.find("div div")).toHaveStyleRule("height", `${size}${defaultUnit}`); + expect(loader.find("div div")).toHaveStyleRule("width", `${size}${defaultUnit}`); }); - describe("margin prop", () => { - it("should render the margin with px unit when margin is a number", () => { - let margin: number = 18; - loader = mount(); - expect(loader.find("div div")).not.toHaveStyleRule( - "margin", - `${defaultMargin}${defaultUnit}` - ); - expect(loader.find("div div")).toHaveStyleRule("margin", `${margin}${defaultUnit}`); - }); - - it("should render the margin as is when margin is a string with valid css unit", () => { - let margin: string = "18px"; - loader = mount(); - expect(loader.find("div div")).not.toHaveStyleRule( - "margin", - `${defaultMargin}${defaultUnit}` - ); - expect(loader.find("div div")).toHaveStyleRule("margin", `${margin}`); - }); + it("should render the correct heightUnit basd on props", () => { + let unit: string = "%"; + loader = mount(); + expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); + expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); + expect(loader.find("div div")).toHaveStyleRule("height", `${defaultSize}${unit}`); + expect(loader.find("div div")).toHaveStyleRule("width", `${defaultSize}${unit}`); + }); - it("should render the margin with default unit of px when the unit is incorrect", () => { - let length: number = 18; - let unit: string = "ad"; - let margin: string = `${length}${unit}`; - loader = mount(); - expect(loader.find("div div")).not.toHaveStyleRule( - "margin", - `${defaultMargin}${defaultUnit}` - ); - expect(loader.find("div div")).toHaveStyleRule("margin", `${length}${defaultUnit}`); - }); + it("should render the correct margin props based on props", () => { + loader = mount(); + expect(loader.find("div div")).not.toHaveStyleRule("margin", "2px"); + expect(loader.find("div div")).toHaveStyleRule("margin", "4%"); }); it("should render the css override based on props", () => { diff --git a/__tests__/BounceLoader-tests.tsx b/__tests__/BounceLoader-tests.tsx index 02aea596..865cf38b 100644 --- a/__tests__/BounceLoader-tests.tsx +++ b/__tests__/BounceLoader-tests.tsx @@ -44,50 +44,27 @@ describe("BounceLoader", () => { expect(loader.find("div div")).toHaveStyleRule("background-color", color); }); - describe("size prop", () => { - it("should render the size with px unit when size is a number", () => { - let size: number = 18; - loader = mount(); - expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); - expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); + it("should render the correct size based on props", () => { + let size: number = 18; + loader = mount(); + expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); + expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); + expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); + expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); - expect(loader).toHaveStyleRule("height", `${size}${defaultUnit}`); - expect(loader).toHaveStyleRule("width", `${size}${defaultUnit}`); - expect(loader.find("div div")).toHaveStyleRule("height", `${size}${defaultUnit}`); - expect(loader.find("div div")).toHaveStyleRule("width", `${size}${defaultUnit}`); - }); - - it("should render the size as is when size is a string with valid css unit", () => { - let size: string = "18px"; - loader = mount(); - expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); - expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); - - expect(loader).toHaveStyleRule("height", `${size}`); - expect(loader).toHaveStyleRule("width", `${size}`); - expect(loader.find("div div")).toHaveStyleRule("height", `${size}`); - expect(loader.find("div div")).toHaveStyleRule("width", `${size}`); - }); - - it("should render the size with default unit of px when the unit is incorrect", () => { - let length: number = 18; - let unit: string = "ad"; - let size: string = `${length}${unit}`; - loader = mount(); - expect(loader).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); - expect(loader).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); - expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); + expect(loader).toHaveStyleRule("height", `${size}${defaultUnit}`); + expect(loader).toHaveStyleRule("width", `${size}${defaultUnit}`); + expect(loader.find("div div")).toHaveStyleRule("height", `${size}${defaultUnit}`); + expect(loader.find("div div")).toHaveStyleRule("width", `${size}${defaultUnit}`); + }); - expect(loader).toHaveStyleRule("height", `${length}${defaultUnit}`); - expect(loader).toHaveStyleRule("width", `${length}${defaultUnit}`); - expect(loader.find("div div")).toHaveStyleRule("height", `${length}${defaultUnit}`); - expect(loader.find("div div")).toHaveStyleRule("width", `${length}${defaultUnit}`); - }); + it("should render the correct sizeUnit based on props", () => { + let unit: string = "%"; + loader = mount(); + expect(loader.find("div div")).not.toHaveStyleRule("height", `${defaultSize}${defaultUnit}`); + expect(loader.find("div div")).not.toHaveStyleRule("width", `${defaultSize}${defaultUnit}`); + expect(loader.find("div div")).toHaveStyleRule("height", `${defaultSize}${unit}`); + expect(loader.find("div div")).toHaveStyleRule("width", `${defaultSize}${unit}`); }); it("should render the css override based on props", () => { diff --git a/__tests__/__snapshots__/BarLoader-tests.tsx.snap b/__tests__/__snapshots__/BarLoader-tests.tsx.snap index bd9e9682..fc3c3e1b 100644 --- a/__tests__/__snapshots__/BarLoader-tests.tsx.snap +++ b/__tests__/__snapshots__/BarLoader-tests.tsx.snap @@ -76,10 +76,12 @@ exports[`BarLoader should match snapshot 1`] = `
{ describe("sizeDefaults", () => { @@ -18,21 +13,23 @@ describe("Default Props functions for different loaders", () => { }); it("should return an object containing the common props: loading, color, css", () => { - let defaultProps: Required = sizeDefaults(1); + let defaultProps: DefaultProps = sizeDefaults(1); expect(defaultProps).toHaveProperty("loading"); expect(defaultProps.loading).toEqual(true); expect(defaultProps).toHaveProperty("color"); expect(defaultProps.color).toEqual("#000000"); expect(defaultProps).toHaveProperty("css"); - expect(defaultProps.css).toEqual(""); + expect(defaultProps.css).toEqual({}); }); it("should return the size as the passed in size value", () => { - let defaultProps1: Required = sizeDefaults(1); + let defaultProps1: DefaultProps = sizeDefaults(1); expect(defaultProps1).toHaveProperty("size"); expect(defaultProps1.size).toEqual(1); + expect(defaultProps1).toHaveProperty("sizeUnit"); + expect(defaultProps1.sizeUnit).toEqual("px"); - let defaultProps2: Required = sizeDefaults(2); + let defaultProps2: DefaultProps = sizeDefaults(2); expect(defaultProps2).toHaveProperty("size"); expect(defaultProps2.size).toEqual(2); }); @@ -44,23 +41,25 @@ describe("Default Props functions for different loaders", () => { }); it("should return an object containing the common props: loading, color, css", () => { - let defaultProps: Required = sizeMarginDefaults(1); + let defaultProps: DefaultProps = sizeMarginDefaults(1); expect(defaultProps).toHaveProperty("loading"); expect(defaultProps.loading).toEqual(true); expect(defaultProps).toHaveProperty("color"); expect(defaultProps.color).toEqual("#000000"); expect(defaultProps).toHaveProperty("css"); - expect(defaultProps.css).toEqual(""); + expect(defaultProps.css).toEqual({}); }); it("should return the size as the passed in size value", () => { - let defaultProps1: Required = sizeMarginDefaults(1); + let defaultProps1: DefaultProps = sizeMarginDefaults(1); expect(defaultProps1).toHaveProperty("size"); expect(defaultProps1.size).toEqual(1); + expect(defaultProps1).toHaveProperty("sizeUnit"); + expect(defaultProps1.sizeUnit).toEqual("px"); expect(defaultProps1).toHaveProperty("margin"); expect(defaultProps1.margin).toEqual("2px"); - let defaultProps2: Required = sizeMarginDefaults(2); + let defaultProps2: DefaultProps = sizeMarginDefaults(2); expect(defaultProps2).toHaveProperty("size"); expect(defaultProps2.size).toEqual(2); }); @@ -72,23 +71,27 @@ describe("Default Props functions for different loaders", () => { }); it("should return an object containing the common props: loading, color, css", () => { - let defaultProps: Required = heightWidthDefaults(1, 1); + let defaultProps: DefaultProps = heightWidthDefaults(1, 1); expect(defaultProps).toHaveProperty("loading"); expect(defaultProps.loading).toEqual(true); expect(defaultProps).toHaveProperty("color"); expect(defaultProps.color).toEqual("#000000"); expect(defaultProps).toHaveProperty("css"); - expect(defaultProps.css).toEqual(""); + expect(defaultProps.css).toEqual({}); }); it("should return the height/width as the passed in height/width value", () => { - let defaultProps1: Required = heightWidthDefaults(1, 2); + let defaultProps1: DefaultProps = heightWidthDefaults(1, 2); expect(defaultProps1).toHaveProperty("height"); expect(defaultProps1.height).toEqual(1); expect(defaultProps1).toHaveProperty("width"); expect(defaultProps1.width).toEqual(2); + expect(defaultProps1).toHaveProperty("heightUnit"); + expect(defaultProps1.heightUnit).toEqual("px"); + expect(defaultProps1).toHaveProperty("widthUnit"); + expect(defaultProps1.widthUnit).toEqual("px"); - let defaultProps2: Required = heightWidthDefaults(3, 4); + let defaultProps2: DefaultProps = heightWidthDefaults(3, 4); expect(defaultProps2).toHaveProperty("height"); expect(defaultProps2.height).toEqual(3); expect(defaultProps2).toHaveProperty("width"); @@ -102,33 +105,31 @@ describe("Default Props functions for different loaders", () => { }); it("should return an object containing the common props: loading, color, css", () => { - let defaultProps: Required = heightWidthRadiusDefaults(1, 1, 1); + let defaultProps: DefaultProps = heightWidthRadiusDefaults(1, 1, 1); expect(defaultProps).toHaveProperty("loading"); expect(defaultProps.loading).toEqual(true); expect(defaultProps).toHaveProperty("color"); expect(defaultProps.color).toEqual("#000000"); expect(defaultProps).toHaveProperty("css"); - expect(defaultProps.css).toEqual(""); + expect(defaultProps.css).toEqual({}); }); it("should return the height/width as the passed in height/width value", () => { - let defaultProps1: Required = heightWidthRadiusDefaults( - 1, - 2, - 3 - ); + let defaultProps1: DefaultProps = heightWidthRadiusDefaults(1, 2, 3); expect(defaultProps1).toHaveProperty("height"); expect(defaultProps1.height).toEqual(1); expect(defaultProps1).toHaveProperty("width"); expect(defaultProps1.width).toEqual(2); expect(defaultProps1).toHaveProperty("radius"); expect(defaultProps1.radius).toEqual(3); - - let defaultProps2: Required = heightWidthRadiusDefaults( - 4, - 5, - 6 - ); + expect(defaultProps1).toHaveProperty("heightUnit"); + expect(defaultProps1.heightUnit).toEqual("px"); + expect(defaultProps1).toHaveProperty("widthUnit"); + expect(defaultProps1.widthUnit).toEqual("px"); + expect(defaultProps1).toHaveProperty("radiusUnit"); + expect(defaultProps1.widthUnit).toEqual("px"); + + let defaultProps2: DefaultProps = heightWidthRadiusDefaults(4, 5, 6); expect(defaultProps2).toHaveProperty("height"); expect(defaultProps2.height).toEqual(4); expect(defaultProps2).toHaveProperty("width"); @@ -138,7 +139,7 @@ describe("Default Props functions for different loaders", () => { }); it("radius value should default to 2", () => { - let defaultProps: Required = heightWidthRadiusDefaults(5, 6); + let defaultProps: DefaultProps = heightWidthRadiusDefaults(5, 6); expect(defaultProps.radius).toEqual(2); }); }); diff --git a/__tests__/helpers/unitConverter-tests.ts b/__tests__/helpers/unitConverter-tests.ts index ce3c7309..932bc8c6 100644 --- a/__tests__/helpers/unitConverter-tests.ts +++ b/__tests__/helpers/unitConverter-tests.ts @@ -1,59 +1,38 @@ -import { parseLengthAndUnit, cssValue } from "../../src/helpers"; +import { unitConverter } from "../../src/helpers"; import { LengthObject } from "../../src/interfaces"; describe("unitConverter", () => { - describe("parseLengthAndUnit", () => { - let spy: jest.SpyInstance = jest.spyOn(console, "warn"); - let output: LengthObject = { - value: 12, - unit: "px" - }; - - it("is a function", () => { - expect(typeof parseLengthAndUnit).toEqual("function"); - }); - - it("takes a number as the input and append px to the value", () => { - expect(parseLengthAndUnit(12)).toEqual(output); - expect(spy).not.toBeCalled(); - }); - - it("take a string with valid integer css unit and return an object with value and unit", () => { - expect(parseLengthAndUnit("12px")).toEqual(output); - expect(spy).not.toBeCalled(); - }); - - it("take a string with valid css float unit and return an object with value and unit", () => { - let output: LengthObject = { - value: 12.5, - unit: "px" - }; - expect(parseLengthAndUnit("12.5px")).toEqual(output); - expect(spy).not.toBeCalled(); - }); - - it("takes an invalid css unit and default the value to px", () => { - expect(parseLengthAndUnit("12fd")).toEqual(output); - expect(spy).toBeCalled(); - }); + let spy: jest.SpyInstance = jest.spyOn(console, "warn"); + let output: LengthObject = { + value: 12, + unit: "px" + }; + + it("is a function", () => { + expect(typeof unitConverter).toEqual("function"); }); - describe("cssValue", () => { - it("is a function", () => { - expect(typeof cssValue).toEqual("function"); - }); + it("takes a number as the input and append px to the value", () => { + expect(unitConverter(12)).toEqual(output); + expect(spy).not.toBeCalled(); + }); - it("takes a number as the input and append px to the value", () => { - expect(cssValue(12)).toEqual("12px"); - }); + it("take a string with valid integer css unit and return an object with value and unit", () => { + expect(unitConverter("12px")).toEqual(output); + expect(spy).not.toBeCalled(); + }); - it("takes a string with valid css unit as the input and return the value", () => { - expect(cssValue("12%")).toEqual("12%"); - expect(cssValue("12em")).toEqual("12em"); - }); + it("take a string with valid css float unit and return an object with value and unit", () => { + let output: LengthObject = { + value: 12.5, + unit: "px" + }; + expect(unitConverter("12.5px")).toEqual(output); + expect(spy).not.toBeCalled(); + }); - it("takes a string with invalid css unit as the input and default to px", () => { - expect(cssValue("12qw")).toEqual("12px"); - }); + it("takes an invalid css unit and default the value to px", () => { + expect(unitConverter("12fd")).toEqual(output); + expect(spy).toBeCalled(); }); }); diff --git a/docs/index.html b/docs/index.html index 6a107e4b..89e5b1b2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -37,7 +37,7 @@ ga('send', 'pageview'); - +
- - - {/* {Object.keys(Spinners).map((name: string) => ( + {Object.keys(Spinners).map((name: string) => ( - ))} */} + ))}
); } diff --git a/src/BarLoader.tsx b/src/BarLoader.tsx index d019d4e6..69514d4d 100644 --- a/src/BarLoader.tsx +++ b/src/BarLoader.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { keyframes, css, jsx } from "@emotion/core"; import { Keyframes } from "@emotion/serialize"; -import { calculateRgba, heightWidthDefaults, cssValue } from "./helpers"; +import { calculateRgba, heightWidthDefaults } from "./helpers"; import { LoaderHeightWidthProps, StyleFunction, @@ -27,11 +27,11 @@ export class Loader extends React.PureComponent { public static defaultProps: LoaderHeightWidthProps = heightWidthDefaults(4, 100); public style: StyleFunctionWithIndex = (i: number): PrecompiledCss => { - const { height, color } = this.props; + const { height, color, heightUnit } = this.props; return css` position: absolute; - height: ${cssValue(height!)}; + height: ${`${height}${heightUnit}`}; overflow: hidden; background-color: ${color}; background-clip: padding-box; @@ -48,12 +48,12 @@ export class Loader extends React.PureComponent { }; public wrapper: StyleFunction = (): PrecompiledCss => { - const { width, height, color } = this.props; + const { width, height, color, heightUnit, widthUnit } = this.props; return css` position: relative; - width: ${cssValue(width!)}; - height: ${cssValue(height!)}; + width: ${`${width}${widthUnit}`}; + height: ${`${height}${heightUnit}`}; overflow: hidden; background-color: ${calculateRgba(color!, 0.2)}; background-clip: padding-box; diff --git a/src/BeatLoader.tsx b/src/BeatLoader.tsx index bb736cbe..c34d6960 100644 --- a/src/BeatLoader.tsx +++ b/src/BeatLoader.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { keyframes, css, jsx } from "@emotion/core"; import { Keyframes } from "@emotion/serialize"; -import { sizeMarginDefaults, cssValue } from "./helpers"; +import { sizeMarginDefaults } from "./helpers"; import { LoaderSizeMarginProps, PrecompiledCss, StyleFunctionWithIndex } from "./interfaces"; const beat: Keyframes = keyframes` @@ -14,14 +14,14 @@ const beat: Keyframes = keyframes` class Loader extends React.PureComponent { public static defaultProps: LoaderSizeMarginProps = sizeMarginDefaults(15); public style: StyleFunctionWithIndex = (i: number): PrecompiledCss => { - const { color, size, margin } = this.props; + const { color, size, sizeUnit, margin } = this.props; return css` display: inline-block; background-color: ${color}; - width: ${cssValue(size!)}; - height: ${cssValue(size!)}; - margin: ${cssValue(margin!)}; + width: ${`${size}${sizeUnit}`}; + height: ${`${size}${sizeUnit}`}; + margin: ${margin}; border-radius: 100%; animation: ${beat} 0.7s ${i % 2 ? "0s" : "0.35s"} infinite linear; animation-fill-mode: both; diff --git a/src/BounceLoader.tsx b/src/BounceLoader.tsx index 5e69e3c8..9180df38 100644 --- a/src/BounceLoader.tsx +++ b/src/BounceLoader.tsx @@ -3,7 +3,7 @@ import * as React from "react"; import { keyframes, css, jsx } from "@emotion/core"; import { Keyframes } from "@emotion/serialize"; -import { sizeDefaults, cssValue } from "./helpers"; +import { sizeDefaults } from "./helpers"; import { StyleFunction, PrecompiledCss, @@ -17,15 +17,15 @@ const bounce: Keyframes = keyframes` `; class Loader extends React.PureComponent { - public static defaultProps: Required = sizeDefaults(60); + public static defaultProps: LoaderSizeProps = sizeDefaults(60); public style: StyleFunctionWithIndex = (i: number): PrecompiledCss => { - const { color, size } = this.props; + const { size, color, sizeUnit } = this.props; return css` position: absolute; - height: ${cssValue(size!)}; - width: ${cssValue(size!)}; + height: ${`${size}${sizeUnit}`}; + width: ${`${size}${sizeUnit}`}; background-color: ${color}; border-radius: 100%; opacity: 0.6; @@ -37,12 +37,12 @@ class Loader extends React.PureComponent { }; public wrapper: StyleFunction = (): PrecompiledCss => { - const { size } = this.props; + const { size, sizeUnit } = this.props; return css` position: relative; - width: ${cssValue(size!)}; - height: ${cssValue(size!)}; + width: ${`${size}${sizeUnit}`}; + height: ${`${size}${sizeUnit}`}; `; }; diff --git a/src/helpers/proptypes.ts b/src/helpers/proptypes.ts index c53b8134..fedb3400 100644 --- a/src/helpers/proptypes.ts +++ b/src/helpers/proptypes.ts @@ -1,54 +1,74 @@ -import { - LoaderHeightWidthProps, - LoaderSizeProps, - PrecompiledCss, - LoaderSizeMarginProps, - LoaderHeightWidthRadiusProps -} from "../interfaces"; +/* + * List of string constants to represent different props + */ +const LOADING: string = "loading"; +const COLOR: string = "color"; +const CSS: string = "css"; +const SIZE: string = "size"; +const SIZE_UNIT: string = "sizeUnit"; +const WIDTH: string = "width"; +const WIDTH_UNIT: string = "widthUnit"; +const HEIGHT: string = "height"; +const HEIGHT_UNIT: string = "heightUnit"; +const RADIUS: string = "radius"; +const RADIUS_UNIT: string = "radiusUnit"; +const MARGIN: string = "margin"; /* * DefaultProps object for different loaders */ -interface CommonDefaults { - loading: boolean; - color: string; - css: string | PrecompiledCss; +export interface DefaultProps { + [key: string]: boolean | string | {} | number; } -const commonValues: CommonDefaults = { - loading: true, - color: "#000000", - css: "" +type HeightWidthFunction = (height: number, width: number) => DefaultProps; +type HeightWidthRadiusFunction = (height: number, width: number, radius?: number) => DefaultProps; +type SizeFunction = (size: number) => DefaultProps; + +const commonValues: DefaultProps = { + [LOADING]: true, + [COLOR]: "#000000", + [CSS]: {} }; -export function sizeDefaults(sizeValue: number): Required { - return Object.assign({}, commonValues, { size: sizeValue }); -} +const heightWidthValues: HeightWidthFunction = (height: number, width: number): DefaultProps => ({ + [HEIGHT]: height, + [HEIGHT_UNIT]: "px", + [WIDTH]: width, + [WIDTH_UNIT]: "px" +}); + +const sizeValues: SizeFunction = (sizeValue: number): DefaultProps => ({ + [SIZE]: sizeValue, + [SIZE_UNIT]: "px" +}); + +export const sizeDefaults: SizeFunction = (sizeValue: number): DefaultProps => { + return Object.assign({}, commonValues, sizeValues(sizeValue)); +}; -export function sizeMarginDefaults(sizeValue: number): Required { +export const sizeMarginDefaults: SizeFunction = (sizeValue: number): DefaultProps => { return Object.assign({}, sizeDefaults(sizeValue), { - margin: "2px" + [MARGIN]: "2px" }); -} +}; -export function heightWidthDefaults( +export const heightWidthDefaults: HeightWidthFunction = ( height: number, width: number -): Required { - return Object.assign({}, commonValues, { - height, - width - }); -} +): DefaultProps => { + return Object.assign({}, commonValues, heightWidthValues(height, width)); +}; -export function heightWidthRadiusDefaults( +export const heightWidthRadiusDefaults: HeightWidthRadiusFunction = ( height: number, width: number, radius: number = 2 -): Required { +): DefaultProps => { return Object.assign({}, heightWidthDefaults(height, width), { - radius, - margin: "2px" + [RADIUS]: radius, + [RADIUS_UNIT]: "px", + [MARGIN]: "2px" }); -} +}; diff --git a/src/helpers/unitConverter.ts b/src/helpers/unitConverter.ts index de24e2ba..88dc3b01 100644 --- a/src/helpers/unitConverter.ts +++ b/src/helpers/unitConverter.ts @@ -27,7 +27,7 @@ const cssUnit: { [unit: string]: boolean } = { * @param {(number | string)} size * @return {LengthObject} LengthObject */ -export function parseLengthAndUnit(size: number | string): LengthObject { +export function unitConverter(size: number | string): LengthObject { if (typeof size === "number") { return { value: size, @@ -58,15 +58,3 @@ export function parseLengthAndUnit(size: number | string): LengthObject { unit: "px" }; } - -/** - * Take value as an input and return valid css value - * - * @param {(number | string)} value - * @return {string} valid css value - */ -export function cssValue(value: number | string): string { - let lengthWithunit: LengthObject = parseLengthAndUnit(value!); - - return `${lengthWithunit.value}${lengthWithunit.unit}`; -} diff --git a/src/interfaces.ts b/src/interfaces.ts index a6a348b8..73dce1d7 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -20,22 +20,24 @@ interface CommonProps { css?: string | PrecompiledCss; } -type LengthType = number | string; - export interface LoaderHeightWidthProps extends CommonProps { - height?: LengthType; - width?: LengthType; + height?: number; + heightUnit?: string; + width?: number; + widthUnit?: string; } export interface LoaderSizeProps extends CommonProps { - size?: LengthType; + size?: number; + sizeUnit?: string; } export interface LoaderSizeMarginProps extends LoaderSizeProps { - margin?: LengthType; + margin?: string; } export interface LoaderHeightWidthRadiusProps extends LoaderHeightWidthProps { - margin?: LengthType; - radius?: LengthType; + margin?: string; + radius?: number; + radiusUnit?: string; } diff --git a/tslint.json b/tslint.json index c9a803f2..2362d1a0 100644 --- a/tslint.json +++ b/tslint.json @@ -67,8 +67,7 @@ "variable-declaration", "member-variable-declaration" ], - "semicolon": false, - "object-literal-key-quotes": false + "semicolon": false }, "rulesDirectory": [] }