feat(hippy-vue,hippy-react): add text shadow

CHANGELOG.md

@@ -18,7 +18,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **ios:** improve stability for websocket module ([d5595ea](https://github.com/Tencent/Hippy/commit/d5595ea2f9a9b7a404bbcce27addce7937f93e34))
 * **ios:** reset tableview top padding to zero in ios15 ([#1000](https://github.com/Tencent/Hippy/issues/1000)) ([a5184cf](https://github.com/Tencent/Hippy/commit/a5184cfe5d4777ede135cdff52da23ab5b59f89a))
 * **vue-example:** fix loop animation height ([dc3d948](https://github.com/Tencent/Hippy/commit/dc3d948b836bcab5a9f7c35ee0be840f4a050b3c))
-* **vue-example:** fix loop animation height ([f7dad4d](https://github.com/Tencent/Hippy/commit/f7dad4d53039a74c3550f6c53bb8408e08a107d9))
 
 
 

docs/style/appearance.md

@@ -154,6 +154,78 @@
 | ------ | -------- | --- |
 | number | 否  | All
 
+# textShadowColor
+
+> 最低支持版本 2.10.0
+
+[Hippy-React 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/components/Text/index.jsx)
+
+[Hippy-Vue 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+
+文字阴影颜色
+
+| 类型   | 必需 | 平台 | 
+| ------ | -------- | --------|
+| [color](style/color.md)  | 否 | 双平台支持 |
+
+# textShadowOffset
+
+> 最低支持版本 2.10.0
+
+[Hippy-React 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/components/Text/index.jsx)
+
+[Hippy-Vue 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+
+文字阴影偏移量
+
+| 类型   | 必需 | 平台 | 
+| ------ | -------- | --------|
+| object: { x: number, y: number }  | 否 | 双平台支持 |
+
+# textShadowOffsetX
+
+> * 最低支持版本 2.10.0
+> * 注意 hippy-vue class 样式只支持合并写法 `text-shadow-offset: 1px 1px`，不支持拆分
+
+[Hippy-React 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/components/Text/index.jsx)
+
+[Hippy-Vue 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+
+文字阴影X轴偏移量
+
+| 类型   | 必需 | 平台 | 
+| ------ | -------- | --------|
+| number | 否 | 双平台支持 |
+
+# textShadowOffsetY
+
+> * 最低支持版本 2.10.0
+> * 注意 hippy-vue class 样式只支持合并写法 `text-shadow-offset: 1px 1px`，不支持拆分
+
+[Hippy-React 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/components/Text/index.jsx)
+
+[Hippy-Vue 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+
+文字阴影Y轴偏移量
+
+| 类型   | 必需 | 平台 | 
+| ------ | -------- | --------|
+| number  | 否 | 双平台支持 |
+
+# textShadowRadius
+
+> 最低支持版本 2.10.0
+
+[Hippy-React 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/components/Text/index.jsx)
+
+[Hippy-Vue 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-p.vue)
+
+文字阴影半径
+
+| 类型   | 必需 | 平台 | 
+| ------ | -------- | --------|
+| number | 否 | 双平台支持 |
+
 # visibility
 
 | 类型   | 必需 | 支持平台

examples/hippy-react-demo/src/components/Text/index.jsx

@@ -53,12 +53,17 @@ const styles = StyleSheet.create({
     fontFamily: 'TTTGB',
   },
 });
-
+let i = 0;
 export default class TextExpo extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       fontSize: 16,
+      textShadowColor: 'grey',
+      textShadowOffset: {
+        x: 1,
+        y: 1,
+      },
     };
     this.incrementFontSize = this.incrementFontSize.bind(this);
     this.decrementFontSize = this.decrementFontSize.bind(this);
@@ -87,14 +92,36 @@ export default class TextExpo extends React.Component {
   }
 
   render() {
-    const { fontSize } = this.state;
+    const { fontSize, textShadowColor, textShadowOffset } = this.state;
     const renderTitle = title => (
       <View style={styles.itemTitle}>
         <Text style>{title}</Text>
       </View>
     );
     return (
       <ScrollView style={{ padding: 10 }}>
+        {renderTitle('shadow')}
+        <View style={[styles.itemContent]} onClick={() => {
+          let textShadowColor = 'red';
+          let textShadowOffset = { x: 10, y: 1 };
+          if (i % 2 === 1) {
+            textShadowColor = 'grey';
+            textShadowOffset = { x: 1, y: 10 };
+          }
+          i += 1;
+          this.setState({
+            textShadowColor,
+            textShadowOffset,
+          });
+        }}>
+          <Text style={[styles.normalText,
+            { color: '#242424',
+              textShadowOffset,
+              textShadowOffsetY: 1,
+              textShadowRadius: 3,
+              textShadowColor,
+            }]}>Text shadow is grey with radius 3 and offset 1</Text>
+        </View>
         {renderTitle('color')}
         <View style={[styles.itemContent]}>
           <Text style={[styles.normalText, { color: '#242424' }]}>Text color is black</Text>

examples/hippy-react-demo/src/components/View/index.jsx

@@ -56,7 +56,24 @@ export default function ViewExpo() {
         justifyContent: 'center',
         marginTop: 20,
         backgroundImage: imageUrl,
-      }]} ><Text style={{ color: 'white' }}>背景图</Text></View>
+      }]}
+      accessible={true}
+      accessibilityLabel={'背景图'}
+      accessibilityRole={'image'}
+      accessibilityState={{
+        disabled: false,
+        selected: true,
+        checked: false,
+        expanded: false,
+        busy: true,
+      }}
+      accessibilityValue={{
+        min: 1,
+        max: 10,
+        now: 5,
+        text: 'middle',
+      }}
+    ><Text style={{ color: 'white' }}>背景图</Text></View>
       {renderTitle('backgroundImage linear-gradient')}
       <View style={[styles.rectangle, {
         alignItems: 'center',

examples/hippy-vue-demo/src/components/demos/demo-div.vue

@@ -2,7 +2,21 @@
   <div id="div-demo">
     <div>
       <label>背景图效果:</label>
-      <div :style="demo1Style">
+      <div
+        :style="demo1Style"
+        :accessible="true"
+        aria-label="背景图"
+        :aria-disabled="false"
+        :aria-selected="true"
+        :aria-checked="false"
+        :aria-expanded="false"
+        :aria-busy="true"
+        role="image"
+        :aria-valuemax="10"
+        :aria-valuemin="1"
+        :aria-valuenow="5"
+        aria-valuetext="middle"
+      >
         <p class="div-demo-1-text">
           Hippy 背景图展示
         </p>

examples/hippy-vue-demo/src/components/demos/demo-p.vue

@@ -33,6 +33,13 @@
     <p class="p-demo-6 p-demo-content">
       腾讯字体 Hippy
     </p>
+    <label>文字阴影：</label>
+    <p
+      class="p-demo-7 p-demo-content"
+      :style="textShadow"
+    >
+      这里是文字灰色阴影
+    </p>
   </div>
 </template>
 
@@ -43,6 +50,17 @@ export default {
       isClicked: false,
       isPressing: false,
       labelTouchStatus: '',
+      textShadow: {
+        // textShadowOffset: {
+        //   x: 1,
+        //   y: 1,
+        // },
+        // support declare textShadowOffsetX & textShadowOffsetY separately
+        // textShadowOffsetX: 1,
+        // textShadowOffsetY: 1,
+        // textShadowRadius: 3,
+        // textShadowColor: 'grey',
+      },
     };
   },
   methods: {
@@ -70,7 +88,7 @@ export default {
 };
 </script>
 
-<style scope>
+<style scoped>
 .p-demo .p-demo-content {
   margin: 20px;
 }
@@ -99,4 +117,10 @@ export default {
   font-family: TTTGB;
   font-size: 32px;
 }
+
+.p-demo .p-demo-7 {
+  text-shadow-offset: 1px 1px; /* not support declared separately */
+  text-shadow-radius: 3;
+  text-shadow-color: grey;
+}
 </style>

packages/hippy-react/src/dom/element-node.ts

@@ -175,6 +175,24 @@ function parseBackgroundImage(styleKey: string, styleValue: string, style: any)
   return style;
 }
 
+/**
+ * parse text shadow offset
+ * @param styleKey
+ * @param styleValue
+ * @param style
+ */
+function parseTextShadowOffset(styleKey: string, styleValue: number, style: any) {
+  const offsetMap: PropertiesMap = {
+    textShadowOffsetX: 'width',
+    textShadowOffsetY: 'height',
+  };
+  style.textShadowOffset = style.textShadowOffset || {};
+  Object.assign(style.textShadowOffset, {
+    [offsetMap[styleKey]]: styleValue || 0,
+  });
+  return style;
+}
+
 class ElementNode extends ViewNode {
   tagName: string;
 
@@ -310,6 +328,11 @@ class ElementNode extends ViewNode {
         (this.style as any)[styleKey] = colorParse((styleValue as Color));
       } else if (styleKey === 'backgroundImage' && styleValue) {
         this.style = parseBackgroundImage(styleKey, styleValue, this.style);
+      } else if (styleKey === 'textShadowOffset') {
+        const { x = 0, width = 0, y = 0, height = 0 } = styleValue || {};
+        (this.style as any)[styleKey] = { width: x || width, height: y || height };
+      } else if (['textShadowOffsetX', 'textShadowOffsetY'].indexOf(styleKey) >= 0) {
+        this.style = parseTextShadowOffset(styleKey as string, styleValue as number, this.style);
       } else {
         (this.style as any)[styleKey] = styleValue;
       }

packages/hippy-vue-css-loader/src/css-parser.js

@@ -481,6 +481,21 @@ function parseCSS(css, options) {
       case 'fontWeight':
         // Keep string and going on.
         break;
+      case 'textShadowOffset': {
+        const pos = value.split(' ')
+          .filter(v => v)
+          .map(v => convertPxUnitToPt(v));
+        const [width] = pos;
+        let [, height] = pos;
+        if (!height) {
+          height = width;
+        }
+        value = {
+          width,
+          height,
+        };
+        break;
+      }
       case 'shadowOffset': {
         const pos = value.split(' ')
           .filter(v => v)

packages/hippy-vue/src/elements/__tests__/index.test.js

@@ -86,10 +86,7 @@ test('registerElement with mustUseProp', (t) => {
       name: 'Test',
     },
     mustUseProp(attr) {
-      if (attr === 'testAttr') {
-        return true;
-      }
-      return false;
+      return attr === 'testAttr';
     },
   });
   const viewMeta = elements.getViewMeta(elementName);