@nutui/nutui-react 1.2.1 → 1.2.2-beta.0

package/dist/style.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.2.1 Wed Aug 03 2022 16:26:50 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.2.1 Wed Aug 10 2022 14:06:32 GMT+0800 (China Standard Time)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/themes/default.scss

@@ -34,6 +34,8 @@
 @import '../../packages/shortpassword/shortpassword.scss';
 @import '../../packages/textarea/textarea.scss';
 @import '../../packages/uploader/uploader.scss';
+@import '../../packages/searchbar/searchbar.scss';
+@import '../../packages/numberkeyboard/numberkeyboard.scss';
 @import '../../packages/actionsheet/actionsheet.scss';
 @import '../../packages/backtop/backtop.scss';
 @import '../../packages/drag/drag.scss';
@@ -62,6 +64,7 @@
 @import '../../packages/empty/empty.scss';
 @import '../../packages/virtuallist/virtuallist.scss';
 @import '../../packages/video/video.scss';
+@import '../../packages/progress/progress.scss';
 @import '../../packages/address/address.scss';
 @import '../../packages/barrage/barrage.scss';
 @import '../../packages/signature/signature.scss';

package/dist/styles/variables.scss

@@ -260,20 +260,30 @@ $rate-icon-void-color: $disable-color;
 
 // tabbar
 
-$tabbar-active-color: $primary-color;
-$tabbar-border-color: #eee;
+$tabbar-active-color: $primary-color !default;
+$tabbar-unactive-color: $primary-color !default;
+$tabbar-border-top: 1px solid #eee !default;
+$tabbar-border-bottom: 1px solid #eee !default;
+$tabbar-box-shadow: none !default;
+$tabbar-item-text-font-size: $font-size-0 !default;
+$tabbar-item-text-line-height: initial !default;
 
 //infiniteloading
 $infinite-bottom-color: #c8c8c8;
 
 //range
-$range-max: #333333;
-$rang-bg-color: rgba($primary-color, 0.5);
-$rang-bar-bg-color: linear-gradient(
+$range-tip-font-color: #333333 !default;
+$range-bg-color: rgba($primary-color, 0.5) !default;
+$range-bg-color-tick: #fa958c !default;
+$range-bar-bg-color: linear-gradient(
   135deg,
   $primary-color 0%,
   $primary-color-end 100%
-);
+) !default;
+$range-bar-btn-bg-color: $white !default;
+$range-bar-btn-width: 24px !default;
+$range-bar-btn-height: 24px !default;
+$range-bar-btn-border: 1px solid $primary-color !default;
 
 //address
 $address-region-tab-line: linear-gradient(
@@ -333,6 +343,10 @@ $radio-label-button-background: rgba(240, 37, 15, 0.05) !default;
 
 // signature
 $signature-border-color: #dadada;
+$signature-border-width: 1px;
+$signature-height: 10rem;
+$signature-margin-bottom: 1rem;
+$signature-btn-margin-right: 15px;
 
 //fixednav
 $fixednav-bg-color: $white;
@@ -481,6 +495,29 @@ $divider-vertical-top: 2px !default;
 $divider-vertical-border-left: rgba(0, 0, 0, 0.06) !default;
 $divider-vertical-margin: 0 8px !default;
 
+//numberkeyboard
+$numberkeyboard-width: 100% !default;
+$numberkeyboard-padding: 0 0 22px 0 !default;
+$numberkeyboard-background-color: #f2f3f5 !default;
+$numberkeyboard-header-height: 34px !default;
+$numberkeyboard-header-padding: 6px 0 0 0 !default;
+$numberkeyboard-header-color: #646566 !default;
+$numberkeyboard-header-font-size: 16px !default;
+$numberkeyboard-header-close-padding: 0 16px !default;
+$numberkeyboard-header-close-color: #576b95 !default;
+$numberkeyboard-header-close-font-size: 14px !default;
+$numberkeyboard-header-close-background-color: transparent !default;
+$numberkeyboard-key-background-color: #fff !default;
+$numberkeyboard-key-active-background-color: #ebedf0 !default;
+$numberkeyboard-key-height: 48px !default;
+$numberkeyboard-key-line-height: 1.5 !default;
+$numberkeyboard-key-border-radius: 8px !default;
+$numberkeyboard-key-font-size: 28px !default;
+$numberkeyboard-key-font-size-color: #333 !default;
+$numberkeyboard-key-finish-font-size: 16px !default;
+$numberkeyboard-key-finish-font-size-color: #fff !default;
+$numberkeyboard-key-finish-background-color: #1989fa !default;
+$numberkeyboard-key-activeFinsh-background-color: #0570db !default;
 // elevator
 $elevator-list-item-highcolor: $primary-color !default;
 $elevator-list-item-font-size: 12px !default;
@@ -548,6 +585,35 @@ $row-content-height: 50px !default;
 $row-content-line-height: 40px !default;
 $col-default-margin-bottom: 15px !default;
 
+
+// searchbar
+$searchbar-background: $white !default;
+$searchbar-right-out-color: $black !default;
+$searchbar-padding: 9px 16px !default;
+$searchbar-width: 100% !default;
+$searchbar-action-text-color: #323233 !default;
+$searchbar-input-background: #f7f7f7 !default;
+$searchbar-input-padding: 0 28px !default;
+$searchbar-input-height: 32px !default;
+$searchbar-input-width: 100% !default;
+$searchbar-input-border-radius: 16px !default;
+$searchbar-input-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04) !default;
+
+// progress
+$progress-border-radius: 12px !default;
+$progress-text-padding: 0 5px !default;
+$progress-text-font-size: 13px !default;
+$progress-insidetext-border-radius: 5px !default;
+$progress-small-height: 5px !default;
+$progress-base-height: 10px !default;
+$progress-large-height: 15px !default;
+$progress-small-padding: 0 4px !default;
+$progress-base-padding: 0 5px !default;
+$progress-large-padding: 0 5px !default;
+$progress-small-font-size: 7px !default;
+$progress-base-font-size: 9px !default;
+$progress-large-font-size: 13px !default;
+
 // animatingnumbers
 $countup-height: 32px !default;
 $countup-base-size: 18px !default;
@@ -556,3 +622,4 @@ $countup-lr-margin: 1px !default;
 $countup-bgcolor: #031f63 !default;
 $countup-color: #ffffff !default;
 $countup-width: 24px !default;
+

package/dist/types/datepicker/__test__/datepicker.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/datepicker/datepicker.d.ts

@@ -1,16 +1,27 @@
 import React, { FunctionComponent } from 'react';
+export interface PickerOption {
+    text: string | number;
+    value: string | number;
+    disabled?: string;
+    children?: PickerOption[];
+    className?: string | number;
+}
 export interface DatePickerProps {
-    modelValue: Date;
+    modelValue: Date | null;
     visible: boolean;
     title: string;
-    type: string;
+    type: 'date' | 'time' | 'year-month' | 'month-day' | 'datehour' | 'datetime';
     isShowChinese: boolean;
     minuteStep: number;
     minDate: Date;
     maxDate: Date;
-    className: string;
-    style: React.CSSProperties;
+    threeDimensional: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    formatter: (type: string, option: PickerOption) => PickerOption;
+    filter: (type: string, option: PickerOption[]) => PickerOption[];
     onCloseDatePicker: () => void;
-    onConfirmDatePicker: (list: any[]) => void;
+    onConfirmDatePicker: (values: (string | number)[], options: PickerOption[]) => void;
+    onChangeDatePicker: (columnIndex: string | number, values: (string | number)[], options: PickerOption[]) => void;
 }
 export declare const DatePicker: FunctionComponent<Partial<DatePickerProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/divider/__test__/divider.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/navbar/__test__/navbar.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/numberkeyboard/_test_/index.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/numberkeyboard/demo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const NumberKeyboardDemo: () => JSX.Element;
+export default NumberKeyboardDemo;

package/dist/types/numberkeyboard/index.d.ts

@@ -0,0 +1,2 @@
+import { NumberKeyboard } from './numberkeyboard';
+export default NumberKeyboard;

package/dist/types/numberkeyboard/numberkeyboard.d.ts

@@ -0,0 +1,20 @@
+import React, { CSSProperties, FunctionComponent } from 'react';
+export interface NextListObj {
+    type: string;
+    id: string;
+}
+export interface NumberKeyboardProps {
+    confirmText: string;
+    title: string;
+    visible: boolean;
+    type: string;
+    customKey: Array<string>;
+    randomKeys: boolean;
+    popClass: string;
+    className: string;
+    style?: CSSProperties;
+    onChange?: (value: string) => void;
+    onDelete?: () => void;
+    onClose: () => void;
+}
+export declare const NumberKeyboard: FunctionComponent<Partial<NumberKeyboardProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>>;

package/dist/types/nutui.react.d.ts

@@ -33,6 +33,8 @@ import Picker from './picker';
 import ShortPassword from './shortpassword';
 import TextArea from './textarea';
 import Uploader from './uploader';
+import SearchBar from './searchbar';
+import NumberKeyboard from './numberkeyboard';
 import ActionSheet from './actionsheet';
 import BackTop from './backtop';
 import Drag from './drag';
@@ -61,6 +63,7 @@ import AnimatingNumbers from './animatingnumbers';
 import Empty from './empty';
 import VirtualList from './virtuallist';
 import Video from './video';
+import Progress from './progress';
 import Address from './address';
 import Barrage from './barrage';
 import Signature from './signature';
@@ -68,4 +71,4 @@ import Card from './card';
 import TimePannel from './timepannel';
 import TimeDetail from './timedetail';
 import TimeSelect from './timeselect';
-export { Button, Cell, CellGroup, Icon, Overlay, Popup, ConfigProvider, Layout, Col, Row, Divider, NavBar, FixedNav, Tabbar, TabbarItem, Elevator, Pagination, Tabs, TabPane, Indicator, Range, Calendar, Checkbox, CheckboxGroup, DatePicker, InputNumber, Input, Radio, RadioGroup, Rate, CalendarItem, Picker, ShortPassword, TextArea, Uploader, ActionSheet, BackTop, Drag, Dialog, Infiniteloading, Notify, Switch, Toast, CircleProgress, NoticeBar, Steps, Step, Swiper, SwiperItem, Avatar, AvatarGroup, Price, Badge, Tag, Popover, Skeleton, CountDown, Collapse, CollapseItem, AnimatingNumbers, Empty, VirtualList, Video, Address, Barrage, Signature, Card, TimePannel, TimeDetail, TimeSelect };
+export { Button, Cell, CellGroup, Icon, Overlay, Popup, ConfigProvider, Layout, Col, Row, Divider, NavBar, FixedNav, Tabbar, TabbarItem, Elevator, Pagination, Tabs, TabPane, Indicator, Range, Calendar, Checkbox, CheckboxGroup, DatePicker, InputNumber, Input, Radio, RadioGroup, Rate, CalendarItem, Picker, ShortPassword, TextArea, Uploader, SearchBar, NumberKeyboard, ActionSheet, BackTop, Drag, Dialog, Infiniteloading, Notify, Switch, Toast, CircleProgress, NoticeBar, Steps, Step, Swiper, SwiperItem, Avatar, AvatarGroup, Price, Badge, Tag, Popover, Skeleton, CountDown, Collapse, CollapseItem, AnimatingNumbers, Empty, VirtualList, Video, Progress, Address, Barrage, Signature, Card, TimePannel, TimeDetail, TimeSelect };

package/dist/types/picker/picker.d.ts

@@ -1,19 +1,23 @@
 import React, { RefObject } from 'react';
-interface IPickerProps {
+export interface PickerOption {
+    text: string | number;
+    value: string | number;
+    disabled?: string;
+    children?: PickerOption[];
+    className?: string | number;
+}
+export interface IPickerProps {
     isVisible: boolean;
     title?: string;
-    listData: any[];
-    defaultValueData?: any[];
-    className: '';
-    style: {};
-    onConfirm?: (list: any[]) => void;
-    onClose?: () => void;
-    onCloseUpdate?: (list: any[], pickerRef: RefObject<HTMLDivElement>) => void;
-    onChoose?: (index: number, value: IResValue, list: any[], pickerRef: RefObject<HTMLDivElement>) => void;
-}
-interface IResValue {
-    label: number;
-    value: string;
+    listData: (PickerOption | PickerOption[])[];
+    defaultValueData?: (number | string)[];
+    className?: '';
+    style?: React.CSSProperties;
+    threeDimensional?: boolean;
+    onConfirm?: (selectedValue: (string | number)[], selectedOptions: PickerOption[]) => void;
+    onClose?: (selectedValue: (string | number)[], selectedOptions: PickerOption[]) => void;
+    onCloseUpdate?: (selectedValue: (string | number)[], list: PickerOption[], pickerRef: RefObject<HTMLDivElement>) => void;
+    onChange?: (index: number, value: (string | number)[], selectedOptions: PickerOption[]) => void;
 }
 declare const Picker: React.ForwardRefExoticComponent<Partial<IPickerProps> & React.RefAttributes<unknown>>;
 export default Picker;

package/dist/types/picker/pickerSlot.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { PickerOption } from './picker';
 interface IPickerSlotProps {
-    isUpdate?: boolean;
     keyIndex?: number;
     defaultValue?: string | number;
-    listData?: any[];
-    chooseItem?: (val: string, idx: number) => void;
+    listData?: PickerOption[];
+    threeDimensional: boolean;
+    chooseItem?: (val: PickerOption, idx: number) => void;
 }
 declare const PickerSlot: React.ForwardRefExoticComponent<Partial<IPickerSlotProps> & React.RefAttributes<unknown>>;
 export default PickerSlot;

package/dist/types/progress/__tests__/progress.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/progress/demo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ProgressDemo: () => JSX.Element;
+export default ProgressDemo;

package/dist/types/progress/index.d.ts

@@ -0,0 +1,2 @@
+import { Progress } from './progress';
+export default Progress;

package/dist/types/progress/progress.d.ts

@@ -0,0 +1,26 @@
+import React, { FunctionComponent, CSSProperties, ReactNode } from 'react';
+export declare type ProgressSize = 'small' | 'base' | 'large';
+export declare type TextType = 'icon' | 'text';
+export interface ProgressProps {
+    className: string;
+    style: CSSProperties;
+    isShowPercentage: boolean;
+    percentage: number;
+    fillColor: string;
+    strokeColor: string;
+    strokeWidth: string;
+    size: ProgressSize;
+    textColor: string;
+    textWidth: string;
+    showText: boolean;
+    textInside: boolean;
+    textBackground: string;
+    textType: TextType;
+    status: boolean;
+    iconName: string;
+    iconColor: string;
+    iconSize: string;
+    rounded: boolean | string;
+    children: ReactNode;
+}
+export declare const Progress: FunctionComponent<Partial<ProgressProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/types/range/demo.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
+import './demo.scss';
 declare const RangeDemo: () => JSX.Element;
 export default RangeDemo;

package/dist/types/range/range.d.ts

@@ -15,9 +15,11 @@ export interface RangeProps {
     step: number | string;
     modelValue: SliderValue;
     button: React.ReactNode;
+    vertical: boolean;
+    marks: Record<string, unknown>;
     change?: (value: number) => void;
     dragStart?: () => void;
     dragEnd?: () => void;
 }
-export declare const Range: FunctionComponent<Partial<RangeProps> & React.HTMLAttributes<HTMLDivElement>>;
+export declare const Range: FunctionComponent<Partial<RangeProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;
 export {};

package/dist/types/searchbar/demo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SearchBarDemo: () => JSX.Element;
+export default SearchBarDemo;

package/dist/types/searchbar/index.d.ts

@@ -0,0 +1,2 @@
+import { SearchBar } from './searchbar';
+export default SearchBar;

package/dist/types/searchbar/searchbar.d.ts

@@ -0,0 +1,60 @@
+import React, { FunctionComponent } from 'react';
+export interface SearchBarProps {
+    /** 文本值	 */
+    value?: number | string;
+    /** 输入框占位提示文字	 */
+    placeholder?: string;
+    /** 搜索框形状，可选值为 round	 */
+    shape?: 'square' | 'round';
+    /** 自定义class名	 */
+    className?: string;
+    /** 是否禁用输入框	 */
+    disabled?: boolean;
+    /** 最大输入长度	 */
+    maxLength?: number;
+    /** 是否启用清除图标，点击清除图标后会清空输入框	 */
+    clearable?: boolean;
+    /** 搜索框外部背景色	 */
+    background?: string;
+    /** 搜索框背景色	 */
+    inputBackground?: string;
+    /** 输入框内容对齐方式	 */
+    align?: string;
+    /** 是否将输入框设为只读状态，只读状态下无法输入内容   */
+    readOnly?: boolean;
+    /**  是否自动聚焦，iOS 系统不支持该属性	 */
+    autoFocus?: boolean;
+    /** 搜索框左侧文本	 */
+    label?: React.ReactNode;
+    /** 输入框内 左icon   */
+    leftinIcon?: React.ReactNode;
+    /** 输入框内 右icon  */
+    rightinIcon?: React.ReactNode;
+    /** 输入框外 左icon  */
+    leftoutIcon?: React.ReactNode;
+    /** 输入框外 右icon  */
+    rightoutIcon?: React.ReactNode;
+    /** 取消按钮文字	 */
+    actionText?: React.ReactNode;
+    /**  确定搜索时触发	 */
+    onSearch?: (val: string) => void;
+    /** 输入框内容变化时触发	 */
+    onChange?: (value: string, event: Event) => void;
+    /** 输入框获得焦点时触发	 */
+    onFocus?: (value: string, event: Event) => void;
+    /** 输入框失去焦点时触发	 */
+    onBlur?: (value: string, event: Event) => void;
+    /** 点击清除按钮后触发	 */
+    onClear?: (event: Event) => void;
+    /** 点击输入区域时触发	 */
+    onClickInput?: (event: Event) => void;
+    /** 点击输入框内左侧图标时触发	 */
+    onClickLeftinIcon?: (value: string, event: Event) => void;
+    /** 点击输入框外左侧图标时触发	 */
+    onClickLeftoutIcon?: (value: string, event: Event) => void;
+    /** 点击输入框内右侧图标时触发	 */
+    onClickRightinIcon?: (value: string, event: Event) => void;
+    /** 点击输入框外右侧图标时触发	 */
+    onClickRightoutIcon?: (value: string, event: Event) => void;
+}
+export declare const SearchBar: FunctionComponent<Partial<SearchBarProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onFocus' | 'onBlur'>>;

package/dist/types/signature/__test__/signature.spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import 'jest-canvas-mock';

package/dist/types/tabbar/__tests__/tabbar.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/types/tabbar/tabbar.d.ts

@@ -2,10 +2,10 @@ import React, { FunctionComponent } from 'react';
 export interface TabbarProps {
     visible: number | string;
     bottom: boolean;
-    type: string;
-    size: string;
+    size: string | number;
     unactiveColor: string;
     activeColor: string;
+    safeAreaInsetBottom: boolean;
     className: string;
     style: React.CSSProperties;
     tabSwitch: (child: React.ReactElement<any>, active: number) => void;

package/dist/types/tabbaritem/tabbaritem.d.ts

@@ -1,9 +1,12 @@
 import { FunctionComponent } from 'react';
 export interface TabbarItemProps {
+    dot: boolean;
+    size: string | number;
+    classPrefix: string;
     tabTitle: string;
     icon: string;
     href: string;
-    to: object | string;
+    to: any;
     num: string | number;
     active: boolean;
     activeColor: string;

package/dist/types/tag/tag.d.ts

@@ -7,9 +7,9 @@ export interface TagProps {
     round: boolean;
     mark: boolean;
     closeable: boolean;
-    isShow: boolean;
     prefixCls: string;
     onClick: (e: MouseEvent) => void;
+    onClose: (e?: any) => void;
 }
 export declare type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
 export declare const Tag: FunctionComponent<Partial<TagProps>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react",
-  "version": "1.2.1",
+  "version": "1.2.2-beta.0",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/esm/nutui-react.es.js",
@@ -123,6 +123,7 @@
     "husky": "^6.0.0",
     "inquirer": "^8.0.0",
     "jest": "^27.5.1",
+    "jest-canvas-mock": "^2.4.0",
     "lint-staged": "^11.0.0",
     "lzutf8": "0.6.0",
     "map-stream": "0.0.7",

package/dist/packages/range/custom.scss

@@ -1,9 +0,0 @@
-.custom-button {
-  width: 26px;
-  color: #fff;
-  font-size: 10px;
-  line-height: 18px;
-  text-align: center;
-  background-color: #ee0a24;
-  border-radius: 100px;
-}