@proximus/lavender-switch-native 0.1.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,35 @@
+# 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.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/dist/PxSwitch.d.ts

@@ -0,0 +1,43 @@
+import React, { Component } from 'react';
+import { AccessibilityProps, Animated, StyleProp, ViewStyle } from 'react-native';
+export interface ISwitchProps extends AccessibilityProps {
+    onValueChange: (value: boolean) => void;
+    disabled?: boolean;
+    lookOnlyProps?: boolean;
+    value?: boolean;
+    isPending?: boolean;
+    circleColors?: Array<string>;
+    circleStyle?: StyleProp<ViewStyle>;
+    trackColors?: Array<string>;
+    trackStyle?: StyleProp<ViewStyle>;
+    disabledStyle?: StyleProp<ViewStyle>;
+    testID?: string;
+    height?: number;
+    type?: 'order' | 'primary';
+    labelAccessibilityProp?: AccessibilityProps;
+    containerStyle?: StyleProp<ViewStyle>;
+    hasLabel?: boolean;
+}
+interface IState {
+    value: boolean;
+    transformSwitch: Animated.Value;
+    containerBackgroundColor: Animated.Value;
+    yesLabelOpacity: Animated.Value;
+    pendingOpacity: Animated.Value;
+    noLabelOpacity: Animated.Value;
+}
+export declare class PxSwitch extends Component<ISwitchProps, IState> {
+    static defaultProps: {
+        disabled: boolean;
+        value: boolean;
+        type: string;
+    };
+    static contextType: React.Context<import("@proximus/lavender-styling-native").IThemeContext>;
+    constructor(props: ISwitchProps);
+    componentDidUpdate(prevProps: ISwitchProps): void;
+    _handleSwitch: (activate?: boolean) => void;
+    _animateSwitch: (value: boolean) => void;
+    render(): React.JSX.Element;
+}
+export {};
+//# sourceMappingURL=PxSwitch.d.ts.map

package/dist/PxSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PxSwitch.d.ts","sourceRoot":"","sources":["../src/PxSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EACL,kBAAkB,EAClB,QAAQ,EACR,SAAS,EAIT,SAAS,EACV,MAAM,cAAc,CAAC;AAWtB,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,sBAAsB,CAAC,EAAE,kBAAkB,CAAC;IAC5C,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,MAAM;IACd,KAAK,EAAE,OAAO,CAAC;IACf,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,wBAAwB,EAAE,QAAQ,CAAC,KAAK,CAAC;IACzC,eAAe,EAAE,QAAQ,CAAC,KAAK,CAAC;IAChC,cAAc,EAAE,QAAQ,CAAC,KAAK,CAAC;IAC/B,cAAc,EAAE,QAAQ,CAAC,KAAK,CAAC;CAChC;AAQD,qBAAa,QAAS,SAAQ,SAAS,CAAC,YAAY,EAAE,MAAM,CAAC;IAC3D,MAAM,CAAC,YAAY;;;;MAIjB;IAEF,MAAM,CAAC,WAAW,2EAAgB;gBAEtB,KAAK,EAAE,YAAY;IA0B/B,kBAAkB,CAAC,SAAS,EAAE,YAAY;IAS1C,aAAa,GAAI,WAAW,OAAO,UAkBjC;IAEF,cAAc,GAAI,OAAO,OAAO,UA+B9B;IAEF,MAAM;CAwIP"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PxSwitch';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@proximus/lavender-switch-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender react native switch component",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "types": "dist/index.d.ts",
+  "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:*",
+    "react-native-gesture-handler": "*"
+  },
+  "devDependencies": {
+    "@proximus/lavender-common-native": "0.1.0-alpha.0",
+    "@proximus/lavender-icon-native": "0.1.0-alpha.0",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.0",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "dist",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "27525289a448a6e4f3c2d36a88b9dc54d0f15fbf"
+}

package/src/PxSwitch.tsx

@@ -0,0 +1,314 @@
+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 { ThemeContext } from '@proximus/lavender-styling-native';
+
+export interface ISwitchProps extends AccessibilityProps {
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+  lookOnlyProps?: boolean;
+  value?: boolean;
+  isPending?: boolean;
+  circleColors?: Array<string>; // Deprecated
+  circleStyle?: StyleProp<ViewStyle>; // Deprecated
+  trackColors?: Array<string>;
+  trackStyle?: StyleProp<ViewStyle>;
+  disabledStyle?: StyleProp<ViewStyle>;
+  testID?: string;
+  height?: number;
+  type?: 'order' | 'primary';
+  labelAccessibilityProp?: AccessibilityProps;
+  containerStyle?: StyleProp<ViewStyle>;
+  hasLabel?: boolean;
+}
+
+interface IState {
+  value: boolean;
+  transformSwitch: Animated.Value;
+  containerBackgroundColor: Animated.Value;
+  yesLabelOpacity: Animated.Value;
+  pendingOpacity: Animated.Value;
+  noLabelOpacity: 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, isPending, disabled } = props;
+    this.state = {
+      containerBackgroundColor: new Animated.Value(
+        value || isPending
+          ? defaults.interpolationRange
+          : -defaults.interpolationRange
+      ),
+      transformSwitch: new Animated.Value(
+        value || isPending
+          ? defaults.circleSize - 10
+          : -defaults.circleSize + 10
+      ),
+      yesLabelOpacity: new Animated.Value(
+        disabled || !props.value || isPending ? 0 : 1
+      ),
+      pendingOpacity: new Animated.Value(isPending && !disabled ? 1 : 0),
+      noLabelOpacity: new Animated.Value(
+        disabled || value || isPending ? 0 : 1
+      ),
+      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) => {
+    const { isPending } = this.props;
+    Animated.parallel([
+      Animated.spring(this.state.transformSwitch, {
+        useNativeDriver: false,
+        toValue:
+          value || isPending
+            ? defaults.circleSize - 10
+            : -defaults.circleSize + 10,
+      }),
+      Animated.timing(this.state.containerBackgroundColor, {
+        duration: defaults.duration,
+        useNativeDriver: false,
+        toValue:
+          value || isPending
+            ? defaults.interpolationRange
+            : -defaults.interpolationRange,
+      }),
+      Animated.spring(this.state.yesLabelOpacity, {
+        useNativeDriver: false,
+        toValue: value && !isPending ? 1 : 0,
+      }),
+      Animated.spring(this.state.noLabelOpacity, {
+        useNativeDriver: false,
+        toValue: value || isPending ? 0 : 1,
+      }),
+      Animated.spring(this.state.pendingOpacity, {
+        useNativeDriver: false,
+        toValue: isPending ? 1 : 0,
+      }),
+    ]).start();
+  };
+
+  render() {
+    const { containerBackgroundColor, value } = this.state;
+
+    const {
+      circleStyle,
+      trackColors,
+      trackStyle,
+      testID,
+      disabled,
+      isPending,
+      height = 28,
+      type,
+      ...accessibilityProps
+    } = this.props;
+
+    const containerBackground = containerBackgroundColor.interpolate({
+      inputRange: [-defaults.interpolationRange, defaults.interpolationRange],
+      outputRange: trackColors || [
+        // @ts-ignore
+        this.context?.theme?.t('BackgroundColorActionNeutralStrongDefault'),
+        type === 'order'
+          ? // @ts-ignore
+            this.context?.theme?.switchActiveForOrder
+          : // @ts-ignore
+            this.context?.theme?.t('BackgroundColorPurposeSuccessDefault'),
+      ],
+    });
+
+    return (
+      // @ts-ignore
+      <FlingGestureHandler
+        direction={Directions.LEFT}
+        numberOfPointers={1}
+        onHandlerStateChange={({ nativeEvent }) => {
+          if (nativeEvent.state === State.ACTIVE && value) {
+            this._handleSwitch(false);
+          }
+        }}
+      >
+        {/*
+        // @ts-ignore */}
+        <FlingGestureHandler
+          direction={Directions.RIGHT}
+          numberOfPointers={1}
+          onHandlerStateChange={({ nativeEvent }) => {
+            if (nativeEvent.state === State.ACTIVE && !value) {
+              this._handleSwitch(true);
+            }
+          }}
+        >
+          <View style={[{ height }, 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,
+                  },
+                  trackStyle,
+                  isPending && {
+                    // @ts-ignore
+                    backgroundColor: this.context?.theme?.switchPending,
+                  },
+                  disabled && {
+                    // @ts-ignore
+                    backgroundColor: this.context?.theme?.t(
+                      'BackgroundColorActionDisabledDefault'
+                    ),
+                  },
+                ]}
+              >
+                <Animated.View
+                  style={[
+                    styles.circle,
+                    {
+                      // @ts-ignore
+                      width: this.context?.theme?.t('AssetsSizeS').number,
+                      // @ts-ignore
+                      height: this.context?.theme?.t('AssetsSizeS').number,
+                      // @ts-ignore
+                      borderRadius: this.context?.theme?.t('RadiusPill').number,
+                      backgroundColor: disabled
+                        ? // @ts-ignore
+                          this.context?.theme?.t(
+                            'BackgroundColorActionDisabledDefault'
+                          )
+                        : // @ts-ignore
+                          this.context?.theme?.t(
+                            'BackgroundColorContainerNeutralBareDefault'
+                          ),
+                      left: this.state.transformSwitch,
+                    },
+                    circleStyle,
+                  ]}
+                ></Animated.View>
+                <Animated.View
+                  style={{
+                    position: 'absolute',
+                    opacity: this.state.yesLabelOpacity,
+                    left: 9,
+                  }}
+                ></Animated.View>
+                {!disabled && (
+                  <Animated.View
+                    style={{
+                      position: 'absolute',
+                      opacity: this.state.noLabelOpacity,
+                      right: 6,
+                    }}
+                  ></Animated.View>
+                )}
+              </Animated.View>
+            </TouchableWithoutFeedback>
+          </View>
+        </FlingGestureHandler>
+      </FlingGestureHandler>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  circle: {
+    borderRadius: 14,
+    alignItems: 'center',
+    // height: defaults.circleSize,
+    // width: defaults.circleSize,
+  },
+  disabled: {
+    bottom: 0,
+    left: 0,
+    opacity: 0.5,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  track: {
+    alignItems: 'center',
+    borderRadius: 14,
+    flex: 1,
+    flexDirection: 'row',
+    height: 30,
+    justifyContent: 'center',
+    width: 48,
+  },
+});

package/src/index.ts

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

package/tsconfig.json

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