From fb2a1b87e7d70e62062c70ec4dab98a7b01440a1 Mon Sep 17 00:00:00 2001 From: Svampson Date: Sun, 29 Apr 2018 13:00:40 +0200 Subject: [PATCH 1/2] Added style and contentStyle property --- README.md | 18 ++++++++++++------ demo.html | 8 +++++++- src/index.jsx | 23 +++++++++++++++++++++-- 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 3ecf224..efa1189 100644 --- a/README.md +++ b/README.md @@ -28,17 +28,23 @@ The component is pretty simple at present (although I expect it will accumulate Content goes here ``` -There is one optional property, `velocity`, which sets the movement velocity (in CSS pixels per millisecond). It defaults to 0.12, which seems a reasonably sensible value for most applications. +## Properties -The component expects two CSS classes to be defined, but does not include any definitions itself (in order to allow for highest flexibility). These are: +### velocity -## `.Marquee` +Sets the movement velocity (in CSS pixels per millisecond). It defaults to 0.12, which seems a reasonably sensible value for most applications. -This sets styles on the container, i.e. the outer element whose position remains static. It should usually have `display: block` +### style + +This sets styles on the container, i.e. the outer element whose position remains static. It should usually have `display: block` (although as a `
` element is used this is the default) and for correct function must have `overflow-x: hidden`. -## `.MarqueeContent` +You can also style the container by targeting the class `.Marquee` instead of using this property. + +### contentStyle -This sets styles on the child that is moved within the container. In order to allow correct calculation of when the element is +This sets styles on the child that is moved within the container. In order to allow correct calculation of when the element is moved from the left hand edge of the display back to the right, it should usually be set up either with `display: block` and an explicit width, or with `display: inline-block` so that width can be calculated from its contents. + +You can also style the content by targeting the class `.MarqueeContent` instead of using this property. diff --git a/demo.html b/demo.html index 85f1cd1..6b0092d 100644 --- a/demo.html +++ b/demo.html @@ -25,6 +25,12 @@ return (
A marquee with default options. Dolor sit amet consectetuer adipiscing elit. + + A marquee with style and contentStyle properties set. Dolor sit amet consectetuer adipiscing elit. +
); } @@ -36,7 +42,7 @@ diff --git a/src/index.jsx b/src/index.jsx index 09515d0..69ed219 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -64,11 +64,30 @@ export default class Marquee extends React.Component { return this.props.velocity ? this.props.velocity : 0.12; } + + getStyle () + { + return this.props.style ? this.props.style : null; + } + + getContentStyle () + { + const transform = { transform: this.calculateTransform() }; + const { contentStyle } = this.props; + + if (contentStyle) + return Object.assign({}, transform, contentStyle) + else + return transform + } + render () { return ( -
-
{this.props.children}
+
+
+ {this.props.children} +
); } From 8a3149970e5205604f251f7f8c58d2f72885c87d Mon Sep 17 00:00:00 2001 From: Svampson Date: Sun, 29 Apr 2018 14:25:49 +0200 Subject: [PATCH 2/2] Removed invalid (and unused) property from div --- src/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.jsx b/src/index.jsx index 69ed219..5b9996f 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -85,7 +85,7 @@ export default class Marquee extends React.Component { return (
-
+
{this.props.children}