open-index/open-npm huggingface dataset:
npm package: @sishuguojixuefu/react-base16-styling
Description: React styling with base16 color scheme support
Author: Alexander
Latest version: 0.4.9

# react-base16-styling
React styling with base16 color scheme support

Inspired by [react-themeable](https://github.com/markdalgleish/react-themeable), this utility provides flexible theming for your component with [base16](https://github.com/chriskempson/base16) theme support.

## Install

```
npm i -S react-base16-styling
```

## Usage

```jsx
import { createStyling } from 'react-base16-styling';
import base16Themes from './base16Themes';

function getStylingFromBase16(base16Theme) {
  return {
    myComponent: {
      backgroundColor: base16Theme.base00
    },

    myComponentToggleColor({ style, className }, clickCount) {
      return {
        style: {
          ...style,
          backgroundColor: clickCount % 2 ? 'red' : 'blue'
        }
      }
    }
  };
}

const createStylingFromTheme = createStyling(getStylingFromBase16, {
  defaultBase16: base16Themes.solarized,
  base16Themes
});

class MyComponent extends Component {
  state = { clickCount: 0 }
  render() {
    const { theme, invertTheme } = this.props;
    const { clickCount } = this.state;
    
    const styling = createStylingFromTheme(theme, invertTheme);
    
    return (
      <div {...styling('myComponent')}>
        <a onClick={() => this.setState({ clickCount: clickCount + 1 })}>Click Me</a>
        <div {...styling('myComponentToggleColor', clickCount)}>
          {clickCount}
        </div>
      </div>
    )
  }
}
```

## `createStyling`

```js
function(getStylingFromBase16, defaultStylingOptions, themeOrStyling, isLightTheme)
```

Argument | Signature | Description
----|-----|-----
`getStylingFromBase16` | `function(base16Theme)` | creates object with default stylings for your component, using provided base16 theme.
`defaultStylingOptions` | `{ defaultBase16, base16Themes }` | optional parameters, allow to set default `base16` theme and additional `base16` themes for component
`themeOrStyling` | `string` or `object` | `base16` theme name, `base16` theme object or styling object
`invertTheme` | `boolean` | if `true`, theme colors are inverted, creating light version of the theme


Styling object values could be:
    - objects (treated as style definitions)
    - strings (class names)
    - functions (they may be provided with additional parameters and should return object { style, className })

## `getBase16Theme`
```js
function(themeOrStyling, base16Themes)
```

Helper method that returns `base16` theme object if `themeOrStyling` is `base16` theme name or theme object.
npm package: @sishuguojixuefu/react-native-float-ball
Description: floatBall with PanResponder
Author: 杨俊宁
Latest version: 0.5.4

# react-native-float-ball

## 安装

```sh
$ yarn add @sishuguojixuefu/react-native-float-ball
```

## 基本使用

```
import FloatBall from '@sishuguojixuefu/react-native-float-ball'
<FloatBall
  onPress={() => {
    alert('点击了球')
  }}
/>
```

## Props

| prop          | 描述                         |
| ------------- | ---------------------------- |
| onPress       | 球的点击事件                 |
| onLongPress   | 球的长按事件                 |
| onDoublePress | 球的双击事件                 |
| ballSize      | 球的尺寸，默认 50            |
| left          | 球初始距离左边的位置，默认 0 |
| top           | 球初始距离顶部的位置，默认 0 |
| keepToTheSide | 是否靠边，默认 true          |
| customBall    | 自定义球                     |

## 参考链接

- [PanResponder](https://reactnative.cn/docs/panresponder/)
- [React-Native PanResponder 的学习与使用](http://t.cn/AiNz29NE)
- [react-native 的 PanResponder 详解研究](http://t.cn/AiNmWcqR)
- [TouchableOpacity with parent PanResponder](http://t.cn/AiNminWr)
- [UNSAFE_componentWillMount()](http://t.cn/AiNEEpAB)
npm package: @sishuguojixuefu/react-native-form
Description: 私塾动态表单组件
Author: sishu
Latest version: 1.0.2

# @sishuguojixuefu/react-native-form

> 私塾动态表单项目

## 特性

- 根据特定的领域模型，自动匹配 Form 表单组件，自动映射数据
- 基于 `rc-form` 实现自动表单校验
- 支持以 `children` 的形式扩展组件

## 安装

> 如果要使用内置的组件，请确保安装并配置了 @sishuguojixuefu/antd-mobile-rn、react-native-image-crop-picker、react-native-image-zoom-viewer

```sh
$ yarn add @sishuguojixuefu/react-native-form
```

## 内置组件

> 自定义内置组件的开发示例：http://t.cn/AijGYRMJ

- Input: 普通的输入框
- NumberInput: 数字输入框
- SsSelect: 选择器
- SsMultiSelect: 多选选择器
- SsDate: 日期选择器
- SsDateRange: 日期范围选择器
- SsImagePicker: 图片选择组件
- SsDescription: 描述组件
- SsAmount: 金额输入组件
- SsRating: 星星评分组件
- Switch: 开关组件

> 一些特定业务组件无法内置，这种业务组件的开发请参考：http://t.cn/AijGjjVs

## 属性

| 属性     | 说明                                                  | 类型                    | 默认值 |
| -------- | ----------------------------------------------------- | ----------------------- | ------ |
| ref      | `ref={ref => {this.form = ref}`                       | Function                | -      |
| items    | 动态表单渲染的依据，结构需严格遵守 FormItemsPropsType | `FormOptionPropsType[]` | -      |
| noBorder | 是否显示 border                                       | boolean                 | true   |
| style    | 样式                                                  | object                  | -      |