open-index/open-npm huggingface dataset:
npm package: @huangjin2/test
Description: Webull Bo Components
Latest version: 0.0.3

# components

[![NPM version](https://img.shields.io/npm/v/components.svg?style=flat)](https://npmjs.org/package/components)
[![NPM downloads](http://img.shields.io/npm/dm/components.svg?style=flat)](https://npmjs.org/package/components)

A react library developed with dumi

## Usage

TODO

## Options

TODO

## Development

```bash
# install dependencies
$ npm install

# develop library by docs demo
$ npm start

# build library source code
$ npm run build

# build library source code in watch mode
$ npm run build:watch

# build docs
$ npm run docs:build

# Locally preview the production build.
$ npm run docs:preview

# check your project for potential problems
$ npm run doctor
```

## LICENSE

MIT
npm package: @huangjs888/amap-proxy
Description: 在线高德地图，局域网内代理
Author: Huangjs
Latest version: 1.2.1

<!--
 * @Author: Huangjs
 * @Date: 2021-05-10 15:55:29
 * @LastEditors: Huangjs
 * @LastEditTime: 2021-12-29 16:19:35
 * @Description: 高德地图代理
-->
## amap-proxy
当部署的环境不能上网，但是有一台代理服务器可以上网，可以使用代理服务器加载高德地图
代理服务器需要部署一套服务，用于转发高德地图相关请求，逻辑是：截取下面传入地址后面的所有路径在其前面加上https://去请求高德地图资源，然后转回来
### 使用方法
```javascript
import ap from '@huangjs888/amap-proxy';

ap(
  'http://10.5.10.106:9800/web-proxy/proxy-hs/', // 代理地址
  /(https?:)?\/\/(([A-Za-z0-9_]+\.)+(amap|autonavi)\.com)/g, // 匹配规则
);
```
npm package: @huangjs888/damping
Description: Damping algorithm
Author: Huangjs
Latest version: 2.2.1

<!--
 * @Author: Huangjs
 * @Date: 2021-05-10 15:55:29
 * @LastEditors: Huangjs
 * @LastEditTime: 2023-10-10 14:30:31
 * @Description: ******
-->

## damping

拖动阻尼算法

### 安装使用

```sh

npm install @huangjs888/damping --save

```

### 使用方法

```js

import { revokeDamping, performDamping } from '@huangjs888/damping';

const a = performDamping(100, 500);
const b = revokeDamping(a, 500);

  
```
npm package: @huangjs888/drag-order
Description: 对栅栏结构里的item，实现拖拽，排序等操作
Author: Huangjs
Latest version: 1.2.1

<!--
 * @Author: Huangjs
 * @Date: 2021-05-10 15:55:29
 * @LastEditors: Huangjs
 * @LastEditTime: 2021-12-29 16:07:48
 * @Description: ******
-->
## drag-order
对栅栏结构里的item，实现拖拽，排序等操作。
### 使用方法
```javascript
import dragOrder from '@huangjs888/drag-order';

 // 数组代表有多个元素去拖起操作，一个的时候可以直接设置为对象
const elements = [
  {
    // mousedown注册对象
    element: document.createElement('div'),
    // 有值表示使用element的子元素作为真正的mousedown注册对象，那么element则为代理,key和value则为寻找该元素的关键点
    bubble: ['data-id', 'list-item'],
    // mousedown后生成的随鼠标一起移动的元素，返回元素对象及初始坐标，可以直接是一个生成好的对象
    helper: function helper() {
      return {
        domEl: document.createElement('div'), // 使用自己构造的，不使用，这不传，会自动构造和拖动元素一样的元素
        className: 'helper', // 样式class
        isMouse: true, // 计算位置时是参照左顶点位置（false）还是鼠标当前位置（true）
        offsetX: -10, // x偏移量
        offsetY: -6, // y偏移量
      };
    },
  },
];
// 数组代表可判断撞击元素为多个，一个的时候可以直接设置为对象
const targets = [
  {
    // 需要判断是否击中的目标元素或容器
    element: document.createElement('div'),
    // 表示判断击中element的子孙元素，element则为容器，默认所有的子元素等宽高，另外子元素较多，父元素出现滚动条，则拖拽时会判断自动滚动，默认只有竖向滚动条，无左右滚动条
    children: [],
    // children为true的时候可以设置，设置后返还排序时相应的分割线，比如放在谁和谁之间，会有个分割线，可以直接是一个生成好的对象
    devider: function devider() {
      return {
        className: 'devider', // 样式class
        offsetX: 0, // x偏移量
        offsetY: -6, // y偏移量
        wide: 1, // 分割线粗细
        color: '#000', // 分割线颜色
      };
    },
    // 移动的时候事件，主要有进入撞击元素，离开撞击元素和在撞击元素上移动三种事件, 移动速度太快的话可能，扑捉不到
    move: function move() {},
    // 鼠标松开后的回调函数return true表示helper元素不再回到原来的位置
    drop: function drop() {},
  },
];
dragOrder(elements, targets);
```
npm package: @huangjs888/lightdom
Description: Light dom operate
Author: Huangjs
Latest version: 2.1.5

<!--
 * @Author: Huangjs
 * @Date: 2021-05-10 15:55:29
 * @LastEditors: Huangjs
 * @LastEditTime: 2023-10-09 15:39:16
 * @Description: ******
-->

## lightdom

一些dom操作

### 安装使用

```sh

npm install @huangjs888/lightdom --save

```

### 使用方法

```js

import { createElement, setStyle, addClass, hasClass, removeClass } from '@huangjs888/lightdom';

const dom = createElement(
  {
    className: ['test', 'test2'],
    style: { width: 100, marginTop: 20 },
  },
  createElement('span', { style: { color: 'red' }, dataName: 'span element' }, 'Hello World'),
  document.body,
);
setStyle(addClass(removeClass(dom, 'test2'), 'test3'), { height: 100, marginLeft: 20 });
console.log(hasClass(dom, 'test2'));
console.log(hasClass(dom, 'test3'));


```
npm package: @huangjs888/load-image
Description: Load image with progress
Author: Huangjs
Latest version: 1.2.2

<!--
 * @Author: Huangjs
 * @Date: 2021-05-10 15:55:29
 * @LastEditors: Huangjs
 * @LastEditTime: 2023-10-10 14:38:03
 * @Description: ******
-->

## loadImage

图片加载封装，带有进度的

### 安装使用

```sh

npm install @huangjs888/load-image --save

```

### 使用方法

```js

import loadImage from '@huangjs888/load-image';

// 第二个参数为progress函数，传入，则使用ajax获取图片资源（ajax方式不适合跨域获取图片），不传，则直接Image对象
loadImage('http://xx/xxx/xx.jpg', (v) => {
  document.body.innerHTML = `<span>加载进度：${v * 100}%</span>`;
})
  .then((image) => {
    image.width = image.naturalWidth;
    image.height = image.naturalHeight;
    document.body.appendChild(image);
  })
  .catch(() => {
    document.body.innerHTML = '<span>加载图片失败！</span>';
  });

  
```
npm package: @huangjs888/preview-image
Description: Preview Images
Author: Huangjs
Latest version: 2.1.1

<!--
 * @Author: Huangjs
 * @Date: 2021-05-10 15:55:29
 * @LastEditors: Huangjs
 * @LastEditTime: 2023-10-20 15:14:07
 * @Description: ******
-->
## preview-image

H5 预览图片

## 使用方法

### Html
```html
  <body>
    <div class="imglist">
      <img class="img" src="/http/maxAgeImage" />
      <img class="img" src="xxx.jpg" />
      <img class="img" src="yyy.png" />
    </div>
  </body>
```

### Rawjs

```js

import { previewImage } from '@huangjs888/previewImage';

const imgDoms = document.querySelectorAll('.img');
const imgUrls = [];
imgDoms.forEach((a) => {
  const current = a.src;
  imgUrls.push(current);
  a.onclick = () => {
    const { left, top, width, height } = a.getBoundingClientRect();
    const clickPosition = { x: left + width / 2, y: top + height / 2, w: width, h: height };
    previewImage({
      current,
      urls: imgUrls,
      // 预览图片时，图片将从该位置打开
      clickPosition,
      // 移动端长按或web端右键可以在此弹出自定义菜单操作
      onContextMenu: () => {
        alert('rawjs');
      },
    });
  };
});

  
```
### React

```js

import React from 'react';
import { PreviewImage } from '@huangjs888/preview-image/react';

const list = ['/http/maxAgeImage', 'xxx.jpg', 'yyy.png'];

function App() {
  const [open, setOpen] = React.useState(false);
  const [current, setCurrent] = React.useState('');
  const [clickPosition, setClickPosition] = React.useState();
  const click = (e) => {
    const origin = e.target;
    const { left, top, width, height } = origin.getBoundingClientRect();
    const position = { x: left + width / 2, y: top + height / 2, w: width, h: height };
    // 如果不是缩略图，此时可以获取点击位置
    /* const position = {
      x: (e.touches ?? [e])[0]?.pageX,
      y: (e.touches ?? [e])[0]?.pageY,
    }; */
    setClickPosition(position);
    setCurrent(origin.src);
    setOpen(true);
  };
  return (
    <div className="App">
      <div className="imglist">
        {list.map((url, index) => (
          <img key={index} onClick={click} className="img" src={url} alt="" />
        ))}
      </div>
      <PreviewImage
        open={open}
        onClose={() => setOpen(false)}
        current={current}
        urls={list}
        // 预览图片时，图片将从该位置打开
        clickPosition={clickPosition}
        // 长按或右键可以在此弹出自定义菜单操作
        onContextMenu={() => alert('react')}
      />
    </div>
  );
}
  
```

在线预览地址：[https://huangjs888.github.io/preview-image/](https://huangjs888.github.io/preview-image/ "预览")
npm package: @huangjs888/react-native-amap
Description: Implement Gaode map and OpenGL.
Author: Huangjs
Latest version: 1.4.0

<!--
 * @Author: Huangjs
 * @Date: 2022-05-27 10:16:38
 * @LastEditors: Huangjs
 * @LastEditTime: 2022-08-15 15:58:08
 * @Description: ******
-->
# react-native-amap

## Getting started

`$ npm install @huangjs888/react-native-amap --save`

## Usage
```javascript

import React, { useRef, useState, useEffect, useCallback } from 'react';
import { Platform, View } from 'react-native';
import AMapView, {
  Mesh,
  Marker,
  AMapModule,
} from '@huangjs888/react-native-amap';

export default () => {
  const markerRef = useRef(null);
  const [infoData, setInfoData] = useState(null);
  const [valueDomain, setValueDomain] = useState(null);
  const onRendered = useCallback((e) => {
    console.log(e.nativeEvent);
    setLoading(false);
    const { type, message } = e.nativeEvent;
    if (type === 'error') {
      console.log(message);
    } else {
    }
  }, []);
  const mapInitCompleted = useCallback(() => {
    fetch().then(() => {
      setValueDomain({
        range: [0, 20, 40, 60, 80, 100],
        color: [
          'rgb(0,228,0)',
          'rgb(255,255,0)',
          'rgb(255,126,0)',
          'rgb(255,0,0)',
          'rgb(153,0,76)',
          'rgb(126,0,35)',
        ],
        opacity: 0.8,
      });
      setInfoData({
        position: {
          latitude: 31.552206,
          longitude: 120.262698,
        },
        point: [],
      });
    });
  }, []);
  useEffect(() => {
    AMapModule.init(
      Platform.select({
        android: '7baf5432c0bc7010fd21986e57e5c032',
        ios: '7baf5432c0bc7010fd21986e57e5c032',
      }),
    );
  }, []);
  return (
    <View>
      <AMapView
        scaleControlsEnabled
        zoomControlsEnabled
        indoorViewEnabled
        locationEnabled
        compassEnabled
        onLongClick={(e) => {
          console.log(e.nativeEvent);
        }}
        onInitialized={mapInitCompleted}>
        <Mesh
          dataSource={infoData}
          valueDomain={valueDomain}
          onRendered={onRendered}
        />
        <Marker
          ref={markerRef}
          opacity={0}
          title="拾取信息"
          infoWindowEnable
          infoWindowOffset={{ x: 0, y: 72 }}
          onInfoWindowClick={() =>
            markerRef.current && markerRef.current.hideInfoWindow()
          }
          description="哈哈哈"
        />
      </AMapView>
    </View>
  );
};

```
npm package: @huangjs888/react-native-colorize
Description: Draw pseudo-color use webview
Author: Huangjs
Latest version: 1.1.0

<!--
 * @Author: Huangjs
 * @Date: 2022-05-27 10:16:38
 * @LastEditors: Huangjs
 * @LastEditTime: 2022-08-15 16:05:34
 * @Description: ******
-->
# react-native-colorize

## Getting started

`$ npm install @huangjs888/react-native-colorize --save`

## Usage
```javascript

import React, { useRef, useCallback } from 'react';
import { View } from 'react-native';
import Colorize from '@huangjs888/react-native-colorize';

export default () => {
  const colorizeRef = useRef(null);
  const handleOnError = useCallback((e) => {
    console.log(e.message);
  }, []);
  const handleOnInit = useCallback(() => {
    if (colorizeRef.current) {
      colorizeRef.current.on('click', (data) => {
        console.log('click', data);
      });
      colorizeRef.current.init({
        tooltip: true,
        legend: [16, 0, 32],
        padding: [20, 10, 20, 28],
        xAxis: {
          type: 'time',
          showRange: false,
        },
        yAxis: {
          type: 'linear',
          showRange: false,
        },
      });
      colorizeRef.current.label({
        x: {
          label: '时间',
          unit: '',
        },
        y: {
          label: '距离',
          unit: 'm',
        },
        z: {
          label: 'PM10',
          unit: 'ug/m³',
        },
      });
      colorizeRef.current.domain({
        x: [0, new Date().getTime()],
        y: [0, 6000],
        z: [
          1,
          [
            'rgb(0,228,0)',
            'rgb(255,255,0)',
            'rgb(255,126,0)',
            'rgb(255,0,0)',
            'rgb(153,0,76)',
            'rgb(126,0,35)',
          ],
          [0, 20, 40, 60, 80, 100],
        ],
      });
      colorizeRef.current.data({ x: [], y: [], z: [] });
      colorizeRef.current.render();
    }
  }, []);
  return (
    <View>
      <Colorize
        ref={colorizeRef}
        height={200}
        onInit={handleOnInit}
        onError={handleOnError}
      />
    </View>
  );
};
  
```
npm package: @huangjs888/react-native-picker
Description: react native component implement picker and datetime-picker
Author: Huangjs
Latest version: 1.1.2

<!--
 * @Author: Huangjs
 * @Date: 2022-05-27 10:16:38
 * @LastEditors: Huangjs
 * @LastEditTime: 2022-12-12 09:38:53
 * @Description: ******
-->
# react-native-picker

## Getting started

`$ npm install @huangjs888/react-native-picker --save`

## Usage
```javascript

import React, { useState } from 'react';
import { View } from 'react-native';
import Picker, {
  DateTimePicker,
  ComposeDateTimePicker,
} from '@huangjs888/react-native-picker';

const items = [
  { label: 'Sin数据', value: 'key0' },
  { label: 'Cos数据', value: 'key1' },
  { label: 'Tan数据', value: 'key3' },
  { label: 'Cat数据', value: 'key4' },
  { label: 'Dog数据', value: 'key5' },
  { label: 'Bob数据', value: 'key6' },
  { label: 'Key数据', value: 'key7' },
  { label: 'Bla数据', value: 'key8' },
  { label: 'Edg数据', value: 'key9' },
];

export default () => {
  const [selected, setSelected] = useState('key5');
  const [value, setValue] = useState(new Date());
  return (
    <View>
      <Picker
        onValueChange={(v) => {
          setSelected(v);
        }}
        selectedValue={selected}
        indicator={false}
        curtain={true}>
        {items.map((item) => (
          <Picker.Item key={item.value} value={item.value} label={item.label} />
        ))}
      </Picker>
      <DateTimePicker
        display="spinner"
        mode="date"
        onChange={(e, date) => {
          setValue(date);
          console.log(date);
        }}
        value={value}
        minimumDate={new Date(2012, 10, 2, 8, 12, 5, 10)}
        maximumDate={new Date(2032, 10, 10, 13, 42, 30, 1)}
        locale="zh-Hans"
      />
      <ComposeDateTimePicker
        onChange={(e, date) => {
          setValue(date);
          console.log(date);
        }}
        value={value}
        locale="zh-Hans"
        is24Hour={is24Hour}
        minuteInterval={5}
      />
    </View>
  );
};

```
npm package: @huangjs888/slide-view
Description: Left-slide operations on lists, e.g. delete
Author: Huangjs
Latest version: 2.4.7

<!--
 * @Author: Huangjs
 * @Date: 2021-05-10 15:55:29
 * @LastEditors: Huangjs
 * @LastEditTime: 2023-10-20 15:13:12
 * @Description: ******
-->
## slide-view

H5列表左右滑动操作

### 使用方法

```html
  <body>
    <h2>滑动操作示例</h2>
    <div class="slide-view-example">
      <div class="slide-view-item"></div>
    </div>
  </body>
```

```js

  import { SlideView } from '@huangjs888/slide-view';

  const container = document.querySelectorAll('.slide-view-item')[0];
  const cell = document.createElement('div');
  cell.classList.add('slide-view-cell');
  const span = document.createElement('span');
  span.innerText = '滑动操作示例';
  cell.appendChild(span);
  const item = new SlideView({
    container,
    className: 'slideview-action',
    content: cell,
    friction: 0.6,
    rebounce: 12,
    duration: 0.4,
    timing: 'ease',
    rightActions: {
      className: 'leftAction',
      style:'accordion',
      disable: false,
      threshold: 40,
      overshoot: true,
      items: [
        {
          text: '立即回复',
          color: '#fff',
          background: '#3478F3',
          confirm: {
            text: '确定回复',
          },
          collapse: false,
          data: { id: 1 },
        },
        {
          text: '设旗标',
          color: '#fff',
          background: '#F19A39',
          confirm: {
            text: '确定设旗标',
          },
          collapse: true,
          data: { id: 2 },
        },
        {
          icon: './delete.png',
          text: '删除',
          color: '#fff',
          background: '#EA4D3E',
          confirm: {
            text: '删除',
            icon: './delete-black.png',
          },
          collapse: false,
          data: { id: 3 },
        },
      ],
    },
  });
  item.on('show', (e) => {
    console.log(`item-show:${e.direction}`);
  });
  item.on('hide', () => {
    console.log('item-hide');
  });
  item.on('buttonPress', (e) => {
    console.log(`item-buttonPress: ${e.data && e.data.id}`);
    if (item.element && e.data && e.data.del) {
      const viewEl = item.element.parentNode;
      viewEl.style.opacity = '1';
      window.requestAnimationFrame(() => {
        viewEl.style.opacity = '0';
        viewEl.style.transition = 'opacity 0.8s';
        viewEl.ontransitionend = (ee) => {
          if (ee.target === viewEl && ee.propertyName === 'opacity') {
            viewEl.ontransitionend = null;
            item && item.destory();
            viewEl.style.opacity = '1';
            viewEl.style.transition = '';
          }
        };
      });
    }
  });
  item.on('buttonConfirm', (e) => {
    console.log(`item-buttonConfirm: ${e.data && e.data.id}`);
  });
  item.on('press', () => {
    console.log('item-press');
  });
  item.on('longPress', () => {
    console.log('item-longPress');
  });
  item.on('doublePress', () => {
    console.log('item-doublePress');
  });

```

### react 使用方法

请参考 example/src/SlideView.tsx,  example/src/app.tsx


在线预览地址:[https://huangjs888.github.io/slide-view/](https://huangjs888.github.io/slide-view/ "预览")
npm package: @huangjs888/transform
Description: Style transform
Author: Huangjs
Latest version: 1.2.2

<!--
 * @Author: Huangjs
 * @Date: 2021-05-10 15:55:29
 * @LastEditors: Huangjs
 * @LastEditTime: 2023-10-09 15:38:51
 * @Description: ******
-->

## transform

样式变换

### 安装使用

```sh

npm install @huangjs888/transform --save

```

### css3样式：

```css

body{
  transform: matrix3d(
    1, 0, 0, 0,
    0, 1, 0, 0,
    0, 0, 1, 0,
    0, 0, 0, 1
  );
}
  
```

### 使用方法

```js

import Transform from '@huangjs888/transform';

const transform = new Transform({ a: 0, k: 1, x: 0, y: 0 });
const raw = transform.toRaw();
raw.a += 1;
raw.k *= 2;
raw.x += 1;
raw.y += 1;
document.body.style.transform = transform.toString();
  
```
npm package: @huangjuncheng/my-button-component
Description: A simple button component with alert functionality
Latest version: 1.0.0

# My Button Component

A simple React button component that shows an alert popup when clicked.

## Installation

```bash
npm install my-button-component
```

## Usage

```jsx
import React from 'react';
import { Button } from 'my-button-component';

function App() {
  return (
    <div>
      <Button />
    </div>
  );
}

export default App;
```

## Features

- Simple button component
- Shows alert popup on click
- Easy to integrate with React applications

## License

MIT
npm package: @huangming1994/antd-mobile
Description: 基于 React 的移动设计规范实现
Latest version: 2.1.9

English | [简体中文](./README.zh-CN.md)

<p align="center">
  <a href="http://mobile.ant.design">
    <img width="320" src="https://zos.alipayobjects.com/rmsportal/wIjMDnsrDoPPcIV.png">
  </a>
</p>

# Ant Design Mobile
[![](https://img.shields.io/travis/ant-design/ant-design-mobile.svg?style=flat-square)](https://travis-ci.org/ant-design/ant-design-mobile)
[![Codecov](https://img.shields.io/codecov/c/github/ant-design/ant-design-mobile.svg?style=flat-square)](https://codecov.io/gh/ant-design/ant-design-mobile)
[![npm package](https://img.shields.io/npm/v/antd-mobile.svg?style=flat-square)](https://www.npmjs.org/package/antd-mobile)
[![NPM downloads](http://img.shields.io/npm/dm/antd-mobile.svg?style=flat-square)](https://npmjs.org/package/antd-mobile)
[![Dependency Status](https://david-dm.org/ant-design/ant-design-mobile.svg?style=flat-square)](https://david-dm.org/ant-design/ant-design-mobile)
[![CDNJS](https://img.shields.io/cdnjs/v/antd-mobile.svg?style=flat-square)](https://cdnjs.com/libraries/antd-mobile)
[![Percentage of issues still open](http://isitmaintained.com/badge/open/ant-design/ant-design-mobile.svg)](http://isitmaintained.com/project/ant-design/ant-design-mobile "Percentage of issues still open")
[![Join the chat at https://gitter.im/ant-design/ant-design](https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

A configurable Mobile UI specification and React-based implementation.

[中文 README](README.zh-CN.md)

## Features

- Follow Ant Design Mobile UI specification.
- Configurable UI style for different products.
- Support web and native usages based on React Native.
- Develop in TypeScript.

## Demo

### mobile web demo

<img width="250" src="https://zos.alipayobjects.com/rmsportal/dLMGiKuyFLBfYfm.png" />

http://mobile.ant.design/kitchen-sink/

### react native demo

<img width="250" src="https://user-images.githubusercontent.com/1698185/27175806-f0a8a7f0-51f2-11e7-85fb-4b7ea9f89e5b.png" />

install expo app: https://expo.io/tools

## Install & Usage

[introduce](docs/react/introduce.en-US.md#安装)

## Browser Support

- `iOS`
- `Android 4.0+`

## Links

- [Home Page](http://mobile.ant.design)
- [Developer Instruction](http://github.com/ant-design/ant-design-mobile/blob/master/development.en-US.md)
- [React components](http://github.com/react-component/)
- [Demos](https://github.com/ant-design/antd-mobile-samples)

## Contributing

We welcome all contributions, please read our [CONTRIBUTING.md](https://github.com/ant-design/ant-design-mobile/blob/master/.github/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/ant-design/ant-design-mobile/pulls) or as a [GitHub issue](https://github.com/ant-design/ant-design-mobile/issues). If you'd like to improve code, check out the [Development Instruction](https://github.com/ant-design/ant-design-mobile/blob/master/development.en-US.md) and have a good time! :)