@adactiveasia/adasia-clock
Adsum Clock Component
Last updated 5 months ago by devadactiveasia .
UNLISENCED · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @adactiveasia/adasia-clock 
SYNC missed versions from official npm registry.

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

Live examples here

Getting started

    npm i --save @adactive/arc-clock

OR

    yarn add @adactive/arc-clock
    import AdsumClock from "@adactive/arc-clock"
     ...
    // 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" />

Props

static defaultProps = {
    lang: 'en',
    timeFormat: '24hrs',
};

type AdsumClockPropsType = {
    lang: LangType,
    timeFormat: TimeFormatType
};

Additional props, which will be passed to the provided ClockUi component:


{
    +year: string,
    +month: string,
    +day: string,
    +hours: string,
    +minutes: string,
    +dateStr: string,
    +timeStr: string
};

type LangType = 'en' | 'zh' | 'fr';
type TimeFormatType = '24hrs' | '12hrs';
type AdsumClockPropsType = {
    lang: LangType,
    timeFormat: TimeFormatType
};

Copy component inside your project src folder

Less only

`npx @adactive/arc-clock copy --less-only`

Full copy

`npx @adactive/arc-clock copy`

Current Tags

  • 0.0.1                                ...           latest (5 months ago)

1 Versions

  • 0.0.1                                ...           5 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 3
Dependencies (2)
Dev Dependencies (2)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |