From aefce547ac76cb77bb2da08e1e9181d80df6a8b2 Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Wed, 28 Jun 2023 14:40:41 +0800 Subject: [PATCH 01/11] =?UTF-8?q?feat:=20=E8=B0=83=E8=AF=95PageContainer?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=8A=9F=E8=83=BD=E5=88=9D=E6=AD=A5?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/index/index.scss | 3 + .../src/pages/index/index.tsx | 67 +++++++++++++++++-- .../rollup.config.mjs | 11 ++- 3 files changed, 76 insertions(+), 5 deletions(-) diff --git a/examples/mini-program-example/src/pages/index/index.scss b/examples/mini-program-example/src/pages/index/index.scss index e69de29bb2d1..97fb51f75a22 100644 --- a/examples/mini-program-example/src/pages/index/index.scss +++ b/examples/mini-program-example/src/pages/index/index.scss @@ -0,0 +1,3 @@ +@import '@tarojs/components-mpharmony/dist/style/components/page-container'; + + diff --git a/examples/mini-program-example/src/pages/index/index.tsx b/examples/mini-program-example/src/pages/index/index.tsx index 3c1de60350d6..70c2a83dc96a 100644 --- a/examples/mini-program-example/src/pages/index/index.tsx +++ b/examples/mini-program-example/src/pages/index/index.tsx @@ -1,6 +1,8 @@ -import {View, Text,Image,TestBlock, GridView,ListView} from '@tarojs/components' +import {View, Text, Image, TestBlock, GridView, ListView, Button, HTPageContainer} from '@tarojs/components-mpharmony' + import {useLoad} from '@tarojs/taro' import './index.scss' +import {useState} from "react"; const grid_data = [ { @@ -30,6 +32,7 @@ const grid_data = [ ] export default function Index() { + const [container_show, setContainerShow] = useState(false); useLoad(() => { console.log('Page loaded.') @@ -40,9 +43,10 @@ export default function Index() { Hello world! Hello world! - ( + ( - ( console.log("childItem "+childItem.value+" i "+i+" index "+index) )}> + (console.log("childItem " + childItem.value + " i " + i + " index " + index))}> {childItem.image && ( ( - ( console.log("childItem "+childItem.value+" i "+i) )}> + (console.log("childItem " + childItem.value + " i " + i))}> {childItem.image && ( + + Hello world! + Hello world! + Hello world! + Hello world! + + + + + 弹出位置 + + + + + + + + + + 弹出圆角 + + + + 遮罩层 + + + + + + + + + + + ) } diff --git a/packages/taro-components-mpharmony/rollup.config.mjs b/packages/taro-components-mpharmony/rollup.config.mjs index 2732471caf32..88419708741e 100644 --- a/packages/taro-components-mpharmony/rollup.config.mjs +++ b/packages/taro-components-mpharmony/rollup.config.mjs @@ -6,9 +6,11 @@ import ts from 'rollup-plugin-ts' import babel from '@rollup/plugin-babel' import scss from 'rollup-plugin-scss'; import copy from 'rollup-plugin-copy'; +import RollupCopy from 'rollup-plugin-copy' const cwd = path.dirname(new URL(import.meta.url).pathname); import { mkdirSync } from 'fs'; +import NodePath from "path"; const base = { external: ['@types/node'], @@ -23,6 +25,14 @@ const base = { babel({ babelHelpers: 'bundled', presets: [['@babel/preset-env', { targets: { ie: '11' } }]] + }), + RollupCopy({ + targets: [ + { + src: 'src/style', + dest: 'dist' + } + ] }) ] } @@ -61,5 +71,4 @@ const commonConfig = { ...base } - export default [compileConfig, componentsConfig,commonConfig] From 469ea79f7e4e7c2649d5e7d79d58fa7b66c4c477 Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Wed, 28 Jun 2023 14:42:26 +0800 Subject: [PATCH 02/11] =?UTF-8?q?feat:=20=E8=B0=83=E8=AF=95PageContainer?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=8A=9F=E8=83=BD=E5=88=9D=E6=AD=A5?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/index.ts | 2 + .../page-container/page-container.tsx | 60 +++ .../taro-components-mpharmony/src/index.ts | 1 + .../src/style/components/page-container.scss | 106 ++++ .../src/style/mixins/index.scss | 18 + .../style/mixins/libs/absolute-center.scss | 9 + .../src/style/mixins/libs/active.scss | 10 + .../src/style/mixins/libs/alignhack.scss | 11 + .../src/style/mixins/libs/border.scss | 46 ++ .../src/style/mixins/libs/clearfix.scss | 21 + .../src/style/mixins/libs/disabled.scss | 6 + .../src/style/mixins/libs/flex.scss | 50 ++ .../src/style/mixins/libs/hairline.scss | 190 ++++++++ .../src/style/mixins/libs/line.scss | 14 + .../src/style/mixins/libs/overlay.scss | 11 + .../src/style/mixins/libs/placeholder.scss | 12 + .../src/style/mixins/libs/shade.scss | 23 + .../src/style/mixins/libs/tint.scss | 23 + .../src/style/variables/default.scss | 457 ++++++++++++++++++ 19 files changed, 1070 insertions(+) create mode 100644 packages/taro-components-mpharmony/src/components/page-container/page-container.tsx create mode 100644 packages/taro-components-mpharmony/src/style/components/page-container.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/index.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/absolute-center.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/active.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/alignhack.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/border.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/clearfix.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/disabled.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/flex.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/hairline.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/line.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/overlay.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/placeholder.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/shade.scss create mode 100644 packages/taro-components-mpharmony/src/style/mixins/libs/tint.scss create mode 100644 packages/taro-components-mpharmony/src/style/variables/default.scss diff --git a/packages/taro-components-mpharmony/src/components/index.ts b/packages/taro-components-mpharmony/src/components/index.ts index 255fc30548ad..3881a5cb2c7c 100644 --- a/packages/taro-components-mpharmony/src/components/index.ts +++ b/packages/taro-components-mpharmony/src/components/index.ts @@ -1,3 +1,5 @@ export * from './block/block' export * from './grid/grid' export * from './list/list' +export * from './page-container/page-container' + diff --git a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx new file mode 100644 index 000000000000..162a809897c3 --- /dev/null +++ b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx @@ -0,0 +1,60 @@ +import '../../style/components/page-container.scss' + +import classNames from 'classnames' +import React, { PureComponent, ReactNode } from 'react' + +interface Props { + className?: string + title?: string + children: ReactNode + show: boolean + duration: number + zIndex: number + overlay: boolean + position: 'top' | 'bottom' | 'right' | 'center' + round?: boolean + closeOnSlideDown?: boolean + overlayStyle?: string + customStyle?: string + bindbeforeenter?: (res) => void + bindenter?: (res) => void + bindafterenter?: (res) => void + bindbeforeleave?: (res) => void + bindleave?: (res) => void + bindafterleave?: (res) => void + bindclickoverlay?: (res) => void +} + +export class HTPageContainer extends PureComponent { + context: unknown + readonly props: Readonly + refs: { [p: string]: React.ReactInstance } + + render (): React.ReactNode { + const rootClass = classNames( + 'at-float-layout', + { + 'at-float-layout--active': this.props.show + }, + this.props.className + ) + + return ( +
+
+
+ {this.props.title ? ( +
+
+
+ ) : null} +
+ {this.props.children} +
+
+
+ ) + } + + +} diff --git a/packages/taro-components-mpharmony/src/index.ts b/packages/taro-components-mpharmony/src/index.ts index 3f0969aee2ff..523e969b78e8 100644 --- a/packages/taro-components-mpharmony/src/index.ts +++ b/packages/taro-components-mpharmony/src/index.ts @@ -69,3 +69,4 @@ export { WebView } from '@tarojs/components/lib/react' export * from './components/block/block' export * from './components/grid/grid' export * from './components/list/list' +export * from './components/page-container/page-container' diff --git a/packages/taro-components-mpharmony/src/style/components/page-container.scss b/packages/taro-components-mpharmony/src/style/components/page-container.scss new file mode 100644 index 000000000000..a01fec1193e9 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/components/page-container.scss @@ -0,0 +1,106 @@ +$float-layout-timer: 300ms; +$zindex-flot-layout: 810 !default; +@import "../variables/default"; + +.at-float-layout { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + visibility: hidden; + z-index: $zindex-flot-layout; + transition: visibility $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1); + + /* elements */ + &__overlay { + opacity: 0; + transition: opacity 150ms ease-in; + } + + &__container { + position: absolute; + bottom: 0; + width: 100%; + min-height: $float-layout-height-min; + max-height: $float-layout-height-max; + background-color: $color-bg; + transform: translate3d(0, 100%, 0); + transition: transform $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1); + } + + .layout { + &-header { + position: relative; + padding: $spacing-v-md; + line-height: $line-height-zh; + background-color: $float-layout-header-bg-color; + + &__title { + color: $float-layout-title-color; + font-size: $float-layout-title-font-size; + display: block; + padding-right: 80px; + } + + &__btn-close { + position: absolute; + padding: $spacing-h-sm; + top: 50%; + right: $spacing-v-md; + width: 40px; + height: 100%; + line-height: 1; + transform: translate(0, -50%); + + &::before, + &::after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + display: inline-block; + width: 36px; + height: 2PX; + border-radius: 1PX; + background: $float-layout-btn-color; + } + + &::before { + transform: translate3d(-50%, -50%, 0) rotate(45deg); + } + + &::after { + transform: translate3d(-50%, -50%, 0) rotate(-45deg); + } + } + } + + &-body { + font-size: $font-size-base; + padding: $spacing-v-md; + max-height: 828px; + min-height: 514px; + + &__content { + max-height: 798px; + min-height: 484px; + } + } + } + + /* modifiers */ + &--active { + visibility: visible; + + .at-float-layout__overlay { + opacity: 1; + } + + .at-float-layout__container { + transform: translate3d(0, 0, 0); + } + } +} + + diff --git a/packages/taro-components-mpharmony/src/style/mixins/index.scss b/packages/taro-components-mpharmony/src/style/mixins/index.scss new file mode 100644 index 000000000000..a68b7f60a339 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/index.scss @@ -0,0 +1,18 @@ +/** + * Mixins + */ + +/* library */ +@import './libs/absolute-center'; +@import './libs/clearfix'; +@import './libs/line'; +@import './libs/overlay'; +@import './libs/shade'; +@import './libs/tint'; +@import './libs/flex'; +@import './libs/border'; +@import './libs/active'; +@import './libs/disabled'; +@import './libs/placeholder'; +@import './libs/alignhack'; +@import './libs/hairline'; diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/absolute-center.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/absolute-center.scss new file mode 100644 index 000000000000..1efdc156c764 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/absolute-center.scss @@ -0,0 +1,9 @@ +/** + * 元素居中定位 + */ +@mixin absolute-center($pos: absolute) { + position: $pos; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/active.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/active.scss new file mode 100644 index 000000000000..c3222bfd6179 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/active.scss @@ -0,0 +1,10 @@ +/** + * 点击态 + */ +@mixin active { + transition: background-color 0.3s; + + &:active { + background-color: $color-grey-5; + } +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/alignhack.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/alignhack.scss new file mode 100644 index 000000000000..c557f2617bdb --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/alignhack.scss @@ -0,0 +1,11 @@ +// 修复小元素文本垂直居中 +@mixin alignhack($position: before, $margintop: 1px) { + &::#{$position} { + content: ''; + display: inline-block; + vertical-align: middle; + width: 0; + height: 100%; + margin-top: $margintop; + } +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/border.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/border.scss new file mode 100644 index 000000000000..976b472bd984 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/border.scss @@ -0,0 +1,46 @@ +/** + * 默认主题下 $color-border-light + */ + +@mixin border-thin( + $color: $color-border-light, + $style: solid, + $directions: top bottom right left, + $width: 1px +) { + @each $value in $directions { + border-#{$value}: $width $color $style; + } +} + +@mixin border-thin-top( + $color: $color-border-light, + $style: solid, + $width: 1px +) { + @include border-thin($color, $style, top, $width); +} + +@mixin border-thin-left( + $color: $color-border-light, + $style: solid, + $width: 1px +) { + @include border-thin($color, $style, left, $width); +} + +@mixin border-thin-right( + $color: $color-border-light, + $style: solid, + $width: 1px +) { + @include border-thin($color, $style, right, $width); +} + +@mixin border-thin-bottom( + $color: $color-border-light, + $style: solid, + $width: 1px +) { + @include border-thin($color, $style, bottom, $width); +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/clearfix.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/clearfix.scss new file mode 100644 index 000000000000..cc099a5b2cd6 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/clearfix.scss @@ -0,0 +1,21 @@ +/** + * @example scss + * + * .element { + * @include clearfix; + * } + * + * // CSS Output + * .element::after { + * clear: both; + * content: ''; + * display: block; + * } + */ +@mixin clearfix { + &::after { + clear: both; + content: ''; + display: block; + } +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/disabled.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/disabled.scss new file mode 100644 index 000000000000..9c4c123ac433 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/disabled.scss @@ -0,0 +1,6 @@ +/** + * 禁止态 + */ +@mixin disabled { + color: #bbb; +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/flex.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/flex.scss new file mode 100644 index 000000000000..576204a12b87 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/flex.scss @@ -0,0 +1,50 @@ +@mixin display-flex { + display: flex; +} + +@mixin flex-wrap($value: nowrap) { + flex-wrap: $value; +} + +@mixin align-items($value: stretch) { + align-items: $value; + @if $value == flex-start { + -webkit-box-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + } @else { + -webkit-box-align: $value; + } +} + +@mixin align-content($value: flex-start) { + align-content: $value; +} + +@mixin justify-content($value: flex-start) { + justify-content: $value; + @if $value == flex-start { + -webkit-box-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + } @else if $value == space-between { + -webkit-box-pack: justify; + } @else { + -webkit-box-pack: $value; + } +} + +/* Flex Item */ +@mixin flex($fg: 1, $fs: null, $fb: null) { + flex: $fg $fs $fb; + -webkit-box-flex: $fg; +} + +@mixin flex-order($n) { + order: $n; + -webkit-box-ordinal-group: $n; +} + +@mixin align-self($value: auto) { + align-self: $value; +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/hairline.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/hairline.scss new file mode 100644 index 000000000000..84f269fe655f --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/hairline.scss @@ -0,0 +1,190 @@ +/** + * 默认主题下 $color-border-light + */ + +@mixin hairline-common() { + content: ''; + position: absolute; + transform-origin: center; + box-sizing: border-box; + pointer-events: none; +} + +@mixin hairline-base( + $color: $color-border-light, + $style: solid +) { + @include hairline-common(); + + top: -50%; + left: -50%; + right: -50%; + bottom: -50%; + border: 0 $style $color; + transform: scale(0.5); +} + +@mixin hairline-surround( + $color: $color-border-light, + $style: solid, + $width: 1PX +) { + position: relative; + + &::after { + @include hairline-base($color, $style); + + border-width: $width; + } +} + +@mixin hairline-top( + $color: $color-border-light, + $style: solid, + $width: 1PX +) { + position: relative; + + &::after { + @include hairline-base($color, $style); + + border-top-width: $width; + } +} + +@mixin hairline-bottom( + $color: $color-border-light, + $style: solid, + $width: 1PX +) { + position: relative; + + &::after { + @include hairline-base($color, $style); + + border-bottom-width: $width; + } +} + +@mixin hairline-left( + $color: $color-border-light, + $style: solid, + $width: 1PX +) { + position: relative; + + &::after { + @include hairline-base($color, $style); + + border-left-width: $width; + } +} + +@mixin hairline-right( + $color: $color-border-light, + $style: solid, + $width: 1PX +) { + position: relative; + + &::after { + @include hairline-base($color, $style); + + border-right-width: $width; + } +} + +@mixin hairline-top-bottom( + $color: $color-border-light, + $style: solid, + $width: 1PX +) { + position: relative; + + &::after { + @include hairline-base($color, $style); + + border-top-width: $width; + border-bottom-width: $width; + } +} + +@mixin hairline-bottom-relative( + $color: $color-border-light, + $style: solid, + $width: 1PX, + $left: 0 +) { + position: relative; + + &::after { + @include hairline-common(); + + top: auto; + left: $left; + right: 0; + bottom: 0; + transform: scaleY(0.5); + border-bottom: $width $style $color; + } +} + +@mixin hairline-top-relative( + $color: $color-border-light, + $style: solid, + $width: 1PX, + $left: 0 +) { + position: relative; + + &::before { + @include hairline-common(); + + top: 0; + left: $left; + right: 0; + bottom: auto; + transform: scaleY(0.5); + border-top: $width $style $color; + } +} + +@mixin hairline-left-relative( + $color: $color-border-light, + $style: solid, + $width: 1PX, + $top: 0 +) { + position: relative; + + &::after { + @include hairline-common(); + + top: $top; + left: 0; + right: auto; + bottom: 0; + transform: scaleX(0.5); + border-left: $width $style $color; + } +} + +@mixin hairline-right-relative( + $color: $color-border-light, + $style: solid, + $width: 1PX, + $top: 0 +) { + position: relative; + + &::after { + @include hairline-common(); + + top: $top; + left: auto; + right: 0; + bottom: 0; + transform: scaleX(0.5); + border-right: $width $style $color; + } +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/line.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/line.scss new file mode 100644 index 000000000000..1bd982420ead --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/line.scss @@ -0,0 +1,14 @@ +@mixin line($num: 1) { + overflow: hidden; + text-overflow: ellipsis; + + @if ($num == 1) { + white-space: nowrap; + } @else { + display: -webkit-box; + -webkit-line-clamp: $num; + + /* autoprefixer: off */ + -webkit-box-orient: vertical; + } +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/overlay.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/overlay.scss new file mode 100644 index 000000000000..2cdbbbc91ee6 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/overlay.scss @@ -0,0 +1,11 @@ +/** + * 通用的遮罩 + */ +@mixin overlay { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; + background-color: rgba($color: #000, $alpha: 0.3); +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/placeholder.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/placeholder.scss new file mode 100644 index 000000000000..6f6f5bd865a6 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/placeholder.scss @@ -0,0 +1,12 @@ +/** + * 设置placeholder 颜色 + */ +@mixin placeholder($color: $color-grey-3) { + @at-root .placeholder { + color: $color; + } + + &::placeholder { + color: $color; + } +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/shade.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/shade.scss new file mode 100644 index 000000000000..b9bc71bb5873 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/shade.scss @@ -0,0 +1,23 @@ +/** + * Mixes a color with black. It's different from darken() + * + * @param {color} $color + * @param {number (percentage)} $percent [The amount of black to be mixed in] + * @return {color} + * + * @example + * .element { + * background-color: shade(#ffbb52, 60%); + * } + * + * // CSS Output + * .element { + * background-color: #664a20; + * } + */ +@function shade( + $color, + $percent +) { + @return mix(#000, $color, $percent); +} diff --git a/packages/taro-components-mpharmony/src/style/mixins/libs/tint.scss b/packages/taro-components-mpharmony/src/style/mixins/libs/tint.scss new file mode 100644 index 000000000000..ca201ea94706 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/mixins/libs/tint.scss @@ -0,0 +1,23 @@ +/** + * Mixes a color with white. It's different from lighten() + * + * @param {color} $color + * @param {number (percentage)} $percent [The amout of white to be mixed in] + * @return {color} + * + * @example + * .element { + * background-color: tint(#6ecaa6 , 40%); + * } + * + * // CSS Output + * .element { + * background-color: #a8dfc9; + * } + */ +@function tint( + $color, + $percent +) { + @return mix(#FFF, $color, $percent); +} diff --git a/packages/taro-components-mpharmony/src/style/variables/default.scss b/packages/taro-components-mpharmony/src/style/variables/default.scss new file mode 100644 index 000000000000..091bbe8bcdc0 --- /dev/null +++ b/packages/taro-components-mpharmony/src/style/variables/default.scss @@ -0,0 +1,457 @@ +/** + * Default variables + */ + +@import '../mixins/libs/tint'; + +$hd: 2 !default; // 基本单位 + +/* The Color of O2Team Brand */ +$color-brand: #6190E8 !default; +$color-brand-light: #78A4F4 !default; +$color-brand-dark: #346FC2 !default; + +/* Color */ +$color-success: #13CE66 !default; +$color-error: #FF4949 !default; +$color-warning: #FFC82C !default; +$color-info: #78A4FA !default; + +/* Color Palette */ +$color-black-0: #000 !default; +$color-black-1: #333 !default; +$color-black-2: #7F7F7F !default; +$color-black-3: #B2B2B2 !default; + +$color-grey-0: #333 !default; +$color-grey-1: #666 !default; +$color-grey-2: #999 !default; +$color-grey-3: #CCC !default; +$color-grey-4: #E5E5E5 !default; +$color-grey-5: #F0F0F0 !default; +$color-grey-6: #F7F7F7 !default; + +$color-white: #FFF !default; + +/* Text Color */ +$color-text-base: #333 !default; // 文字的基本色 +$color-text-base-inverse: #FFF !default; // 反色 +$color-text-secondary: #36D57D !default; // 辅助色 +$color-text-placeholder: #C9C9C9 !default; +$color-text-disabled: #CCC !default; +$color-text-title: #2C405A !default; // 文章标题 +$color-text-paragraph: #3F536E !default; // 文章段落 + +/* Link */ +$color-link: #6190E8 !default; +$color-link-hover: #79A1EB !default; +$color-link-active: #4F7DE2 !default; +$color-link-disabled: #BFBFBF !default; + +/* 背景色 */ +$color-bg: #FFF !default; +$color-bg-base: #FAFBFC !default; +$color-bg-light: #ECF5FD !default; +$color-bg-lighter: tint($color-bg-light, 50%) !default; +$color-bg-grey: #F7F7F7 !default; + +/* 边框颜色 */ +$color-border-base: #C5D9E8 !default; +$color-border-split: tint($color-border-base, 20%) !default; // 分割线 +$color-border-light: tint($color-border-base, 30%) !default; +$color-border-lighter: tint($color-border-base, 50%) !default; +$color-border-lightest: tint($color-border-base, 80%) !default; +$color-border-grey: #CCC !default; + +/* 图标颜色 */ +$color-icon-base: #CCC !default; + +/* Border Radius */ +$border-radius-sm: 2px * $hd !default; +$border-radius-md: 4px * $hd !default; +$border-radius-lg: 6px * $hd !default; +$border-radius-circle: 50% !default; + +/* 透明度 */ +$opacity-active: 0.6 !default; // Button 等组件点击态额透明度 +$opacity-disabled: 0.3 !default; // Button 等组件禁用态的透明度 + +/* Font */ +$font-size-xs: 10px * $hd !default; // 非常用字号，用于标签 +$font-size-sm: 12px * $hd !default; // 用于辅助信息 +$font-size-base: 14px * $hd !default; // 常用字号 +$font-size-lg: 16px * $hd !default; // 常规标题 +$font-size-xl: 18px * $hd !default; // 大标题 +$font-size-xxl: 20px * $hd !default; // 用于大号的数字 + +/* Line Height */ +$line-height-base: 1 !default; // 单行 +$line-height-en: 1.3 !default; // 英文多行 +$line-height-zh: 1.5 !default; // 中文多行 + +/* 水平间距 */ +$spacing-h-sm: 5px * $hd !default; +$spacing-h-md: 8px * $hd !default; +$spacing-h-lg: 12px * $hd !default; +$spacing-h-xl: 16px * $hd !default; + +/* 垂直间距 */ +$spacing-v-xs: 3px * $hd !default; +$spacing-v-sm: 6px * $hd !default; +$spacing-v-md: 9px * $hd !default; +$spacing-v-lg: 12px * $hd !default; +$spacing-v-xl: 15px * $hd !default; + +/* 图标尺寸 */ +$icon-size-sm: 18px * $hd !default; +$icon-size-md: 22px * $hd !default; +$icon-size-lg: 36px * $hd !default; + +/* z-index */ +$zindex-divider: 100 !default; +$zindex-steps: 500 !default; +$zindex-tab: 600 !default; +$zindex-form: 700 !default; +$zindex-nav: 800 !default; +$zindex-search-bar: 800 !default; +$zindex-indexes: 805 !default; +$zindex-flot-layout: 810 !default; +$zindex-drawer: 900 !default; +$zindex-modal: 1000 !default; +$zindex-action-sheet: 1010 !default; +$zindex-picker: 1010 !default; +$zindex-curtain: 1080 !default; +$zindex-message: 1090 !default; +$zindex-toast: 1090 !default; + +/* timing function */ +$timing-func: cubic-bezier(0.36, 0.66, 0.04, 1) !default; + +/** +* CSS cubic-bezier timing functions +* http://bourbon.io/docs/#timing-functions +*/ +$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530) !default; +$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190) !default; +$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220) !default; +$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060) !default; +$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715) !default; +$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035) !default; +$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335) !default; +$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045) !default; + +$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940) !default; +$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000) !default; +$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000) !default; +$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000) !default; +$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000) !default; +$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000) !default; +$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000) !default; +$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275) !default; + +$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default; +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000) !default; +$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000) !default; +$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000) !default; +$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950) !default; +$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000) !default; +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860) !default; +$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550) !default; + +/** + * 组件变量 + */ + +/* Accordion */ +$at-accordion-color-arrow: $color-grey-3 !default; + +/* Activity Indicator */ +$at-activity-indicator-font-size: 28px !default; +$at-activity-indicator-font-color: $color-grey-2 !default; + +/* Avatar */ +$at-avatar-color: $color-white !default; +$at-avatar-bg-color: $color-grey-4 !default; +$at-avatar-size-sm: 80px !default; +$at-avatar-size-md: 100px !default; +$at-avatar-size-lg: 120px !default; + +/* Badge */ +$at-badge-color: $color-white !default; +$at-badge-bg-color: $color-error !default; +$at-badge-bg: $at-badge-bg-color !default; +$at-badge-font-size: $font-size-xs !default; +$at-badge-dot-size: 20px !default; + +/* Button */ +$at-button-height: 92px !default; +$at-button-height-sm: 60px !default; +$at-button-color: $color-brand !default; +$at-button-border-color-primary: $color-brand !default; +$at-button-border-color-secondary: $color-brand !default; +$at-button-bg: $at-button-color !default; + +/* Float Button */ +$at-fab-size: 56px * $hd !default; +$at-fab-size-sm: 40px * $hd !default; +$at-fab-icon-size: 24px * $hd !default; +$at-fab-bg-color: $color-brand; +$at-fab-bg-color-active: $color-brand-dark; +$at-fab-box-shadow: + 0 6px 10px -2px rgba(0, 0, 0, 0.2), + 0 12px 20px 0 rgba(0, 0, 0, 0.14), + 0 2px 36px 0 rgba(0, 0, 0, 0.12) !default; +$at-fab-box-shadow-active: + 0 14px 16px -8px rgba(0, 0, 0, 0.2), + 0 24px 34px 4px rgba(0, 0, 0, 0.14), + 0 10px 44px 8px rgba(0, 0, 0, 0.12) !default; + +/* Calendar */ +$at-calendar-day-size: 72px !default; +$at-calendar-mark-size: 8px !default; +$at-calendar-header-color: #B8BFC6 !default; +$at-calendar-main-color: $color-brand !default; +$at-calendar-day-color: #7C86A2 !default; + +/* Card */ +$at-card-thumb-size: 32px !default; +$at-card-icon-size: 32px !default; +$at-card-title-color: $color-text-title !default; +$at-card-extra-color: $color-text-title !default; +$at-card-info-color: $color-text-base !default; +$at-card-note-color: $color-grey-2 !default; + +/* Checkbox */ +$at-checkbox-circle-size: 40px !default; +$at-checkbox-icon-size: $font-size-sm !default; +$at-checkbox-icon-color: $color-brand !default; +$at-checkbox-icon-color-checked: $color-white !default; +$at-checkbox-title-color: $color-text-base !default; +$at-checkbox-title-font-size: $font-size-lg !default; +$at-checkbox-desc-font-size: $font-size-sm !default; +$at-checkbox-desc-color: $color-grey-2 !default; + +/* Countdown */ +$at-countdown-font-size: $font-size-lg !default; +$at-countdown-num-color: $color-text-base !default; +$at-countdown-card-num-color: #FF4949 !default; +$at-countdown-card-num-bg-color: $color-white !default; + +/* Curtain */ +$at-curtain-btn-color: $color-white !default; + +/* Divider */ +$at-divider-height: 112px; +$at-divider-content-color: $color-brand !default; +$at-divider-font-size: $font-size-lg !default; +$at-divider-line-color: $color-grey-3 !default; + +/* Drawer */ +$at-drawer-content-width: 460px !default; + +/* FloatLayout */ +$float-layout-height-min: 600px !default; +$float-layout-height-max: 950px !default; +$float-layout-header-bg-color: $color-bg-grey !default; +$float-layout-title-color: $color-text-base !default; +$float-layout-title-font-size: $font-size-lg !default; +$float-layout-btn-color: $color-grey-3 !default; + +/* Grid */ +$at-grid-text-color: $color-text-base !default; +$at-grid-font-size: $font-size-lg !default; +$at-grid-img-size: 80px !default; +$at-gird-img-size-sm: 50px !default; + +/* ImagePicker */ +$at-image-picker-btn-add-color: $color-grey-3 !default; +$at-image-picker-btn-remove-color: $color-white !default; +$at-image-picker-btn-remove-bg-color: $color-grey-2 !default; + +/* Indexes */ +$at-indexes-nav-color: $color-link !default; +$at-indexes-nav-font-size: $font-size-sm !default; +$at-indexes-title-color: $color-black-2 !default; +$at-indexes-title-font-size: $font-size-sm !default; +$at-indexes-title-bg-color: $color-grey-6 !default; + +/* InputNumber */ +$at-input-number-text-color: $color-text-base !default; +$at-input-number-font-size: $font-size-base !default; +$at-input-number-font-size-lg: $font-size-xl !default; +$at-input-number-btn-color: $color-brand !default; +$at-input-number-btn-size: 30px !default; +$at-input-number-btn-size-lg: 36px !default; +$at-input-number-width-min: 80px !default; +$at-input-number-width-min-lg: 120px !default; + +/* Input */ +$at-input-label-color: $color-text-base !default; +$at-input-text-color: $color-text-base !default; +$at-input-font-size: $font-size-lg !default; +$at-input-placeholder-color: $color-grey-3 !default; + +/* List */ +$at-list-thumb-size: 56px !default; +$at-list-arrow-color: $color-grey-3 !default; +$at-list-text-color: $color-text-base !default; +$at-list-content-color: $color-grey-2 !default; +$at-list-extra-color: $color-grey-2 !default; +$at-list-extra-width: 235px !default; + +/* LoadMore */ +$at-load-more-height: 80PX !default; +$at-load-more-tips-color: $color-grey-1 !default; +$at-load-more-tips-size: $font-size-lg !default; + +/* Loading */ +$at-loading-size: 36px !default; +$at-loading-color: $color-brand !default; + +/* Message */ +$at-message-color: $color-white !default; +$at-message-font-size: $font-size-base !default; +$at-message-bg-color: $color-info !default; + +/* Modal */ +$at-modal-width: 540px !default; +$at-modal-header-text-color: $color-text-base !default; +$at-modal-content-text-color: $color-text-base !default; +$at-modal-btn-default-color: $color-text-base !default; +$at-modal-btn-confirm-color: $color-brand !default; +$at-modal-bg-color: $color-white !default; + +/* NavBar */ +$at-nav-bar-title-color: $color-text-base !default; +$at-nav-bar-link-color: $color-brand !default; + +/* NoticeBar */ +$at-noticebar-text-color: #DE8C17 !default; +$at-noticebar-bg-color: #FCF6ED !default; +$at-noticebar-font-size: $font-size-sm !default; +$at-noticebar-icon-size: 30px !default; +$at-noticebar-btn-close-size: 32px !default; +$at-noticebar-btn-close-color: $color-grey-3 !default; + +/* Pagination */ +$at-pagination-margin: 40px !default; +$at-pagination-num-color: $color-text-base !default; +$at-pagination-num-font-size: $font-size-base !default; +$at-pagination-current-num-color: $color-brand !default; +$at-pagination-icon-color: $color-text-base !default; +$at-pagination-icon-font-size: 32px !default; + +/* Progress */ +$at-progress-height: 16px !default; +$at-progress-text-size: $font-size-sm !default; +$at-progress-icon-size: $font-size-xl !default; +$at-progress-inner-bg-color: $color-grey-6 !default; +$at-progress-bar-bg-color: $color-brand-light !default; +$at-progress-bar-bg-color-active: $color-white !default; + +/* Radio */ +$at-radio-title-color: $color-text-base !default; +$at-radio-title-size: $font-size-lg !default; +$at-radio-desc-color: $color-grey-2 !default; +$at-radio-desc-size: $font-size-sm !default; +$at-radio-check-color: $color-brand !default; + +/* Range */ +$at-range-slider-size: 28PX !default; +$at-range-rail-height: 2PX !default; +$at-range-rail-bg-color: #E9E9E9 !default; +$at-range-track-bg-color: $color-brand !default; +$at-range-slider-color: $color-white !default; +$at-range-slider-shadow: 0 0 4PX 0 rgba(0, 0, 0, 0.2) !default; + +/* Rate */ +$at-rate-icon-size: 20PX !default; +$at-rate-star-color: #ECECEC !default; +$at-rate-star-color-on: #FFCA3E !default; + +/* SearchBar */ +$at-search-bar-btn-color: $color-white !default; +$at-search-bar-btn-bg-color: $color-brand !default; + +/* SegmentedControl */ +$at-segmented-control-color: $color-brand !default; +$at-segmented-control-color-active: $color-white !default; +$at-segmented-control-bg-color: transparent !default; +$at-segmented-control-font-size: $font-size-base !default; + +/* Slider */ +$at-slider-text-color: $color-grey-2 !default; +$at-slider-text-size: $font-size-base !default; + +/* Steps */ +$at-steps-circle-size: 56px !default; +$at-steps-icon-size: $font-size-sm !default; +$at-steps-color: $color-white !default; +$at-steps-color-active: $color-grey-2 !default; +$at-steps-bg-color: $color-grey-4 !default; +$at-steps-bg-color-active: $color-brand !default; +$at-steps-line-color: $color-grey-3 !default; +$at-steps-title-color: $color-black-0 !default; +$at-steps-title-size: $font-size-lg !default; +$at-steps-desc-color: $color-grey-3 !default; +$at-steps-desc-size: $font-size-sm !default; + +/* SwipeAction */ +$at-swipe-action-color: $color-white !default; +$at-swipe-action-font-size: $font-size-base !default; +$at-swipe-action-bg-color: $color-white !default; +$at-swipe-action-option-bg-color: $color-grey-2 !default; + +/* Switch */ +$at-switch-title-color: $color-text-base !default; +$at-switch-title-size: $font-size-base !default; + +/* TabBar */ +$at-tab-bar-bg-color: $color-white !default; +$at-tab-bar-color: $color-text-base !default; +$at-tab-bar-color-active: $color-brand !default; +$at-tab-bar-font-size: $font-size-base !default; +$at-tab-bar-icon-color: $color-grey-0 !default; +$at-tab-bar-icon-font-size: 48px !default; +$at-tab-bar-icon-image-size: 50px !default; + +/* Tabs */ +$at-tabs-color: $color-text-base !default; +$at-tabs-color-active: $color-brand !default; +$at-tabs-font-size: $font-size-base !default; +$at-tabs-line-height: 1PX !default; +$at-tabs-underline-color: $color-grey-5 !default; +$at-tabs-bg-color: $color-bg !default; + +/* Tag */ +$at-tag-height: 60px !default; +$at-tag-height-sm: 40px !default; +$at-tag-color: $color-grey-1 !default; +$at-tag-color-primary: $color-grey-1 !default; +$at-tag-color-active: $color-brand-light !default; +$at-tag-color-primary-active: $color-text-base-inverse !default; +$at-tag-font-size: $font-size-base !default; +$at-tag-font-size-sm: $font-size-xs !default; +$at-tag-bg-color: $color-bg-grey !default; +$at-tag-bg-color-primary: $color-bg-grey !default; +$at-tag-bg-color-active: $color-white !default; +$at-tag-bg-color-primary-active: $at-tag-color-active !default; +$at-tag-border-color: $at-tag-bg-color !default; +$at-tag-border-color-primary: $at-tag-bg-color !default; +$at-tag-border-color-active: $at-tag-color-active !default; + +/* Textarea */ +$at-textarea-font-size: $font-size-lg !default; +$at-textarea-tips-color: $color-text-placeholder !default; +$at-textarea-tips-size: $font-size-base !default; + +/* Timeline */ +$at-timeline-offset-left: 40px !default; +$at-timeline-title-color: $color-grey-0 !default; +$at-timeline-title-font-size: $font-size-base !default; +$at-timeline-desc-color: $color-grey-1 !default; +$at-timeline-desc-font-size: $font-size-sm !default; +$at-timeline-dot-size: 24px !default; +$at-timeline-dot-color: $color-bg !default; +$at-timeline-dot-border-color: $color-brand-light !default; +$at-timeline-line-color: $color-border-lighter !default; From 6b8a2f3ed69a3ed9eb6fe0437a2a6604aaab8be9 Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Wed, 28 Jun 2023 15:09:58 +0800 Subject: [PATCH 03/11] =?UTF-8?q?feat:=20=E8=B0=83=E8=AF=95PageContainer?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=8A=9F=E8=83=BD=E5=88=9D=E6=AD=A5?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/page-container/page-container.tsx | 11 ++--------- packages/taro-components-mpharmony/src/index.ts | 3 +-- .../src/style/components/page-container.scss | 4 ++++ 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx index 162a809897c3..6bd3f4746f7f 100644 --- a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx +++ b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx @@ -5,7 +5,6 @@ import React, { PureComponent, ReactNode } from 'react' interface Props { className?: string - title?: string children: ReactNode show: boolean duration: number @@ -25,7 +24,7 @@ interface Props { bindclickoverlay?: (res) => void } -export class HTPageContainer extends PureComponent { +export default class PageContainer extends PureComponent { context: unknown readonly props: Readonly refs: { [p: string]: React.ReactInstance } @@ -40,14 +39,8 @@ export class HTPageContainer extends PureComponent { ) return ( -
-
+
- {this.props.title ? ( -
-
-
- ) : null}
{this.props.children}
diff --git a/packages/taro-components-mpharmony/src/index.ts b/packages/taro-components-mpharmony/src/index.ts index 523e969b78e8..215979e90b3d 100644 --- a/packages/taro-components-mpharmony/src/index.ts +++ b/packages/taro-components-mpharmony/src/index.ts @@ -41,7 +41,6 @@ export { NavigationBar } from '@tarojs/components/lib/react' export { Navigator } from '@tarojs/components/lib/react' export { OfficialAccount } from '@tarojs/components/lib/react' export { OpenData } from '@tarojs/components/lib/react' -export { PageContainer } from '@tarojs/components/lib/react' export { PageMeta } from '@tarojs/components/lib/react' export { Picker, PickerGroup } from '@tarojs/components/lib/react' export { PickerView, PickerViewColumn } from '@tarojs/components/lib/react' @@ -69,4 +68,4 @@ export { WebView } from '@tarojs/components/lib/react' export * from './components/block/block' export * from './components/grid/grid' export * from './components/list/list' -export * from './components/page-container/page-container' +export { default as PageContainer } from './components/page-container/page-container' diff --git a/packages/taro-components-mpharmony/src/style/components/page-container.scss b/packages/taro-components-mpharmony/src/style/components/page-container.scss index a01fec1193e9..c5ee26291d76 100644 --- a/packages/taro-components-mpharmony/src/style/components/page-container.scss +++ b/packages/taro-components-mpharmony/src/style/components/page-container.scss @@ -12,6 +12,10 @@ $zindex-flot-layout: 810 !default; z-index: $zindex-flot-layout; transition: visibility $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1); + .bottom{ + + } + /* elements */ &__overlay { opacity: 0; From eae0cc94de52a6dbb770445293a12c89217ce639 Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Wed, 28 Jun 2023 19:56:20 +0800 Subject: [PATCH 04/11] =?UTF-8?q?feat:=20=E8=B0=83=E8=AF=95PageContainer?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=AE=8C=E6=88=90=E9=81=AE=E7=BD=A9?= =?UTF-8?q?=E5=B1=82=E6=A0=B7=E5=BC=8F=E8=87=AA=E5=AE=9A=E4=B9=89=E3=80=81?= =?UTF-8?q?=E5=9C=86=E8=A7=92=E8=87=AA=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/index/index.scss | 7 ++ .../src/pages/index/index.tsx | 75 +++++++++++-------- .../page-container/page-container.tsx | 54 ++++++++++++- .../src/style/components/page-container.scss | 22 +++++- 4 files changed, 123 insertions(+), 35 deletions(-) diff --git a/examples/mini-program-example/src/pages/index/index.scss b/examples/mini-program-example/src/pages/index/index.scss index 97fb51f75a22..b01c2c38eb83 100644 --- a/examples/mini-program-example/src/pages/index/index.scss +++ b/examples/mini-program-example/src/pages/index/index.scss @@ -1,3 +1,10 @@ @import '@tarojs/components-mpharmony/dist/style/components/page-container'; +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} diff --git a/examples/mini-program-example/src/pages/index/index.tsx b/examples/mini-program-example/src/pages/index/index.tsx index 70c2a83dc96a..c30f94f0eb82 100644 --- a/examples/mini-program-example/src/pages/index/index.tsx +++ b/examples/mini-program-example/src/pages/index/index.tsx @@ -1,4 +1,4 @@ -import {View, Text, Image, TestBlock, GridView, ListView, Button, HTPageContainer} from '@tarojs/components-mpharmony' +import {View, Text, Image, TestBlock, GridView, ListView, Button, PageContainer} from '@tarojs/components-mpharmony' import {useLoad} from '@tarojs/taro' import './index.scss' @@ -33,6 +33,10 @@ const grid_data = [ export default function Index() { const [container_show, setContainerShow] = useState(false); + const [position, setTransitionPosition] = useState('bottom'); + const [round, setRound] = useState(false); + const [overlay, setOverlay] = useState(false); + const [overlayStyle, setOverlayStyle] = useState('overlay_black'); useLoad(() => { console.log('Page loaded.') @@ -76,7 +80,7 @@ export default function Index() { )}/> - + ( setContainerShow(false))}> Hello world! Hello world! Hello world! @@ -84,50 +88,61 @@ export default function Index() { - + 弹出位置 - + - + - + - + 弹出圆角 - + 遮罩层 - + - + - + - diff --git a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx index 6bd3f4746f7f..56e560a058bb 100644 --- a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx +++ b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx @@ -33,14 +33,64 @@ export default class PageContainer extends PureComponent { const rootClass = classNames( 'at-float-layout', { - 'at-float-layout--active': this.props.show + 'at-float-layout--active': this.props.show, + }, this.props.className ) + let position_css = 'no_active_bottom' + if (this.props.show) { + if (this.props.position === 'bottom') { + position_css = 'active_bottom' + } else if (this.props.position === 'top') { + position_css = 'active_top' + } else if (this.props.position === 'right') { + position_css = 'active_right' + } + } else { + if (this.props.position === 'bottom') { + position_css = 'no_active_bottom' + } else if (this.props.position === 'top') { + position_css = 'no_active_top' + } else if (this.props.position === 'right') { + position_css = 'no_active_right' + } + } + + const container = classNames( + 'at-float-layout__container', + 'layout', + { + 'container_has_corner': this.props.round, + [position_css]: false, + }, + ) + + let overlay_color = 'overlay_none' + + if (this.props.overlay) { + overlay_color = 'overlay_none' + } else { + if (this.props.overlayStyle !== undefined) { + overlay_color = this.props.overlayStyle + } else { + overlay_color = 'overlay_black' + } + } + + const overlay = classNames( + 'at-float-layout__overlay', + { + [overlay_color]: true, + }, + ) + + return (
-
+
+
{this.props.children}
diff --git a/packages/taro-components-mpharmony/src/style/components/page-container.scss b/packages/taro-components-mpharmony/src/style/components/page-container.scss index c5ee26291d76..c38cd0d1ee92 100644 --- a/packages/taro-components-mpharmony/src/style/components/page-container.scss +++ b/packages/taro-components-mpharmony/src/style/components/page-container.scss @@ -12,16 +12,32 @@ $zindex-flot-layout: 810 !default; z-index: $zindex-flot-layout; transition: visibility $float-layout-timer cubic-bezier(0.36, 0.66, 0.04, 1); - .bottom{ - + .container_has_corner { + border-top-left-radius: 20px; + border-top-right-radius: 20px; } /* elements */ &__overlay { opacity: 0; + width: 100%; + height: 100%; + transition: opacity 150ms ease-in; } + .overlay_none { + + } + + .overlay_black { + background: #0d0d0d; + } + + .overlay_white { + background: #f4f4f4; + } + &__container { position: absolute; bottom: 0; @@ -98,7 +114,7 @@ $zindex-flot-layout: 810 !default; visibility: visible; .at-float-layout__overlay { - opacity: 1; + opacity: 0.8; } .at-float-layout__container { From 6037587c8a168f890b78c0b479784d4b8c56b6f8 Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Thu, 29 Jun 2023 15:59:50 +0800 Subject: [PATCH 05/11] =?UTF-8?q?feat:=20=E8=B0=83=E8=AF=95PageContainer?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81z-index=E5=B1=9E?= =?UTF-8?q?=E6=80=A7=E5=92=8Cduration=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/index/index.tsx | 11 ++++++++++- .../page-container/page-container.tsx | 18 +++++++++++++----- 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/examples/mini-program-example/src/pages/index/index.tsx b/examples/mini-program-example/src/pages/index/index.tsx index c30f94f0eb82..7c7eaeacbce4 100644 --- a/examples/mini-program-example/src/pages/index/index.tsx +++ b/examples/mini-program-example/src/pages/index/index.tsx @@ -80,7 +80,16 @@ export default function Index() { )}/> - ( setContainerShow(false))}> + ( setContainerShow(false))} + bindbeforeenter={()=>{ console.log("==bindbeforeenter==")}} + bindenter={()=>{ console.log("==bindenter==")}} + bindafterenter={()=>{ console.log("==bindafterenter==")}} + bindbeforeleave={()=>{ console.log("==bindbeforeleave==")}} + bindleave={()=>{ console.log("==bindleave==")}} + bindafterleave={()=>{ console.log("==bindafterleave==")}} + duration={2000} + zIndex={20} + > Hello world! Hello world! Hello world! diff --git a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx index 56e560a058bb..acdd54ead0b3 100644 --- a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx +++ b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx @@ -7,8 +7,8 @@ interface Props { className?: string children: ReactNode show: boolean - duration: number - zIndex: number + duration?: number + zIndex?: number overlay: boolean position: 'top' | 'bottom' | 'right' | 'center' round?: boolean @@ -34,7 +34,6 @@ export default class PageContainer extends PureComponent { 'at-float-layout', { 'at-float-layout--active': this.props.show, - }, this.props.className ) @@ -86,11 +85,20 @@ export default class PageContainer extends PureComponent { }, ) + let zIndex = 810 + if (this.props.zIndex !== undefined) { + zIndex = this.props.zIndex + } + + let transitionDuration = '500ms' + if (this.props.duration !== undefined) { + transitionDuration = this.props.duration + 'ms' + } return ( -
+
-
+
{this.props.children}
From 1c419f922f21997740f9004b614bf9cdb1dd76e9 Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Thu, 29 Jun 2023 16:13:33 +0800 Subject: [PATCH 06/11] =?UTF-8?q?feat:=20=E8=B0=83=E8=AF=95PageContainer?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=AF=E6=8C=81customStyle?= =?UTF-8?q?=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/mini-program-example/src/pages/index/index.scss | 4 ++++ examples/mini-program-example/src/pages/index/index.tsx | 1 + .../src/components/page-container/page-container.tsx | 1 + 3 files changed, 6 insertions(+) diff --git a/examples/mini-program-example/src/pages/index/index.scss b/examples/mini-program-example/src/pages/index/index.scss index b01c2c38eb83..4a875e8b1add 100644 --- a/examples/mini-program-example/src/pages/index/index.scss +++ b/examples/mini-program-example/src/pages/index/index.scss @@ -8,3 +8,7 @@ .overlay_white { background: #f4f4f4; } +.customStyle { + background: #8065df; +} + diff --git a/examples/mini-program-example/src/pages/index/index.tsx b/examples/mini-program-example/src/pages/index/index.tsx index 7c7eaeacbce4..77f2ff3f0f22 100644 --- a/examples/mini-program-example/src/pages/index/index.tsx +++ b/examples/mini-program-example/src/pages/index/index.tsx @@ -89,6 +89,7 @@ export default function Index() { bindafterleave={()=>{ console.log("==bindafterleave==")}} duration={2000} zIndex={20} + customStyle={'customStyle'} > Hello world! Hello world! diff --git a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx index acdd54ead0b3..985ec411d8c5 100644 --- a/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx +++ b/packages/taro-components-mpharmony/src/components/page-container/page-container.tsx @@ -64,6 +64,7 @@ export default class PageContainer extends PureComponent { 'container_has_corner': this.props.round, [position_css]: false, }, + this.props.customStyle ) let overlay_color = 'overlay_none' From 8f6d9da8f30c9a8314f6fbc8d44656f0e8ebf977 Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Tue, 4 Jul 2023 15:33:07 +0800 Subject: [PATCH 07/11] =?UTF-8?q?feat:=20=E8=B0=83=E8=AF=95MatchMedia?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=9F=BA=E6=9C=AC=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../taro-components-mpharmony/package.json | 13 +-- .../components/match-media/match-media.tsx | 92 +++++++++++++++++++ .../taro-components-mpharmony/src/index.ts | 2 +- pnpm-lock.yaml | 63 ++++++++----- 4 files changed, 142 insertions(+), 28 deletions(-) create mode 100644 packages/taro-components-mpharmony/src/components/match-media/match-media.tsx diff --git a/packages/taro-components-mpharmony/package.json b/packages/taro-components-mpharmony/package.json index 9fb474430b7b..388473529035 100644 --- a/packages/taro-components-mpharmony/package.json +++ b/packages/taro-components-mpharmony/package.json @@ -26,11 +26,12 @@ "memoize-one": "^6.0.0", "react": "^18.0.0", "react-dom": "^18.0.0", + "react-draggable": "^4.4.5", "react-grid-layout": "^1.3.4", + "react-resizable": "^3.0.4", + "react-responsive": "^9.0.2", "swiper": "6.8.0", - "universal-router": "^9.1.0", - "react-draggable": "^4.4.5", - "react-resizable": "^3.0.4" + "universal-router": "^9.1.0" }, "devDependencies": { "@babel/cli": "^7.21.0", @@ -70,7 +71,9 @@ "html-webpack-plugin": "^5.5.0", "lodash": "^4.17.21", "postcss": "^8.4.18", + "react-draggable": "^4.4.5", "react-refresh": "^0.11.0", + "react-resizable": "^3.0.4", "rimraf": "^4.4.0", "rollup": "^2.79.0", "rollup-plugin-clear": "^2.0.7", @@ -86,8 +89,6 @@ "typescript": "^5.0.4", "webpack": "^5.76.0", "webpack-cli": "^5.0.1", - "webpack-dev-server": "^4.13.1", - "react-draggable": "^4.4.5", - "react-resizable": "^3.0.4" + "webpack-dev-server": "^4.13.1" } } diff --git a/packages/taro-components-mpharmony/src/components/match-media/match-media.tsx b/packages/taro-components-mpharmony/src/components/match-media/match-media.tsx new file mode 100644 index 000000000000..938eed513326 --- /dev/null +++ b/packages/taro-components-mpharmony/src/components/match-media/match-media.tsx @@ -0,0 +1,92 @@ +import React, { PureComponent, ReactNode } from 'react' + +interface Props { + children: ReactNode + minWidth?: number + maxWidth?: number + width?: number + minHeight?: number + maxHeight?: number + height?: number + orientation: string // 屏幕方向（landscape 或 portrait） + +} + +interface State { + isAllSuit: boolean +} + +export class MatchMedia extends PureComponent { + context: unknown + readonly props: Readonly + refs: { [p: string]: React.ReactInstance } + + constructor (props) { + super(props) + this.state = { + isAllSuit: true + } + this.handleResize = this.handleResize.bind(this) + } + + componentDidMount () { + window.addEventListener('resize', this.handleResize) + } + + componentWillUnmount () { + window.removeEventListener('resize', this.handleResize) + } + + handleResize () { + + + let isSuitMinWidth = true + let isSuitMaxWidth = true + + let isSuitMinHeight = true + let isSuitMaxHeight = true + + let isSuitWidth = true + let isSuitHeight = true + + const screenWidth = window.innerWidth + const screenHeight = window.innerHeight + + // console.log('screenWidth '+screenWidth+' screenHeight '+screenHeight) + if (this.props.minWidth !== null && this.props.minWidth !== undefined) { + isSuitMinWidth = screenWidth > this.props.minWidth + } + + if (this.props.maxWidth !== null && this.props.maxWidth !== undefined) { + isSuitMaxWidth = screenWidth < this.props.maxWidth + } + + if (this.props.minHeight !== null && this.props.minHeight !== undefined) { + isSuitMinHeight = screenHeight > this.props.minHeight + } + + if (this.props.maxHeight !== null && this.props.maxHeight !== undefined) { + isSuitMaxHeight = screenHeight < this.props.maxHeight + } + + if (this.props.width !== null&& this.props.width !== undefined) { + isSuitWidth = screenWidth === this.props.width + } + + if (this.props.height !== null&& this.props.height !== undefined) { + isSuitHeight = screenHeight === this.props.height + } + + const isAllSuit = isSuitMinWidth && isSuitMaxWidth && isSuitMinHeight && isSuitMaxHeight && isSuitWidth && isSuitHeight + + // console.log('isSuitMinWidth ' + isSuitMinWidth + ' isSuitMaxWidth ' + isSuitMaxWidth + ' isSuitMinHeight ' + isSuitMinHeight + ' isSuitMaxHeight ' + isSuitMaxHeight + ' isSuitWidth ' + isSuitWidth + ' isSuitHeight ' + isSuitHeight) + + this.setState({ isAllSuit: isAllSuit }) + } + + render (): React.ReactNode { + const { isAllSuit } = this.state + return (isAllSuit ? this.props.children : null) + } + +} diff --git a/packages/taro-components-mpharmony/src/index.ts b/packages/taro-components-mpharmony/src/index.ts index 215979e90b3d..f7c18875c7dd 100644 --- a/packages/taro-components-mpharmony/src/index.ts +++ b/packages/taro-components-mpharmony/src/index.ts @@ -35,7 +35,6 @@ export { LivePusher } from '@tarojs/components/lib/react' export { Login } from '@tarojs/components/lib/react' export { Lottie } from '@tarojs/components/lib/react' export { Map } from '@tarojs/components/lib/react' -export { MatchMedia } from '@tarojs/components/lib/react' export { MovableArea, MovableView } from '@tarojs/components/lib/react' export { NavigationBar } from '@tarojs/components/lib/react' export { Navigator } from '@tarojs/components/lib/react' @@ -68,4 +67,5 @@ export { WebView } from '@tarojs/components/lib/react' export * from './components/block/block' export * from './components/grid/grid' export * from './components/list/list' +export { MatchMedia } from './components/match-media/match-media' export { default as PageContainer } from './components/page-container/page-container' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aeb8cd087e23..eda456bd4323 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2249,6 +2249,9 @@ importers: react-resizable: specifier: ^3.0.4 version: registry.npmjs.org/react-resizable@3.0.5(react-dom@18.2.0)(react@18.2.0) + react-responsive: + specifier: ^9.0.2 + version: registry.npmjs.org/react-responsive@9.0.2(react@18.2.0) swiper: specifier: 6.8.0 version: registry.npmjs.org/swiper@6.8.0 @@ -8553,7 +8556,6 @@ packages: name: '@discoveryjs/json-ext' version: 0.5.7 engines: {node: '>=10.0.0'} - dev: true registry.npmjs.org/@egjs/hammerjs@2.0.17: resolution: {integrity: sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz} @@ -10783,7 +10785,6 @@ packages: resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz} name: '@leichtgewicht/ip-codec' version: 2.0.4 - dev: true registry.npmjs.org/@mdn/browser-compat-data@5.2.56: resolution: {integrity: sha512-1Pu6qcdJ1tQApjhWONtf8XtXH4bG9qnRyry+mYzNgZhfawoO2ODJWasvDf4pgEPlaHbxxFuZFL5l3UeKCdS3Xg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.2.56.tgz} @@ -18527,7 +18528,6 @@ packages: dependencies: webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) webpack-cli: registry.npmjs.org/webpack-cli@5.0.1(webpack-dev-server@4.13.1)(webpack@5.78.0) - dev: true registry.npmjs.org/@webpack-cli/info@2.0.2(webpack-cli@5.0.1)(webpack@5.78.0): resolution: {integrity: sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz} @@ -18541,7 +18541,6 @@ packages: dependencies: webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) webpack-cli: registry.npmjs.org/webpack-cli@5.0.1(webpack-dev-server@4.13.1)(webpack@5.78.0) - dev: true registry.npmjs.org/@webpack-cli/serve@2.0.5(webpack-cli@5.0.1)(webpack-dev-server@4.13.1)(webpack@5.78.0): resolution: {integrity: sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz} @@ -18560,7 +18559,6 @@ packages: webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) webpack-cli: registry.npmjs.org/webpack-cli@5.0.1(webpack-dev-server@4.13.1)(webpack@5.78.0) webpack-dev-server: registry.npmjs.org/webpack-dev-server@4.13.1(webpack-cli@5.0.1)(webpack@5.78.0) - dev: true registry.npmjs.org/@wessberg/stringutil@1.0.19: resolution: {integrity: sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@wessberg/stringutil/-/stringutil-1.0.19.tgz} @@ -21795,7 +21793,6 @@ packages: dns-equal: registry.npmjs.org/dns-equal@1.0.0 fast-deep-equal: registry.npmjs.org/fast-deep-equal@3.1.3 multicast-dns: registry.npmjs.org/multicast-dns@7.2.5 - dev: true registry.npmjs.org/bonjour@3.5.0: resolution: {integrity: sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz} @@ -23447,7 +23444,6 @@ packages: name: connect-history-api-fallback version: 2.0.0 engines: {node: '>=0.8'} - dev: true registry.npmjs.org/connect@3.7.0: resolution: {integrity: sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/connect/-/connect-3.7.0.tgz} @@ -24495,7 +24491,7 @@ packages: postcss-modules-values: registry.npmjs.org/postcss-modules-values@4.0.0(postcss@8.4.23) postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0 semver: registry.npmjs.org/semver@7.5.0 - webpack: registry.npmjs.org/webpack@5.78.0 + webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) registry.npmjs.org/css-mediaquery@0.1.2: resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz} @@ -25803,7 +25799,6 @@ packages: engines: {node: '>=6'} dependencies: '@leichtgewicht/ip-codec': registry.npmjs.org/@leichtgewicht/ip-codec@2.0.4 - dev: true registry.npmjs.org/dns-txt@2.0.2: resolution: {integrity: sha512-Ix5PrWjphuSoUXV/Zv5gaFHjnaJtb02F2+Si3Ht9dyJ87+Z/lMmy+dpNHtTGraNK958ndXq2i+GLkWsWHcKaBQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz} @@ -31049,7 +31044,7 @@ packages: lodash: registry.npmjs.org/lodash@4.17.21 pretty-error: registry.npmjs.org/pretty-error@4.0.0 tapable: registry.npmjs.org/tapable@2.2.1 - webpack: registry.npmjs.org/webpack@5.78.0 + webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) registry.npmjs.org/html@1.0.0: resolution: {integrity: sha512-lw/7YsdKiP3kk5PnR1INY17iJuzdAtJewxr14ozKJWbbR97znovZ0mh+WEMZ8rjc3lgTK+ID/htTjuyGKB52Kw==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/html/-/html-1.0.0.tgz} @@ -31289,6 +31284,12 @@ packages: hasBin: true dev: true + registry.npmjs.org/hyphenate-style-name@1.0.4: + resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz} + name: hyphenate-style-name + version: 1.0.4 + dev: false + registry.npmjs.org/iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz} name: iconv-lite @@ -31739,7 +31740,6 @@ packages: name: interpret version: 3.1.1 engines: {node: '>=10.13.0'} - dev: true registry.npmjs.org/intersection-observer@0.12.2: resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz} @@ -35204,7 +35204,6 @@ packages: dependencies: picocolors: registry.npmjs.org/picocolors@1.0.0 shell-quote: registry.npmjs.org/shell-quote@1.8.1 - dev: true registry.npmjs.org/lazy-cache@0.2.7: resolution: {integrity: sha512-gkX52wvU/R8DVMMt78ATVPFMJqfW8FPz1GZ1sVHBVQHmu/WvhIWE4cE1GBzhJNFicDeYhnwp6Rl35BcAIM3YOQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz} @@ -36047,6 +36046,14 @@ packages: dev: false optional: true + registry.npmjs.org/matchmediaquery@0.3.1: + resolution: {integrity: sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz} + name: matchmediaquery + version: 0.3.1 + dependencies: + css-mediaquery: registry.npmjs.org/css-mediaquery@0.1.2 + dev: false + registry.npmjs.org/math-random@1.0.4: resolution: {integrity: sha512-rUxjysqif/BZQH2yhd5Aaq7vXMSx9NdEsQcyA07uEzIvxgI7zIr33gGsh+RU0/XjmQpCW7RsVof1vlkvQVCK5A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/math-random/-/math-random-1.0.4.tgz} name: math-random @@ -37549,7 +37556,6 @@ packages: dependencies: dns-packet: registry.npmjs.org/dns-packet@5.6.0 thunky: registry.npmjs.org/thunky@1.1.0 - dev: true registry.npmjs.org/multimatch@4.0.0: resolution: {integrity: sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz} @@ -42846,6 +42852,22 @@ packages: - react-dom dev: false + registry.npmjs.org/react-responsive@9.0.2(react@18.2.0): + resolution: {integrity: sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.2.tgz} + id: registry.npmjs.org/react-responsive/9.0.2 + name: react-responsive + version: 9.0.2 + engines: {node: '>=0.10'} + peerDependencies: + react: '>=16.8.0' + dependencies: + hyphenate-style-name: registry.npmjs.org/hyphenate-style-name@1.0.4 + matchmediaquery: registry.npmjs.org/matchmediaquery@0.3.1 + prop-types: registry.npmjs.org/prop-types@15.8.1 + react: registry.npmjs.org/react@18.2.0 + shallow-equal: registry.npmjs.org/shallow-equal@1.2.1 + dev: false + registry.npmjs.org/react-shallow-renderer@16.15.0(react@18.1.0): resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz} id: registry.npmjs.org/react-shallow-renderer/16.15.0 @@ -43155,7 +43177,6 @@ packages: engines: {node: '>= 10.13.0'} dependencies: resolve: registry.npmjs.org/resolve@1.22.2 - dev: true registry.npmjs.org/recursive-readdir@2.2.3: resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz} @@ -45059,6 +45080,12 @@ packages: dependencies: kind-of: registry.npmjs.org/kind-of@6.0.3 + registry.npmjs.org/shallow-equal@1.2.1: + resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz} + name: shallow-equal + version: 1.2.1 + dev: false + registry.npmjs.org/shallowequal@1.1.0: resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz} name: shallowequal @@ -47284,7 +47311,6 @@ packages: serialize-javascript: registry.npmjs.org/serialize-javascript@6.0.1 terser: registry.npmjs.org/terser@5.17.1 webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) - dev: true registry.npmjs.org/terser-webpack-plugin@5.3.8(esbuild@0.14.54)(webpack@5.69.0): resolution: {integrity: sha512-WiHL3ElchZMsK27P8uIUh4604IgJyAW47LVXGbEoB21DbQcZ+OuMpGjVYnEUaqcWM6dO8uS2qUbA7LSCWqvsbg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.8.tgz} @@ -49764,7 +49790,6 @@ packages: webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) webpack-dev-server: registry.npmjs.org/webpack-dev-server@4.13.1(webpack-cli@5.0.1)(webpack@5.78.0) webpack-merge: registry.npmjs.org/webpack-merge@5.9.0 - dev: true registry.npmjs.org/webpack-dev-middleware@3.7.3(webpack@4.46.0): resolution: {integrity: sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz} @@ -49830,7 +49855,7 @@ packages: mime-types: registry.npmjs.org/mime-types@2.1.35 range-parser: registry.npmjs.org/range-parser@1.2.1 schema-utils: registry.npmjs.org/schema-utils@4.0.1 - webpack: registry.npmjs.org/webpack@5.78.0 + webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) registry.npmjs.org/webpack-dev-server@3.11.0(webpack@4.46.0): resolution: {integrity: sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz} @@ -50042,7 +50067,6 @@ packages: - debug - supports-color - utf-8-validate - dev: true registry.npmjs.org/webpack-dev-server@4.7.4(webpack@5.69.0): resolution: {integrity: sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz} @@ -50193,7 +50217,6 @@ packages: dependencies: clone-deep: registry.npmjs.org/clone-deep@4.0.1 wildcard: registry.npmjs.org/wildcard@2.0.1 - dev: true registry.npmjs.org/webpack-sources@1.4.3: resolution: {integrity: sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz} @@ -50396,7 +50419,6 @@ packages: - '@swc/core' - esbuild - uglify-js - dev: true registry.npmjs.org/webpack@5.78.0(esbuild@0.14.54): resolution: {integrity: sha512-gT5DP72KInmE/3azEaQrISjTvLYlSM0j1Ezhht/KLVkrqtv10JoP/RXhwmX/frrutOPuSq3o5Vq0ehR/4Vmd1g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack/-/webpack-5.78.0.tgz} @@ -50679,7 +50701,6 @@ packages: resolution: {integrity: sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz} name: wildcard version: 2.0.1 - dev: true registry.npmjs.org/wonka@4.0.15: resolution: {integrity: sha512-U0IUQHKXXn6PFo9nqsHphVCE5m3IntqZNB9Jjn7EB1lrR7YTDY3YWgFvEvwniTzXSvOH/XMzAZaIfJF/LvHYXg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz} From c35688123488037f53e45e34854a896d8543ddd4 Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Wed, 5 Jul 2023 14:19:37 +0800 Subject: [PATCH 08/11] =?UTF-8?q?feat:=20=E8=A7=A3=E5=86=B3GridView?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E4=BA=8B=E4=BB=B6=E5=B4=A9=E6=BA=83=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../taro-components-mpharmony/package.json | 3 ++- .../src/components/grid/grid.tsx | 12 ++++++++-- .../share-element/share-element.tsx | 16 +++++++++++++ pnpm-lock.yaml | 24 ++++++++++++++++--- 4 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 packages/taro-components-mpharmony/src/components/share-element/share-element.tsx diff --git a/packages/taro-components-mpharmony/package.json b/packages/taro-components-mpharmony/package.json index 388473529035..0af208f7c930 100644 --- a/packages/taro-components-mpharmony/package.json +++ b/packages/taro-components-mpharmony/package.json @@ -89,6 +89,7 @@ "typescript": "^5.0.4", "webpack": "^5.76.0", "webpack-cli": "^5.0.1", - "webpack-dev-server": "^4.13.1" + "webpack-dev-server": "^4.13.1", + "react-grid-layout": "^1.3.4" } } diff --git a/packages/taro-components-mpharmony/src/components/grid/grid.tsx b/packages/taro-components-mpharmony/src/components/grid/grid.tsx index 31ffd0bc6e55..cadeba9284b5 100644 --- a/packages/taro-components-mpharmony/src/components/grid/grid.tsx +++ b/packages/taro-components-mpharmony/src/components/grid/grid.tsx @@ -1,6 +1,6 @@ import '../../style/components/grid.scss' -import React, { PureComponent, ReactNode } from 'react' +import React, { PureComponent, ReactElement, ReactNode } from 'react' import GridLayout from 'react-grid-layout' interface Props { @@ -29,6 +29,7 @@ export class GridView extends PureComponent { if (this.props.crossAxisGap !== undefined) { crossAxisGap = this.props.crossAxisGap } + const childs: ReactElement[] = [] const layout: { i: string | number | null, x: number, y: number, w: number, h: number, static: boolean }[] = [] let column = 3 @@ -48,6 +49,12 @@ export class GridView extends PureComponent { const h = child.props.h layout.push({ i: i, x: x, y: y, w, h, static: true }) + childs.push( +
+ {child} +
+ ) + count++ // console.log('count ' + count + ' column ' + column + ' x: ' + x + ' y: ' + y + ' w: ' + w + ' h: ' + h + ' child ' + typeof child + ' i: ' + child.key) } @@ -63,7 +70,8 @@ export class GridView extends PureComponent { margin={[mainAxisGap, crossAxisGap]} width={this.props.width} > - {this.props.children} + {childs} + ) } diff --git a/packages/taro-components-mpharmony/src/components/share-element/share-element.tsx b/packages/taro-components-mpharmony/src/components/share-element/share-element.tsx new file mode 100644 index 000000000000..f5b4ba41b1c4 --- /dev/null +++ b/packages/taro-components-mpharmony/src/components/share-element/share-element.tsx @@ -0,0 +1,16 @@ +import React, { PureComponent, ReactNode } from 'react' + +interface Props { + children: ReactNode +} + +export class ShareElement extends PureComponent { + context: unknown + readonly props: Readonly + refs: { [p: string]: React.ReactInstance } + + render (): React.ReactNode { + return this.props.children + } + +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eda456bd4323..c1730fa3ed99 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8556,6 +8556,7 @@ packages: name: '@discoveryjs/json-ext' version: 0.5.7 engines: {node: '>=10.0.0'} + dev: true registry.npmjs.org/@egjs/hammerjs@2.0.17: resolution: {integrity: sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz} @@ -10785,6 +10786,7 @@ packages: resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz} name: '@leichtgewicht/ip-codec' version: 2.0.4 + dev: true registry.npmjs.org/@mdn/browser-compat-data@5.2.56: resolution: {integrity: sha512-1Pu6qcdJ1tQApjhWONtf8XtXH4bG9qnRyry+mYzNgZhfawoO2ODJWasvDf4pgEPlaHbxxFuZFL5l3UeKCdS3Xg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@mdn/browser-compat-data/-/browser-compat-data-5.2.56.tgz} @@ -18528,6 +18530,7 @@ packages: dependencies: webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) webpack-cli: registry.npmjs.org/webpack-cli@5.0.1(webpack-dev-server@4.13.1)(webpack@5.78.0) + dev: true registry.npmjs.org/@webpack-cli/info@2.0.2(webpack-cli@5.0.1)(webpack@5.78.0): resolution: {integrity: sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz} @@ -18541,6 +18544,7 @@ packages: dependencies: webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) webpack-cli: registry.npmjs.org/webpack-cli@5.0.1(webpack-dev-server@4.13.1)(webpack@5.78.0) + dev: true registry.npmjs.org/@webpack-cli/serve@2.0.5(webpack-cli@5.0.1)(webpack-dev-server@4.13.1)(webpack@5.78.0): resolution: {integrity: sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz} @@ -18559,6 +18563,7 @@ packages: webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) webpack-cli: registry.npmjs.org/webpack-cli@5.0.1(webpack-dev-server@4.13.1)(webpack@5.78.0) webpack-dev-server: registry.npmjs.org/webpack-dev-server@4.13.1(webpack-cli@5.0.1)(webpack@5.78.0) + dev: true registry.npmjs.org/@wessberg/stringutil@1.0.19: resolution: {integrity: sha512-9AZHVXWlpN8Cn9k5BC/O0Dzb9E9xfEMXzYrNunwvkUTvuK7xgQPVRZpLo+jWCOZ5r8oBa8NIrHuPEu1hzbb6bg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/@wessberg/stringutil/-/stringutil-1.0.19.tgz} @@ -21793,6 +21798,7 @@ packages: dns-equal: registry.npmjs.org/dns-equal@1.0.0 fast-deep-equal: registry.npmjs.org/fast-deep-equal@3.1.3 multicast-dns: registry.npmjs.org/multicast-dns@7.2.5 + dev: true registry.npmjs.org/bonjour@3.5.0: resolution: {integrity: sha512-RaVTblr+OnEli0r/ud8InrU7D+G0y6aJhlxaLa6Pwty4+xoxboF1BsUI45tujvRpbj9dQVoglChqonGAsjEBYg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz} @@ -23444,6 +23450,7 @@ packages: name: connect-history-api-fallback version: 2.0.0 engines: {node: '>=0.8'} + dev: true registry.npmjs.org/connect@3.7.0: resolution: {integrity: sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/connect/-/connect-3.7.0.tgz} @@ -24491,7 +24498,7 @@ packages: postcss-modules-values: registry.npmjs.org/postcss-modules-values@4.0.0(postcss@8.4.23) postcss-value-parser: registry.npmjs.org/postcss-value-parser@4.2.0 semver: registry.npmjs.org/semver@7.5.0 - webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) + webpack: registry.npmjs.org/webpack@5.78.0 registry.npmjs.org/css-mediaquery@0.1.2: resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz} @@ -25799,6 +25806,7 @@ packages: engines: {node: '>=6'} dependencies: '@leichtgewicht/ip-codec': registry.npmjs.org/@leichtgewicht/ip-codec@2.0.4 + dev: true registry.npmjs.org/dns-txt@2.0.2: resolution: {integrity: sha512-Ix5PrWjphuSoUXV/Zv5gaFHjnaJtb02F2+Si3Ht9dyJ87+Z/lMmy+dpNHtTGraNK958ndXq2i+GLkWsWHcKaBQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz} @@ -31044,7 +31052,7 @@ packages: lodash: registry.npmjs.org/lodash@4.17.21 pretty-error: registry.npmjs.org/pretty-error@4.0.0 tapable: registry.npmjs.org/tapable@2.2.1 - webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) + webpack: registry.npmjs.org/webpack@5.78.0 registry.npmjs.org/html@1.0.0: resolution: {integrity: sha512-lw/7YsdKiP3kk5PnR1INY17iJuzdAtJewxr14ozKJWbbR97znovZ0mh+WEMZ8rjc3lgTK+ID/htTjuyGKB52Kw==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/html/-/html-1.0.0.tgz} @@ -31740,6 +31748,7 @@ packages: name: interpret version: 3.1.1 engines: {node: '>=10.13.0'} + dev: true registry.npmjs.org/intersection-observer@0.12.2: resolution: {integrity: sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.12.2.tgz} @@ -35204,6 +35213,7 @@ packages: dependencies: picocolors: registry.npmjs.org/picocolors@1.0.0 shell-quote: registry.npmjs.org/shell-quote@1.8.1 + dev: true registry.npmjs.org/lazy-cache@0.2.7: resolution: {integrity: sha512-gkX52wvU/R8DVMMt78ATVPFMJqfW8FPz1GZ1sVHBVQHmu/WvhIWE4cE1GBzhJNFicDeYhnwp6Rl35BcAIM3YOQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz} @@ -37556,6 +37566,7 @@ packages: dependencies: dns-packet: registry.npmjs.org/dns-packet@5.6.0 thunky: registry.npmjs.org/thunky@1.1.0 + dev: true registry.npmjs.org/multimatch@4.0.0: resolution: {integrity: sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz} @@ -43177,6 +43188,7 @@ packages: engines: {node: '>= 10.13.0'} dependencies: resolve: registry.npmjs.org/resolve@1.22.2 + dev: true registry.npmjs.org/recursive-readdir@2.2.3: resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz} @@ -47311,6 +47323,7 @@ packages: serialize-javascript: registry.npmjs.org/serialize-javascript@6.0.1 terser: registry.npmjs.org/terser@5.17.1 webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) + dev: true registry.npmjs.org/terser-webpack-plugin@5.3.8(esbuild@0.14.54)(webpack@5.69.0): resolution: {integrity: sha512-WiHL3ElchZMsK27P8uIUh4604IgJyAW47LVXGbEoB21DbQcZ+OuMpGjVYnEUaqcWM6dO8uS2qUbA7LSCWqvsbg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.8.tgz} @@ -49790,6 +49803,7 @@ packages: webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) webpack-dev-server: registry.npmjs.org/webpack-dev-server@4.13.1(webpack-cli@5.0.1)(webpack@5.78.0) webpack-merge: registry.npmjs.org/webpack-merge@5.9.0 + dev: true registry.npmjs.org/webpack-dev-middleware@3.7.3(webpack@4.46.0): resolution: {integrity: sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz} @@ -49855,7 +49869,7 @@ packages: mime-types: registry.npmjs.org/mime-types@2.1.35 range-parser: registry.npmjs.org/range-parser@1.2.1 schema-utils: registry.npmjs.org/schema-utils@4.0.1 - webpack: registry.npmjs.org/webpack@5.78.0(@swc/core@1.3.42)(webpack-cli@5.0.1) + webpack: registry.npmjs.org/webpack@5.78.0 registry.npmjs.org/webpack-dev-server@3.11.0(webpack@4.46.0): resolution: {integrity: sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz} @@ -50067,6 +50081,7 @@ packages: - debug - supports-color - utf-8-validate + dev: true registry.npmjs.org/webpack-dev-server@4.7.4(webpack@5.69.0): resolution: {integrity: sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz} @@ -50217,6 +50232,7 @@ packages: dependencies: clone-deep: registry.npmjs.org/clone-deep@4.0.1 wildcard: registry.npmjs.org/wildcard@2.0.1 + dev: true registry.npmjs.org/webpack-sources@1.4.3: resolution: {integrity: sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz} @@ -50419,6 +50435,7 @@ packages: - '@swc/core' - esbuild - uglify-js + dev: true registry.npmjs.org/webpack@5.78.0(esbuild@0.14.54): resolution: {integrity: sha512-gT5DP72KInmE/3azEaQrISjTvLYlSM0j1Ezhht/KLVkrqtv10JoP/RXhwmX/frrutOPuSq3o5Vq0ehR/4Vmd1g==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/webpack/-/webpack-5.78.0.tgz} @@ -50701,6 +50718,7 @@ packages: resolution: {integrity: sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz} name: wildcard version: 2.0.1 + dev: true registry.npmjs.org/wonka@4.0.15: resolution: {integrity: sha512-U0IUQHKXXn6PFo9nqsHphVCE5m3IntqZNB9Jjn7EB1lrR7YTDY3YWgFvEvwniTzXSvOH/XMzAZaIfJF/LvHYXg==, registry: https://registry.yarnpkg.com/, tarball: https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz} From 3959f7bafc0e93b85cb48d3f95f1d3ea1ad526fd Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Wed, 5 Jul 2023 14:52:08 +0800 Subject: [PATCH 09/11] =?UTF-8?q?feat:=20=E6=95=B4=E7=90=86example?= =?UTF-8?q?=E5=B7=A5=E7=A8=8B=EF=BC=8C=E5=88=86=E9=A1=B5=E9=9D=A2=E6=98=BE?= =?UTF-8?q?=E7=A4=BAdemo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/mini-program-example/src/app.config.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/examples/mini-program-example/src/app.config.ts b/examples/mini-program-example/src/app.config.ts index 15c683b2964d..9fcc1bcbc992 100644 --- a/examples/mini-program-example/src/app.config.ts +++ b/examples/mini-program-example/src/app.config.ts @@ -1,6 +1,10 @@ export default defineAppConfig({ pages: [ - 'pages/index/index' + 'pages/index/index', + 'pages/grid-view/index', + 'pages/list-view/index', + 'pages/page-container/index', + 'pages/match-media/index' ], window: { backgroundTextStyle: 'light', From 2d04f9f4dd75873d3de55c0fa775abe0be75f784 Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Wed, 5 Jul 2023 14:52:17 +0800 Subject: [PATCH 10/11] =?UTF-8?q?feat:=20=E6=95=B4=E7=90=86example?= =?UTF-8?q?=E5=B7=A5=E7=A8=8B=EF=BC=8C=E5=88=86=E9=A1=B5=E9=9D=A2=E6=98=BE?= =?UTF-8?q?=E7=A4=BAdemo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/grid-view/index.config.ts | 3 + .../src/pages/grid-view/index.scss | 22 +++ .../src/pages/grid-view/index.tsx | 73 ++++++++ .../src/pages/index/index.scss | 4 + .../src/pages/index/index.tsx | 172 +++--------------- .../src/pages/list-view/index.config.ts | 3 + .../src/pages/list-view/index.scss | 22 +++ .../src/pages/list-view/index.tsx | 68 +++++++ .../src/pages/match-media/index.config.ts | 3 + .../src/pages/match-media/index.scss | 22 +++ .../src/pages/match-media/index.tsx | 19 ++ .../src/pages/page-container/index.config.ts | 3 + .../src/pages/page-container/index.scss | 22 +++ .../src/pages/page-container/index.tsx | 114 ++++++++++++ .../src/pages/transition/base-styles.css | 159 ++++++++++++++++ .../src/pages/transition/index.html | 22 +++ .../src/pages/transition/page-2.html | 32 ++++ .../src/pages/transition/script.js | 25 +++ .../src/pages/transition/styles.css | 25 +++ .../src/pages/transition/utils.js | 87 +++++++++ 20 files changed, 754 insertions(+), 146 deletions(-) create mode 100644 examples/mini-program-example/src/pages/grid-view/index.config.ts create mode 100644 examples/mini-program-example/src/pages/grid-view/index.scss create mode 100644 examples/mini-program-example/src/pages/grid-view/index.tsx create mode 100644 examples/mini-program-example/src/pages/list-view/index.config.ts create mode 100644 examples/mini-program-example/src/pages/list-view/index.scss create mode 100644 examples/mini-program-example/src/pages/list-view/index.tsx create mode 100644 examples/mini-program-example/src/pages/match-media/index.config.ts create mode 100644 examples/mini-program-example/src/pages/match-media/index.scss create mode 100644 examples/mini-program-example/src/pages/match-media/index.tsx create mode 100644 examples/mini-program-example/src/pages/page-container/index.config.ts create mode 100644 examples/mini-program-example/src/pages/page-container/index.scss create mode 100644 examples/mini-program-example/src/pages/page-container/index.tsx create mode 100644 examples/mini-program-example/src/pages/transition/base-styles.css create mode 100644 examples/mini-program-example/src/pages/transition/index.html create mode 100644 examples/mini-program-example/src/pages/transition/page-2.html create mode 100644 examples/mini-program-example/src/pages/transition/script.js create mode 100644 examples/mini-program-example/src/pages/transition/styles.css create mode 100644 examples/mini-program-example/src/pages/transition/utils.js diff --git a/examples/mini-program-example/src/pages/grid-view/index.config.ts b/examples/mini-program-example/src/pages/grid-view/index.config.ts new file mode 100644 index 000000000000..fe7e87d120ab --- /dev/null +++ b/examples/mini-program-example/src/pages/grid-view/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面' +}) diff --git a/examples/mini-program-example/src/pages/grid-view/index.scss b/examples/mini-program-example/src/pages/grid-view/index.scss new file mode 100644 index 000000000000..46d2686d13f4 --- /dev/null +++ b/examples/mini-program-example/src/pages/grid-view/index.scss @@ -0,0 +1,22 @@ +@import '@tarojs/components-mpharmony/dist/style/components/page-container'; + + +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/grid-view/index.tsx b/examples/mini-program-example/src/pages/grid-view/index.tsx new file mode 100644 index 000000000000..65c1571d6e3f --- /dev/null +++ b/examples/mini-program-example/src/pages/grid-view/index.tsx @@ -0,0 +1,73 @@ +import {View, Image, MatchMedia, GridView, Text} from '@tarojs/components' +import {useLoad} from '@tarojs/taro' +import './index.scss' +import React from "react"; + +const grid_data = [ + { + image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png', + value: '领取中心', + w: 1, + h: 1 + }, + { + image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png', + value: '找折扣', + w: 1, + h: 1 + }, + { + image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png', + value: '领会员', + w: 1, + h: 1 + }, + { + image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png', + value: '新品首发', + w: 2, + h: 2 + }, + { + image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png', + value: '领京豆', + w: 1, + h: 1 + }, + { + image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png', + value: '手机馆', + w: 1, + h: 1 + } +] + +export default function Index() { + useLoad(() => { + console.log('Page loaded.') + }) + + const gridView = grid_data.map((childItem, index) => ( + { + console.log('w ' + index + ' w ' + childItem.w + ' h ' + childItem.h) + }}> + {childItem.image && ( + + )} + + {childItem.value} + + + )); + + return ( + + + {gridView} + + + ) +} diff --git a/examples/mini-program-example/src/pages/index/index.scss b/examples/mini-program-example/src/pages/index/index.scss index 46d2686d13f4..a84cd9aa25b0 100644 --- a/examples/mini-program-example/src/pages/index/index.scss +++ b/examples/mini-program-example/src/pages/index/index.scss @@ -20,3 +20,7 @@ +.buttonStyle { + width: 200px; +} + diff --git a/examples/mini-program-example/src/pages/index/index.tsx b/examples/mini-program-example/src/pages/index/index.tsx index 77f2ff3f0f22..4e1e5b90439b 100644 --- a/examples/mini-program-example/src/pages/index/index.tsx +++ b/examples/mini-program-example/src/pages/index/index.tsx @@ -1,42 +1,9 @@ -import {View, Text, Image, TestBlock, GridView, ListView, Button, PageContainer} from '@tarojs/components-mpharmony' - -import {useLoad} from '@tarojs/taro' +import {View, Text,Image,GridView,ListView, Button, PageContainer,MatchMedia} from '@tarojs/components' +import Taro, {useLoad} from '@tarojs/taro' import './index.scss' -import {useState} from "react"; - -const grid_data = [ - { - image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png', - value: '领取中心' - }, - { - image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png', - value: '找折扣' - }, - { - image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png', - value: '领会员' - }, - { - image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png', - value: '新品首发' - }, - { - image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png', - value: '领京豆' - }, - { - image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png', - value: '手机馆' - } -] +import React, {useState} from "react"; export default function Index() { - const [container_show, setContainerShow] = useState(false); - const [position, setTransitionPosition] = useState('bottom'); - const [round, setRound] = useState(false); - const [overlay, setOverlay] = useState(false); - const [overlayStyle, setOverlayStyle] = useState('overlay_black'); useLoad(() => { console.log('Page loaded.') @@ -45,116 +12,29 @@ export default function Index() { return ( Hello world! - Hello world! - - ( - - (console.log("childItem " + childItem.value + " i " + i + " index " + index))}> - {childItem.image && ( - - )} - - {childItem.value} - - - - )}/> - - ( - - (console.log("childItem " + childItem.value + " i " + i))}> - {childItem.image && ( - - )} - - {childItem.value} - - - - )}/> - - ( setContainerShow(false))} - bindbeforeenter={()=>{ console.log("==bindbeforeenter==")}} - bindenter={()=>{ console.log("==bindenter==")}} - bindafterenter={()=>{ console.log("==bindafterenter==")}} - bindbeforeleave={()=>{ console.log("==bindbeforeleave==")}} - bindleave={()=>{ console.log("==bindleave==")}} - bindafterleave={()=>{ console.log("==bindafterleave==")}} - duration={2000} - zIndex={20} - customStyle={'customStyle'} - > - Hello world! - Hello world! - Hello world! - Hello world! - - - - - 弹出位置 - - - - - - - - - - 弹出圆角 - - - - 遮罩层 - - - - - - - - - + + + + + + + ) diff --git a/examples/mini-program-example/src/pages/list-view/index.config.ts b/examples/mini-program-example/src/pages/list-view/index.config.ts new file mode 100644 index 000000000000..fe7e87d120ab --- /dev/null +++ b/examples/mini-program-example/src/pages/list-view/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面' +}) diff --git a/examples/mini-program-example/src/pages/list-view/index.scss b/examples/mini-program-example/src/pages/list-view/index.scss new file mode 100644 index 000000000000..46d2686d13f4 --- /dev/null +++ b/examples/mini-program-example/src/pages/list-view/index.scss @@ -0,0 +1,22 @@ +@import '@tarojs/components-mpharmony/dist/style/components/page-container'; + + +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/list-view/index.tsx b/examples/mini-program-example/src/pages/list-view/index.tsx new file mode 100644 index 000000000000..16534e26ab2b --- /dev/null +++ b/examples/mini-program-example/src/pages/list-view/index.tsx @@ -0,0 +1,68 @@ +import {View, Image, Text, ListView} from '@tarojs/components' +import {useLoad} from '@tarojs/taro' +import './index.scss' +import React from "react"; + +const list_data = [ + { + image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png', + value: '领取中心', + w: 1, + h: 1 + }, + { + image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png', + value: '找折扣', + w: 1, + h: 1 + }, + { + image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png', + value: '领会员', + w: 1, + h: 1 + }, + { + image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png', + value: '新品首发', + w: 2, + h: 2 + }, + { + image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png', + value: '领京豆', + w: 1, + h: 1 + }, + { + image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png', + value: '手机馆', + w: 1, + h: 1 + } +] + +export default function Index() { + useLoad(() => { + console.log('Page loaded.') + }) + + return ( + + ( + + (console.log("childItem " + childItem.value + " i " + i))}> + {childItem.image && ( + + )} + + {childItem.value} + + + )}/> + + ) +} diff --git a/examples/mini-program-example/src/pages/match-media/index.config.ts b/examples/mini-program-example/src/pages/match-media/index.config.ts new file mode 100644 index 000000000000..fe7e87d120ab --- /dev/null +++ b/examples/mini-program-example/src/pages/match-media/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面' +}) diff --git a/examples/mini-program-example/src/pages/match-media/index.scss b/examples/mini-program-example/src/pages/match-media/index.scss new file mode 100644 index 000000000000..46d2686d13f4 --- /dev/null +++ b/examples/mini-program-example/src/pages/match-media/index.scss @@ -0,0 +1,22 @@ +@import '@tarojs/components-mpharmony/dist/style/components/page-container'; + + +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/match-media/index.tsx b/examples/mini-program-example/src/pages/match-media/index.tsx new file mode 100644 index 000000000000..062dbf51f1b8 --- /dev/null +++ b/examples/mini-program-example/src/pages/match-media/index.tsx @@ -0,0 +1,19 @@ +import {View, Image, MatchMedia} from '@tarojs/components' +import {useLoad} from '@tarojs/taro' +import './index.scss' +import React from "react"; + +export default function Index() { + useLoad(() => { + console.log('Page loaded.') + }) + + + return ( + + + + + + ) +} diff --git a/examples/mini-program-example/src/pages/page-container/index.config.ts b/examples/mini-program-example/src/pages/page-container/index.config.ts new file mode 100644 index 000000000000..fe7e87d120ab --- /dev/null +++ b/examples/mini-program-example/src/pages/page-container/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面' +}) diff --git a/examples/mini-program-example/src/pages/page-container/index.scss b/examples/mini-program-example/src/pages/page-container/index.scss new file mode 100644 index 000000000000..46d2686d13f4 --- /dev/null +++ b/examples/mini-program-example/src/pages/page-container/index.scss @@ -0,0 +1,22 @@ +@import '@tarojs/components-mpharmony/dist/style/components/page-container'; + + +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/page-container/index.tsx b/examples/mini-program-example/src/pages/page-container/index.tsx new file mode 100644 index 000000000000..3051e3b7f92f --- /dev/null +++ b/examples/mini-program-example/src/pages/page-container/index.tsx @@ -0,0 +1,114 @@ +import {View, Text, Button, PageContainer} from '@tarojs/components' +import {useLoad} from '@tarojs/taro' +import './index.scss' +import React, {useState} from "react"; + + +export default function Index() { + + const [container_show, setContainerShow] = useState(false); + const [position, setTransitionPosition] = useState('bottom'); + const [round, setRound] = useState(false); + const [overlay, setOverlay] = useState(false); + const [overlayStyle, setOverlayStyle] = useState('overlay_black'); + + useLoad(() => { + console.log('Page loaded.') + }) + + + return ( + + (setContainerShow(false))} + bindbeforeenter={() => { + console.log("==bindbeforeenter==") + }} + bindenter={() => { + console.log("==bindenter==") + }} + bindafterenter={() => { + console.log("==bindafterenter==") + }} + bindbeforeleave={() => { + console.log("==bindbeforeleave==") + }} + bindleave={() => { + console.log("==bindleave==") + }} + bindafterleave={() => { + console.log("==bindafterleave==") + }} + duration={2000} + zIndex={20} + customStyle={'customStyle'} + > + Hello world! + Hello world! + Hello world! + Hello world! + + + + + + 弹出位置 + + + + + + + + + + 弹出圆角 + + + + 遮罩层 + + + + + + + + + + ) +} diff --git a/examples/mini-program-example/src/pages/transition/base-styles.css b/examples/mini-program-example/src/pages/transition/base-styles.css new file mode 100644 index 000000000000..f3ca7a39425a --- /dev/null +++ b/examples/mini-program-example/src/pages/transition/base-styles.css @@ -0,0 +1,159 @@ +:root { + --white: #fff; + --primary-text: #212121; + --secondary-text: #757575; + --divider: #bdbdbd; + --primary-color: #673ab7; + --primary-dark: #512da8; + --primary-light: #d1c4e9; + --accent-color: #ff9800; + --content-padding: 1.2rem; + + color: var(--primary-text); + font-family: system-ui, sans-serif; + font-size: 16px; + line-height: 1.5; +} + +body { + margin: 0; +} + +* { + -webkit-tap-highlight-color: transparent; +} + +.main-header { + align-items: center; + background: var(--primary-color); + color: var(--white); + contain: paint; + display: grid; + height: 54px; + padding: 0 var(--content-padding); +} + +.back-and-title { + align-items: center; + display: grid; + gap: 0.3rem; + grid-template-columns: 31px 1fr; + color: inherit; + text-decoration: none; +} + +.content { + padding: var(--content-padding); +} + +.content-title { + font-size: 1.6rem; + font-weight: 600; + margin: 0; + max-width: 43ch; +} + +.back-icon { + display: block; + fill: var(--white); +} + +.gallery { + display: grid; + gap: var(--content-padding); + grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); + margin: 1rem 0; + padding: 0; +} + +.gallery > li { + display: block; + box-shadow: 0 5px 12px rgb(0 0 0 / 34%); +} + +.gallery a { + color: inherit; + text-decoration: none; +} + +.gallery img { + display: block; + width: 100%; + height: auto; + aspect-ratio: 16/9; +} + +.square-gallery { + grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); +} + +.square-gallery img { + aspect-ratio: 1/1; + object-fit: cover; +} + +.gallery-item-title { + padding: 1rem; + display: block; + text-align: center; +} + +.banner-img img { + display: block; + width: 100%; + height: auto; + max-width: 1170px; +} + +.banner-img { + display: block; + background: var(--divider); +} + +.content-alt { + background: #d4bbff; +} + +.body-grid { + height: -webkit-fill-available; +} + +.body-grid body { + height: 100vh; + height: -webkit-fill-available; + display: grid; + grid-template-rows: max-content 1fr; +} + +@media (min-width: 530px) { + .content-and-nav { + display: grid; + grid-template-columns: 1fr 180px; + } +} + +.main-nav { + background: #d4bbff; +} + +.main-nav ul { + margin: 0; + padding: 0; +} + +.main-nav li { + display: block; +} + +.main-nav li a { + display: grid; + grid-template-columns: max-content 1fr; + gap: 0.7rem; + padding: 1rem; + color: #000; + text-decoration: none; +} + +.main-nav li a::before { + content: '➡️'; +} diff --git a/examples/mini-program-example/src/pages/transition/index.html b/examples/mini-program-example/src/pages/transition/index.html new file mode 100644 index 000000000000..60dcc8a639db --- /dev/null +++ b/examples/mini-program-example/src/pages/transition/index.html @@ -0,0 +1,22 @@ + + + + + + + Cross fade demo + + + + + +
+ Demo site +
+
+

Page 1

+

This is the content for page 1.

+

Why not check out page 2?

+
+ + diff --git a/examples/mini-program-example/src/pages/transition/page-2.html b/examples/mini-program-example/src/pages/transition/page-2.html new file mode 100644 index 000000000000..30dfa0add0d6 --- /dev/null +++ b/examples/mini-program-example/src/pages/transition/page-2.html @@ -0,0 +1,32 @@ + + + + + Title + + + + + +
+ + + + + Demo site + +
+
+

Page 2

+

This is the content for page 2.

+
    +
  1. It
    2. +
  2. also
    3. +
  3. has
    4. +
  4. a
    5. +
  5. list!
    6. +
+

Ok, that's enough fun, you can go back to page 1.

+
+ + diff --git a/examples/mini-program-example/src/pages/transition/script.js b/examples/mini-program-example/src/pages/transition/script.js new file mode 100644 index 000000000000..11dc97c9ebb1 --- /dev/null +++ b/examples/mini-program-example/src/pages/transition/script.js @@ -0,0 +1,25 @@ +import { getPageContent, onLinkNavigate } from './utils.js'; + +onLinkNavigate(async ({ toPath }) => { + const content = await getPageContent(toPath); + + startViewTransition(() => { + // This is a pretty heavy-handed way to update page content. + // In production, you'd likely be modifying DOM elements directly, + // or using a framework. + // innerHTML is used here just to keep the DOM update super simple. + document.body.innerHTML = content; + }); +}); + + +// A little helper function like this is really handy +// to handle progressive enhancement. +function startViewTransition(callback) { + if (!document.startViewTransition) { + callback(); + return; + } + + document.startViewTransition(callback); +} diff --git a/examples/mini-program-example/src/pages/transition/styles.css b/examples/mini-program-example/src/pages/transition/styles.css new file mode 100644 index 000000000000..9b7834881ee7 --- /dev/null +++ b/examples/mini-program-example/src/pages/transition/styles.css @@ -0,0 +1,25 @@ +@keyframes fade-in { + from { opacity: 0; } +} + +@keyframes fade-out { + to { opacity: 0; } +} + +@keyframes slide-from-right { + from { transform: translateX(30px); } +} + +@keyframes slide-to-left { + to { transform: translateX(-30px); } +} + +::view-transition-old(root) { + animation: 900ms cubic-bezier(0.4, 0, 1, 1) both fade-out, + 3000ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left; +} + +::view-transition-new(root) { + animation: 2100ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, + 3000ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right; +} diff --git a/examples/mini-program-example/src/pages/transition/utils.js b/examples/mini-program-example/src/pages/transition/utils.js new file mode 100644 index 000000000000..ff26046f1030 --- /dev/null +++ b/examples/mini-program-example/src/pages/transition/utils.js @@ -0,0 +1,87 @@ +export async function getPageContent(url) { + // This is a really scrappy way to do this. + // Don't do this in production! + const response = await fetch(url); + const text = await response.text(); + // Particularly as it uses regexp + return /]*>([\w\W]*)<\/body>/.exec(text)[1]; +} + +function isBackNavigation(navigateEvent) { + if (navigateEvent.navigationType === 'push' || navigateEvent.navigationType === 'replace') { + return false; + } + if ( + navigateEvent.destination.index !== -1 && + navigateEvent.destination.index < navigation.currentEntry.index + ) { + return true; + } + return false; +} + +// Intercept navigations +// https://developer.chrome.com/docs/web-platform/navigation-api/ +// This is a naive usage of the navigation API, to keep things simple. +export async function onLinkNavigate(callback) { + navigation.addEventListener('navigate', (event) => { + const toUrl = new URL(event.destination.url); + + if (location.origin !== toUrl.origin) return; + + const fromPath = location.pathname; + const isBack = isBackNavigation(event); + + event.intercept({ + async handler() { + if (event.info === 'ignore') return; + + await callback({ + toPath: toUrl.pathname, + fromPath, + isBack, + }); + }, + }); + }); +} + +export function getLink(href) { + const fullLink = new URL(href, location.href).href; + + return [...document.querySelectorAll('a')].find((link) => + link.href === fullLink + ); +} + +// This helper function returns a View-Transition-like object, even for browsers that don't support view transitions. +// It won't do the transition in unsupported browsers, it'll act as if the transition is skipped. +// It also makes it easier to add class names to the document element. +export function transitionHelper({ + skipTransition = false, + classNames = '', + updateDOM, + }) { + if (skipTransition || !document.startViewTransition) { + const updateCallbackDone = Promise.resolve(updateDOM()).then(() => undefined); + + return { + ready: Promise.reject(Error('View transitions unsupported')), + domUpdated: updateCallbackDone, + updateCallbackDone, + finished: updateCallbackDone, + }; + } + + const classNamesArray = classNames.split(/\s+/g).filter(Boolean); + + document.documentElement.classList.add(...classNamesArray); + + const transition = document.startViewTransition(updateDOM); + + transition.finished.finally(() => + document.documentElement.classList.remove(...classNamesArray) + ); + + return transition; +} From 8cc463e6b1d31602cda1a65b8bf9ac9be996275c Mon Sep 17 00:00:00 2001 From: huangzhipeng02 Date: Wed, 5 Jul 2023 16:00:53 +0800 Subject: [PATCH 11/11] =?UTF-8?q?feat:=20=E6=95=B4=E7=90=86example?= =?UTF-8?q?=E5=B7=A5=E7=A8=8B=EF=BC=8C=E5=88=86=E9=A1=B5=E9=9D=A2=E6=98=BE?= =?UTF-8?q?=E7=A4=BAdemo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../mini-program-example/src/app.config.ts | 6 +- .../src/pages/check-box-group/index.config.ts | 3 + .../src/pages/check-box-group/index.scss | 46 ++++++++++ .../src/pages/check-box-group/index.tsx | 44 +++++++++ .../src/pages/index/index.scss | 46 ---------- .../src/pages/index/index.tsx | 92 +++++-------------- .../src/pages/radio-group/index.config.ts | 3 + .../src/pages/radio-group/index.scss | 46 ++++++++++ .../src/pages/radio-group/index.tsx | 44 +++++++++ .../src/pages/root-portal/index.config.ts | 3 + .../src/pages/root-portal/index.scss | 22 +++++ .../src/pages/root-portal/index.tsx | 28 ++++++ .../src/pages/sticky-header/index.config.ts | 3 + .../src/pages/sticky-header/index.scss | 22 +++++ .../src/pages/sticky-header/index.tsx | 20 ++++ .../src/components/index.ts | 2 + 16 files changed, 314 insertions(+), 116 deletions(-) create mode 100644 examples/mini-program-example/src/pages/check-box-group/index.config.ts create mode 100644 examples/mini-program-example/src/pages/check-box-group/index.scss create mode 100644 examples/mini-program-example/src/pages/check-box-group/index.tsx create mode 100644 examples/mini-program-example/src/pages/radio-group/index.config.ts create mode 100644 examples/mini-program-example/src/pages/radio-group/index.scss create mode 100644 examples/mini-program-example/src/pages/radio-group/index.tsx create mode 100644 examples/mini-program-example/src/pages/root-portal/index.config.ts create mode 100644 examples/mini-program-example/src/pages/root-portal/index.scss create mode 100644 examples/mini-program-example/src/pages/root-portal/index.tsx create mode 100644 examples/mini-program-example/src/pages/sticky-header/index.config.ts create mode 100644 examples/mini-program-example/src/pages/sticky-header/index.scss create mode 100644 examples/mini-program-example/src/pages/sticky-header/index.tsx diff --git a/examples/mini-program-example/src/app.config.ts b/examples/mini-program-example/src/app.config.ts index 9fcc1bcbc992..16b6158d4393 100644 --- a/examples/mini-program-example/src/app.config.ts +++ b/examples/mini-program-example/src/app.config.ts @@ -4,7 +4,11 @@ export default defineAppConfig({ 'pages/grid-view/index', 'pages/list-view/index', 'pages/page-container/index', - 'pages/match-media/index' + 'pages/match-media/index', + 'pages/sticky-header/index', + 'pages/root-portal/index', + 'pages/radio-group/index', + 'pages/check-box-group/index', ], window: { backgroundTextStyle: 'light', diff --git a/examples/mini-program-example/src/pages/check-box-group/index.config.ts b/examples/mini-program-example/src/pages/check-box-group/index.config.ts new file mode 100644 index 000000000000..fe7e87d120ab --- /dev/null +++ b/examples/mini-program-example/src/pages/check-box-group/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面' +}) diff --git a/examples/mini-program-example/src/pages/check-box-group/index.scss b/examples/mini-program-example/src/pages/check-box-group/index.scss new file mode 100644 index 000000000000..198f1bcdd141 --- /dev/null +++ b/examples/mini-program-example/src/pages/check-box-group/index.scss @@ -0,0 +1,46 @@ + +.furit-multiple-selected { + left: 3px; + top: 3px; + width: 14px; + height: 14px; + background: #1aad19; +} + +.furit-multiple-normal { + left: 3px; + top: 3px; + width: 12px; + height: 12px; + stroke-width: 2; + border-color:#1aad19; + fill: #fcfff4; + border-style: solid; +} + +.furit-selected { + left: 3px; + top: 3px; + width: 14px; + height: 14px; + background: #1aad19; + border-radius: 50%; +} + +.furit-normal { + left: 3px; + top: 3px; + width: 12px; + height: 12px; + stroke-width: 2; + border-color:#1aad19; + fill: #fcfff4; + border-radius: 50%; + border-style:solid; +} + +.furit-item { + display: flex; + flex-direction: row; + align-content: center; +} diff --git a/examples/mini-program-example/src/pages/check-box-group/index.tsx b/examples/mini-program-example/src/pages/check-box-group/index.tsx new file mode 100644 index 000000000000..f0112d50b6f8 --- /dev/null +++ b/examples/mini-program-example/src/pages/check-box-group/index.tsx @@ -0,0 +1,44 @@ +import {View, Image, Text, ListView, Label, Checkbox, CheckboxGroup} from '@tarojs/components' +import {useLoad} from '@tarojs/taro' +import './index.scss' +import React, {useState} from "react"; + +const furits = [ + { + key: "apple", + name: "苹果" + }, { + key: "banana", + name: "香蕉" + }, { + key: "peach", + name: "桃子" + } +] + +export default function Index() { + useLoad(() => { + console.log('Page loaded.') + }) + let [multipleSelectedFurits, setMultipleSelectedFurits] = useState([] as string[]) + + return ( + + { + setMultipleSelectedFurits(event.detail.value) + }}> +

多选：

+ { + furits.map(item => { + let checked = multipleSelectedFurits.indexOf(item.name) != -1; + return + }) + } + + + ) +} diff --git a/examples/mini-program-example/src/pages/index/index.scss b/examples/mini-program-example/src/pages/index/index.scss index ae478f7003ac..f2bbb9c13a1b 100644 --- a/examples/mini-program-example/src/pages/index/index.scss +++ b/examples/mini-program-example/src/pages/index/index.scss @@ -23,49 +23,3 @@ .buttonStyle { width: 200px; } - -.furit-multiple-selected { - left: 3px; - top: 3px; - width: 14px; - height: 14px; - background: #1aad19; -} - -.furit-multiple-normal { - left: 3px; - top: 3px; - width: 12px; - height: 12px; - stroke-width: 2; - border-color:#1aad19; - fill: #fcfff4; - border-style: solid; -} - -.furit-selected { - left: 3px; - top: 3px; - width: 14px; - height: 14px; - background: #1aad19; - border-radius: 50%; -} - -.furit-normal { - left: 3px; - top: 3px; - width: 12px; - height: 12px; - stroke-width: 2; - border-color:#1aad19; - fill: #fcfff4; - border-radius: 50%; - border-style:solid; -} - -.furit-item { - display: flex; - flex-direction: row; - align-content: center; -} diff --git a/examples/mini-program-example/src/pages/index/index.tsx b/examples/mini-program-example/src/pages/index/index.tsx index 5add6877d72a..3a428ab248f6 100644 --- a/examples/mini-program-example/src/pages/index/index.tsx +++ b/examples/mini-program-example/src/pages/index/index.tsx @@ -1,30 +1,14 @@ -import {View, Text,Image,GridView,ListView, Button, PageContainer,MatchMedia,RootPortal, StickyHeader, StickySection, CheckboxGroup, Checkbox, Label, RadioGroup, Radio } from '@tarojs/components' +import {View, Text, Button,RootPortal, StickyHeader, StickySection, CheckboxGroup, Checkbox, Label, } from '@tarojs/components' import Taro, {useLoad} from '@tarojs/taro' import './index.scss' import React, {useState} from "react"; -const furits = [ - { - key: "apple", - name: "苹果" - },{ - key: "banana", - name: "香蕉" - }, { - key: "peach", - name: "桃子" - } -] - export default function Index() { useLoad(() => { console.log('Page loaded.') }) - let [multipleSelectedFurits, setMultipleSelectedFurits] = useState([] as string[]) - - let [singleSelectedFurits, setSingleSelectedFurits] = useState(null) return ( @@ -54,60 +38,30 @@ export default function Index() { }}>MatchMedia -
- { - setMultipleSelectedFurits(event.detail.value) - }}> -

多选：

- { - furits.map(item => { - let checked = multipleSelectedFurits.indexOf(item.name) != -1; - return - }) - } - -
+ + + + + -
- { - setSingleSelectedFurits(event.detail.value) - }}> -

单选：

- { - furits.map(item => { - let checked = (singleSelectedFurits == item.key); - return
- -
- -
- }) - } - -
+ - - Hello RootPortal! - Hello RootPortal! - - - - 吸顶布局容器测试 - - ) diff --git a/examples/mini-program-example/src/pages/radio-group/index.config.ts b/examples/mini-program-example/src/pages/radio-group/index.config.ts new file mode 100644 index 000000000000..fe7e87d120ab --- /dev/null +++ b/examples/mini-program-example/src/pages/radio-group/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面' +}) diff --git a/examples/mini-program-example/src/pages/radio-group/index.scss b/examples/mini-program-example/src/pages/radio-group/index.scss new file mode 100644 index 000000000000..198f1bcdd141 --- /dev/null +++ b/examples/mini-program-example/src/pages/radio-group/index.scss @@ -0,0 +1,46 @@ + +.furit-multiple-selected { + left: 3px; + top: 3px; + width: 14px; + height: 14px; + background: #1aad19; +} + +.furit-multiple-normal { + left: 3px; + top: 3px; + width: 12px; + height: 12px; + stroke-width: 2; + border-color:#1aad19; + fill: #fcfff4; + border-style: solid; +} + +.furit-selected { + left: 3px; + top: 3px; + width: 14px; + height: 14px; + background: #1aad19; + border-radius: 50%; +} + +.furit-normal { + left: 3px; + top: 3px; + width: 12px; + height: 12px; + stroke-width: 2; + border-color:#1aad19; + fill: #fcfff4; + border-radius: 50%; + border-style:solid; +} + +.furit-item { + display: flex; + flex-direction: row; + align-content: center; +} diff --git a/examples/mini-program-example/src/pages/radio-group/index.tsx b/examples/mini-program-example/src/pages/radio-group/index.tsx new file mode 100644 index 000000000000..8e30bb4dddc8 --- /dev/null +++ b/examples/mini-program-example/src/pages/radio-group/index.tsx @@ -0,0 +1,44 @@ +import {View, Image, Text, RadioGroup, Radio,Label} from '@tarojs/components' +import {useLoad} from '@tarojs/taro' +import './index.scss' +import React, {useState} from "react"; + +const furits = [ + { + key: "apple", + name: "苹果" + },{ + key: "banana", + name: "香蕉" + }, { + key: "peach", + name: "桃子" + } +] +export default function Index() { + useLoad(() => { + console.log('Page loaded.') + }) + + let [singleSelectedFurits, setSingleSelectedFurits] = useState(null) + + return ( + + { + setSingleSelectedFurits(event.detail.value) + }}> +

单选：

+ { + furits.map(item => { + let checked = (singleSelectedFurits == item.key); + return
+ +
+ +
+ }) + } + + + ) +} diff --git a/examples/mini-program-example/src/pages/root-portal/index.config.ts b/examples/mini-program-example/src/pages/root-portal/index.config.ts new file mode 100644 index 000000000000..fe7e87d120ab --- /dev/null +++ b/examples/mini-program-example/src/pages/root-portal/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面' +}) diff --git a/examples/mini-program-example/src/pages/root-portal/index.scss b/examples/mini-program-example/src/pages/root-portal/index.scss new file mode 100644 index 000000000000..46d2686d13f4 --- /dev/null +++ b/examples/mini-program-example/src/pages/root-portal/index.scss @@ -0,0 +1,22 @@ +@import '@tarojs/components-mpharmony/dist/style/components/page-container'; + + +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/root-portal/index.tsx b/examples/mini-program-example/src/pages/root-portal/index.tsx new file mode 100644 index 000000000000..dca01c1db2de --- /dev/null +++ b/examples/mini-program-example/src/pages/root-portal/index.tsx @@ -0,0 +1,28 @@ +import {View, Text, RootPortal} from '@tarojs/components' +import {useLoad} from '@tarojs/taro' +import './index.scss' +import React from "react"; + +export default function Index() { + useLoad(() => { + console.log('Page loaded.') + }) + + return ( + + + Hello RootPortal! + Hello RootPortal! + + + ) +} diff --git a/examples/mini-program-example/src/pages/sticky-header/index.config.ts b/examples/mini-program-example/src/pages/sticky-header/index.config.ts new file mode 100644 index 000000000000..fe7e87d120ab --- /dev/null +++ b/examples/mini-program-example/src/pages/sticky-header/index.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '第二个页面' +}) diff --git a/examples/mini-program-example/src/pages/sticky-header/index.scss b/examples/mini-program-example/src/pages/sticky-header/index.scss new file mode 100644 index 000000000000..46d2686d13f4 --- /dev/null +++ b/examples/mini-program-example/src/pages/sticky-header/index.scss @@ -0,0 +1,22 @@ +@import '@tarojs/components-mpharmony/dist/style/components/page-container'; + + +.overlay_black { + background: #0d0d0d; +} + +.overlay_white { + background: #f4f4f4; +} +.customStyle { + background: #8065df; +} + + + +.gridStyle { + width: 1000px; +} + + + diff --git a/examples/mini-program-example/src/pages/sticky-header/index.tsx b/examples/mini-program-example/src/pages/sticky-header/index.tsx new file mode 100644 index 000000000000..7251b42590a8 --- /dev/null +++ b/examples/mini-program-example/src/pages/sticky-header/index.tsx @@ -0,0 +1,20 @@ +import {View, StickyHeader, StickySection} from '@tarojs/components' +import {useLoad} from '@tarojs/taro' +import './index.scss' +import React from "react"; + +export default function Index() { + useLoad(() => { + console.log('Page loaded.') + }) + + return ( + + + + 吸顶布局容器测试 + + + + ) +} diff --git a/packages/taro-components-mpharmony/src/components/index.ts b/packages/taro-components-mpharmony/src/components/index.ts index b5489f0d453b..fdf44efd8510 100644 --- a/packages/taro-components-mpharmony/src/components/index.ts +++ b/packages/taro-components-mpharmony/src/components/index.ts @@ -4,4 +4,6 @@ export * from './label/label' export * from './list/list' export * from './page-container/page-container' export * from './root-portal/root-portal' +export * from './sticky-header/sticky-header' +export * from './sticky-section/sticky-section'