├── .gitignore ├── Readme.md ├── app.json ├── changelog.md ├── components ├── Avatar │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Badge │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── BoxShadow │ ├── index.d.ts │ ├── index.jsx │ └── index.rn.jsx ├── Button │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Calendar │ ├── date │ │ ├── index.d.ts │ │ └── index.js │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Card │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── CardSelect │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Cell │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── ColorPicker │ ├── index.d.ts │ └── index.jsx ├── Divider │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── DropDown │ ├── index.d.ts │ ├── index.jsx │ ├── index.rn.jsx │ └── index.scss ├── DuxuiIcon │ ├── DuxuiIcon.ttf │ ├── icons.json │ ├── index.d.ts │ ├── index.jsx │ ├── index.rn.scss │ └── index.scss ├── Elevator │ ├── images │ │ └── search.png │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Empty │ ├── images │ │ └── empty.png │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Flex │ ├── index.d.ts │ └── index.jsx ├── Form │ ├── Cascade.d.ts │ ├── Cascade.jsx │ ├── Cascade.scss │ ├── Checkbox.d.ts │ ├── Checkbox.jsx │ ├── Form.d.ts │ ├── Form.jsx │ ├── Form.scss │ ├── Grade.d.ts │ ├── Grade.jsx │ ├── Grade.scss │ ├── Input.d.ts │ ├── Input.jsx │ ├── Input.scss │ ├── InputCode.d.ts │ ├── InputCode.jsx │ ├── InputCode.scss │ ├── InputNumber.d.ts │ ├── InputNumber.jsx │ ├── InputNumber.scss │ ├── Modal.d.ts │ ├── Modal.jsx │ ├── Modal.scss │ ├── Picker.d.ts │ ├── Picker.jsx │ ├── Radio.d.ts │ ├── Radio.jsx │ ├── Recorder.d.ts │ ├── Recorder.jsx │ ├── Switch.d.ts │ ├── Switch.jsx │ ├── Textarea.d.ts │ ├── Textarea.jsx │ ├── Textarea.scss │ ├── Upload.d.ts │ ├── Upload.jsx │ ├── Upload.scss │ ├── config.d.ts │ ├── config.js │ ├── index.d.ts │ └── index.js ├── Grid │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── HorseLanternLottery │ ├── index.d.ts │ └── index.jsx ├── HtmlView │ ├── components │ │ ├── HtmlView.css │ │ ├── HtmlView.d.ts │ │ ├── HtmlView.jsx │ │ ├── HtmlView.rn.jsx │ │ ├── HtmlView.weapp.jsx │ │ ├── LineEditorView │ │ │ ├── components │ │ │ │ ├── Header.jsx │ │ │ │ ├── Header.scss │ │ │ │ ├── Image.jsx │ │ │ │ ├── Image.scss │ │ │ │ ├── Paragraph.jsx │ │ │ │ ├── Paragraph.scss │ │ │ │ ├── Video.jsx │ │ │ │ └── Video.scss │ │ │ └── index.jsx │ │ ├── RichText │ │ │ ├── index.jsx │ │ │ ├── index.rn.jsx │ │ │ ├── index.scss │ │ │ └── utils.js │ │ ├── index.d.ts │ │ └── index.jsx │ ├── index.d.ts │ ├── index.js │ └── utils │ │ ├── html.js │ │ ├── htmlparser.js │ │ └── tags.json ├── Image │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Interact │ ├── ShowConfirm.jsx │ ├── ShowConfirm.scss │ ├── ShowMessage.jsx │ ├── ShowMessage.scss │ ├── index.d.ts │ └── index.js ├── LicensePlate │ ├── carCity.json │ ├── index.d.ts │ └── index.jsx ├── LinearGradient │ ├── index.d.ts │ ├── index.jsx │ └── index.rn.jsx ├── Link │ ├── index.d.ts │ └── index.jsx ├── List │ ├── FlatList │ │ ├── index.jsx │ │ └── index.rn.jsx │ ├── Loading.jsx │ ├── Loading.scss │ ├── Select.jsx │ ├── Select.scss │ ├── WeappList │ │ ├── index.jsx │ │ └── insex.rn.jsx │ ├── image │ │ └── empty.png │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── LongPress │ ├── index.d.ts │ └── index.jsx ├── Menu │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Modal │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── NumberKeyboard │ ├── index.d.ts │ └── index.jsx ├── Picker │ ├── Date.d.ts │ ├── Date.jsx │ ├── MultiSelector.d.ts │ ├── MultiSelector.jsx │ ├── PickerView.jsx │ ├── Selector.d.ts │ ├── Selector.jsx │ ├── common.scss │ ├── index.js │ └── view │ │ ├── index.jsx │ │ ├── index.rn.jsx │ │ └── rn │ │ ├── MultiPicker.tsx │ │ ├── MultiPickerMixin.tsx │ │ ├── MultiPickerProps.tsx │ │ ├── NativePicker.android.tsx │ │ ├── NativePicker.ios.tsx │ │ ├── NativePicker.tsx │ │ ├── Picker.tsx │ │ ├── PickerMixin.tsx │ │ ├── PickerTypes.tsx │ │ ├── PickerView.tsx │ │ ├── Popup.tsx │ │ ├── PopupMixin.tsx │ │ ├── PopupPickerTypes.tsx │ │ ├── PopupStyles.tsx │ │ ├── PropsType.tsx │ │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ ├── demo.test.js.snap │ │ │ └── index.test.js.snap │ │ ├── demo.test.js │ │ └── index.test.js │ │ ├── cascader │ │ ├── Cascader.tsx │ │ ├── CascaderTypes.tsx │ │ ├── Popup.tsx │ │ ├── PopupStyles.tsx │ │ └── index.tsx │ │ ├── demo │ │ ├── basic.md │ │ ├── basic.tsx │ │ └── data.json │ │ ├── index.en-US.md │ │ ├── index.tsx │ │ ├── index.zh-CN.md │ │ ├── locale │ │ ├── en_US.tsx │ │ ├── es_ES.tsx │ │ ├── fa_IR.tsx │ │ ├── pt_BR.tsx │ │ ├── ru_RU.tsx │ │ ├── sv_SE.tsx │ │ └── zh_CN.tsx │ │ └── style │ │ └── index.tsx ├── ProgressCircle │ ├── index.d.ts │ ├── index.jsx │ └── index.rn.jsx ├── QRCode │ ├── genMatrix.js │ ├── index.d.ts │ ├── index.jsx │ ├── transformMatrixIntoPath.js │ └── utils.js ├── RollingView │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── ScrollViewManage │ └── index.jsx ├── Sign │ ├── index.d.ts │ └── index.jsx ├── Space │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Status │ ├── Common.jsx │ ├── Incline.jsx │ ├── common.scss │ ├── index.d.ts │ ├── index.jsx │ └── util.js ├── Step │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Svg │ ├── Animated │ │ ├── Easing.js │ │ ├── Implementation.js │ │ ├── animations │ │ │ ├── Animation.js │ │ │ └── TimingAnimation.js │ │ ├── bezier.js │ │ ├── index.d.ts │ │ ├── index.js │ │ ├── nodes │ │ │ ├── Interpolation.js │ │ │ ├── Node.js │ │ │ ├── Tracking.js │ │ │ ├── Value.js │ │ │ ├── ValueXY.js │ │ │ └── WithChildren.js │ │ └── normalizeColor.js │ ├── PanResponder │ │ ├── index.d.ts │ │ └── index.js │ ├── SvgToImage │ │ ├── index.d.ts │ │ ├── index.jsx │ │ └── index.rn.jsx │ ├── components │ │ ├── .DS_Store │ │ ├── Circle.jsx │ │ ├── ClipPath.jsx │ │ ├── Common.jsx │ │ ├── Defs.jsx │ │ ├── Ellipse.jsx │ │ ├── G.jsx │ │ ├── Image.jsx │ │ ├── Line.jsx │ │ ├── LinearGradient.jsx │ │ ├── Path.jsx │ │ ├── Poly.jsx │ │ ├── RadialGradient.jsx │ │ ├── Rect.jsx │ │ ├── Stop.jsx │ │ ├── Svg.jsx │ │ ├── SvgComponent.jsx │ │ ├── Text.jsx │ │ ├── Use.jsx │ │ ├── index.js │ │ └── util │ │ │ ├── abs-svg-path.js │ │ │ ├── is-svg-path.js │ │ │ ├── normalize-svg-path.js │ │ │ ├── parse-svg-path.js │ │ │ ├── svg-arc-to-cubic-bezier.js │ │ │ ├── svg-path-bounds.js │ │ │ └── svg-path-to-canvas.js │ ├── index.d.ts │ ├── index.js │ ├── index.rn.js │ └── utils │ │ ├── event.js │ │ └── index.js ├── SvgEditor │ ├── Controller │ │ ├── Common.jsx │ │ ├── Controller.jsx │ │ ├── Menus.jsx │ │ └── index.js │ ├── Editor.jsx │ ├── Painting.jsx │ ├── Text.jsx │ ├── Vector.jsx │ ├── index.d.ts │ ├── index.jsx │ └── util.js ├── Swiper │ ├── index.d.ts │ └── index.jsx ├── Tab │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── TabBar │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Tag │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── Text │ ├── index.d.ts │ ├── index.jsx │ └── index.scss ├── TouchableOpacity │ ├── index.d.ts │ ├── index.jsx │ ├── index.rn.jsx │ └── index.scss ├── UploadManage │ ├── UploadManage.jsx │ ├── UploadManage.scss │ ├── drive │ │ ├── index.js │ │ └── qiniu.js │ ├── icons │ │ ├── ai.png │ │ ├── audio.png │ │ ├── excel.png │ │ ├── index.js │ │ ├── other.png │ │ ├── pdf.png │ │ ├── ppt.png │ │ ├── psd.png │ │ ├── svg.png │ │ ├── txt.png │ │ ├── video.png │ │ ├── word.png │ │ └── zip.png │ ├── index.js │ └── utils │ │ ├── index.js │ │ ├── util.h5.js │ │ ├── util.js │ │ └── util.rn.js ├── Video │ ├── index.d.ts │ └── index.jsx ├── common │ ├── View.jsx │ ├── View.rn.jsx │ └── index.js └── index.js ├── config ├── theme.js └── themeToScss.js ├── index.js ├── package.json └── utils └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Mac 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "duxui", 3 | "description": "DUXUI库", 4 | "version": "1.1.0", 5 | "dependencies": [ 6 | "duxappStyle" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /components/Avatar/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactElement } from 'react' 2 | import { ViewProps } from '@tarojs/components' 3 | 4 | type AvatarSize = 's' | 'm' | 'l' 5 | 6 | type AvatarRadiusType = 'square' | 'round' | 'round-min' 7 | 8 | interface AvatarProps extends ViewProps { 9 | /** 尺寸，默认为 "m" */ 10 | size?: AvatarSize 11 | /** 头像边框类型，默认为 "round" */ 12 | radiusType?: AvatarRadiusType 13 | /** 头像颜色 */ 14 | color?: string 15 | /** 头像背景颜色 */ 16 | bgColor?: string 17 | /** 头像图片地址 */ 18 | url?: string 19 | /** 头像图标，可以是任何支持的 React 组件 */ 20 | icon?: ReactElement 21 | /** 头像图标尺寸 */ 22 | iconSize?: number 23 | /** 子元素 需要传入文本 */ 24 | children?: ReactElement 25 | } 26 | 27 | interface AvatarGroupProps extends ViewProps { 28 | /** 尺寸，默认为 "m" */ 29 | size?: AvatarSize 30 | /** 头像边框类型，默认为 "round" */ 31 | radiusType?: AvatarRadiusType 32 | /** 头像颜色 */ 33 | color?: string 34 | /** 头像背景颜色 */ 35 | bgColor?: string 36 | /** 头像图标尺寸 */ 37 | iconSize?: number 38 | /** 子元素，放入多个Avatar */ 39 | children?: ReactElement 40 | /** 头像之间的距离，默认为 -16 */ 41 | span?: number 42 | /** 最大头像数量，超出部分用 "+" 显示 */ 43 | max?: number 44 | /** 当头像数量超出时，用于替代超出部分的头像 */ 45 | maxProps?: Omit 46 | } 47 | 48 | export const Avatar: React.FC & { 49 | Group: React.FC 50 | } 51 | -------------------------------------------------------------------------------- /components/Avatar/index.scss: -------------------------------------------------------------------------------- 1 | .Avatar { 2 | background-color: $duxuiAvatarBgColor; 3 | overflow: hidden; 4 | align-items: center; 5 | justify-content: center; 6 | 7 | &--s { 8 | width: $duxuiAvatarSSize; 9 | height: $duxuiAvatarSSize; 10 | } 11 | &--m { 12 | width: $duxuiAvatarMSize; 13 | height: $duxuiAvatarMSize; 14 | } 15 | &--l { 16 | width: $duxuiAvatarLSize; 17 | height: $duxuiAvatarLSize; 18 | } 19 | 20 | &--round { 21 | border-radius: 120px; 22 | } 23 | 24 | &--round-min { 25 | border-radius: 6px; 26 | } 27 | 28 | &--text-color { 29 | color: $duxuiAvatarColor; 30 | } 31 | 32 | &__image { 33 | width: 100%; 34 | height: 100%; 35 | } 36 | 37 | &__text { 38 | text-align: center; 39 | &--s { 40 | font-size: 20px; 41 | } 42 | &--m { 43 | font-size: 28px; 44 | } 45 | &--l { 46 | font-size: 36px; 47 | } 48 | } 49 | } 50 | .AvatarGroup { 51 | &--s { 52 | height: $duxuiAvatarSSize; 53 | } 54 | &--m { 55 | height: $duxuiAvatarMSize; 56 | } 57 | &--l { 58 | height: $duxuiAvatarLSize; 59 | } 60 | &__avatar { 61 | position: absolute; 62 | top: 0; 63 | border: 1px solid #fff; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /components/Badge/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactElement } from 'react' 2 | import { ViewProps } from '@tarojs/components' 3 | 4 | interface BadgeNumberProps extends ViewProps { 5 | /** 6 | * 是否作为子元素使用，如果为 true，则样式将不包含任何 padding 或 margin 7 | */ 8 | child?: boolean 9 | } 10 | 11 | interface BadgeProps extends BadgeNumberProps { 12 | /** 13 | * 数量 14 | */ 15 | count?: number 16 | 17 | /** 18 | * 是否只显示圆点 19 | */ 20 | dot?: boolean 21 | 22 | /** 23 | * 背景色 24 | */ 25 | color?: string 26 | 27 | /** 28 | * 是否显示在元素的外侧 29 | * 在有子元素并且不是点状的时候生效 30 | */ 31 | outside?: boolean 32 | 33 | /** 34 | * 文本内容 35 | */ 36 | text?: string 37 | 38 | /** 39 | * 最大数量，超过此值时将显示 `${maxCount}+` 40 | */ 41 | maxCount?: number 42 | 43 | /** 44 | * 组件的子元素，会被包含在徽标元素中 45 | */ 46 | children?: ReactElement 47 | } 48 | 49 | /** 50 | * 显示一个数字或圆点的徽标。 51 | */ 52 | export const Badge: React.FC 53 | -------------------------------------------------------------------------------- /components/Badge/index.scss: -------------------------------------------------------------------------------- 1 | .Badge { 2 | align-items: center; 3 | &__count { 4 | background-color: #F24844; 5 | min-width: 32px; 6 | height: 32px; 7 | border-radius: 16px; 8 | align-items: center; 9 | justify-content: center; 10 | &--child { 11 | position: absolute; 12 | top: -16px; 13 | right: -16px; 14 | } 15 | &--outside { 16 | position: absolute; 17 | top: -16px; 18 | } 19 | &__text { 20 | color: #fff; 21 | font-size: 24px; 22 | padding: 0 8px; 23 | /*postcss-pxtransform rn eject enable*/ 24 | white-space: nowrap; 25 | /*postcss-pxtransform rn eject disable*/ 26 | } 27 | } 28 | &__dot { 29 | background-color: #F24844; 30 | width: 16px; 31 | height: 16px; 32 | border-radius: 8px; 33 | &--child { 34 | position: absolute; 35 | top: -8px; 36 | right: -8px; 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /components/BoxShadow/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react' 2 | import { ViewProps } from '@tarojs/components' 3 | 4 | interface BoxShadowProps extends ViewProps { 5 | /** 阴影颜色，默认值为 '#999' */ 6 | color?: string 7 | /** 阴影边框大小，默认值为 8 */ 8 | border?: number 9 | /** 阴影不透明度，默认值为 0.2 */ 10 | opacity?: number 11 | /** 阴影 x 轴偏移量，默认值为 0 */ 12 | x?: number 13 | /** 阴影 y 轴偏移量，默认值为 0 */ 14 | y?: number 15 | } 16 | 17 | export function BoxShadow(props: BoxShadowProps): JSX.Element 18 | -------------------------------------------------------------------------------- /components/BoxShadow/index.jsx: -------------------------------------------------------------------------------- 1 | import { View } from '@tarojs/components' 2 | import { colorToRgb, px } from '@/duxapp/utils' 3 | import classNames from 'classnames' 4 | 5 | export const BoxShadow = ({ 6 | color = '#999', 7 | border = 8, 8 | radius = 0, 9 | opacity = 0.2, 10 | x = 0, 11 | y = 0, 12 | children, 13 | style, 14 | className, 15 | ...props 16 | }) => { 17 | 18 | const rgb = colorToRgb(color) 19 | 20 | return 29 | {children} 30 | 31 | } 32 | -------------------------------------------------------------------------------- /components/BoxShadow/index.rn.jsx: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | import { ShadowedView, shadowStyle } from 'react-native-fast-shadow' 3 | import ClickableSimplified from '@tarojs/components-rn/dist/components/ClickableSimplified' 4 | import { px } from '@/duxapp/utils' 5 | 6 | const ClickShadowedView = ClickableSimplified(ShadowedView) 7 | 8 | export const BoxShadow = ({ 9 | color = '#999', 10 | border = 8, 11 | opacity = 0.2, 12 | radius = 0, 13 | x = 0, 14 | y = 0, 15 | style, 16 | children, 17 | onClick, 18 | ...props 19 | }) => { 20 | 21 | const View = onClick ? ClickShadowedView : ShadowedView 22 | 23 | return 33 | {children} 34 | 35 | } 36 | 37 | const styles = StyleSheet.create({ 38 | view: { 39 | backgroundColor: '#fff' 40 | } 41 | }) 42 | -------------------------------------------------------------------------------- /components/Button/index.d.ts: -------------------------------------------------------------------------------- 1 | import { CSSProperties, ComponentType, ReactElement } from 'react' 2 | import { ViewProps, ButtonProps as TaroButtonProps } from '@tarojs/components' 3 | 4 | /** 圆角类型 */ 5 | interface type { 6 | /** 默认样式 */ 7 | default 8 | /** 主色 */ 9 | primary 10 | /** 辅色 */ 11 | secondary 12 | /** 成功 */ 13 | success 14 | /** 错误 */ 15 | danger 16 | /** 警告 */ 17 | warning 18 | /** 自定义1 */ 19 | custom1 20 | /** 自定义2 */ 21 | custom2 22 | /** 自定义3 */ 23 | custom3 24 | } 25 | 26 | /** 圆角类型 */ 27 | interface radiusType { 28 | /** 直角 */ 29 | square 30 | /** 圆角 */ 31 | round 32 | /** 较小的圆角 */ 33 | 'round-min' 34 | } 35 | 36 | /** 尺寸 */ 37 | interface size { 38 | /** s号 */ 39 | s 40 | /** m号 */ 41 | m 42 | /** l号 */ 43 | l 44 | } 45 | 46 | 47 | interface ButtonProps extends ViewProps { 48 | /** 按钮类型 */ 49 | type?: keyof type 50 | /** 按钮颜色 设置多个颜色可以渐变 此属性优先级低于type */ 51 | color?: string | string[] 52 | /** 53 | * 渐变角度，仅颜色为数组时生效 54 | * @default 90 从左到右 55 | */ 56 | colorAngle?: number 57 | /** 圆角类型 */ 58 | radiusType?: keyof radiusType 59 | /** 按钮尺寸 */ 60 | size?: keyof size 61 | /** 镂空效果 当为渐变是此属性不会生效 */ 62 | plain?: boolean 63 | /** 是否禁用 */ 64 | disabled?: boolean 65 | /** 显示loading */ 66 | loading?: boolean 67 | /** 按钮文字样式 */ 68 | textStyle?: CSSProperties 69 | /** 自定义渲染按钮内容 当你的内容是图片或者图标以外的内容时，使用此属性替换 */ 70 | renderContent?: ReactElement 71 | /** 点击事件 */ 72 | onClick?: () => any 73 | /** 按钮内容 支持文本或者图标 */ 74 | children?: string 75 | /** 小程序端 openType 属性 */ 76 | openType?: keyof TaroButtonProps.OpenType 77 | } 78 | 79 | /** 80 | * 统一样式的按钮 81 | * @example 82 | * ```jsx 83 | *