@cloudbase/weda-ui 2.0.9 → 2.0.12

package/src/web/components/lottery/index.css

@@ -8,7 +8,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  background: #FF465C;
+  background: #ff465c;
   border: 1px solid rgba(255, 255, 255, 0.6);
   box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
   border-radius: 10px;
@@ -56,15 +56,15 @@
   height: 9px;
   box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
   border-radius: 50%;
-  background: #FFFFFF;
+  background: #ffffff;
 }
 
 .weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(odd) {
-  background: #FFEE52;
+  background: #ffee52;
 }
 
 .weda-lottery .weda-lottery__dot .weda-lottery__dot-item:nth-child(even) {
-  background: #FFFFFF
+  background: #ffffff;
 }
 
 .weda-lottery .weda-lottery__dot-horizontal .weda-lottery__dot-item {
@@ -118,7 +118,7 @@
   position: relative;
   width: 100%;
   box-sizing: border-box;
-  background: linear-gradient(180deg, #DD0D00 0%, #D80027 100%);
+  background: linear-gradient(180deg, #dd0d00 0%, #d80027 100%);
   border: 1px solid rgba(255, 255, 255, 0.25);
   box-shadow: inset 0px 0px 4px rgba(255, 255, 255, 0.5);
   border-radius: 10px;
@@ -137,23 +137,23 @@
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item {
   position: absolute;
-  width: calc((100% - 32px)/ 3);
-  height: calc((100% - 32px)/ 3);
+  width: calc((100% - 32px) / 3);
+  height: calc((100% - 32px) / 3);
   font-size: 0;
   text-align: center;
-  background: #FFF8EE;
-  box-shadow: inset 0px -2px 0px #FFDDBD;
+  background: #fff8ee;
+  box-shadow: inset 0px -2px 0px #ffddbd;
   border-radius: 8px;
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived {
-  background: #FFF8EE;
-  box-shadow: 0px 0px 6px #FFFFFF;
+  background: #fff8ee;
+  box-shadow: 0px 0px 6px #ffffff;
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected {
-  background: #FF6666;
-  box-shadow: inset 0px -2px 0px #FFA4A4;
+  background: #ff6666;
+  box-shadow: inset 0px -2px 0px #ffa4a4;
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:first-child {
@@ -163,7 +163,7 @@
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(2) {
   top: 8px;
-  left: calc((100% - 32px)/ 3 + 16px);
+  left: calc((100% - 32px) / 3 + 16px);
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(3) {
@@ -172,7 +172,7 @@
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(4) {
-  top: calc((100% - 32px)/ 3 + 16px);
+  top: calc((100% - 32px) / 3 + 16px);
   right: 8px;
 }
 
@@ -183,7 +183,7 @@
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(6) {
   bottom: 8px;
-  left: calc((100% - 32px)/ 3 + 16px);
+  left: calc((100% - 32px) / 3 + 16px);
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(7) {
@@ -192,7 +192,7 @@
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-item:nth-child(8) {
-  bottom: calc((100% - 32px)/ 3 + 16px);
+  bottom: calc((100% - 32px) / 3 + 16px);
   left: 8px;
 }
 
@@ -210,8 +210,11 @@
   align-items: center;
 }
 
-.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-actived .weda-lottery__turntable-cell {
-  border-color: #FFE05F;
+.weda-lottery
+  .weda-lottery__inner
+  .weda-lottery__turntable-item.is-actived
+  .weda-lottery__turntable-cell {
+  border-color: #ffe05f;
 }
 
 .weda-lottery .weda-lottery__inner .weda-lottery__turntable-cell-image {
@@ -234,32 +237,35 @@
   font-size: 12px;
   line-height: 17px;
   text-align: center;
-  color: #BA0000;
+  color: #ba0000;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   width: 100%;
 }
 
-.weda-lottery .weda-lottery__inner .weda-lottery__turntable-item.is-selected .weda-lottery__turntable-cell-desc {
-  color: #FFFFFF;
+.weda-lottery
+  .weda-lottery__inner
+  .weda-lottery__turntable-item.is-selected
+  .weda-lottery__turntable-cell-desc {
+  color: #ffffff;
 }
 
 .weda-lottery .weda-lottery__turntable-btn {
   z-index: 2;
   position: absolute;
-  width: calc((100% - 32px)/ 3);
-  height: calc((100% - 32px)/ 3);
-  top: calc((100% - 32px)/ 3 + 16px);
-  left: calc((100% - 32px)/ 3 + 16px);
-  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
-  box-shadow: inset 0px -2px 0px #FF7A00;
+  width: calc((100% - 32px) / 3);
+  height: calc((100% - 32px) / 3);
+  top: calc((100% - 32px) / 3 + 16px);
+  left: calc((100% - 32px) / 3 + 16px);
+  background: linear-gradient(180deg, #ffee81 0%, #ffd646 100%);
+  box-shadow: inset 0px -2px 0px #ff7a00;
   border-radius: 50%;
 }
 
 .weda-lottery .weda-lottery__turntable-btn.is-actived {
-  background: linear-gradient(180deg, #FFEE81 0%, #FFD646 100%);
-  box-shadow: inset 0px 2px 0px #FFFFFF;
+  background: linear-gradient(180deg, #ffee81 0%, #ffd646 100%);
+  box-shadow: inset 0px 2px 0px #ffffff;
 }
 
 .weda-lottery .weda-lottery__btn-inner {
@@ -271,7 +277,7 @@
 .weda-lottery .weda-lottery__btn {
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  background: linear-gradient(180deg, #ff922d 0%, #ff3c76 100%);
   box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
   border-radius: 50%;
   display: flex;
@@ -280,7 +286,7 @@
 }
 
 .weda-lottery .weda-lottery__turntable-btn.is-actived .weda-lottery__btn {
-  background: linear-gradient(180deg, #FF922D 0%, #FF3C76 100%);
+  background: linear-gradient(180deg, #ff922d 0%, #ff3c76 100%);
   box-shadow: inset 0px 0px 8px rgba(234, 27, 53, 0.5);
 }
 
@@ -291,16 +297,16 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  text-decoration: none
+  text-decoration: none;
 }
 
-.weda-lottery .weda-lottery__btn-image  .weda-lottery__btn-text {
+.weda-lottery .weda-lottery__btn-image .weda-lottery__btn-text {
   font-weight: 600;
   font-size: 18px;
   line-height: 22px;
   text-align: center;
-  color: #FFFFFF;
-  text-shadow: 0px 0.5px 0px #E42B27;
+  color: #ffffff;
+  text-shadow: 0px 0.5px 0px #e42b27;
   max-height: 100%;
   display: -webkit-box;
   overflow: hidden;
@@ -324,4 +330,4 @@
 .weda-lottery-mobile .weda-lottery__content {
   width: 100%;
 }
-/* mobile style end */
+/* mobile style end */

package/src/web/components/lottery/index.tsx

@@ -297,7 +297,7 @@ export default function Lottery({
           <div className={`${CLASS_PREFIX}__wrap`}>
             {dotList.map((dot, index) => {
               return (
-                <>
+                <div key={index}>
                   {dot.single && (
                     <div
                       key={`${dot.direction}-${index}`}
@@ -371,7 +371,7 @@ export default function Lottery({
                       {true && renderDot(dot.direction, dot.list)}
                     </div>
                   )}
-                </>
+                </div>
               );
             })}
             <div

package/src/web/components/modal/index.tsx

@@ -1,16 +1,16 @@
 import * as React from 'react';
 import { Modal, Button, ModalProps, ConfigProvider } from 'tea-component';
-import { unknownFunction } from '../../types';
+import type { unknownFunction } from '../../types';
 import classNames from '../../utils/classnames';
 
 export interface PropTypes extends ModalProps {
-  content: string,
-  customButton: React.ReactNode,
-  customContent: React.ReactNode,
-  isDefaultButton: boolean,
-  emit?: unknownFunction,
-  events: Record<string, unknownFunction>,
-  size: ModalProps['size'],
+  content: string;
+  customButton: React.ReactNode;
+  customContent: React.ReactNode;
+  isDefaultButton: boolean;
+  emit?: unknownFunction;
+  events: Record<string, unknownFunction>;
+  size: ModalProps['size'];
 }
 
 export default function WeDaModal(_props: PropTypes) {
@@ -28,33 +28,33 @@ export default function WeDaModal(_props: PropTypes) {
   } = _props;
 
   return (
-  <ConfigProvider classPrefix="wedatea2td">
-    <Modal
-      size={size}
-      className={classNames('weda-ui', 'lcap-modal', 'container', className)}
-      visible={visible}
-      onClose={() => {
-        emit('close', {});
-      }}
-      {...props}
+    <ConfigProvider classPrefix="wedatea2td">
+      <Modal
+        size={size}
+        className={classNames('weda-ui', 'lcap-modal', 'container', className)}
+        visible={visible}
+        onClose={() => {
+          emit('close', {});
+        }}
+        {...props}
       >
-      <Modal.Body>{content ? content : customContent}</Modal.Body>
-      <Modal.Footer>
-        {isDefaultButton ? (
-          <Button
-          type="primary"
-          onClick={() => {
-            emit('confirm', {});
-            // events.confirm();
-          }}
-          >
-            确定
-          </Button>
-        ) : (
-          customButton
+        <Modal.Body>{content ? content : customContent}</Modal.Body>
+        <Modal.Footer>
+          {isDefaultButton ? (
+            <Button
+              type="primary"
+              onClick={() => {
+                emit('confirm', {});
+                // events.confirm();
+              }}
+            >
+              确定
+            </Button>
+          ) : (
+            customButton
           )}
-      </Modal.Footer>
-    </Modal>
-  </ConfigProvider>
+        </Modal.Footer>
+      </Modal>
+    </ConfigProvider>
   );
 }

package/src/web/components/navLayout/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 import { Row, Col, ConfigProvider } from 'tea-component';
 import { usePlatform } from '../../utils/platform';

package/src/web/components/navigationBar/index.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 import { ConfigProvider } from 'tea-component';
 import { usePlatform, isInIde } from '../../utils/platform';
 import { getAppCustomNav } from '../../utils/tcb';
-import { IMenuItem, INavigationStyle } from './type';
+import type { IMenuItem, INavigationStyle } from './type';
 import './index.css';
 import VerticalMenu from './verticalMenu';
 import HorizontalMenu from './horizontalMenu';

package/src/web/components/picker/datePicker.tsx

@@ -2,14 +2,14 @@ import * as React from 'react';
 import weui from '../../utils/weui';
 
 import classNames from '../../utils/classnames';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 export interface PropsType extends CommonPropsType {
   start: string;
   end: string;
   defaultValue: string;
   title: string;
-  children?: React.ReactNode|undefined
+  children?: React.ReactNode | undefined;
 }
 
 export default function DatePicker(props: PropsType) {
@@ -45,4 +45,4 @@ export default function DatePicker(props: PropsType) {
       {children}
     </div>
   );
-}
+}

package/src/web/components/picker/picker.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import weui from '../../utils/weui';
 import classNames from '../../utils/classnames';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 export interface PropsType extends CommonPropsType {
-  title?: string
+  title?: string;
 }
 
 export default function Picker(props: PropsType) {
@@ -56,4 +56,4 @@ export default function Picker(props: PropsType) {
       {children}
     </div>
   );
-}
+}

package/src/web/components/picker/timePicker.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import weui from '../../utils/weui';
 
 import classNames from '../../utils/classnames';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 export interface PropsType extends CommonPropsType {
   defaultValue?: string;

package/src/web/components/richText/index.jsx

@@ -17,7 +17,7 @@ import {
   Text,
 } from 'tea-component';
 import { v4 as uuidv4 } from 'uuid';
-import {defaultBase64} from './const';
+import { defaultBase64 } from './const';
 
 import './index.css';
 import 'braft-editor/dist/index.css';
@@ -34,7 +34,6 @@ const IMAGE_TYPES = [
   'image/svg+xml',
 ];
 
-
 export default function RichText({
   // 系统属性
   id,
@@ -53,7 +52,7 @@ export default function RichText({
   acceptTypes,
   cloudPath,
   disabled,
-  decorator
+  decorator,
 }) {
   const [editorState, setEditorState] = useState();
 
@@ -71,7 +70,6 @@ export default function RichText({
     'weui-cell_disabled': isH5 && disabled,
   });
 
-
   const onDataChange = function (value) {
     events.change && events.change({ value: value === '<p></p>' ? '' : value });
     if (onChange) {
@@ -125,49 +123,47 @@ export default function RichText({
   };
 
   const richTextEl = (
-    
-      
-      <div className={subCls}>
-        <div
-          style={{
-            border: '1px solid #d1d1d1',
-            backgroundColor: '#fff',
-            ...style,
+    <div className={subCls}>
+      <div
+        style={{
+          border: '1px solid #d1d1d1',
+          backgroundColor: '#fff',
+          ...style,
+        }}
+      >
+        <BraftEditor
+          key={id}
+          value={editorState}
+          readOnly={readOnly}
+          blockRendererFn={blockRenderFn}
+          onBlur={(s) => {
+            setEditorState(s);
+            onDataChange(s.toHTML());
+            if (s.toHTML().length > 32768) {
+              message.warning({
+                content: '富文本长度过长，可能导致保存失败',
+              });
+            }
           }}
-        >
-          <BraftEditor
-            key={id}
-            value={editorState}
-            readOnly={readOnly}
-            blockRendererFn={blockRenderFn}
-            onBlur={(s) => {
-              setEditorState(s);
-              onDataChange(s.toHTML());
-              if (s.toHTML().length > 32768) {
-                message.warning({
-                  content: '富文本长度过长，可能导致保存失败',
-                });
-              }
-            }}
-            excludeControls={['media', 'fullscreen']}
-            /** @ts-ignore */
-            extendControls={extendControls}
-            handleKeyCommand={(command, editState) => {
-              const newState = ContentUtils.handleKeyCommand(
-                editState,
-                command
-              );
-              if (newState) {
-                setEditorState(newState);
-                return true;
-              }
-              return false;
-            }}
-          />
-        </div>
+          excludeControls={['media', 'fullscreen']}
+          /** @ts-ignore */
+          extendControls={extendControls}
+          handleKeyCommand={(command, editState) => {
+            const newState = ContentUtils.handleKeyCommand(editState, command);
+            if (newState) {
+              setEditorState(newState);
+              return true;
+            }
+            return false;
+          }}
+        />
       </div>
+    </div>
   );
-  return renderDecorator(richTextEl, decorator)({
+  return renderDecorator(
+    richTextEl,
+    decorator
+  )({
     id,
     className: cls,
     style,
@@ -436,8 +432,7 @@ RichText.propTypes = {
   acceptTypes: PropsTypes.array,
   cloudPath: PropsTypes.string,
   disabled: PropsTypes.bool,
-  decorator: PropsTypes.oneOfType([PropsTypes.array, PropsTypes.node])
-
+  decorator: PropsTypes.oneOfType([PropsTypes.array, PropsTypes.node]),
 };
 
 RichText.defaultProps = {

package/src/web/components/richTextView/index.tsx

@@ -3,18 +3,18 @@ import classNames from '../../utils/classnames';
 import { getTempFileURL } from '../../utils/tcb';
 import './index.css';
 import { LOAD_ERR_IMG_BASE64 } from '../../utils/constant';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import destr from 'destr';
 
 export interface PropsType extends CommonPropsType {
-    value: string
+  value: string;
 }
 
 export default function RichTextView({
   value = '',
   className,
   style,
-  id
+  id,
 }: PropsType) {
   let parseValue = destr(value);
   const cls = classNames({
@@ -55,9 +55,7 @@ export default function RichTextView({
 
   return (
     displayValue && (
-      <div className={cls} style={style}
-        id={id}
-      >
+      <div className={cls} style={style} id={id}>
         <div dangerouslySetInnerHTML={{ __html: displayValue }}></div>
       </div>
     )

package/src/web/components/scrollView/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 import classNames from '../../utils/classnames';
 
 export interface PropsType extends CommonPropsType {
@@ -145,4 +145,4 @@ export default function ScrollView({
       {children}
     </div>
   );
-}
+}

package/src/web/components/slot/index.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 
 export interface PropsType {
-  className?: string,
-  name: string,
-  compositeParent: any
-
+  className?: string;
+  name: string;
+  compositeParent: any;
 }
 export default function Slot({ compositeParent, name, className }: PropsType) {
   if (!compositeParent) {

package/src/web/components/swiper/index.css

@@ -35,7 +35,7 @@
   height: 100%;
 }
 
-.weda-ui.g-swiper .g-swiper-item > div  {
+.weda-ui.g-swiper .g-swiper-item > div {
   height: auto;
 }
 

package/src/web/components/swiper/index.tsx

@@ -2,10 +2,14 @@ import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
 import classNames from '../../utils/classnames';
 import Swipe from 'react-easy-swipe';
-import {useDebouncedCallback, useEventListener, useResizeObserver} from '@react-hookz/web';
+import {
+  useDebouncedCallback,
+  useEventListener,
+  useResizeObserver,
+} from '@react-hookz/web';
 
 import './index.css';
-import { CommonPropsType } from '../../types';
+import type { CommonPropsType } from '../../types';
 
 export interface PropsType extends CommonPropsType {
   /**
@@ -180,7 +184,16 @@ export default function Swiper({
         >
           {itemsClone[itemCount - 1]}
           {React.Children.map(children, (x, i) => {
-            return <SwiperItem height={height} setHeight={setHeight} currentIndex={currentIndex} index={i}>{x}</SwiperItem>;
+            return (
+              <SwiperItem
+                height={height}
+                setHeight={setHeight}
+                currentIndex={currentIndex}
+                index={i}
+              >
+                {x}
+              </SwiperItem>
+            );
           })}
           {itemsClone[0]}
         </Swipe>
@@ -234,21 +247,26 @@ export default function Swiper({
 }
 
 const SwiperItem: React.FC<{
-  setHeight: React.Dispatch<React.SetStateAction<number>>,
-  currentIndex: number,
-  index: number,
-  height: number,
-  children?: React.ReactNode
-}> = ({height, setHeight, children, currentIndex, index}) => {
+  setHeight: React.Dispatch<React.SetStateAction<number>>;
+  currentIndex: number;
+  index: number;
+  height: number;
+  children?: React.ReactNode;
+}> = ({ height, setHeight, children, currentIndex, index }) => {
   const firstChildRef = useRef<HTMLDivElement>(null);
-  const syncHeight = useDebouncedCallback((e) => {
-    setHeight(e.contentRect.height);
-  }, [setHeight], 500, 2000); // 必须debounce延迟，让resize完成后再设置高度
+  const syncHeight = useDebouncedCallback(
+    (e) => {
+      setHeight(e.contentRect.height);
+    },
+    [setHeight],
+    500,
+    2000
+  ); // 必须debounce延迟，让resize完成后再设置高度
 
   // 因为有loading 所以得用resizeobserver
   // @ts-ignore
   useResizeObserver(firstChildRef, (e) => {
-    if(currentIndex === index) {
+    if (currentIndex === index) {
       syncHeight(e);
     }
   });
@@ -263,11 +281,11 @@ const SwiperItem: React.FC<{
       <div
         ref={firstChildRef}
         style={{
-          height: height > 0 ? '100%' : 'auto'
+          height: height > 0 ? '100%' : 'auto',
         }}
       >
         {children}
       </div>
     </div>
   );
-};
+};

package/src/web/components/tabs/index.css

@@ -62,4 +62,4 @@
   content: '';
   width: 100%;
   border-top: 2px solid #0052d9;
-}
+}