[Web] Stop using className, fix warnings

It's deprecated on react-native-web necolas/react-native-web#1318 (comment) necolas/react-native-web#1146 (comment) necolas/react-native-web#1299
devhubapp · Jun 6, 2019 · 8a244de · 8a244de
1 parent e2b6114
commit 8a244de
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/packages/components/src/components/columns/Columns.tsx b/packages/components/src/components/columns/Columns.tsx
@@ -180,9 +180,9 @@ export const Columns = React.memo((props: ColumnsProps) => {
     <FlatList
       ref={flatListRef}
       key="columns-flat-list"
-      className="pagingEnabledFix"
       bounces={!swipeable}
       data={columnIds}
+      data-paging-enabled-fix
       disableVirtualization={Platform.OS === 'web'}
       getItemLayout={getItemLayout}
       horizontal

diff --git a/packages/components/src/components/common/Touchable.tsx b/packages/components/src/components/common/Touchable.tsx
@@ -85,8 +85,8 @@ export const Touchable = React.forwardRef(
     return (
       <TouchableComponent
         {...props}
-        className="touchable"
         ref={touchableRef}
+        data-touchable
         onLongPress={onLongPress}
         onPress={onPress}
         style={[

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
@@ -47,11 +47,11 @@ input:focus {
   outline: none !important;
 }
 
-.touchable:not(a) {
+[data-touchable]:not(a) {
   cursor: inherit;
 }
 
 /* https://github.com/necolas/react-native-web/issues/1299 */
-.pagingEnabledFix > div > div > div {
+[data-paging-enabled-fix]  > div > div > div {
   height: 100%;
 }