zmp-react/common/constants.js

Build full featured iOS & Android apps using ZMP & React

export const ICON_SIZE_SM = 12.5;
export const ICON_SIZE_MD = 18;
export const ICON_CHECK = 'zi-check';
export const ICON_INFO_CIRCLE = 'zi-info-circle';
export const ICON_EYE_FILL = 'zi-hide';
export const ICON_EYE = 'zi-unhide';
export const BUTTON_TYPE = {
  PRIMARY: 'primary',
  SECONDARY: 'secondary',
  DESTRUCTIVE: 'destructive',
  TERTIARY: 'tertiary',
  GHOST: 'ghost',
};
export const ICON_CHEVRON_LEFT = 'zi-chevron-left';

// map font-size and line-height
export const FONT_SIZE_LINE_HEIGHT_MAP = {
  10: 14,
  11: 16,
  12: 16,
  14: 18,
  15: 20,
  16: 22,
  18: 24,
  20: 26,
  22: 28,
  24: 30,
  27: 34,
  29: 36,
};

export const AVATAR_DEFAULT_BG_COLOR = [
  'gradient-blue-light-blue',
  'gradient-green-light-green',
  'gradient-orange-red',
  'gradient-pink-light-purple',
  'gradient-light-blue-teal',
  'gradient-light-green-yellow',
  'gradient-purple-blue',
  'gradient-pink-light-pink',
  'gradient-teal-green',
  'gradient-yellow-orange',
  'gradient-light-purple-purple',
  'gradient-light-red-light-pink',
];

export const AVATAR_SIZE = {
  24: 'avatar-size-24',
  48: 'avatar-size-48',
  56: 'avatar-size-56',
  96: 'avatar-size-96',
  120: 'avatar-size-120',
};

export const DEFAULT_AVATAR_GROUP_COUNTER = 3;

export const AVATAR_COLOR_PROPS = {
  'blue-lblue': 'gradient-blue-light-blue',
  'green-lgreen': 'gradient-green-light-green',
  'orange-red': 'gradient-orange-red',
  'pink-lpurple': 'gradient-pink-light-purple',
  'lblue-teal': 'gradient-light-blue-teal',
  'lgreen-yellow': 'gradient-light-green-yellow',
  'purple-blue': 'gradient-purple-blue',
  'pink-lpink': 'gradient-pink-light-pink',
  'teal-green': 'gradient-teal-green',
  'yellow-orange': 'gradient-yellow-orange',
  'lpurple-purple': 'gradient-light-purple-purple',
  'lred-lpink': 'gradient-light-red-light-pink',
};

export const FLEX_GAP_CLASSNAME = {
  gap_1: 'flex-gap-1',
  gap_2: 'flex-gap-2',
  gap_3: 'flex-gap-3',
  gap_4: 'flex-gap-4',
  gap_5: 'flex-gap-5',
  gap_6: 'flex-gap-6',
  gap_7: 'flex-gap-7',
  gap_8: 'flex-gap-8',
  gap_9: 'flex-gap-9',
  gap_10: 'flex-gap-10',
};

export const DEFAULT_LARGE_NAVBAR_HEIGHT = 82;

export const MAX_GRID_COLUMNS = 6;

export const MIN_GRID_COLUMNS = 1;

export const DOMAIN_WHITELIST = ['h5.zdn.vn/zapps'];

export const MINI_PROGRAM_DOMAIN = 'https://h5.zdn.vn/zapps';

export const PAGE_DIR = 'pages';

export const RESIZABLE_TEXTAREA_HEIGHT = {
  MIN_ROWS: {
    MIN: 1,
    MAX: 10,
  },
  MAX_ROWS: {
    MIN: 1,
    MAX: 20,
  },
};

export const BOX_PROPS = {
  spacing: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  textAlign: ['left', 'right', 'center', 'justify', 'initial', 'inherit'],
  verticalAlign: [
    'baseline',
    'sub',
    'super',
    'top',
    'text-top',
    'middle',
    'bottom',
    'text-bottom',
    'initial',
    'inherit',
  ],
  justifyContent: [
    'flex-start',
    'flex-end',
    'center',
    'space-between',
    'space-around',
    'space-evenly',
    'initial',
  ],
  alignItems: ['flex-start', 'flex-end', 'stretch', 'baseline', 'center', 'initial'],
  alignContent: [
    'stretch',
    'center',
    'flex-start',
    'flex-end',
    'space-between',
    'space-around',
    'space-evenly',
  ],
  flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
};

export const VALID_DATE_PICKER_COLUMN_FORMAT = ['MM-DD-YYYY', 'YYYY-MM-DD', 'DD-MM-YYYY'];