npm - @proximus/lavender-switch-native - Versions diffs - 0.1.0-alpha.4 → 0.1.0-beta.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/PxSwitch.js +130 -0
package/package.json +10 -30
package/CHANGELOG.md +0 -55
package/src/PxSwitch.tsx +0 -233
package/tsconfig.json +0 -8
/package/{src/index.ts → dist/index.js} +0 -0

package/dist/PxSwitch.js ADDED Viewed

@@ -0,0 +1,130 @@
+import React, { Component } from 'react';
+import { Animated, StyleSheet, TouchableWithoutFeedback, View, } from 'react-native';
+import { Directions, FlingGestureHandler, State, } from 'react-native-gesture-handler';
+import { a11y, e2eID } from '@proximus/lavender-common-native';
+import { ThemeContext, } from '@proximus/lavender-styling-native';
+const defaults = {
+    circleSize: 20,
+    duration: 200,
+    interpolationRange: 100,
+};
+export class PxSwitch extends Component {
+    static defaultProps = {
+        disabled: false,
+        value: false,
+        type: 'primary',
+    };
+    static contextType = ThemeContext;
+    constructor(props) {
+        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) {
+        const { disabled, value } = this.props;
+        if (prevProps.value !== value && !disabled) {
+            this._animateSwitch(!!value);
+            this.setState({ value: !!value });
+        }
+    }
+    _handleSwitch = (activate) => {
+        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) => {
+        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?.theme?.t('ColorBackgroundContainerStrongDefault'),
+                this.context?.theme?.t('ColorBackgroundPurposeSuccessDefault'),
+            ],
+        });
+        return (React.createElement(FlingGestureHandler, { direction: Directions.LEFT, numberOfPointers: 1, onHandlerStateChange: ({ nativeEvent }) => {
+                if (nativeEvent.state === State.ACTIVE && value) {
+                    this._handleSwitch(false);
+                }
+            } },
+            React.createElement(FlingGestureHandler, { direction: Directions.RIGHT, numberOfPointers: 1, onHandlerStateChange: ({ nativeEvent }) => {
+                    if (nativeEvent.state === State.ACTIVE && !value) {
+                        this._handleSwitch(true);
+                    }
+                } },
+                React.createElement(View, { style: [this.props.containerStyle] },
+                    React.createElement(TouchableWithoutFeedback, { disabled: disabled, onPress: () => this._handleSwitch(), accessible: true, ...e2eID(testID), ...a11y({
+                            accessible: true,
+                            accessibilityRole: 'switch',
+                            accessibilityLabel: this.props.labelAccessibilityProp?.accessibilityLabel,
+                            accessibilityHint: this.props.labelAccessibilityProp?.accessibilityHint,
+                            accessibilityState: {
+                                disabled,
+                                selected: value,
+                            },
+                            ...accessibilityProps,
+                        }) },
+                        React.createElement(Animated.View, { style: [
+                                styles.track,
+                                {
+                                    backgroundColor: containerBackground,
+                                    borderRadius: this.context?.theme?.t('RadiusPill').number,
+                                    width: this.context?.theme?.t('SizeActionInputSwitchWidth').number,
+                                    padding: this.context?.theme?.t('Padding3xsMobile').number,
+                                },
+                                disabled && {
+                                    backgroundColor: this.context?.theme?.t('ColorBackgroundStateDisabledDefault'),
+                                },
+                            ] },
+                            React.createElement(Animated.View, { style: [
+                                    {
+                                        width: this.context?.theme?.t('SizeIconM').number,
+                                        height: this.context?.theme?.t('SizeIconM').number,
+                                        borderRadius: this.context?.theme?.t('RadiusPill').number,
+                                        backgroundColor: disabled
+                                            ? this.context?.theme?.t('ColorBackgroundStateDisabledDefault')
+                                            : this.context?.theme?.t('ColorBackgroundContainerLightDefault'),
+                                        transform: [{ translateX: this.state.transformSwitch }],
+                                    },
+                                ] })))))));
+    }
+}
+const styles = StyleSheet.create({
+    track: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+    },
+});

package/package.json CHANGED Viewed

@@ -1,41 +1,21 @@
 {
   "name": "@proximus/lavender-switch-native",
-  "version": "0.1.0-alpha.4",
+  "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",
-    "prepublish": "yarn clean && 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.4",
-    "@proximus/lavender-icon-native": "0.1.0-alpha.4",
-    "@proximus/lavender-styling-native": "0.1.0-alpha.3",
-    "@proximus/lavender-texts-native": "0.1.0-alpha.4"
-  },
   "publishConfig": {
     "access": "public"
-  },
-  "lerna": {
-    "command": {
-      "publish": {
-        "assets": [
-          "dist",
-          "src",
-          "package.json"
-        ]
-      }
-    }
-  },
-  "gitHead": "6e9252a716a08ededdfbfd6f5b1db70ab21e026e"
+  }
 }

package/CHANGELOG.md DELETED Viewed

@@ -1,55 +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.4](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-switch-native@0.1.0-alpha.3...@proximus/lavender-switch-native@0.1.0-alpha.4) (2025-09-19)
-**Note:** Version bump only for package @proximus/lavender-switch-native
-# [0.1.0-alpha.3](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-switch-native@0.1.0-alpha.2...@proximus/lavender-switch-native@0.1.0-alpha.3) (2025-09-12)
-**Note:** Version bump only for package @proximus/lavender-switch-native
-# [0.1.0-alpha.2](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-switch-native@0.1.0-alpha.1...@proximus/lavender-switch-native@0.1.0-alpha.2) (2025-09-05)
-### Features
-- **BCRI-4279213:** update token architecture and component styles ([#18](https://github.com/Pxs-Corporate/react-native-lavender/issues/18)) ([2fabf41](https://github.com/Pxs-Corporate/react-native-lavender/commit/2fabf416ce069e9756daa868c3012181db87e7f5))
-# [0.1.0-alpha.1](https://github.com/Pxs-Corporate/react-native-lavender/compare/@proximus/lavender-switch-native@0.1.0-alpha.0...@proximus/lavender-switch-native@0.1.0-alpha.1) (2025-08-13)
-### Bug Fixes
-- **BCRI-4210372:** fix types field in modules ([68ac126](https://github.com/Pxs-Corporate/react-native-lavender/commit/68ac12657112473ae9e0e683076b1d9172be9ce6))
-# 0.1.0-alpha.0 (2025-08-13)
-### Bug Fixes
-- **BCRI-000000:** switch using tokens ([0442cc0](https://github.com/Pxs-Corporate/react-native-lavender/commit/0442cc0aba3fcbbcb21938da0747ea593d413bf6))
-- **BCRI-00000:** mendix widgets ids for backward compatibility ([69e61fd](https://github.com/Pxs-Corporate/react-native-lavender/commit/69e61fde51b203b947ec7a1094f10067a1ecfdbb))
-### Features
-- **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
-- **BCRI-3651771:** switch module ([d6f8151](https://github.com/Pxs-Corporate/react-native-lavender/commit/d6f81510e13ca3634f843caa0286c444373a039c))
-- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
-- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
-- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))
-- **BCRI-4210372:** fix bad version numbers ([bc6a8ba](https://github.com/Pxs-Corporate/react-native-lavender/commit/bc6a8ba48c15347442f2ac38dacae7ffba3d95eb))
-# (2025-08-13)
-### Bug Fixes
-- **BCRI-000000:** switch using tokens ([0442cc0](https://github.com/Pxs-Corporate/react-native-lavender/commit/0442cc0aba3fcbbcb21938da0747ea593d413bf6))
-- **BCRI-00000:** mendix widgets ids for backward compatibility ([69e61fd](https://github.com/Pxs-Corporate/react-native-lavender/commit/69e61fde51b203b947ec7a1094f10067a1ecfdbb))
-### Features
-- **BCRI-000000:** remove default E2E on DEV env build for all components ([a5d27bf](https://github.com/Pxs-Corporate/react-native-lavender/commit/a5d27bfaaebf5b75f3160f31c64b590b7bd00b93))
-- **BCRI-3651771:** switch module ([d6f8151](https://github.com/Pxs-Corporate/react-native-lavender/commit/d6f81510e13ca3634f843caa0286c444373a039c))
-- **BCRI-3660857:** cell components ([af9e45c](https://github.com/Pxs-Corporate/react-native-lavender/commit/af9e45cefc20d08d2338380ff4cd8cd6851abe24))
-- **BCRI-4002610:** update icon handling and remove deprecated font references ([4399fe4](https://github.com/Pxs-Corporate/react-native-lavender/commit/4399fe4bff06aa70f5c29705fcc89d5243b0e3e7))
-- **BCRI-4210372:** automatic versionning ([9c1f0a0](https://github.com/Pxs-Corporate/react-native-lavender/commit/9c1f0a00e19a9d1a277044ea627632032a674102))

package/src/PxSwitch.tsx DELETED Viewed

@@ -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/tsconfig.json DELETED Viewed

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

/package/{src/index.ts → dist/index.js} RENAMED Viewed

File without changes