From ff72be5bfcd73d1ddf1dc5bc6553461325ba4596 Mon Sep 17 00:00:00 2001 From: kongchuiyu Date: Tue, 17 Dec 2024 17:24:43 +0800 Subject: [PATCH] chore: add license header and format code style --- COMMITTERS.md | 11 ++++ MultiSlider.harmony.js | 6 ++ OAT.xml | 83 +++++++++++++++++++++++++++ README.OpenSource | 11 ++++ README.md | 125 +++-------------------------------------- 5 files changed, 118 insertions(+), 118 deletions(-) create mode 100644 COMMITTERS.md create mode 100644 OAT.xml create mode 100644 README.OpenSource diff --git a/COMMITTERS.md b/COMMITTERS.md new file mode 100644 index 0000000..aef6509 --- /dev/null +++ b/COMMITTERS.md @@ -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) \ No newline at end of file diff --git a/MultiSlider.harmony.js b/MultiSlider.harmony.js index f5b4a34..0df119d 100644 --- a/MultiSlider.harmony.js +++ b/MultiSlider.harmony.js @@ -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'; diff --git a/OAT.xml b/OAT.xml new file mode 100644 index 0000000..fef233f --- /dev/null +++ b/OAT.xml @@ -0,0 +1,83 @@ + + + + + + LICENSE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/README.OpenSource b/README.OpenSource new file mode 100644 index 0000000..5e03a40 --- /dev/null +++ b/README.OpenSource @@ -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." + } +] \ No newline at end of file diff --git a/README.md b/README.md index 8a66a26..a384122 100644 --- a/README.md +++ b/README.md @@ -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 ( - - - - ); -``` -### 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 - { - return () - }} - - customMarkerRight={(e) => { - return () - }} -/> -``` - -### 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) \ No newline at end of file