diff --git a/migrate-from-v2.md b/migrate-from-v2.md index b16fc20d68..cb1ec0b797 100644 --- a/migrate-from-v2.md +++ b/migrate-from-v2.md @@ -255,12 +255,8 @@ plugins: [ #### Indicator -- 移除 `block`，暴露自定义节点 -- 移除 `align`，暴露自定义节点 -- `vertical` 重命名为`direction`，默认值为 `horizontal`，可选 `vertical` -- 移除 `fillZero`，暴露自定义节点 -- `size` 重命名为 `total` -- 增加非数字展示，并设置为默认状态 +- type 属性的值调整为 `'anchor'` 或 `'slide'` +- color 属性的值增加 `'white'` #### Menu @@ -273,16 +269,9 @@ plugins: [ #### NavBar -- `desc` 重命名为 `right`，类型修改为 `React.Node` -- 新增 `left`，左侧内容，渲染在返回区域的右侧 -- 新增 `back`，返回区域内容 -- `onClickBack` 重命名为 `onBackClick` -- 移除 `title`，通过 `children` 实现 -- 移除 `leftText` `leftShow`，通过 `back`、`left`实现 -- `safeAreaInsetTop` 重命名为 `safeArea` -- `border` 废弃 -- 移除 `onClickTitle` `onClickRight` `onClickIcon`，通过在`left`、`title`、`right`自定义事件实现，参考文档demo示例 -- +- 移除 titleAlign 属性，可通过 title 和 children 替代 +- 增加 title 属性，默认居中展示 +- 组件中出现 children ，则采取 titleAlign 的 left 方式布局 #### Pagination @@ -417,6 +406,10 @@ plugins: [ #### Input +- 新增 `plain` 属性，标记为 纯文本型；该值默认为false，标记为 container 容器型； +- 区分了 readonly 和 disabled 的样式； +- 删除一些样式变量，统一到由通用变量控制，如`$input-color`、`$input-disabled-color` + #### InputNumber - 增加 `allowEmpty`, 用于允许内容是否为空 @@ -516,32 +509,21 @@ plugins: [ #### TextArea -- `maxlength` 重命名为 `maxLength` -- `readonly` 重命名为 `readOnly` -- `limitShow` 重命名为 `showCount` -- `autosize` 重命名为 `autoSize` -- 移除 `textAlign`，可通过 `style` 传入 -- `defaultValue` 改为非受控，增加受控值 `value` +- 新增 `plain` 属性，标记为 纯文本型；该值默认为false，标记为 container 容器型； +- 新增 `status` 属性，值为 `default` | `error`，可定义输入框的状态； +- 删掉一些可使用基础样式变量，并且建议使用基础样式变量的样式变量，比如 `$textarea-font` `$textarea-limit-color` `$textarea-disabled-color` #### Uploader -- `maximize` 重命名为 `maxFileSize` -- `maximum` 重命名为 `maxCount` -- `listType ` 重命名为 `previewType` -- `isDeletable ` 重命名为 `deletable` -- `isPreview` 重命名为 ` preview` -- `defaultImg` 重命名为 ` previewUrl` -- `defaultFileList` 重命名为 ` defaultValue` -- `uploadIconTip` 重命名为 `uploadLabel`，类型变更为 `ReactNode` -- `onBeforeUpload` 重命名为 `beforeUpload` -- `onBeforeXhrUpload` 重命名为 `beforeXhrUpload` -- `onBeforeDelete` 重命名为 `beforeDelete` -- `onRemove` 重命名为 `onDelete` -- 增加 `fit`，用于图片填充模式 -- 增加 `value`，用于受控传值 -- 移除 `uploadIconSize`，可通过 icon 属性传入自定义 icon 或借助 CSS Variables 修改 icon 大小 -- `uploadIcon` 类型从 `string` 调整为 `ReactNode` -- `onChange` 参数类型从 `{fileList: FileItem[], event: any}` 调整为 `FileItem[]` +- 移除了组件内部关于ajax相关网络逻辑的处理 +- 移除了`url`、`headers`、`data`、`xhrState`、`withCredentials`、`timeout` 网络配置相关props +- 移除了`onStart`、`onProgress`、`onFailure`、`beforeXhrUpload` 触发时机函数相关props +- 新增`onOverCount`属性，文件数量超过限制时触发 +- 新增`onUploadQueueChange`属性，图片上传队列变化时触发 +- 简化`FileItem`类型的使用，除url外其他属性变为可选 +- 调整多选状态下`maxCount`属性的默认值为`Number.MAX_VALUE` +- 新增了的 `upload` 方法 +- `defaultValue` 和 `value` 的类型从 `FileType` 变更为 `FileItem` ### 操作反馈 @@ -747,9 +729,8 @@ plugins: [ #### Price -- `decimalDigits` 重命名为 `digits` -- 移除 `needSymbol`，通过 `symbol` 判断是否需要加上 symbol 符号 -- 新增 `line`，是否展示划线价 +- 修改 `size`，增加 'xlarge' 尺寸 +- 新增 `color`, 价格类型 #### Progress diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 52330a57a8..9e7688eb58 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -27028,4 +27028,4 @@ snapshots: toposort: 2.0.2 type-fest: 2.19.0 - zwitch@2.0.4: {} + zwitch@2.0.4: {} \ No newline at end of file diff --git a/scripts/build-taro.mjs b/scripts/build-taro.mjs index ae4f270888..99663d74cc 100644 --- a/scripts/build-taro.mjs +++ b/scripts/build-taro.mjs @@ -213,6 +213,32 @@ async function buildUMD() { } async function buildAllCSS() { + // 拷贝styles + async function copyStyles() { + await copy( + resolve(__dirname, '../src/styles'), + resolve(__dirname, '../dist/styles') + ) + + const content = [ + `@import './styles/theme-default.scss';`, + `@import './styles/variables.scss';`, + `@import './styles/mixins/index.scss';`, + `@import './styles/animation/index.scss';`, + ] + const projectID = process.env.VITE_APP_PROJECT_ID + if (projectID) { + content[1] = `@import '../variables-${projectID}.scss';` + } + const scssFiles = await glob(['dist/es/packages/**/*.scss']) + scssFiles.forEach((file) => { + content.push( + `@import '${relativeFilePath('/dist/style.scss', '/' + file)}';` + ) + }) + dest('dist/style.scss', content.join('\n')) + } + await copyStyles() await vite.build({ logLevel: 'error', resolve: { @@ -221,7 +247,7 @@ async function buildAllCSS() { build: { emptyOutDir: false, lib: { - entry: './dist/styles/themes/default.scss', + entry: './dist/style.scss', formats: ['es'], name: 'style', fileName: 'style', @@ -230,6 +256,29 @@ async function buildAllCSS() { }) } +async function buildThemeCSS() { + await vite.build({ + logLevel: 'error', + resolve: { + alias: [{ find: '@', replacement: resolve(__dirname, '../src') }], + }, + build: { + emptyOutDir: false, + rollupOptions: { + output: [ + { + dir: 'dist/styles/themes', + assetFileNames: 'default.css', + }, + ], + }, + lib: { + entry: './dist/styles/themes/default.scss', + }, + }, + }) +} + // 拷贝styles async function copyStyles() { await copy( @@ -338,39 +387,45 @@ async function buildCSS(p) { } -console.log('clean dist') +console.time('clean dist') await deleteAsync('dist') -console.log('clean: ✅') +console.timeEnd('clean dist') await generate() -console.log('build ES Module') +console.time('build ES Module') await buildES() -console.log('build ES Module: ✅') +console.timeEnd('build ES Module') -console.log('build CommonJS') +console.time('build CommonJS') await buildCJS() -console.log('build CommonJS: ✅') +console.timeEnd('build CommonJS') -console.log('build UMD') +console.time('build UMD') await buildUMD() -console.log('build UMD: ✅') +console.timeEnd('build UMD') -console.log('Build CSS') +console.time('Build CSS') await buildCSS() -console.log('Build CSS: ✅') +console.timeEnd('Build CSS') -console.log('Copy Styles') +console.time('Copy Styles') await copyStyles() -console.log('Copy Styles: ✅') +console.timeEnd('Copy Styles') -console.log('Build All CSS') +console.time('Build All CSS') await buildAllCSS() -console.log('Build All CSS: ✅') +console.timeEnd('Build All CSS') + +console.time('Build Theme CSS') +await buildThemeCSS() +console.timeEnd('Build Theme CSS') -console.log('Build Declaration') +console.time('Build Declaration') await buildDeclaration() -console.log('Build Declaration: ✅') +console.timeEnd('Build Declaration') + +// await exportProps() await deleteAsync([ 'dist/es/packages/nutui.react.js', @@ -379,4 +434,6 @@ await deleteAsync([ 'dist/es/packages/nutui.react.scss.js', ]) -codeShift('Taro') +console.time('Build JSDoc') +codeShift() +console.timeEnd('Build JSDoc') diff --git a/scripts/build.mjs b/scripts/build.mjs index ac55a8662f..7bb0b41170 100644 --- a/scripts/build.mjs +++ b/scripts/build.mjs @@ -173,6 +173,32 @@ async function buildUMD(p) { } async function buildAllCSS() { + // 拷贝styles + async function copyStyles() { + await copy( + resolve(__dirname, '../src/styles'), + resolve(__dirname, '../dist/styles') + ) + + const content = [ + `@import './styles/theme-default.scss';`, + `@import './styles/variables.scss';`, + `@import './styles/mixins/index.scss';`, + `@import './styles/animation/index.scss';`, + ] + const projectID = process.env.VITE_APP_PROJECT_ID + if (projectID) { + content[1] = `@import '../variables-${projectID}.scss';` + } + const scssFiles = await glob(['dist/es/packages/**/*.scss']) + scssFiles.forEach((file) => { + content.push( + `@import '${relativeFilePath('/dist/style.scss', '/' + file)}';` + ) + }) + dest('dist/style.scss', content.join('\n')) + } + await copyStyles() await vite.build({ logLevel: 'error', resolve: { @@ -181,7 +207,7 @@ async function buildAllCSS() { build: { emptyOutDir: false, lib: { - entry: './dist/styles/themes/default.scss', + entry: './dist/style.scss', formats: ['es'], name: 'style', fileName: 'style', @@ -190,6 +216,29 @@ async function buildAllCSS() { }) } +async function buildThemeCSS() { + await vite.build({ + logLevel: 'error', + resolve: { + alias: [{ find: '@', replacement: resolve(__dirname, '../src') }], + }, + build: { + emptyOutDir: false, + rollupOptions: { + output: [ + { + dir: 'dist/styles/themes', + assetFileNames: 'default.css', + }, + ], + }, + lib: { + entry: './dist/styles/themes/default.scss', + }, + }, + }) +} + // 拷贝styles async function copyStyles() { await copy( @@ -218,6 +267,7 @@ async function buildCSS(p) { const cssFiles = await glob(['src/packages/**/*.scss'], { ignore: ['src/packages/**/demo.scss'], }) + const variables = await readFile( join(__dirname, '../src/styles/variables.scss') ) @@ -296,26 +346,6 @@ async function buildCSS(p) { } } -// async function exportProps() { -// const types = [] -// const a = await readFile(join(__dirname, '../src/config.json')) -// const componentsConfig = JSON.parse(a.toString()) -// componentsConfig.nav.forEach((item) => { -// item.packages.forEach((element) => { -// const { name, show, exportEmpty } = element -// if (show || exportEmpty) { -// const lowerName = name.toLowerCase() -// if (lowerName === 'icon') return -// types.push(`export * from './${lowerName}/index'`) -// } -// }) -// }) -// await appendFile( -// join(__dirname, '../dist/es/packages/nutui.react.build.d.ts'), -// types.join('\n') -// ) -// } - console.time('clean dist') await deleteAsync('dist') console.timeEnd('clean dist') @@ -346,6 +376,10 @@ console.time('Build All CSS') await buildAllCSS() console.timeEnd('Build All CSS') +console.time('Build Theme CSS') +await buildThemeCSS() +console.timeEnd('Build Theme CSS') + console.time('Build Declaration') await buildDeclaration() console.timeEnd('Build Declaration') diff --git a/src/config.json b/src/config.json index db596b002d..9767d8cab4 100644 --- a/src/config.json +++ b/src/config.json @@ -331,6 +331,7 @@ "sort": 1, "show": true, "taro": true, + "v15": true, "author": "dsj" }, { @@ -481,6 +482,7 @@ "sort": 4, "show": true, "taro": true, + "v15": true, "author": "oasis" }, { @@ -537,6 +539,7 @@ "sort": 1, "show": true, "taro": true, + "v15": true, "author": "VickyYe" }, { @@ -610,6 +613,7 @@ "sort": 6, "show": true, "taro": true, + "v15": true, "author": "oasis" }, { @@ -700,10 +704,11 @@ "sort": 2, "show": true, "taro": true, + "v15": true, "author": "VickyYe" }, { - "version": "2.0.0", + "version": "3.0.0", "name": "Uploader", "type": "component", "tarodoc": true, @@ -740,7 +745,7 @@ "sort": 4, "show": true, "taro": true, - "v14": true, + "v15": true, "author": "lzz" }, { @@ -799,6 +804,7 @@ "sort": 5, "show": true, "taro": true, + "v15": true, "author": "swag~jun" }, { @@ -854,6 +860,7 @@ "type": "component", "show": true, "taro": true, + "v15": true, "rn": true, "desc": "弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示", "author": "szg2008" @@ -1041,6 +1048,7 @@ "sort": 16, "show": true, "taro": true, + "v15": true, "author": "liukun" }, { @@ -1076,6 +1084,7 @@ "sort": 4, "show": true, "taro": true, + "v15": true, "author": "songsong" }, { diff --git a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap index da4e2fb170..3d8bb0b584 100644 --- a/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap +++ b/src/packages/address/__test__/__snapshots__/address.spec.tsx.snap @@ -1,7 +1,13 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Address: exist defaultIcon & selectIcon 1`] = `"
请选择地址
"`; +exports[`Address: exist defaultIcon & selectIcon 1`] = `"
请选择地址
"`; -exports[`Address: show custom 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; +exports[`Address: show custom 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; -exports[`Address: show exist 1`] = `"
选择地址
"`; +exports[`Address: show custom 2`] = `"
选择地址
请选择
浙江
湖南
福建
"`; + +exports[`Address: show custom icon 1`] = `"
选择地址
请选择
浙江
湖南
福建
"`; + +exports[`Address: show custom icon 2`] = `"
请选择地址
选择其他地址
"`; + +exports[`Address: show exist 1`] = `"
选择地址
"`; diff --git a/src/packages/address/__test__/address.spec.tsx b/src/packages/address/__test__/address.spec.tsx index bb69e02c95..ae9806b843 100644 --- a/src/packages/address/__test__/address.spec.tsx +++ b/src/packages/address/__test__/address.spec.tsx @@ -1,6 +1,7 @@ import React, { useRef } from 'react' import { fireEvent, render, waitFor } from '@testing-library/react' import '@testing-library/jest-dom' +import { Star } from '@nutui/icons-react' import { Address } from '../address' const existList = [ @@ -117,6 +118,48 @@ test('Address: show custom', async () => { expect(container.innerHTML).toMatchSnapshot() }) +test('Address: show custom', async () => { + const { container } = render( +
+ ) + expect(container.innerHTML).toMatchSnapshot() +}) + +test('Address: show custom icon', async () => { + const { container } = render( +
} + title="选择地址" + /> + ) + expect(container.innerHTML).toMatchSnapshot() +}) + +test('Address: show custom icon', async () => { + const onExistSelect = vi.fn() + const onSwitch = vi.fn() + const { container } = render( +
+ ) + expect(container.innerHTML).toMatchSnapshot() + const btn = container.querySelector('.nut-address-footer-btn') as Element + fireEvent.click(btn) + const leftIcon = container.querySelector('.nut-address-left-icon') as Element + expect(leftIcon).toBeTruthy() + fireEvent.click(leftIcon) +}) + test('Address: options disabled', async () => { const { container } = render(
) const items = container.querySelectorAll('.nut-cascader-item') diff --git a/src/packages/address/address.tsx b/src/packages/address/address.tsx index 901c982475..e7b0db7b53 100644 --- a/src/packages/address/address.tsx +++ b/src/packages/address/address.tsx @@ -121,19 +121,18 @@ export const InternalAddress: ForwardRefRenderFunction< } const renderLeftOnCustomSwitch = () => { - return ( - <> - {custom && ( -
- {React.isValidElement(backIcon) ? ( - backIcon - ) : ( - - )} -
- )} - - ) + if (custom) { + return ( +
+ {React.isValidElement(backIcon) ? ( + backIcon + ) : ( + + )} +
+ ) + } + return null } const selectedExistItem = (data: AddressList) => { diff --git a/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap b/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap index 393ccf15cd..8617abeeef 100644 --- a/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap +++ b/src/packages/card/__test__/__snapshots__/card.spec.tsx.snap @@ -44,7 +44,7 @@ exports[`description slot test 1`] = ` class="nut-card-right-price" >
| ITouchEvent ) => void @@ -32,12 +26,12 @@ const defaultProps = { onClick: ( event: React.MouseEvent | ITouchEvent ) => {}, -} as CellProps +} as CellTaroProps const classPrefix = 'nut-cell' export const Cell: FunctionComponent< - Partial & Omit, 'title'> + Partial & Omit, 'title'> > & { Group: typeof CellGroup } = (props) => { const ctx = useContext(CellGroupContext) const { diff --git a/src/packages/cell/cell.tsx b/src/packages/cell/cell.tsx index 9281ee7a42..e63023173a 100644 --- a/src/packages/cell/cell.tsx +++ b/src/packages/cell/cell.tsx @@ -1,20 +1,10 @@ -import React, { FunctionComponent, ReactNode, useContext } from 'react' +import React, { FunctionComponent, useContext } from 'react' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import CellGroup from '@/packages/cellgroup' import CellGroupContext from '@/packages/cellgroup/context' import { useRtl } from '@/packages/configprovider' - -export interface CellProps extends BasicComponent { - title: ReactNode - description: ReactNode - extra: ReactNode - radius: string | number - align: 'flex-start' | 'center' | 'flex-end' - clickable: boolean - isLast: boolean - onClick: (event: React.MouseEvent) => void -} +import { CellProps } from './types' const defaultProps = { ...ComponentDefaults, diff --git a/src/packages/cell/index.taro.ts b/src/packages/cell/index.taro.ts index 81c3a8f8db..0fd6bf07a4 100644 --- a/src/packages/cell/index.taro.ts +++ b/src/packages/cell/index.taro.ts @@ -1,4 +1,4 @@ import { Cell } from './cell.taro' -export type { CellProps } from './cell.taro' +export type { CellProps, CellAlign } from './types' export default Cell diff --git a/src/packages/cell/index.ts b/src/packages/cell/index.ts index 99f19d22a0..9f302af797 100644 --- a/src/packages/cell/index.ts +++ b/src/packages/cell/index.ts @@ -1,4 +1,4 @@ import { Cell } from './cell' -export type { CellProps } from './cell' +export type { CellProps, CellAlign } from './types' export default Cell diff --git a/src/packages/cell/types.ts b/src/packages/cell/types.ts new file mode 100644 index 0000000000..5c098df2a8 --- /dev/null +++ b/src/packages/cell/types.ts @@ -0,0 +1,14 @@ +import { BasicComponent } from '@/utils/typings' + +export type CellAlign = 'flex-start' | 'center' | 'flex-end' | 'baseline' + +export interface CellProps extends BasicComponent { + title: React.ReactNode + description: React.ReactNode + extra: React.ReactNode + radius: string | number + align: CellAlign + clickable: boolean + isLast: boolean + onClick: (event: React.MouseEvent) => void +} diff --git a/src/packages/checkbox/checkbox.scss b/src/packages/checkbox/checkbox.scss index 4ec7292b9a..219df33a42 100644 --- a/src/packages/checkbox/checkbox.scss +++ b/src/packages/checkbox/checkbox.scss @@ -13,6 +13,8 @@ color: $color-primary; transition-duration: 0.3s; transition-property: color, border-color, background-color; + box-shadow: 0px 2px 4px 0px #ff0f2333; + border-radius: 50%; &.nut-checkbox-icon-disabled { color: $color-primary-disabled-special; @@ -31,6 +33,8 @@ &-icon-indeterminate { color: $color-primary; + box-shadow: 0px 2px 4px 0px #ff0f2333; + border-radius: 50%; &.nut-checkbox-icon-disabled { color: $color-primary-disabled-special; @@ -39,6 +43,7 @@ &-icon-disabled { color: $color-text-disabled; + box-shadow: none; } &-reverse { diff --git a/src/packages/formitem/formitem.scss b/src/packages/formitem/formitem.scss index 77678cc0c7..fe248e72b4 100644 --- a/src/packages/formitem/formitem.scss +++ b/src/packages/formitem/formitem.scss @@ -1,5 +1,7 @@ .nut-form-item { display: flex; + align-items: center; + padding: 4px 12px; &.error { &.line { diff --git a/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap b/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap index 6aef6f06d8..d2f9346040 100644 --- a/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap +++ b/src/packages/indicator/__test__/__snapshots__/indicator.spec.tsx.snap @@ -6,13 +6,13 @@ exports[`should match snapshot 1`] = ` class="nut-indicator" >
diff --git a/src/packages/indicator/__test__/indicator.spec.tsx b/src/packages/indicator/__test__/indicator.spec.tsx index 341aaef23c..b0d76e67e6 100644 --- a/src/packages/indicator/__test__/indicator.spec.tsx +++ b/src/packages/indicator/__test__/indicator.spec.tsx @@ -17,7 +17,9 @@ test('should be shown when passing size and current', () => { ) expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(3) - expect(container.querySelectorAll('.nut-indicator-active')).toHaveLength(1) + expect(container.querySelectorAll('.nut-indicator-dot-active')).toHaveLength( + 1 + ) }) test('should be shown when custom node', () => { @@ -41,3 +43,14 @@ test('should be shown when custom node', () => { ) expect(container.querySelectorAll('.nut-indicator-dot')).toHaveLength(5) }) + +test('should be shown when slide', () => { + const { container } = render( + + + + ) + expect(container.querySelectorAll('.nut-indicator-line-active')).toHaveLength( + 1 + ) +}) diff --git a/src/packages/indicator/demo.taro.tsx b/src/packages/indicator/demo.taro.tsx index ee3bb5a491..184068c77b 100644 --- a/src/packages/indicator/demo.taro.tsx +++ b/src/packages/indicator/demo.taro.tsx @@ -7,23 +7,31 @@ import Demo1 from './demos/taro/demo1' import Demo2 from './demos/taro/demo2' import Demo3 from './demos/taro/demo3' import Demo4 from './demos/taro/demo4' +import Demo5 from './demos/taro/demo5' +import Demo6 from './demos/taro/demo6' const IndicatorDemo = () => { const [translated] = useTranslate({ 'zh-CN': { basic: '基础用法', + white: '白色', + type: '类型', customNode: '自定义节点', custom: '自定义', vertical: '竖向展示', }, 'zh-TW': { basic: '基礎用法', + white: '白色', + type: '类型', customNode: '自定义节点', custom: '自定义', vertical: '豎向展示', }, 'en-US': { basic: 'Basic usage', + white: 'White', + type: 'Type', customNode: 'Custom Node', custom: 'Custom', vertical: 'Vertical display', @@ -37,6 +45,12 @@ const IndicatorDemo = () => { {translated.basic} + {translated.white} + + + {translated.type} + + {translated.customNode} diff --git a/src/packages/indicator/demo.tsx b/src/packages/indicator/demo.tsx index 3e772985ac..1f2695c0af 100644 --- a/src/packages/indicator/demo.tsx +++ b/src/packages/indicator/demo.tsx @@ -4,23 +4,31 @@ import Demo1 from './demos/h5/demo1' import Demo2 from './demos/h5/demo2' import Demo3 from './demos/h5/demo3' import Demo4 from './demos/h5/demo4' +import Demo5 from './demos/h5/demo5' +import Demo6 from './demos/h5/demo6' const IndicatorDemo = () => { const [translated] = useTranslate({ 'zh-CN': { basic: '基础用法', + white: '白色', + type: '类型', customNode: '自定义节点', custom: '自定义', vertical: '竖向展示', }, 'zh-TW': { basic: '基礎用法', + white: '白色', + type: '类型', customNode: '自定义节点', custom: '自定义', vertical: '豎向展示', }, 'en-US': { basic: 'Basic usage', + white: 'White', + type: 'Type', customNode: 'Custom Node', custom: 'Custom', vertical: 'Vertical display', @@ -33,6 +41,12 @@ const IndicatorDemo = () => {

{translated.basic}

+

{translated.white}

+ + +

{translated.type}

+ +

{translated.customNode}

diff --git a/src/packages/indicator/demos/h5/demo1.tsx b/src/packages/indicator/demos/h5/demo1.tsx index 0cedc6cd59..5ba63d1e3c 100644 --- a/src/packages/indicator/demos/h5/demo1.tsx +++ b/src/packages/indicator/demos/h5/demo1.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Indicator, Cell } from '@nutui/nutui-react' +import { Cell, Indicator } from '@nutui/nutui-react' const Demo1 = () => { return ( @@ -8,10 +8,13 @@ const Demo1 = () => { - + - + + + + ) diff --git a/src/packages/indicator/demos/h5/demo4.tsx b/src/packages/indicator/demos/h5/demo4.tsx index 66977d59a2..788f2ef46e 100644 --- a/src/packages/indicator/demos/h5/demo4.tsx +++ b/src/packages/indicator/demos/h5/demo4.tsx @@ -1,38 +1,61 @@ import React from 'react' -import { Indicator, Cell } from '@nutui/nutui-react' +import { Cell, Indicator } from '@nutui/nutui-react' const Demo4 = () => { return ( - - -
+ + +
+ {5} +
+ + - {5} -
- - - + /> + + + + + + + ) } export default Demo4 diff --git a/src/packages/indicator/demos/h5/demo5.tsx b/src/packages/indicator/demos/h5/demo5.tsx new file mode 100644 index 0000000000..b4595b4fd0 --- /dev/null +++ b/src/packages/indicator/demos/h5/demo5.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { Cell, Indicator } from '@nutui/nutui-react' + +const Demo5 = () => { + return ( + <> + + + + + ) +} +export default Demo5 diff --git a/src/packages/indicator/demos/h5/demo6.tsx b/src/packages/indicator/demos/h5/demo6.tsx new file mode 100644 index 0000000000..2fe8b28862 --- /dev/null +++ b/src/packages/indicator/demos/h5/demo6.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { Cell, Indicator } from '@nutui/nutui-react' + +const Demo6 = () => { + return ( + <> + + + + + + + + ) +} +export default Demo6 diff --git a/src/packages/indicator/demos/taro/demo1.tsx b/src/packages/indicator/demos/taro/demo1.tsx index bcfa4b0d21..4dfb8e95c0 100644 --- a/src/packages/indicator/demos/taro/demo1.tsx +++ b/src/packages/indicator/demos/taro/demo1.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Indicator, Cell } from '@nutui/nutui-react-taro' +import { Cell, Indicator } from '@nutui/nutui-react-taro' const Demo1 = () => { return ( @@ -8,10 +8,13 @@ const Demo1 = () => { - + - + + + + ) diff --git a/src/packages/indicator/demos/taro/demo4.tsx b/src/packages/indicator/demos/taro/demo4.tsx index 1527d78be1..250e4f4d85 100644 --- a/src/packages/indicator/demos/taro/demo4.tsx +++ b/src/packages/indicator/demos/taro/demo4.tsx @@ -1,66 +1,89 @@ import React from 'react' -import { Indicator, Cell } from '@nutui/nutui-react-taro' +import { Cell, Indicator } from '@nutui/nutui-react-taro' import { View } from '@tarojs/components' import { harmonyAndRn } from '@/utils/platform-taro' import pxTransform from '@/utils/px-transform' const Demo4 = () => { return ( - - - - {5} - - - - + <> + + + + {5} + + + + + + + + + + ) } export default Demo4 diff --git a/src/packages/indicator/demos/taro/demo5.tsx b/src/packages/indicator/demos/taro/demo5.tsx new file mode 100644 index 0000000000..a7d213f591 --- /dev/null +++ b/src/packages/indicator/demos/taro/demo5.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { Cell, Indicator } from '@nutui/nutui-react-taro' + +const Demo5 = () => { + return ( + <> + + + + + ) +} +export default Demo5 diff --git a/src/packages/indicator/demos/taro/demo6.tsx b/src/packages/indicator/demos/taro/demo6.tsx new file mode 100644 index 0000000000..7f282ea05c --- /dev/null +++ b/src/packages/indicator/demos/taro/demo6.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { Cell, Indicator } from '@nutui/nutui-react-taro' + +const Demo6 = () => { + return ( + <> + + + + + + + + ) +} +export default Demo6 diff --git a/src/packages/indicator/doc.en-US.md b/src/packages/indicator/doc.en-US.md index 283cd508be..feb5f3d144 100644 --- a/src/packages/indicator/doc.en-US.md +++ b/src/packages/indicator/doc.en-US.md @@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react' ::: +### White + +:::demo + + + +::: + +### Type + +:::demo + + + +::: + ### Custom Node :::demo @@ -51,6 +67,8 @@ import { Indicator } from '@nutui/nutui-react' | current | current step | `number` | `0` | | total | step total size | `number` | `3` | | direction | display directory,default is horizontal | `horizontal` \| `vertical` | `horizontal` | +| color | color | `primary` \| `white` | `primary` | +| type | interactivity Type | `anchor` \| `slide` | `anchor` | ## Theming @@ -62,7 +80,7 @@ The component provides the following CSS variables, which can be used to customi | --- | --- | --- | | \--nutui-indicator-color | indicator active color | `$color-primary` | | \--nutui-indicator-dot-color | indicator default color | `$color-text-disabled` | -| \--nutui-indicator-dot-size | indicator dot size | `5px` | -| \--nutui-indicator-dot-active-size | indicator dot active size | `15px` | -| \--nutui-indicator-border-radius | indicator active border size | `3px` | -| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `4px` | +| \--nutui-indicator-dot-size | indicator dot size | `3px` | +| \--nutui-indicator-dot-active-size | indicator dot active size | `6px` | +| \--nutui-indicator-border-radius | indicator active border size | `$radius-xxs` | +| \--nutui-indicator-dot-margin | when horizontal, indicator margin | `$spacing-xxxs` | diff --git a/src/packages/indicator/doc.md b/src/packages/indicator/doc.md index c255a685b8..16ce2c1dbe 100644 --- a/src/packages/indicator/doc.md +++ b/src/packages/indicator/doc.md @@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react' ::: +### 白色 + +:::demo + + + +::: + +### 类型 + +:::demo + + + +::: + ### 自定义节点 :::demo @@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| current | 当前步骤 | `number` | `0` | -| total | 步骤长度 | `number` | `3` | -| direction | 展示方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` | +| current | 当前页 | `number` | `0` | +| total | 总页数 | `number` | `2` | +| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` | +| color | 颜色 | `primary` \| `white` | `primary` | +| type | 交互类型 | `anchor` \| `slide` | `anchor` | ## 主题定制 @@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react' | --- | --- | --- | | \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` | | \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disabled` | -| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` | -| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` | -| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `3px` | -| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `4px` | +| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` | +| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `6px` | +| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `$radius-xxs` | +| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxxs` | diff --git a/src/packages/indicator/doc.taro.md b/src/packages/indicator/doc.taro.md index 46d29ed51e..7b0331f69b 100644 --- a/src/packages/indicator/doc.taro.md +++ b/src/packages/indicator/doc.taro.md @@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react-taro' ::: +### 白色 + +:::demo + + + +::: + +### 类型 + +:::demo + + + +::: + ### 自定义节点 :::demo @@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react-taro' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| current | 当前步骤 | `number` | `0` | -| total | 步骤长度 | `number` | `3` | -| direction | 展示方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` | +| current | 当前页 | `number` | `0` | +| total | 总页数 | `number` | `2` | +| direction | 方向，默认为水平方向 | `horizontal` \| `vertical` | `horizontal` | +| color | 颜色 | `primary` \| `white` | `primary` | +| type | 交互类型 | `anchor` \| `slide` | `anchor` | ## 主题定制 @@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react-taro' | --- | --- | --- | | \--nutui-indicator-color | 指示器焦点时色值 | `$color-primary` | | \--nutui-indicator-dot-color | 指示器默认色值 | `$color-text-disabled` | -| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` | -| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `15px` | -| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `3px` | -| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `4px` | +| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` | +| \--nutui-indicator-dot-active-size | 指示器焦点时尺寸 | `6px` | +| \--nutui-indicator-border-radius | 指示器焦点时的border值 | `$radius-xxs` | +| \--nutui-indicator-dot-margin | 指示器横向时的margin值 | `$spacing-xxxs` | diff --git a/src/packages/indicator/doc.zh-TW.md b/src/packages/indicator/doc.zh-TW.md index 65ef6fe486..0d170f68a4 100644 --- a/src/packages/indicator/doc.zh-TW.md +++ b/src/packages/indicator/doc.zh-TW.md @@ -18,6 +18,22 @@ import { Indicator } from '@nutui/nutui-react' ::: +### 白色 + +:::demo + + + +::: + +### 类型 + +:::demo + + + +::: + ### 自定義節點 :::demo @@ -48,9 +64,11 @@ import { Indicator } from '@nutui/nutui-react' | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | -| current | 當前步驟 | `number` | `0` | -| total | 步驟長度 | `number` | `3` | -| direction | 展示方向，默認為水平方向 | `horizontal` \| `vertical` | `horizontal` | +| current | 目前頁 | `number` | `0` | +| total | 總頁數 | `number` | `2` | +| direction | 方向，預設為水平方向 | `horizontal` \| `vertical` | `horizontal` | +| color | 顏色 | `primary` \| `white` | `primary` | +| type | 互動類型 | `anchor` \| `slide` | `anchor` | ## 主題定製 @@ -62,7 +80,7 @@ import { Indicator } from '@nutui/nutui-react' | --- | --- | --- | | \--nutui-indicator-color | 指示器焦點時色值 | `$color-primary` | | \--nutui-indicator-dot-color | 指示器默認色值 | `$color-text-disabled` | -| \--nutui-indicator-dot-size | 指示器尺寸 | `5px` | -| \--nutui-indicator-dot-active-size | 指示器焦點時尺寸 | `15px` | -| \--nutui-indicator-border-radius | 指示器焦點時的border值 | `3px` | -| \--nutui-indicator-dot-margin | 指示器橫向時的margin值 | `4px` | +| \--nutui-indicator-dot-size | 指示器尺寸 | `3px` | +| \--nutui-indicator-dot-active-size | 指示器焦點時尺寸 | `6px` | +| \--nutui-indicator-border-radius | 指示器焦點時的border值 | `$radius-xxs` | +| \--nutui-indicator-dot-margin | 指示器橫向時的margin值 | `$spacing-xxxs` | diff --git a/src/packages/indicator/indicator.scss b/src/packages/indicator/indicator.scss index 6b66b4d9a4..6272f82c1b 100644 --- a/src/packages/indicator/indicator.scss +++ b/src/packages/indicator/indicator.scss @@ -1,19 +1,24 @@ .nut-indicator { display: flex; - flex-direction: row; width: auto; + flex-direction: row; flex-wrap: nowrap; align-items: center; - justify-content: center; - &-dot { + &-fixed-width { + width: 21px; + } + + &-dot, + &-line { display: inline-block; vertical-align: middle; width: $indicator-dot-size; height: $indicator-dot-size; border-radius: 50%; - background-color: $indicator-dot-color; + background-color: $color-border-disabled; margin: 0 $indicator-dot-margin; + opacity: 0.4; &:first-child { margin-left: 0px; @@ -22,20 +27,119 @@ &:last-child { margin-right: 0px; } + + &-active { + width: $indicator-dot-active-size; + border-radius: $indicator-border-radius; + background: $indicator-color; + opacity: 1; + } + } + + // 固定宽度 + &-fixed-width { + // 两个页码的时候 + .nut-indicator-dot { + width: 12px; + border-radius: $indicator-border-radius; + + &-active { + width: 6px; + } + } } - &-active { + &-vertical { + // 竖向固定高度 + &.nut-indicator-fixed-width { + justify-content: flex-start; + height: 21px; + width: auto; + + // 竖向两个页码 + .nut-indicator-dot { + width: 3px; + height: 12px; + border-radius: $indicator-border-radius; + + &-active { + height: 6px; + } + } + } + } + + &-line { width: $indicator-dot-active-size; + margin: 0; + border-radius: $indicator-border-radius; - background: $indicator-color; + background-color: transparent; + + &-active { + transition: transform 0.3s ease-in-out; + background: $indicator-color; + } } +} - &-vertical { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; +.nut-indicator-track { + position: relative; + &:after { + display: block; + content: ' '; + position: absolute; + width: 100%; + height: 100%; + box-sizing: border-box; + border-radius: $indicator-border-radius; + background-color: $color-border-disabled; + opacity: 0.4; + } +} + +.nut-indicator-white { + .nut-indicator { + &-dot, + &-line { + position: relative; + box-sizing: content-box; + background: rgba(255, 255, 255, 0.4); + border: 1px solid rgba(0, 0, 0, 0.06); + opacity: 1; + } + + &-line { + opacity: 0; + + &-active { + opacity: 1; + background: rgba(255, 255, 255, 1); + } + } + &-dot { + &-active { + background: rgba(255, 255, 255, 1); + } + } + } +} + +.nut-indicator-track.nut-indicator-white { + &:after { + border: 1px solid rgba(0, 0, 0, 0.06); + background: rgba(255, 255, 255, 0.4); + } +} + +.nut-indicator-vertical { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .nut-indicator { &-dot { margin: $indicator-dot-margin 0; @@ -46,11 +150,20 @@ &:last-child { margin-bottom: 0px; } + + &-active { + width: $indicator-dot-size; + height: $indicator-dot-active-size; + } } + } - &-active { - width: $indicator-dot-size; - height: $indicator-dot-active-size; + &.nut-indicator-track { + .nut-indicator { + &-line { + width: $indicator-dot-size; + height: $indicator-dot-active-size; + } } } } diff --git a/src/packages/indicator/indicator.taro.tsx b/src/packages/indicator/indicator.taro.tsx index 521e21bfb9..87b192b78f 100644 --- a/src/packages/indicator/indicator.taro.tsx +++ b/src/packages/indicator/indicator.taro.tsx @@ -1,31 +1,51 @@ import React, { FunctionComponent, ReactNode } from 'react' import classNames from 'classnames' -import { View } from '@tarojs/components' +import { View, ViewProps } from '@tarojs/components' + +export type IndicatorType = 'anchor' | 'slide' +export type IndicatorColor = 'primary' | 'white' export interface IndicatorProps { total: number current: number direction: string + color: IndicatorColor + type: IndicatorType } + const defaultProps = { - total: 3, + total: 2, current: 0, direction: 'horizontal', + color: 'primary', + type: 'anchor', } as IndicatorProps + const classPrefix = `nut-indicator` + export const Indicator: FunctionComponent< - Partial & React.HTMLAttributes + Partial & ViewProps > = (props) => { - const { total, current, children, className, direction, style } = { + const { + color, + type, + total, + current, + children, + className, + direction, + ...rest + } = { ...defaultProps, ...props, } const classes = classNames({ [`${classPrefix}-vertical`]: direction === 'vertical', + [`${classPrefix}-white`]: color === 'white', + [`${classPrefix}-track`]: type === 'slide', }) - const classPrefixV = - direction === 'vertical' ? `${classPrefix}-vertical` : classPrefix - const renderElement = () => { + + const renderDotElement = () => { const childs: ReactNode[] = [] for (let item = 0; item < total; item++) { childs.push( @@ -33,22 +53,51 @@ export const Indicator: FunctionComponent< children || ( ) ) : ( - + ) ) } return childs } + const renderLineElement = () => { + const trackWidth: number = 21 + const sliderWidth: number = 6 + const stride = (trackWidth - sliderWidth) / (total - 1) + return ( + + ) + } + const renderByType = (type: IndicatorType) => { + switch (type) { + case 'slide': + return renderLineElement() + default: + return renderDotElement() + } + } + + function maybeFixedWidth() { + if (total === 2 || type === 'slide') { + return `${classPrefix}-fixed-width` + } + return '' + } + return ( - - {renderElement()} + + {renderByType(type)} ) } diff --git a/src/packages/indicator/indicator.tsx b/src/packages/indicator/indicator.tsx index 75160d621b..eba34461ca 100644 --- a/src/packages/indicator/indicator.tsx +++ b/src/packages/indicator/indicator.tsx @@ -1,15 +1,23 @@ import React, { FunctionComponent, ReactNode } from 'react' import classNames from 'classnames' +export type IndicatorType = 'anchor' | 'slide' +export type IndicatorColor = 'primary' | 'white' + export interface IndicatorProps { total: number current: number direction: string + color: IndicatorColor + type: IndicatorType } + const defaultProps = { - total: 3, + total: 2, current: 0, direction: 'horizontal', + color: 'primary', + type: 'anchor', } as IndicatorProps const classPrefix = `nut-indicator` @@ -17,16 +25,26 @@ const classPrefix = `nut-indicator` export const Indicator: FunctionComponent< Partial & React.HTMLAttributes > = (props) => { - const { total, current, children, className, direction, ...rest } = { + const { + color, + type, + total, + current, + children, + className, + direction, + ...rest + } = { ...defaultProps, ...props, } const classes = classNames({ [`${classPrefix}-vertical`]: direction === 'vertical', + [`${classPrefix}-white`]: color === 'white', + [`${classPrefix}-track`]: type === 'slide', }) - const classPrefixV = - direction === 'vertical' ? `${classPrefix}-vertical` : classPrefix - const renderElement = () => { + + const renderDotElement = () => { const childs: ReactNode[] = [] for (let item = 0; item < total; item++) { childs.push( @@ -34,22 +52,51 @@ export const Indicator: FunctionComponent< children || (
) ) : ( -
+
) ) } return childs } + const renderLineElement = () => { + const trackWidth: number = 21 + const sliderWidth: number = 6 + const stride = (trackWidth - sliderWidth) / (total - 1) + return ( +
+ ) + } + const renderByType = (type: IndicatorType) => { + switch (type) { + case 'slide': + return renderLineElement() + default: + return renderDotElement() + } + } + + function maybeFixedWidth() { + if (total === 2 || type === 'slide') { + return `${classPrefix}-fixed-width` + } + return '' + } + return ( -
- {renderElement()} +
+ {renderByType(type)}
) } diff --git a/src/packages/infiniteloading/demos/h5/demo1.tsx b/src/packages/infiniteloading/demos/h5/demo1.tsx index 23aeb3120f..7e0290962d 100644 --- a/src/packages/infiniteloading/demos/h5/demo1.tsx +++ b/src/packages/infiniteloading/demos/h5/demo1.tsx @@ -59,7 +59,7 @@ const Demo1 = () => { diff --git a/src/packages/infiniteloading/demos/h5/demo2.tsx b/src/packages/infiniteloading/demos/h5/demo2.tsx index a2622ae0ac..da81907edd 100644 --- a/src/packages/infiniteloading/demos/h5/demo2.tsx +++ b/src/packages/infiniteloading/demos/h5/demo2.tsx @@ -68,7 +68,7 @@ const Demo2 = () => { > 下拉刷新 @@ -83,9 +83,9 @@ const Demo2 = () => { fill="none" className="nut-infinite-bottom-tips-icons" > - - - + + + 加载中 diff --git a/src/packages/infiniteloading/infiniteloading.scss b/src/packages/infiniteloading/infiniteloading.scss index 485e2fd4bf..024ffcf563 100644 --- a/src/packages/infiniteloading/infiniteloading.scss +++ b/src/packages/infiniteloading/infiniteloading.scss @@ -33,7 +33,6 @@ justify-content: center; width: 100%; padding-top: 6px; - font-size: $font-size-s; color: $infiniteloading-color; text-align: center; @@ -41,6 +40,7 @@ display: flex; justify-content: center; align-items: center; + font-size: $font-size-xxs; &-icons { margin-right: 8px; diff --git a/src/packages/input/demos/h5/demo1.tsx b/src/packages/input/demos/h5/demo1.tsx index 82871f8551..7df8ef3c07 100644 --- a/src/packages/input/demos/h5/demo1.tsx +++ b/src/packages/input/demos/h5/demo1.tsx @@ -1,10 +1,12 @@ import React from 'react' -import { Input } from '@nutui/nutui-react' +import { Divider, Input } from '@nutui/nutui-react' const Demo1 = () => { return ( <> - + + + ) } diff --git a/src/packages/input/demos/h5/demo10.tsx b/src/packages/input/demos/h5/demo10.tsx index 58d5613b42..a3d40355fd 100644 --- a/src/packages/input/demos/h5/demo10.tsx +++ b/src/packages/input/demos/h5/demo10.tsx @@ -1,17 +1,17 @@ import React from 'react' -import { Input } from '@nutui/nutui-react' +import { Input, Space } from '@nutui/nutui-react' const Demo10 = () => { const formatter = (value: string) => value.replace(/\d/g, '') return ( - <> + - + ) } export default Demo10 diff --git a/src/packages/input/demos/h5/demo11.tsx b/src/packages/input/demos/h5/demo11.tsx index 8b73a36b5b..a5276fda2e 100644 --- a/src/packages/input/demos/h5/demo11.tsx +++ b/src/packages/input/demos/h5/demo11.tsx @@ -1,12 +1,12 @@ import React from 'react' -import { Input } from '@nutui/nutui-react' +import { Input, Space } from '@nutui/nutui-react' const Demo11 = () => { return ( - <> + - + ) } export default Demo11 diff --git a/src/packages/input/demos/h5/demo13.tsx b/src/packages/input/demos/h5/demo13.tsx index 60e34ecf2c..bc7968275f 100644 --- a/src/packages/input/demos/h5/demo13.tsx +++ b/src/packages/input/demos/h5/demo13.tsx @@ -4,27 +4,25 @@ import { Tips } from '@nutui/icons-react' const Demo13 = () => { return ( - <> -
- - -
- -
+
+ + +
+
- +
) } export default Demo13 diff --git a/src/packages/input/demos/h5/demo4.tsx b/src/packages/input/demos/h5/demo4.tsx index 08ba29e80d..db78cf4c13 100644 --- a/src/packages/input/demos/h5/demo4.tsx +++ b/src/packages/input/demos/h5/demo4.tsx @@ -1,14 +1,14 @@ import React from 'react' -import { Input } from '@nutui/nutui-react' +import { Input, Space } from '@nutui/nutui-react' const Demo4 = () => { return ( - <> + - + ) } export default Demo4 diff --git a/src/packages/input/demos/h5/demo5.tsx b/src/packages/input/demos/h5/demo5.tsx index e30fb98637..49ced99272 100644 --- a/src/packages/input/demos/h5/demo5.tsx +++ b/src/packages/input/demos/h5/demo5.tsx @@ -1,12 +1,12 @@ import React from 'react' -import { Input } from '@nutui/nutui-react' +import { Input, Space } from '@nutui/nutui-react' const Demo5 = () => { return ( - <> - + + - + ) } export default Demo5 diff --git a/src/packages/input/demos/h5/demo6.tsx b/src/packages/input/demos/h5/demo6.tsx index 442499fb60..1ac0c3563b 100644 --- a/src/packages/input/demos/h5/demo6.tsx +++ b/src/packages/input/demos/h5/demo6.tsx @@ -1,13 +1,13 @@ import React from 'react' -import { Input } from '@nutui/nutui-react' +import { Input, Space } from '@nutui/nutui-react' import { Close } from '@nutui/icons-react' const Demo6 = () => { return ( - <> + } placeholder="显示清除图标" /> - + ) } export default Demo6 diff --git a/src/packages/input/demos/h5/demo7.tsx b/src/packages/input/demos/h5/demo7.tsx index 55d08c272a..d06187dc53 100644 --- a/src/packages/input/demos/h5/demo7.tsx +++ b/src/packages/input/demos/h5/demo7.tsx @@ -4,20 +4,18 @@ import Form from '@/packages/form' const Demo7 = () => { return ( - <> -
- - { - console.log('change value:', val) - }} - /> - -
- +
+ + { + console.log('change value:', val) + }} + /> + +
) } export default Demo7 diff --git a/src/packages/input/demos/h5/demo8.tsx b/src/packages/input/demos/h5/demo8.tsx index 430b78a599..ba77725299 100644 --- a/src/packages/input/demos/h5/demo8.tsx +++ b/src/packages/input/demos/h5/demo8.tsx @@ -4,25 +4,23 @@ import { Input } from '@nutui/nutui-react' const Demo8 = () => { const [currentLength, setCurrentLength] = useState(0) return ( - <> -
- setCurrentLength(val.length)} - /> -
- {currentLength} / 20 -
+
+ setCurrentLength(val.length)} + /> +
+ {currentLength} / 20
- +
) } export default Demo8 diff --git a/src/packages/input/demos/h5/demo9.tsx b/src/packages/input/demos/h5/demo9.tsx index c8c4b806f5..29671d4970 100644 --- a/src/packages/input/demos/h5/demo9.tsx +++ b/src/packages/input/demos/h5/demo9.tsx @@ -5,30 +5,26 @@ import { Eye, Marshalling } from '@nutui/icons-react' const Demo9 = () => { const [inputType, setInputType] = useState('password') return ( - <> +
+
setInputType(inputType === 'text' ? 'password' : 'text')} > - -
- setInputType(inputType === 'text' ? 'password' : 'text') - } - > - {inputType === 'text' ? ( - - ) : ( - - )} -
+ {inputType === 'text' ? ( + + ) : ( + + )}
- +
) } export default Demo9 diff --git a/src/packages/input/demos/taro/demo1.tsx b/src/packages/input/demos/taro/demo1.tsx index 0596c0414c..443c596372 100644 --- a/src/packages/input/demos/taro/demo1.tsx +++ b/src/packages/input/demos/taro/demo1.tsx @@ -1,16 +1,12 @@ import React from 'react' -import { Input } from '@nutui/nutui-react-taro' +import { Divider, Input } from '@nutui/nutui-react-taro' const Demo1 = () => { return ( <> - { - console.log('onChange', v) - }} - /> + + + ) } diff --git a/src/packages/input/demos/taro/demo10.tsx b/src/packages/input/demos/taro/demo10.tsx index d96ff4ecae..20ad48abb9 100644 --- a/src/packages/input/demos/taro/demo10.tsx +++ b/src/packages/input/demos/taro/demo10.tsx @@ -1,22 +1,17 @@ import React from 'react' -import { Input } from '@nutui/nutui-react-taro' +import { Input, Space } from '@nutui/nutui-react-taro' const Demo10 = () => { const formatter = (value: string) => value.replace(/\d/g, '') return ( - <> - + + - + ) } export default Demo10 diff --git a/src/packages/input/demos/taro/demo11.tsx b/src/packages/input/demos/taro/demo11.tsx index 5e6f9ad7e3..77d3108a5f 100644 --- a/src/packages/input/demos/taro/demo11.tsx +++ b/src/packages/input/demos/taro/demo11.tsx @@ -1,20 +1,12 @@ import React from 'react' -import { Input } from '@nutui/nutui-react-taro' +import { Input, Space } from '@nutui/nutui-react-taro' const Demo11 = () => { return ( - <> - - - + + + + ) } export default Demo11 diff --git a/src/packages/input/demos/taro/demo12.tsx b/src/packages/input/demos/taro/demo12.tsx index c3c757fe0a..d7021976be 100644 --- a/src/packages/input/demos/taro/demo12.tsx +++ b/src/packages/input/demos/taro/demo12.tsx @@ -4,7 +4,7 @@ import { Input } from '@nutui/nutui-react-taro' const Demo12 = () => { return ( <> - + ) } diff --git a/src/packages/input/demos/taro/demo13.tsx b/src/packages/input/demos/taro/demo13.tsx index a0c271a84a..4477e7e17c 100644 --- a/src/packages/input/demos/taro/demo13.tsx +++ b/src/packages/input/demos/taro/demo13.tsx @@ -6,38 +6,35 @@ import pxTransform from '@/utils/px-transform' const Demo13 = () => { return ( - <> + + + - - - - - + - + ) } export default Demo13 diff --git a/src/packages/input/demos/taro/demo14.tsx b/src/packages/input/demos/taro/demo14.tsx index 9a0e3660c2..def6bba07b 100644 --- a/src/packages/input/demos/taro/demo14.tsx +++ b/src/packages/input/demos/taro/demo14.tsx @@ -7,7 +7,6 @@ const Demo11 = () => { ) diff --git a/src/packages/input/demos/taro/demo2.tsx b/src/packages/input/demos/taro/demo2.tsx index 9f82674a08..89c1d9b50c 100644 --- a/src/packages/input/demos/taro/demo2.tsx +++ b/src/packages/input/demos/taro/demo2.tsx @@ -4,11 +4,7 @@ import { Input } from '@nutui/nutui-react-taro' const Demo2 = () => { return ( <> - + ) } diff --git a/src/packages/input/demos/taro/demo3.tsx b/src/packages/input/demos/taro/demo3.tsx index fa9fb055b9..cceac2a656 100644 --- a/src/packages/input/demos/taro/demo3.tsx +++ b/src/packages/input/demos/taro/demo3.tsx @@ -9,7 +9,6 @@ const Demo3 = () => { value={val} onChange={(val) => setVal(val)} placeholder="请输入文本" - placeholderTextColor="#757575" /> ) diff --git a/src/packages/input/demos/taro/demo4.tsx b/src/packages/input/demos/taro/demo4.tsx index 2b9cd3f063..213bf9afb9 100644 --- a/src/packages/input/demos/taro/demo4.tsx +++ b/src/packages/input/demos/taro/demo4.tsx @@ -1,30 +1,14 @@ import React from 'react' -import { Input } from '@nutui/nutui-react-taro' +import { Input, Space } from '@nutui/nutui-react-taro' const Demo4 = () => { return ( - <> - - - - - + + + + + + ) } export default Demo4 diff --git a/src/packages/input/demos/taro/demo5.tsx b/src/packages/input/demos/taro/demo5.tsx index 66b318076c..6a3b0fd556 100644 --- a/src/packages/input/demos/taro/demo5.tsx +++ b/src/packages/input/demos/taro/demo5.tsx @@ -1,12 +1,12 @@ import React from 'react' -import { Input } from '@nutui/nutui-react-taro' +import { Input, Space } from '@nutui/nutui-react-taro' const Demo5 = () => { return ( - <> - - - + + + + ) } export default Demo5 diff --git a/src/packages/input/demos/taro/demo6.tsx b/src/packages/input/demos/taro/demo6.tsx index dc0452bce8..d97f34afee 100644 --- a/src/packages/input/demos/taro/demo6.tsx +++ b/src/packages/input/demos/taro/demo6.tsx @@ -1,22 +1,13 @@ import React from 'react' -import { Input } from '@nutui/nutui-react-taro' +import { Input, Space } from '@nutui/nutui-react-taro' import { Close } from '@nutui/icons-react-taro' const Demo6 = () => { return ( - <> - - } - placeholder="显示清除图标" - placeholderTextColor="#757575" - /> - + + + } placeholder="显示清除图标" /> + ) } export default Demo6 diff --git a/src/packages/input/demos/taro/demo7.tsx b/src/packages/input/demos/taro/demo7.tsx index 6e49144e79..3ef4ee3cd4 100644 --- a/src/packages/input/demos/taro/demo7.tsx +++ b/src/packages/input/demos/taro/demo7.tsx @@ -15,12 +15,7 @@ const Demo7 = () => { backgroundColor: '#ffffff', }} > - +
+ } right={ Toast.show('清空')}>清空} left={} back={} onBackClick={(e) => Toast.show('返回')} - > -
- Toast.show('标题')}> - 浏览记录 - - 浏览记录 -
- + /> } + title={ Toast.show('页面标题')}>页面标题} right={ <> - Toast.show('编辑')} - > - 编辑 - + Toast.show('编辑')}>编辑 Toast.show('icon')} /> } onBackClick={(e) => Toast.show('返回')} - > - Toast.show('标题')}>购物车 - Toast.show('icon')} - > - - - + /> ) } diff --git a/src/packages/navbar/demos/h5/demo2.tsx b/src/packages/navbar/demos/h5/demo2.tsx index d347e807aa..9d04f15111 100644 --- a/src/packages/navbar/demos/h5/demo2.tsx +++ b/src/packages/navbar/demos/h5/demo2.tsx @@ -1,12 +1,12 @@ import React from 'react' -import { NavBar, Toast } from '@nutui/nutui-react' -import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react' +import { NavBar, Toast, Space } from '@nutui/nutui-react' +import { ArrowLeft, Close, More, Share } from '@nutui/icons-react' const Demo2 = () => { const styles = { flexCenter: { display: 'flex', - aliginItems: 'center', + alignItems: 'center', }, title: { fontSize: '18px', @@ -22,72 +22,59 @@ const Demo2 = () => { } return ( <> - - - 返回 - - } - right={ - Toast.show('icon')}> - - - } - onBackClick={(e) => Toast.show('返回')} - > - 订单详情 - - Toast.show('icon')}> - - - } - onBackClick={(e) => Toast.show('返回')} - > - 订单详情 - - Toast.show('清空')}>清空} - left={} - back={} - onBackClick={(e) => Toast.show('返回')} - > -
- Toast.show('标题')}> - 浏览记录 - - 浏览记录 + +
+ + + 返回 + + } + right={ Toast.show('icon')} />} + onBackClick={(e) => Toast.show('返回')} + > + 页面标题 +
- - } - right={ - <> - Toast.show('编辑')} - > - 编辑 - - Toast.show('icon')} /> - - } - onBackClick={(e) => Toast.show('返回')} - > - Toast.show('标题')}>购物车 - Toast.show('icon')} - > - - - +
+ Toast.show('icon')} />} + onBackClick={(e) => Toast.show('返回')} + > + 页面标题 + +
+
+ Toast.show('清空')}>清空} + left={} + back={} + onBackClick={(e) => Toast.show('返回')} + > +
+ Toast.show('标题')}> + 页面标题 + + 副标题 +
+ +
+
+ } + right={ + <> + Toast.show('编辑')}>编辑 + Toast.show('icon')} /> + + } + onBackClick={(e) => Toast.show('返回')} + > + Toast.show('页面标题')}>页面标题 + +
+ ) } diff --git a/src/packages/navbar/demos/h5/demo3.tsx b/src/packages/navbar/demos/h5/demo3.tsx index 4edb8308f5..a09ff8c27e 100644 --- a/src/packages/navbar/demos/h5/demo3.tsx +++ b/src/packages/navbar/demos/h5/demo3.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react' -import { NavBar, Toast, Tabs, TabPane } from '@nutui/nutui-react' -import { More, ArrowLeft } from '@nutui/icons-react' +import { NavBar, TabPane, Tabs, Toast } from '@nutui/nutui-react' +import { ArrowLeft, More } from '@nutui/icons-react' const Demo3 = () => { const [tab1value, setTab1value] = useState('0') @@ -11,12 +11,7 @@ const Demo3 = () => { back={} right={ <> - Toast.show('编辑')} - style={{ marginRight: '5px' }} - > - 编辑 - + Toast.show('编辑')}>编辑 Toast.show('icon')} /> } @@ -36,21 +31,14 @@ const Demo3 = () => { Tab 1 Tab 2 Tab 3 - Tab 4
} right={ <> - Toast.show('编辑')} - style={{ marginRight: '5px' }} - > - 编辑 - + Toast.show('编辑')}>编辑 Toast.show('icon')} /> } @@ -68,7 +56,6 @@ const Demo3 = () => { > Tab1 Tab2 - Tab3
diff --git a/src/packages/navbar/demos/taro/demo1.tsx b/src/packages/navbar/demos/taro/demo1.tsx index 26c80cb60e..2494f5967f 100644 --- a/src/packages/navbar/demos/taro/demo1.tsx +++ b/src/packages/navbar/demos/taro/demo1.tsx @@ -1,8 +1,9 @@ import React from 'react' -import { NavBar } from '@nutui/nutui-react-taro' -import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react-taro' import Taro from '@tarojs/taro' -import { View, Text } from '@tarojs/components' +import { View } from '@tarojs/components' +import { NavBar } from '@nutui/nutui-react-taro' +import { ArrowLeft, Close, More, Share } from '@nutui/icons-react-taro' +import { harmony } from '@/utils/platform-taro' import pxTransform from '@/utils/px-transform' const Demo1 = () => { @@ -21,101 +22,68 @@ const Demo1 = () => { fontWeight: 400, color: 'rgba(0,0,0, 0.5)', lineHeight: pxTransform(16), - textAlign: 'center', }, } return ( <> - - 返回 + + 返回 } - right={ - Taro.showToast({ title: 'icon' })} - > - - - } + right={ Taro.showToast({ title: 'icon' })} />} onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - 订单详情 - + /> Taro.showToast({ title: 'icon' })} - > - - - } + title="页面标题" + right={ Taro.showToast({ title: 'icon' })} />} onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - 订单详情 - + /> + Taro.showToast({ title: '标题' })} + > + 页面标题 + + 副标题 + + } right={ - Taro.showToast({ title: '清空' })}>清空 + Taro.showToast({ title: '清空' })}>清空 } - left={} - back={} + left={} + back={} onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - - Taro.showToast({ title: '标题' })} - > - 浏览记录 - - 浏览记录 - - + /> } + back={} + title={ + Taro.showToast({ title: '页面标题' })} + > + 页面标题 + + } right={ <> - Taro.showToast({ title: '编辑' })} > 编辑 - - Taro.showToast({ title: 'icon' })} - /> + + Taro.showToast({ title: 'icon' })} /> } onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - Taro.showToast({ title: '标题' })} - > - 购物车 - - Taro.showToast({ title: 'icon' })} - > - - - + /> ) } diff --git a/src/packages/navbar/demos/taro/demo2.tsx b/src/packages/navbar/demos/taro/demo2.tsx index 7d0b538b9c..43dbc34304 100644 --- a/src/packages/navbar/demos/taro/demo2.tsx +++ b/src/packages/navbar/demos/taro/demo2.tsx @@ -1,15 +1,16 @@ import React from 'react' -import { NavBar } from '@nutui/nutui-react-taro' -import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react-taro' import Taro from '@tarojs/taro' -import { View, Text } from '@tarojs/components' +import { View } from '@tarojs/components' +import { NavBar, Space } from '@nutui/nutui-react-taro' +import { ArrowLeft, Close, More, Share } from '@nutui/icons-react-taro' +import { harmony } from '@/utils/platform-taro' import pxTransform from '@/utils/px-transform' const Demo2 = () => { const styles = { flexCenter: { display: 'flex', - aliginItems: 'center', + alignItems: 'center', }, title: { fontSize: pxTransform(18), @@ -25,99 +26,88 @@ const Demo2 = () => { } return ( <> - - - 返回 - - } - right={ - Taro.showToast({ title: 'icon' })} + + + + + 返回 + + } + right={ Taro.showToast({ title: 'icon' })} />} + onBackClick={(e) => Taro.showToast({ title: '返回' })} > - - - } - onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - 订单详情 - - Taro.showToast({ title: 'icon' })} + Taro.showToast({ title: '页面标题' })} + > + 页面标题 + + + + + Taro.showToast({ title: 'icon' })} />} + onBackClick={(e) => Taro.showToast({ title: '返回' })} > - - - } - onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - 订单详情 - - Taro.showToast({ title: '清空' })}>清空 - } - left={} - back={} - onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - - Taro.showToast({ title: '标题' })} + Taro.showToast({ title: '页面标题' })} + > + 页面标题 + + + + + Taro.showToast({ title: '清空' })}> + 清空 + + } + left={} + back={} + onBackClick={(e) => Taro.showToast({ title: '返回' })} > - 浏览记录 - - 浏览记录 + + + Taro.showToast({ title: '标题' })} + > + 页面标题 + + 副标题 + + + - - } - right={ - <> - Taro.showToast({ title: '编辑' })} + + } + right={ + <> + Taro.showToast({ title: '编辑' })} + > + 编辑 + + Taro.showToast({ title: 'icon' })} /> + + } + onBackClick={(e) => Taro.showToast({ title: '返回' })} + > + Taro.showToast({ title: '页面标题' })} > - 编辑 - - Taro.showToast({ title: 'icon' })} - /> - - } - onBackClick={(e) => Taro.showToast({ title: '返回' })} - > - Taro.showToast({ title: '标题' })} - > - 购物车 - - Taro.showToast({ title: 'icon' })} - > - + 页面标题 + + - + ) } diff --git a/src/packages/navbar/demos/taro/demo3.tsx b/src/packages/navbar/demos/taro/demo3.tsx index 7e72af1beb..9cc3f34e0c 100644 --- a/src/packages/navbar/demos/taro/demo3.tsx +++ b/src/packages/navbar/demos/taro/demo3.tsx @@ -1,92 +1,63 @@ import React, { useState } from 'react' -import { NavBar, Tabs, TabPane } from '@nutui/nutui-react-taro' import Taro from '@tarojs/taro' -import { View, Text } from '@tarojs/components' +import { View } from '@tarojs/components' +import { NavBar, TabPane, Tabs } from '@nutui/nutui-react-taro' import { ArrowLeft, More } from '@nutui/icons-react-taro' -import pxTransform from '@/utils/px-transform' -import { harmonyAndRn } from '@/utils/platform-taro' const Demo3 = () => { const [tab1value, setTab1value] = useState('0') const [tab2value, setTab2value] = useState('0') - - const isRnAndHarmony = harmonyAndRn() return ( <> } + back={} right={ <> - Taro.showToast({ title: '编辑' })} - > - 编辑 - - - Taro.showToast({ title: 'icon' })} - /> + Taro.showToast({ title: '编辑' })}>编辑 + Taro.showToast({ title: 'icon' })} /> } onBackClick={(e) => Taro.showToast({ title: '返回' })} > - {isRnAndHarmony ? null : ( - { - setTab1value(paneKey) - }} - style={{ - background: 'transparent', - }} - > - Tab 1 - Tab 2 - Tab 3 - Tab 4 - - )} + { + setTab1value(paneKey) + }} + style={{ + '--nutui-tabs-titles-gap': 0, + }} + > + Tab 1 + Tab 2 + Tab 3 + - } + back={} right={ <> - Taro.showToast({ title: '编辑' })} - > - 编辑 - - Taro.showToast({ title: 'icon' })} - /> + Taro.showToast({ title: '编辑' })}>编辑 + Taro.showToast({ title: 'icon' })} /> } onBackClick={(e) => Taro.showToast({ title: '返回' })} > - {isRnAndHarmony ? null : ( - { - setTab2value(paneKey) - }} - > - Tab 1 - Tab 2 - Tab 3 - - )} + { + setTab2value(paneKey) + }} + > + Tab1 + Tab2 + diff --git a/src/packages/navbar/doc.en-US.md b/src/packages/navbar/doc.en-US.md index 9b63ed45ee..56c4aa2f15 100644 --- a/src/packages/navbar/doc.en-US.md +++ b/src/packages/navbar/doc.en-US.md @@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react' | right | Right side content | `ReactNode` | `-` | | left | The left content, rendered to the right of the return area | `ReactNode` | `-` | | back | Returns the text of the area | `ReactNode` | `-` | -| titleAlign | Title align, optional value center、left | `string` | `center` | +| title | Title | `ReactNode` | `-` | | fixed | Is it fixed | `boolean` | `false` | | safeAreaInsetTop | Whether it is suitable for the safe area | `boolean` | `false` | | placeholder | When fixed to the top, whether to generate a placeholder element of equal height at the label position | `boolean` | `false` | diff --git a/src/packages/navbar/doc.md b/src/packages/navbar/doc.md index 6eee70e428..971ae1aa16 100644 --- a/src/packages/navbar/doc.md +++ b/src/packages/navbar/doc.md @@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react' | right | 右侧内容 | `ReactNode` | `-` | | left | 左侧内容，渲染在返回区域的右侧 | `ReactNode` | `-` | | back | 返回区域的文字 | `ReactNode` | `-` | -| titleAlign | 标题位置,可选值center left | `string` | `center` | +| title | 标题 | `ReactNode` | `-` | | fixed | 是否固定 | `boolean` | `false` | | safeAreaInsetTop | 是否适配安全区 | `boolean` | `false` | | placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | `boolean` | `false` | diff --git a/src/packages/navbar/doc.taro.md b/src/packages/navbar/doc.taro.md index 368a2ec14d..d0595763c8 100644 --- a/src/packages/navbar/doc.taro.md +++ b/src/packages/navbar/doc.taro.md @@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react-taro' | right | 右侧内容 | `ReactNode` | `-` | | left | 左侧内容，渲染在返回区域的右侧 | `ReactNode` | `-` | | back | 返回区域的文字 | `ReactNode` | `-` | -| titleAlign | 标题位置,可选值center left | `string` | `center` | +| title | 标题 | `ReactNode` | `-` | | fixed | 是否固定 | `boolean` | `false` | | safeAreaInsetTop | 是否适配安全区 | `boolean` | `false` | | placeholder | 固定在顶部时，是否在标签位置生成一个等高的占位元素 | `boolean` | `false` | diff --git a/src/packages/navbar/doc.zh-TW.md b/src/packages/navbar/doc.zh-TW.md index 80759f3722..1e9108499c 100644 --- a/src/packages/navbar/doc.zh-TW.md +++ b/src/packages/navbar/doc.zh-TW.md @@ -43,7 +43,7 @@ import { NavBar } from '@nutui/nutui-react' | right | 右側內容 | `ReactNode` | `-` | | left | 左側內容，渲染在返回區域的右側 | `ReactNode` | `-` | | back | 返回區域的文字 | `ReactNode` | `-` | -| titleAlign | 標題位置,可選值center left | `string` | `center` | +| title | 標題 | `ReactNode` | `-` | | fixed | 是否固定 | `boolean` | `false` | | safeAreaInsetTop | 是否適配安全區 | `boolean` | `false` | | placeholder | 固定在頂部時，是否在標簽位置生成一個等高的佔位元素 | `boolean` | `false` | diff --git a/src/packages/navbar/navbar.scss b/src/packages/navbar/navbar.scss index 55195ae53b..1bb48f8a19 100644 --- a/src/packages/navbar/navbar.scss +++ b/src/packages/navbar/navbar.scss @@ -3,16 +3,14 @@ position: relative; display: flex; flex-direction: row; - justify-content: center; + justify-content: space-between; align-items: center; height: $navbar-height; box-sizing: border-box; - background: $navbar-background; - box-shadow: $navbar-box-shadow; font-size: $navbar-font-size; color: $navbar-color; - margin-bottom: $navbar-margin-bottom; overflow: hidden; + padding: 0 16px; &-fixed { position: fixed; @@ -32,27 +30,24 @@ padding-top: env(safe-area-inset-top); } - &-align-left { - padding-left: 14px; + &-title-wrapper { + justify-content: space-between; } &-title { - width: 50%; height: 100%; text-align: center; display: flex; + flex: 1; flex-direction: row; align-items: center; - justify-content: center; font-size: $navbar-title-font-size; font-weight: $navbar-title-font-weight; color: $navbar-title-font-color; - &-align-left { - min-width: 0; - flex: 1; - justify-content: flex-start; - padding: 0 8px; - text-align: left; + + &-center { + max-width: 129px; + justify-content: center; } } @@ -62,15 +57,12 @@ &-left, &-right { - position: absolute; - top: 0; - bottom: 0; display: flex; align-items: center; flex-direction: row; + max-width: 124px; height: 100%; cursor: pointer; - padding: 0 14px; /* #ifndef rn harmony jd h5 weapp*/ .nut-icon, .nutui-iconfont { @@ -78,18 +70,21 @@ height: 20px; font-size: 20px; } + /* #endif */ + &-maxwidth { + box-sizing: border-box; + width: calc(124px - 16px); + } } &-left { - left: 0; + padding-right: 16px; + gap: 16px; + &-rtl { - left: auto; - right: 0; - } - &-align-left { - position: static; - padding: 0; + padding-right: 0; + padding-left: 16px; } &-back { @@ -97,29 +92,26 @@ flex-direction: row; align-items: center; justify-content: center; - &-children { - margin-right: 10px; - &-rtl { - margin-right: 0; - margin-left: 10px; - } - } + gap: 16px; + } + + &-hidden { + padding-left: 0; + padding-right: 0; } } &-right { - right: 0; + padding-left: 16px; + justify-content: flex-end; + gap: 16px; + &-rtl { - right: auto; - left: 0; - } - &-align-left { - position: static; - display: inline-flex; - white-space: nowrap; + padding-right: 16px; padding-left: 0; } } + &-rtl { .nut-icon-ArrowLeft { transform: rotateY(180deg); diff --git a/src/packages/navbar/navbar.taro.tsx b/src/packages/navbar/navbar.taro.tsx index ca5952b90a..8d2988a712 100644 --- a/src/packages/navbar/navbar.taro.tsx +++ b/src/packages/navbar/navbar.taro.tsx @@ -1,18 +1,15 @@ -import React, { FunctionComponent, useEffect, useRef, useState } from 'react' +import React, { FunctionComponent } from 'react' import classNames from 'classnames' import { ITouchEvent, View } from '@tarojs/components' import { useRtl } from '@/packages/configprovider/index.taro' import { BasicComponent, ComponentDefaults } from '@/utils/typings' -import { getRectByTaro } from '@/utils/get-rect-by-taro' -import { harmonyAndRn } from '@/utils/platform-taro' -import pxTransform from '@/utils/px-transform' -import { SafeArea } from '@/packages/safearea/safearea.taro' +import SafeArea from '@/packages/safearea/index.taro' export interface NavBarProps extends BasicComponent { left: React.ReactNode back: React.ReactNode right: React.ReactNode - titleAlign: 'center' | 'left' + title: React.ReactNode fixed: boolean safeAreaInsetTop: boolean placeholder: boolean @@ -25,7 +22,6 @@ const defaultProps = { ...ComponentDefaults, left: '', right: '', - titleAlign: 'center', back: '', fixed: false, safeAreaInsetTop: false, @@ -36,7 +32,7 @@ export const NavBar: FunctionComponent> = (props) => { const { right, left, - titleAlign, + title, className, style, back, @@ -65,64 +61,20 @@ export const NavBar: FunctionComponent> = (props) => { } } - const leftRef = useRef(null) - const rightRef = useRef(null) - const wrapperRef = useRef(null) - const [contentWidth, setContentWidth] = useState('50%') - - const getNodeWidth = async (node: Element | null) => { - if (node) { - const refe = await getRectByTaro(node) - return refe.width - } - return 0 - } - - useEffect(() => { - if (titleAlign === 'left') { - return - } - if (!(back || left || right)) { - setContentWidth('100%') - } - - const init = async () => { - const leftRectWidth = await getNodeWidth(leftRef?.current) - const rightRectWidth = await getNodeWidth(rightRef?.current) - const wrapperWidth = await getNodeWidth(wrapperRef?.current) - let centerWidth = wrapperWidth / 2 - - if (leftRectWidth && rightRectWidth) { - centerWidth = - wrapperWidth - - (leftRectWidth > rightRectWidth - ? leftRectWidth * 2 - : rightRectWidth * 2) - } else { - centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2 - } - setContentWidth(centerWidth.toFixed(2)) - } - setTimeout(() => { - init() - }, 0) - }, [left, right, back]) - const renderLeft = () => { - return back || left ? ( + return ( - {back && ( + {back ? ( > = (props) => { > {back} - )} + ) : null} {left} - ) : null + ) } const renderContent = () => { - let titleStyle = {} - if (titleAlign === 'center') { - const width = harmonyAndRn() - ? pxTransform(Number(contentWidth)) - : `${contentWidth}px` - const contentRealWidth = /%$/i.test(contentWidth) ? contentWidth : width - titleStyle = { - width: contentRealWidth, - } - } - return ( - {children} + {title || children} ) } @@ -166,10 +106,9 @@ export const NavBar: FunctionComponent> = (props) => { {right} @@ -178,7 +117,7 @@ export const NavBar: FunctionComponent> = (props) => { const renderWrapper = () => { return ( - + {renderLeft()} {renderContent()} {renderRight()} @@ -189,11 +128,12 @@ export const NavBar: FunctionComponent> = (props) => { const classes = classNames({ [`${classPrefix}-fixed`]: fixed, [`${classPrefix}-safe-area-inset-top`]: safeAreaInsetTop, - [`${classPrefix}-align-${titleAlign}`]: true, [`${classPrefix}-rtl`]: rtl, }) - const cls = classNames(classPrefix, classes, className) + const cls = classNames(classPrefix, classes, className, { + [`${classPrefix}-title-wrapper`]: title, + }) return ( <> diff --git a/src/packages/navbar/navbar.tsx b/src/packages/navbar/navbar.tsx index 962b0a1aa5..86430db137 100644 --- a/src/packages/navbar/navbar.tsx +++ b/src/packages/navbar/navbar.tsx @@ -1,15 +1,14 @@ -import React, { FunctionComponent, useEffect, useRef, useState } from 'react' +import React, { FunctionComponent } from 'react' import classNames from 'classnames' import { useRtl } from '@/packages/configprovider/index' import { BasicComponent, ComponentDefaults } from '@/utils/typings' -import { getRect } from '@/utils/use-client-rect' -import { SafeArea } from '@/packages/safearea/safearea' +import SafeArea from '@/packages/safearea' export interface NavBarProps extends BasicComponent { left: React.ReactNode back: React.ReactNode right: React.ReactNode - titleAlign: 'center' | 'left' + title: React.ReactNode fixed: boolean safeAreaInsetTop: boolean placeholder: boolean @@ -22,7 +21,6 @@ const defaultProps = { ...ComponentDefaults, left: '', right: '', - titleAlign: 'center', back: '', fixed: false, safeAreaInsetTop: false, @@ -33,7 +31,7 @@ export const NavBar: FunctionComponent> = (props) => { const { right, left, - titleAlign, + title, className, style, back, @@ -62,60 +60,20 @@ export const NavBar: FunctionComponent> = (props) => { } } - const leftRef = useRef(null) - const rightRef = useRef(null) - const wrapperRef = useRef(null) - const [contentWidth, setContentWidth] = useState('50%') - - const getNodeWidth = (node: Element | null) => { - if (node) { - const ele = getRect(node) - return ele.width - } - return 0 - } - - useEffect(() => { - if (titleAlign === 'left') { - return - } - if (!(back || left || right)) { - setContentWidth('100%') - return - } - const leftRectWidth = getNodeWidth(leftRef?.current) - const rightRectWidth = getNodeWidth(rightRef?.current) - const wrapperWidth = getNodeWidth(wrapperRef?.current) - - let centerWidth = wrapperWidth / 2 - if (leftRectWidth && rightRectWidth) { - centerWidth = - wrapperWidth - - (leftRectWidth > rightRectWidth - ? leftRectWidth * 2 - : rightRectWidth * 2) - } else { - centerWidth = wrapperWidth - leftRectWidth * 2 - rightRectWidth * 2 - } - - setContentWidth(centerWidth.toFixed(2)) - }, [left, right, back]) - const renderLeft = () => { - return back || left ? ( + return (
- {back && ( + {back ? (
> = (props) => { > {back}
- )} + ) : null} {left}
- ) : null + ) } const renderContent = () => { - let titleStyle = {} - if (titleAlign === 'center') { - const contentRealWidth = `${contentWidth}${ - /%$/i.test(contentWidth) ? '' : 'px' - }` - titleStyle = { - minWidth: contentRealWidth, - width: contentRealWidth, - } - } - return (
- {children} + {title || children}
) } @@ -159,10 +105,9 @@ export const NavBar: FunctionComponent> = (props) => {
{right}
@@ -171,7 +116,7 @@ export const NavBar: FunctionComponent> = (props) => { const renderWrapper = () => { return ( -
+
{renderLeft()} {renderContent()} {renderRight()} @@ -182,11 +127,12 @@ export const NavBar: FunctionComponent> = (props) => { const classes = classNames({ [`${classPrefix}-fixed`]: fixed, [`${classPrefix}-safe-area-inset-top`]: safeAreaInsetTop, - [`${classPrefix}-align-${titleAlign}`]: true, [`${classPrefix}-rtl`]: rtl, }) - const cls = classNames(classPrefix, classes, className) + const cls = classNames(classPrefix, classes, className, { + [`${classPrefix}-title-wrapper`]: title, + }) return ( <> diff --git a/src/packages/overlay/overlay.scss b/src/packages/overlay/overlay.scss index 6f4094dea2..8a53fb36f8 100644 --- a/src/packages/overlay/overlay.scss +++ b/src/packages/overlay/overlay.scss @@ -15,12 +15,6 @@ z-index: $overlay-zIndex; } -[dir='rtl'] .nut-overlay, -.nut-rtl .nut-overlay { - left: auto; - right: 0; -} - .nut-overflow-hidden { overflow: hidden !important; } @@ -67,3 +61,9 @@ animation-duration: $overlay-animation-duration; } } + +[dir='rtl'] .nut-overlay, +.nut-rtl .nut-overlay { + left: auto; + right: 0; +} diff --git a/src/packages/popup/__tests__/popup.spec.tsx b/src/packages/popup/__tests__/popup.spec.tsx index d38de739ef..9f60141578 100644 --- a/src/packages/popup/__tests__/popup.spec.tsx +++ b/src/packages/popup/__tests__/popup.spec.tsx @@ -69,6 +69,28 @@ test('pop from right', () => { expect(pop).toBeTruthy() }) +test('pop title', () => { + const { container } = render() + const title = container.querySelector('.nut-popup-title-title') as HTMLElement + expect(title).toHaveTextContent('标题') +}) + +test('pop left', () => { + const { container } = render() + const title = container.querySelector('.nut-popup-title-left') as HTMLElement + expect(title).toHaveTextContent('返回') +}) + +test('pop description', () => { + const { container } = render( + + ) + const title = container.querySelector( + '.nut-popup-title-description' + ) as HTMLElement + expect(title).toHaveTextContent('副标题') +}) + test('should render close icon when using closeable prop', () => { const { container } = render() const closeIcon = container.querySelector( @@ -84,7 +106,7 @@ test('should have "nut-popup-round" class when setting the round prop', () => { }) test('should allow to using portal prop', () => { - render() + render() expect(document.body.querySelector('.nut-popup')).toBeTruthy() }) @@ -117,7 +139,6 @@ test('event click-title-right icon and keep overlay test ', () => { const closeIcon = container.querySelector( '.nut-popup-title-right' ) as HTMLElement - const overlay = container.querySelector('.nut-overlay') as Element fireEvent.click(closeIcon) expect(onCloseIconClick).toBeCalled() const overlay2 = container.querySelector('.hidden-render') as Element @@ -140,3 +161,13 @@ test('event click-overlay test', async () => { fireEvent.click(overlay) expect(onOverlayClick).toBeCalled() }) + +test('pop destroyOnClose', () => { + const onClose = vi.fn() + const { container } = render( + + ) + const overlay = container.querySelector('.nut-overlay') as Element + fireEvent.click(overlay) + expect(onClose).toBeCalled() +}) diff --git a/src/packages/popup/demo.taro.tsx b/src/packages/popup/demo.taro.tsx index 2286295589..d4513043c3 100644 --- a/src/packages/popup/demo.taro.tsx +++ b/src/packages/popup/demo.taro.tsx @@ -77,9 +77,7 @@ const PopupDemo = () => { return ( <>
- + {translated.ce5c5446} diff --git a/src/packages/popup/demos/h5/demo1.tsx b/src/packages/popup/demos/h5/demo1.tsx index 7a3a22fc6a..c39f71b785 100644 --- a/src/packages/popup/demos/h5/demo1.tsx +++ b/src/packages/popup/demos/h5/demo1.tsx @@ -1,25 +1,28 @@ import React, { useState } from 'react' import { Popup, Cell } from '@nutui/nutui-react' -const Demo1 = () => { - const [showBasic, setShowBasic] = useState(false) +const Demo = () => { + const [showIcon, setShowIcon] = useState(false) + return ( <> { - setShowBasic(true) + setShowIcon(true) }} /> { - setShowBasic(false) + setShowIcon(false) }} /> ) } -export default Demo1 +export default Demo diff --git a/src/packages/popup/demos/h5/demo2.tsx b/src/packages/popup/demos/h5/demo2.tsx index 5dc8ffa45a..4718b46b68 100644 --- a/src/packages/popup/demos/h5/demo2.tsx +++ b/src/packages/popup/demos/h5/demo2.tsx @@ -6,6 +6,7 @@ const Demo2 = () => { const [showBottom, setShowBottom] = useState(false) const [showLeft, setShowLeft] = useState(false) const [showRight, setShowRight] = useState(false) + const [showText, setShowText] = useState(false) return ( <> @@ -33,6 +34,12 @@ const Demo2 = () => { setShowRight(true) }} /> + { + setShowText(true) + }} + /> { /> { setShowLeft(false) @@ -58,12 +64,26 @@ const Demo2 = () => { /> { setShowRight(false) }} /> + { + setShowText(false) + }} + > +
+ {Array.from({ length: 10 }) + .fill('') + .map((_, i) => ( + 正文 + ))} +
+ ) } diff --git a/src/packages/popup/demos/taro/demo1.tsx b/src/packages/popup/demos/taro/demo1.tsx index 4b714a588c..990a6ca016 100644 --- a/src/packages/popup/demos/taro/demo1.tsx +++ b/src/packages/popup/demos/taro/demo1.tsx @@ -1,35 +1,28 @@ import React, { useState } from 'react' import { Popup, Cell } from '@nutui/nutui-react-taro' -import { ScrollView, Text } from '@tarojs/components' -const Demo1 = () => { - const [showBasic, setShowBasic] = useState(false) +const Demo = () => { + const [showIcon, setShowIcon] = useState(false) + return ( <> { - setShowBasic(true) + setShowIcon(true) }} /> { - setShowBasic(false) + setShowIcon(false) }} - > - - {Array.from({ length: 1 }) - .fill('') - .map((_, i) => ( - - 正文 - - ))} - - + /> ) } -export default Demo1 +export default Demo diff --git a/src/packages/popup/demos/taro/demo2.tsx b/src/packages/popup/demos/taro/demo2.tsx index 4ac4e69b86..6a5809282a 100644 --- a/src/packages/popup/demos/taro/demo2.tsx +++ b/src/packages/popup/demos/taro/demo2.tsx @@ -1,12 +1,13 @@ import React, { useState } from 'react' import { Popup, Cell } from '@nutui/nutui-react-taro' -import { ScrollView, View } from '@tarojs/components' +import { ScrollView, Text } from '@tarojs/components' const Demo2 = () => { const [showTop, setShowTop] = useState(false) const [showBottom, setShowBottom] = useState(false) const [showLeft, setShowLeft] = useState(false) const [showRight, setShowRight] = useState(false) + const [showText, setShowText] = useState(false) return ( <> @@ -34,6 +35,12 @@ const Demo2 = () => { setShowRight(true) }} /> + { + setShowText(true) + }} + /> { { setShowBottom(false) }} lockScroll - > - - {Array.from({ length: 200 }) - .fill('') - .map((_, i) => ( - - 底部弹出-{i} - - ))} - - + /> { setShowLeft(false) @@ -70,12 +69,28 @@ const Demo2 = () => { /> { setShowRight(false) }} /> + { + setShowText(false) + }} + > + + {Array.from({ length: 10 }) + .fill('') + .map((_, i) => ( + + 正文 + + ))} + + ) } diff --git a/src/packages/popup/demos/taro/demo8.tsx b/src/packages/popup/demos/taro/demo8.tsx index 38d6895dcb..c88e32c2fe 100644 --- a/src/packages/popup/demos/taro/demo8.tsx +++ b/src/packages/popup/demos/taro/demo8.tsx @@ -13,8 +13,13 @@ const Demo8 = () => { setScrollPenetration(true) }} /> - - + + {Array.from({ length: 200 }) .fill('') .map((_, i) => ( diff --git a/src/packages/popup/popup.scss b/src/packages/popup/popup.scss index a8dfa63ed5..b0d80ee228 100644 --- a/src/packages/popup/popup.scss +++ b/src/packages/popup/popup.scss @@ -1,17 +1,10 @@ @import '../overlay/overlay.scss'; .nut-popup { - /* #ifdef rn */ - position: absolute; - /* #endif */ - /* #ifndef rn */ position: fixed; - /* #endif */ - min-height: 26%; + min-height: 46%; max-height: 100%; - overflow-y: auto; background-color: $overlay-content-bg-color; - color: $color-title; -webkit-overflow-scrolling: touch; font-size: $font-size-base; @@ -24,38 +17,45 @@ padding: $popup-title-padding; position: relative; - &-left { - position: absolute; - left: $popup-title-padding; - } - - &-title { + &-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; + } + + &-title { + color: $color-title; font-weight: $font-weight-bold; font-size: $popup-title-font-size; + line-height: $popup-title-font-size; } &-description { - color: $color-text-help; + color: $color-text; font-size: $popup-description-font-size; font-weight: $font-weight; + &-gap { + margin-top: $popup-description-spacing; + } + } + + &-left { + position: absolute; + top: $popup-title-padding; + left: $popup-title-padding; } &-right { position: absolute; + top: $popup-title-padding; + right: $popup-title-padding; + z-index: 1; - cursor: pointer; width: $popup-icon-size; height: $popup-icon-size; - display: flex; - justify-content: center; - align-items: center; - top: $popup-title-padding; - right: $popup-title-padding; - color: $color-text-help; + color: $color-title; + cursor: pointer; &:active { opacity: 0.7; @@ -82,9 +82,8 @@ top: 50%; left: 50%; min-height: 10%; - /* #ifndef rn */ + max-width: 295px; transform: translate(-50%, -50%); - /* #endif */ &.nut-popup-round { border-radius: $popup-border-radius; @@ -93,7 +92,7 @@ &-bottom, &-top { - max-height: 83%; + max-height: 87%; } &-bottom { @@ -109,10 +108,8 @@ &-right { top: 0; right: 0; - /* #ifdef rn */ width: 100px; height: 100%; - /* #endif */ &.nut-popup-round { border-radius: $popup-border-radius 0 0 $popup-border-radius; @@ -122,10 +119,8 @@ &-left { top: 0; left: 0; - /* #ifdef rn */ width: 100px; height: 100%; - /* #endif */ &.nut-popup-round { border-radius: 0 $popup-border-radius $popup-border-radius 0; @@ -136,9 +131,6 @@ top: 0; left: 0; width: 100%; - /* #ifdef rn */ - height: 100px; - /* #endif */ &.nut-popup-round { border-radius: 0 0 $popup-border-radius $popup-border-radius; @@ -217,25 +209,19 @@ /* 从顶部滑出 */ @keyframes popup-slide-top-enter { from { - /* #ifndef rn */ transform: translate3d(0, -100%, 0); - /* #endif */ } } @keyframes popup-slide-top-exit { to { - /* #ifndef rn */ transform: translate3d(0, -100%, 0); - /* #endif */ } } &-top-enter-active, &-top-appear-active { - /* #ifndef rn */ transform: translate3d(0, 0%, 0); - /* #endif*/ animation-fill-mode: both; animation-name: popup-slide-top-enter; animation-duration: $popup-animation-duration; @@ -250,25 +236,19 @@ /* 从右侧滑出 */ @keyframes popup-slide-right-enter { from { - /* #ifndef rn */ transform: translate3d(100%, 0, 0); - /* #endif*/ } } @keyframes popup-slide-right-exit { to { - /* #ifndef rn */ transform: translate3d(100%, 0, 0); - /* #endif*/ } } &-right-enter-active, &-right-appear-active { - /* #ifndef rn */ transform: translate3d(0, 0, 0); - /* #endif*/ animation-fill-mode: both; animation-name: popup-slide-right-enter; animation-duration: $popup-animation-duration; @@ -283,25 +263,19 @@ /* 从底部滑出 */ @keyframes popup-slide-bottom-enter { from { - /* #ifndef rn */ transform: translate3d(0, 100%, 0); - /* #endif */ } } @keyframes slide-bottom-exit { to { - /* #ifndef rn */ transform: translate3d(0, 100%, 0); - /* #endif */ } } &-bottom-enter-active, &-bottom-appear-active { - /* #ifndef rn */ transform: translate(0, 0); - /* #endif */ animation-fill-mode: both; animation-name: popup-slide-bottom-enter; animation-duration: $popup-animation-duration; @@ -316,17 +290,13 @@ /* 从左侧滑出 */ @keyframes popup-slide-left-enter { from { - /* #ifndef rn */ transform: translate3d(-100%, 0, 0); - /* #endif */ } } @keyframes popup-slide-left-exit { to { - /* #ifndef rn */ transform: translate3d(-100%, 0, 0); - /* #endif */ } } @@ -398,9 +368,7 @@ &-center { left: auto; right: 50%; - /* #ifndef rn */ transform: translate(50%, -50%); - /* #endif*/ } &-bottom { diff --git a/src/packages/popup/popup.taro.tsx b/src/packages/popup/popup.taro.tsx index 07c5d61af9..836e947974 100644 --- a/src/packages/popup/popup.taro.tsx +++ b/src/packages/popup/popup.taro.tsx @@ -188,18 +188,16 @@ export const Popup: FunctionComponent< afterClose && afterClose() } - const resolveContainer = (getContainer: Teleport | undefined) => { - const container = - typeof getContainer === 'function' ? getContainer() : getContainer - return container || document.body - } - - const renderToContainer = (getContainer: Teleport, node: ReactElement) => { - if (getContainer) { - const container = resolveContainer(getContainer) - return createPortal(node, container) as ReactPortal - } - return node + const renderCloseIcon = () => { + return ( + <> + {closeable && ( + + {React.isValidElement(closeIcon) ? closeIcon : } + + )} + + ) } const renderTitle = () => { @@ -212,10 +210,16 @@ export const Popup: FunctionComponent< {left} )} {(title || description) && ( - - {title} + + {title && ( + + {title} + + )} {description && ( - + {description} )} @@ -223,24 +227,12 @@ export const Popup: FunctionComponent< )} )} - {closeable && ( - - {React.isValidElement(closeIcon) ? closeIcon : } - - )} + {renderCloseIcon()} ) } if (closeable) { - return ( - <> - {closeable && ( - - {React.isValidElement(closeIcon) ? closeIcon : } - - )} - - ) + return renderCloseIcon() } } const renderPop = () => { @@ -283,20 +275,33 @@ export const Popup: FunctionComponent< onClick={onHandleClickOverlay} /> ) : null} - <>{renderPop()} + {renderPop()} ) } useEffect(() => { - visible && open() - !visible && close() + visible ? open() : close() }, [visible]) useEffect(() => { setTransitionName(transition || `${classPrefix}-slide-${position}`) }, [position, transition]) + const resolveContainer = (getContainer: Teleport | undefined) => { + const container = + typeof getContainer === 'function' ? getContainer() : getContainer + return container || document.body + } + + const renderToContainer = (getContainer: Teleport, node: ReactElement) => { + if (getContainer) { + const container = resolveContainer(getContainer) + return createPortal(node, container) as ReactPortal + } + return node + } + return <>{renderToContainer(portal as Teleport, renderNode())} } diff --git a/src/packages/popup/popup.tsx b/src/packages/popup/popup.tsx index ca1abc71f4..06723bb723 100644 --- a/src/packages/popup/popup.tsx +++ b/src/packages/popup/popup.tsx @@ -191,18 +191,16 @@ export const Popup: FunctionComponent< afterClose && afterClose() } - const resolveContainer = (getContainer: Teleport | undefined) => { - const container = - typeof getContainer === 'function' ? getContainer() : getContainer - return container || document.body - } - - const renderToContainer = (getContainer: Teleport, node: ReactElement) => { - if (getContainer) { - const container = resolveContainer(getContainer) - return createPortal(node, container) as ReactPortal - } - return node + const renderCloseIcon = () => { + return ( + <> + {closeable && ( +
+ {React.isValidElement(closeIcon) ? closeIcon : } +
+ )} + + ) } const renderTitle = () => { @@ -215,10 +213,14 @@ export const Popup: FunctionComponent<
{left}
)} {(title || description) && ( -
- {title} +
+ {title && ( +
{title}
+ )} {description && ( -
+
{description}
)} @@ -226,24 +228,12 @@ export const Popup: FunctionComponent< )} )} - {closeable && ( -
- {React.isValidElement(closeIcon) ? closeIcon : } -
- )} + {renderCloseIcon()}
) } if (closeable) { - return ( - <> - {closeable && ( -
- {React.isValidElement(closeIcon) ? closeIcon : } -
- )} - - ) + return renderCloseIcon() } } const renderPop = () => { @@ -285,20 +275,33 @@ export const Popup: FunctionComponent< onClick={onHandleClickOverlay} /> ) : null} - <>{renderPop()} + {renderPop()} ) } useEffect(() => { - visible && open() - !visible && close() + visible ? open() : close() }, [visible]) useEffect(() => { setTransitionName(transition || `${classPrefix}-slide-${position}`) }, [position, transition]) + const resolveContainer = (getContainer: Teleport | undefined) => { + const container = + typeof getContainer === 'function' ? getContainer() : getContainer + return container || document.body + } + + const renderToContainer = (getContainer: Teleport, node: ReactElement) => { + if (getContainer) { + const container = resolveContainer(getContainer) + return createPortal(node, container) as ReactPortal + } + return node + } + return <>{renderToContainer(portal as Teleport, renderNode())} } diff --git a/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap b/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap index 7b7e51561f..05f4ca4e8f 100644 --- a/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap +++ b/src/packages/price/__test__/__snapshots__/price.spec.tsx.snap @@ -3,25 +3,25 @@ exports[`props digits test 1`] = `
¥
15213
.
122
@@ -32,25 +32,25 @@ exports[`props digits test 1`] = ` exports[`props symbol test 1`] = `
$
10010
.
00
@@ -61,20 +61,68 @@ exports[`props symbol test 1`] = ` exports[`props test 1`] = `
1,010
.
+ 00 +
+
+
+`; + +exports[`props test 2`] = ` +
+
+
+ 1,010 +
+
+ . +
+
+ 00 +
+
+
+`; + +exports[`props test 3`] = ` +
+
+
+ 1,010 +
+
+ . +
+
00
@@ -85,28 +133,52 @@ exports[`props test 1`] = ` exports[`props thousands test 1`] = `
$
10010
.
01
`; + +exports[`props type 1`] = ` +
+
+
+ 1,010 +
+
+ . +
+
+ 00 +
+
+
+`; diff --git a/src/packages/price/__test__/price.spec.tsx b/src/packages/price/__test__/price.spec.tsx index 9b16a75cc8..2eaed3259a 100644 --- a/src/packages/price/__test__/price.spec.tsx +++ b/src/packages/price/__test__/price.spec.tsx @@ -39,3 +39,15 @@ test('props digits test', () => { ) expect(container).toMatchSnapshot() }) + +test('props size', () => { + const { container } = render() + expect(container.querySelector('.nut-price-integer')).toHaveClass( + 'nut-price-integer-large' + ) +}) + +test('props color', () => { + const { container } = render() + expect(container.querySelector('.nut-price')).toHaveClass('nut-price-primary') +}) diff --git a/src/packages/price/demo.taro.tsx b/src/packages/price/demo.taro.tsx index 6a3eec9f03..e3e92ebfcd 100644 --- a/src/packages/price/demo.taro.tsx +++ b/src/packages/price/demo.taro.tsx @@ -11,11 +11,12 @@ import Demo5 from './demos/taro/demo5' import Demo6 from './demos/taro/demo6' import Demo7 from './demos/taro/demo7' import Demo8 from './demos/taro/demo8' +import Demo9 from './demos/taro/demo9' const PriceDemo = () => { const [translated] = useTranslate({ 'zh-CN': { - title1: '支持三种尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小数', title3: '有人民币符号，无千位分隔', title4: '有人民币符号，有千位分隔，保留小数点后三位', @@ -23,9 +24,10 @@ const PriceDemo = () => { title6: '异步随机变更', title7: '不展示 symbol 符号', title8: '划线价', + title9: '场域分类：原子级、模块级、列表级、页面级', }, 'zh-TW': { - title1: '支持三種尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小數', title3: '有人民幣符號，無千位分隔', title4: '有人民幣符號，有千位分隔，保留小數點後三位', @@ -33,9 +35,10 @@ const PriceDemo = () => { title6: '異步隨機變更', title7: '不展示 symbol 符號', title8: '劃線價', + title9: '場域分類：原子級、模塊級、列表級、頁面級', }, 'en-US': { - title1: 'Support three sizes：small、normal、large', + title1: 'Support sizes：small、normal、large、xlarge', title2: 'No decimals', title3: 'With RMB symbol, no thousands separator', title4: @@ -44,6 +47,7 @@ const PriceDemo = () => { title6: 'Asynchronous random changes', title7: 'Do not display symbol', title8: 'Line-through price', + title9: 'Field classification: atomic, module, list, page', }, }) return ( @@ -52,6 +56,8 @@ const PriceDemo = () => { {translated.title1} + {translated.title9} + {translated.title2} {translated.title3} diff --git a/src/packages/price/demo.tsx b/src/packages/price/demo.tsx index 28db3583b3..4b4f672e29 100644 --- a/src/packages/price/demo.tsx +++ b/src/packages/price/demo.tsx @@ -8,11 +8,12 @@ import Demo5 from './demos/h5/demo5' import Demo6 from './demos/h5/demo6' import Demo7 from './demos/h5/demo7' import Demo8 from './demos/h5/demo8' +import Demo9 from './demos/h5/demo9' const PriceDemo = () => { const [translated] = useTranslate({ 'zh-CN': { - title1: '支持三种尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小数', title3: '有人民币符号，无千位分隔', title4: '有人民币符号，有千位分隔，保留小数点后三位', @@ -20,9 +21,10 @@ const PriceDemo = () => { title6: '异步随机变更', title7: '不展示 symbol 符号', title8: '划线价', + title9: '场域分类：原子级、模块级、列表级、页面级', }, 'zh-TW': { - title1: '支持三種尺寸：small、normal、large', + title1: '支持尺寸：small、normal、large、xlarge', title2: '不保留小數', title3: '有人民幣符號，無千位分隔', title4: '有人民幣符號，有千位分隔，保留小數點後三位', @@ -30,9 +32,10 @@ const PriceDemo = () => { title6: '異步隨機變更', title7: '不展示 symbol 符號', title8: '劃線價', + title9: '場域分類：原子級、模塊級、列表級、頁面級', }, 'en-US': { - title1: 'Support three sizes：small、normal、large', + title1: 'Support sizes：small、normal、large、xlarge', title2: 'No decimals', title3: 'With RMB symbol, no thousands separator', title4: @@ -41,6 +44,7 @@ const PriceDemo = () => { title6: 'Asynchronous random changes', title7: 'Do not display symbol', title8: 'Line-through price', + title9: 'Field classification: atomic, module, list, page', }, }) @@ -48,6 +52,8 @@ const PriceDemo = () => {

{translated.title1}

+

{translated.title9}

+

{translated.title2}

{translated.title3}

diff --git a/src/packages/price/demos/h5/demo1.tsx b/src/packages/price/demos/h5/demo1.tsx index c6f8175387..2c1df37ef5 100644 --- a/src/packages/price/demos/h5/demo1.tsx +++ b/src/packages/price/demos/h5/demo1.tsx @@ -1,19 +1,22 @@ import React from 'react' -import { Price, Cell } from '@nutui/nutui-react' +import { Price, Cell, CellGroup } from '@nutui/nutui-react' const Demo1 = () => { return ( - <> + - + - + - + - + + + + ) } export default Demo1 diff --git a/src/packages/price/demos/h5/demo2.tsx b/src/packages/price/demos/h5/demo2.tsx index fa16698314..77782262ee 100644 --- a/src/packages/price/demos/h5/demo2.tsx +++ b/src/packages/price/demos/h5/demo2.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo2 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo3.tsx b/src/packages/price/demos/h5/demo3.tsx index 60b46ccf9f..492739b3ea 100644 --- a/src/packages/price/demos/h5/demo3.tsx +++ b/src/packages/price/demos/h5/demo3.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo3 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo4.tsx b/src/packages/price/demos/h5/demo4.tsx index 34904db1d3..84f6c4c721 100644 --- a/src/packages/price/demos/h5/demo4.tsx +++ b/src/packages/price/demos/h5/demo4.tsx @@ -4,7 +4,7 @@ import { Price, Cell } from '@nutui/nutui-react' const Demo4 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo5.tsx b/src/packages/price/demos/h5/demo5.tsx index efda097104..0e267ca7b6 100644 --- a/src/packages/price/demos/h5/demo5.tsx +++ b/src/packages/price/demos/h5/demo5.tsx @@ -4,13 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo5 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo6.tsx b/src/packages/price/demos/h5/demo6.tsx index 914071c963..bf0e9441be 100644 --- a/src/packages/price/demos/h5/demo6.tsx +++ b/src/packages/price/demos/h5/demo6.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo6 = () => { return ( - + ) } diff --git a/src/packages/price/demos/h5/demo7.tsx b/src/packages/price/demos/h5/demo7.tsx index 8c6bca6e44..3f1bd0c639 100644 --- a/src/packages/price/demos/h5/demo7.tsx +++ b/src/packages/price/demos/h5/demo7.tsx @@ -14,7 +14,7 @@ const Demo7 = () => { }, []) return ( - + ) } diff --git a/src/packages/price/demos/h5/demo8.tsx b/src/packages/price/demos/h5/demo8.tsx index b7f0c82e8d..73b8a33812 100644 --- a/src/packages/price/demos/h5/demo8.tsx +++ b/src/packages/price/demos/h5/demo8.tsx @@ -3,10 +3,10 @@ import { Cell, Price } from '@nutui/nutui-react' const Demo8 = () => { return ( - - + +   - + ) } diff --git a/src/packages/price/demos/h5/demo9.tsx b/src/packages/price/demos/h5/demo9.tsx new file mode 100644 index 0000000000..c2e60a009b --- /dev/null +++ b/src/packages/price/demos/h5/demo9.tsx @@ -0,0 +1,42 @@ +import React from 'react' +import { Cell, CellGroup, Price } from '@nutui/nutui-react' + +const Demo9 = () => { + const colorStyles = { + color: 'var(--nutui-color-primary)', + fontSize: '12px', + lineHeight: 1, + } + const exclusivePriceStyles = { + margin: '0 8px 0 4px', + } + const priceStyles = { + margin: '0 4px 0 2px', + } + + return ( + + + + 专享价 + + + + + 粉丝到手价 + + + + + 秒杀价 + + + + + 专享价 + + + + ) +} +export default Demo9 diff --git a/src/packages/price/demos/taro/demo1.tsx b/src/packages/price/demos/taro/demo1.tsx index 8ad987499a..1ac546bffb 100644 --- a/src/packages/price/demos/taro/demo1.tsx +++ b/src/packages/price/demos/taro/demo1.tsx @@ -1,19 +1,22 @@ import React from 'react' -import { Price, Cell } from '@nutui/nutui-react-taro' +import { Price, Cell, CellGroup } from '@nutui/nutui-react-taro' const Demo1 = () => { return ( - <> + - + - + - + - + + + + ) } export default Demo1 diff --git a/src/packages/price/demos/taro/demo2.tsx b/src/packages/price/demos/taro/demo2.tsx index ad47a89ec3..03fdf3def3 100644 --- a/src/packages/price/demos/taro/demo2.tsx +++ b/src/packages/price/demos/taro/demo2.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo2 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo3.tsx b/src/packages/price/demos/taro/demo3.tsx index 7a60184001..9505f09abe 100644 --- a/src/packages/price/demos/taro/demo3.tsx +++ b/src/packages/price/demos/taro/demo3.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo3 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo4.tsx b/src/packages/price/demos/taro/demo4.tsx index 12bba9ecdf..658567849a 100644 --- a/src/packages/price/demos/taro/demo4.tsx +++ b/src/packages/price/demos/taro/demo4.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo4 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo5.tsx b/src/packages/price/demos/taro/demo5.tsx index 99d7d22d9a..cc23abd5f8 100644 --- a/src/packages/price/demos/taro/demo5.tsx +++ b/src/packages/price/demos/taro/demo5.tsx @@ -4,13 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo5 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo6.tsx b/src/packages/price/demos/taro/demo6.tsx index 00fa1639c6..d1755c9480 100644 --- a/src/packages/price/demos/taro/demo6.tsx +++ b/src/packages/price/demos/taro/demo6.tsx @@ -4,7 +4,7 @@ import { Cell, Price } from '@nutui/nutui-react-taro' const Demo6 = () => { return ( - + ) } diff --git a/src/packages/price/demos/taro/demo7.tsx b/src/packages/price/demos/taro/demo7.tsx index eb423cc18f..99fbf41da6 100644 --- a/src/packages/price/demos/taro/demo7.tsx +++ b/src/packages/price/demos/taro/demo7.tsx @@ -14,7 +14,7 @@ const Demo7 = () => { }, []) return ( - + ) } diff --git a/src/packages/price/demos/taro/demo8.tsx b/src/packages/price/demos/taro/demo8.tsx index 706db12db0..212a776e4c 100644 --- a/src/packages/price/demos/taro/demo8.tsx +++ b/src/packages/price/demos/taro/demo8.tsx @@ -4,10 +4,10 @@ import { Text } from '@tarojs/components' const Demo8 = () => { return ( - - + +   - + ) } diff --git a/src/packages/price/demos/taro/demo9.tsx b/src/packages/price/demos/taro/demo9.tsx new file mode 100644 index 0000000000..cd7b102f31 --- /dev/null +++ b/src/packages/price/demos/taro/demo9.tsx @@ -0,0 +1,46 @@ +import React from 'react' +import { Cell, CellGroup, Price } from '@nutui/nutui-react-taro' +import { Text } from '@tarojs/components' +import { harmony } from '@/utils/platform-taro' + +const Demo9 = () => { + const colorStyles = { + color: harmony() ? '#ff0f23' : 'var(--nutui-color-primary)', + fontSize: 12, + lineHeight: 1, + } + const exclusivePriceStyles = { + marginLeft: 4, + marginRight: 8, + } + const priceStyles = { + marginLeft: 2, + marginRight: 4, + } + + return ( + + + + 专享价 + + + + + 粉丝到手价 + + + + + 秒杀价 + + + + + 专享价 + + + + ) +} +export default Demo9 diff --git a/src/packages/price/doc.en-US.md b/src/packages/price/doc.en-US.md index ce88f8f5f3..6efc166c41 100644 --- a/src/packages/price/doc.en-US.md +++ b/src/packages/price/doc.en-US.md @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react' ## Demo -### Support three sizes：small、normal、large +### Support sizes：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react' ::: +### Field classification: atomic, module, list, page + +:::demo + + + +::: + ### No decimals :::demo @@ -80,12 +88,13 @@ import { Price } from '@nutui/nutui-react' | Property | Description | Type | Default | | --- | --- | --- | --- | +| color | Price type | `primary` \| `gray` \| `darkgray` | `primary` | | price | Price | `number` | `0` | | symbol | Symbol type | `string` | `¥` | | digits | Decimal digits | `number` | `2` | | thousands | Thousands separation | `boolean` | `false` | | position | The symbol appear before or after the price，`before`、`after` | `string` | `before` | -| size | Size，`large`、`normal`、`small` | `string` | `large` | +| size | Size，`xlarge` \| `large` \| `normal` \| `small` | `string` | `large` | | line | Line-through price | `boolean` | `false` | ## Theming @@ -96,15 +105,20 @@ The component provides the following CSS variables, which can be used to customi | Name | Description | Default | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large Size Symbol font size | `18px` | -| \--nutui-price-integer-big-size | large Size Integer partial font size | `24px` | -| \--nutui-price-decimal-big-size | large Size Size of the decimal part of the font | `18px` | -| \--nutui-price-symbol-medium-size | normal Size Symbol font size | `14px` | -| \--nutui-price-integer-medium-size | normal Size Integer partial font size | `16px` | -| \--nutui-price-decimal-medium-size | normal Size Size of the decimal part of the font | `14px` | -| \--nutui-price-symbol-small-size | small Size Symbol font size | `10px` | -| \--nutui-price-integer-small-size | small Size Integer partial font size | `12px` | -| \--nutui-price-decimal-small-size | small Size Size of the decimal part of the font | `10px` | -| \--nutui-price-line-font-size | Line-through price Font size | `10px` | -| \--nutui-price-line-color | Line through price color | `#757575` | -| \--nutui-price-symbol-padding-right | Symbol padding right | `1px` | +| \--nutui-price-primary-color | Text color when type is primary | `#ff0f23` | +| \--nutui-price-color | Text color when type is gray | `#888b94` | +| \--nutui-price-darkgray-color | Text color when type is darkgray | `#1a1a1a` | +| \--nutui-price-line-color | Underline price color | `#888b94` | +| \--nutui-price-symbol-padding-right | Right padding of symbol | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge size symbol font size | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge size integer part font size | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge size decimal part font size | `12px` | +| \--nutui-price-symbol-large-size | large size symbol font size | `12px` | +| \--nutui-price-integer-large-size | large size integer part font size | `18px` | +| \--nutui-price-decimal-large-size | large size decimal part font size | `12px` | +| \--nutui-price-symbol-normal-size | normal size symbol font size | `12px` | +| \--nutui-price-integer-normal-size | normal size integer part font size | `16px` | +| \--nutui-price-decimal-normal-size | normal size decimal part font size | `12px` | +| \--nutui-price-symbol-small-size | small size symbol font size | `12px` | +| \--nutui-price-integer-small-size | small Size integer part font size | `12px` | +| \--nutui-price-decimal-small-size | small Size decimal part font size | `12px` | diff --git a/src/packages/price/doc.md b/src/packages/price/doc.md index 5ba4f1f1b9..f19ad0b34f 100644 --- a/src/packages/price/doc.md +++ b/src/packages/price/doc.md @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react' ## 示例代码 -### 基础用法 small normal large +### 支持尺寸：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react' ::: +### 场域分类：原子级、模块级、列表级、页面级 + +:::demo + + + +::: + ### 不保留小数 :::demo @@ -80,12 +88,13 @@ import { Price } from '@nutui/nutui-react' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | +| color | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | | price | 价格数量 | `number` | `0` | | symbol | 符号类型 | `string` | `¥` | | digits | 小数位位数 | `number` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | -| size | 价格尺寸，`large`、`normal`、`small` | `string` | `large` | +| size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | 是否划线价 | `boolean` | `false` | ## 主题定制 @@ -96,15 +105,20 @@ import { Price } from '@nutui/nutui-react' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large 尺寸符号字体大小 | `18px` | -| \--nutui-price-integer-big-size | large 尺寸整数部分字体大小 | `24px` | -| \--nutui-price-decimal-big-size | large 尺寸小数部分字体大小 | `18px` | -| \--nutui-price-symbol-medium-size | normal 尺寸符号字体大小 | `14px` | -| \--nutui-price-integer-medium-size | normal 尺寸整数部分字体大小 | `16px` | -| \--nutui-price-decimal-medium-size | normal 尺寸小数部分字体大小 | `14px` | -| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `10px` | +| \--nutui-price-primary-color | type为primary时文字颜色 | `#ff0f23` | +| \--nutui-price-color | type为gray时文字颜色 | `#888b94` | +| \--nutui-price-darkgray-color | type为darkgray时文字颜色 | `#1a1a1a` | +| \--nutui-price-line-color | 划线价颜色 | `#888b94` | +| \--nutui-price-symbol-padding-right | 符号的右内边距 | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge 尺寸整数部分字体大小 | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-large-size | large 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-large-size | large 尺寸整数部分字体大小 | `18px` | +| \--nutui-price-decimal-large-size | large 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-normal-size | normal 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-normal-size | normal 尺寸整数部分字体大小 | `16px` | +| \--nutui-price-decimal-normal-size | normal 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `12px` | | \--nutui-price-integer-small-size | small 尺寸整数部分字体大小 | `12px` | -| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `10px` | -| \--nutui-price-line-font-size | 划线价字体大小 | `10px` | -| \--nutui-price-line-color | 划线价颜色 | `#757575` | -| \--nutui-price-symbol-padding-right | 符号的右内边距 | `1px` | +| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `12px` | diff --git a/src/packages/price/doc.taro.md b/src/packages/price/doc.taro.md index c80ccdccef..2ca6dc6736 100644 --- a/src/packages/price/doc.taro.md +++ b/src/packages/price/doc.taro.md @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react-taro' ## 示例代码 -### 基础用法 small normal large +### 支持尺寸：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react-taro' ::: +### 场域分类：原子级、模块级、列表级、页面级 + +:::demo + + + +::: + ### 不保留小数 :::demo @@ -80,12 +88,12 @@ import { Price } from '@nutui/nutui-react-taro' | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| price | 价格数量 | `number` | `0` | +| type | 价格类型 | `primary` \| `gray` \| `darkgray` | `primary` | | symbol | 符号类型 | `string` | `¥` | | digits | 小数位位数 | `number` | `2` | | thousands | 是否按照千分号形式显示 | `boolean` | `false` | | position | 符号显示在价格前或者后，`before`、`after` | `string` | `before` | -| size | 价格尺寸，`large`、`normal`、`small` | `string` | `large` | +| size | 价格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | 是否划线价 | `boolean` | `false` | ## 主题定制 @@ -96,15 +104,20 @@ import { Price } from '@nutui/nutui-react-taro' | 名称 | 说明 | 默认值 | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large 尺寸符号字体大小 | `18px` | -| \--nutui-price-integer-big-size | large 尺寸整数部分字体大小 | `24px` | -| \--nutui-price-decimal-big-size | large 尺寸小数部分字体大小 | `18px` | -| \--nutui-price-symbol-medium-size | normal 尺寸符号字体大小 | `14px` | -| \--nutui-price-integer-medium-size | normal 尺寸整数部分字体大小 | `16px` | -| \--nutui-price-decimal-medium-size | normal 尺寸小数部分字体大小 | `14px` | -| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `10px` | +| \--nutui-price-primary-color | type为primary时文字颜色 | `#ff0f23` | +| \--nutui-price-color | type为gray时文字颜色 | `#888b94` | +| \--nutui-price-darkgray-color | type为darkgray时文字颜色 | `#1a1a1a` | +| \--nutui-price-line-color | 划线价颜色 | `#888b94` | +| \--nutui-price-symbol-padding-right | 符号的右内边距 | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge 尺寸整数部分字体大小 | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-large-size | large 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-large-size | large 尺寸整数部分字体大小 | `18px` | +| \--nutui-price-decimal-large-size | large 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-normal-size | normal 尺寸符号字体大小 | `12px` | +| \--nutui-price-integer-normal-size | normal 尺寸整数部分字体大小 | `16px` | +| \--nutui-price-decimal-normal-size | normal 尺寸小数部分字体大小 | `12px` | +| \--nutui-price-symbol-small-size | small 尺寸符号字体大小 | `12px` | | \--nutui-price-integer-small-size | small 尺寸整数部分字体大小 | `12px` | -| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `10px` | -| \--nutui-price-line-font-size | 划线价字体大小 | `10px` | -| \--nutui-price-line-color | 划线价颜色 | `#757575` | -| \--nutui-price-symbol-padding-right | 符号的右内边距 | `1px` | +| \--nutui-price-decimal-small-size | small 尺寸小数部分字体大小 | `12px` | diff --git a/src/packages/price/doc.zh-TW.md b/src/packages/price/doc.zh-TW.md index a795260050..6d27fe12a8 100644 --- a/src/packages/price/doc.zh-TW.md +++ b/src/packages/price/doc.zh-TW.md @@ -1,6 +1,6 @@ # Price 價格 -用來對商品價格數值的小數點前後部分應用不同樣式，還支持人民幣符號、仟位分隔符、設置小數點位數等功能。 +用來對商品價格數值的小數點前後部分應用不同樣式，還支持人民幣符號、千位分隔符、設置小數點位數等功能。 ## 引入 @@ -10,7 +10,7 @@ import { Price } from '@nutui/nutui-react' ## 示例代碼 -### 基礎用法 small normal large +### 支持尺寸：small、normal、large、xlarge :::demo @@ -18,6 +18,14 @@ import { Price } from '@nutui/nutui-react' ::: +### 場域分類：原子級、模塊級、列表級、頁面級 + +:::demo + + + +::: + ### 不保留小數 :::demo @@ -26,7 +34,7 @@ import { Price } from '@nutui/nutui-react' ::: -### 有人民幣符號，無仟位分隔 +### 有人民幣符號，無千位分隔 :::demo @@ -34,7 +42,7 @@ import { Price } from '@nutui/nutui-react' ::: -### 帶人民幣符號，有仟位分隔，保留小數點後三位 +### 帶人民幣符號，有千位分隔，保留小數點後三位 :::demo @@ -80,15 +88,16 @@ import { Price } from '@nutui/nutui-react' | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | +| color | 價格類型 | `primary` \| `gray` \| `darkgray` | `primary` | | price | 價格數量 | `number` | `0` | | symbol | 符號類型 | `string` | `¥` | | digits | 小數位位數 | `number` | `2` | -| thousands | 是否按照仟分號形式顯示 | `boolean` | `false` | +| thousands | 是否按照千分號形式顯示 | `boolean` | `false` | | position | 符號顯示在價格前或者後，`before`、`after` | `string` | `before` | -| size | 價格尺寸，`large`、`normal`、`small` | `string` | `large` | +| size | 價格尺寸，`xlarge` \| `large` \| `normal` \| `small` | `string` | `normal` | | line | 是否劃線價 | `boolean` | `false` | -## 主題定制 +## 主題定製 ### 樣式變量 @@ -96,15 +105,20 @@ import { Price } from '@nutui/nutui-react' | 名稱 | 說明 | 默認值 | | --- | --- | --- | -| \--nutui-price-symbol-big-size | large 尺寸符號字體大小 | `18px` | -| \--nutui-price-integer-big-size | large 尺寸整數部分字體大小 | `24px` | -| \--nutui-price-decimal-big-size | large 尺寸小數部分字體大小 | `18px` | -| \--nutui-price-symbol-medium-size | normal 尺寸符號字體大小 | `14px` | -| \--nutui-price-integer-medium-size | normal 尺寸整數部分字體大小 | `16px` | -| \--nutui-price-decimal-medium-size | normal 尺寸小數部分字體大小 | `14px` | -| \--nutui-price-symbol-small-size | small 尺寸符號字體大小 | `10px` | +| \--nutui-price-primary-color | type為primary時文字顏色 | `#ff0f23` | +| \--nutui-price-color | type為gray時文字顏色 | `#888b94` | +| \--nutui-price-darkgray-color | type為darkgray時文字顏色 | `#1a1a1a` | +| \--nutui-price-line-color | 劃線價顏色 | `#888b94` | +| \--nutui-price-symbol-padding-right | 符號的右內邊距 | `0px` | +| \--nutui-price-symbol-xlarge-size | xlarge 尺寸符號字體大小 | `12px` | +| \--nutui-price-integer-xlarge-size | xlarge 尺寸整數部分字體大小 | `24px` | +| \--nutui-price-decimal-xlarge-size | xlarge 尺寸小數部分字體大小 | `12px` | +| \--nutui-price-symbol-large-size | large 尺寸符號字體大小 | `12px` | +| \--nutui-price-integer-large-size | large 尺寸整數部分字體大小 | `18px` | +| \--nutui-price-decimal-large-size | large 尺寸小數部分字體大小 | `12px` | +| \--nutui-price-symbol-normal-size | normal 尺寸符號字體大小 | `12px` | +| \--nutui-price-integer-normal-size | normal 尺寸整數部分字體大小 | `16px` | +| \--nutui-price-decimal-normal-size | normal 尺寸小數部分字體大小 | `12px` | +| \--nutui-price-symbol-small-size | small 尺寸符號字體大小 | `12px` | | \--nutui-price-integer-small-size | small 尺寸整數部分字體大小 | `12px` | -| \--nutui-price-decimal-small-size | small 尺寸小數部分字體大小 | `10px` | -| \--nutui-price-line-font-size | 劃線價字體大小 | `10px` | -| \--nutui-price-line-color | 劃線價顏色 | `#757575` | -| \--nutui-price-symbol-padding-right | 符號的右內邊距 | `1px` | +| \--nutui-price-decimal-small-size | small 尺寸小數部分字體大小 | `12px` | diff --git a/src/packages/price/index.taro.ts b/src/packages/price/index.taro.ts index 647e5ce6ad..379abb8c0a 100644 --- a/src/packages/price/index.taro.ts +++ b/src/packages/price/index.taro.ts @@ -1,4 +1,4 @@ import { Price } from './price.taro' -export type { PriceProps } from './price.taro' +export type { PriceProps, PriceSize, PriceColor } from './types' export default Price diff --git a/src/packages/price/index.ts b/src/packages/price/index.ts index c9b2829a34..3a4847c6df 100644 --- a/src/packages/price/index.ts +++ b/src/packages/price/index.ts @@ -1,4 +1,4 @@ import { Price } from './price' -export type { PriceProps } from './price' +export type { PriceProps, PriceSize, PriceColor } from './types' export default Price diff --git a/src/packages/price/price.scss b/src/packages/price/price.scss index 8d600e0312..cdfa63ba19 100644 --- a/src/packages/price/price.scss +++ b/src/packages/price/price.scss @@ -8,15 +8,45 @@ &-symbol, &-integer, &-decimal { - color: $color-primary; + color: $price-color; + font-family: 'JD'; + line-height: 1; + } + + &-darkgray { + .nut-price { + &-symbol, + &-integer, + &-decimal { + font-family: 'JD-Bold'; + color: $price-darkgray-color; + } + } + } + + &-primary { + .nut-price { + &-symbol, + &-integer, + &-decimal { + font-family: 'JD-Bold'; + color: $price-primary-color; + } + } } &-symbol { - font-size: $price-symbol-medium-size; padding-right: $price-symbol-padding-right; + &-xlarge { + font-size: $price-symbol-xlarge-size; + } &-large { - font-size: $price-symbol-big-size; + font-size: $price-symbol-large-size; + } + + &-normal { + font-size: $price-symbol-normal-size; } &-small { @@ -30,10 +60,16 @@ } &-integer { - font-size: $price-integer-medium-size; + &-xlarge { + font-size: $price-integer-xlarge-size; + } &-large { - font-size: $price-integer-big-size; + font-size: $price-integer-large-size; + } + + &-normal { + font-size: $price-integer-normal-size; } &-small { @@ -42,10 +78,16 @@ } &-decimal { - font-size: $price-decimal-medium-size; + &-xlarge { + font-size: $price-decimal-xlarge-size; + } &-large { - font-size: $price-decimal-big-size; + font-size: $price-decimal-large-size; + } + + &-normal { + font-size: $price-decimal-normal-size; } &-small { @@ -55,7 +97,5 @@ &-line { text-decoration: line-through $price-line-color; - font-size: $price-line-font-size; - color: $price-line-color; } } diff --git a/src/packages/price/price.taro.tsx b/src/packages/price/price.taro.tsx index 91484281ce..3585c83782 100644 --- a/src/packages/price/price.taro.tsx +++ b/src/packages/price/price.taro.tsx @@ -1,30 +1,25 @@ import React, { FunctionComponent } from 'react' -import { Text } from '@tarojs/components' +import { Text, View } from '@tarojs/components' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index.taro' +import { PriceProps } from './types' +import { harmony } from '@/utils/platform-taro' -export interface PriceProps extends BasicComponent { - price: number | string - symbol: string - digits: number - thousands: boolean - position: string - size: string - line: boolean -} const defaultProps = { ...ComponentDefaults, + color: 'primary', price: 0, symbol: '¥', digits: 2, thousands: false, position: 'before', - size: 'large', + size: 'normal', line: false, } as PriceProps export const Price: FunctionComponent> = (props) => { const { + color, price, symbol, digits, @@ -61,12 +56,11 @@ export const Price: FunctionComponent> = (props) => { if (Number(num) === 0) { num = 0 } + num = num.toString() + if (checkPoint(num)) { - num = Number(num).toFixed(digits) num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0] - } else { - num = num.toString() } if (thousands) { return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') @@ -109,40 +103,59 @@ export const Price: FunctionComponent> = (props) => { ) } - - return ( - - {symbol && position === 'before' ? renderSymbol() : null} - - {formatThousands(price)} - - {digits !== 0 ? ( + const renderInner = () => { + return ( + <> + {symbol && position === 'before' ? renderSymbol() : null} - . + {formatThousands(price)} - ) : null} - - {formatDecimal(price)} - - {symbol && position === 'after' ? renderSymbol() : null} - + {digits ? ( + <> + + . + + + {formatDecimal(price)} + + + ) : null} + + {symbol && position === 'after' ? renderSymbol() : null} + + ) + } + + return ( + <> + {harmony() ? ( + + {renderInner()} + + ) : ( + + {renderInner()} + + )} + ) } diff --git a/src/packages/price/price.tsx b/src/packages/price/price.tsx index a6bbdabd6b..fbc68af7bb 100644 --- a/src/packages/price/price.tsx +++ b/src/packages/price/price.tsx @@ -1,29 +1,23 @@ import React, { FunctionComponent } from 'react' import classNames from 'classnames' -import { BasicComponent, ComponentDefaults } from '@/utils/typings' +import { ComponentDefaults } from '@/utils/typings' import { useRtl } from '@/packages/configprovider/index' +import { PriceProps } from './types' -export interface PriceProps extends BasicComponent { - price: number | string - symbol: string - digits: number - thousands: boolean - position: string - size: string - line: boolean -} const defaultProps = { ...ComponentDefaults, + color: 'primary', price: 0, symbol: '¥', digits: 2, thousands: false, position: 'before', - size: 'large', + size: 'normal', line: false, } as PriceProps export const Price: FunctionComponent> = (props) => { const { + color, price, symbol, digits, @@ -52,11 +46,9 @@ export const Price: FunctionComponent> = (props) => { num = 0 } if (checkPoint(num)) { - num = Number(num).toFixed(digits) + num = num.toString() num = typeof num.split('.') === 'string' ? num.split('.') : num.split('.')[0] - } else { - num = num.toString() } if (thousands) { return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') @@ -101,9 +93,7 @@ export const Price: FunctionComponent> = (props) => { return (
@@ -115,22 +105,25 @@ export const Price: FunctionComponent> = (props) => { > {formatThousands(price)}
- {digits !== 0 ? ( -
- . -
+ {digits ? ( + <> +
+ . +
+
+ {formatDecimal(price)} +
+ ) : null} -
- {formatDecimal(price)} -
+ {symbol && position === 'after' ? renderSymbol() : null}
) diff --git a/src/packages/price/types.ts b/src/packages/price/types.ts new file mode 100644 index 0000000000..4d8eea1a7c --- /dev/null +++ b/src/packages/price/types.ts @@ -0,0 +1,14 @@ +import { BasicComponent } from '@/utils/typings' + +export type PriceSize = 'xlarge' | 'large' | 'normal' | 'small' +export type PriceColor = 'primary' | 'gray' | 'darkgray' +export interface PriceProps extends BasicComponent { + color: PriceColor + price: number | string + symbol: string + digits: number + thousands: boolean + position: string + size: PriceSize + line: boolean +} diff --git a/src/packages/radio/radio.scss b/src/packages/radio/radio.scss index ebd765a7dd..4471e64faa 100644 --- a/src/packages/radio/radio.scss +++ b/src/packages/radio/radio.scss @@ -39,9 +39,12 @@ &-icon { &-checked { color: $color-primary; + box-shadow: 0px 2px 4px 0px #ff0f2333; + border-radius: 50%; &.nut-radio-icon-disabled { color: $color-primary-disabled-special; + box-shadow: none; } } diff --git a/src/packages/skeleton/demos/h5/demo5.tsx b/src/packages/skeleton/demos/h5/demo5.tsx index d007ed1bfd..a0930586c3 100644 --- a/src/packages/skeleton/demos/h5/demo5.tsx +++ b/src/packages/skeleton/demos/h5/demo5.tsx @@ -14,7 +14,7 @@ const Demo5 = () => {
changeStatus(value, event)} - style={{ display: 'flex', marginBottom: '8px' }} + style={{ marginBottom: '8px' }} />
diff --git a/src/packages/skeleton/demos/taro/demo5.tsx b/src/packages/skeleton/demos/taro/demo5.tsx index 1bd665c329..7cf397d389 100644 --- a/src/packages/skeleton/demos/taro/demo5.tsx +++ b/src/packages/skeleton/demos/taro/demo5.tsx @@ -1,7 +1,6 @@ import { Avatar, Skeleton, Switch } from '@nutui/nutui-react-taro' import React, { useState } from 'react' import { View, Text } from '@tarojs/components' -import pxTransform from '@/utils/px-transform' const Demo5 = () => { const [checked, setChecked] = useState(false) @@ -14,10 +13,17 @@ const Demo5 = () => { } return ( - changeStatus(value, event)} - style={{ display: 'flex', marginBottom: pxTransform(8) }} - /> + + changeStatus(value, event)} + style={{ marginBottom: 8 }} + /> +