feat(Select): add custom style

close #227

Author: ZxBing0066

src/components/Select/Select.jsx

@@ -105,12 +105,19 @@ class Select extends Component {
         /** @ignore */
         onVisibleChange: PropTypes.func,
         /** @ignore */
-        locale: PropTypes.object
+        locale: PropTypes.object,
+        /**
+         * 可修改自定义样式集中营
+         */
+        customStyle: PropTypes.shape({
+            optionListMaxHeight: PropTypes.number
+        })
     };
     static defaultProps = {
         onChange: () => {},
         size: 'md',
-        onVisibleChange: () => {}
+        onVisibleChange: () => {},
+        customStyle: {}
     };
     componentWillReceiveProps(nextProps) {
         const { children, options } = nextProps;
@@ -196,7 +203,7 @@ class Select extends Component {
         }
     };
     renderPopup = () => {
-        const { search, children, onChange, multiple, showSelectAll, value, options, extra } = this.props;
+        const { search, children, onChange, multiple, showSelectAll, value, options, extra, customStyle } = this.props;
         const { searchValue, itemTree } = this.state;
         const Options = this.renderOptions(options);
         const Extra = this.renderExtra(extra);
@@ -222,6 +229,7 @@ class Select extends Component {
                             onChange(value);
                         }
                     }}
+                    customStyle={customStyle}
                     itemTree={itemTree}
                     multiple={multiple}
                     showSelectAll={showSelectAll}
@@ -292,6 +300,7 @@ class Select extends Component {
             renderSelector,
             popover,
             popoverProps,
+            customStyle,
             ...rest
         } = this.props;
         /* eslint-enable no-unused-vars */

src/components/Select/Select.md

@@ -58,3 +58,8 @@
 
 ```js {"codepath": "popoverProps.jsx"}
 ```
+
+*   customStyle - 可自定义样式
+
+```js {"codepath": "customStyle.jsx"}
+```

src/components/Select/__demo__/customStyle.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Select from 'src/components/Select';
+
+// demo start
+const { Option } = Select;
+
+class Demo extends React.Component {
+    render() {
+        return (
+            <div>
+                <h3>optionListMaxHeight</h3>
+                <div className="demo-wrap">
+                    <Select
+                        multiple
+                        showSelectAll
+                        search
+                        onChange={console.log}
+                        customStyle={{ optionListMaxHeight: 100 }}
+                    >
+                        {new Array(100).fill(null).map((v, i) => (
+                            <Option key={i} value={`v_${i}`}>
+                                option{i}
+                            </Option>
+                        ))}
+                    </Select>
+                </div>
+            </div>
+        );
+    }
+}
+// demo end
+
+export default Demo;

src/components/Select/__demo__/extra.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import Select from 'src/components/Select';
 import Button from 'src/components/Button';
 

src/components/Select/__tests__/__snapshots__/demo.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Select demo -- disabled 1`] = `
+exports[`Select demo -- customStyle 1`] = `
 .c4 {
   vertical-align: baseline;
 }
@@ -35,14 +35,59 @@ exports[`Select demo -- disabled 1`] = `
   box-shadow: 0 0 1px 0 rgba(0,0,0,0.12),0 8px 12px -4px rgba(0,0,0,0.12),0 2px 1px -1px rgba(0,0,0,0.05);
 }
 
-.c2.c2 {
-  border-color: #d9d9d9;
-  background: #f7f7f7;
-  color: #cccccc;
-  cursor: not-allowed;
-  border-width: 1px;
-  border-style: solid;
-  box-shadow: none;
+.c1 {
+  padding-right: 28px;
+  width: 100%;
+  text-align: left;
+}
+
+.c3 {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  margin-top: -6px;
+}
+
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 12px;
+  color: #0a1633;
+}
+
+<div>
+  <h3>
+    optionListMaxHeight
+  </h3>
+  <div
+    class="demo-wrap"
+  >
+    <div
+      class="c0"
+    >
+      <div>
+        <button
+          class="c1 uc-fe-button uc-fe-button-size-md uc-fe-button-styletype-border c2"
+          type="button"
+        >
+          <div>
+            请选择
+          </div>
+          <i
+            class="uc-fe-icon icon__down c3 c4"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Select demo -- disabled 1`] = `
+.c4 {
+  vertical-align: baseline;
 }
 
 .c6 {
@@ -75,6 +120,46 @@ exports[`Select demo -- disabled 1`] = `
   box-shadow: 0 0 1px 0 rgba(0,0,0,0.12),0 8px 12px -4px rgba(0,0,0,0.12),0 2px 1px -1px rgba(0,0,0,0.05);
 }
 
+.c2 {
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: 2px;
+  border-width: 1px;
+  border-style: solid;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  font-size: 12px;
+  display: inline-block;
+  vertical-align: middle;
+  height: 28px;
+  padding: 0 8px;
+  color: #0a1633;
+  background: #ffffff;
+  border: none;
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.08),0 1px 1px -1px rgba(0,0,0,0.30),0 1px 3px -1px rgba(0,0,0,0.12),inset 0 1px 0 0 rgba(0,0,0,0.05);
+  -webkit-transition: all .22s cubic-bezier(.4,0,.2,1);
+  transition: all .22s cubic-bezier(.4,0,.2,1);
+}
+
+.c2:hover {
+  color: #3860f4;
+  background: #ffffff;
+  box-shadow: 0 0 1px 0 rgba(0,0,0,0.12),0 8px 12px -4px rgba(0,0,0,0.12),0 2px 1px -1px rgba(0,0,0,0.05);
+}
+
+.c2.c2 {
+  border-color: #d9d9d9;
+  background: #f7f7f7;
+  color: #cccccc;
+  cursor: not-allowed;
+  border-width: 1px;
+  border-style: solid;
+  box-shadow: none;
+}
+
 .c1 {
   padding-right: 28px;
   width: 100%;
@@ -88,24 +173,24 @@ exports[`Select demo -- disabled 1`] = `
   margin-top: -6px;
 }
 
-.c0 {
+.c5 {
   box-sizing: border-box;
   position: relative;
   display: inline-block;
   vertical-align: middle;
   font-size: 12px;
   color: #0a1633;
-  color: #cccccc;
-  pointer-events: none;
 }
 
-.c5 {
+.c0 {
   box-sizing: border-box;
   position: relative;
   display: inline-block;
   vertical-align: middle;
   font-size: 12px;
   color: #0a1633;
+  color: #cccccc;
+  pointer-events: none;
 }
 
 <div>

src/components/Select/style/index.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled, { css } from 'styled-components';
 
 import addDefaultThemeProps from 'src/components/ThemeProvider/addDefaultThemeProps';
@@ -50,12 +51,15 @@ export const MenuWrap = styled.div(
     `
 );
 
-export const BlockMenu = styled(Menu)(
-    () => css`
+// eslint-disable-next-line react/prop-types,no-unused-vars
+const CustomMenu = ({ customStyle, ...rest }) => <Menu {...rest} />;
+
+export const BlockMenu = styled(CustomMenu)(
+    ({ customStyle }) => css`
         display: block;
         border: none;
         box-shadow: none;
-        max-height: 380px;
+        max-height: ${customStyle.optionListMaxHeight || 380}px;
         max-width: unset;
     `
 );