Props will be handed to <Element> (#24)

* [untested] Props will be handed to <Element>

* Added tests for hand-down of props to element

Co-authored-by: Michael Lohmann <[email protected]>

Author: miallo

source/helpers.jsx

@@ -16,3 +16,14 @@ export function addToDate(date, add) {
 export function subtractFromDate(date, subtract) {
     return Object.keys(subtract).reduce((updatedDate, key) => updatedDate.subtract(subtract[key], key), date)
 }
+
+// from https://github.com/headzoo/react-moment/blob/240ee62cb969f341e9e081ca6fa94d85312b8ede/src/objects.js#L26-L34
+export function objectKeyFilter(obj1, obj2) {
+    const obj2Keys = Object.keys(obj2)
+    const newProps = Object.assign({}, obj1)
+    Object.keys(newProps)
+        .filter(key => obj2Keys.indexOf(key) !== -1)
+        .forEach(key => delete newProps[key])
+
+    return newProps
+}

source/index.jsx

@@ -7,8 +7,30 @@ import {
     addToDate,
     generateInitialDate,
     subtractFromDate,
+    objectKeyFilter
 } from "./helpers"
 
+const propTypes = {
+    element: PropTypes.any,
+    date: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.array,
+        PropTypes.object,
+    ]),
+    format: PropTypes.string,
+    toJSON: PropTypes.bool,
+    toISOString: PropTypes.bool,
+    asString: PropTypes.bool,
+    unixSeconds: PropTypes.bool,
+    unixMilliseconds: PropTypes.bool,
+    daysInMonth: PropTypes.bool,
+    displayIsValid: PropTypes.bool,
+    add: PropTypes.object,
+    subtract: PropTypes.object,
+    children: PropTypes.string,
+}
+
 const DayJS = (props) => {
     const [state, setState] = useState({
         value: "",
@@ -106,30 +128,15 @@ const DayJS = (props) => {
         update(props)
     }, [])
 
-    const Element = props.element
-    return <Element>{state.value}</Element>
+    const elementProps = objectKeyFilter(props, propTypes)
+    return React.createElement(
+        props.element,
+        elementProps,
+        state.value
+    )
 }
 
-DayJS.propTypes = {
-    element: PropTypes.any,
-    date: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number,
-        PropTypes.array,
-        PropTypes.object,
-    ]),
-    format: PropTypes.string,
-    toJSON: PropTypes.bool,
-    toISOString: PropTypes.bool,
-    asString: PropTypes.bool,
-    unixSeconds: PropTypes.bool,
-    unixMilliseconds: PropTypes.bool,
-    daysInMonth: PropTypes.bool,
-    displayIsValid: PropTypes.bool,
-    add: PropTypes.object,
-    subtract: PropTypes.object,
-    children: PropTypes.string,
-}
+DayJS.propTypes = propTypes
 
 DayJS.defaultProps = {
     element: "time",

test/index.test.jsx

@@ -53,6 +53,21 @@ describe("react-dayjs element", () => {
         const { container } = render(<DayJS date={ DATE_STRING } element="span"/>)
         expect(container.firstChild.tagName).toEqual("SPAN")
     })
+
+    it("className should be handed to element", () => {
+        const { container } = render(<DayJS
+            date={ DATE_STRING }
+            className="myClassName"/>)
+        expect(container.firstChild.className).toEqual("myClassName")
+    })
+
+    it("style should be handed to element", () => {
+        const { container } = render(<DayJS
+            date={ DATE_STRING }
+            style={ { fontSize: 30 } }
+            element="h1"/>)
+        expect(container.firstChild.style._values).toEqual({ "font-size": "30px" })
+    })
 })
 
 describe("react-dayjs manipulation", () => {