react-native-paper/lib/module/components/TextInput/helpers.js

Material design for React Native

import { LABEL_PADDING_HORIZONTAL, ADORNMENT_OFFSET, ADORNMENT_SIZE, FLAT_INPUT_OFFSET } from './constants';
import { AdornmentType, AdornmentSide } from './Adornment/enums';
export const calculateLabelTopPosition = (labelHeight, height = 0, optionalPadding = 0) => {
  const customHeight = height > 0 ? height : 0;
  return Math.floor((customHeight - labelHeight) / 2 + optionalPadding);
};
export const calculateInputHeight = (labelHeight, height = 0, minHeight) => {
  const finalHeight = height > 0 ? height : labelHeight;
  if (height > 0) return height;
  return finalHeight < minHeight ? minHeight : finalHeight;
};
export const calculatePadding = props => {
  const {
    height,
    multiline = false
  } = props;
  let result = 0;

  if (multiline) {
    if (height && multiline) {
      result = calculateTextAreaPadding(props);
    } else {
      result = calculateInputPadding(props);
    }
  }

  return Math.max(0, result);
};

const calculateTextAreaPadding = props => {
  const {
    dense
  } = props;
  return dense ? 10 : 20;
};

const calculateInputPadding = ({
  topPosition,
  fontSize,
  multiline,
  scale,
  dense,
  offset,
  isAndroid
}) => {
  const refFontSize = scale * fontSize;
  let result = Math.floor(topPosition / 2);
  result = result + Math.floor((refFontSize - fontSize) / 2) - (scale < 1 ? offset / 2 : 0);
  if (multiline && isAndroid) result = Math.min(dense ? offset / 2 : offset, result);
  return result;
};

export const adjustPaddingOut = ({
  pad,
  multiline,
  label,
  scale,
  height,
  fontSize,
  dense,
  offset,
  isAndroid
}) => {
  const refFontSize = scale * fontSize;
  let result = pad;

  if (height) {
    return {
      paddingTop: Math.max(0, (height - fontSize) / 2),
      paddingBottom: Math.max(0, (height - fontSize) / 2)
    };
  }

  if (!isAndroid && multiline) {
    if (dense) {
      if (label) {
        result += scale < 1 ? Math.min(offset, refFontSize / 2 * scale) : 0;
      } else {
        result += 0;
      }
    }

    if (!dense) {
      if (label) {
        result += scale < 1 ? Math.min(offset, refFontSize * scale) : Math.min(offset / 2, refFontSize * scale);
      } else {
        result += scale < 1 ? Math.min(offset / 2, refFontSize * scale) : 0;
      }
    }

    result = Math.floor(result);
  }

  return {
    paddingTop: result,
    paddingBottom: result
  };
};
export const adjustPaddingFlat = ({
  pad,
  scale,
  multiline,
  label,
  height,
  offset,
  dense,
  fontSize,
  isAndroid,
  styles
}) => {
  let result = pad;
  let topResult = result;
  let bottomResult = result;
  const {
    paddingTop,
    paddingBottom
  } = styles;
  const refFontSize = scale * fontSize;

  if (!multiline) {
    // do not modify padding if input is not multiline
    if (label) {
      // return const style for flat input with label
      return {
        paddingTop,
        paddingBottom
      };
    } // return pad for flat input without label


    return {
      paddingTop: result,
      paddingBottom: result
    };
  }

  if (label) {
    // add paddings passed from styles
    topResult = paddingTop;
    bottomResult = paddingBottom; // adjust top padding for iOS

    if (!isAndroid) {
      if (dense) {
        topResult += scale < 1 ? Math.min(result, refFontSize * scale) - result / 2 : Math.min(result, refFontSize * scale) - result / 2;
      }

      if (!dense) {
        topResult += scale < 1 ? Math.min(offset / 2, refFontSize * scale) : Math.min(result, refFontSize * scale) - offset / 2;
      }
    }

    topResult = Math.floor(topResult);
  } else {
    if (height) {
      // center text when height is passed
      return {
        paddingTop: Math.max(0, (height - fontSize) / 2),
        paddingBottom: Math.max(0, (height - fontSize) / 2)
      };
    } // adjust paddings for iOS if no label


    if (!isAndroid) {
      if (dense) {
        result += scale < 1 ? Math.min(offset / 2, fontSize / 2 * scale) : Math.min(offset / 2, scale);
      }

      if (!dense) {
        result += scale < 1 ? Math.min(offset, fontSize * scale) : Math.min(fontSize, offset / 2 * scale);
      }

      result = Math.floor(result);
      topResult = result;
      bottomResult = result;
    }
  }

  return {
    paddingTop: Math.max(0, topResult),
    paddingBottom: Math.max(0, bottomResult)
  };
};
export const interpolatePlaceholder = (labeled, hasActiveOutline) => labeled.interpolate({
  inputRange: [0, 1],
  outputRange: [hasActiveOutline ? 0 : 1, 1]
});
export function calculateFlatAffixTopPosition({
  height,
  paddingTop,
  paddingBottom,
  affixHeight
}) {
  const inputHeightWithoutPadding = height - paddingTop - paddingBottom;
  const halfOfTheInputHeightDecreasedByAffixHeight = (inputHeightWithoutPadding - affixHeight) / 2;
  return paddingTop + halfOfTheInputHeightDecreasedByAffixHeight;
}
export function calculateOutlinedIconAndAffixTopPosition({
  height,
  affixHeight,
  labelYOffset
}) {
  return (height - affixHeight + labelYOffset) / 2;
}
export const calculateFlatInputHorizontalPadding = ({
  adornmentConfig
}) => {
  let paddingLeft = LABEL_PADDING_HORIZONTAL;
  let paddingRight = LABEL_PADDING_HORIZONTAL;
  adornmentConfig.forEach(({
    type,
    side
  }) => {
    if (type === AdornmentType.Icon && side === AdornmentSide.Left) {
      paddingLeft = ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
    } else if (side === AdornmentSide.Right) {
      if (type === AdornmentType.Affix) {
        paddingRight = ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
      } else if (type === AdornmentType.Icon) {
        paddingRight = ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
      }
    }
  });
  return {
    paddingLeft,
    paddingRight
  };
};
//# sourceMappingURL=helpers.js.map