chore(provider): 优化示例 (#3072)

.changeset/strong-dodos-provide.md

@@ -0,0 +1,6 @@
+---
+"@hi-ui/locale-context": patch
+"@hi-ui/hiui": patch
+---
+
+chore(locale-context): 对外暴露类型定义

packages/ui/locale-context/src/index.ts

@@ -2,3 +2,5 @@ export * from './LocaleContext'
 export * from './LocaleProvider'
 
 export { LocaleProvider as default } from './LocaleProvider'
+
+export * from './types'

packages/ui/provider/stories/basic.stories.tsx

@@ -1,17 +1,96 @@
 import React from 'react'
-import Provider from '../src'
+import Provider, { DesignSystemAccentColorEnum } from '../src'
+import { LocaleEnum } from '@hi-ui/locale-context'
+import Pagination from '@hi-ui/pagination'
+import Select from '@hi-ui/select'
+import { Row, Col } from '@hi-ui/grid'
 import Alert from '@hi-ui/alert'
 
 /**
  * @title 基础用法
  */
 export const Basic = () => {
+  const [locale, setLocale] = React.useState<LocaleEnum>()
+  const [accentColor, setAccentColor] = React.useState<DesignSystemAccentColorEnum>()
+
   return (
     <>
-      <h1>使用须知</h1>
+      <h1>基础用法</h1>
       <div className="provider-basic__wrap">
         <Alert title="在 APP 最外层包裹使用，用于主色、国际化、圆角、边框、特效等主题设置"></Alert>
-        <Provider locale="en-US" theme={{}} accentColor="brandblue"></Provider>
+        <Provider locale={locale} accentColor={accentColor} theme={{}}>
+          <Row gutter style={{ marginTop: 20, marginBottom: 20 }}>
+            <Col span={6}>
+              <Select
+                placeholder="语言"
+                data={[
+                  {
+                    id: 'zh-CN',
+                    title: '中文',
+                  },
+                  {
+                    id: 'zh-TW',
+                    title: '繁体',
+                  },
+                  {
+                    id: 'en-US',
+                    title: 'English',
+                  },
+                ]}
+                value={locale}
+                onChange={(val) => setLocale(val as LocaleEnum)}
+              />
+            </Col>
+            <Col span={6}>
+              <Select
+                placeholder="配色"
+                data={[
+                  {
+                    id: 'brandblue',
+                    title: '品牌蓝',
+                  },
+                  {
+                    id: 'ultramarine',
+                    title: '深蓝',
+                  },
+                  {
+                    id: 'pastelblue',
+                    title: '浅蓝',
+                  },
+                  {
+                    id: 'skyblue',
+                    title: '天空蓝',
+                  },
+                  {
+                    id: 'orange',
+                    title: '活力橙',
+                  },
+                  {
+                    id: 'amber',
+                    title: '琥珀',
+                  },
+                  {
+                    id: 'purple',
+                    title: '紫罗兰',
+                  },
+                  {
+                    id: 'cyan',
+                    title: '橘青',
+                  },
+                ]}
+                value={accentColor}
+                onChange={(val) => setAccentColor(val as DesignSystemAccentColorEnum)}
+              />
+            </Col>
+          </Row>
+          <Pagination
+            total={200}
+            pageSize={10}
+            showTotal
+            showJumper
+            pageSizeOptions={[10, 20, 50, 100]}
+          />
+        </Provider>
       </div>
     </>
   )

packages/ui/provider/stories/index.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 export * from './basic.stories'
+export * from './portal.stories'
 
 export default {
   title: 'Provider',

packages/ui/provider/stories/portal.stories.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import Provider from '../src'
+import Button from '@hi-ui/button'
+import Drawer from '@hi-ui/drawer'
+import Modal from '@hi-ui/modal'
+import Space from '@hi-ui/space'
+import { createMessage } from '@hi-ui/message'
+import { createNotification } from '@hi-ui/notification'
+
+// 声明为全局变量
+let message = createMessage()
+let notification = createNotification()
+
+/**
+ * @title 设置 portal
+ * @desc 通过 Provider 设置 portal，可以将 Drawer、Modal 等组件的弹出层渲染在特定的 DOM 节点下
+ */
+export const Portal = () => {
+  const [drawerVisible, setDrawerVisible] = React.useState(false)
+  const [modalVisible, setModalVisible] = React.useState(false)
+  const [container, setContainer] = React.useState<HTMLElement | null>(null)
+
+  React.useEffect(() => {
+    if (!container) return
+
+    // message 和 notification 可通过这种方式挂载到指定容器上
+    message = createMessage({ container })
+    notification = createNotification({ container })
+  }, [container])
+
+  return (
+    <>
+      <h1>设置 Portal</h1>
+      <div className="provider-portal__wrap">
+        <Provider portal={{ container }}>
+          <Space style={{ marginBottom: 12 }}>
+            <Button type="secondary" onClick={() => setDrawerVisible(!drawerVisible)}>
+              Drawer
+            </Button>
+            <Button type="secondary" onClick={() => setModalVisible(!modalVisible)}>
+              Modal
+            </Button>
+            <Button
+              type="secondary"
+              onClick={() => {
+                message.open({
+                  title: '欢迎使用 HiUI 组件库',
+                  type: 'success',
+                })
+              }}
+            >
+              Message
+            </Button>
+            <Button
+              type="secondary"
+              onClick={() => {
+                notification.open({
+                  size: 'sm',
+                  title: '数据备份通知',
+                  content:
+                    '各位同学请注意，将于2019.08.10 00:00:00 -08:00：00 期间进行系统服务器升级维护！',
+                })
+              }}
+            >
+              Notification
+            </Button>
+          </Space>
+          {/* 必须设置一个拥有定位的父元素，组件显示在该元素内 */}
+          <div
+            id="custom-container"
+            ref={setContainer}
+            className="drawer-container__wrap"
+            style={{
+              width: '100%',
+              minWidth: 660,
+              height: 420,
+              background: '#f5f7fa',
+              boxShadow: '1px 2px 8px #ddd',
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+
+              // Need add for it
+              position: 'relative',
+              overflow: 'hidden',
+              zIndex: 0,
+            }}
+          >
+            <Drawer
+              title="抽屉标题"
+              style={{ position: 'absolute' }}
+              visible={drawerVisible}
+              closeable={false}
+              onClose={() => setDrawerVisible(false)}
+            >
+              我是一段文字，也可以是表单、表格、步骤条等等
+            </Drawer>
+            <Modal
+              title="提示"
+              style={{ position: 'absolute' }}
+              visible={modalVisible}
+              closeable={false}
+              onCancel={() => setModalVisible(false)}
+            >
+              我是挂载指定容器的模态框内容
+            </Modal>
+          </div>
+        </Provider>
+      </div>
+    </>
+  )
+}