Merge pull request #1314 from sheinsight/dev

1.6.6

.babelrc

@@ -8,6 +8,7 @@
     },
     "publish": {
       "plugins": [
+        "@babel/plugin-transform-runtime",
         "@babel/plugin-proposal-class-properties",
         [
           "@babel/plugin-proposal-object-rest-spread",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shineout",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "Shein 前端组件库",
   "main": "./lib/index.js",
   "typings": "./lib/index.d.ts",
@@ -55,6 +55,7 @@
     "react-dom": ">=16.0.0"
   },
   "dependencies": {
+    "@babel/runtime": "^7.14.6",
     "classnames": "^2.2.5",
     "date-fns": "2.0.0-alpha.10",
     "deep-eql": "^4.0.0",
@@ -65,7 +66,7 @@
     "@babel/core": "^7.1.6",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.1.0",
+    "@babel/plugin-transform-runtime": "^7.14.5",
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
@@ -112,7 +113,7 @@
     "koa-multer": "^1.0.2",
     "koa-router": "^7.3.0",
     "koa-send": "^4.1.2",
-    "less": "^2.7.3",
+    "less": "^4.1.1",
     "less-loader": "^4.1.0",
     "lz-string": "^1.4.4",
     "mini-css-extract-plugin": "^0.5.0",

scripts/build-css.js

@@ -3,6 +3,8 @@ const less = require('less')
 const path = require('path')
 const postcss = require('postcss')
 const autoprefixer = require('autoprefixer')
+const glob = require('glob')
+const { execSync } = require('child_process')
 
 const root = path.resolve(__dirname, '../src')
 const publish = path.resolve(__dirname, '../publish')
@@ -45,8 +47,8 @@ function buildCss(stylePath) {
     })
 }
 
-function replaceLess() {
-  const dir = path.resolve(publish, 'css/styles/')
+function replaceLess(d) {
+  const dir = path.resolve(publish, 'css/', d)
   fs.readdirSync(dir)
     .filter(name => /\.js$/.test(name))
     .forEach(name => {
@@ -59,6 +61,29 @@ function replaceLess() {
     })
 }
 
-buildCss('styles')
-buildCss('styles/spin')
-replaceLess()
+function copyLess(lessPath) {
+  const target = path.resolve(publish, 'lib/', lessPath)
+  const originPath = path.resolve(root, lessPath)
+  if (!fs.existsSync(path.dirname(target))) {
+    fs.mkdirSync(path.dirname(target))
+  }
+  console.log(`cp -r ${originPath} ${target}`)
+  execSync(`cp -r  ${originPath} ${target}`)
+}
+
+// 创建css 到style
+glob('*/styles/', { cwd: path.join(process.cwd(), 'src') }, (error, files) => {
+  files.forEach(p => {
+    buildCss(p)
+    replaceLess(p)
+  })
+})
+buildCss('styles/')
+replaceLess('styles/')
+
+// 复制less 到lib
+glob('**/*.less', { cwd: path.join(process.cwd(), 'src') }, (error, files) => {
+  files.forEach(p => {
+    copyLess(p)
+  })
+})

scripts/build-ts.js

@@ -9,6 +9,9 @@ const libPath = path.resolve(__dirname, '../publish/lib')
 const sitePath = path.resolve(__dirname, '../site/pages/components')
 const temp = fs.readFileSync(path.resolve(__dirname, './component-declare.ejs'), 'utf-8')
 const sep = '-- |'
+const moduleMap = {
+  List: 'DataList',
+}
 const ignoreModule = [
   'Datum',
   'hoc',
@@ -96,7 +99,7 @@ const markdown = glob('**/en.md', {
 })
 
 markdown.forEach(p => {
-  const componentName = path.dirname(p)
+  const componentName = moduleMap[path.dirname(p)] || path.dirname(p)
   if (ignoreModule.includes(componentName)) return
   const componentDir = path.resolve(libPath, componentName)
   if (!fs.existsSync(componentDir)) fs.mkdirSync(componentDir)

site/chunks/Components/Drawer.js

@@ -0,0 +1,85 @@
+/**
+ * 此文件根据 scripts/components-page.ejs 生成，不要手动修改
+ */
+import React from 'react'
+import navable from 'docs/Navable'
+import MarkDown from 'docs/MarkDown'
+
+import locate from 'doc/locate'
+
+import cn from 'doc/pages/components/Drawer/cn.md'
+import en from 'doc/pages/components/Drawer/en.md'
+
+const source = locate(cn, en)
+
+const examples = [
+  {
+    name: '1-base',
+    title: locate(
+      '基本用法 \n 最基本的组件用法。 \n Drawer 会在 document.body 中创建一个新的层显示弹出内容。 \n 关闭 Drawer 时默认没有对组件进行销毁, 只是隐藏, 组件的状态会被保留。 如果不需要保留组件之前的状态, 可以设置 destroy 属性。',
+      'Base \n The basic usage for component.'
+    ),
+    component: require('doc/pages/components/Drawer/example-1-base.js').default,
+    rawText: require('!raw-loader!doc/pages/components/Drawer/example-1-base.js'),
+  },
+  {
+    name: '2-position',
+    title: locate(
+      '位置 \n 通过 position 可设置 Drawer 弹出的位置, 现支持 top、right、bottom 和 left 四个位置配置。',
+      'Position \n Set position property to specify the pop-up position.'
+    ),
+    component: require('doc/pages/components/Drawer/example-2-position.js').default,
+    rawText: require('!raw-loader!doc/pages/components/Drawer/example-2-position.js'),
+  },
+  {
+    name: '3-gcontainer',
+    title: locate(
+      '指定目标 \n 使用 container 来指定 Drawer 渲染的目标节点',
+      'Target \n set container to render target node'
+    ),
+    component: require('doc/pages/components/Drawer/example-3-gcontainer.js').default,
+    rawText: require('!raw-loader!doc/pages/components/Drawer/example-3-gcontainer.js'),
+  },
+  {
+    name: '4-form',
+    title: locate(
+      '表单 \n Drawer 支持 Form 表单，并且支持 Form 的所有特性，表单提交可以使用 Drawer.Submit 来代替 Button[type=submit]',
+      'Form \n The internal form of Drawer can use Drawer.Submit to trigger submit.'
+    ),
+    component: require('doc/pages/components/Drawer/example-4-form.js').default,
+    rawText: require('!raw-loader!doc/pages/components/Drawer/example-4-form.js'),
+  },
+  {
+    name: '6-close',
+    title: locate(
+      '点击空白关闭 \n 默认点击抽屉外部空白页面会关闭抽屉。 \n 设置 maskCloseAble 属性为 false，禁用点击空白关闭，同时右上角的关闭图标也会隐藏。 \n 设置 maskCloseAble 属性为 null，禁用点击空白关闭，右上角的关闭图标会保留。',
+      'Close \n By default, clicking on the blank page outside the Drawer box will closes the Drawer box. \n Set maskCloseAble to false to disable the function that click mask to close and the close icon in the upper right corner will be hidden at the same time. \n Set maskCloseAbel to null to disable the function that click mask to close and the close icon in the upper right corner will be preserved.'
+    ),
+    component: require('doc/pages/components/Drawer/example-6-close.js').default,
+    rawText: require('!raw-loader!doc/pages/components/Drawer/example-6-close.js'),
+  },
+  {
+    name: '7-full-screen',
+    title: locate(
+      '全屏 \n 使用 fullScreen 属性来使抽屉全屏展示',
+      'Full Screen \n Use the fullScreen property to display the Drawer in full screen'
+    ),
+    component: require('doc/pages/components/Drawer/example-7-full-screen.js').default,
+    rawText: require('!raw-loader!doc/pages/components/Drawer/example-7-full-screen.js'),
+  },
+  {
+    name: '8-type',
+    title: locate(
+      '附带图标 \n 使用 type 属性来指定标题附带的图标',
+      'Icon \n use type display type icon'
+    ),
+    component: require('doc/pages/components/Drawer/example-8-type.js').default,
+    rawText: require('!raw-loader!doc/pages/components/Drawer/example-8-type.js'),
+  },
+]
+
+const codes = undefined
+
+export default navable(props => (
+  <MarkDown {...props} codes={codes} source={source} examples={examples} />
+))

site/chunks/Components/Modal.js

@@ -16,7 +16,7 @@ const examples = [
   {
     name: '1-base',
     title: locate(
-      '基本用法 \n 最基本的组件用法。 \n Modal 会在 document.body 中创建一个新的层显示弹出内容。 \n 关闭 modal 时没有对组件进行销毁, 只是隐藏, 组件的状态会被保留。 如果不需要保留组件之前的状态, 可以通过改变 modal 的 key 去实现。',
+      '基本用法 \n 最基本的组件用法。 \n Modal 会在 document.body 中创建一个新的层显示弹出内容。',
       'Base \n The basic usage for component.'
     ),
     component: require('doc/pages/components/Modal/example-1-base.js').default,

site/chunks/Components/Table.js

@@ -328,6 +328,15 @@ const examples = [
     component: require('doc/pages/components/Table/example-32-selection.js').default,
     rawText: require('!raw-loader!doc/pages/components/Table/example-32-selection.js'),
   },
+  {
+    name: '33-row-drag',
+    title: locate(
+      '拖动行 \n 通过 rowEvents 属性来自定义拖拽事件',
+      'drag row \n customize drag events through the rowEvents property'
+    ),
+    component: require('doc/pages/components/Table/example-33-row-drag.js').default,
+    rawText: require('!raw-loader!doc/pages/components/Table/example-33-row-drag.js'),
+  },
 ]
 
 const codes = undefined

site/chunks/Components/index.js

@@ -183,6 +183,12 @@ const pages = [
     level: 2,
     component: lazy(() => import(/* webpackChunkName: "Alert" */ './Alert')),
   },
+  {
+    name: 'Drawer',
+    cn: '抽屉',
+    level: 2,
+    component: lazy(() => import(/* webpackChunkName: "Drawer" */ './Drawer')),
+  },
   {
     name: 'Message',
     cn: '消息提示',

site/pages/Page.js

@@ -56,7 +56,7 @@ export default function(pages) {
           <Icon name={shownav ? 'Menu' : 'close'} onClick={toggleCode} />
         </div>
 
-        <Sticky top={0}>
+        <Sticky top={0} className={mainClass('menu-sticky-wrap')}>
           <div id="-shineout-menu" className={mainClass('menu', shownav && 'hidden')}>
             {pages
               .filter(v => filters.indexOf(v.name) === -1)

site/pages/components/Button/cn.md

@@ -19,6 +19,7 @@
 | text | boolean | false | 文字按钮，不展示边框和背景 |
 | onClick | () => void | 无 | 按钮点击回调 |
 | space | boolean | false | 仅有2个汉字的按钮，是否在2个汉字中间插入空格 |
+| loading | boolean | false | 是否是加载中状态 |
 
 ### Button.Group
 

site/pages/components/Button/en.md

@@ -19,6 +19,7 @@
 | text | boolean | false | text button |
 | onClick | () => void | none | button click callback |
 | space | boolean | false | For Button with only 2 Chinese characters, whether to insert a space between the two Chinese characters. |
+| loading | boolean | false | is loading |
 
 ### Button.Group
 

site/pages/components/Cascader/cn.md

@@ -9,7 +9,7 @@
 | className | string | 无 | 扩展className |
 | clearable | boolean | true | 是否显示清除数据图标 |
 | data | any[] | [] | 数据，子节点为children，如果 children 值为 null 或 长度为 0 时，视为叶子节点 |
-| defaultValue | any[] | 无 | 默认选中的 key （非受控） | 
+| defaultValue | any[] | 无 | 默认选中的 key （非受控） |
 | disabled | (data: any) => boolean \| boolean | false | 显示选择框时有效，为 true 时，所有节点禁用选择，为函数时，根据函数返回结果确定是否禁用 |
 | expandTrigger | 'click' \| 'hover' \| 'hover-only' | 'click' | 节点展开触发方式 |
 | keygen | ((data: any, parentKey: any) => string) \| string  | 必填 | 生成key的辅助方法<br />为函数时，使用此函数返回值<br />为string时，使用这个string对应的数据值。如 'id'，相当于 (d) => d.id |
@@ -18,10 +18,10 @@
 | onChange | (value: any[], selected: boolean) => void | 无 | 设置 onChange 属性时，显示 选择框。参数为当前选中值，和 mode 属性相关 |
 | renderItem | (data: any) => ReactNode \| string | 必填 | 为 string 时，返回 d\[string]<br />为 function 时，返回函数结果 |
 | renderResult | (data: any, result: any[]) => ReactNode \| string | renderItem | 选中后在结果中显示的内容，默认和 renderItem 相同。返回 null 则不展示，result 为当前选中的所有值。 |
-| value | any[] | 无 | 选中的 key （受控） | 
+| value | any[] | 无 | 选中的 key （受控） |
 | absolute | boolean | false | 为 true 时，选项弹出层在 DOM 中独立 render |
 | compressed | boolean \| 'no-repeat' | false | 将选中值合并。为'no-repeat'时弹出框中不重复展示值 |
-| childrenKey | string | 'children' | 指定子数据的属性名 | 
+| childrenKey | string | 'children' | 指定子数据的属性名 |
 | finalDismiss | boolean | false | 选择末级节点后是否关闭选项列表 |
 | onCollapse | (collapse: boolean) => void | 无 | 下拉列表展开/收起回调 |
 | onFilter | (text: string) => (data: any) => boolean | 无 | onFilter 不为空时，可以输入过滤数据<br />onFilter 如果返回一个函数，使用这个函数做前端过滤<br />如果不返回，可以自行做后端过滤<br />单选状态下支持 |
@@ -31,4 +31,6 @@
 | singleRemove | boolean | 无 | 支持单个节点删除 |
 | unmatch | boolean | 无 | 是否展示data中不存在的值 |
 | underline | boolean | false | 是否只展示下边框 |
+| showArrow | boolean | true | 是否显示下拉箭头，仅针对单选情况 |
+| getComponentRef | (componentRef: any) => void  | 无 | 绑定组件的引用, 可以调用某些组件的方法 |
 

site/pages/components/Cascader/en.md

@@ -17,11 +17,11 @@
 | onChange | (value: any[], selected: boolean) => void | - | When the onChange property is set, the selection box is displayed. The parameter is the current selected value, which is related to the mode property. |
 | renderItem | (data: any) => ReactNode \| string | required | When it is a string, return d\[string].<br /> When it is a function, return the result of this function. |
 | renderResult | (data: any, result: any[]) => ReactNode \| string | renderItem | The content displayed in the result after selecting, if not set, use renderItem. not show while return null, result is current selected |
-| defaultValue | any[] | - | Default selected key (not controlled) | 
+| defaultValue | any[] | - | Default selected key (not controlled) |
 | value | any[] | - | Selected key (controlled) |
 | absolute | boolean | false | When it is true, the pop-up layer of option append into document.body. |
 | compressed | boolean \| 'no-repeat' | false | Merges selected values; the repeat value will not appear in the Popover when it is'no-repeat'. |
-| childrenKey | string | 'children' | the key of the children data name | 
+| childrenKey | string | 'children' | the key of the children data name |
 | finalDismiss | boolean | false | close options after chose the final node |
 | onCollapse | (collapse: boolean) => void | none | options collapse callback |
 | onFilter | (text: string) => (data: any) => boolean | - | When the onFilter is not empty, you can filter data by input.<br />If the onFilter returns a function, use this function as a front-end filter.<br />If return undefined, you can do your own backend filtering.<br /> support in single selection state |
@@ -31,3 +31,5 @@
 | singleRemove | boolean | none | Support single node deletion |
 | unmatch | boolean | none | render unmatch value |
 | underline | boolean | false | only display border bottom  |
+| getComponentRef | (componentRef: any) => void  | without | A reference to the binding component, you can call some component methods |
+| showArrow | boolean | true | show dropdown arrow, only single select |

site/pages/components/DatePicker/example-09-range-date.js

@@ -58,6 +58,7 @@ export default function() {
       <DatePicker
         range
         type="datetime"
+        defaultTime={['00:00:00', '23:59:59']}
         style={style}
         onChange={d => console.log(d)}
         placeholder={['Start datetime', 'End datetime']}

site/pages/components/Drawer/cn.md

@@ -0,0 +1,36 @@
+# Drawer *抽屉*
+屏幕边缘滑出的浮层面板。
+
+<example />
+
+## API
+
+### Drawer
+
+| 属性 | 类型 | 默认值 | 说明 | 可用版本 |
+| --- | --- | --- | --- | --- |
+| className | string | 无 | 扩展className | |
+| bodyStyle | object | - | 扩展 Drawer body 的样式 | |
+| footer | ReactNode | 无 | 底部内容 | |
+| maskCloseAble | boolean | true | 点击遮罩层是否关闭抽屉 | |
+| maskOpacity | number | 0.25 | 遮罩层透明度 | |
+| position | string | 'right' | 弹出位置，可选值为 \['top', 'right', 'bottom', 'left'] | |
+| style | object | 无 | 最外层扩展样式 | |
+| title | ReactNode | 无 | 弹出层的标题 | |
+| usePortal | boolean | true | 为 true 时，使用 ReactDOM.createPortal 创建弹出层，为 false 时，使用 ReactDOM.render<br />函数式调用时使用 ReactDOM.render | |
+| visible | boolean | false | 是否显示 | |
+| width | number \| string | 'auto' | 对话框宽度, 当 position 为 'right' 或 'left' 时生效 | |
+| height | number \| string | 'auto' | 对话框高度, 当 position 为 'top' 或 'bottom' 时生效  | |
+| zIndex | number | 1050 | 抽屉 z-index 值，注意：如 Drawer 嵌套 Select 组件，并且 Select 组件含有 absolute 字段，需要修改 Select 的 z-index的值 | |
+| rootClassName | string | - | Drawer 的根元素类名, 为遮罩层的父元素 | 1.4.2 |
+| container | () => HTMLElement \| HTMLElement | document.body | 渲染的目标节点 | |
+| maskBackground | string | 无 | 遮罩背景色，设置后透明度将失效 | |
+| onClose | () => void | 无 | 模态框关闭回调 | |
+| destroy | boolean | false | 关闭时是否销毁元素 | |
+| hideClose | boolean | 无 | 是否隐藏关闭按钮 | |
+| type | 'info' \| 'success' \| 'warning' \| 'error' \| 'normal' | 无 | Drawer title 显示状态icon | 1.6.1 |
+| zoom | boolean | false | 是否开启 zoom 动画效果 | |
+| esc | boolean | true | 是否支持 esc 键关闭 | |
+| events | object | 无 | 外层元素所接受的事件列表，可用于在 createPortal 场景中阻止冒泡 | |
+| fullScreen | boolean | false | 是否全屏展示 | |
+| forceMask | boolean | false | 是否强制设置遮罩透明度（多层Drawer中，除第一层外的其他Drawer遮罩透明度会被调整为0.01） | |

site/pages/components/Drawer/en.md

@@ -0,0 +1,36 @@
+# Drawer
+A panel which slides in from the edge of the screen.
+
+<example />
+
+## API
+
+### Drawer
+
+| Property | Type | Default | Description | version |
+| --- | --- | --- | --- | --- |
+| className | string | - | Extend className | |
+| bodyStyle | object | - | Extend Drawer body style | |
+| footer | ReactNode | - | The content at the bottom | |
+| maskCloseAble | boolean | true | Whether to close the mask when the mask is clicked | |
+| maskOpacity | number | 0.25 | The opacity of the mask | |
+| position | string | - | Pop-up position, one of \['top', 'right', 'bottom', 'left'] | |
+| style | object | - | Extend style | |
+| title | ReactNode | - | the title of the pop-up layer | |
+| usePortal | boolean | true | When the usePortal is true, use ReactDOM.createPortal to create the pop-up layer, otherwise use ReactDOM.render.<br /> Use ReactDOM.render while func call. | |
+| visible | boolean | false |  | |
+| width | number \| string | 'auto' | the width of the Drawer | |
+| height | number \| string | 'auto' | the height of the Drawer | |
+| zIndex | number | 1050 | Drawer z-index | |
+| rootClassName | string | - | the root element of Drawer, the mask parent element | 1.4.2 |
+| container | () => HTMLElement \| HTMLElement | document.body | target element | |
+| maskBackground | string | null | mask background | |
+| onClose | () => void | none | Drawer close callback | |
+| destroy | boolean | false | Whether to destroy elements when it is closed | |
+| hideClose | boolean | none | hide the close button | |
+| type | 'info' \| 'success' \| 'warning' \| 'error' \| 'normal' | null | Drawer Title show status icon | 1.6.1 |
+| zoom | boolean | false | toggle zoom animation | |
+| esc | boolean | true | esc to close | |
+| events | object | none | Drawer events list, use stopPropagation at createPortal | |
+| fullScreen | boolean | false | display Drawer with full screen | |
+| forceMask | boolean | false | Whether to force the mask transparency (in multi-layer Drawer, the transparency of other Drawer masks except the first layer will be adjusted to 0.01) | |