open-index/open-npm huggingface dataset:
npm package: @feizheng/next-unique
Description: Unique for array based on next.
Author: afei
Latest version: 1.0.1

# next-unique
> Unique for array based on next.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```bash
npm install -S @feizheng/next-unique
```

## usage
```js
import '@feizheng/next-unique';

const array1 = [1,2,4,5,6,7,1,2];
nx.unique(array1);

//[1,2,3,4,5,6,7]
```

## license
Code released under [the MIT license](https://github.com/afeiship/next-unique/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/next-unique
[version-url]: https://npmjs.org/package/@feizheng/next-unique

[license-image]: https://img.shields.io/npm/l/@feizheng/next-unique
[license-url]: https://github.com/afeiship/next-unique/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/next-unique
[size-url]: https://github.com/afeiship/next-unique/blob/master/dist/next-unique.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/next-unique
[download-url]: https://www.npmjs.com/package/@feizheng/next-unique
npm package: @feizheng/next-update-state-value
Description: Update state value for react.
Author: afei
Latest version: 1.0.1

# next-update-state-value
> Update state value for react.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```bash
npm install -S @feizheng/next-update-state-value
```

## usage
```js
import '@feizheng/next-update-state-value';

class ReactList extends React.Component{
  //...
  shouldComponentUpdate(inProps){
    nx.updateStateValue(this, 'value', { props: inProps });
    return true;
  }
  //...
}
```

## license
Code released under [the MIT license](https://github.com/afeiship/next-update-state-value/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/next-update-state-value
[version-url]: https://npmjs.org/package/@feizheng/next-update-state-value

[license-image]: https://img.shields.io/npm/l/@feizheng/next-update-state-value
[license-url]: https://github.com/afeiship/next-update-state-value/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/next-update-state-value
[size-url]: https://github.com/afeiship/next-update-state-value/blob/master/dist/next-update-state-value.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/next-update-state-value
[download-url]: https://www.npmjs.com/package/@feizheng/next-update-state-value
npm package: @feizheng/next-wait-to-display
Description: Wait element display in document.
Author: afei
Latest version: 1.0.2

# next-wait-to-display
> Wait element display in document.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```bash
npm install -S @feizheng/next-wait-to-display
```

## usage
```js
import '@feizheng/next-wait-to-display';

// check target:
nx.waitToDisplay('#target', 1000, (el) => {
  console.log('has element!', el);
});
```

## license
Code released under [the MIT license](https://github.com/afeiship/next-wait-to-display/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/next-wait-to-display
[version-url]: https://npmjs.org/package/@feizheng/next-wait-to-display

[license-image]: https://img.shields.io/npm/l/@feizheng/next-wait-to-display
[license-url]: https://github.com/afeiship/next-wait-to-display/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/next-wait-to-display
[size-url]: https://github.com/afeiship/next-wait-to-display/blob/master/dist/next-wait-to-display.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/next-wait-to-display
[download-url]: https://www.npmjs.com/package/@feizheng/next-wait-to-display
npm package: @feizheng/next-weapp-storage
Description: Storage for weapp based on next.
Author: afei
Latest version: 1.0.0

# next-weapp-storage
> Storage for weapp based on next.

## installation
```bash
npm install -S @feizheng/next-weapp-storage
```

## usage
```js
import NxWeappStorage from '@feizheng/next-weapp-storage';

// code goes here:
```
npm package: @feizheng/next-webpack-alias
Description: Special alias for webpack.
Author: afei
Latest version: 1.0.1

# next-webpack-alias
> Special alias for webpack.

## installation
```bash
npm install -S @feizheng/next-webpack-alias
```

## usage
```js
import nxWebpackAlias from 'next-webpack-alias';

const res = nxWebpackAlias({
  react: 'react',
  'react-dom': ['@hot-loader/react-dom', true]
});

// result
{
  react: 'react',
  'react-dom': '@hot-loader/react-dom'
}

// if false
{
  react: 'react'
}
```
npm package: @feizheng/next-weibo-oss
Description: Weibo oss for next api.
Author: afei
Latest version: 1.1.0

# next-weibo-oss
> Weibo oss for next api.

## installation
```bash
npm install -S @feizheng/next-weibo-oss
```

## proxy_pass(node)
```js
app.use(
  '/weibo_api',
  proxy({
    target: 'https://picupload.weibo.com',
    changeOrigin: true,
    pathRewrite: { '^/weibo_api/': '/' }
  })
);
```

## proxy_pass(nginx)
```js
location /weibo_api {
    proxy_pass https://picupload.weibo.com;
    rewrite ^/weibo_api/(.*) /$1 break;
}
```

## apis
| api     | params   | description    |
| ------- | -------- | -------------- |
| upload  | file     | Upload a file. |
| uploads | fileList | Upload files.  |


## usage
```js
import NxWeiboOss from '@feizheng/next-weibo-oss';

const weiboOss = new NxWeiboOss(token);

// single file:
weiboOss.upload(file);

// multiple files:
weiboOss.uploads(files);
```
npm package: @feizheng/next-weibo-to-pics
Description: Sina weibo pics to array.
Author: afei
Latest version: 1.0.0

# next-weibo-to-pics
> Sina weibo pics to array.

## installation
```bash
npm install -S @feizheng/next-weibo-to-pics
```

## usage
```js
import '@feizheng/next-weibo-to-pics';

//DOCS here!
```
npm package: @feizheng/next-weight-random
Description: Random has weight.
Author: afei
Latest version: 1.0.0

# next-weight-random
> Random has weight.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```bash
npm install -S @feizheng/next-weight-random
```

## usage
```js
import '@feizheng/next-weight-random';

const results = {};
const rand = nx.weightRandom({
  0: 0.75,
  1: 0.15,
  2: 0.1
});

for (let i = 0; i < 1000; i++) {
  const val = rand1();
  results[val] = results[val] || [];
  results[val].push(true);
}

const total = results[0].length + results[1].length + results[2].length;

console.log(
  results[0].length / total,
  results[1].length / total,
  results[2].length / total
);

// Run multple times:
// 0.765 0.129 0.106
// 0.751 0.152 0.097
// 0.778 0.135 0.087
```

## license
Code released under [the MIT license](https://github.com/afeiship/next-weight-random/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/next-weight-random
[version-url]: https://npmjs.org/package/@feizheng/next-weight-random

[license-image]: https://img.shields.io/npm/l/@feizheng/next-weight-random
[license-url]: https://github.com/afeiship/next-weight-random/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/next-weight-random
[size-url]: https://github.com/afeiship/next-weight-random/blob/master/dist/next-weight-random.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/next-weight-random
[download-url]: https://www.npmjs.com/package/@feizheng/next-weight-random
npm package: @feizheng/next-where
Description: Get collection items from condition map.
Author: afei
Latest version: 1.0.1

# next-where
> Get collection items from condition map.

## installation
```bash
npm install -S @feizheng/next-where
```

## usage
```js
import '@feizheng/next-where';

const data = [
  {
    id: 67,
    userId: 'EB1347950628',
    goods: {
      type: 1,
      country: 'Panama',
      year: 2014,
      keywords: 'tes',
      field: null,
      infoNumber: 262,
      title: '数据查询(Panama2014)',
      price: 0.02
    },
    title: '数据查询(Panama2014)'
  },
  {
    id: 68,
    userId: 'EB1347950628-2',
    goods: {
      type: 1,
      country: 'Panama',
      year: 2014,
      keywords: 'tes',
      field: null,
      infoNumber: 262,
      title: '数据查询(Panama2014)',
      price: 0.01
    },
    title: '数据查询(Panama2014)'
  },
  {
    id: 69,
    userId: 'EB1347950628',
    goods: {
      type: 2,
      country: 'Panama',
      year: 2015,
      keywords: 'test',
      field: null,
      infoNumber: 780,
      title: '数据查询(Panama2015)',
      price: 0.01
    },
    title: '数据查询(Panama2015)'
  }
];


// filter by map condition
nx.where(data, { id: 67 });

// result
[
  {
    id: 67,
    userId: 'EB1347950628',
    goods: {
      type: 1,
      country: 'Panama',
      year: 2014,
      keywords: 'tes',
      field: null,
      infoNumber: 262,
      title: '数据查询(Panama2014)',
      price: 0.02
    },
    title: '数据查询(Panama2014)'
  }
]
```
npm package: @feizheng/photon
Description: Photon sass/css for npm.
Author: afei
Latest version: 1.0.1

# photon
> Photon sass/css for npm.

## installation
```shell
npm i -S @feizheng/photon 
```

## usage
```scss
// use sass
@import '@feizheng/photon/dist/sass/photon.scss';

// use css
@import '@feizheng/photon/dist/css/photon.css';
```

## resources
- http://photonkit.com/
npm package: @feizheng/postcss-one-to-many
Description: One to many for postcss.
Author: afei
Latest version: 1.0.3

# postcss-one-to-many
> One to many for postcss

## installation
```shell
npm i -D @feizheng/postcss-one-to-many
```

## usage
+ css parts:
```css
body{
    user-select: none;
    px:10px;
    py:20px;
    p: 10px;
}
```

+ style parts:
```js
var postcss = require('gulp-postcss');
var gulp = require('gulp');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var one2many = require('postcss-one-to-many');

// styles:
gulp.task('styles', function () {
    var plugins = [
      one2many(),
      autoprefixer({ browsers: ['last 1 version'] }),
      cssnano()
    ];
    return gulp.src('input.css')
      .pipe(postcss(plugins))
      .pipe(gulp.dest('dist'));
});
```

## suport list:
```js
// margins:
module.exports = {
  'm': [
    'margin-top',
    'margin-right',
    'margin-bottom',
    'margin-left'
  ],
  'mx': [
    'margin-right',
    'margin-left'
  ],
  'my': [
    'margin-top',
    'margin-bottom'
  ],
  'mt': [
    'margin-top'
  ],
  'mr': [
    'margin-right'
  ],
  'mb': [
    'margin-bottom'
  ],
  'ml': [
    'margin-left'
  ]
};

// paddings:
module.exports = {
  'p': [
    'padding-top',
    'padding-right',
    'padding-bottom',
    'padding-left'
  ],
  'px': [
    'padding-right',
    'padding-left'
  ],
  'py': [
    'padding-top',
    'padding-bottom'
  ],
  'pt': [
    'padding-top'
  ],
  'pr': [
    'padding-right'
  ],
  'pb': [
    'padding-bottom'
  ],
  'pl': [
    'padding-left'
  ]
};

//radius:
module.exports = {
  'radius':[
    'border-radius'
  ],
  'radius-bottom': [
    'border-bottom-left-radius',
    'border-bottom-right-radius'
  ],
  'radius-left': [
    'border-top-left-radius',
    'border-bottom-left-radius'
  ],
  'radius-right': [
    'border-top-right-radius',
    'border-bottom-right-radius'
  ],
  'radius-top': [
    'border-top-left-radius',
    'border-top-right-radius'
  ]
};
```
npm package: @feizheng/pptr-html
Description: Get html by puppeteer.
Author: afei
Latest version: 1.0.3

# pptr-html
> Get html by puppeteer.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
npm install -S @feizheng/pptr-html
```

## usage
```js
import pptrHtml from '@feizheng/pptr-html';

pptrHtml('https://github.com/afeiship').then(res => {
  console.log(res);
});
```

## options
> { headless: true, closeable: true, userAgent: nx.randomUa(), selector: null };


## license
Code released under [the MIT license](https://github.com/afeiship/pptr-html/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/pptr-html
[version-url]: https://npmjs.org/package/@feizheng/pptr-html

[license-image]: https://img.shields.io/npm/l/@feizheng/pptr-html
[license-url]: https://github.com/afeiship/pptr-html/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/pptr-html
[size-url]: https://github.com/afeiship/pptr-html/blob/master/dist/pptr-html.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/pptr-html
[download-url]: https://www.npmjs.com/package/@feizheng/pptr-html
npm package: @feizheng/rake-git
Description: Rake task for git.
Author: afei
Latest version: 1.2.1

# rake-git
> Rake task for git.

## installation
```bash
npm i -D @feizheng/rake-git
```

## usage
~~~
$ rake -T
rake git:branch_create[name]       # Create branch action
rake git:branch_delete[name]       # Delete branch action
rake git:branch_list[name]         # List branch action
rake git:branch_push[name]         # Push branch action
rake git:tag_create[version]       # Create tag from semver file(eg: package.json)
rake git:tag_delete[version]       # Delete tag from semver file(eg: package.json)
rake git:tag_list[version]         # List tag from semver file(eg: package.json)
rake git:tag_list_remote[version]  # List remote tag from semver file(eg: package.json)
rake git:tag_push[version]         # Push tag from semver file(eg: package.json)
rake git:tag_tagging[version]      # Tagging tag from semver file(eg: package.json)
~~~
npm package: @feizheng/react-ant-abstract-curd
Description: Antd abstract curd.
Author: afei
Latest version: 1.3.0

# react-ant-abstract-curd
> Antd abstract curd.

## installation
```shell
npm install -S @feizheng/react-ant-abstract-curd
```

## update
```shell
npm update @feizheng/react-ant-abstract-curd
```

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-abstract-curd/dist/style.scss";

  // customize your styles:
  $react-ant-abstract-curd-options: ()
  ```
2. import js
  ```js
  import ReactAntAbstractCurd from '@feizheng/react-ant-abstract-curd';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import {
    ReduxAppBase,
    ReduxBoot,
    reduxRender
  } from '@feizheng/next-react-redux';

  import '@feizheng/next-param';
  import '@feizheng/next-ant-column';
  import './assets/style.scss';

  class ApiService {
    static repos_index(inData) {
      var url = nx.param(inData, '/api/users/afeiship/repos');
      return fetch(url).then((res) => res.json());
    }

    static repos_destroy(inData) {
      return new Promise((resolve) => {
        console.log('call destroy api', inData);
        resolve();
      });
    }
  }

  class RouteService {
    static push(inUrl) {
      console.log('push to:', inUrl);
    }
  }

  class Index extends ReactAntAbstractCurd {
    apiService = ApiService;
    routeService = RouteService;
    resources = 'repos';
    pagination = {
      page: 'page',
      size: 'per_page',
      total: 'total'
    };

    get fields() {
      return [
        nx.antColumn('ID', 'id'),
        nx.antColumn('ProjectName', 'full_name'),
        nx.antColumn('IsPivate', 'private', (text) => String(text)),
        nx.antColumn('Owner', 'owner.login')
      ];
    }

    setResponse(res) {
      return {
        rows: res,
        total: 1000
      };
    }

    render() {
      return <div className="app-container">{this.table()}</div>;
    }
  }

  @reduxRender('app', { prefix: 'react-spa', loadable: false })
  export default class extends ReduxAppBase {
    static initialState(inStore) {
      return {
        memory: {
          modalUser: false,
          modalUserQuery: false
        }
      };
    }

    render() {
      return <Index />;
    }
  }

  ```

## documentation
- https://afeiship.github.io/react-ant-abstract-curd/
- https://es6.ruanyifeng.com/#docs/class-extends
npm package: @feizheng/react-ant-baidu-pan-input
Description: Baidu pan input for antd.
Author: afei
Latest version: 1.0.2

# react-ant-baidu-pan-input
> Baidu pan input for antd.

## installation
```shell
npm install -S @feizheng/react-ant-baidu-pan-input
```

## update
```shell
npm update @feizheng/react-ant-baidu-pan-input
```

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| onChange  | func   | noop    | The change handler.                   |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-baidu-pan-input/dist/style.scss";

  // customize your styles:
  $react-ant-baidu-pan-input-options: ()
  ```
2. import js
  ```js
  import ReactAntBaiduPanInput from '@feizheng/react-ant-baidu-pan-input';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    componentDidMount() {}
    render() {
      return (
        <div className="app-container">
          <ReactAntBaiduPanInput
            defaultValue={
              '链接:https://pan.baidu.com/s/1iyNPAJ7guBjZqtRZdht2cA  密码:fr1o'
            }
            onChange={(e) => {
              console.log(e.target.value);
            }}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-baidu-pan-input/
npm package: @feizheng/react-ant-breadcrumb
Description: Ant breadcrumb for react.
Author: afei
Latest version: 1.0.0

# react-ant-breadcrumb
> Ant breadcrumb for react.

## installation
```shell
npm install -S @feizheng/react-ant-breadcrumb
```
## properties
| property        | type | description |
| --------------- | ---- | ----------- |
| className       | -    | -           |
| items           | -    | -           |
| template        | -    | -           |

## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-breadcrumb/dist/style.scss";

  // customize your styles:
  $react-ant-breadcrumb-options: ()
  ```
2. import js
  ```js
  import ReactAntBreadcrumb from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      items: [
        { to: '#app', label: 'Application Center' },
        { to: '#list', label: 'Application List' },
        { label: 'an app' }
      ]
    };

    render() {
      const { items } = this.state;
      return (
        <div className="app-container">
          <ReactAntBreadcrumb items={items} />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-breadcrumb/
npm package: @feizheng/react-ant-checkbox
Description: Checkbox for antd.
Author: afei
Latest version: 1.0.3

# react-ant-checkbox
> Checkbox for antd.

## installation
```shell
npm install -S @feizheng/react-ant-checkbox
```

## update
```shell
npm update @feizheng/react-ant-checkbox
```

## properties
| Name         | Type   | Default | Description                           |
| ------------ | ------ | ------- | ------------------------------------- |
| className    | string | -       | The extended className for component. |
| value        | bool   | -       | The controlled value.                 |
| defaultValue | bool   | -       | Default value.                        |
| onChange     | func   | noop    | The change handler.                   |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-checkbox/dist/style.scss";

  // customize your styles:
  $react-ant-checkbox-options: ()
  ```
2. import js
  ```js
  import ReactAntCheckbox from '@feizheng/react-ant-checkbox';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    componentDidMount() {}
    render() {
      return (
        <div className="app-container">
          <ReactAntCheckbox />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-checkbox/
npm package: @feizheng/react-ant-checkbox-group
Description: React ant checkbox group.
Author: afei
Latest version: 1.1.1

# react-ant-checkbox-group
> React ant checkbox group.

## installation
```shell
npm install -S @feizheng/react-ant-checkbox-group
```

## update
```shell
npm update @feizheng/react-ant-checkbox-group
```

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| value     | array  | false    | []      | Default value.                        |
| onChange  | func   | false    | noop    | The change handler.                   |
| items     | array  | false    | []      | The checkbox data source.             |
| template  | func   | true     | -       | The item template.                    |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-checkbox-group/dist/style.scss";

  // customize your styles:
  $react-ant-checkbox-group-options: ()
  ```
2. import js
  ```js
  import ReactAntCheckboxGroup from '@feizheng/react-ant-checkbox-group';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import { Checkbox } from 'antd';
  import './assets/style.scss';

  const DEFAULT_TEMPLATE = ({ item }) => {
    return (
      <Checkbox key={item.value} value={item.value}>
        {item.label}
      </Checkbox>
    );
  };

  class App extends React.Component {
    state = {
      items: [
        { value: 'k1', label: 'label1' },
        { value: 'k2', label: 'label2' },
        { value: 'k3', label: 'label3' }
      ]
    };

    onChange = (inEvent) => {
      console.log('chk change:', inEvent.target.value);
    };

    render() {
      return (
        <div className="app-container">
          <ReactAntCheckboxGroup
            name="abc"
            onChange={this.onChange}
            items={this.state.items}
            template={DEFAULT_TEMPLATE}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-checkbox-group/
npm package: @feizheng/react-ant-color-picker
Description: Color picker for ant project.
Author: afei
Latest version: 1.0.4

# react-ant-color-picker
> Color picker for ant project.

## installation
```shell
npm install -S @feizheng/react-ant-color-picker
```
## properties
| property  | type | description |
| --------- | ---- | ----------- |
| className | -    | -           |
| value     | -    | -           |
| onChange  | -    | -           |
| placement | -    | -           |
| label     | -    | -           |

## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-color-picker/dist/style.scss";

  // customize your styles:
  $react-ant-color-picker-options: ()
  ```
2. import js
  ```js
  import ReactAntColorPicker from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      value: '#eee'
    };

    onChange = (inEvent) => {
      const { value } = inEvent.target;
      this.setState({ value });
    };

    render() {
      const _value = this.state.value;
      return (
        <div className="app-container" style={{ background: _value }}>
          <ReactAntColorPicker value={_value} onChange={this.onChange} />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-color-picker/
npm package: @feizheng/react-ant-confirm
Description: Popconfirm quick wrapper.
Author: afei
Latest version: 1.0.0

# react-ant-confirm
> Popconfirm quick wrapper.

## installation
```shell
npm install -S @feizheng/react-ant-confirm
```

## update
```shell
npm update @feizheng/react-ant-confirm
```

## properties
| Name       | Type   | Default              | Description                           |
| ---------- | ------ | -------------------- | ------------------------------------- |
| className  | string | -                    | The extended className for component. |
| title      | string | '确认执行这个操作？' | PopopConfirm title.                   |
| type       | enum   | 'link'               | Button/link style.                    |
| childProps | object | {}                   | The children props.                   |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-confirm/dist/style.scss";

  // customize your styles:
  $react-ant-confirm-options: ()
  ```
2. import js
  ```js
  import ReactAntConfirm from '@feizheng/react-ant-confirm';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    componentDidMount() {}
    handleClick = (e) => {
      console.log('click!');
    };
    render() {
      return (
        <div className="app-container">
          <div className="inner">
            <ReactAntConfirm onClick={this.handleClick}>删除</ReactAntConfirm>
            <ReactAntConfirm type="button" onClick={this.handleClick}>
              取消
            </ReactAntConfirm>
          </div>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-confirm/
npm package: @feizheng/react-ant-dropdown-menu
Description: Dropdown + menu based on antd.
Author: afei
Latest version: 1.1.2

# react-ant-dropdown-menu
> Dropdown + menu based on antd.

## installation
```shell
npm install -S @feizheng/react-ant-dropdown-menu
```

## usage
1. import css
  ```scss
  @import "~react-ant-dropdown-menu/style.scss";

  // customize your styles:
  $react-ant-dropdown-menu-options: ()
  ```
2. import js
  ```jsx
  import ReactAntDropdownMenu from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import { Menu, Switch, Button } from 'antd';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      highlighted: false,
      value: ['m1-1-2'],
      items: [
        {
          icon: 'm1-icon',
          label: 'Menu1',
          value: 'm1',
          children: [
            {
              icon: 'm1-1-icon',
              label: 'Menu1-1',
              value: 'm1-1',
              children: [
                {
                  icon: 'm1-1-1-icon',
                  label: 'Menu-1-1',
                  value: 'm1-1-1'
                },
                {
                  icon: 'm1-1-2-icon',
                  label: 'Menu-1-2',
                  value: 'm1-1-2'
                }
              ]
            },
            {
              icon: 'm1-2-icon',
              label: 'Menu1-2',
              value: 'm1-2'
            }
          ]
        },
        {
          icon: 'm2-icon',
          label: 'Menu2',
          value: 'm2'
        },
        {
          icon: 'm3-icon',
          label: 'Menu3',
          value: 'm3'
        }
      ]
    };

    template({ item, selected }, cb) {
      const { value, label } = item;
      const _label = selected ? `${label}(${selected.label})` : label;
      if (cb) {
        return <Menu.SubMenu key={value} title={_label} children={cb()} />;
      } else {
        return <Menu.Item key={value}>{label}</Menu.Item>;
      }
    }

    onMenuChange = (inEvent) => {
      const { value } = inEvent.target;
      this.setState({ value });
    };

    onChange = (inRole, inEvent) => {
      this.setState({
        [inRole]: inEvent
      });
    };

    render() {
      const { highlighted, value, items } = this.state;
      console.log('render value:', value);
      return (
        <div className="app-container">
          <p>
            <label>highlighted:</label>
            <Switch
              checked={highlighted}
              onChange={this.onChange.bind(this, 'highlighted')}
            />
          </p>
          <ReactAntDropdownMenu
            menuOptions={{
              highlighted,
              value,
              items,
              template: this.template,
              onChange: this.onMenuChange
            }}>
            <Button>Test Dropdown</Button>
          </ReactAntDropdownMenu>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-dropdown-menu/
npm package: @feizheng/react-ant-editable-tag-group
Description: Editable tag group for ant.
Author: afei
Latest version: 2.0.7

# react-ant-editable-tag-group
> Editable tag group for ant.

## installation
```shell
npm install -S @feizheng/react-ant-editable-tag-group
```

## update
```shell
npm update @feizheng/react-ant-editable-tag-group
```

## properties
| Name      | Type   | Default | Description                                 |
| --------- | ------ | ------- | ------------------------------------------- |
| className | string | -       | The extended className for component.       |
| value     | array  | []      | Default value.                              |
| onChange  | func   | noop    | The change handler.                         |
| min       | number | 0       | The minimum tag number.                     |
| max       | number | 20      | The maximum tags number.                    |
| quick     | bool   | false   | If use keymap `enter` key to quick add tag. |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-editable-tag-group/dist/style.scss";

  // customize your styles:
  $react-ant-editable-tag-group-options: ()
  ```
2. import js
  ```js
  import ReactAntEditableTagGroup from '@feizheng/react-ant-editable-tag-group';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      items: ['tag1', 'tag2', 'tag3']
    };

    onRandom = (inEvent) => {
      const random = Math.floor(Math.random() * 10);
      const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const _items = items.slice(0, random);
      console.log('on random:', _items);
      this.setState({ items: _items });
    };

    render() {
      const { items } = this.state;
      return (
        <div className="app-container">
          <p>
            <button onClick={this.onRandom}>Set Random Items</button>
          </p>
          <ReactAntEditableTagGroup
            quick
            value={items}
            onChange={(e) => {
              this.setState({ items: e.target.value });
            }}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-editable-tag-group/
npm package: @feizheng/react-ant-filter-dropdown-checkbox
Description: Filter dropdown for checkbox.
Author: afei
Latest version: 1.0.1

# react-ant-filter-dropdown-checkbox
> Filter dropdown for checkbox.

## installation
```shell
npm install -S @feizheng/react-ant-filter-dropdown-checkbox
```

## update
```shell
npm update @feizheng/react-ant-filter-dropdown-checkbox
```

## properties
| Name          | Type   | Required | Default | Description                           |
| ------------- | ------ | -------- | ------- | ------------------------------------- |
| className     | string | false    | -       | The extended className for component. |
| value         | array  | false    | -       | Default value.                        |
| items         | array  | false    | []      | The dropdown menu items.              |
| selectAllText | any    | false    | '全选'  | Select all text.                      |
| onChange      | func   | false    | noop    | The change handler.                   |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-filter-dropdown-checkbox/dist/style.scss";

  // customize your styles:
  $react-ant-filter-dropdown-checkbox-options: ()
  ```
2. import js
  ```js
  import ReactAntFilterDropdownCheckbox from '@feizheng/react-ant-filter-dropdown-checkbox';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = { value: [] };
    render() {
      const items = [
        { value: 'blank', label: '空白单元格' },
        { value: 'not-filled', label: '未填单元格' },
        { value: 'fixed', label: '已修正' }
      ];
      const { value } = this.state;

      return (
        <div className="app-container">
          <ReactAntFilterDropdownCheckbox
            items={items}
            onChange={(e) => {
              this.setState({ value: e.target.value });
            }}
          />

          <div className="code-container">
            <div className="is-code">
              <pre>
                <code>{JSON.stringify(items, null, 2)}</code>
              </pre>
            </div>
            <div className="is-code">
              <pre>
                <code>{JSON.stringify(value, null, 2)}</code>
              </pre>
            </div>
          </div>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-filter-dropdown-checkbox/
npm package: @feizheng/react-ant-i18n
Description: I18n for antd.
Author: afei
Latest version: 1.0.3

# react-ant-i18n
> I18n for antd.

## installation
```shell
npm install -S @feizheng/react-ant-i18n
```
## properties
| property        | type | description |
| --------------- | ---- | ----------- |
| className       | -    | -           |
| value           | -    | -           |
| onChange        | -    | -           |

## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-i18n/dist/style.scss";

  // customize your styles:
  $react-ant-i18n-options: ()
  ```
2. import js
  ```js
  import ReactAntI18n from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import moment from 'moment';
  import { Calendar } from 'antd';
  import i18next from 'i18next';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      lang: 'zhCn',
      resources: {
        antd: {
          zhCn: require(`antd/es/locale-provider/zh_CN.js`).default,
          zhTw: require(`antd/es/locale-provider/zh_TW.js`).default,
          en: require(`antd/es/locale-provider/en_US.js`).default
        },
        i18next: {
          zhCn: {
            translation: require(`./assets/locale/zh_CN.json`)
          },
          zhTw: {
            translation: require(`./assets/locale/zh_TW.json`)
          },
          en: {
            translation: require(`./assets/locale/en.json`)
          }
        }
      }
    };

    onSelectChange = (inEvent) => {
      const { value } = inEvent.target;
      this.setState({ lang: value });
    };

    render() {
      const { lang } = this.state;
      return (
        <div className="app-container">
          <ReactAntI18n value={lang} resources={this.state.resources}>
            {() => {
              return (
                <React.Fragment>
                  <select value={lang} onChange={this.onSelectChange}>
                    <option value="zhCn">Chinese</option>
                    <option value="zhTw">Chinese TW</option>
                    <option value="en">English</option>
                  </select>
                  <Calendar fullscreen={false} value={moment()} />
                  <p>
                    {i18next.t('hello')} - {i18next.t('world')}
                  </p>
                </React.Fragment>
              );
            }}
          </ReactAntI18n>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));
  ```

## documentation
- https://afeiship.github.io/react-ant-i18n/
- https://react.i18next.com/latest/translation-render-prop

## resources
- https://github.com/i18next/react-i18next
- https://github.com/i18next/react-i18next/blob/master/src/I18nextProvider.js
npm package: @feizheng/react-ant-image-pop-view
Description: Ant popover view image for react.
Author: afei
Latest version: 1.0.4

# react-ant-image-pop-view
> Ant popover view image for react.

## installation
```shell
npm install -S @feizheng/react-ant-image-pop-view
```

## update
```shell
npm update @feizheng/react-ant-image-pop-view
```

## properties
| Name      | Type   | Default    | Description                           |
| --------- | ------ | ---------- | ------------------------------------- |
| className | string | -          | The extended className for component. |
| placement | string | 'rightTop' | Placement for antd.                   |
| size      | array  | [100]      | Thumbnail size.                       |
| popSize   | array  | [100]      | Popup picture size.                   |
| thumbnail | string | -          | The thumbnail/popup pictures.         |
| src       | string | -          | The popup original picutrel.          |


## usage
1. import css
  ```scss
  @import "~@feizheng/webkit-sassui-frame-wrapper/dist/index.scss";
  @import "~@feizheng/react-figure/dist/style.scss";
  @import "~@feizheng/react-ant-image-pop-view/dist/style.scss";

  // customize your styles:
  $react-ant-image-pop-view-options: ()
  ```
2. import js
  ```js
  import ReactAntImagePopView from '@feizheng/react-ant-image-pop-view';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    componentDidMount() {}
    render() {
      return (
        <div className="app-container">
          <ReactAntImagePopView
            thumbnail="https://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg"
            src="https://himg.bdimg.com/sys/portrait/item/be10475f686d6x73db00.jpg"
            size={['100px', '100px']}
            popSize={[200, 200]}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-image-pop-view/

## resources
- https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
- https://www.valentinog.com/blog/react-webpack-babel/
- https://jestjs.io/docs/en/tutorial-react#snapshot-testing-with-mocks-enzyme-and-react-16
- https://testing-library.com/docs/react-testing-library/api

## todos
- [ ] Add: semver number for every build files.
- [ ] Add: need output css files.
- [ ] Add: PWA support for docs.
- [ ] Add: source.map file for dist(`you can upload for production debug`).
- [ ] BUG: npm run dev will clean dist.
npm package: @feizheng/react-ant-input
Description: Ant input.
Author: afei
Latest version: 1.0.0

# react-ant-input
> Ant input.

## installation
```shell
npm install -S @feizheng/react-ant-input
```

## update
```shell
npm update @feizheng/react-ant-input
```

## properties
| Name         | Type   | Default | Description                                  |
| ------------ | ------ | ------- | -------------------------------------------- |
| className    | string | -       | The extended className for component.        |
| value        | any    | -       | Default value.                               |
| shouldTrim   | bool   | false   | If the value should be trim before returned. |
| autoComplete | string | 'off'   |
| onChange     | func   | noop    | The change handler.                          |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-input/dist/style.scss";

  // customize your styles:
  $react-ant-input-options: ()
  ```
2. import js
  ```js
  import ReactAntInput from '@feizheng/react-ant-input';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      value: '',
      value2: ''
    };

    handleChange = (inEvent) => {
      this.setState({
        [inEvent.target.name]: inEvent.target.value
      });
    };

    render() {
      const { value, value2 } = this.state;

      return (
        <div className="app-container">
          <ReactAntInput
            name="value"
            value={value}
            onChange={this.handleChange}
          />

          <ReactAntInput
            shouldTrim
            name="value2"
            value={value2}
            onChange={this.handleChange}
          />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-input/
npm package: @feizheng/react-ant-input-search
Description: Ant input search box optimize.
Author: afei
Latest version: 1.0.3

# react-ant-input-search
> Ant input search box optimize.

[![version][version-image]][version-url]
[![license][license-image]][license-url]
[![size][size-image]][size-url]
[![download][download-image]][download-url]

## installation
```shell
npm install -S @feizheng/react-ant-input-search
```

## update
```shell
npm update @feizheng/react-ant-input-search
```

## event action
| name   | description                 |
| ------ | --------------------------- |
| clear  | When value change to empty. |
| search | When trigger seach action.  |
| change | When value changed.         |
| enter  | When press enter.           |

## properties
| Name      | Type   | Required | Default | Description                           |
| --------- | ------ | -------- | ------- | ------------------------------------- |
| className | string | false    | -       | The extended className for component. |
| onChange  | func   | false    | noop    | The change handler.                   |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-input-search/dist/style.scss";

  // customize your styles:
  $react-ant-input-search-options: ()
  ```
2. import js
  ```js
  import ReactDemokit from '@feizheng/react-demokit';
  import React from 'react';
  import ReactDOM from 'react-dom';
  import ReactAntInputSearch from '@feizheng/react-ant-input-search';
  import './assets/style.scss';

  class App extends React.Component {

    handleChange = (inEvent) => {
      const { action, value } = inEvent.target;
      console.log('value:', action, value);
    };

    render() {
      return (
        <ReactDemokit
          className="p-3 app-container"
          url="https://github.com/afeiship/react-ant-input-search">
          <ReactAntInputSearch
            allowClear
            enterButton
            className="bg-gray-800 mb-5 text-white"
            onChange={this.handleChange}
          />
        </ReactDemokit>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-input-search/


## license
Code released under [the MIT license](https://github.com/afeiship/react-ant-input-search/blob/master/LICENSE.txt).

[version-image]: https://img.shields.io/npm/v/@feizheng/react-ant-input-search
[version-url]: https://npmjs.org/package/@feizheng/react-ant-input-search

[license-image]: https://img.shields.io/npm/l/@feizheng/react-ant-input-search
[license-url]: https://github.com/afeiship/react-ant-input-search/blob/master/LICENSE.txt

[size-image]: https://img.shields.io/bundlephobia/minzip/@feizheng/react-ant-input-search
[size-url]: https://github.com/afeiship/react-ant-input-search/blob/master/dist/react-ant-input-search.min.js

[download-image]: https://img.shields.io/npm/dm/@feizheng/react-ant-input-search
[download-url]: https://www.npmjs.com/package/@feizheng/react-ant-input-search
npm package: @feizheng/react-ant-modal
Description: Modal wrap for antd.
Author: afei
Latest version: 1.0.0

# react-ant-modal
> Modal wrap for antd.

## installation
```shell
npm install -S @feizheng/react-ant-modal
```

## usage
1. import css
  ```scss
  @import "~react-ant-modal/style.scss";

  // customize your styles:
  $react-ant-modal-options: ()
  ```
2. import js
  ```js
  import ReactAntModal from '../src/main';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import { Button } from 'antd';
  import './assets/style.scss';

  class App extends React.Component {
    state = {
      value: false
    };

    _onChange = (e) => {
      const { value } = e.target;
      console.log('value:->', value);
    };

    _onClick = (e) => {
      this.setState({ value: true });
    };

    render() {
      const { value } = this.state;
      return (
        <div className="app-container">
          <Button onClick={this._onClick}>ShowModal</Button>
          <ReactAntModal onChange={this._onChange} value={value} />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));
  ```

## documentation
- https://afeiship.github.io/react-ant-modal/
npm package: @feizheng/react-ant-rate
Description: Rate for react.
Author: afei
Latest version: 1.0.0

# react-ant-rate
> Rate for react.

## installation
```shell
npm install -S @feizheng/react-ant-rate
```

## update
```shell
npm update @feizheng/react-ant-rate
```

## properties
| Name      | Type   | Default | Description                           |
| --------- | ------ | ------- | ------------------------------------- |
| className | string | -       | The extended className for component. |
| value     | number | -       | Default value.                        |
| onChange  | func   | noop    | The change handler.                   |


## usage
1. import css
  ```scss
  @import "~@feizheng/react-ant-rate/dist/style.scss";

  // customize your styles:
  $react-ant-rate-options: ()
  ```
2. import js
  ```js
  import ReactAntRate from '@feizheng/react-ant-rate';
  import ReactDOM from 'react-dom';
  import React from 'react';
  import './assets/style.scss';

  class App extends React.Component {
    componentDidMount() {}
    render() {
      return (
        <div className="app-container">
          <ReactAntRate />
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById('app'));

  ```

## documentation
- https://afeiship.github.io/react-ant-rate/