@adactive/arc-clock 中文文档教程

Question

Clock component

实际上，时钟组件是一个包装器函数，它包装了您提供的组件，并提供了创建您自己的时钟外观所需的所有道具 :)

这里有实例

Getting started

    npm i --save @adactive/arc-clock

或者

    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`