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

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

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractProps = extractProps;
+exports.mergeUnderscoreProps = mergeUnderscoreProps;
+exports.calculateProps = calculateProps;
+exports.resolveValueWithBreakpoint = exports.extractPropertyFromFunction = void 0;
+
+var _lodash = _interopRequireDefault(require("lodash.get"));
+
+var _lodash2 = _interopRequireDefault(require("lodash.isnil"));
+
+var _lodash3 = _interopRequireDefault(require("lodash.mergewith"));
+
+var _lodash4 = _interopRequireDefault(require("lodash.clonedeep"));
+
+var _base = require("./../../theme/base");
+
+var _tools = require("./../../theme/tools");
+
+var _useContrastText = require("../useContrastText");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ Extract props from theme props and omit those from props
+*/
+
+/**
+ *
+ * @param props Props passed by the user
+ * @param theme Theme object
+ * @param colorModeProps `colorMode` object
+ * @param componentTheme Theme for specific components
+ * @param currentBreakpoint Current breakpoint values
+ * @returns Extracting props from defaultProps while overriding the props that are already present
+ */
+function extractProps(props, theme, {}, componentTheme, currentBreakpoint) {
+  let newProps = {};
+
+  for (let property in props) {
+    // If the property exists in themePropertyMap then get its value
+    if (_base.themePropertyMap[property]) {
+      let propValues = extractPropertyFromFunction(property, props, theme, componentTheme);
+
+      if (typeof propValues === 'string' || typeof propValues === 'number') {
+        newProps[property] = propValues;
+      } else if (!(0, _lodash2.default)(propValues)) {
+        for (let nestedProp in propValues) {
+          newProps[nestedProp] = (0, _lodash.default)(theme, "".concat(_base.themePropertyMap[nestedProp], ".").concat(propValues[nestedProp]), propValues[nestedProp]);
+        }
+      } else if (property === 'shadow') {
+        let shadowProps = theme[_base.themePropertyMap[property]][props[property]];
+
+        if (!(0, _lodash2.default)(shadowProps)) {
+          newProps = { ...newProps,
+            ...shadowProps
+          };
+        }
+      } else {
+        newProps[property] = resolveValueWithBreakpoint(props[property], theme.breakpoints, currentBreakpoint, property);
+      }
+    } else {
+      newProps[property] = resolveValueWithBreakpoint(props[property], theme.breakpoints, currentBreakpoint, property);
+    }
+  }
+
+  return (0, _lodash4.default)(newProps);
+}
+/*
+Remove props from defaultProps that are already present in props
+*/
+
+
+function filterDefaultProps(props, defaultProps) {
+  let [, resultProps] = (0, _tools.extractInObject)(defaultProps, Object.keys(props));
+  return resultProps;
+}
+/**
+ * If property is functional in componentTheme, get its returned object
+ *
+ * @param property : name of the prop
+ * @param props : all props
+ * @param theme : provided theme without components
+ * @param componentTheme : component specific theme
+ * @returns
+ */
+
+
+const extractPropertyFromFunction = (property, props, theme, componentTheme) => {
+  let propValues; // Check if the entry in the theme is a function then calling it with all theme and props as params
+
+  if (componentTheme && typeof componentTheme[_base.themePropertyMap[property]] === 'function') {
+    let funcProps = componentTheme[_base.themePropertyMap[property]]({
+      theme,
+      ...props
+    }); // Check if returned object from componentTheme is a nested object
+
+
+    let isNested = Object.keys(funcProps).some(function (key) {
+      return funcProps[key] && typeof funcProps[key] === 'object';
+    }); // If the returned value is nested object then find the property value in it, otherwise return the whole object
+
+    propValues = isNested ? { ...(0, _lodash.default)(funcProps, "".concat(props[property]))
+    } : { ...funcProps
+    };
+  } else {
+    // If the entry is any value other than function then return the whole object or value
+    propValues = (0, _lodash.default)(componentTheme, "".concat(_base.themePropertyMap[property], ".").concat(props[property]));
+  }
+
+  return propValues;
+};
+/*
+Merge _props and apply contrastText color if not passed by theme or user
+*/
+
+
+exports.extractPropertyFromFunction = extractPropertyFromFunction;
+
+function mergeUnderscoreProps(newProps, props) {
+  const _props = Object.keys(newProps).filter(propName => propName.startsWith('_'));
+
+  _props.forEach(propName => {
+    var _newProps$bg, _newProps$propName$co, _newProps$propName, _props$propName;
+
+    // Adding color based on bg contrast if no color is given
+    const bg = (_newProps$bg = newProps.bg) !== null && _newProps$bg !== void 0 ? _newProps$bg : newProps.backgroundColor;
+    const textColor = bg ? {
+      color: (0, _useContrastText.useContrastText)(bg, (_newProps$propName$co = (_newProps$propName = newProps[propName]) === null || _newProps$propName === void 0 ? void 0 : _newProps$propName.color) !== null && _newProps$propName$co !== void 0 ? _newProps$propName$co : (_props$propName = props[propName]) === null || _props$propName === void 0 ? void 0 : _props$propName.color)
+    } : {}; // Overriding calculated props with user added props
+
+    newProps[propName] = { ...textColor,
+      ...newProps[propName],
+      ...props[propName]
+    };
+  });
+
+  return newProps;
+}
+/**
+ *
+ * Checks the property and resolves it if it has breakpoints
+ * @param values : value from props
+ * @param currentBreakpoint : current value for which breakpoint will be calculated
+ * @param property : property name
+ * @returns
+ */
+
+
+const resolveValueWithBreakpoint = (values, breakpointTheme, currentBreakpoint, property) => {
+  if ((0, _tools.hasValidBreakpointFormat)(values, breakpointTheme, property)) {
+    // Check the last valid breakpoint value from all values
+    // If current breakpoint is `md` and we have `base` then `lg`, then last value will be taken(`base` in this case)
+    return (0, _tools.findLastValidBreakpoint)(values, breakpointTheme, currentBreakpoint);
+  } else {
+    return values;
+  }
+};
+/**
+ * Takes all prop related data and returns the props that needs to be applied to the component
+ *
+ * @param theme Theme object
+ * @param colorModeProps Color mode information
+ * @param componentTheme Theme object for the specific component
+ * @param props Props passed by the user
+ * @param windowWidth Width of the current window
+ * @returns props to be applied
+ */
+
+
+exports.resolveValueWithBreakpoint = resolveValueWithBreakpoint;
+
+function calculateProps(theme, colorModeProps, componentTheme, props, windowWidth) {
+  let currentBreakpoint = (0, _tools.getClosestBreakpoint)(theme.breakpoints, windowWidth);
+
+  if (!props) {
+    props = {};
+  }
+
+  let newProps;
+
+  if (componentTheme) {
+    // Extracting props from defaultProps
+    newProps = extractProps(filterDefaultProps(props, componentTheme.defaultProps), theme, colorModeProps, componentTheme, currentBreakpoint); // Extracting props from base style
+
+    let componentBaseStyle = typeof componentTheme.baseStyle !== 'function' ? componentTheme.baseStyle : componentTheme.baseStyle({
+      theme,
+      ...newProps,
+      ...props,
+      ...colorModeProps
+    });
+    newProps = (0, _lodash3.default)(newProps, componentBaseStyle, // @ts-ignore
+    (objValue, srcValue, key) => {
+      if (!(0, _lodash2.default)(objValue)) {
+        delete newProps[key];
+      }
+    });
+    const variant = props.variant || (0, _lodash.default)(componentTheme, 'defaultProps.variant'); // Extracting props from variant
+
+    if (variant && componentTheme.variants && componentTheme.variants[variant]) {
+      const colorScheme = props.colorScheme || (0, _lodash.default)(componentTheme, 'defaultProps.colorScheme');
+      let variantProps = componentTheme.variants[variant]({ ...props,
+        ...newProps,
+        colorScheme,
+        theme,
+        ...colorModeProps
+      });
+      variantProps = extractProps(variantProps, theme, colorModeProps, componentTheme, currentBreakpoint); // added this to handle order of props
+
+      newProps = (0, _lodash3.default)(newProps, variantProps, // @ts-ignore
+      (objValue, srcValue, key) => {
+        if (!(0, _lodash2.default)(objValue)) {
+          delete newProps[key];
+        }
+      });
+      delete newProps.variant;
+      delete newProps.colorScheme;
+    }
+  } // Extracting props from normal props
+
+
+  let extractedProps = extractProps(props, theme, colorModeProps, componentTheme, currentBreakpoint); // added this to handle order of props
+  // @ts-ignore
+
+  newProps = (0, _lodash3.default)(newProps, extractedProps, (objValue, srcValue, key) => {
+    if (!(0, _lodash2.default)(objValue)) {
+      delete newProps[key];
+    }
+  });
+  newProps = mergeUnderscoreProps(newProps, props);
+  return newProps;
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["utils.ts"],"names":["extractProps","props","theme","componentTheme","currentBreakpoint","newProps","property","themePropertyMap","propValues","extractPropertyFromFunction","nestedProp","shadowProps","resolveValueWithBreakpoint","breakpoints","filterDefaultProps","defaultProps","resultProps","Object","keys","funcProps","isNested","some","key","mergeUnderscoreProps","_props","filter","propName","startsWith","forEach","bg","backgroundColor","textColor","color","values","breakpointTheme","calculateProps","colorModeProps","windowWidth","componentBaseStyle","baseStyle","objValue","srcValue","variant","variants","colorScheme","variantProps","extractedProps"],"mappings":"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","sourcesContent":["import get from 'lodash.get';\r\nimport isNil from 'lodash.isnil';\r\nimport mergeWith from 'lodash.mergewith';\r\nimport cloneDeep from 'lodash.clonedeep';\r\nimport { themePropertyMap } from './../../theme/base';\r\nimport {\r\n  getClosestBreakpoint,\r\n  findLastValidBreakpoint,\r\n  hasValidBreakpointFormat,\r\n  extractInObject,\r\n} from './../../theme/tools';\r\nimport { useContrastText } from '../useContrastText';\r\n\r\n/*\r\n Extract props from theme props and omit those from props\r\n*/\r\n/**\r\n *\r\n * @param props Props passed by the user\r\n * @param theme Theme object\r\n * @param colorModeProps `colorMode` object\r\n * @param componentTheme Theme for specific components\r\n * @param currentBreakpoint Current breakpoint values\r\n * @returns Extracting props from defaultProps while overriding the props that are already present\r\n */\r\nexport function extractProps(\r\n  props: any,\r\n  theme: any,\r\n  {},\r\n  componentTheme: any,\r\n  currentBreakpoint: number\r\n) {\r\n  let newProps: any = {};\r\n  for (let property in props) {\r\n    // If the property exists in themePropertyMap then get its value\r\n    if (themePropertyMap[property]) {\r\n      let propValues = extractPropertyFromFunction(\r\n        property,\r\n        props,\r\n        theme,\r\n        componentTheme\r\n      );\r\n      if (typeof propValues === 'string' || typeof propValues === 'number') {\r\n        newProps[property] = propValues;\r\n      } else if (!isNil(propValues)) {\r\n        for (let nestedProp in propValues) {\r\n          newProps[nestedProp] = get(\r\n            theme,\r\n            `${themePropertyMap[nestedProp]}.${propValues[nestedProp]}`,\r\n            propValues[nestedProp]\r\n          );\r\n        }\r\n      } else if (property === 'shadow') {\r\n        let shadowProps = theme[themePropertyMap[property]][props[property]];\r\n        if (!isNil(shadowProps)) {\r\n          newProps = { ...newProps, ...shadowProps };\r\n        }\r\n      } else {\r\n        newProps[property] = resolveValueWithBreakpoint(\r\n          props[property],\r\n          theme.breakpoints,\r\n          currentBreakpoint,\r\n          property\r\n        );\r\n      }\r\n    } else {\r\n      newProps[property] = resolveValueWithBreakpoint(\r\n        props[property],\r\n        theme.breakpoints,\r\n        currentBreakpoint,\r\n        property\r\n      );\r\n    }\r\n  }\r\n  return cloneDeep(newProps);\r\n}\r\n\r\n/*\r\nRemove props from defaultProps that are already present in props\r\n*/\r\nfunction filterDefaultProps(props: any, defaultProps: any) {\r\n  let [, resultProps] = extractInObject(defaultProps, Object.keys(props));\r\n  return resultProps;\r\n}\r\n\r\n/**\r\n * If property is functional in componentTheme, get its returned object\r\n *\r\n * @param property : name of the prop\r\n * @param props : all props\r\n * @param theme : provided theme without components\r\n * @param componentTheme : component specific theme\r\n * @returns\r\n */\r\nexport const extractPropertyFromFunction = (\r\n  property: string,\r\n  props: any,\r\n  theme: any,\r\n  componentTheme: any\r\n) => {\r\n  let propValues;\r\n  // Check if the entry in the theme is a function then calling it with all theme and props as params\r\n  if (\r\n    componentTheme &&\r\n    typeof componentTheme[themePropertyMap[property]] === 'function'\r\n  ) {\r\n    let funcProps = componentTheme[themePropertyMap[property]]({\r\n      theme,\r\n      ...props,\r\n    });\r\n    // Check if returned object from componentTheme is a nested object\r\n    let isNested: boolean = Object.keys(funcProps).some(function (key) {\r\n      return funcProps[key] && typeof funcProps[key] === 'object';\r\n    });\r\n    // If the returned value is nested object then find the property value in it, otherwise return the whole object\r\n    propValues = isNested\r\n      ? { ...get(funcProps, `${props[property]}`) }\r\n      : { ...funcProps };\r\n  } else {\r\n    // If the entry is any value other than function then return the whole object or value\r\n    propValues = get(\r\n      componentTheme,\r\n      `${themePropertyMap[property]}.${props[property]}`\r\n    );\r\n  }\r\n  return propValues;\r\n};\r\n\r\n/*\r\nMerge _props and apply contrastText color if not passed by theme or user\r\n*/\r\nexport function mergeUnderscoreProps(newProps: any, props: any) {\r\n  const _props = Object.keys(newProps).filter((propName) =>\r\n    propName.startsWith('_')\r\n  );\r\n  _props.forEach((propName: string) => {\r\n    // Adding color based on bg contrast if no color is given\r\n    const bg = newProps.bg ?? newProps.backgroundColor;\r\n    const textColor = bg\r\n      ? {\r\n          color: useContrastText(\r\n            bg,\r\n            newProps[propName]?.color ?? props[propName]?.color\r\n          ),\r\n        }\r\n      : {};\r\n    // Overriding calculated props with user added props\r\n    newProps[propName] = {\r\n      ...textColor,\r\n      ...newProps[propName],\r\n      ...props[propName],\r\n    };\r\n  });\r\n  return newProps;\r\n}\r\n\r\n/**\r\n *\r\n * Checks the property and resolves it if it has breakpoints\r\n * @param values : value from props\r\n * @param currentBreakpoint : current value for which breakpoint will be calculated\r\n * @param property : property name\r\n * @returns\r\n */\r\nexport const resolveValueWithBreakpoint = (\r\n  values: any,\r\n  breakpointTheme: any,\r\n  currentBreakpoint: number,\r\n  property: any\r\n) => {\r\n  if (hasValidBreakpointFormat(values, breakpointTheme, property)) {\r\n    // Check the last valid breakpoint value from all values\r\n    // If current breakpoint is `md` and we have `base` then `lg`, then last value will be taken(`base` in this case)\r\n    return findLastValidBreakpoint(values, breakpointTheme, currentBreakpoint);\r\n  } else {\r\n    return values;\r\n  }\r\n};\r\n\r\n/**\r\n * Takes all prop related data and returns the props that needs to be applied to the component\r\n *\r\n * @param theme Theme object\r\n * @param colorModeProps Color mode information\r\n * @param componentTheme Theme object for the specific component\r\n * @param props Props passed by the user\r\n * @param windowWidth Width of the current window\r\n * @returns props to be applied\r\n */\r\nexport function calculateProps(\r\n  theme: any,\r\n  colorModeProps: any,\r\n  componentTheme: any,\r\n  props: any,\r\n  windowWidth: any\r\n) {\r\n  let currentBreakpoint = getClosestBreakpoint(theme.breakpoints, windowWidth);\r\n  if (!props) {\r\n    props = {};\r\n  }\r\n\r\n  let newProps: any;\r\n  if (componentTheme) {\r\n    // Extracting props from defaultProps\r\n    newProps = extractProps(\r\n      filterDefaultProps(props, componentTheme.defaultProps),\r\n      theme,\r\n      colorModeProps,\r\n      componentTheme,\r\n      currentBreakpoint\r\n    );\r\n    // Extracting props from base style\r\n    let componentBaseStyle =\r\n      typeof componentTheme.baseStyle !== 'function'\r\n        ? componentTheme.baseStyle\r\n        : componentTheme.baseStyle({\r\n            theme,\r\n            ...newProps,\r\n            ...props,\r\n            ...colorModeProps,\r\n          });\r\n    newProps = mergeWith(\r\n      newProps,\r\n      componentBaseStyle,\r\n      // @ts-ignore\r\n      (objValue, srcValue, key) => {\r\n        if (!isNil(objValue)) {\r\n          delete newProps[key];\r\n        }\r\n      }\r\n    );\r\n\r\n    const variant =\r\n      props.variant || get(componentTheme, 'defaultProps.variant');\r\n    // Extracting props from variant\r\n    if (\r\n      variant &&\r\n      componentTheme.variants &&\r\n      componentTheme.variants[variant]\r\n    ) {\r\n      const colorScheme =\r\n        props.colorScheme || get(componentTheme, 'defaultProps.colorScheme');\r\n      let variantProps = componentTheme.variants[variant]({\r\n        ...props,\r\n        ...newProps,\r\n        colorScheme,\r\n        theme,\r\n        ...colorModeProps,\r\n      });\r\n      variantProps = extractProps(\r\n        variantProps,\r\n        theme,\r\n        colorModeProps,\r\n        componentTheme,\r\n        currentBreakpoint\r\n      );\r\n      // added this to handle order of props\r\n      newProps = mergeWith(\r\n        newProps,\r\n        variantProps,\r\n        // @ts-ignore\r\n        (objValue, srcValue, key) => {\r\n          if (!isNil(objValue)) {\r\n            delete newProps[key];\r\n          }\r\n        }\r\n      );\r\n      delete newProps.variant;\r\n      delete newProps.colorScheme;\r\n    }\r\n  }\r\n  // Extracting props from normal props\r\n  let extractedProps = extractProps(\r\n    props,\r\n    theme,\r\n    colorModeProps,\r\n    componentTheme,\r\n    currentBreakpoint\r\n  );\r\n  // added this to handle order of props\r\n  // @ts-ignore\r\n  newProps = mergeWith(newProps, extractedProps, (objValue, srcValue, key) => {\r\n    if (!isNil(objValue)) {\r\n      delete newProps[key];\r\n    }\r\n  });\r\n  newProps = mergeUnderscoreProps(newProps, props);\r\n  return newProps;\r\n}\r\n"]}

package/lib/commonjs/hooks/useToken.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToken = useToken;
+
+var _useTheme = require("./useTheme");
+
+var _lodash = _interopRequireDefault(require("lodash.get"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function useToken(property, token, fallback) {
+  const theme = (0, _useTheme.useTheme)();
+
+  if (Array.isArray(token)) {
+    let fallbackArr = [];
+
+    if (fallback) {
+      fallbackArr = Array.isArray(fallback) ? fallback : [fallback];
+    }
+
+    return token.map((innerToken, index) => {
+      var _fallbackArr$index;
+
+      const path = "".concat(property, ".").concat(innerToken);
+      return (0, _lodash.default)(theme, path, (_fallbackArr$index = fallbackArr[index]) !== null && _fallbackArr$index !== void 0 ? _fallbackArr$index : innerToken);
+    });
+  }
+
+  const path = "".concat(property, ".").concat(token);
+  return (0, _lodash.default)(theme, path, fallback !== null && fallback !== void 0 ? fallback : token);
+}
+//# sourceMappingURL=useToken.js.map

package/lib/commonjs/hooks/useToken.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useToken.ts"],"names":["useToken","property","token","fallback","theme","Array","isArray","fallbackArr","map","innerToken","index","path"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEO,SAASA,QAAT,CACLC,QADK,EAELC,KAFK,EAGLC,QAHK,EAIL;AACA,QAAMC,KAAK,GAAG,yBAAd;;AACA,MAAIC,KAAK,CAACC,OAAN,CAAcJ,KAAd,CAAJ,EAA0B;AACxB,QAAIK,WAAgB,GAAG,EAAvB;;AACA,QAAIJ,QAAJ,EAAc;AACZI,MAAAA,WAAW,GAAGF,KAAK,CAACC,OAAN,CAAcH,QAAd,IAA0BA,QAA1B,GAAqC,CAACA,QAAD,CAAnD;AACD;;AACD,WAAOD,KAAK,CAACM,GAAN,CAAU,CAACC,UAAD,EAAaC,KAAb,KAAuB;AAAA;;AACtC,YAAMC,IAAI,aAAMV,QAAN,cAAkBQ,UAAlB,CAAV;AACA,aAAO,qBAAIL,KAAJ,EAAWO,IAAX,wBAAiBJ,WAAW,CAACG,KAAD,CAA5B,mEAAuCD,UAAvC,CAAP;AACD,KAHM,CAAP;AAID;;AAED,QAAME,IAAI,aAAMV,QAAN,cAAkBC,KAAlB,CAAV;AACA,SAAO,qBAAIE,KAAJ,EAAWO,IAAX,EAAiBR,QAAjB,aAAiBA,QAAjB,cAAiBA,QAAjB,GAA6BD,KAA7B,CAAP;AACD","sourcesContent":["import { useTheme } from './useTheme';\r\nimport get from 'lodash.get';\r\n\r\nexport function useToken<T extends string | number>(\r\n  property: string,\r\n  token: T | T[],\r\n  fallback?: T | T[]\r\n) {\r\n  const theme = useTheme();\r\n  if (Array.isArray(token)) {\r\n    let fallbackArr: T[] = [];\r\n    if (fallback) {\r\n      fallbackArr = Array.isArray(fallback) ? fallback : [fallback];\r\n    }\r\n    return token.map((innerToken, index) => {\r\n      const path = `${property}.${innerToken}`;\r\n      return get(theme, path, fallbackArr[index] ?? innerToken);\r\n    });\r\n  }\r\n\r\n  const path = `${property}.${token}`;\r\n  return get(theme, path, fallback ?? token);\r\n}\r\n"]}