Init

Author: bplok20010

.gitignore

@@ -1 +1,5 @@
 /node_modules
+/lib
+/cjs
+/esm
+/dist

.prettierignore

@@ -0,0 +1 @@
+*.md

.prettierrc

@@ -0,0 +1,18 @@
+{
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"endOfLine": "auto",
+	"htmlWhitespaceSensitivity": "css",
+	"insertPragma": false,
+	"jsxBracketSameLine": false,
+	"jsxSingleQuote": false,
+	"printWidth": 100,
+	"proseWrap": "preserve",
+	"quoteProps": "as-needed",
+	"requirePragma": false,
+	"semi": true,
+	"singleQuote": false,
+	"tabWidth": 4,
+	"trailingComma": "es5",
+	"useTabs": true
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 react-widget
+Copyright (c) 2020 react-widget-select
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,116 +1,35 @@
-# react-widget-select
+# select
+
+Select组件
 
 ## 安装
+
 `npm install --save react-widget-select`
 
-## API
 
-```html
-<Select>
-  <Option value="lucy">lucy</Option>
-</Select>
+## 使用
+
+
+
+```js
+
+```
+
+### Interfaces
+
+```ts
+
 ```
 
-```html
-<Select options={[{label:lucy, value: lucy}]}>
-</Select>
+### defaultProps 
+
 ```
+ 
+```
+
+
+### 基础样式
 
-### Select props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| prefixCls | 组件CSS样式前缀 | string | rw-select |
-| className | 组件className属性 | string | - |
-| style | 组件style属性 | React.CSSProperties | - |
-| tabIndex | 组件tabIndex属性 | number | - |
-| options | 组件数据 | Array\<Option> | false |
-| inline | 内联组件 | boolean | true |
-| emptyLabel | 下拉框无内容时显示 | ReactNode | no data. |
-| searchComponent | 自定义搜索输入框组件 | ReactNode | input |
-| valueField | 设置取值字段 | string | value |
-| labelField | 设置显示字段 | string | label |
-| childrenField | 设置子节点字段 | string | children |
-| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false |
-| allowClear | 支持清除 | boolean | false |
-| autoFocus | 默认获取焦点 | boolean | false |
-| defaultValue | 指定默认选中的条目 | string|number | - |
-| value | 指定默认选中的条目 `受控` | string|number | - |
-| disabled | 是否禁用 | boolean | false |
-| readOnly | 是否只读 | boolean | false |
-| placeholder | 选择框默认文字 | string | - |
-| showArrow | 是否显示下拉小箭头 | boolean | true |
-| showSearch | 显示下拉框的搜索输入框 | boolean | false |
-| optionFilterField | 搜索时过滤对应的 option 属性 | string | label |
-| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `searchText` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
-| dropdownClassName | 下拉菜单的 className 属性 | string | - |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
-| dropdownStyle | 下拉菜单的 style 属性 | object | - |
-| dropdownProps | 下拉菜单扩展属性，参考`ListBox` | object | - |
-| placement | 	dropdown出现位置<`PlacementType`> | string | bottomLeft |
-| offset | 	dropdown位置偏移量 | Array<number> | [0, 0] |
-| popupClassName | 	dropdown弹出层的className属性 | string | - |
-| popupRootComponent | 	dropdown弹出层自定义组件类型 | ReactNode | div |
-| getPopupContainer | popup渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域。 | Function(triggerNode) | () => document.body |
-| destroyPopupOnHide | 	dropdown隐藏时删除DOM节点 | boolean | true |
-| defaultOpen | 是否默认展开下拉菜单 | boolean | - |
-| open | 是否展开下拉菜单`受控` | boolean | - |
-| onResizeToHideDropDown | 浏览器大小改变时隐藏下拉框 | boolean | true |
-| onScrollToHideDropDown | 浏览器触发滚动时隐藏下拉框 | boolean | false |
-| renderValue | 自定义渲染被选中的选项 | (menu: ReactNode, option: Option) => ReactNode | - |
-| renderMenu | 自定义下拉框内容 | (menu: ReactNode, props) => ReactNode | - |
-| renderMenuItem | 自定义下拉选项内容 | (label:React.Node, option:Option) => ReactNode | - |
-| renderMenuGroupTitle | 自定义下拉分组标题内容 | (label:React.Node, option:Option) => ReactNode | - |
-| onBlur | 失去焦点的时回调 | function | - |
-| onFocus | 获得焦点时回调 | function | - |
-| onChange | 选中 option 时调用此函数 | function(value, option:Option) | - |
-| onSearch | 搜索输入框值变化时回调 | function(value: string) |  |
-| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option:Option) | - |
-| onDropDownVisibleChange | 展开/隐藏下拉菜单的回调 | function(open) | - |
-| onMouseEnter | 鼠标移入时回调 | function | - |
-| onMouseLeave | 鼠标移出时回调 | function | - |
-
-
-> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
-
-### Select Methods
-
-| 名称 | 说明 |
-| --- | --- |
-| blur() | 取消焦点 |
-| focus() | 获取焦点 |
-
-### Option props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| disabled | 是否禁用 | boolean | false |
-| label | 选中该 Option 后，Select 的 title | ReactNode | - |
-| value | 默认根据此属性值进行筛选 | string\|number | - |
-
-### OptGroup props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| children | 子节点 | Array\<Option> | - |
-| label | 组名 | string\|React.Element | 无 |
-
-### PlacementType
+```css
 
 ```
-type PlacementType = 
-  | bottomLeft
-  | bottomCenter
-  | bottomRight
-  | topLeft
-  | topCenter
-  | topRight
-  | leftTop
-  | leftCenter
-  | leftBottom
-  | rightTop
-  | rightCenter
-  | rightBottom
-  | centerCenter
-
-```

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = api => {
+	const isTest = api.env("test");
+	if (!isTest) return {};
+
+	return {
+		presets: [
+			[
+				"babel-preset-packez",
+				{
+					modules: "cjs",
+				},
+			],
+		],
+	};
+};

examples/Demo.js

@@ -1,40 +1,36 @@
-import React, { Component } from 'react';
-import DemoList from './DemoList';
+import React, { Component } from "react";
+import DemoList from "./DemoList";
 
 export default class Demo extends Component {
+	state = {
+		current: DemoList[0],
+	};
 
-    state = {
-        current: DemoList[0]
-    }
+	onDemoChange(item, e) {
+		this.setState({
+			current: item,
+		});
+	}
 
-    onDemoChange(item, e) {
-        this.setState({
-            current: item
-        });
-    }
-
-    render() {
-        const { current } = this.state;
-        return (
-            <div className="container">
-                <div className="slider">
-                    {
-                        DemoList.map((item, i) => {
-                            return (
-                                <div
-                                    className={current === item ? 'active' : ''}
-                                    onClick={this.onDemoChange.bind(this, item)}
-                                >
-                                    {item.label}
-                                </div>
-                            );
-                        })
-                    }
-                </div>
-                <div className="content">
-                    {current ? <current.component /> : null}
-                </div>
-            </div>
-        )
-    }
-}
+	render() {
+		const { current } = this.state;
+		return (
+			<div className="container">
+				<div className="slider">
+					{DemoList.map((item, i) => {
+						return (
+							<div
+								key={i}
+								className={current === item ? "active" : ""}
+								onClick={this.onDemoChange.bind(this, item)}
+							>
+								{item.label}
+							</div>
+						);
+					})}
+				</div>
+				<div className="content">{current ? <current.component /> : null}</div>
+			</div>
+		);
+	}
+}

examples/DemoList.js

@@ -1,23 +1,15 @@
-import Demo1 from './demos/demo1';
-import Demo2 from './demos/Demo2';
-import Demo3 from './demos/Demo3';
+import Demo1 from "./demos/demo1";
+// import Demo2 from './demos/Demo2';
+// import Demo3 from './demos/Demo3';
 // import Demo4 from './demos/Demo4';
 
 export default [
-    {
-        label: '基本功能',
-        component: Demo1
-    },
-    {
-        label: 'renderMenu',
-        component: Demo2
-    },
-    {
-        label: '远程搜索',
-        component: Demo3
-    },
-    // {
-    //     label: 'fixed',
-    //     component: Demo4
-    // }
-]
+	{
+		label: "基本功能",
+		component: Demo1,
+	},
+	// {
+	//     label: 'fixed',
+	//     component: Demo4
+	// }
+];