rename css classes to prevent collisions

Author: flurmbo

src/DurationPicker.css

@@ -1,4 +1,4 @@
-.picker {
+.rdp-picker {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -10,12 +10,12 @@
 }
 
 @media (max-width: 400px) {
-  .picker {
+  .rdp-picker {
     width: 250px;
   }
 }
 
-.maskedImageDiv {
+.rdp-masked-div {
   color: black;
   overflow: hidden;
   height: 105px;
@@ -36,21 +36,21 @@
   );
 }
 
-.columnContainer {
+.rdp-column-container {
   flex-grow: 1;
   display: inline-block;
   touch-action: none;
 }
 
-.column {
+.rdp-column {
   position: absolute;
   pointer-events: none;
   touch-action: none;
   z-index: 0;
   width: 100%;
 }
 
-.reticule {
+.rdp-reticule {
   border: 0;
   border-top: 2px solid rgba(109, 202, 236, 1);
   height: 2px;
@@ -63,7 +63,7 @@
   transform: translateX(-50%);
 }
 
-.textOverlay {
+.rdp-text-overlay {
   position: absolute;
   /* font-style: italic; */
   display: flex;
@@ -77,7 +77,7 @@
   transform: translateX(-50%);
 }
 
-.textOverlay div {
+.rdp-text-overlay div {
   font-size: 17px;
   position: relative;
   top: 1px;
@@ -87,7 +87,7 @@
   font-style: italic;
 }
 
-.cell {
+.rdp-cell {
   display: flex;
   align-items: center;
   justify-content: center;

src/DurationPicker.jsx

@@ -56,7 +56,7 @@ function DurationPicker(props) {
     onChange(duration);
   }, [duration, onChange]);
   return (
-    <div className="picker">
+    <div className="rdp-picker">
       <DurationPickerColumn
         onChange={onChangeHours}
         unit="hours"

src/DurationPickerColumn.jsx

@@ -273,14 +273,14 @@ function DurationPickerColumn(props) {
 
   const cells = offsetState.cellContents.map(value => {
     return (
-      <div className="cell" key={value}>
+      <div className="rdp-cell" key={value}>
         {toTwoDigitString(value)}
       </div>
     );
   });
   return (
     <div
-      className="columnContainer"
+      className="rdp-column-container"
       onTouchMove={moveHandler}
       onTouchStart={startHandler}
       onTouchEnd={endHandler}
@@ -292,15 +292,15 @@ function DurationPickerColumn(props) {
       aria-valuenow={currentSelectionRef.current}
       tabIndex={0}
     >
-      <div className="maskedImageDiv">
-        <hr className="reticule" style={{ top: cellHeight - 1 }} />
-        <hr className="reticule" style={{ top: cellHeight * 2 - 1 }} />
-        <div className="textOverlay" style={{ top: cellHeight }}>
+      <div className="rdp-masked-div">
+        <hr className="rdp-reticule" style={{ top: cellHeight - 1 }} />
+        <hr className="rdp-reticule" style={{ top: cellHeight * 2 - 1 }} />
+        <div className="rdp-text-overlay" style={{ top: cellHeight }}>
           {`${toTwoDigitString(currentSelectionRef.current)}`}
           <div>{isSmallScreen ? unit[0] : unit}</div>
         </div>
         <div
-          className="column"
+          className="rdp-column"
           style={{ top: offsetState.offset || 0 }}
           ref={slideyRef}
         >