Skip to content

chore: add license header and format code style #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cmdssd wants to merge 1 commit into
base: sig
Choose a base branch
from
Open

chore: add license header and format code style #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions COMMITTERS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
## Committers列表

### 以下是此项目的committer人员

不区分先后顺序

- [MaDiXin](https://gitee.com/MaDiXin)
- [xiafeng_xf_admin](https://gitee.com/xiafeng_xf_admin)
- [ChenLixi](https://gitee.com/Louis-C7)
- [LinJiacheng](https://gitee.com/LLLLLLin)
- [ZhengJinshou](https://gitee.com/longziz)
6 changes: 6 additions & 0 deletions MultiSlider.harmony.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
/*
* Copyright (c) 2024 Huawei Device Co., Ltd. All rights reserved
* Use of this source code is governed by a MIT license that can be
* found in the LICENSE file.
*/

import React from 'react';
import { Text, Animated } from 'react-native';

Expand Down
83 changes: 83 additions & 0 deletions OAT.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Copyright (c) 2021 Huawei Device Co., Ltd.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

This is the configuration file template for OpenHarmony OSS Audit Tool, please copy it to your project root dir and modify it refer to OpenHarmony/tools_oat/README.

-->

<configuration>
<oatconfig>
<licensefile>LICENSE</licensefile>
<policylist>
<policy name="projectPolicy" desc="">
<policyitem type="license" name="MIT" path=".*" desc="license under the MIT"/>
</policy>
<policy name="projectPolicy" desc="">
<policyitem type="compatibility" name="GPL-2.0+" path=".*" desc="Process that runs independently, invoked by the X process."/>
<policyitem type="compatibility" name="Apache-2.0" path=".*" desc="不影响兼容性"/>
<policyitem type="compatibility" name="BSDStyleLicense" path=".*" desc="不影响兼容性" />
<policyitem type="compatibility" name="MIT" path=".*" desc="不影响兼容性" />
<policyitem type="compatibility" name="GPLStyleLicense" path=".*" desc="不影响兼容性" />
</policy>
</policylist>
<filefilterlist>
<filefilter name="defaultFilter" desc="Files not to check">

</filefilter>
<filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
<filteritem type="filepath" name=".github/.*" desc="git库配置文件，非业务代码，不添加许可证头"/>
<filteritem type="filepath" name="harmony/.*" desc="依赖生成文件，非业务代码，不添加许可证头"/>
<filteritem type="filename" name=".gitignore" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name="LICENSE" desc="版权文件，不添加版权头"/>
<filteritem type="filename" name="metro.config.js" desc="示例工程配置文件，非业务代码，不添加许可证头"/>
<filteritem type="filename" name="package.json" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name="README.md" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name="README.OpenSource" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name="tsconfig.build.json" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name="tsconfig.json" desc="示例工程配置文件，不添加版权头"/>

<filteritem type="filename" name="DefaultLabel.js" desc="需要引用的原库文件，不添加版权头"/>
<filteritem type="filename" name="DefaultMarker.js" desc="需要引用的原库文件，不添加版权头"/>
<filteritem type="filename" name="MultiSlider.js" desc="需要引用的原库文件，不添加版权头"/>
<filteritem type="filename" name="converters.js" desc="需要引用的原库文件，不添加版权头"/>
<filteritem type="filename" name="index.d.ts" desc="需要引用的原库文件，不添加版权头"/>

<filteritem type="filename" name=".npmignore" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name=".prettierrc.js" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name="CHANGELOG" desc="更改说明文件，非业务代码，不添加版权头"/>

<filteritem type="filename" name=".prettierignore" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name="babel.config.js" desc="示例工程配置文件，非业务代码，不添加许可证头"/>
</filefilter>
<filefilter name="binaryFileTypePolicyFilter" desc="Filters for copyright header policies">
<filteritem type="filepath" name="docs/assets/.*" desc="指导文档文件，非业务代码，不添加许可证头"/>
</filefilter>

<filefilter name="copyrightPolicyFilter" desc="Filters for copyright header policies">
<filteritem type="filename" name=".prettierignore" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name="babel.config.js" desc="示例工程配置文件，非业务代码，不添加许可证头"/>

<filteritem type="filename" name="DefaultLabel.js" desc="需要引用的原库文件，不添加版权头"/>
<filteritem type="filename" name="DefaultMarker.js" desc="需要引用的原库文件，不添加版权头"/>
<filteritem type="filename" name="MultiSlider.js" desc="需要引用的原库文件，不添加版权头"/>
<filteritem type="filename" name="converters.js" desc="需要引用的原库文件，不添加版权头"/>
<filteritem type="filename" name="index.d.ts" desc="需要引用的原库文件，不添加版权头"/>

<filteritem type="filename" name=".npmignore" desc="示例工程配置文件，不添加版权头"/>
<filteritem type="filename" name=".prettierrc.js" desc="示例工程配置文件，不添加版权头"/>
</filefilter>
</filefilterlist>
</oatconfig>
</configuration>
11 changes: 11 additions & 0 deletions README.OpenSource
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
[
{
"Name": "react-native-multi-slider",
"License": "MIT License",
"License File": "https://github.com/ptomasroos/react-native-multi-slider/blob/main/LICENSE",
"Version Number": "2.1.1",
"Owner" : "xiafeng@huawei.com",
"Upstream URL": "https://github.com/ptomasroos/react-native-multi-slider",
"Description": "Pure JS react native slider component with one or two markers. Options to customize track, touch area and provide customer markers and callbacks for touch events and value changes."
}
]
125 changes: 7 additions & 118 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,124 +1,13 @@
# react-native-multi-slider
# @react-native-oh-tpl/react-native-multi-slider

Pure JS react native slider component with one or two markers.
Options to customize track, touch area and provide customer markers and callbacks for touch events and value changes.
This project is based on [react-native-multi-slider](https://github.com/ptomasroos/react-native-multi-slider)

## Examples
## Documentation

```
cd example/Basic
npm install
react-native run-ios
react-native run-android
```
[中文](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-multi-slider.md)

![Example](https://raw.githubusercontent.com/ptomasroos/react-native-multi-slider/master/docs/demo.gif)
[English](https://gitee.com/react-native-oh-library/usage-docs/blob/master/en/react-native-multi-slider.md)

## License

## Getting Started

- [Installation](#installation)

### Installation

```bash
$ npm install --save @ptomasroos/react-native-multi-slider
```

### Usage in a ScrollView

```js
import MultiSlider from '@ptomasroos/react-native-multi-slider';

...

enableScroll = () => this.setState({ scrollEnabled: true });
disableScroll = () => this.setState({ scrollEnabled: false });

render() {
return (
<ScrollView scrollEnabled={this.state.scrollEnabled}>
<MultiSlider
...
onValuesChangeStart={this.disableScroll}
onValuesChangeFinish={this.enableScroll}
/>
</ScrollView>
);
```
### shape up CustomMarker as left and right

In order to make different styles on markers you can set isMarkersSeparated to true, define customMarkerLeft and customMarkerRight in MultiSlider. for example:


```js
<MultiSlider
...
isMarkersSeparated={true}

customMarkerLeft={(e) => {
return (<CustomSliderMarkerLeft
currentValue={e.currentValue}/>)
}}

customMarkerRight={(e) => {
return (<CustomSliderMarkerRight
currentValue={e.currentValue}/>)
}}
/>
```

### Partial report of the props
Feel free to contribute to this part of the documentation.


| Prop name | Default value | Type | Purpouse |
|:---------------------------------------------------------------------------------:|:-------------------------------------------------------------:|:-----------------:|:---------------------------------------:|
| values | [0] | array of numbers | Prefixed values of the slider. |
| onValuesChangeStart | () => {} | function | Callback when the value starts changing |
| onValuesChange | () => {} | function | Callback when the value changes |
| onValuesChangeFinish | (values) => {} | function | Callback when the value stops changing |
| sliderLength | 280 | number | Length of the slider (?) |
| touchDimensions | {height: 50,width: 50,borderRadius: 15,slipDisplacement: 200} | object | (?) |
| enableLabel | | function | Enable the label rendering |
| customLabel | | function | Component used for rendering a label above the cursors. |
| customMarker | | function | Component used for the cursor. |
| customMarkerLeft | | function | Component used for the left cursor. |
| customMarkerRight | | function | Component used for the right cursor. |
| isMarkersSeparated | | boolean | See explaination above in the README.md |
| min | 0 | number | Minimum value available in the slider. |
| max | 10 | number | Maximum value available in the slider. |
| step | 1 | number | Step value of the slider. |
| optionsArray | | array of numbers | Possible values of the slider. Ignores min and max. |
| {container/track/selected/unselected/ markerContainer/marker/pressedMarker/step/stepLabel/StepMarker} Style | | style object | Styles for the slider |
| valuePrefix | | string | Prefix added to the value. |
| valueSuffix | | string | Suffix added to the value. |
| enabledOne | true | boolean | Enables the first cursor |
| enabledTwo | true | boolean | Enables the second cursor |
| stepsAs | [] | array of objects | Use stepsAs when you want to customize the steps-labels. stepsAs expects an array of objects [{index: number, stepLabel: string, prefix: string, suffix: string}]. Where index is for which step you want to customize, and all the other steps will show its index as its stepLabel. Both showSteps and showStepsLabels has to be enabled for stepsAs to be used. |
| showSteps | false | boolean | Show steps |
| showStepMarkers | true | boolean | Show steps-markers on the track, showSteps has to be enabled as well |
| showStepLabels | true | boolean | Show steps-labels underneath the track, showSteps has to be enabled as well |
| onToggleOne | undefined | function callback | Listener when first cursor toggles. |
| onToggleTwo | undefined | function callback | Listener when second cursor toggles. |
| allowOverlap | false | boolean | Allow the overlap within the cursors. |
| snapped | false | boolean | Use this when you want a fixed position for your markers, this will split the slider in N specific positions |
| smoothSnapped | false | boolean | Same as snapped but you can move the slider as usual. When released it will go to the nearest marker |
| vertical | false | boolean | Use vertical orientation instead of horizontal. |
| markerOffsetX | 0 | number | Offset the cursor(s) on the X axis |
| markerOffsetY | 0 | number | Offset the cursor(s) on the Y axis |
| markerSize | 0 | number | It determines the marker margin from the edges of the track, useful to avoid the markers to overflow out of the track. |
| minMarkerOverlapDistance | 0 | number | if this is > 0 and allowOverlap is false, this value will determine the closest two markers can come to each other (in pixels, not steps). This can be used for cases where you have two markers large cursors and you don't want them to overlap. Note that markers will still overlap at the start if starting values are too near. CANNOT be combined with minMarkerOverlapStepDistance |
| minMarkerOverlapStepDistance | 0 | number | if this is > 0 and allowOverlap is false, this value will determine the closest two markers can come to each other (in steps, not pixels). This can be used for cases where you have two markers large cursors and you don't want them to overlap. Note that markers will still overlap at the start if starting values are too near. CANNOT be combined with minMarkerOverlapDistance |
| imageBackgroundSource | undefined | string | Specifies the source as required by [ImageBackground](https://facebook.github.io/react-native/docs/imagebackground)|
| testID | | string | Used to locate this view in end-to-end tests. |

# Recommendations

For very large min = 0 & max = 99999999 and very small step = 1, the step generation loop generates very large array which can causes a crash. Its better to dynamically generate a step size in those cases.

```js
step = Math.round(Math.abs(max - min) / 100)
```

Credit https://github.com/ptomasroos/react-native-multi-slider/issues/281#issuecomment-1700770841
This project is based on [The MIT License (MIT)](https://github.com/ptomasroos/react-native-multi-slider/blob/master/LICENSE)