Initial commit

assets/styles/css.js

@@ -0,0 +1,200 @@
+import { StyleSheet, StatusBar } from 'react-native';
+
+// create useStyles hooks
+export const useStyles = (props = {}) =>
+  StyleSheet.create({ value: props }).value;
+
+export const paddingTopStatusBarHeight = useStyles({
+  paddingTop: StatusBar.currentHeight || 0,
+});
+export const statusBarHeight = useStyles({
+  height: StatusBar.currentHeight || 0,
+});
+export const flexRow = useStyles({
+  display: 'flex',
+  flexDirection: 'row',
+});
+export const flexColumn = useStyles({
+  display: 'flex',
+  flexDirection: 'column',
+});
+export const flexSub = useStyles({
+  flex: 1,
+});
+export const flexShrink = useStyles({
+  flexShrink: 0,
+});
+export const flexWrap = useStyles({
+  flexWrap: 'wrap',
+});
+export const flexnoWrap = useStyles({
+  flexWrap: 'nowrap',
+});
+export const justifyStart = useStyles({
+  justifyContent: 'flex-start',
+});
+export const justifyEnd = useStyles({
+  justifyContent: 'flex-end',
+});
+export const justifyCenter = useStyles({
+  justifyContent: 'center',
+});
+export const justifyBetween = useStyles({
+  justifyContent: 'space-between',
+});
+export const justifyAround = useStyles({
+  justifyContent: 'space-around',
+});
+export const justifyEvenly = useStyles({
+  justifyContent: 'space-evenly',
+});
+
+export const alignItemsStart = useStyles({
+  alignItems: 'flex-start',
+});
+export const alignItemsEnd = useStyles({
+  alignItems: 'flex-end',
+});
+
+export const alignItemsCenter = useStyles({
+  alignItems: 'center',
+});
+export const alignItemsStretch = useStyles({
+  alignItems: 'stretch',
+});
+
+export const positionRelative = useStyles({
+  position: 'relative',
+});
+export const positionAbsolute = useStyles({
+  position: 'absolute',
+});
+
+export const positionSticky = useStyles({
+  position: 'sticky',
+});
+
+export const positionStatic = useStyles({
+  position: 'static',
+});
+
+export const positionFixed = useStyles({
+  position: 'fixed',
+});
+
+export const getColor = (color = {brandPrimary: '#ff6600', brandPrimaryTap: '#ff6600' }) => {
+  const brandPrimary = color.brandPrimary || '#108ee9';
+  const brandPrimaryTap = color.brandPrimaryTap || '#1284d6'; 
+  return {
+	transparent: 'transparent', 
+	brandPrimary,
+	brandPrimaryTap,
+
+    // 文字色
+    color_text_base: color.color_text_base || '#000000', // 基本
+    color_text_base_inverse: color.color_text_base_inverse || '#ffffff', // 基本 _ 反色
+    color_text_placeholder: color.color_text_placeholder || '#bbbbbb', // 文本框提示
+    color_text_disabled: color.color_text_disabled || '#bbbbbb', // 失效
+    color_text_caption: color.color_text_caption || '#888888', // 辅助描述
+    color_text_paragraph: color.color_text_paragraph || '#333333', // 段落
+    color_link: color.color_link || brandPrimary, // 链接
+    color_icon_base: color.color_icon_base || '#cccccc', // 许多小图标的背景，比如一些小圆点，加减号
+
+    // 背景色
+    fill_body: color.fill_body || '#f5f5f9', // 页面背景
+    fill_base: color.fill_base || '#ffffff', // 组件默认背景
+    fill_tap: color.fill_tap || '#dddddd', // 组件默认背景 _ 按下
+    fill_disabled: color.fill_disabled || '#dddddd', // 通用失效背景
+    fill_mask: color.fill_mask || 'rgba(0, 0, 0, .4)', // 遮罩背景
+    fill_grey: color.fill_grey || '#f7f7f7',
+
+    // 全局/品牌色
+    brand_primary: color.brand_primary || brandPrimary,
+    brand_primary_tap: color.brand_primary_tap || brandPrimaryTap,
+    brand_success: color.brand_success || '#6abf47',
+    brand_warning: color.brand_warning || '#faad14',
+    brand_error: color.brand_error || '#f4333c', // 错误(form validate)
+    brand_important: color.brand_important || '#ff5b05', // 用于小红点
+
+    // 边框色
+    border_color_base: color.border_color_base || '#dddddd', // 基础的
+    border_color_thin: color.border_color_thin || '#eeeeee', // 更细的
+
+    primary_button_fill: color.primary_button_fill || brandPrimary,
+    primary_button_fill_tap: color.primary_button_fill_tap || brandPrimaryTap,
+
+    ghost_button_color: color.ghost_button_color || brandPrimary, // 同时应用于背景、文字颜色、边框色
+    ghost_button_fill_tap: color.ghost_button_fill_tap || `${brandPrimary}99`, // alpha 60% 
+
+    warning_button_fill: color.warning_button_fill || '#e94f4f',
+    warning_button_fill_tap: color.warning_button_fill_tap || '#d24747',
+
+    // tab_bar
+    tab_bar_fill: color.tab_bar_fill || '#ebeeef',
+
+    // toast
+    toast_fill: color.toast_fill || 'rgba(0, 0, 0, .8)',
+
+    // search_bar
+    search_bar_fill: color.search_bar_fill || '#efeff4',
+    search_color_icon: color.search_color_icon || '#bbbbbb', // input search icon 的背景色
+
+    // notice_bar
+    notice_bar_fill: color.notice_bar_fill || '#fffada',
+
+    // checkbox
+    checkbox_fill_disabled: color.checkbox_fill_disabled || '#f5f5f5',
+    checkbox_border: color.checkbox_border || '#d9d9d9',
+    checkbox_border_disabled: color.checkbox_border_disabled || '#b9b9b9',
+
+    // switch
+    switch_unchecked: color.switch_unchecked || '#cccccc',
+    switch_unchecked_disabled: color.switch_unchecked_disabled || '#cccccc66', // switch_fill的40%透明度
+
+    // tooltip
+    tooltip_dark: color.tooltip_dark || 'rgba(0, 0, 0, 0.9)',
+  };
+};
+
+export const getColorStyles = color => {
+  return {
+    default: useStyles({
+      color: color.default,
+    }),
+    defaultBg: useStyles({
+      backgroundColor: color.default,
+    }),
+    primary: useStyles({
+      color: color.primary,
+    }),
+    primaryBg: useStyles({
+      backgroundColor: color.primary,
+    }),
+  };
+};
+
+export default {
+  statusBarHeight,
+  paddingTopStatusBarHeight,
+  flexRow,
+  flexColumn,
+  flexSub,
+  flexShrink,
+  flexWrap,
+  flexnoWrap,
+  justifyStart,
+  justifyEnd,
+  justifyCenter,
+  justifyBetween,
+  justifyAround,
+  justifyEvenly,
+  alignItemsStart,
+  alignItemsEnd,
+  alignItemsCenter,
+  alignItemsStretch,
+  positionRelative,
+  positionAbsolute,
+  getColor,
+  getColorStyles,
+  useStyles,
+};