@proximus/lavender-switch-native 0.1.0-alpha.6 → 0.1.0-beta.0

package/dist/PxSwitch.js

@@ -86,7 +86,7 @@ export class PxSwitch extends Component {
                     }
                 } },
                 React.createElement(View, { style: [this.props.containerStyle] },
-                    React.createElement(TouchableWithoutFeedback, { disabled: disabled, onPress: () => this._handleSwitch(), accessible: false, ...e2eID(testID), ...a11y({
+                    React.createElement(TouchableWithoutFeedback, { disabled: disabled, onPress: () => this._handleSwitch(), accessible: true, ...e2eID(testID), ...a11y({
                             accessible: true,
                             accessibilityRole: 'switch',
                             accessibilityLabel: this.props.labelAccessibilityProp?.accessibilityLabel,

package/package.json

@@ -1,48 +1,21 @@
 {
   "name": "@proximus/lavender-switch-native",
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-beta.0",
   "description": "Lavender react native switch component",
   "license": "MIT",
-  "main": "src/index.ts",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
   "type": "module",
-  "scripts": {
-    "clean": "rm -rf dist",
-    "transform-package-json": "node ../../../scripts/tranformPackageJson.js package.json dist/far/away",
-    "prepublish": "yarn clean && yarn transform-package-json && yarn build",
-    "build": "npx tsc -p tsconfig.json"
-  },
   "peerDependencies": {
-    "@proximus/lavender-common-native": "workspace:*",
-    "@proximus/lavender-icon-native": "workspace:*",
-    "@proximus/lavender-styling-native": "workspace:*",
-    "@proximus/lavender-texts-native": "workspace:*",
+    "@proximus/lavender-common-native": "*",
+    "@proximus/lavender-icon-native": "*",
+    "@proximus/lavender-styling-native": "*",
+    "@proximus/lavender-texts-native": "*",
     "react-native-gesture-handler": "*"
   },
-  "devDependencies": {
-    "@proximus/lavender-common-native": "0.1.0-alpha.6",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.6",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.5",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.6"
-  },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          {
-            "from": "dist/far/away/package.json",
-            "to": "."
-          },
-          "dist/*.js",
-          "dist/*.d.ts",
-          "dist/*.d.ts.map",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
+  }
 }

package/CHANGELOG.md

@@ -1,14 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [0.1.0-alpha.6](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-switch-native@0.1.0-alpha.5...@proximus/lavender-switch-native@0.1.0-alpha.6) (2025-09-26)
-
-**Note:** Version bump only for package @proximus/lavender-switch-native
-
-# [0.1.0-alpha.5](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-switch-native@0.1.0-alpha.4...@proximus/lavender-switch-native@0.1.0-alpha.5) (2025-09-25)
-
-### Bug Fixes
-
-- **BCRI-000000:** no free space on gh runner during build ([#27](https://github.com/Pxs-Corporate/react-native-lavender/issues/27)) ([a7c8604](https://github.com/Pxs-Corporate/react-native-lavender/commit/a7c86043b5cefcb10fd768d449c5718fbabe87ec))

package/dist/far/away/package.json

@@ -1,36 +0,0 @@
-{
-  "name": "@proximus/lavender-switch-native",
-  "version": "0.1.0-alpha.6",
-  "description": "Lavender react native switch component",
-  "license": "MIT",
-  "main": "dist/index.js",
-  "type": "module",
-  "peerDependencies": {
-    "@proximus/lavender-common-native": "*",
-    "@proximus/lavender-icon-native": "*",
-    "@proximus/lavender-styling-native": "*",
-    "@proximus/lavender-texts-native": "*",
-    "react-native-gesture-handler": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          {
-            "from": "dist/far/away/package.json",
-            "to": "."
-          },
-          "dist/*.js",
-          "dist/*.d.ts",
-          "dist/*.d.ts.map",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "e50a17526561b3eafb159e36c737173956093e0d"
-}

package/src/PxSwitch.tsx

@@ -1,233 +0,0 @@
-import React, { Component } from 'react';
-import {
-  AccessibilityProps,
-  Animated,
-  StyleProp,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-  ViewStyle,
-} from 'react-native';
-import {
-  Directions,
-  FlingGestureHandler,
-  State,
-} from 'react-native-gesture-handler';
-
-import { a11y, e2eID } from '@proximus/lavender-common-native';
-
-import {
-  ITheme,
-  IThemeContext,
-  ThemeContext,
-} from '@proximus/lavender-styling-native';
-
-export interface ISwitchProps extends AccessibilityProps {
-  onValueChange: (value: boolean) => void;
-  disabled?: boolean;
-  lookOnlyProps?: boolean;
-  value?: boolean;
-  testID?: string;
-  labelAccessibilityProp?: AccessibilityProps;
-  containerStyle?: StyleProp<ViewStyle>;
-  hasLabel?: boolean;
-}
-
-interface IState {
-  value: boolean;
-  transformSwitch: Animated.Value;
-  containerBackgroundColor: Animated.Value;
-}
-
-const defaults = {
-  circleSize: 20,
-  duration: 200,
-  interpolationRange: 100,
-};
-
-export class PxSwitch extends Component<ISwitchProps, IState> {
-  static defaultProps = {
-    disabled: false,
-    value: false,
-    type: 'primary',
-  };
-
-  static contextType = ThemeContext;
-
-  constructor(props: ISwitchProps) {
-    super(props);
-
-    const { value } = props;
-    this.state = {
-      containerBackgroundColor: new Animated.Value(
-        value ? defaults.interpolationRange : -defaults.interpolationRange
-      ),
-      transformSwitch: new Animated.Value(
-        value ? defaults.circleSize - 10 : -defaults.circleSize + 10
-      ),
-      value: value || false,
-    };
-  }
-
-  componentDidUpdate(prevProps: ISwitchProps) {
-    const { disabled, value } = this.props;
-
-    if (prevProps.value !== value && !disabled) {
-      this._animateSwitch(!!value);
-      this.setState({ value: !!value });
-    }
-  }
-
-  _handleSwitch = (activate?: boolean) => {
-    const { onValueChange, disabled, lookOnlyProps } = this.props;
-
-    if (!disabled) {
-      if (lookOnlyProps) {
-        if (onValueChange) {
-          onValueChange(!this.props.value);
-        }
-      } else {
-        const { value } = this.state;
-        this._animateSwitch(activate ?? !value);
-        this.setState({ value: activate ?? !value }, () => {
-          if (onValueChange) {
-            onValueChange(this.state.value);
-          }
-        });
-      }
-    }
-  };
-
-  _animateSwitch = (value: boolean) => {
-    Animated.parallel([
-      Animated.spring(this.state.transformSwitch, {
-        useNativeDriver: true,
-        toValue: value ? defaults.circleSize - 10 : -defaults.circleSize + 10,
-      }),
-      Animated.timing(this.state.containerBackgroundColor, {
-        duration: defaults.duration,
-        useNativeDriver: true,
-        toValue: value
-          ? defaults.interpolationRange
-          : -defaults.interpolationRange,
-      }),
-    ]).start();
-  };
-
-  render() {
-    const { containerBackgroundColor, value } = this.state;
-
-    const { testID, disabled, ...accessibilityProps } = this.props;
-
-    const containerBackground = containerBackgroundColor.interpolate({
-      inputRange: [-defaults.interpolationRange, defaults.interpolationRange],
-      outputRange: [
-        ((this.context as IThemeContext)?.theme as ITheme)?.t(
-          'ColorBackgroundContainerStrongDefault'
-        ),
-        ((this.context as IThemeContext)?.theme as ITheme)?.t(
-          'ColorBackgroundPurposeSuccessDefault'
-        ),
-      ],
-    });
-
-    return (
-      <FlingGestureHandler
-        direction={Directions.LEFT}
-        numberOfPointers={1}
-        onHandlerStateChange={({ nativeEvent }) => {
-          if (nativeEvent.state === State.ACTIVE && value) {
-            this._handleSwitch(false);
-          }
-        }}
-      >
-        <FlingGestureHandler
-          direction={Directions.RIGHT}
-          numberOfPointers={1}
-          onHandlerStateChange={({ nativeEvent }) => {
-            if (nativeEvent.state === State.ACTIVE && !value) {
-              this._handleSwitch(true);
-            }
-          }}
-        >
-          <View style={[this.props.containerStyle]}>
-            <TouchableWithoutFeedback
-              disabled={disabled}
-              onPress={() => this._handleSwitch()}
-              accessible={false}
-              {...e2eID(testID)}
-              {...a11y({
-                accessible: true,
-                accessibilityRole: 'switch',
-                accessibilityLabel:
-                  this.props.labelAccessibilityProp?.accessibilityLabel,
-                accessibilityHint:
-                  this.props.labelAccessibilityProp?.accessibilityHint,
-                accessibilityState: {
-                  disabled,
-                  selected: value,
-                },
-                ...accessibilityProps,
-              })}
-            >
-              <Animated.View
-                style={[
-                  styles.track,
-                  {
-                    backgroundColor: containerBackground,
-                    borderRadius: (
-                      (this.context as IThemeContext)?.theme as ITheme
-                    )?.t('RadiusPill').number,
-                    width: (
-                      (this.context as IThemeContext)?.theme as ITheme
-                    )?.t('SizeActionInputSwitchWidth').number,
-                    padding: (
-                      (this.context as IThemeContext)?.theme as ITheme
-                    )?.t('Padding3xsMobile').number,
-                  },
-                  disabled && {
-                    backgroundColor: (
-                      (this.context as IThemeContext)?.theme as ITheme
-                    )?.t('ColorBackgroundStateDisabledDefault'),
-                  },
-                ]}
-              >
-                <Animated.View
-                  style={[
-                    {
-                      width: (
-                        (this.context as IThemeContext)?.theme as ITheme
-                      )?.t('SizeIconM').number,
-                      height: (
-                        (this.context as IThemeContext)?.theme as ITheme
-                      )?.t('SizeIconM').number,
-
-                      borderRadius: (
-                        (this.context as IThemeContext)?.theme as ITheme
-                      )?.t('RadiusPill').number,
-                      backgroundColor: disabled
-                        ? ((this.context as IThemeContext)?.theme as ITheme)?.t(
-                            'ColorBackgroundStateDisabledDefault'
-                          )
-                        : ((this.context as IThemeContext)?.theme as ITheme)?.t(
-                            'ColorBackgroundContainerLightDefault'
-                          ),
-                      transform: [{ translateX: this.state.transformSwitch }],
-                    },
-                  ]}
-                ></Animated.View>
-              </Animated.View>
-            </TouchableWithoutFeedback>
-          </View>
-        </FlingGestureHandler>
-      </FlingGestureHandler>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  track: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-});

package/src/index.ts

@@ -1 +0,0 @@
-export * from './PxSwitch';

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../../tsconfig.npm.json",
-  "compilerOptions": {
-    "outDir": "dist"
-  },
-  "include": ["src","../../../lib.d.ts"],
-  "exclude": ["dist", "node_modules", "src/**/*.spec.tsx", "src/**/*.spec.ts"]
-}