@itcase/ui 1.1.6 → 1.1.8

package/dist/cjs/hooks/useMediaQueries.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var reactResponsive = require('react-responsive');
+
+var tablet = "48em";
+var mediaQueries = {
+	"mobile-tiny": "15em",
+	"mobile-small": "20em",
+	"mobile-medium": "23.435em",
+	"mobile-normal": "24.375em",
+	"mobile-large": "26.75em",
+	"mobile-extra-large": "30em",
+	"mobile-super-extra-large": "40em",
+	tablet: tablet,
+	"tablet-small": "40em",
+	"tablet-large": "60em",
+	"desktop-small": "60em",
+	"desktop-medium": "64em",
+	"desktop-normal": "72.5em",
+	"desktop-large": "80em",
+	"desktop-extra-large": "90em",
+	"desktop-super-extra-large": "120em",
+	"desktop-huge": "160em"
+};
+
+const isSSR = typeof window === 'undefined';
+function useMediaQueries(userDevice = {}) {
+  // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
+
+  // prettier-ignore
+  const isMobile = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['mobile-tiny'],
+    maxWidth: mediaQueries['tablet']
+  }) || isSSR && Boolean(userDevice.isMobile);
+
+  // const isMobileTiny = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-tiny'],
+  //   maxWidth: mediaQueries['mobile-small'],
+  // })
+  // const isMobileSmall = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-small'],
+  //   maxWidth: mediaQueries['mobile-medium'],
+  // })
+  // const isMobileMedium = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-medium'],
+  //   maxWidth: mediaQueries['mobile-normal'],
+  // })
+  // const isMobileNormal = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-normal'],
+  //   maxWidth: mediaQueries['mobile-large'],
+  // })
+  // const isMobileStandart = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-large'],
+  //   maxWidth: mediaQueries['mobile-extra-large'],
+  // })
+  // const isMobileLarge = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-extra-large'],
+  //   maxWidth: mediaQueries['mobile-super-extra-large'],
+  // })
+
+  reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['mobile-super-extra-large'],
+    maxWidth: mediaQueries['tablet']
+  });
+
+  // prettier-ignore
+  const isTablet = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['tablet'],
+    maxWidth: mediaQueries['desktop-small']
+  }) || isSSR && Boolean(userDevice.isTablet);
+
+  // const isTabletSmall = useMediaQuery({
+  //   minWidth: mediaQueries['tablet-small'],
+  //   maxWidth: mediaQueries['tablet'],
+  // })
+  // const isTabletLarge = useMediaQuery({
+  //   minWidth: mediaQueries['tablet'],
+  //   maxWidth: mediaQueries['tablet-large'],
+  // })
+
+  // prettier-ignore
+  const isDesktop = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['desktop-small'],
+    maxWidth: mediaQueries['desktop-super-huge']
+  }) || isSSR && Boolean(userDevice.isDesktop);
+
+  // const isDesktopSmall = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-small'],
+  //   maxWidth: mediaQueries['desktop-medium'],
+  // })
+  // const isDesktopMedium = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-medium'],
+  //   maxWidth: mediaQueries['desktop-normal'],
+  // })
+  // const isDesktopNormal = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-normal'],
+  //   maxWidth: mediaQueries['desktop-large'],
+  // })
+  // const isDesktopStandart = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-large'],
+  //   maxWidth: mediaQueries['desktop-extra-large'],
+  // })
+  // const isDesktopLarge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-extra-large'],
+  //   maxWidth: mediaQueries['desktop-super-extra-large'],
+  // })
+  // const isDesktopHuge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-super-extra-large'],
+  //   maxWidth: mediaQueries['desktop-huge'],
+  // })
+
+  const isDesktopMega = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['desktop-huge']
+  });
+  return {
+    // isWarning,
+    isMobile: isMobile,
+    // isMobileTiny,
+    // isMobileSmall,
+    // isMobileMedium,
+    // isMobileNormal,
+    // isMobileStandart,
+    // isMobileLarge,
+    isMobileHuge: isMobile,
+    isTablet: isTablet,
+    // isTabletSmall,
+    // isTabletLarge,
+    isDesktop: isDesktop,
+    // isDesktopSmall,
+    // isDesktopMedium,
+    // isDesktopNormal,
+    // isDesktopStandart,
+    // isDesktopLarge,
+    // isDesktopHuge,
+    isDesktopMega: isDesktopMega
+  };
+}
+
+exports.useMediaQueries = useMediaQueries;

package/dist/cjs/hooks/useStyles.js

@@ -0,0 +1,135 @@
+'use strict';
+
+var React = require('react');
+var camelCase = require('lodash/camelCase');
+var maxBy = require('lodash/maxBy');
+var upperFirst = require('lodash/upperFirst');
+var styleAttributes = require('./styleAttributes.js');
+var UIContext = require('../context/UIContext.js');
+require('prop-types');
+require('./useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
+var maxBy__default = /*#__PURE__*/_interopDefault(maxBy);
+var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
+
+let DEVICE_TYPES = [];
+const removeDeviceType = originalKey => {
+  // Remove "mobile"/"tablet"/"desktop"
+  const withOutDeviceType = DEVICE_TYPES.reduce((cleanKey, deviceType) => {
+    if (cleanKey.endsWith(upperFirst__default.default(deviceType))) {
+      return cleanKey.replace(upperFirst__default.default(deviceType), '');
+    }
+    return cleanKey;
+  }, originalKey);
+  return withOutDeviceType;
+};
+function useStyles(props) {
+  const allDevicesTypes = UIContext.useUserDeviceContext();
+  const {
+    isMobile,
+    isTablet,
+    isDesktop,
+    ...fullNamedDeviceTypes
+  } = allDevicesTypes;
+
+  // prettier-ignore
+  const deviceBasePart = React.useMemo(() => isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '', [isMobile, isTablet, isDesktop]);
+  /*
+   * rule of prop key:
+   *
+   * first is style     second is div target  third is device
+   * paddingHorizontal  GridInnerWrapper      MobileNormal
+   *
+   * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
+   */
+
+  const currentDevice = React.useMemo(() => {
+    const deviceTypes = Object.keys(allDevicesTypes).map(key => camelCase__default.default(key.replace('is', '')));
+
+    // if "fullNamedDeviceTypes.isMobileLarge": true - that our device
+    let currentDevice = Object.keys(fullNamedDeviceTypes).find(key => fullNamedDeviceTypes[key]);
+    if (!currentDevice) {
+      currentDevice = deviceBasePart;
+    }
+    currentDevice = upperFirst__default.default(camelCase__default.default(currentDevice.replace('is', '')));
+    DEVICE_TYPES = deviceTypes;
+
+    // Set non-existent "currentDevice" value, to collect default styles later
+    return currentDevice || '__DEVICE_IS_NOT_FOUND__';
+  }, [allDevicesTypes, deviceBasePart]);
+  const collectedStyles = React.useMemo(() => {
+    const resultStyles = {};
+
+    // For every component props
+    Object.entries(props).forEach(([propKey, propValue]) => {
+      // Collect list of possible styles for propKey. e.g:
+      // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
+      const possibleStyleAttributes = styleAttributes.default.filter(styleAttribute => {
+        return propKey.startsWith(styleAttribute);
+      });
+
+      // Get longest style key (e.g. "borderLeftWidth")
+      const currentStyleAttribute = maxBy__default.default(possibleStyleAttributes, 'length');
+      if (currentStyleAttribute) {
+        const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
+        let value = null;
+
+        // e.g. "GridWrapperInner"
+        const targetElementKey = removeDeviceType(propKey.replace(currentStyleAttribute, ''));
+        const targetElementResultKey = camelCase__default.default(targetElementKey) || 'styles';
+        if (!resultStyles[targetElementResultKey]) {
+          resultStyles[targetElementResultKey] = {};
+        }
+        if (isStyleForCurrentDevice) {
+          value = propValue;
+        } else {
+          const propKeyWithOutDeviceType = `${currentStyleAttribute}${targetElementKey}`;
+          const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${deviceBasePart}`;
+          const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
+          let currentValue = resultStyles[targetElementResultKey][currentStyleAttribute];
+          if (propKeyWithOutDeviceType.includes('Horizontal')) {
+            const keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
+            currentValue = resultStyles[targetElementResultKey][keyLeft];
+          } else if (propKeyWithOutDeviceType.includes('Vertical')) {
+            const keyTop = currentStyleAttribute.replace('Vertical', 'Top');
+            currentValue = resultStyles[targetElementResultKey][keyTop];
+          }
+          if (!currentValue) {
+            value = defaultValue;
+          }
+        }
+        if (value) {
+          // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
+          const HAS_UNIT = /\D/;
+          // prettier-ignore
+          const ignorePX = currentStyleAttribute.includes('zIndex') || currentStyleAttribute.includes('order');
+          if (!HAS_UNIT.test(value) && !ignorePX) {
+            value = `${value}px`;
+          }
+          if (currentStyleAttribute.includes('Horizontal')) {
+            const keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
+            const keyRight = currentStyleAttribute.replace('Horizontal', 'Right');
+            resultStyles[targetElementResultKey][keyLeft] = value;
+            resultStyles[targetElementResultKey][keyRight] = value;
+          } else if (currentStyleAttribute.includes('Vertical')) {
+            const keyTop = currentStyleAttribute.replace('Vertical', 'Top');
+            const keyBottom = currentStyleAttribute.replace('Vertical', 'Bottom');
+            resultStyles[targetElementResultKey][keyTop] = value;
+            resultStyles[targetElementResultKey][keyBottom] = value;
+          } else {
+            resultStyles[targetElementResultKey][currentStyleAttribute] = value;
+          }
+        }
+      }
+    });
+    return resultStyles;
+  }, [currentDevice, props.display]); // "props" object maybe big and frequently changing
+
+  return collectedStyles;
+}
+
+exports.useStyles = useStyles;

package/dist/cjs/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './context';
+export * from './hooks';
+export * from './constants';