Add pointer event `box-none` and `box-only` atoms #1

merged

opened by

samuel.fm 2 months ago targeting main from samuel/pointer-events

In 2023 React Native started to support pointer event via styles, rather than as a prop on View, to match CSS. We already had atoms for auto and none, but we were missing box-only and box-none. This PR adds these missing atoms, so that we can migrate over to using styles for this - imo, it's a lot more natural than the prop.

options

unified split

Changed files

+9 -1

.gitignore

package.json

src

atoms

common.ts

.gitignore

···

       1
       1
        
       dist

     

       2
       2
       +
       node_modules

+2 -1

package.json

···

       37
       37
        
         },

     

       38
       38
        
         "dependencies": {

     

       39
       39
        
           "react-responsive": "^10.0.1"

     

       40
       40
       -
         }

     

       40
       40
       +
         },

     

       41
       41
       +
         "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

     

       41
       42
        
       }

src/atoms/common.ts

···

       998
       998
        
         pointer_events_auto: {

     

       999
       999
        
           pointerEvents: 'auto',

     

       1000
       1000
        
         },

     

       1001
       1001
       +
         pointer_events_box_only: {

     

       1002
       1002
       +
           pointerEvents: 'box-only',

     

       1003
       1003
       +
         },

     

       1004
       1004
       +
         pointer_events_box_none: {

     

       1005
       1005
       +
           pointerEvents: 'box-none',

     

       1006
       1006
       +
         },

     

       1001
       1007
        
         user_select_none: {

     

       1002
       1008
        
           userSelect: 'none',

     

       1003
       1009
        
         },