From 2c3be7401971f4a38473d9bd9498dfa7f5517237 Mon Sep 17 00:00:00 2001 From: luolin-ck Date: Tue, 3 Sep 2024 16:51:01 +0800 Subject: [PATCH] refactor(Shell): rename to ts --- components/shell/__docs__/adaptor/index.jsx | 205 --------- components/shell/__docs__/adaptor/index.tsx | 219 +++++++++ components/shell/__docs__/theme/index.jsx | 368 --------------- components/shell/__docs__/theme/index.tsx | 420 ++++++++++++++++++ .../__tests__/{a11y-spec.js => a11y-spec.tsx} | 8 +- .../{index-spec.js => index-spec.tsx} | 31 +- components/shell/{base.jsx => base.tsx} | 3 +- components/shell/{index.jsx => index.tsx} | 0 .../shell/mobile/{index.jsx => index.tsx} | 0 components/shell/{shell.jsx => shell.tsx} | 14 +- components/shell/{style.js => style.ts} | 0 components/shell/{index.d.ts => types.ts} | 0 components/shell/{util.js => util.ts} | 0 13 files changed, 684 insertions(+), 584 deletions(-) delete mode 100644 components/shell/__docs__/adaptor/index.jsx create mode 100644 components/shell/__docs__/adaptor/index.tsx delete mode 100644 components/shell/__docs__/theme/index.jsx create mode 100644 components/shell/__docs__/theme/index.tsx rename components/shell/__tests__/{a11y-spec.js => a11y-spec.tsx} (87%) rename components/shell/__tests__/{index-spec.js => index-spec.tsx} (94%) rename components/shell/{base.jsx => base.tsx} (95%) rename components/shell/{index.jsx => index.tsx} (100%) rename components/shell/mobile/{index.jsx => index.tsx} (100%) rename components/shell/{shell.jsx => shell.tsx} (98%) rename components/shell/{style.js => style.ts} (100%) rename components/shell/{index.d.ts => types.ts} (100%) rename components/shell/{util.js => util.ts} (100%) diff --git a/components/shell/__docs__/adaptor/index.jsx b/components/shell/__docs__/adaptor/index.jsx deleted file mode 100644 index f619a0e260..0000000000 --- a/components/shell/__docs__/adaptor/index.jsx +++ /dev/null @@ -1,205 +0,0 @@ -import React from 'react'; -import { Types } from '@alifd/adaptor-helper'; -import { Shell, Icon } from '@alifd/next'; - -export default { - name: 'Shell', - shape: ['normal'], - editor: (shape) => { - return { - props: [{ - name: 'level', - type: Types.enum, - default: 'light', - options: { - normal: ['light', 'dark', 'brand'], - }[shape], - },{ - name: 'device', - label: 'Device', - type: Types.enum, - options: ['desktop', 'tablet', 'phone'], - default: 'desktop', - },{ - name: 'branding', - label: 'Branding', - type: Types.bool, - default: true, - },{ - name: 'actions', - label: 'Actions', - type: Types.bool, - default: true, - },{ - name: 'navigation', - label: 'Navigation', - type: Types.enum, - options: ['ver', 'hoz', false], - default: 'ver', - },{ - name: 'localNav', - label: 'LocalNav', - type: Types.bool, - default: true, - },{ - name: 'appbar', - label: 'Appbar', - type: Types.bool, - default: true, - },{ - name: 'footer', - label: 'Footer', - type: Types.bool, - default: true, - },{ - name: 'tooldock', - label: 'Tooldock', - type: Types.bool, - default: true, - },{ - name: 'ancillary', - label: 'Ancillary', - type: Types.bool, - default: true, - }] - }; - }, - adaptor: ({ level, device, branding, actions, localNav, appbar, footer, tooldock, ancillary, navigation, ...others }) => { - let logoStyle = {}, - shellStyle = {}; - - switch(level) { - case 'light': - logoStyle = {width: 32, height: 32, background: '#000', opacity: '0.04'}; - break; - case 'dark': - logoStyle = {width: 32, height: 32, background: '#FFF', opacity: '0.2'}; - break; - case 'brand': - logoStyle = {width: 32, height: 32, background: '#000', opacity: '0.04'}; - break; - default: - break; - } - - switch(device) { - case 'phone': - shellStyle = {height: 500, width: 480, border: '1px solid #eee'}; - break; - case 'tablet': - shellStyle = {height: 500, width: 768, border: '1px solid #eee'}; - break; - case 'desktop': - shellStyle = {height: 500, width: 1000, border: '1px solid #eee'}; - break; - default: - break; - } - - return ( - - { - branding - ? -
- App Name - - : null - } - - { - !navigation - ? - - - : null - } - { - actions - ? - - - 用户头像 - Name - - : null - } - { - localNav - ? - - - : null - } - { - appbar - ? - - - : null - } - -
- - - { - ancillary - ? - - : null - } - { - tooldock - ? - - - - - - - - - - - : null - } - { - footer - ? - Alibaba Fusion - @ 2019 Alibaba Piecework 版权所有 - - : null - } - - ); - } -}; diff --git a/components/shell/__docs__/adaptor/index.tsx b/components/shell/__docs__/adaptor/index.tsx new file mode 100644 index 0000000000..010a43c161 --- /dev/null +++ b/components/shell/__docs__/adaptor/index.tsx @@ -0,0 +1,219 @@ +import React from 'react'; +import { Types } from '@alifd/adaptor-helper'; +import { Shell, Icon } from '@alifd/next'; + +export default { + name: 'Shell', + shape: ['normal'], + editor: shape => { + return { + props: [ + { + name: 'level', + type: Types.enum, + default: 'light', + options: { + normal: ['light', 'dark', 'brand'], + }[shape], + }, + { + name: 'device', + label: 'Device', + type: Types.enum, + options: ['desktop', 'tablet', 'phone'], + default: 'desktop', + }, + { + name: 'branding', + label: 'Branding', + type: Types.bool, + default: true, + }, + { + name: 'actions', + label: 'Actions', + type: Types.bool, + default: true, + }, + { + name: 'navigation', + label: 'Navigation', + type: Types.enum, + options: ['ver', 'hoz', false], + default: 'ver', + }, + { + name: 'localNav', + label: 'LocalNav', + type: Types.bool, + default: true, + }, + { + name: 'appbar', + label: 'Appbar', + type: Types.bool, + default: true, + }, + { + name: 'footer', + label: 'Footer', + type: Types.bool, + default: true, + }, + { + name: 'tooldock', + label: 'Tooldock', + type: Types.bool, + default: true, + }, + { + name: 'ancillary', + label: 'Ancillary', + type: Types.bool, + default: true, + }, + ], + }; + }, + adaptor: ({ + level, + device, + branding, + actions, + localNav, + appbar, + footer, + tooldock, + ancillary, + navigation, + ...others + }) => { + let logoStyle = {}, + shellStyle = {}; + + switch (level) { + case 'light': + logoStyle = { width: 32, height: 32, background: '#000', opacity: '0.04' }; + break; + case 'dark': + logoStyle = { width: 32, height: 32, background: '#FFF', opacity: '0.2' }; + break; + case 'brand': + logoStyle = { width: 32, height: 32, background: '#000', opacity: '0.04' }; + break; + default: + break; + } + + switch (device) { + case 'phone': + shellStyle = { height: 500, width: 480, border: '1px solid #eee' }; + break; + case 'tablet': + shellStyle = { height: 500, width: 768, border: '1px solid #eee' }; + break; + case 'desktop': + shellStyle = { height: 500, width: 1000, border: '1px solid #eee' }; + break; + default: + break; + } + + return ( + + {branding ? ( + +
+ App Name + + ) : null} + + {!navigation ? ( + + + + ) : null} + {actions ? ( + + + + 用户头像 + Name + + ) : null} + {localNav ? ( + + + + ) : null} + {appbar ? : null} + +
+ + + {ancillary ? : null} + {tooldock ? ( + + + + + + + + + + + + ) : null} + {footer ? ( + + Alibaba Fusion + @ 2019 Alibaba Piecework 版权所有 + + ) : null} + + ); + }, +}; diff --git a/components/shell/__docs__/theme/index.jsx b/components/shell/__docs__/theme/index.jsx deleted file mode 100644 index 338a58fdf7..0000000000 --- a/components/shell/__docs__/theme/index.jsx +++ /dev/null @@ -1,368 +0,0 @@ -import { Demo, DemoGroup, DemoHead, initDemo } from '../../../demo-helper'; -import Shell from '../../index'; -import Nav from '../../../nav'; -import Search from '../../../search'; -import Icon from '../../../icon'; -import ConfigProvider from '../../../config-provider'; -import zhCN from '../../../locale/zh-cn'; -import enUS from '../../../locale/en-us'; -import '../../../demo-helper/style'; -import '../../style'; -import '../../../search/style'; -import '../../../nav/style'; - -/* eslint-disable */ -const i18nMap = { - 'zh-cn': { - shell: '布局框架', - light: 'Shell模版1 - light', - dark: 'Shell模版2 - dark', - brand: 'Shell模版3 - brand', - }, - 'en-us': { - shell: 'Shell', - light: 'Template 1 - light', - dark: 'Template 2 - dark', - brand: 'Template 3 - brand', - } -}; -class RenderShell extends React.Component { - render() { - const { type, i18n, demoFunction } = this.props; - const device = demoFunction.device.value; - const globalDir = demoFunction.navigation.value; - let globalNavType = demoFunction.navigationType.value, - // localNavType = demoFunction.localNavType.value, - // globalHozNavType = 'normal', - localNavType = 'normal', - logoStyle = {}, - shellStyle = {}; - - switch(type) { - case 'light': - logoStyle = {width: 32, height: 32, background: '#000', opacity: '0.04'}; - // globalHozNavType = 'normal'; - break; - case 'dark': - logoStyle = {width: 32, height: 32, background: '#FFF', opacity: '0.2'}; - // globalHozNavType = globalDir === 'hoz' ? 'primary' : 'normal'; - break; - case 'brand': - logoStyle = {width: 32, height: 32, background: '#000', opacity: '0.04'}; - // globalHozNavType = globalDir === 'hoz' ? 'secondary' : 'normal'; - break; - default: - break; - } - - switch(device) { - case 'phone': - shellStyle = {height: 500, width: 480, border: '1px solid #eee'}; - break; - case 'tablet': - shellStyle = {height: 500, width: 768, border: '1px solid #eee'}; - break; - case 'desktop': - shellStyle = {height: 500, width: 1000, border: '1px solid #eee'}; - break; - default: - break; - } - return ( - - - { - demoFunction.branding.value === 'true' - ? -
- App Name - - : null - } - - { - demoFunction.navigation.value !== 'false' - ? - - - : null - } - { - demoFunction.actions.value === 'true' - ? - - - 用户头像 - Name - - : null - } - { - demoFunction.localNav.value === 'true' - ? - - - : null - } - { - demoFunction.appbar.value === 'true' - ? - - - : null - } - -
- - - { - demoFunction.ancillary.value === 'true' - ? - - : null - } - { - demoFunction.tooldock.value === 'true' - ? - - - - - - - - - - - : null - } - { - demoFunction.footer.value === 'true' - ? - Alibaba Fusion - @ 2019 Alibaba Piecework 版权所有 - - : null - } - - - ); - } -} - -const renderShell = (type, i18n, demoFunction) => { - return ; -} - -class FunctionDemo extends React.Component { - constructor(props) { - super(props); - const navigationType = props.type === 'dark' ? 'primary' : 'normal'; - - this.state = { - demoFunction: { - 'device': { - label: 'Device', - value: 'desktop', - enum: [{ - label: 'desktop', - value: 'desktop' - }, { - label: 'tablet', - value: 'tablet' - }, { - label: 'phone', - value: 'phone' - }] - }, - 'branding': { - label: 'Branding', - value: 'true', - enum: [{ - label: '有', - value: 'true' - }, { - label: '无', - value: 'false' - }] - }, - 'actions': { - label: 'Actions', - value: 'true', - enum: [{ - label: '有', - value: 'true' - }, { - label: '无', - value: 'false' - }] - }, - 'navigation': { - label: 'Applicaitoin Nav', - value: 'ver', - enum: [{ - label: '侧栏', - value: 'ver' - }, { - label: '顶部', - value: 'hoz' - }, { - label: '无', - value: 'false' - }] - }, - 'navigationType': { - label: 'App Nav Type', - value: navigationType, - enum: [{ - label: 'normal', - value: 'normal' - }, { - label: 'primary', - value: 'primary' - }, { - label: 'secondary', - value: 'secondary' - }, { - label: 'line', - value: 'line' - }] - }, - 'localNav': { - label: 'Local Nav', - value: 'false', - enum: [{ - label: '有', - value: 'true' - }, { - label: '无', - value: 'false' - }] - }, - // 'localNavType': { - // label: 'Local Nav Type', - // value: 'normal', - // enum: [{ - // label: 'normal', - // value: 'normal' - // }, { - // label: 'primary', - // value: 'primary' - // }, { - // label: 'secondary', - // value: 'secondary' - // }, { - // label: 'line', - // value: 'line' - // }] - // }, - 'appbar': { - label: 'Appbar', - value: 'false', - enum: [{ - label: '有', - value: 'true' - }, { - label: '无', - value: 'false' - }] - }, - 'footer': { - label: 'Footer', - value: 'false', - enum: [{ - label: '有', - value: 'true' - }, { - label: '无', - value: 'false' - }] - }, - 'ancillary': { - label: 'Ancillary', - value: 'false', - enum: [{ - label: '有', - value: 'true' - }, { - label: '无', - value: 'false' - }] - }, - 'tooldock': { - label: 'Tooldock', - value: 'false', - enum: [{ - label: '有', - value: 'true' - }, { - label: '无', - value: 'false' - }] - }, - } - } - } - - onFunctionChange = (ret) => { - this.setState({ - demoFunction: ret, - }); - } - - render() { - const { title, locale, type, shellRender } = this.props; - const { demoFunction } = this.state; - - return ( - { shellRender(type, locale, demoFunction) } - ) - } -} - - -function render(i18n, lang) { - return ReactDOM.render(
- { - ['light', 'dark', 'brand'].map(type => { - return - }) - } -
, document.getElementById('container')); -} - -window.renderDemo = function (lang = 'en-us') { - render(i18nMap[lang], lang); -}; - -renderDemo(); - -initDemo('shell'); diff --git a/components/shell/__docs__/theme/index.tsx b/components/shell/__docs__/theme/index.tsx new file mode 100644 index 0000000000..a3c4d0025b --- /dev/null +++ b/components/shell/__docs__/theme/index.tsx @@ -0,0 +1,420 @@ +import { Demo, DemoGroup, DemoHead, initDemo } from '../../../demo-helper'; +import Shell from '../../index'; +import Nav from '../../../nav'; +import Search from '../../../search'; +import Icon from '../../../icon'; +import ConfigProvider from '../../../config-provider'; +import zhCN from '../../../locale/zh-cn'; +import enUS from '../../../locale/en-us'; +import '../../../demo-helper/style'; +import '../../style'; +import '../../../search/style'; +import '../../../nav/style'; + +/* eslint-disable */ +const i18nMap = { + 'zh-cn': { + shell: '布局框架', + light: 'Shell模版1 - light', + dark: 'Shell模版2 - dark', + brand: 'Shell模版3 - brand', + }, + 'en-us': { + shell: 'Shell', + light: 'Template 1 - light', + dark: 'Template 2 - dark', + brand: 'Template 3 - brand', + }, +}; +class RenderShell extends React.Component { + render() { + const { type, i18n, demoFunction } = this.props; + const device = demoFunction.device.value; + const globalDir = demoFunction.navigation.value; + let globalNavType = demoFunction.navigationType.value, + // localNavType = demoFunction.localNavType.value, + // globalHozNavType = 'normal', + localNavType = 'normal', + logoStyle = {}, + shellStyle = {}; + + switch (type) { + case 'light': + logoStyle = { width: 32, height: 32, background: '#000', opacity: '0.04' }; + // globalHozNavType = 'normal'; + break; + case 'dark': + logoStyle = { width: 32, height: 32, background: '#FFF', opacity: '0.2' }; + // globalHozNavType = globalDir === 'hoz' ? 'primary' : 'normal'; + break; + case 'brand': + logoStyle = { width: 32, height: 32, background: '#000', opacity: '0.04' }; + // globalHozNavType = globalDir === 'hoz' ? 'secondary' : 'normal'; + break; + default: + break; + } + + switch (device) { + case 'phone': + shellStyle = { height: 500, width: 480, border: '1px solid #eee' }; + break; + case 'tablet': + shellStyle = { height: 500, width: 768, border: '1px solid #eee' }; + break; + case 'desktop': + shellStyle = { height: 500, width: 1000, border: '1px solid #eee' }; + break; + default: + break; + } + return ( + + + + {demoFunction.branding.value === 'true' ? ( + +
+ App Name + + ) : null} + + {demoFunction.navigation.value !== 'false' ? ( + + + + ) : null} + {demoFunction.actions.value === 'true' ? ( + + + + 用户头像 + Name + + ) : null} + {demoFunction.localNav.value === 'true' ? ( + + + + ) : null} + {demoFunction.appbar.value === 'true' ? ( + + ) : null} + +
+ + + {demoFunction.ancillary.value === 'true' ? ( + + ) : null} + {demoFunction.tooldock.value === 'true' ? ( + + + + + + + + + + + + ) : null} + {demoFunction.footer.value === 'true' ? ( + + Alibaba Fusion + @ 2019 Alibaba Piecework 版权所有 + + ) : null} + + + + ); + } +} + +const renderShell = (type, i18n, demoFunction) => { + return ; +}; + +class FunctionDemo extends React.Component { + constructor(props) { + super(props); + const navigationType = props.type === 'dark' ? 'primary' : 'normal'; + + this.state = { + demoFunction: { + device: { + label: 'Device', + value: 'desktop', + enum: [ + { + label: 'desktop', + value: 'desktop', + }, + { + label: 'tablet', + value: 'tablet', + }, + { + label: 'phone', + value: 'phone', + }, + ], + }, + branding: { + label: 'Branding', + value: 'true', + enum: [ + { + label: '有', + value: 'true', + }, + { + label: '无', + value: 'false', + }, + ], + }, + actions: { + label: 'Actions', + value: 'true', + enum: [ + { + label: '有', + value: 'true', + }, + { + label: '无', + value: 'false', + }, + ], + }, + navigation: { + label: 'Applicaitoin Nav', + value: 'ver', + enum: [ + { + label: '侧栏', + value: 'ver', + }, + { + label: '顶部', + value: 'hoz', + }, + { + label: '无', + value: 'false', + }, + ], + }, + navigationType: { + label: 'App Nav Type', + value: navigationType, + enum: [ + { + label: 'normal', + value: 'normal', + }, + { + label: 'primary', + value: 'primary', + }, + { + label: 'secondary', + value: 'secondary', + }, + { + label: 'line', + value: 'line', + }, + ], + }, + localNav: { + label: 'Local Nav', + value: 'false', + enum: [ + { + label: '有', + value: 'true', + }, + { + label: '无', + value: 'false', + }, + ], + }, + // 'localNavType': { + // label: 'Local Nav Type', + // value: 'normal', + // enum: [{ + // label: 'normal', + // value: 'normal' + // }, { + // label: 'primary', + // value: 'primary' + // }, { + // label: 'secondary', + // value: 'secondary' + // }, { + // label: 'line', + // value: 'line' + // }] + // }, + appbar: { + label: 'Appbar', + value: 'false', + enum: [ + { + label: '有', + value: 'true', + }, + { + label: '无', + value: 'false', + }, + ], + }, + footer: { + label: 'Footer', + value: 'false', + enum: [ + { + label: '有', + value: 'true', + }, + { + label: '无', + value: 'false', + }, + ], + }, + ancillary: { + label: 'Ancillary', + value: 'false', + enum: [ + { + label: '有', + value: 'true', + }, + { + label: '无', + value: 'false', + }, + ], + }, + tooldock: { + label: 'Tooldock', + value: 'false', + enum: [ + { + label: '有', + value: 'true', + }, + { + label: '无', + value: 'false', + }, + ], + }, + }, + }; + } + + onFunctionChange = ret => { + this.setState({ + demoFunction: ret, + }); + }; + + render() { + const { title, locale, type, shellRender } = this.props; + const { demoFunction } = this.state; + + return ( + + {shellRender(type, locale, demoFunction)} + + ); + } +} + +function render(i18n, lang) { + return ReactDOM.render( + +
+ {['light', 'dark', 'brand'].map(type => { + return ( + + ); + })} +
+ , + document.getElementById('container') + ); +} + +window.renderDemo = function (lang = 'en-us') { + render(i18nMap[lang], lang); +}; + +renderDemo(); + +initDemo('shell'); diff --git a/components/shell/__tests__/a11y-spec.js b/components/shell/__tests__/a11y-spec.tsx similarity index 87% rename from components/shell/__tests__/a11y-spec.js rename to components/shell/__tests__/a11y-spec.tsx index 64c886398c..b3a1801359 100644 --- a/components/shell/__tests__/a11y-spec.js +++ b/components/shell/__tests__/a11y-spec.tsx @@ -30,7 +30,13 @@ describe('Shell A11y', () => { App Name - + { let inc; const container = document.createElement('div'); document.body.appendChild(container); - ReactDOM.render(element, container, function() { + ReactDOM.render(element, container, function () { inc = this; }); return { @@ -84,13 +84,23 @@ class App extends React.Component { tablet desktop - +
App Name - + MyName - +