@zamlia/mini-ui 0.0.1

package/src/components/common/DataSelect/index.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import { View, Picker } from '@tarojs/components';
+import { Utils } from '@utils';
+
+export type DataSelectProps = {
+  dataSource: any[]
+  rangeKey: string
+  remoteValue?: any
+  onChange: (currentItem: any) => void
+  childRender?: (currentItem: any) => React.ReactElement
+  defaultSeletItem?: any
+  defaultValue?: string
+  isSelectFirstItem?: boolean
+  classNmaes?: string
+};
+
+const DataSelect: React.FC<DataSelectProps> = (
+  {
+    dataSource,
+    rangeKey,
+    remoteValue,
+    onChange,
+    childRender,
+    defaultSeletItem = {},
+    defaultValue,
+    isSelectFirstItem = false,
+    classNmaes = 'DataSelect'
+  },
+) => {
+  const [selectItem, setSelectItem] = useState<any>(defaultSeletItem as any)
+  const [selectIndex, setSelectIndex] = useState<number>(0)
+
+  useEffect(() => {
+    if (!Utils.isEmpty(defaultSeletItem)) {
+      setSelectItem(defaultSeletItem)
+    }
+  }, [defaultSeletItem])
+
+  useEffect(() => {
+    if (isSelectFirstItem && dataSource?.length > 0) setSelectItem(dataSource[0])
+  }, [])
+
+  useEffect(() => {
+    remoteValue && setSelectItem(remoteValue)
+  }, [remoteValue])
+
+  return (
+    <View className={classNmaes}>
+      <Picker
+        mode='selector'
+        disabled={dataSource?.length === 0}
+        range={dataSource}
+        rangeKey={rangeKey}
+        value={selectIndex}
+        onChange={(e) => {
+          onChange(dataSource[e?.detail.value as any])
+          setSelectItem(dataSource[e?.detail.value as any])
+          setSelectIndex(e?.detail.value as number)
+        }}>
+        <View className='select-box'>
+          {
+            !childRender ? (
+              <>
+                <View className='text' style={{ fontWeight: "bold" }}>
+                  {
+                    !dataSource?.length ? '没有数据' : (
+                      Utils.substr(selectItem[rangeKey], 20) ||
+                      defaultValue ||
+                      '选择内容'
+                    )
+
+                  }
+                </View>
+                <View className="icon" />
+              </>
+            ) : (
+              childRender(selectItem)
+            )
+          }
+        </View>
+      </Picker>
+    </View>
+  );
+};
+
+export default DataSelect;

package/src/components/common/Modal/index.scss

@@ -0,0 +1,49 @@
+// 样式基础文件（变量和 mixin）已通过 Taro 配置自动注入，无需手动导入
+.we-modal {
+
+  .nut-dialog {
+    position: relative;
+    min-width: 80vw;
+
+    &__content {
+      padding-inline: 24px;
+      box-sizing: border-box;
+    }
+
+    &__footer {}
+  }
+
+  &__close {
+    position: fixed !important;
+    top: 36px;
+    right: 50px;
+  }
+
+  &__btn {
+    width: 48%;
+    min-width: 230px;
+    height: 78px;
+    border-radius: 20px;
+    font-size: 24px;
+    line-height: 78px;
+    text-align: center;
+    border: 1px solid $primary-color;
+  }
+
+  &__btn-cancel {
+    margin-right: 20px;
+    background: #F0F0F0;
+    color: #666666;
+    border-color: transparent;
+  }
+
+  &__btn-confirm {
+    background: $primary-color;
+    color: #ffffff;
+  }
+
+  &__btn-confirm-large {
+    min-width: 330px;
+    border-radius: 40px;
+  }
+}

package/src/components/common/Modal/index.tsx

@@ -0,0 +1,105 @@
+import React, { PropsWithChildren } from 'react';
+import { View } from '@tarojs/components';
+import { Dialog, DialogProps } from '@nutui/nutui-react-taro';
+import classNames from 'classnames';
+import './index.scss';
+import { Close } from '@nutui/icons-react-taro';
+
+export type ModalProps = {
+  /** 底部 */
+  content?: React.ReactElement | string
+  /**
+   * 是否显示右上角关闭按钮
+   * @default true
+   */
+  showCloseIcon?: boolean
+  /**
+   * 是否显示取消按钮
+   * @default true
+   */
+  showCancel?: boolean
+  /**
+   * 是否显示确认按钮
+   * @default true
+   */
+  showConfirm?: boolean
+  /**
+   *自定义确定按钮文字
+   */
+  confirmText?: React.ReactElement | string
+  className?: string
+  onCancel?: () => void
+  onConfirm?: () => void
+} & Omit<DialogProps, 'content' | 'onCancel' | 'onConfirm' | 'confirmText'>;
+
+const Modal: React.FC<PropsWithChildren<ModalProps>> = (props) => {
+  const {
+    className,
+    content,
+    children,
+    showCloseIcon = true,
+    showCancel = true,
+    showConfirm = true,
+    confirmText = "确定",
+    onCancel,
+    onConfirm,
+    ...restProps
+  } = props
+
+  const confirmBtnRender = () => {
+    if (!showConfirm) {
+      return null
+    }
+    if (typeof confirmText === 'string') {
+      return (
+        <View className={classNames('we-modal__btn we-modal__btn-confirm', {
+          'we-modal__btn-confirm-large': !showCancel
+        })} onClick={onConfirm}>
+          {confirmText}
+        </View>
+      )
+    }
+    return confirmText
+  }
+
+  const cancelBtnRender = () => {
+    if (!showCancel) {
+      return null
+    }
+    return (
+      <View className='we-modal__btn we-modal__btn-cancel' onClick={onCancel}>
+        取消
+      </View>
+    )
+  }
+
+  return (
+    <View className={!!className ? `${className} we-modal` : 'we-modal'}>
+      <Dialog
+        {...restProps}
+        lockScroll={true}
+        onConfirm={onConfirm}
+        onCancel={onCancel}
+        footer={(
+          <>
+            {cancelBtnRender()}
+            {confirmBtnRender()}
+          </>
+        )}
+      >
+        {children || content}
+        {
+          showCloseIcon && (
+            <Close
+              size='22'
+              className='we-modal__close'
+              onClick={onCancel}
+            />
+          )
+        }
+      </Dialog>
+    </View>
+  );
+};
+
+export default Modal;

package/src/components/common/NavBar/index.scss

@@ -0,0 +1,26 @@
+.transparent-nav {
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}
+
+.transparent-nav--center {
+  font-weight: 600;
+  font-size: 36px;
+  color: #1D1B1B;
+  line-height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.transparent-nav--fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+}

package/src/components/common/NavBar/index.tsx

@@ -0,0 +1,81 @@
+import { Text, ITouchEvent } from '@tarojs/components';
+import { NavBar as NutNavBar } from '@nutui/nutui-react-taro';
+import { ArrowLeft, Share } from '@nutui/icons-react-taro';
+import Taro from '@tarojs/taro';
+import React from 'react';
+import './index.scss';
+
+export type NavBarProps = {
+  title?: string | React.ReactElement
+  /**
+   * 标题剧中
+   * @default false
+   */
+  titleCenter?: boolean
+  /**
+   * 是否是头像
+   * @default false
+   * @description 如果该值是true titleCenter则为true
+   */
+  isHeader?: boolean
+  /**
+   * 背景颜色
+   * @default transparent
+   * @description 只有isHeader才生效
+   */
+  backageColor?: string
+  /**
+   * 是否穿透
+   * @default false
+   */
+  fixed?: boolean
+  /**
+   * 返回按钮
+   * @default false
+   */
+  back?: boolean
+  /**
+   * 返回事件
+   */
+  onBack?: () => void
+}
+
+const NavBar: React.FC<NavBarProps> = (props) => {
+  const {
+    title,
+    onBack
+  } = props;
+
+  /**
+   * 返回
+   */
+  const handleBack = (e: ITouchEvent) => {
+    e?.stopPropagation()
+    if (onBack) {
+      onBack();
+    } else {
+      Taro.navigateBack({ delta: 1 })
+    }
+  }
+
+  return (
+    <NutNavBar
+      back={
+        <>
+          <ArrowLeft size={14} />
+          返回
+        </>
+      }
+      right={
+        <span className="flex-center">
+          <Share size={14} />
+        </span>
+      }
+      onBackClick={handleBack}
+    >
+      <Text>{title}</Text>
+    </NutNavBar>
+  )
+}
+
+export default NavBar

package/src/components/common/Page/index.scss

@@ -0,0 +1,19 @@
+.we-page {
+  width: 100%;
+
+  &__loading {
+    padding: 50px 0;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__empty {
+    width: 100%;
+    text-align: center;
+    height: 100px;
+    line-height: 100px;
+    font-size: 28px;
+    color: #666666;
+  }
+}

package/src/components/common/Page/index.tsx

@@ -0,0 +1,56 @@
+import React, { PropsWithChildren } from 'react';
+import { View } from '@tarojs/components';
+import { Utils } from '@utils';
+import './index.scss';
+
+export type PageProps = {
+  error: boolean
+  loading: boolean
+  loadingColor?: string
+  loadingText?: string
+  errorText?: string
+  emptyDataText?: string
+  emptyDataRender?: React.ReactElement
+  dataSource: Array<any> | any
+  onRequest?: () => void
+  renderLoading?: any
+}
+
+const Page: React.FC<PropsWithChildren<PageProps>> = (props) => {
+  const {
+    error = true,
+    loading = false,
+    // loadingColor = '#666666',
+    // loadingText = '加载中...',
+    errorText = '加载失败，请点击重试',
+    emptyDataText = '没有数据',
+    dataSource = [],
+    renderLoading,
+    emptyDataRender,
+    onRequest = () => { console.error('Page组件props没有传入onRequest') },
+    children
+  } = props;
+
+  return (
+    <View className='we-page'>
+      {
+        !loading && !error && !Utils.isEmpty(dataSource) && children
+      }
+      {loading ?
+        (
+          renderLoading || (
+            <View className='we-page__loading'>
+              {/* <Loading color={loadingColor} content={loadingText} /> */}
+            </View>
+          )
+        ) : (
+          error ?
+            <View className='we-page__empty' onClick={onRequest}>{errorText}</View> :
+            Utils.isEmpty(dataSource) && <View className='we-page__empty-content'>{emptyDataRender ? emptyDataRender : emptyDataText}</View>
+        )
+      }
+    </View>
+  )
+}
+
+export default Page

package/src/components/common/PullToPushRefresh/index.scss

@@ -0,0 +1,38 @@
+.we-list {
+  .scroll {
+    height: 100%;
+  }
+
+  &__bottom {
+    margin: 0 auto;
+    text-align: center;
+    height: 200px;
+    line-height: 200px;
+    font-size: 24px;
+    color: #999999;
+
+    &-text {}
+  }
+
+  &__text {
+    font-size: 24px;
+    color: #999999;
+  }
+
+  &__ptpr {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+
+    .nut-loading-icon {
+      width: 20px !important;
+      height: 20px !important;
+      font-size: 16px !important;
+    }
+
+    .nut-loading-text {
+      font-size: 12px !important;
+    }
+  }
+}