@momo-kits/title 0.92.1-rc.14

package/index.tsx

@@ -0,0 +1,178 @@
+import React, {FC, useContext, useState} from 'react';
+import {Text as RNText, TouchableOpacity, View, ViewStyle} from 'react-native';
+import styles from './styles';
+import {Icon} from '../Icon';
+import {scaleSize, Text} from '../Text';
+import {ApplicationContext} from '../Application';
+import {Badge} from '../Badge';
+import {Typography} from '../Text/types';
+import {TitleProps} from './types';
+import {Colors} from '../Consts';
+
+const Title: FC<TitleProps> = ({
+  title = 'Title',
+  type = 'section',
+  size = 'medium',
+  icon,
+  description,
+  iconColor = null,
+  iconAlign = 'top',
+  showRightAction = false,
+  showTrailingAction = false,
+  badgeLabel,
+  buttonTitle,
+  onPressRightAction = () => {},
+  buttonSize = 'small',
+  textOnly = false,
+}) => {
+  const {theme} = useContext(ApplicationContext);
+  const [badgeWidth, setBadgeWidth] = useState(0);
+  const [contentWidth, setContentWidth] = useState(0);
+  const styleSheet: {
+    [key: string]: any;
+  } = styles;
+  const typography = `${type}_${size}`;
+  const isSection = type === 'section';
+  const numberOfLines = showTrailingAction || !!badgeLabel ? 1 : 2;
+  const buttonTypo: Typography =
+    buttonSize === 'small' ? 'action_xs_bold' : 'action_s_bold';
+  const flexStyle = showTrailingAction && {maxWidth: '70%'};
+
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    let iconStyle: ViewStyle = {
+      justifyContent: 'flex-start',
+    };
+
+    if (iconAlign === 'middle') {
+      iconStyle = {justifyContent: 'center'};
+    }
+
+    if (iconAlign === 'bottom') {
+      iconStyle = {justifyContent: 'flex-end'};
+    }
+
+    return (
+      <View style={[styles.iconView, iconStyle]}>
+        <Icon color={iconColor} source={icon} />
+      </View>
+    );
+  };
+
+  const renderContent = () => {
+    return (
+      <View style={styles.contentView}>
+        <View
+          onLayout={e => {
+            setContentWidth(e.nativeEvent.layout.width);
+          }}
+          style={[styles.iconLeftView, flexStyle]}>
+          <RNText
+            numberOfLines={numberOfLines}
+            style={[
+              styleSheet[typography],
+              styles.title,
+              {maxWidth: contentWidth - badgeWidth},
+            ]}>
+            {title}
+          </RNText>
+          {badgeLabel && (
+            <View
+              onLayout={e => {
+                setBadgeWidth(e.nativeEvent.layout.width);
+              }}
+              style={{
+                alignItems: 'center',
+              }}>
+              <Badge style={styles.badge} label={badgeLabel} />
+            </View>
+          )}
+          {renderActionLeft()}
+        </View>
+        <Text
+          color={theme.colors.text.secondary}
+          typography={'description_default_regular'}>
+          {description}
+        </Text>
+      </View>
+    );
+  };
+
+  const renderActionLeft = () => {
+    return (
+      <View style={styles.iconLeftView}>
+        {showTrailingAction && !showRightAction && (
+          <View
+            style={[
+              styles.iconLeft,
+              {
+                backgroundColor: isSection
+                  ? Colors.black_06 + '99'
+                  : Colors.black_06 + '4D',
+              },
+            ]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(18)}
+              color={theme.colors.text.default}
+            />
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  const renderActionRight = () => {
+    if (!showRightAction || showTrailingAction) return false;
+
+    return (
+      <View>
+        {!buttonTitle ? (
+          <View
+            style={[
+              styles.iconRight,
+              {
+                backgroundColor: theme.colors.primary + '0F',
+              },
+            ]}>
+            <Icon
+              source={'arrow_chevron_right_small'}
+              size={scaleSize(22)}
+              color={theme.colors.primary}
+            />
+          </View>
+        ) : (
+          <TouchableOpacity onPress={onPressRightAction}>
+            <Text color={theme.colors.primary} typography={buttonTypo}>
+              {buttonTitle}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    );
+  };
+
+  if (textOnly) {
+    return (
+      <View style={isSection && styles.margin}>
+        <RNText
+          numberOfLines={numberOfLines}
+          style={[styleSheet[typography], styles.title]}>
+          {title}
+        </RNText>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.wrapper, isSection && styles.margin]}>
+      {renderIcon()}
+      {renderContent()}
+      {renderActionRight()}
+    </View>
+  );
+};
+
+export {Title};
+export type {TitleProps};

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@momo-kits/title",
+  "version": "0.92.1-rc.14",
+  "private": false,
+  "main": "index.tsx",
+  "dependencies": {},
+  "peerDependencies": {
+    "@momo-kits/foundation": "latest",
+    "prop-types": "^15.7.2",
+    "react": "16.9.0",
+    "react-native": ">=0.55"
+  },
+  "devDependencies": {
+    "@momo-platform/versions": "4.1.11"
+  },
+  "license": "MoMo"
+}

package/publish.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+rm -rf dist
+mkdir dist
+
+cp . ./dist
+
+# GET VERSION from mck_package.json
+VERSIONSTRING=( v$(jq .version package.json) )
+VERSION=(${VERSIONSTRING//[\"]/})
+echo VERSION: $VERSION
+
+rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
+
+# #babel component to dist
+#babel ./dist -d dist --copy-files
+
+#copy option
+#cp -r ./src/ dist
+
+
+#npm login
+#publish dist to npm
+cd dist
+npm publish --tag beta --access=public
+cd ..
+rm -rf dist
+
+
+##curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/stepper new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/stepper"}'

package/styles.ts

@@ -0,0 +1,76 @@
+import {StyleSheet} from 'react-native';
+import {scaleSize} from '../Text';
+import {Colors, Radius, Spacing} from '../Consts';
+
+export default StyleSheet.create({
+  card_small: {
+    fontSize: scaleSize(14),
+    lineHeight: scaleSize(20),
+  },
+  card_medium: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
+  card_large: {
+    fontSize: scaleSize(18),
+    lineHeight: scaleSize(26),
+  },
+  section_medium: {
+    fontSize: scaleSize(20),
+    lineHeight: scaleSize(28),
+  },
+  section_small: {
+    fontSize: scaleSize(16),
+    lineHeight: scaleSize(22),
+  },
+  section_large: {
+    fontSize: scaleSize(24),
+    lineHeight: scaleSize(34),
+  },
+  actionIcon: {
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginRight: Spacing.S,
+    borderRadius: Radius.XS,
+  },
+  wrapper: {
+    flexDirection: 'row',
+  },
+  margin: {
+    marginTop: Spacing.S,
+  },
+  iconView: {
+    marginRight: Spacing.S,
+  },
+  iconRight: {
+    width: scaleSize(22),
+    height: scaleSize(22),
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: Spacing.S,
+  },
+  iconLeft: {
+    width: scaleSize(18),
+    height: scaleSize(18),
+    borderRadius: Radius.M,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: Spacing.XS,
+  },
+  iconLeftView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  contentView: {marginRight: Spacing.S, flex: 1},
+  title: {
+    fontWeight: 'bold',
+    marginBottom: Spacing.XS,
+  },
+  badge: {
+    marginLeft: Spacing.XS,
+  },
+});

package/types.ts

@@ -0,0 +1,16 @@
+export type TitleProps = {
+  type?: 'card' | 'section';
+  size?: 'small' | 'medium' | 'large';
+  title: string;
+  icon?: string;
+  description?: string;
+  iconColor?: string;
+  iconAlign?: 'top' | 'middle' | 'bottom';
+  showRightAction?: boolean;
+  showTrailingAction?: boolean;
+  badgeLabel?: string;
+  buttonTitle?: string;
+  buttonSize?: 'small' | 'large';
+  onPressRightAction?: () => void;
+  textOnly?: boolean;
+};