@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.10

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -1,45 +1,44 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Platform, View, StyleSheet } from 'react-native';
-import ButtonBase from '../Button/ButtonBase';
-import { useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, pressProps, variantProp, getTokensPropType } from '../utils/propTypes';
-import { useInputValue } from '../utils/input';
-
-const selectButtonTokens = ({
-  borderColor,
-  borderWidth,
-  borderRadius,
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  outerBorderRadius,
-  outerBackgroundColor,
-  backgroundColor,
-  opacity,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  shadow
-}) => ({
-  borderColor,
-  borderWidth,
-  borderRadius,
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  outerBorderRadius,
-  outerBackgroundColor,
-  backgroundColor,
-  opacity,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  shadow,
-  width: null // make it wrap around our track width
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _input = require("../utils/input");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectButtonTokens = tokens => (0, _propTypes2.selectTokens)('Button', { ...tokens,
+  // Width tokens are applied to our inner track. Disable Button width token so it wraps our track width.
+  width: null
+}); // Map and rename icon-specific tokens to name used within Icon
+
 
+const selectIconTokens = ({
+  iconSize,
+  iconColor
+}) => ({
+  size: iconSize,
+  color: iconColor
 });
 
 const selectTrackStyles = ({
@@ -68,8 +67,8 @@ const selectSwitchStyles = ({
   borderWidth: switchBorderWidth,
   borderColor: switchBorderColor,
   borderRadius: switchBorderRadius,
-  ...applyShadowToken(switchShadow),
-  ...Platform.select({
+  ...(0, _ThemeProvider.applyShadowToken)(switchShadow),
+  ..._Platform.default.select({
     // TODO: https://github.com/telus/universal-design-system/issues/487
     web: {
       transition: 'transform 200ms'
@@ -77,16 +76,6 @@ const selectSwitchStyles = ({
   })
 });
 
-const selectIconTokens = ({
-  iconSize,
-  iconColor,
-  iconOpacity
-}) => ({
-  opacity: iconOpacity,
-  size: iconSize,
-  color: iconColor
-});
-
 const ToggleSwitch = ({
   value,
   initialValue,
@@ -96,21 +85,21 @@ const ToggleSwitch = ({
   variant,
   accessibilityRole = 'switch'
 }) => {
-  const getTokens = useThemeTokensCallback('ToggleSwitch');
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ToggleSwitch', tokens, variant);
   const {
     currentValue,
     setValue
-  } = useInputValue({
+  } = (0, _input.useInputValue)({
     value,
     initialValue,
     onChange
   });
 
-  const handlePress = () => setValue(!currentValue);
+  const handlePress = event => setValue(!currentValue, event);
 
-  const getButtonTokens = buttonState => selectButtonTokens(getTokens(tokens, variant, buttonState));
+  const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
-  return /*#__PURE__*/React.createElement(ButtonBase, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
     selected: currentValue,
     inactive: inactive,
     tokens: getButtonTokens,
@@ -118,66 +107,69 @@ const ToggleSwitch = ({
     accessibilityState: {
       checked: currentValue
     },
-    onPress: handlePress
-  }, buttonState => {
-    const themeTokens = getTokens(tokens, variant, buttonState);
-    const IconComponent = themeTokens.icon;
-    const switchStyles = selectSwitchStyles(themeTokens);
-    const trackStyles = selectTrackStyles(themeTokens);
-    const iconTokens = selectIconTokens(themeTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
-    // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
-
-    const slideStart = 0;
-    const slideEnd = themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2;
-    const switchOffset = buttonState.selected ? slideEnd : slideStart;
-    const switchPositionStyle = {
-      transform: [{
-        translateX: switchOffset
-      }]
-    };
-    return /*#__PURE__*/React.createElement(View, {
-      style: [staticStyles.track, trackStyles]
-    }, /*#__PURE__*/React.createElement(View, {
-      style: [staticStyles.switch, switchStyles, switchPositionStyle]
-    }, IconComponent && /*#__PURE__*/React.createElement(IconComponent, {
-      tokens: iconTokens
-    })));
+    onPress: handlePress,
+    children: buttonState => {
+      const themeTokens = getTokens(buttonState);
+      const IconComponent = themeTokens.icon;
+      const switchStyles = selectSwitchStyles(themeTokens);
+      const trackStyles = selectTrackStyles(themeTokens);
+      const iconTokens = selectIconTokens(themeTokens); // If drag-slide support is needed, use a PanResponder and apply these to an Animated value.
+      // Use translate transforms for smoothest non-thread-blocking animations and to allow drag.
+
+      const slideStart = 0;
+      const slideEnd = themeTokens.width - themeTokens.switchSize - themeTokens.trackBorderWidth * 2;
+      const switchOffset = buttonState.selected ? slideEnd : slideStart;
+      const switchPositionStyle = {
+        transform: [{
+          translateX: switchOffset
+        }]
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.track, trackStyles],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.switch, switchStyles, switchPositionStyle],
+          children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+          })
+        })
+      });
+    }
   });
 };
 
-ToggleSwitch.propTypes = { ...a11yProps.propTypes,
-  ...pressProps.propTypes,
-  tokens: getTokensPropType('ToggleSwitch'),
-  variant: variantProp.propType,
+ToggleSwitch.propTypes = { ..._propTypes2.a11yProps.propTypes,
+  ..._propTypes2.pressProps.propTypes,
+  tokens: (0, _propTypes2.getTokensPropType)('ToggleSwitch'),
+  variant: _propTypes2.variantProp.propType,
 
   /**
    * If this is a "controlled" component and a parent handles its selected state,
    * tells the switch if it is on (true) or off (false).
    */
-  value: PropTypes.bool,
+  value: _propTypes.default.bool,
 
   /**
    * If this is an "uncontrolled" component that handles its own selected state,
    * optionally tells the switch if it should default to on (true) or off (false).
    */
-  initialValue: PropTypes.bool,
+  initialValue: _propTypes.default.bool,
 
   /**
    * Function called when the switch is toggled, with one boolean argument that is the
    * new position of the switch, on (true) or off (false). For "controlled" components,
    * this should always be passed and used to control the state of the switch.
    */
-  onChange: PropTypes.func,
+  onChange: _propTypes.default.func,
 
   /**
    * If passed, the switch does not respond to user input and may recieve different
    * theme tokens if the theme supports inactive appearance.
    */
-  inactive: PropTypes.bool
+  inactive: _propTypes.default.bool
 };
-const staticStyles = StyleSheet.create({
+
+const staticStyles = _StyleSheet.default.create({
   track: {
-    flex: 1,
+    flexGrow: 1,
     alignSelf: 'stretch',
     flexDirection: 'row'
   },
@@ -186,4 +178,6 @@ const staticStyles = StyleSheet.create({
     justifyContent: 'center'
   }
 });
-export default ToggleSwitch;
+
+var _default = ToggleSwitch;
+exports.default = _default;

package/lib/ToggleSwitch/index.js

@@ -1,2 +1,13 @@
-import ToggleSwitch from './ToggleSwitch';
-export default ToggleSwitch;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _ToggleSwitch.default;
+exports.default = _default;

package/lib/Tooltip/Backdrop.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function createPortalNode(nodeId) {
+  const node = document.createElement('div');
+  node.id = nodeId; // we're mimicking React Native's Modal component, except for using an `absolute` position
+  // this way the backdrop stays in place when scrolling the window - that's why we need to
+  // position it at the scroll position when rendering
+
+  node.style.cssText = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
+  document.body.appendChild(node);
+  return node;
+}
+
+function removePortalNode(nodeId) {
+  const node = document.getElementById(nodeId);
+  node.parentElement.removeChild(node);
+}
+/**
+ * The Web version of Backdrop utilizes React Portal for overlaying page content, so it is
+ * dependent on ReactDOM. Tooltip's closing is handled by the onBlur callback of the control.
+ */
+
+
+function Backdrop({
+  children
+}) {
+  const [portalNode, setPortalNode] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const nodeId = "tooltip-backdrop-".concat(Date.now());
+    const node = createPortalNode(nodeId);
+    setPortalNode(node);
+    return () => {
+      removePortalNode(nodeId);
+    };
+  }, []);
+  return portalNode ? /*#__PURE__*/_reactDom.default.createPortal(children, portalNode) : null;
+}
+
+Backdrop.propTypes = {
+  children: _propTypes.default.node
+};
+var _default = Backdrop;
+exports.default = _default;

package/lib/Tooltip/Backdrop.native.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
+
+var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * The Native version of Backdrop utilizes React Native's Modal component for overlaying
+ * the app's content, since this is the only reliable to do it. The only drawback of this
+ * approach is that a press on the Backdrop will actually stop the press event from propagating,
+ * i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
+ */
+function Backdrop({
+  onPress,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    transparent: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+      onPress: onPress,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.backdrop,
+        children: children
+      })
+    })
+  });
+}
+
+var _default = Backdrop;
+exports.default = _default;
+Backdrop.propTypes = {
+  onPress: _propTypes.default.func,
+  children: _propTypes.default.node
+};
+
+const staticStyles = _StyleSheet.default.create({
+  backdrop: {
+    flexBasis: '100%',
+    backgroundColor: 'rgba(255, 255, 255, 0.5)' // to visually mark that the content beneath is not pressable
+
+  }
+});