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

package/src/utils/react-native-web-fucntions/atomic.ts

@@ -0,0 +1,368 @@
+/* eslint-disable */
+//@ts-nocheck
+// This functions is taken from react native web
+
+import hash from '../useResponsiveQuery/hash';
+import prefixStyles from '../react-native-web-fucntions/prefixStyles';
+import normalizeValueWithProperty from './normalizeValueWithProperty';
+import createReactDOMStyle from '../react-native-web-fucntions/createReactDOMStyle';
+import hyphenateStyleName from '../react-native-web-fucntions/hyphenateStyleName';
+type Value = Object | Array<any> | string | number;
+type Style = { [key: string]: Value };
+type Rule = string;
+type Rules = Array<Rule>;
+type RulesData = [Rules, number];
+type CompiledStyle = {
+  //@ts-ignore
+  $$css: boolean;
+  //@ts-ignore
+  $$css$localize?: boolean;
+  [key: string]: string | Array<string>;
+};
+const borderTopLeftRadius = 'borderTopLeftRadius';
+const borderTopRightRadius = 'borderTopRightRadius';
+const borderBottomLeftRadius = 'borderBottomLeftRadius';
+const borderBottomRightRadius = 'borderBottomRightRadius';
+const borderLeftColor = 'borderLeftColor';
+const borderLeftStyle = 'borderLeftStyle';
+const borderLeftWidth = 'borderLeftWidth';
+const borderRightColor = 'borderRightColor';
+const borderRightStyle = 'borderRightStyle';
+const borderRightWidth = 'borderRightWidth';
+const right = 'right';
+const marginLeft = 'marginLeft';
+const marginRight = 'marginRight';
+const paddingLeft = 'paddingLeft';
+const paddingRight = 'paddingRight';
+const left = 'left';
+const PROPERTIES_VALUE: any = ['clear', 'float', 'textAlign'];
+// Map of LTR property names to their BiDi equivalent.
+const PROPERTIES_FLIP: { [key: string]: string } = {
+  [borderTopLeftRadius]: borderTopRightRadius,
+  [borderTopRightRadius]: borderTopLeftRadius,
+  [borderBottomLeftRadius]: borderBottomRightRadius,
+  [borderBottomRightRadius]: borderBottomLeftRadius,
+  [borderLeftColor]: borderRightColor,
+  [borderLeftStyle]: borderRightStyle,
+  [borderLeftWidth]: borderRightWidth,
+  [borderRightColor]: borderLeftColor,
+  [borderRightStyle]: borderLeftStyle,
+  [borderRightWidth]: borderLeftWidth,
+  [left]: right,
+  [marginLeft]: marginRight,
+  [marginRight]: marginLeft,
+  [paddingLeft]: paddingRight,
+  [paddingRight]: paddingLeft,
+  [right]: left,
+};
+// Map of I18N property names to their LTR equivalent.
+const PROPERTIES_I18N: any = {
+  borderTopStartRadius: borderTopLeftRadius,
+  borderTopEndRadius: borderTopRightRadius,
+  borderBottomStartRadius: borderBottomLeftRadius,
+  borderBottomEndRadius: borderBottomRightRadius,
+  borderStartColor: borderLeftColor,
+  borderStartStyle: borderLeftStyle,
+  borderStartWidth: borderLeftWidth,
+  borderEndColor: borderRightColor,
+  borderEndStyle: borderRightStyle,
+  borderEndWidth: borderRightWidth,
+  end: right,
+  marginStart: marginLeft,
+  marginEnd: marginRight,
+  paddingStart: paddingLeft,
+  paddingEnd: paddingRight,
+  start: left,
+};
+type CompilerOutput = [CompiledStyle, Array<RulesData>];
+const customGroup: { [key: string]: number } = {
+  borderColor: 2,
+  borderRadius: 2,
+  borderStyle: 2,
+  borderWidth: 2,
+  display: 2,
+  flex: 2,
+  margin: 2,
+  overflow: 2,
+  overscrollBehavior: 2,
+  padding: 2,
+  marginHorizontal: 2.1,
+  marginVertical: 2.1,
+  paddingHorizontal: 2.1,
+  paddingVertical: 2.1,
+};
+const atomicGroup = 2.2;
+const cache = new Map();
+export function atomic(style: Style): CompilerOutput {
+  //@ts-ignore
+  const compiledStyle: CompiledStyle = { $$css: true };
+  const compiledRules: any = [];
+
+  function atomicCompile(prop: any, value: any) {
+    const valueString = stringifyValueWithProperty(value, prop);
+    const cacheKey = prop + valueString;
+    const cachedResult = cache.get(cacheKey);
+    let identifier;
+    if (cachedResult != null) {
+      identifier = cachedResult[0];
+      compiledRules.push(cachedResult[1]);
+    } else {
+      identifier = createIdentifier('r', prop, value);
+      const order = customGroup[prop] || atomicGroup;
+      const rules = createAtomicRules(identifier, prop, value);
+      const orderedRules = [rules, order];
+      compiledRules.push(orderedRules);
+      cache.set(cacheKey, [identifier, orderedRules]);
+    }
+    return identifier;
+  }
+
+  Object.keys(style)
+    .sort()
+    .forEach((prop) => {
+      const value = style[prop];
+      if (value != null) {
+        let localizeableValue;
+        // BiDi flip values
+        if (PROPERTIES_VALUE.indexOf(prop) > -1) {
+          const left = atomicCompile(prop, 'left');
+          const right = atomicCompile(prop, 'right');
+          if (value === 'start') {
+            localizeableValue = [left, right];
+          } else if (value === 'end') {
+            localizeableValue = [right, left];
+          }
+        }
+        // BiDi flip properties
+        const propPolyfill = PROPERTIES_I18N[prop];
+        if (propPolyfill != null) {
+          const ltr = atomicCompile(propPolyfill, value);
+          const rtl = atomicCompile(PROPERTIES_FLIP[propPolyfill], value);
+          localizeableValue = [ltr, rtl];
+        }
+        // BiDi flip transitionProperty value
+        if (prop === 'transitionProperty') {
+          const values = Array.isArray(value) ? value : [value];
+          const polyfillIndices = [];
+
+          for (let i = 0; i < values.length; i++) {
+            const val = values[i];
+            if (typeof val === 'string' && PROPERTIES_I18N[val] != null) {
+              polyfillIndices.push(i);
+            }
+          }
+
+          if (polyfillIndices.length > 0) {
+            const ltrPolyfillValues = [...values];
+            const rtlPolyfillValues = [...values];
+            polyfillIndices.forEach((i) => {
+              const ltrVal = ltrPolyfillValues[i];
+              if (typeof ltrVal === 'string') {
+                const ltrPolyfill = PROPERTIES_I18N[ltrVal];
+                const rtlPolyfill = PROPERTIES_FLIP[ltrPolyfill];
+                ltrPolyfillValues[i] = ltrPolyfill;
+                rtlPolyfillValues[i] = rtlPolyfill;
+                const ltr = atomicCompile(prop, ltrPolyfillValues);
+                const rtl = atomicCompile(prop, rtlPolyfillValues);
+                localizeableValue = [ltr, rtl];
+              }
+            });
+          }
+        }
+
+        if (localizeableValue == null) {
+          localizeableValue = atomicCompile(prop, value);
+        } else {
+          compiledStyle['$$css$localize'] = true;
+        }
+
+        compiledStyle[prop] = localizeableValue;
+      }
+    });
+
+  return [compiledStyle, compiledRules];
+}
+
+/**
+ * Create a value string that normalizes different input values with a common
+ * output.
+ */
+export function stringifyValueWithProperty(
+  value: Value,
+  property?: string
+): string {
+  // e.g., 0 => '0px', 'black' => 'rgba(0,0,0,1)'
+  const normalizedValue = normalizeValueWithProperty(value, property);
+  return typeof normalizedValue !== 'string'
+    ? JSON.stringify(normalizedValue || '')
+    : normalizedValue;
+}
+
+/**
+ * An identifier is associated with a unique set of styles.
+ */
+function createIdentifier(prefix: string, name: string, value: Value): string {
+  const hashedString = hash(name + stringifyValueWithProperty(value, name));
+  return process.env.NODE_ENV !== 'production'
+    ? `${prefix}-${name}-${hashedString}`
+    : `${prefix}-${hashedString}`;
+}
+
+/**
+ * Create the Atomic CSS rules needed for a given StyleSheet rule.
+ * Translates StyleSheet declarations to CSS.
+ */
+function createAtomicRules(
+  identifier: string,
+  property: any,
+  value: any
+): Rules {
+  const rules = [];
+  const selector = `.${identifier}`;
+
+  // Handle non-standard properties and object values that require multiple
+  // CSS rules to be created.
+  switch (property) {
+    case 'animationKeyframes': {
+      const [animationNames, keyframesRules] = processKeyframesValue(value);
+      const block = createDeclarationBlock({
+        animationName: animationNames.join(','),
+      });
+      rules.push(`${selector}${block}`, ...keyframesRules);
+      break;
+    }
+
+    // Equivalent to using '::placeholder'
+    case 'placeholderTextColor': {
+      const block = createDeclarationBlock({ color: value, opacity: 1 });
+      rules.push(
+        `${selector}::-webkit-input-placeholder${block}`,
+        `${selector}::-moz-placeholder${block}`,
+        `${selector}:-ms-input-placeholder${block}`,
+        `${selector}::placeholder${block}`
+      );
+      break;
+    }
+
+    // Polyfill for additional 'pointer-events' values
+    // See d13f78622b233a0afc0c7a200c0a0792c8ca9e58
+    case 'pointerEvents': {
+      let finalValue = value;
+      if (value === 'auto' || value === 'box-only') {
+        finalValue = 'auto!important';
+        if (value === 'box-only') {
+          const block = createDeclarationBlock({ pointerEvents: 'none' });
+          rules.push(`${selector}>*${block}`);
+        }
+      } else if (value === 'none' || value === 'box-none') {
+        finalValue = 'none!important';
+        if (value === 'box-none') {
+          const block = createDeclarationBlock({ pointerEvents: 'auto' });
+          rules.push(`${selector}>*${block}`);
+        }
+      }
+      const block = createDeclarationBlock({ pointerEvents: finalValue });
+      rules.push(`${selector}${block}`);
+      break;
+    }
+
+    // Polyfill for draft spec
+    // https://drafts.csswg.org/css-scrollbars-1/
+    case 'scrollbarWidth': {
+      if (value === 'none') {
+        rules.push(`${selector}::-webkit-scrollbar{display:none}`);
+      }
+      const block = createDeclarationBlock({ scrollbarWidth: value });
+      rules.push(`${selector}${block}`);
+      break;
+    }
+
+    default: {
+      const block = createDeclarationBlock({ [property]: value });
+      rules.push(`${selector}${block}`);
+      break;
+    }
+  }
+
+  return rules;
+}
+
+/**
+ * Creates a CSS declaration block from a StyleSheet object.
+ */
+function createDeclarationBlock(style: Style): string {
+  const domStyle: any = prefixStyles(createReactDOMStyle(style));
+  const declarationsString = Object.keys(domStyle)
+    .map((property) => {
+      const value = domStyle[property];
+      const prop = hyphenateStyleName(property);
+      // The prefixer may return an array of values:
+      // { display: [ '-webkit-flex', 'flex' ] }
+      // to represent "fallback" declarations
+      // { display: -webkit-flex; display: flex; }
+      if (Array.isArray(value)) {
+        return value.map((v) => `${prop}:${v}`).join(';');
+      } else {
+        return `${prop}:${value}`;
+      }
+    })
+    // Once properties are hyphenated, this will put the vendor
+    // prefixed and short-form properties first in the list.
+    .sort()
+    .join(';');
+
+  return `{${declarationsString};}`;
+}
+
+/**
+ * Create CSS keyframes rules and names from a StyleSheet keyframes object.
+ */
+function processKeyframesValue(keyframesValue: any) {
+  if (typeof keyframesValue === 'number') {
+    throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
+  }
+
+  const animationNames: any = [];
+  const rules: any = [];
+  const value = Array.isArray(keyframesValue)
+    ? keyframesValue
+    : [keyframesValue];
+
+  value.forEach((keyframes) => {
+    if (typeof keyframes === 'string') {
+      // Support external animation libraries (identifiers only)
+      animationNames.push(keyframes);
+    } else {
+      // Create rules for each of the keyframes
+      const [identifier, keyframesRules] = createKeyframes(keyframes);
+      animationNames.push(identifier);
+      rules.push(...keyframesRules);
+    }
+  });
+
+  return [animationNames, rules];
+}
+
+/**
+ * Create individual CSS keyframes rules.
+ */
+function createKeyframes(keyframes: any): [string, Rules] {
+  const prefixes = ['-webkit-', ''];
+  const identifier = createIdentifier('r', 'animation', keyframes);
+
+  const steps =
+    '{' +
+    Object.keys(keyframes)
+      .map((stepName) => {
+        const rule = keyframes[stepName];
+        const block = createDeclarationBlock(rule);
+        return `${stepName}${block}`;
+      })
+      .join('') +
+    '}';
+
+  const rules = prefixes.map((prefix) => {
+    return `@${prefix}keyframes ${identifier}${steps}`;
+  });
+  return [identifier, rules];
+}

package/src/utils/react-native-web-fucntions/createReactDOMStyle.ts

@@ -0,0 +1,220 @@
+/* eslint-disable */
+//@ts-nocheck
+// This functions is taken from react native web
+
+import normalizeValueWithProperty from './normalizeValueWithProperty';
+
+type Style = { [key: string]: any };
+const canUseDOM: boolean = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+
+/**
+ * The browser implements the CSS cascade, where the order of properties is a
+ * factor in determining which styles to paint. React Native is different. It
+ * gives giving precedence to the more specific style property. For example,
+ * the value of `paddingTop` takes precedence over that of `padding`.
+ *
+ * This module creates mutally exclusive style declarations by expanding all of
+ * React Native's supported shortform properties (e.g. `padding`) to their
+ * longfrom equivalents.
+ */
+
+const emptyObject = {};
+
+const supportsCSS3TextDecoration =
+  !canUseDOM ||
+  (window.CSS != null &&
+    window.CSS.supports != null &&
+    (window.CSS.supports('text-decoration-line', 'none') ||
+      window.CSS.supports('-webkit-text-decoration-line', 'none')));
+
+const ignoredProps: {
+  elevation: boolean;
+  overlayColor: boolean;
+  resizeMode: boolean;
+  tintColor: boolean;
+} = {
+  elevation: true,
+  overlayColor: true,
+  resizeMode: true,
+  tintColor: true,
+};
+
+const MONOSPACE_FONT_STACK = 'monospace,monospace';
+
+const SYSTEM_FONT_STACK =
+  '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif';
+
+const STYLE_SHORT_FORM_EXPANSIONS: any = {
+  borderColor: [
+    'borderTopColor',
+    'borderRightColor',
+    'borderBottomColor',
+    'borderLeftColor',
+  ],
+  borderRadius: [
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomRightRadius',
+    'borderBottomLeftRadius',
+  ],
+  borderStyle: [
+    'borderTopStyle',
+    'borderRightStyle',
+    'borderBottomStyle',
+    'borderLeftStyle',
+  ],
+  borderWidth: [
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+  ],
+  marginHorizontal: ['marginRight', 'marginLeft'],
+  marginVertical: ['marginTop', 'marginBottom'],
+  overflow: ['overflowX', 'overflowY'],
+  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
+  paddingHorizontal: ['paddingRight', 'paddingLeft'],
+  paddingVertical: ['paddingTop', 'paddingBottom'],
+};
+
+/**
+ * Transform
+ */
+
+// { scale: 2 } => 'scale(2)'
+// { translateX: 20 } => 'translateX(20px)'
+// { matrix: [1,2,3,4,5,6] } => 'matrix(1,2,3,4,5,6)'
+const mapTransform = (transform: Object): string => {
+  const type = Object.keys(transform)[0];
+  //@ts-ignore
+  const value = transform[type];
+  if (type === 'matrix' || type === 'matrix3d') {
+    return `${type}(${value.join(',')})`;
+  } else {
+    const normalizedValue = normalizeValueWithProperty(value, type);
+    return `${type}(${normalizedValue})`;
+  }
+};
+
+export const createTransformValue = (style: Style): string => {
+  let transform = style.transform;
+  if (Array.isArray(style.transform)) {
+    transform = style.transform.map(mapTransform).join(' ');
+  }
+  return transform;
+};
+
+/**
+ * Reducer
+ */
+
+const createReactDOMStyle = (style: Style, isInline?: boolean): Style => {
+  if (!style) {
+    return emptyObject;
+  }
+
+  const resolvedStyle: any = {};
+
+  for (const prop in style) {
+    const value = style[prop];
+
+    if (
+      // Ignore everything with a null value
+      value == null ||
+      // Ignore some React Native styles
+      //@ts-ignore
+      ignoredProps[prop]
+    ) {
+      continue;
+    }
+
+    if (prop === 'aspectRatio') {
+      resolvedStyle[prop] = value.toString();
+    } else if (prop === 'backgroundClip') {
+      // TODO: remove once this issue is fixed
+      // https://github.com/rofrischmann/inline-style-prefixer/issues/159
+      if (value === 'text') {
+        resolvedStyle.backgroundClip = value;
+        resolvedStyle.WebkitBackgroundClip = value;
+      }
+    } else if (prop === 'flex') {
+      if (value === -1) {
+        resolvedStyle.flexGrow = 0;
+        resolvedStyle.flexShrink = 1;
+        resolvedStyle.flexBasis = 'auto';
+      } else {
+        resolvedStyle.flex = value;
+      }
+    } else if (prop === 'font') {
+      resolvedStyle[prop] = value.replace('System', SYSTEM_FONT_STACK);
+    } else if (prop === 'fontFamily') {
+      if (value.indexOf('System') > -1) {
+        const stack = value.split(/,\s*/);
+        stack[stack.indexOf('System')] = SYSTEM_FONT_STACK;
+        resolvedStyle[prop] = stack.join(',');
+      } else if (value === 'monospace') {
+        resolvedStyle[prop] = MONOSPACE_FONT_STACK;
+      } else {
+        resolvedStyle[prop] = value;
+      }
+    } else if (prop === 'fontVariant') {
+      if (Array.isArray(value) && value.length > 0) {
+        resolvedStyle.fontVariant = value.join(' ');
+      }
+    } else if (prop === 'textAlignVertical') {
+      resolvedStyle.verticalAlign = value === 'center' ? 'middle' : value;
+    } else if (prop === 'textDecorationLine') {
+      // use 'text-decoration' for browsers that only support CSS2
+      // text-decoration (e.g., IE, Edge)
+      if (!supportsCSS3TextDecoration) {
+        resolvedStyle.textDecoration = value;
+      } else {
+        resolvedStyle.textDecorationLine = value;
+      }
+    } else if (prop === 'transform' || prop === 'transformMatrix') {
+      resolvedStyle.transform = createTransformValue(style);
+    } else if (prop === 'writingDirection') {
+      resolvedStyle.direction = value;
+    } else {
+      const value = normalizeValueWithProperty(style[prop], prop);
+      const longFormProperties = STYLE_SHORT_FORM_EXPANSIONS[prop];
+      if (isInline && prop === 'margin') {
+        if (style.marginHorizontal == null) {
+          resolvedStyle.marginLeft = value;
+          resolvedStyle.marginRight = value;
+        }
+        if (style.marginVertical == null) {
+          resolvedStyle.marginTop = value;
+          resolvedStyle.marginBottom = value;
+        }
+      } else if (isInline && prop === 'padding') {
+        if (style.paddingHorizontal == null) {
+          resolvedStyle.paddingLeft = value;
+          resolvedStyle.paddingRight = value;
+        }
+        if (style.paddingVertical == null) {
+          resolvedStyle.paddingTop = value;
+          resolvedStyle.paddingBottom = value;
+        }
+      } else if (longFormProperties) {
+        longFormProperties.forEach((longForm: any, _i: any) => {
+          // The value of any longform property in the original styles takes
+          // precedence over the shortform's value.
+          if (style[longForm] == null) {
+            resolvedStyle[longForm] = value;
+          }
+        });
+      } else {
+        resolvedStyle[prop] = Array.isArray(value) ? value.join(',') : value;
+      }
+    }
+  }
+
+  return resolvedStyle;
+};
+
+export default createReactDOMStyle;

package/src/utils/react-native-web-fucntions/hyphenateStyleName.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+//@ts-nocheck
+// This functions is taken from react native web
+
+const uppercasePattern = /[A-Z]/g;
+const msPattern = /^ms-/;
+const cache: any = {};
+
+function toHyphenLower(match: any) {
+  return '-' + match.toLowerCase();
+}
+
+function hyphenateStyleName(name: string): string {
+  if (name in cache) {
+    return cache[name];
+  }
+
+  const hName = name.replace(uppercasePattern, toHyphenLower);
+  return (cache[name] = msPattern.test(hName) ? '-' + hName : hName);
+}
+
+export default hyphenateStyleName;

package/src/utils/react-native-web-fucntions/normalizeColor.ts

@@ -0,0 +1,50 @@
+/* eslint-disable */
+//@ts-nocheck
+// This functions is taken from react native web
+
+import ConvertNumberIntoHex from 'normalize-css-color';
+
+const processColor = (color?: any): any => {
+  if (color === undefined || color === null) {
+    return color;
+  }
+
+  // convert number and hex
+  let int32Color = ConvertNumberIntoHex(color);
+  if (int32Color === undefined || int32Color === null) {
+    return undefined;
+  }
+  //@ts-ignore
+  int32Color = ((int32Color << 24) | (int32Color >>> 8)) >>> 0;
+
+  return int32Color;
+};
+
+const isWebColor = (color: string): boolean =>
+  color === 'currentcolor' ||
+  color === 'currentColor' ||
+  color === 'inherit' ||
+  color.indexOf('var(') === 0;
+
+const normalizeColor = (
+  color?: number | string,
+  opacity: number = 1
+): void | string => {
+  if (color == null) return;
+
+  if (typeof color === 'string' && isWebColor(color)) {
+    return color;
+  }
+
+  const colorInt = processColor(color);
+  if (colorInt != null) {
+    const r = (colorInt >> 16) & 255;
+    const g = (colorInt >> 8) & 255;
+    const b = colorInt & 255;
+    const a = ((colorInt >> 24) & 255) / 255;
+    const alpha = (a * opacity).toFixed(2);
+    return `rgba(${r},${g},${b},${alpha})`;
+  }
+};
+
+export default normalizeColor;

package/src/utils/react-native-web-fucntions/normalizeValueWithProperty.ts

@@ -0,0 +1,35 @@
+/* eslint-disable */
+//@ts-nocheck
+// This functions is taken from react native web
+
+import unitlessNumbers from './unitlessNumbers';
+import normalizeColor from './normalizeColor';
+
+const colorProps: any = {
+  backgroundColor: true,
+  borderColor: true,
+  borderTopColor: true,
+  borderRightColor: true,
+  borderBottomColor: true,
+  borderLeftColor: true,
+  color: true,
+  shadowColor: true,
+  textDecorationColor: true,
+  textShadowColor: true,
+};
+
+export default function normalizeValueWithProperty(
+  value: any,
+  property?: string
+): any {
+  let returnValue = value;
+  if (
+    (property == null || !unitlessNumbers[property]) &&
+    typeof value === 'number'
+  ) {
+    returnValue = `${value}px`;
+  } else if (property != null && colorProps[property]) {
+    returnValue = normalizeColor(value);
+  }
+  return returnValue;
+}