FIX (css): css classes for all components

sanusart · Feb 28, 2019 · b972faf · b972faf
1 parent ae454c4
commit b972faf
Show file tree

Hide file tree

Showing 15 changed files with 44 additions and 27 deletions.
diff --git a/__tests__/components/__snapshots__/Dropdown.spec.js.snap b/__tests__/components/__snapshots__/Dropdown.spec.js.snap
@@ -8,7 +8,7 @@ exports[`<Dropdown/> renders correctly 1`] = `
   tabIndex="-1"
 >
   <div
-    className="css-1lli8k7-NoDataComponent e1l5ho1t0"
+    className="react-dropdown-select-no-data css-1lli8k7-NoDataComponent e1l5ho1t0"
   />
 </div>
 `;
diff --git a/__tests__/components/__snapshots__/NoData.spec.js.snap b/__tests__/components/__snapshots__/NoData.spec.js.snap
@@ -2,6 +2,6 @@
 
 exports[`<NoData/> renders correctly 1`] = `
 <div
-  className="css-1lli8k7-NoDataComponent e1l5ho1t0"
+  className="react-dropdown-select-no-data css-1lli8k7-NoDataComponent e1l5ho1t0"
 />
 `;
diff --git a/src/components/Clear.js b/src/components/Clear.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { LIB_NAME } from '../constants';
 
 const Clear = ({ props, state, methods }) =>
   props.clearRenderer ? (
     props.clearRenderer({ props, state, methods })
   ) : (
     <ClearComponent
-      className="react-dropdown-select-clear"
+      className={`${LIB_NAME}-clear`}
       tabIndex="-1"
       onClick={() => methods.clearAll()}
       onKeyPress={() => methods.clearAll()}>

diff --git a/src/components/Content.js b/src/components/Content.js
@@ -3,12 +3,13 @@ import styled from '@emotion/styled';
 
 import Option from './Option';
 import Input from './Input';
+import { LIB_NAME } from '../constants';
 
 const Content = ({ props, state, methods }) => {
   return (
     <ContentComponent
-      className={`react-dropdown-select-content ${
-        props.multi ? 'react-dropdown-select-type-multi' : 'react-dropdown-select-type-single'
+      className={`${LIB_NAME}-content ${
+        props.multi ? `${LIB_NAME}-type-multi` : `${LIB_NAME}-type-single`
       }`}
       onClick={() => methods.dropDown('open')}>
       {props.contentRenderer ? (

diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
+import { LIB_NAME } from '../constants';
 import NoData from '../components/NoData';
 import Item from '../components/Item';
 
@@ -32,7 +33,7 @@ const Dropdown = ({ props, state, methods }) => (
     portal={props.portal}
     dropdownGap={props.dropdownGap}
     dropdownHeight={props.dropdownHeight}
-    className={`react-dropdown-select-dropdown react-dropdown-select-dropdown-position-${dropdownPosition(
+    className={`${LIB_NAME}-dropdown ${LIB_NAME}-dropdown-position-${dropdownPosition(
       props,
       methods
     )}`}>
@@ -42,15 +43,15 @@ const Dropdown = ({ props, state, methods }) => (
       <React.Fragment>
         {props.create && state.search && !valueExistInSelected(state.search, state.values, props) && (
           <AddNew
-            className="react-dropdown-select-dropdown-add-new"
+            className={`${LIB_NAME}-dropdown-add-new`}
             color={props.color}
             onClick={() => methods.createNew(state.search)}>
             {props.createNewLabel.replace('{search}', `"${state.search}"`)}
           </AddNew>
         )}
         {methods.searchResults().length === 0 ? (
           <NoData
-            className="react-dropdown-select-no-data"
+            className={`${LIB_NAME}-no-data`}
             state={state}
             props={props}
             methods={methods}

diff --git a/src/components/DropdownHandle.js b/src/components/DropdownHandle.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { LIB_NAME } from '../constants';
 
 const DropdownHandle = ({ props, state, methods }) =>
   props.dropdownHandleRenderer ? (
@@ -11,7 +12,7 @@ const DropdownHandle = ({ props, state, methods }) =>
       dropdownOpen={state.dropdown}
       onKeyPress={(event) => methods.dropDown('toggle', event)}
       onKeyDown={(event) => methods.dropDown('toggle', event)}
-      className="react-dropdown-select-dropdown-handle"
+      className={`${LIB_NAME}-dropdown-handle`}
       color={props.color}>
       <svg fill="currentColor" viewBox="0 0 40 40"><path d="M31 26.4q0 .3-.2.5l-1.1 1.2q-.3.2-.6.2t-.5-.2l-8.7-8.8-8.8 8.8q-.2.2-.5.2t-.5-.2l-1.2-1.2q-.2-.2-.2-.5t.2-.5l10.4-10.4q.3-.2.6-.2t.5.2l10.4 10.4q.2.2.2.5z"/></svg>
     </DropdownHandleComponent>

diff --git a/src/components/Input.js b/src/components/Input.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import styled from '@emotion/styled';
 import { valueExistInSelected } from '../util';
 import * as PropTypes from 'prop-types';
+import { LIB_NAME } from '../constants';
 
 const handlePlaceHolder = (props, state) => {
   const noValues = state.values && state.values.length === 0;
@@ -70,7 +71,7 @@ class Input extends Component {
       <InputComponent
         ref={this.input}
         tabIndex="-1"
-        className="react-dropdown-select-input"
+        className={`${LIB_NAME}-input`}
         size={methods.getInputSize()}
         value={state.search}
         readOnly={!props.searchable}

diff --git a/src/components/Item.js b/src/components/Item.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import styled from '@emotion/styled';
 import { hexToRGBA } from '../util';
 import * as PropTypes from 'prop-types';
+import { LIB_NAME } from '../constants';
 
 class Item extends Component {
   item = React.createRef();
@@ -33,10 +34,10 @@ class Item extends Component {
         aria-label={item[props.labelField]}
         key={`${item[props.valueField]}${item[props.labelField]}`}
         tabIndex="-1"
-        className={`react-dropdown-select-item ${
-          methods.isSelected(item) ? 'react-dropdown-select-item-selected' : ''
-          } ${state.cursor === itemIndex ? 'react-dropdown-select-item-active' : ''} ${
-          item.disabled ? 'react-dropdown-select-item-disabled' : ''
+        className={`${LIB_NAME}-item ${
+          methods.isSelected(item) ? `${LIB_NAME}-item-selected` : ''
+          } ${state.cursor === itemIndex ? `${LIB_NAME}-item-active` : ''} ${
+          item.disabled ? `${LIB_NAME}-item-disabled` : ''
           }`}
         onClick={item.disabled ? undefined : () => methods.addItem(item)}
         onKeyPress={item.disabled ? undefined : () => methods.addItem(item)}
@@ -60,7 +61,7 @@ const ItemComponent = styled.span`
   cursor: pointer;
   border-bottom: 1px solid #fff;
 
-  &.react-dropdown-select-item-active {
+  &.${LIB_NAME}-item-active {
     border-bottom: 1px solid #fff;
     ${({ disabled, color }) => !disabled && color && `background: ${hexToRGBA(color, 0.1)};`}
   }
@@ -71,7 +72,7 @@ const ItemComponent = styled.span`
     outline: none;
   }
 
-  &.react-dropdown-select-item-selected {
+  &.${LIB_NAME}-item-selected {
     ${({ disabled, color }) =>
       disabled
         ? `

diff --git a/src/components/Loading.js b/src/components/Loading.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { LIB_NAME } from '../constants';
 
 const Loading = ({ props }) =>
   props.loadingRenderer ? (
     props.loadingRenderer({ props })
   ) : (
-    <LoadingComponent className="react-dropdown-select-loading" color={props.color} />
+    <LoadingComponent className={`${LIB_NAME}-loading`} color={props.color} />
   );
 
 const LoadingComponent = styled.div`

diff --git a/src/components/NoData.js b/src/components/NoData.js
@@ -1,11 +1,14 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { LIB_NAME } from '../constants';
 
 const NoData = ({ props, state, methods }) =>
   props.noDataRenderer ? (
     props.noDataRenderer({ props, state, methods })
   ) : (
-    <NoDataComponent color={props.color}>{props.noDataLabel}</NoDataComponent>
+    <NoDataComponent className={`${LIB_NAME}-no-data`} color={props.color}>
+      {props.noDataLabel}
+    </NoDataComponent>
   );
 
 const NoDataComponent = styled.div`

diff --git a/src/components/Option.js b/src/components/Option.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { LIB_NAME } from '../constants';
 
 const Option = ({ item, props, state, methods }) =>
   item && props.optionRenderer ? (
@@ -8,11 +9,11 @@ const Option = ({ item, props, state, methods }) =>
     <OptionComponent
       role="listitem"
       disabled={props.disabled}
-      className="react-dropdown-select-option"
+      className={`${LIB_NAME}-option`}
       color={props.color}>
-      <span className="react-dropdown-select-option-label">{item[props.labelField]}</span>
+      <span className={`${LIB_NAME}-option-label`}>{item[props.labelField]}</span>
       <span
-        className="react-dropdown-select-option-remove"
+        className={`${LIB_NAME}-option-remove`}
         onClick={(event) => methods.removeItem(event, item, props.closeOnSelect)}>
         &times;
       </span>
@@ -28,7 +29,7 @@ const OptionComponent = styled.span`
   color: #fff;
   display: inline-block;
 
-  .react-dropdown-select-option-remove {
+  .${LIB_NAME}-option-remove {
     cursor: pointer;
     width: 22px;
     height: 22px;

diff --git a/src/components/Separator.js b/src/components/Separator.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { LIB_NAME } from '../constants';
 
 const Separator = ({ props, state, methods }) =>
   props.separatorRenderer ? (
     props.separatorRenderer({ props, state, methods })
   ) : (
-    <SeparatorComponent className="react-dropdown-select-separator" />
+    <SeparatorComponent className={`${LIB_NAME}-separator`} />
   );
 
 const SeparatorComponent = styled.div`

diff --git a/src/constants.js b/src/constants.js
@@ -0,0 +1 @@
+export const LIB_NAME = 'react-dropdown-select';
diff --git a/src/index.js b/src/index.js
@@ -12,6 +12,7 @@ import Separator from './components/Separator';
 import DropdownHandle from './components/DropdownHandle';
 
 import { debounce, hexToRGBA } from './util';
+import { LIB_NAME } from './constants';
 
 export class Select extends Component {
   static propTypes = {
@@ -413,7 +414,7 @@ export class Select extends Component {
           style={this.props.style}
           ref={this.select}
           disabled={this.props.disabled}
-          className={`react-dropdown-select ${this.props.className}`}
+          className={`${LIB_NAME} ${this.props.className}`}
           color={this.props.color}>
           <Content props={this.props} state={this.state} methods={this.methods} />
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -7,9 +7,12 @@ module.exports = {
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'react-dropdown-select.js',
-    library: 'Select',
-    libraryTarget: 'umd',
-    umdNamedDefine: true
+    library: {
+      commonjs: 'Select',
+      amd: 'Select',
+      root: 'Select'
+    },
+    libraryTarget: 'commonjs2',
   },
   optimization: {
     minimizer: [