Options
All
  • Public
  • Public/Protected
  • All
Menu

Class LengthSides<All, Top, Left, Right, Bottom>

A base class that can be used to create mixin aliases for styles that have 'sides', such as borderWidth, padding and margin. To use the base class five ViewStyle interfaces need to be created; one for each side and one that represents all sides:

example
Style Interfaces ```ts import { ViewStyle } from 'react-native'; export interface ITop extends ViewStyle { borderTopWidth: number; } export interface ILeft extends ViewStyle { borderLeftWidth: number; } export interface IRight extends ViewStyle { borderRightWidth: number; } export interface IBottom extends ViewStyle { borderBottomWidth: number; } export interface IAll extends ViewStyle { borderWidth: number; } ``` A function must then be created that can convert the side and value into a style mixin:
example
Example Conversion function ```ts import { LengthSidesSide } from '@ef-carbon/react-native-style'; function convert(side: LengthSidesSide, value: number): IAll | ITop | ILeft | IRight | IBottom { switch (side) { case 'all': return { borderWidth: Math.max(StyleSheet.hairlineWidth, value) }; case 'top': return { borderTopWidth: Math.max(StyleSheet.hairlineWidth, value) }; case 'left': return { borderLeftWidth: Math.max(StyleSheet.hairlineWidth, value) }; case 'right': return { borderRightWidth: Math.max(StyleSheet.hairlineWidth, value) }; case 'bottom': return { borderBottomWidth: Math.max(StyleSheet.hairlineWidth, value) }; default: return assertNever(side); } } ``` Then the base class can be extended:
example
Derived class ```ts import { LengthSides } from '@ef-carbon/react-native-style'; export interface IBorderWidthSidesOptions { width: ILength; } export class BorderWidthSides extends LengthSides implements ISides { constructor({ width }: IBorderWidthSidesOptions) { super({ length: width, convert }); } } ```

Type parameters

  • All: ViewStyle

  • Top: ViewStyle

  • Left: ViewStyle

  • Right: ViewStyle

  • Bottom: ViewStyle

Hierarchy

Implements

Index

Constructors

constructor

  • new LengthSides(__namedParameters: object): LengthSides

Properties

all

all: Readonly<ILength<All>>

bottom

bottom: Readonly<ILength<Bottom>>

left

left: Readonly<ILength<Left>>

right

right: Readonly<ILength<Right>>

top

top: Readonly<ILength<Top>>

Accessors

huge

  • get huge(): All

large

  • get large(): All

larger

  • get larger(): All

largest

  • get largest(): All

normal

  • get normal(): All

small

  • get small(): All

smaller

  • get smaller(): All

smallest

  • get smallest(): All

tiny

  • get tiny(): All