@adactive/arc-clock - npm Package Compare versions

Comparing version 0.0.2-y.44.19 to 0.0.2-y.44.20

package.json

 {
   "name": "@adactive/arc-clock",
-  "version": "0.0.2-y.44.19",
+  "version": "0.0.2-y.44.20",
   "description": "Adsum Clock Component",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # Clock component
 
+The clock component is, in reality, a wrapper function, which wraps the component, which you supply and provides all the props you need to create your own look and feel for the clock :)
+
 ![image](https://user-images.githubusercontent.com/6003532/39854315-ce02252c-5459-11e8-826a-f59717fbff0f.png)
@@ -20,3 +22,19 @@
      ...
-    <AdsumClock lang="en" timeFormat="12hrs" />
+    // Your own stateless UI component for the clock
+    // You will be provided with props, which are described below
+    const ClockUi = (props) => (
+        <div role="presentation" className="adsum-clock-wrapper">
+            <div className="adsum-clock">
+                <div className="day-date">{props.dateStr}</div>
+                <div className="time">{props.timeStr}</div>
+            </div>
+        </div>
+    );
+
+
+    // The actual wrapping of your component with AdsumClock wrapper
+    const Clock = AdsumClock(ClockUi);
+
+    // Usage of the wrapped component
+    <Clock lang="en" timeFormat="12hrs" />
 ```
@@ -27,22 +45,39 @@
 ```javascript
-AdsumClock.propTypes = {
-    lang: PropTypes.string.isRequired,
-    timeFormat: PropTypes.string.isRequired,
-    style: PropTypes.objectOf(PropTypes.string)
-};
-
-AdsumClock.defaultProps = {
+static defaultProps = {
     lang: 'en',
     timeFormat: '24hrs',
-    style: null
 };
+
+type AdsumClockPropsType = {
+    lang: LangType,
+    timeFormat: TimeFormatType
+};
 ```
 
+### Additional props, which will be passed to the provided ClockUi component:
+
 ```javascript
-lang : "en" | "fr" | "zh"
-timeFormat : "24hrs" | "12hrs"
-style : Css react object
+
+{
+    +year: string,
+    +month: string,
+    +day: string,
+    +hours: string,
+    +minutes: string,
+    +dateStr: string,
+    +timeStr: string
+};
+
 ```
 
+```javascript
+type LangType = 'en' | 'zh' | 'fr';
+type TimeFormatType = '24hrs' | '12hrs';
+type AdsumClockPropsType = {
+    lang: LangType,
+    timeFormat: TimeFormatType
+};
+```
 
+
 ## Copy component inside your project src folder  
@@ -54,2 +89,2 @@
 ### Full copy
-    `npx @adactive/arc-clock copy`
+    `npx @adactive/arc-clock copy`

src/AdsumClock.js

@@ -1,112 +0,130 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+// @flow
+
+import * as React from 'react';
+import type { ComponentType } from 'react';
+
 import translate from './adsumClock.lang.json';
-import './adsumClock.css';
 
-class AdsumClock extends Component {
-    constructor(props) {
-        super(props);
+type LangType = 'en' | 'zh' | 'fr';
+type TimeFormatType = '24hrs' | '12hrs';
+type AdsumClockPropsType = {
+    lang: LangType,
+    timeFormat: TimeFormatType
+};
+type StateType = {
+    +year: string,
+    +month: string,
+    +day: string,
+    +hours: string,
+    +minutes: string,
+    +dateStr: string,
+    +timeStr: string
+};
+type ClockUIPropsType = AdsumClockPropsType & StateType;
 
-        this.state = {
-            date: '',
-            time: ''
+function ClockCreator<T: ComponentType<ClockUIPropsType>>(ClockUI: T): Element<typeof AdsumClock> {
+    return class AdsumClock extends React.Component<AdsumClockPropsType, StateType> {
+        static defaultProps = {
+            lang: 'en',
+            timeFormat: '24hrs',
         };
 
-        this.getTime = this.getTime.bind(this);
-    }
+        constructor(props: AdsumClockPropsType) {
+            super(props);
 
-    /**
-     * Clock calls for update every sec
-     */
-    componentDidMount() {
-        this.timerID = setInterval(
-            () => this.getTime(),
-            1000
-        );
-    }
+            this.getTime = this.getTime.bind(this);
+        }
 
-    /**
-     * Removing interval
-     */
-    componentWillUnmount() {
-        clearInterval(this.timerID);
-    }
+        timerID: IntervalId;
+        state = {
+            year: '',
+            month: '',
+            day: '',
+            hours: '',
+            minutes: '',
+            dateStr: '',
+            timeStr: ''
+        };
 
-    getTime() {
-        const { timeFormat } = this.props;
-        let { lang } = this.props;
+        /**
+         * Clock calls for update every sec
+         */
+        componentDidMount() {
+            this.timerID = setInterval(
+                (): void => this.getTime(),
+                1000
+            );
+        }
 
-        if(Object.keys(translate).indexOf(lang) === -1) {
-            console.warn(`AdsumClock does not support language: ${lang}, goes to default ${AdsumClock.defaultProps.lang}`);
-            lang = AdsumClock.defaultProps.lang;
+        /**
+         * Removing interval
+         */
+        componentWillUnmount() {
+            clearInterval(this.timerID);
         }
 
-        const time = new Date();
-        const day = translate[lang].days[time.getDay()];
+        getTime() {
+            const { timeFormat } = this.props;
+            let { lang } = this.props;
 
-        const date = (time.getDate().toString().length === 1) ? `0${time.getDate()}${translate[lang].date}` : `${time.getDate()}${translate[lang].date}`;
-        const month = (lang === 'zh') ? `${time.getMonth() + 1}${translate[lang].month}` : translate[lang].month[time.getMonth()];
-        const year = `${time.getFullYear()}${translate[lang].year}`;
+            if (Object.keys(translate).indexOf(lang) === -1) {
+                console.warn(`AdsumClock does not support language: ${lang}, goes to default ${AdsumClock.defaultProps.lang}`);
+                lang = AdsumClock.defaultProps.lang;
+            }
 
-        let hours = '';
-        let minutes = '';
-        let timeStr = '';
+            const time = new Date();
+            const day = translate[lang].days[time.getDay()];
 
-        if (timeFormat === '12hrs') {
-            if (time.getHours() === 12) {
-                hours = `${time.getHours()}`;
-                minutes = (time.getMinutes().toString().length === 1) ? `0${time.getMinutes()}` : `${time.getMinutes()}`;
-                timeStr = `${hours}:${minutes} ${translate[lang].pm}`;
-            } else if (time.getHours() > 12) {
-                hours = `${time.getHours() - 12}`;
-                minutes = (time.getMinutes().toString().length === 1) ? `0${time.getMinutes()}` : `${time.getMinutes()}`;
-                timeStr = `${hours}:${minutes} ${translate[lang].pm}`;
+            const dateStr = (time.getDate().toString().length === 1) ? `0${time.getDate()}${translate[lang].date}` : `${time.getDate()}${translate[lang].date}`;
+            const month = (lang === 'zh') ? `${time.getMonth() + 1}${translate[lang].month}` : translate[lang].month[time.getMonth()];
+            const year = `${time.getFullYear()}${translate[lang].year}`;
+
+            let hours = '';
+            let minutes = '';
+            let timeStr = '';
+
+            if (timeFormat === '12hrs') {
+                if (time.getHours() === 12) {
+                    hours = `${time.getHours()}`;
+                    minutes = (time.getMinutes().toString().length === 1) ? `0${time.getMinutes()}` : `${time.getMinutes()}`;
+                    timeStr = `${hours}:${minutes} ${translate[lang].pm}`;
+                } else if (time.getHours() > 12) {
+                    hours = `${time.getHours() - 12}`;
+                    minutes = (time.getMinutes().toString().length === 1) ? `0${time.getMinutes()}` : `${time.getMinutes()}`;
+                    timeStr = `${hours}:${minutes} ${translate[lang].pm}`;
+                } else {
+                    hours = `${time.getHours()}`;
+                    minutes = (time.getMinutes().toString().length === 1) ? `0${time.getMinutes()}` : `${time.getMinutes()}`;
+                    timeStr = `${hours}:${minutes} ${translate[lang].am}`;
+                }
             } else {
-                hours = `${time.getHours()}`;
+                hours = (time.getHours().toString().length === 1) ? `0${time.getHours()}` : `${time.getHours()}`;
                 minutes = (time.getMinutes().toString().length === 1) ? `0${time.getMinutes()}` : `${time.getMinutes()}`;
-                timeStr = `${hours}:${minutes} ${translate[lang].am}`;
+                timeStr = `${hours}:${minutes}`;
             }
-        } else {
-            hours = (time.getHours().toString().length === 1) ? `0${time.getHours()}` : `${time.getHours()}`;
-            minutes = (time.getMinutes().toString().length === 1) ? `0${time.getMinutes()}` : `${time.getMinutes()}`;
-            timeStr = `${hours}:${minutes}`;
+
+            const newState = {
+                year,
+                month,
+                day,
+                hours,
+                minutes,
+                timeStr
+            };
+
+            if (lang === 'zh') {
+                newState.dateStr = `${day}, ${year} ${month} ${dateStr}`;
+            } else {
+                newState.dateStr = `${day}, ${dateStr} ${month} ${year}`;
+            }
+
+            this.setState(newState);
         }
 
-        if (lang === 'zh') {
-            this.setState({
-                date: `${day}, ${year} ${month} ${date}`,
-                time: timeStr
-            });
-        } else {
-            this.setState({
-                date: `${day}, ${date} ${month} ${year}`,
-                time: timeStr
-            });
+        render(): T {
+            return <ClockUI {...this.props} {...this.state} />;
         }
-    }
-
-    render() {
-        return (
-            <div role="presentation" className="adsum-clock-wrapper">
-                <div className="adsum-clock">
-                    <div className="day-date">{this.state.date}</div>
-                    <div className="time">{this.state.time}</div>
-                </div>
-            </div>
-        );
-    }
+    };
 }
 
-AdsumClock.propTypes = {
-    lang: PropTypes.string.isRequired,
-    timeFormat: PropTypes.string.isRequired,
-    style: PropTypes.objectOf(PropTypes.string)
-};
-
-AdsumClock.defaultProps = {
-    lang: 'en',
-    timeFormat: '24hrs',
-    style: null
-};
-
-export default AdsumClock;
+export default ClockCreator;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11544

increased by14.8%

Lines of code

210

increased by7.14%

Number of lines in readme file

88

increased by69.23%

No dependency changes