@react-native-ohos/native-base 3.4.29-rc.1

package/lib/commonjs/hooks/useThemeProps/propsFlattenerTest.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propsFlattener = exports.compareSpecificity = void 0;
+
+var _lodash = _interopRequireDefault(require("lodash.merge"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SPECIFICITY_100 = 100;
+const SPECIFICITY_70 = 70;
+const SPECIFICITY_60 = 60;
+const SPECIFICITY_55 = 55;
+const SPECIFICITY_50 = 50;
+const SPECIFICITY_40 = 40;
+const SPECIFICITY_30 = 30;
+const SPECIFICITY_10 = 10;
+const SPECIFICITY_1 = 1;
+const specificityPrecedence = [SPECIFICITY_100, SPECIFICITY_70, SPECIFICITY_60, SPECIFICITY_55, SPECIFICITY_50, SPECIFICITY_40, SPECIFICITY_30, SPECIFICITY_10, SPECIFICITY_1];
+const INITIAL_PROP_SPECIFICITY = {
+  [SPECIFICITY_100]: 0,
+  [SPECIFICITY_70]: 0,
+  [SPECIFICITY_60]: 0,
+  [SPECIFICITY_50]: 0,
+  [SPECIFICITY_55]: 0,
+  [SPECIFICITY_40]: 0,
+  [SPECIFICITY_30]: 0,
+  [SPECIFICITY_10]: 0,
+  [SPECIFICITY_1]: 0
+};
+const pseudoPropsMap = {
+  _web: {
+    dependentOn: 'platform',
+    priority: SPECIFICITY_10
+  },
+  _ios: {
+    dependentOn: 'platform',
+    priority: SPECIFICITY_10
+  },
+  _android: {
+    dependentOn: 'platform',
+    priority: SPECIFICITY_10
+  },
+  _light: {
+    dependentOn: 'colormode',
+    priority: SPECIFICITY_10
+  },
+  _dark: {
+    dependentOn: 'colormode',
+    priority: SPECIFICITY_10
+  },
+  // TODO: have to add more interactionProps and stateProps
+  _indeterminate: {
+    dependentOn: 'state',
+    respondTo: 'isIndeterminate',
+    priority: SPECIFICITY_30
+  },
+  _checked: {
+    dependentOn: 'state',
+    respondTo: 'isChecked',
+    priority: SPECIFICITY_30
+  },
+  // Add new pseudeo props in between -------
+  _readOnly: {
+    dependentOn: 'state',
+    respondTo: 'isReadOnly',
+    priority: SPECIFICITY_30
+  },
+  // Add new pseudeo props in between -------
+  _invalid: {
+    dependentOn: 'state',
+    respondTo: 'isInvalid',
+    priority: SPECIFICITY_40
+  },
+  _focus: {
+    dependentOn: 'state',
+    respondTo: 'isFocused',
+    priority: SPECIFICITY_50
+  },
+  _focusVisible: {
+    dependentOn: 'state',
+    respondTo: 'isFocusVisible',
+    priority: SPECIFICITY_55
+  },
+  _hover: {
+    dependentOn: 'state',
+    respondTo: 'isHovered',
+    priority: SPECIFICITY_60
+  },
+  _pressed: {
+    dependentOn: 'state',
+    respondTo: 'isPressed',
+    priority: SPECIFICITY_70
+  },
+  _disabled: {
+    dependentOn: 'state',
+    respondTo: 'isDisabled',
+    priority: SPECIFICITY_100
+  }
+};
+
+const compareSpecificity = (exisiting, upcoming, ignorebaseTheme) => // property?: any
+{
+  if (!exisiting) return true;
+  if (!upcoming) return false;
+  const condition = ignorebaseTheme ? specificityPrecedence.length - 1 : specificityPrecedence.length;
+
+  for (let index = 0; index < condition; index++) {
+    if (exisiting[specificityPrecedence[index]] > upcoming[specificityPrecedence[index]]) {
+      return false;
+    } else if (exisiting[specificityPrecedence[index]] < upcoming[specificityPrecedence[index]]) {
+      return true;
+    }
+  }
+
+  return true;
+};
+
+exports.compareSpecificity = compareSpecificity;
+
+const shouldResolvePseudoProp = ({
+  property,
+  state,
+  platform,
+  colormode
+}) => {
+  if (pseudoPropsMap[property].dependentOn === 'platform') {
+    return property === "_".concat(platform);
+  } else if (pseudoPropsMap[property].dependentOn === 'colormode') {
+    return property === "_".concat(colormode);
+  } else if (pseudoPropsMap[property].dependentOn === 'state') {
+    return state[pseudoPropsMap[property].respondTo];
+  } else {
+    return false;
+  }
+};
+
+const simplifyProps = ({
+  props,
+  colormode,
+  platform,
+  state,
+  currentSpecificity,
+  previouslyFlattenProps
+}, flattenProps = {}, specificityMap = {}, priority) => {
+  for (const property in props) {
+    var _pseudoPropsMap$prope, _pseudoPropsMap$prope2;
+
+    // NOTE: the order is important here. Keep in mind while specificity breakpoints.
+    const propertySpecity = currentSpecificity ? { ...currentSpecificity
+    } : { ...INITIAL_PROP_SPECIFICITY,
+      [SPECIFICITY_1]: priority
+    };
+
+    if (state[(_pseudoPropsMap$prope = pseudoPropsMap[property]) === null || _pseudoPropsMap$prope === void 0 ? void 0 : _pseudoPropsMap$prope.respondTo] || ['_dark', '_light', '_web', '_ios', '_android'].includes(property)) {
+      if (shouldResolvePseudoProp({
+        property,
+        state,
+        platform,
+        colormode
+      })) {
+        propertySpecity[pseudoPropsMap[property].priority]++;
+        simplifyProps({
+          props: props[property],
+          colormode,
+          platform,
+          state,
+          currentSpecificity: propertySpecity,
+          previouslyFlattenProps: previouslyFlattenProps
+        }, flattenProps, specificityMap, priority);
+      }
+    } else if (state[(_pseudoPropsMap$prope2 = pseudoPropsMap[property]) === null || _pseudoPropsMap$prope2 === void 0 ? void 0 : _pseudoPropsMap$prope2.respondTo] === undefined) {
+      if (property.startsWith('_')) {
+        if (compareSpecificity(specificityMap[property], propertySpecity, false)) {
+          specificityMap[property] = propertySpecity; // merging internal props (like, _text, _checked, ...)
+
+          flattenProps[property] = (0, _lodash.default)({}, flattenProps[property], props[property]);
+        } else {
+          flattenProps[property] = (0, _lodash.default)({}, props[property], flattenProps[property]);
+        }
+      } else {
+        if (compareSpecificity(specificityMap[property], propertySpecity, false)) {
+          specificityMap[property] = propertySpecity; // replacing simple props (like, p, m, bg, color, ...)
+
+          flattenProps[property] = props[property];
+        }
+      }
+    }
+  }
+};
+
+const propsFlattener = ({
+  props,
+  colormode,
+  platform,
+  state,
+  currentSpecificityMap,
+  previouslyFlattenProps
+}, priority) => {
+  const flattenProps = {};
+
+  for (const property in props) {
+    var _pseudoPropsMap$prope3;
+
+    if (state[(_pseudoPropsMap$prope3 = pseudoPropsMap[property]) === null || _pseudoPropsMap$prope3 === void 0 ? void 0 : _pseudoPropsMap$prope3.respondTo] === undefined && property.startsWith('_')) {
+      flattenProps[property] = previouslyFlattenProps[property];
+    }
+  }
+
+  const specificityMap = currentSpecificityMap || {}; // STEP 1.a (if): Check weather it should be recursively resolved
+  // NOTE: (when true) recursively resolved it
+  // STEP 1.b (else if): Check specificty
+  // STEP 1.b.i: Check for pseudo props
+  // NOTE: (when true) Merge it.
+  // NOTE: (when false) Replace it.
+
+  simplifyProps({
+    props,
+    colormode,
+    platform,
+    state,
+    currentSpecificityMap,
+    previouslyFlattenProps
+  }, flattenProps, specificityMap, priority);
+  return [flattenProps, specificityMap];
+};
+
+exports.propsFlattener = propsFlattener;
+//# sourceMappingURL=propsFlattenerTest.js.map

package/lib/commonjs/hooks/useThemeProps/propsFlattenerTest.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["propsFlattenerTest.tsx"],"names":["SPECIFICITY_100","SPECIFICITY_70","SPECIFICITY_60","SPECIFICITY_55","SPECIFICITY_50","SPECIFICITY_40","SPECIFICITY_30","SPECIFICITY_10","SPECIFICITY_1","specificityPrecedence","INITIAL_PROP_SPECIFICITY","pseudoPropsMap","_web","dependentOn","priority","_ios","_android","_light","_dark","_indeterminate","respondTo","_checked","_readOnly","_invalid","_focus","_focusVisible","_hover","_pressed","_disabled","compareSpecificity","exisiting","upcoming","ignorebaseTheme","condition","length","index","shouldResolvePseudoProp","property","state","platform","colormode","simplifyProps","props","currentSpecificity","previouslyFlattenProps","flattenProps","specificityMap","propertySpecity","includes","undefined","startsWith","propsFlattener","currentSpecificityMap"],"mappings":"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","sourcesContent":["import merge from 'lodash.merge';\r\n\r\nconst SPECIFICITY_100 = 100;\r\nconst SPECIFICITY_70 = 70;\r\nconst SPECIFICITY_60 = 60;\r\nconst SPECIFICITY_55 = 55;\r\nconst SPECIFICITY_50 = 50;\r\nconst SPECIFICITY_40 = 40;\r\nconst SPECIFICITY_30 = 30;\r\nconst SPECIFICITY_10 = 10;\r\nconst SPECIFICITY_1 = 1;\r\nconst specificityPrecedence = [\r\n  SPECIFICITY_100,\r\n  SPECIFICITY_70,\r\n  SPECIFICITY_60,\r\n  SPECIFICITY_55,\r\n  SPECIFICITY_50,\r\n  SPECIFICITY_40,\r\n  SPECIFICITY_30,\r\n  SPECIFICITY_10,\r\n  SPECIFICITY_1,\r\n];\r\nconst INITIAL_PROP_SPECIFICITY = {\r\n  [SPECIFICITY_100]: 0,\r\n  [SPECIFICITY_70]: 0,\r\n  [SPECIFICITY_60]: 0,\r\n  [SPECIFICITY_50]: 0,\r\n  [SPECIFICITY_55]: 0,\r\n  [SPECIFICITY_40]: 0,\r\n  [SPECIFICITY_30]: 0,\r\n  [SPECIFICITY_10]: 0,\r\n  [SPECIFICITY_1]: 0,\r\n};\r\n\r\nconst pseudoPropsMap: any = {\r\n  _web: { dependentOn: 'platform', priority: SPECIFICITY_10 },\r\n  _ios: { dependentOn: 'platform', priority: SPECIFICITY_10 },\r\n  _android: { dependentOn: 'platform', priority: SPECIFICITY_10 },\r\n\r\n  _light: { dependentOn: 'colormode', priority: SPECIFICITY_10 },\r\n  _dark: { dependentOn: 'colormode', priority: SPECIFICITY_10 },\r\n\r\n  // TODO: have to add more interactionProps and stateProps\r\n  _indeterminate: {\r\n    dependentOn: 'state',\r\n    respondTo: 'isIndeterminate',\r\n    priority: SPECIFICITY_30,\r\n  },\r\n  _checked: {\r\n    dependentOn: 'state',\r\n    respondTo: 'isChecked',\r\n    priority: SPECIFICITY_30,\r\n  },\r\n  // Add new pseudeo props in between -------\r\n  _readOnly: {\r\n    dependentOn: 'state',\r\n    respondTo: 'isReadOnly',\r\n    priority: SPECIFICITY_30,\r\n  },\r\n  // Add new pseudeo props in between -------\r\n  _invalid: {\r\n    dependentOn: 'state',\r\n    respondTo: 'isInvalid',\r\n    priority: SPECIFICITY_40,\r\n  },\r\n  _focus: {\r\n    dependentOn: 'state',\r\n    respondTo: 'isFocused',\r\n    priority: SPECIFICITY_50,\r\n  },\r\n  _focusVisible: {\r\n    dependentOn: 'state',\r\n    respondTo: 'isFocusVisible',\r\n    priority: SPECIFICITY_55,\r\n  },\r\n  _hover: {\r\n    dependentOn: 'state',\r\n    respondTo: 'isHovered',\r\n    priority: SPECIFICITY_60,\r\n  },\r\n  _pressed: {\r\n    dependentOn: 'state',\r\n    respondTo: 'isPressed',\r\n    priority: SPECIFICITY_70,\r\n  },\r\n  _disabled: {\r\n    dependentOn: 'state',\r\n    respondTo: 'isDisabled',\r\n    priority: SPECIFICITY_100,\r\n  },\r\n};\r\n\r\nexport const compareSpecificity = (\r\n  exisiting: any,\r\n  upcoming: any,\r\n  ignorebaseTheme?: boolean\r\n  // property?: any\r\n) => {\r\n  if (!exisiting) return true;\r\n  if (!upcoming) return false;\r\n  const condition = ignorebaseTheme\r\n    ? specificityPrecedence.length - 1\r\n    : specificityPrecedence.length;\r\n  for (let index = 0; index < condition; index++) {\r\n    if (\r\n      exisiting[specificityPrecedence[index]] >\r\n      upcoming[specificityPrecedence[index]]\r\n    ) {\r\n      return false;\r\n    } else if (\r\n      exisiting[specificityPrecedence[index]] <\r\n      upcoming[specificityPrecedence[index]]\r\n    ) {\r\n      return true;\r\n    }\r\n  }\r\n  return true;\r\n};\r\n\r\nconst shouldResolvePseudoProp = ({\r\n  property,\r\n  state,\r\n  platform,\r\n  colormode,\r\n}: any) => {\r\n  if (pseudoPropsMap[property].dependentOn === 'platform') {\r\n    return property === `_${platform}`;\r\n  } else if (pseudoPropsMap[property].dependentOn === 'colormode') {\r\n    return property === `_${colormode}`;\r\n  } else if (pseudoPropsMap[property].dependentOn === 'state') {\r\n    return state[pseudoPropsMap[property].respondTo];\r\n  } else {\r\n    return false;\r\n  }\r\n};\r\n\r\nconst simplifyProps = (\r\n  {\r\n    props,\r\n    colormode,\r\n    platform,\r\n    state,\r\n    currentSpecificity,\r\n    previouslyFlattenProps,\r\n  }: any,\r\n  flattenProps: any = {},\r\n  specificityMap: any = {},\r\n  priority: number\r\n) => {\r\n  for (const property in props) {\r\n    // NOTE: the order is important here. Keep in mind while specificity breakpoints.\r\n    const propertySpecity = currentSpecificity\r\n      ? { ...currentSpecificity }\r\n      : {\r\n          ...INITIAL_PROP_SPECIFICITY,\r\n          [SPECIFICITY_1]: priority,\r\n        };\r\n\r\n    if (\r\n      state[pseudoPropsMap[property]?.respondTo] ||\r\n      ['_dark', '_light', '_web', '_ios', '_android'].includes(property)\r\n    ) {\r\n      if (shouldResolvePseudoProp({ property, state, platform, colormode })) {\r\n        propertySpecity[pseudoPropsMap[property].priority]++;\r\n\r\n        simplifyProps(\r\n          {\r\n            props: props[property],\r\n            colormode,\r\n            platform,\r\n            state,\r\n            currentSpecificity: propertySpecity,\r\n            previouslyFlattenProps: previouslyFlattenProps,\r\n          },\r\n          flattenProps,\r\n          specificityMap,\r\n          priority\r\n        );\r\n      }\r\n    } else if (state[pseudoPropsMap[property]?.respondTo] === undefined) {\r\n      if (property.startsWith('_')) {\r\n        if (\r\n          compareSpecificity(specificityMap[property], propertySpecity, false)\r\n        ) {\r\n          specificityMap[property] = propertySpecity;\r\n          // merging internal props (like, _text, _checked, ...)\r\n          flattenProps[property] = merge(\r\n            {},\r\n            flattenProps[property],\r\n            props[property]\r\n          );\r\n        } else {\r\n          flattenProps[property] = merge(\r\n            {},\r\n            props[property],\r\n            flattenProps[property]\r\n          );\r\n        }\r\n      } else {\r\n        if (\r\n          compareSpecificity(specificityMap[property], propertySpecity, false)\r\n        ) {\r\n          specificityMap[property] = propertySpecity;\r\n          // replacing simple props (like, p, m, bg, color, ...)\r\n          flattenProps[property] = props[property];\r\n        }\r\n      }\r\n    }\r\n  }\r\n};\r\n\r\nexport const propsFlattener = (\r\n  {\r\n    props,\r\n    colormode,\r\n    platform,\r\n    state,\r\n    currentSpecificityMap,\r\n    previouslyFlattenProps,\r\n  }: any,\r\n  priority: number\r\n) => {\r\n  const flattenProps: any = {};\r\n\r\n  for (const property in props) {\r\n    if (\r\n      state[pseudoPropsMap[property]?.respondTo] === undefined &&\r\n      property.startsWith('_')\r\n    ) {\r\n      flattenProps[property] = previouslyFlattenProps[property];\r\n    }\r\n  }\r\n\r\n  const specificityMap = currentSpecificityMap || {};\r\n\r\n  // STEP 1.a (if): Check weather it should be recursively resolved\r\n  // NOTE: (when true) recursively resolved it\r\n  // STEP 1.b (else if): Check specificty\r\n  // STEP 1.b.i: Check for pseudo props\r\n  // NOTE: (when true) Merge it.\r\n  // NOTE: (when false) Replace it.\r\n\r\n  simplifyProps(\r\n    {\r\n      props,\r\n      colormode,\r\n      platform,\r\n      state,\r\n      currentSpecificityMap,\r\n      previouslyFlattenProps,\r\n    },\r\n    flattenProps,\r\n    specificityMap,\r\n    priority\r\n  );\r\n\r\n  return [flattenProps, specificityMap];\r\n};\r\n"]}

package/lib/commonjs/hooks/useThemeProps/useProps.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useThemeProps = useThemeProps;
+
+var _lodash = _interopRequireDefault(require("lodash.get"));
+
+var _lodash2 = _interopRequireDefault(require("lodash.omit"));
+
+var _reactNative = require("react-native");
+
+var _useNativeBase = require("./../useNativeBase");
+
+var _tools = require("./../../theme/tools/");
+
+var _filterShadowProps = require("./../../utils/filterShadowProps");
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const filterAndCalculateProps = (theme, colorModeProps, componentTheme, propsReceived, windowWidth) => {
+  // Extracting out children and style, as they do not contribute in props calculation
+  // This is done as these props are passed as it is later in the development
+  // Required as some of these will trigger cyclic computation which may lead to error
+  let [ignoredProps, props] = (0, _tools.extractInObject)(propsReceived, ['children', 'style', 'onPress', 'icon', 'onOpen', 'onClose']);
+  let newProps = (0, _utils.calculateProps)(theme, colorModeProps, componentTheme, props, windowWidth);
+  let mergedProps = (0, _filterShadowProps.filterShadowProps)(newProps, ignoredProps, _reactNative.Platform.OS);
+  return (0, _tools.omitUndefined)(mergedProps);
+};
+
+function useThemeProps(component, propsReceived) {
+  var _useWindowDimensions;
+
+  const {
+    theme,
+    ...colorModeProps
+  } = (0, _useNativeBase.useNativeBase)(); // console.log('THEME = ', theme);
+
+  const componentTheme = (0, _lodash.default)(theme, "components.".concat(component)); // console.log('COMPONENT THEME = ', componentTheme);
+
+  const windowWidth = (_useWindowDimensions = (0, _reactNative.useWindowDimensions)()) === null || _useWindowDimensions === void 0 ? void 0 : _useWindowDimensions.width; // To pass the component theme props and component props seperately
+
+  return filterAndCalculateProps((0, _lodash2.default)(theme, ['components']), colorModeProps, componentTheme, propsReceived, windowWidth);
+}
+//# sourceMappingURL=useProps.js.map

package/lib/commonjs/hooks/useThemeProps/useProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useProps.tsx"],"names":["filterAndCalculateProps","theme","colorModeProps","componentTheme","propsReceived","windowWidth","ignoredProps","props","newProps","mergedProps","Platform","OS","useThemeProps","component","width"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,uBAAuB,GAAG,CAC9BC,KAD8B,EAE9BC,cAF8B,EAG9BC,cAH8B,EAI9BC,aAJ8B,EAK9BC,WAL8B,KAM3B;AACH;AACA;AACA;AACA,MAAI,CAACC,YAAD,EAAeC,KAAf,IAAwB,4BAAgBH,aAAhB,EAA+B,CACzD,UADyD,EAEzD,OAFyD,EAGzD,SAHyD,EAIzD,MAJyD,EAKzD,QALyD,EAMzD,SANyD,CAA/B,CAA5B;AAQA,MAAII,QAAQ,GAAG,2BACbP,KADa,EAEbC,cAFa,EAGbC,cAHa,EAIbI,KAJa,EAKbF,WALa,CAAf;AAOA,MAAII,WAAW,GAAG,0CAAkBD,QAAlB,EAA4BF,YAA5B,EAA0CI,sBAASC,EAAnD,CAAlB;AACA,SAAO,0BAAcF,WAAd,CAAP;AACD,CA3BD;;AA6BO,SAASG,aAAT,CAAuBC,SAAvB,EAA0CT,aAA1C,EAA8D;AAAA;;AACnE,QAAM;AAAEH,IAAAA,KAAF;AAAS,OAAGC;AAAZ,MAA+B,mCAArC,CADmE,CAEnE;;AAEA,QAAMC,cAAc,GAAG,qBAAIF,KAAJ,uBAAyBY,SAAzB,EAAvB,CAJmE,CAKnE;;AACA,QAAMR,WAAW,2BAAG,uCAAH,yDAAG,qBAAuBS,KAA3C,CANmE,CAQnE;;AACA,SAAOd,uBAAuB,CAC5B,sBAAKC,KAAL,EAAY,CAAC,YAAD,CAAZ,CAD4B,EAE5BC,cAF4B,EAG5BC,cAH4B,EAI5BC,aAJ4B,EAK5BC,WAL4B,CAA9B;AAOD","sourcesContent":["import get from 'lodash.get';\r\nimport omit from 'lodash.omit';\r\nimport { useWindowDimensions, Platform } from 'react-native';\r\nimport { useNativeBase } from './../useNativeBase';\r\nimport { omitUndefined, extractInObject } from './../../theme/tools/';\r\nimport { filterShadowProps } from './../../utils/filterShadowProps';\r\nimport { calculateProps } from './utils';\r\n\r\nconst filterAndCalculateProps = (\r\n  theme: any,\r\n  colorModeProps: any,\r\n  componentTheme: any,\r\n  propsReceived: any,\r\n  windowWidth: any\r\n) => {\r\n  // Extracting out children and style, as they do not contribute in props calculation\r\n  // This is done as these props are passed as it is later in the development\r\n  // Required as some of these will trigger cyclic computation which may lead to error\r\n  let [ignoredProps, props] = extractInObject(propsReceived, [\r\n    'children',\r\n    'style',\r\n    'onPress',\r\n    'icon',\r\n    'onOpen',\r\n    'onClose',\r\n  ]);\r\n  let newProps = calculateProps(\r\n    theme,\r\n    colorModeProps,\r\n    componentTheme,\r\n    props,\r\n    windowWidth\r\n  );\r\n  let mergedProps = filterShadowProps(newProps, ignoredProps, Platform.OS);\r\n  return omitUndefined(mergedProps);\r\n};\r\n\r\nexport function useThemeProps(component: string, propsReceived: any) {\r\n  const { theme, ...colorModeProps } = useNativeBase();\r\n  // console.log('THEME = ', theme);\r\n\r\n  const componentTheme = get(theme, `components.${component}`);\r\n  // console.log('COMPONENT THEME = ', componentTheme);\r\n  const windowWidth = useWindowDimensions()?.width;\r\n\r\n  // To pass the component theme props and component props seperately\r\n  return filterAndCalculateProps(\r\n    omit(theme, ['components']),\r\n    colorModeProps,\r\n    componentTheme,\r\n    propsReceived,\r\n    windowWidth\r\n  );\r\n}\r\n"]}

package/lib/commonjs/hooks/useThemeProps/usePropsResolution.js

@@ -0,0 +1,340 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePropsResolution = usePropsResolution;
+exports.usePropsResolutionWithComponentTheme = void 0;
+
+var _lodash = _interopRequireDefault(require("lodash.get"));
+
+var _lodash2 = _interopRequireDefault(require("lodash.merge"));
+
+var _lodash3 = _interopRequireDefault(require("lodash.isempty"));
+
+var _reactNative = require("react-native");
+
+var _useNativeBase = require("../useNativeBase");
+
+var _colorMode = require("../../core/color-mode");
+
+var _tools = require("../../theme/tools");
+
+var _useBreakpointResolvedProps = require("../useBreakpointResolvedProps");
+
+var _propsFlattener = require("./propsFlattener");
+
+var _useResponsiveSSRProps = require("../useResponsiveSSRProps");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ResponsiveQueryProvider = require("../../utils/useResponsiveQuery/ResponsiveQueryProvider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SPREAD_PROP_SPECIFICITY_ORDER = ['p', 'padding', 'px', 'py', 'pt', 'pb', 'pl', 'pr', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'm', 'margin', 'mx', 'my', 'mt', 'mb', 'ml', 'mr', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
+const FINAL_SPREAD_PROPS = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight'];
+const MARGIN_MAP = {
+  mx: ['marginRight', 'marginLeft'],
+  my: ['marginTop', 'marginBottom'],
+  mt: ['marginTop'],
+  mb: ['marginBottom'],
+  mr: ['marginRight'],
+  ml: ['marginLeft']
+};
+MARGIN_MAP.margin = [...MARGIN_MAP.mx, ...MARGIN_MAP.my];
+MARGIN_MAP.m = MARGIN_MAP.margin;
+MARGIN_MAP.marginTop = MARGIN_MAP.mt;
+MARGIN_MAP.marginBottom = MARGIN_MAP.mb;
+MARGIN_MAP.marginLeft = MARGIN_MAP.ml;
+MARGIN_MAP.marginRight = MARGIN_MAP.mr;
+const PADDING_MAP = {
+  px: ['paddingRight', 'paddingLeft'],
+  py: ['paddingTop', 'paddingBottom'],
+  pt: ['paddingTop'],
+  pb: ['paddingBottom'],
+  pr: ['paddingRight'],
+  pl: ['paddingLeft']
+};
+PADDING_MAP.padding = [...PADDING_MAP.px, ...PADDING_MAP.py];
+PADDING_MAP.p = PADDING_MAP.padding;
+PADDING_MAP.paddingTop = PADDING_MAP.pt;
+PADDING_MAP.paddingBottom = PADDING_MAP.pb;
+PADDING_MAP.paddingLeft = PADDING_MAP.pl;
+PADDING_MAP.paddingRight = PADDING_MAP.pr;
+const SPREAD_PROP_SPECIFICITY_MAP = { ...PADDING_MAP,
+  ...MARGIN_MAP
+};
+
+function propsSpreader(incomingProps, incomingSpecifity) {
+  const flattenedDefaultProps = { ...incomingProps
+  };
+  const specificity = {};
+  SPREAD_PROP_SPECIFICITY_ORDER.forEach(prop => {
+    if (prop in flattenedDefaultProps) {
+      const val = incomingProps[prop] || flattenedDefaultProps[prop];
+
+      if (!FINAL_SPREAD_PROPS.includes(prop)) {
+        delete flattenedDefaultProps[prop];
+        specificity[prop] = incomingSpecifity[prop];
+      }
+
+      SPREAD_PROP_SPECIFICITY_MAP[prop].forEach(newProp => {
+        if ((0, _propsFlattener.compareSpecificity)(specificity[newProp], specificity[prop])) {
+          specificity[newProp] = incomingSpecifity[prop];
+          flattenedDefaultProps[newProp] = val;
+        }
+      });
+    }
+  });
+  return (0, _lodash2.default)({}, flattenedDefaultProps);
+}
+/**
+ * @summary Combines provided porps with component's theme props and resloves them.
+ * @arg {string} component - Name of the component.
+ * @arg {object} incomingProps - Props passed by the user.
+ * @arg {object} state - dependent states.
+ * @arg {object} config - configuration for resolution. Accepts key like ignoreProps, resolveResponsively.
+ * @returns {object} Resolved and flattened props.
+ */
+
+
+function usePropsResolution(component, incomingProps, state, config) {
+  var _config$componentThem;
+
+  const {
+    theme
+  } = (0, _useNativeBase.useNativeBase)();
+  const componentTheme = (_config$componentThem = config === null || config === void 0 ? void 0 : config.componentTheme) !== null && _config$componentThem !== void 0 ? _config$componentThem : (0, _lodash.default)(theme, "components.".concat(component), {});
+
+  if (process.env.NODE_ENV === 'development' && incomingProps.debug) {
+    /* eslint-disable-next-line */
+    console.log("%c".concat(component), 'background: #d97706; color: #111; font-weight: 700; padding: 2px 8px;');
+    /* eslint-disable-next-line */
+
+    console.log("%cusePropsResolution", 'background: #4b5563; color: #d97706; font-weight: 700; padding: 2px 8px;');
+    /* eslint-disable-next-line */
+
+    console.log('%c incomingProps: ', 'color: #4ade80; font-weight: 700;', incomingProps);
+    /* eslint-disable-next-line */
+
+    console.log('%c state: ', 'color: #4ade80; font-weight: 700;', state);
+    /* eslint-disable-next-line */
+
+    console.log('%c componentTheme: ', 'color: #4ade80; font-weight: 700;', componentTheme);
+  }
+
+  const resolvedProps = usePropsResolutionWithComponentTheme(componentTheme, incomingProps, state, config); // Not Resolve theme props and pseudo props
+
+  if (incomingProps !== null && incomingProps !== void 0 && incomingProps.INTERNAL_notResolveThemeAndPseudoProps) {
+    delete incomingProps.INTERNAL_notResolveThemeAndPseudoProps;
+    return incomingProps;
+  }
+
+  if (process.env.NODE_ENV === 'development' && incomingProps.debug) {
+    /* eslint-disable-next-line */
+    console.log('%c resolvedProps: ', 'color: #22d3ee; font-weight: 700;', resolvedProps);
+  }
+
+  return resolvedProps;
+}
+
+const usePropsResolutionWithComponentTheme = (componentTheme, incomingProps, state, config) => {
+  const modifiedPropsForSSR = (0, _useResponsiveSSRProps.useResponsiveSSRProps)(incomingProps);
+  const [ignoredProps, cleanIncomingProps] = (0, _tools.extractInObject)(modifiedPropsForSSR, ['children', 'onPress', 'icon', 'onOpen', 'onClose'].concat((config === null || config === void 0 ? void 0 : config.ignoreProps) || []));
+
+  const responsiveQueryContext = _react.default.useContext(_ResponsiveQueryProvider.ResponsiveQueryContext);
+
+  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
+  const resolveResponsively = ['colorScheme', 'size', 'variant', ...((config === null || config === void 0 ? void 0 : config.resolveResponsively) || [])];
+  const {
+    theme
+  } = (0, _useNativeBase.useNativeBase)();
+  const colorModeProps = (0, _colorMode.useColorMode)();
+  const extendedTheme = [];
+
+  if (config !== null && config !== void 0 && config.extendTheme) {
+    config === null || config === void 0 ? void 0 : config.extendTheme.map(componentName => {
+      extendedTheme.push((0, _lodash.default)(theme, "components.".concat(componentName), {}));
+    });
+  }
+
+  if (!(0, _lodash3.default)(componentTheme)) extendedTheme.push(componentTheme);
+
+  const resolveComponentTheme = (themeType, providedTheme) => {
+    try {
+      if (themeType[1]) {
+        return typeof providedTheme[themeType[0]][themeType[1]] !== 'function' ? providedTheme[themeType[0]][themeType[1]] : providedTheme[themeType[0]][themeType[1]]({
+          theme,
+          ...incomingWithDefaultProps,
+          ...colorModeProps
+        });
+      } else {
+        return typeof providedTheme[themeType[0]] !== 'function' ? providedTheme[themeType[0]] : providedTheme[themeType[0]]({
+          theme,
+          ...incomingWithDefaultProps,
+          ...colorModeProps
+        });
+      }
+    } catch {
+      return {};
+    }
+  };
+
+  const callPropsFlattener = (targetProps = {}, latestSpecifictyMap = {}, specificity = 1) => {
+    return (0, _propsFlattener.propsFlattener)({
+      props: process.env.NODE_ENV === 'development' && cleanIncomingProps.debug ? { ...targetProps,
+        debug: true
+      } : targetProps,
+      platform: _reactNative.Platform.OS,
+      colormode: colorModeProps.colorMode,
+      state: state || {},
+      currentSpecificityMap: latestSpecifictyMap,
+      previouslyFlattenProps: flattenProps || {},
+      cascadePseudoProps: config === null || config === void 0 ? void 0 : config.cascadePseudoProps
+    }, specificity);
+  }; // STEP 1: combine default props and incoming props
+
+
+  const incomingWithDefaultProps = (0, _lodash2.default)({}, componentTheme.defaultProps || {}, cleanIncomingProps); // STEP 1.5: resolving component theme
+
+  let combinedBaseStyle = {};
+  let combinedVariantStyle = {};
+  let combinedSizeStyle = {};
+  extendedTheme.map(extededComponentTheme => {
+    if (extededComponentTheme.baseStyle) {
+      combinedBaseStyle = { ...combinedBaseStyle,
+        ...resolveComponentTheme(['baseStyle'], extededComponentTheme)
+      };
+    }
+
+    if (incomingWithDefaultProps.variant) {
+      if (extededComponentTheme.variants) {
+        combinedVariantStyle = { ...combinedVariantStyle,
+          ...resolveComponentTheme(['variants', incomingWithDefaultProps.variant], extededComponentTheme)
+        };
+      }
+    }
+
+    if (incomingWithDefaultProps.size && extededComponentTheme !== null && extededComponentTheme !== void 0 && extededComponentTheme.sizes && extededComponentTheme !== null && extededComponentTheme !== void 0 && extededComponentTheme.sizes[incomingWithDefaultProps.size]) {
+      if (typeof extededComponentTheme.sizes[incomingWithDefaultProps.size] === 'string' || typeof extededComponentTheme.sizes[incomingWithDefaultProps.size] === 'number') {
+        incomingWithDefaultProps.size = extededComponentTheme.sizes[incomingWithDefaultProps.size];
+      } else {
+        combinedSizeStyle = { ...combinedSizeStyle,
+          ...resolveComponentTheme(['sizes', incomingWithDefaultProps.size], extededComponentTheme)
+        };
+        incomingWithDefaultProps.size = undefined;
+      }
+    }
+  }); // STEP 2: flatten them
+
+  if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {
+    /* eslint-disable-next-line */
+    console.log("%cFlattening incoming and Default", 'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;');
+  } //TODO: hack
+
+
+  let flattenProps, specificityMap;
+  [flattenProps, specificityMap] = callPropsFlattener(incomingWithDefaultProps, {}, 2);
+  const responsiveProps = {};
+
+  if (disableCSSMediaQueries) {
+    // STEP 2.5: resolving responsive props
+    resolveResponsively.map(propsName => {
+      if (flattenProps[propsName]) {
+        // @ts-ignore
+        responsiveProps[propsName] = flattenProps[propsName];
+      }
+    });
+  }
+
+  if (resolveResponsively.includes('direction')) {
+    const propName = 'direction';
+
+    if (flattenProps[propName]) {
+      // @ts-ignore
+      responsiveProps[propName] = flattenProps[propName];
+    }
+  }
+
+  const responsivelyResolvedProps = (0, _useBreakpointResolvedProps.useBreakpointResolvedProps)(responsiveProps);
+  flattenProps = { ...flattenProps,
+    ...responsivelyResolvedProps
+  }; // STEP 3: Pass it to baseStyle, then variant and then size and resolve them.
+  // NOTE: Resoloving baseStyle
+
+  let flattenBaseStyle, baseSpecificityMap;
+
+  if (combinedBaseStyle) {
+    if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {
+      /* eslint-disable-next-line */
+      console.log("%cFlattening baseStyle", 'background: #4b5563; color: #eee; font-weight: 700; padding: 2px 8px;');
+    }
+
+    [flattenBaseStyle, baseSpecificityMap] = callPropsFlattener(combinedBaseStyle, specificityMap);
+  } // NOTE: Resolving variants
+
+
+  let flattenVariantStyle, variantSpecificityMap; // Extracting props from variant
+
+  if (combinedVariantStyle) {
+    if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {
+      /* eslint-disable-next-line */
+      console.log("%cFlattening variantStyle", 'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;');
+    }
+
+    [flattenVariantStyle, variantSpecificityMap] = callPropsFlattener(combinedVariantStyle, baseSpecificityMap || specificityMap); // We remove variant from original props if we found it in the componentTheme
+    //@ts-ignore
+
+    flattenProps.variant = undefined;
+  } // NOTE: Resolving size
+
+
+  let flattenSizeStyle, sizeSpecificityMap; // Extracting props from size
+
+  if (combinedSizeStyle) {
+    if (process.env.NODE_ENV === 'development' && cleanIncomingProps.debug) {
+      /* eslint-disable-next-line */
+      console.log("%cFlattening sizeStyle", 'background: #4b5563; color: #FFF; font-weight: 700; padding: 2px 8px;');
+    }
+
+    [flattenSizeStyle, sizeSpecificityMap] = callPropsFlattener(combinedSizeStyle, variantSpecificityMap || baseSpecificityMap || specificityMap);
+  } // STEP 4: merge
+
+
+  const defaultStyles = (0, _lodash2.default)({}, flattenBaseStyle, flattenVariantStyle, flattenSizeStyle);
+  /*Resolve all the internal used Pseudo Props*/
+
+  const resolvePseudoProps = (flatPseudoProp, baseStylePseudoProp) =>
+  /** Props coming from Pseudo inside defaultStyles(baseStyle) */
+  {
+    for (const prop in flatPseudoProp) {
+      baseStylePseudoProp[prop] = flatPseudoProp[prop];
+      /* Replace all the similar prop from from internal props */
+    }
+
+    return baseStylePseudoProp;
+  };
+
+  for (const prop in defaultStyles) {
+    if (prop.startsWith('_') && flattenProps.hasOwnProperty(prop)) {
+      /*Resolve all the internal used Pseudo Props*/
+      defaultStyles[prop] = resolvePseudoProps(flattenProps[prop], defaultStyles[prop]);
+    }
+
+    delete flattenProps[prop];
+  }
+
+  const defaultSpecificity = (0, _lodash2.default)({}, specificityMap, baseSpecificityMap, variantSpecificityMap, sizeSpecificityMap);
+  flattenProps = propsSpreader({ ...defaultStyles,
+    ...flattenProps
+  }, defaultSpecificity);
+  const resolvedProps = (0, _tools.omitUndefined)({ ...flattenProps,
+    ...ignoredProps
+  }); // STEP 5: Return
+
+  return resolvedProps;
+};
+
+exports.usePropsResolutionWithComponentTheme = usePropsResolutionWithComponentTheme;
+//# sourceMappingURL=usePropsResolution.js.map