# reack-clock0

> https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.6/immutable.min.js https://cdnjs.cloudflare.com/ajax/libs/lodash.js/

Latest version **0.0.5** (published 2020-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install reack-clock0
pnpm add reack-clock0
yarn add reack-clock0
bun add reack-clock0
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2020-07-13 |
| First published | 2020-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 62 |
| Unpacked size | 585.6 KB |
| Known vulnerabilities | 0 (+8 in 3 direct dependencies) |
| Install scripts | no |
| Author | Chunhui.zhang |
| Maintainers | chunhui2001 |

## Links

- npm: https://www.npmjs.com/package/reack-clock0
- npm.io page: https://npm.io/package/reack-clock0

## Dependencies (62)

- [bfj](https://npm.io/package/bfj.md) 6.1.1
- [jest](https://npm.io/package/jest.md) 23.6.0
- [rxjs](https://npm.io/package/rxjs.md) ^6.5.3
- [react](https://npm.io/package/react.md) ^16.12.0
- [dotenv](https://npm.io/package/dotenv.md) 6.0.0
- [eslint](https://npm.io/package/eslint.md) 5.12.0
- [rc-bmap](https://npm.io/package/rc-bmap.md) ^0.2.4
- [resolve](https://npm.io/package/resolve.md) 1.10.0
- [fs-extra](https://npm.io/package/fs-extra.md) 7.0.1
- [cross-env](https://npm.io/package/cross-env.md) ^5.2.0
- [immutable](https://npm.io/package/immutable.md) ^4.0.0-rc.12
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [babel-core](https://npm.io/package/babel-core.md) 7.0.0-bridge.0
- [babel-jest](https://npm.io/package/babel-jest.md) 23.6.0
- [css-loader](https://npm.io/package/css-loader.md) 1.0.0
- [reack-fack](https://npm.io/package/reack-fack.md) 0.0.10
- [reack-fake](https://npm.io/package/reack-fake.md) 0.0.4
- [url-loader](https://npm.io/package/url-loader.md) 1.1.2
- [@babel/core](https://npm.io/package/@babel/core.md) 7.2.2
- [file-loader](https://npm.io/package/file-loader.md) 2.0.0
- [sass-loader](https://npm.io/package/sass-loader.md) 7.1.0
- [babel-eslint](https://npm.io/package/babel-eslint.md) 9.0.0
- [babel-loader](https://npm.io/package/babel-loader.md) 8.0.5
- [jest-resolve](https://npm.io/package/jest-resolve.md) 23.6.0
- [style-loader](https://npm.io/package/style-loader.md) 0.23.1
- [@svgr/webpack](https://npm.io/package/@svgr/webpack.md) 4.1.0
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) 4.2.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) 2.1.1
- [react-scripts](https://npm.io/package/react-scripts.md) ^2.1.8
- [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^8.0.0
- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) ^2.6.4
- [react-scrolllock](https://npm.io/package/react-scrolllock.md) ^4.0.1
- [jest-pnp-resolver](https://npm.io/package/jest-pnp-resolver.md) 1.0.2
- [styled-components](https://npm.io/package/styled-components.md) ^4.4.1
- [identity-obj-proxy](https://npm.io/package/identity-obj-proxy.md) 3.0.0
- [pnp-webpack-plugin](https://npm.io/package/pnp-webpack-plugin.md) 1.2.1
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) 6.5.0
- [react-app-polyfill](https://npm.io/package/react-app-polyfill.md) ^0.2.2
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) 3.1.14
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) 7.12.4
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 4.0.0-alpha.2
- [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) 4.0.1
- [source-map-explorer](https://npm.io/package/source-map-explorer.md) ^2.4.2
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) 2.14.0
- [jest-watch-typeahead](https://npm.io/package/jest-watch-typeahead.md) ^0.2.1
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 1.2.2
- [babel-preset-react-app](https://npm.io/package/babel-preset-react-app.md) ^7.0.2
- [eslint-plugin-flowtype](https://npm.io/package/eslint-plugin-flowtype.md) 2.50.1
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) 6.1.2
- [postcss-flexbugs-fixes](https://npm.io/package/postcss-flexbugs-fixes.md) 4.1.0
- [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) 3.6.3
- [eslint-config-react-app](https://npm.io/package/eslint-config-react-app.md) ^3.0.8
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.5.0
- [webpack-manifest-plugin](https://npm.io/package/webpack-manifest-plugin.md) 2.0.4
- [babel-plugin-named-asset-import](https://npm.io/package/babel-plugin-named-asset-import.md) ^0.3.5
- [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.10.4
- [react-addons-css-transition-group](https://npm.io/package/react-addons-css-transition-group.md) ^15.6.2
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) 5.0.1
- [case-sensitive-paths-webpack-plugin](https://npm.io/package/case-sensitive-paths-webpack-plugin.md) 2.2.0
- [babel-plugin-transform-decorators-legacy](https://npm.io/package/babel-plugin-transform-decorators-legacy.md) ^1.3.5

## Recent versions

- 0.0.5 (latest) — 2020-07-13
- 0.0.4 — 2020-07-12
- 0.0.3 — 2020-07-12
- 0.0.2 — 2020-07-12
- 0.0.1 — 2020-07-12

## README

#### dependencys
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js
https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.6/immutable.min.js
https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js
https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.4.4/randomColor.min.js


# windows 下需执行 npm run dist2
# npm install -g win-node-env
# npm install -g cross-env

# 新建项目
$ sudo npm install -g npx
$ sudo npm install -g create-react-app
$ npx create-react-app rock-reack
$ cd rock-reack && npm start 

# 新建一个 Button 组件
index.js Button.js

# 启动
npm start

# 打包(生成 dist 文件夹)
npm run dist

# 优化(生成 build 文件夹)
npm run build

# 发布到 npmjs.org (发布前先执行 $ npm run dist)
npm publish

# ENOSPC: System limit for number of file watchers reached
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

# 查看最新版本
npm info reack-button version


### Analyzing the Bundle Size
npm install --save source-map-explorer
yarn add source-map-explorer

npm run build
npm run analyze





### Babel
const digits = Immutable.fromJS({
    '0': [1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1],
    '1': [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
    '2': [1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1],
    '3': [1, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1, 1],
    '4': [1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1],
    '5': [1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1],
    '6': [1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 1, 1],
    '7': [1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
    '8': [1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1],
    '9': [1, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1],
    ':': [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0]
});

function Segment(props) {

    const style = {
        backgroundColor: props.active ? props.color : 'transparent'
    };

    return (<div className="segment" style={style} />);
}

const Digit = React.createClass({
    
    shouldComponentUpdate: function (nextProps) {
        return nextProps.data !== this.props.data;
    },

    render: function() {
        
        const colors = randomColor({count: 15});
        const segments = _.zipWith(this.props.data.toArray(), colors, (active, color) => {
            return {
                active: active,
                color: color
            };
        });
        
        return (
            <div className="digit">
                {segments.map((segment) => <Segment {...segment} />)}
            </div>
        );
    }
});

const Clock = React.createClass({
    
    getInitialState: function() {
        return {
            time: moment()
        };
    },
    
    componentDidMount: function() {
        this.interval = setInterval(this.updateTime, 1000);
    },
    
    componentWillUnmount: function() {
        clearInterval(this.interval);
        delete(this.interval);
    },
    
    updateTime: function() {
        this.setState({
            time: moment()
        });
    },
    
    render: function() {
        const time = this.state.time.format('HH:mm:ss').split('');
        
        return (
            <div className="clock">
                {time.map((digit) => <Digit data={digits.get(digit)} />)}
            </div>
        );
    }
});

const mountNode = document.getElementById('i-am-root');
ReactDOM.render(<Clock />, mountNode);

---
_Source: https://npm.io/package/reack-clock0 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._