├── .gitignore
├── README.md
├── components
    ├── base
    │   ├── button.d.ts
    │   ├── button.jsx
    │   ├── button.scss
    │   ├── calendar
    │   │   ├── index.d.ts
    │   │   ├── index.jsx
    │   │   └── index.scss
    │   ├── editConfig.js
    │   ├── icon.d.ts
    │   ├── icon.jsx
    │   ├── icon.rn.jsx
    │   ├── icon.scss
    │   ├── image.jsx
    │   ├── image.scss
    │   ├── index.js
    │   ├── keyboard_avoiding
    │   │   ├── index.d.ts
    │   │   ├── index.jsx
    │   │   ├── index.rn.jsx
    │   │   └── index.scss
    │   ├── loading
    │   │   ├── index.d.ts
    │   │   ├── index.jsx
    │   │   ├── index.rn.jsx
    │   │   └── index.scss
    │   ├── panel.jsx
    │   ├── panel.scss
    │   ├── scroll_view
    │   │   ├── index.d.ts
    │   │   ├── index.h5.jsx
    │   │   ├── index.jsx
    │   │   ├── index.rn.jsx
    │   │   └── index.scss
    │   ├── swiper.jsx
    │   ├── swiper.scss
    │   ├── tab.jsx
    │   ├── tab.scss
    │   ├── text.jsx
    │   ├── text.scss
    │   ├── video.jsx
    │   ├── video.scss
    │   ├── view.jsx
    │   └── view.scss
    ├── design.js
    ├── editConfig.js
    ├── form
    │   ├── array.jsx
    │   ├── array_one.jsx
    │   ├── array_one.scss
    │   ├── array_two.jsx
    │   ├── array_two.scss
    │   ├── check.jsx
    │   ├── check.scss
    │   ├── color.jsx
    │   ├── color.scss
    │   ├── date.jsx
    │   ├── date.scss
    │   ├── editConfig.js
    │   ├── form.jsx
    │   ├── form.scss
    │   ├── index.js
    │   ├── input.jsx
    │   ├── input.scss
    │   ├── object.jsx
    │   ├── rate.jsx
    │   ├── rate.scss
    │   ├── select.jsx
    │   ├── select.scss
    │   ├── slider.jsx
    │   ├── slider.scss
    │   ├── steep.jsx
    │   ├── steep.scss
    │   ├── switch.jsx
    │   ├── switch.scss
    │   ├── time.jsx
    │   ├── time.scss
    │   ├── upload.jsx
    │   ├── upload.scss
    │   └── utils
    │   │   └── index.js
    ├── index.d.ts
    ├── index.js
    └── overlay
    │   ├── absolute.d.ts
    │   ├── absolute.jsx
    │   ├── index.js
    │   ├── modal.d.ts
    │   ├── modal.jsx
    │   ├── modal.scss
    │   ├── pull_view.d.ts
    │   ├── pull_view.jsx
    │   ├── pull_view.rn.jsx
    │   ├── pull_view.scss
    │   ├── status.jsx
    │   ├── status.rn.jsx
    │   ├── top_view.d.ts
    │   ├── top_view.jsx
    │   └── top_view.scss
├── design
    ├── attrForm
    │   ├── common
    │   │   ├── box.jsx
    │   │   ├── box.scss
    │   │   ├── group.jsx
    │   │   ├── group.scss
    │   │   ├── iconSelect.jsx
    │   │   ├── iconSelect.scss
    │   │   ├── input.jsx
    │   │   ├── input.scss
    │   │   ├── item.jsx
    │   │   ├── item.scss
    │   │   ├── switch.jsx
    │   │   ├── switch.scss
    │   │   ├── tab.jsx
    │   │   └── tab.scss
    │   ├── form.jsx
    │   ├── form.scss
    │   ├── index.js
    │   ├── style.jsx
    │   └── style.scss
    ├── components
    │   ├── AttrForm.jsx
    │   ├── attr.jsx
    │   ├── attr.scss
    │   ├── attrForm.scss
    │   ├── create.jsx
    │   ├── create.scss
    │   ├── del.jsx
    │   ├── del.scss
    │   ├── edit.d.ts
    │   ├── edit.jsx
    │   ├── edit.scss
    │   ├── export.jsx
    │   ├── export.scss
    │   ├── hover.jsx
    │   ├── hover.scss
    │   ├── menus.jsx
    │   ├── menus.scss
    │   ├── node.jsx
    │   ├── node.scss
    │   ├── preview.jsx
    │   └── preview.scss
    ├── index.d.ts
    ├── index.js
    ├── init.js
    ├── min.js
    ├── template
    │   ├── add.jsx
    │   ├── add.scss
    │   ├── auth.jsx
    │   ├── auth.scss
    │   ├── index.jsx
    │   ├── index.scss
    │   ├── list.jsx
    │   ├── list.scss
    │   └── utils
    │   │   ├── index.js
    │   │   ├── request.js
    │   │   └── user.js
    └── util
    │   ├── comp.js
    │   ├── config.d.ts
    │   ├── config.js
    │   ├── context.js
    │   ├── edit.js
    │   ├── editTypes.js
    │   ├── formCreate.d.ts
    │   ├── formCreate.js
    │   ├── history.js
    │   ├── node.js
    │   ├── styled.d.ts
    │   ├── styled.js
    │   └── util.js
├── doc
    ├── customComponent.md
    ├── icon.md
    └── images
    │   ├── image1.png
    │   └── qq.png
├── gulpfile.js
├── index.d.ts
├── index.js
├── package.json
├── render
    ├── ComponentItem.d.ts
    ├── ComponentItem.jsx
    ├── Create.d.ts
    ├── Create.jsx
    ├── index.d.ts
    ├── index.js
    ├── init.js
    ├── static
    │   ├── base.css
    │   └── icon
    │   │   ├── icon.css
    │   │   └── icon.js
    └── util
    │   ├── context.js
    │   ├── icon.d.ts
    │   ├── icon.js
    │   ├── node.d.ts
    │   ├── node.js
    │   ├── styled.d.ts
    │   └── styled.js
├── tsconfig.json
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | 
 2 | # node.js
 3 | #
 4 | node_modules/
 5 | npm-debug.log
 6 | yarn-error.log
 7 | 
 8 | # typedoc
 9 | docs/
10 | 


--------------------------------------------------------------------------------
/components/base/button.d.ts:
--------------------------------------------------------------------------------
 1 | import { CSSProperties, LegacyRef, ComponentType } from 'react'
 2 | 
 3 | /** 圆角类型 */
 4 | interface radiusType {
 5 |   /** 直角 */
 6 |   'right-angle'
 7 |   /** 圆角 */
 8 |   fillet
 9 |   /** 较小的圆角 */
10 |   'fillet-min'
11 | }
12 | 
13 | /** 尺寸 */
14 | interface size {
15 |   /** s号 */
16 |   s
17 |   /** m号 */
18 |   m
19 |   /** l号 */
20 |   l
21 |   /** xl号 */
22 |   xl
23 |   /** xxl号 */
24 |   xxl
25 |   /** xxxl号 */
26 |   xxxl
27 | }
28 | 
29 | 
30 | interface ButtonProps {
31 |   /** 按钮文字 */
32 |   text: string
33 |   /** 按钮颜色 */
34 |   color?: string
35 |   /** 圆角类型 */
36 |   radiusType?: keyof radiusType
37 |   /** 按钮尺寸 */
38 |   size?: keyof size
39 |   /** 镂空效果 */
40 |   plain?: boolean
41 |   /** 是否禁用 */
42 |   disabled?: boolean
43 |   /** 显示loading */
44 |   loading?: boolean
45 |   /** 按钮样式 */
46 |   style?: CSSProperties
47 |   /** 按钮文字样式 */
48 |   textStyle?: CSSProperties
49 |   /** 按钮前置图片 */
50 |   beforeImage?: string
51 |   /** 按钮后置图片 */
52 |   afterImage?: string
53 |   /** 点击事件 */
54 |   onClick: () => any
55 |   /** 引用 */
56 |   ref?: LegacyRef<any>
57 | }
58 | 
59 | /**
60 |  * 统一样式的按钮
61 |  * @example
62 |  * ```jsx
63 |  * <Button text='立即购买' size='l' plain />
64 |  * ```
65 |  */
66 | export const Button: ComponentType<ButtonProps>
67 | 


--------------------------------------------------------------------------------
/components/base/button.jsx:
--------------------------------------------------------------------------------
 1 | import Taro from '@tarojs/taro'
 2 | import { View, Text, Image } from '@tarojs/components'
 3 | import { getContrastYIQ } from 'taro-tools'
 4 | import Loading from './loading'
 5 | import './button.scss'
 6 | 
 7 | const sizes = {
 8 |   s: { fontSize: 24, padding: 20, height: 50 },
 9 |   m: { fontSize: 26, padding: 25, height: 56 },
10 |   l: { fontSize: 28, padding: 30, height: 70 },
11 |   xl: { fontSize: 30, padding: 35, height: 80 },
12 |   xxl: { fontSize: 32, padding: 40, height: 90 },
13 |   xxxl: { fontSize: 34, padding: 45, height: 100 }
14 | }
15 | 
16 | export default ({
17 |   text,
18 |   color = '#333',
19 |   radiusType = 'fillet',
20 |   size = 'l',
21 |   plain = false,
22 |   style = {},
23 |   textStyle = {},
24 |   disabled,
25 |   loading,
26 |   beforeImage,
27 |   afterImage,
28 |   onClick
29 | }) => {
30 | 
31 |   let borderColor
32 |   let textColor
33 |   let backgroundColor = 'transparent'
34 |   if (!!plain) {
35 |     borderColor = textColor = color
36 |   } else {
37 |     borderColor = backgroundColor = color
38 |     textColor = getContrastYIQ(color)
39 |   }
40 | 
41 |   return <View
42 |     onClick={e => !disabled && onClick?.(e)}
43 |     className={`btn-comp btn-comp--${radiusType}${disabled ? ' btn-comp--disabled' : ''}`}
44 |     style={{
45 |       backgroundColor,
46 |       borderColor,
47 |       paddingLeft: Taro.pxTransform(sizes[size].padding),
48 |       paddingRight: Taro.pxTransform(sizes[size].padding),
49 |       height: Taro.pxTransform(sizes[size].height),
50 |       ...style
51 |     }}
52 |   >
53 |     {!!beforeImage && <Image className='btn-comp__image' src={beforeImage} style={{ width: Taro.pxTransform(sizes[size].fontSize * 1.5), height: Taro.pxTransform(sizes[size].fontSize * 1.5) }} />}
54 |     <Text
55 |       numberOfLines={1}
56 |       className='btn-comp__txt number-of-lines'
57 |       style={{
58 |         color: textColor,
59 |         fontSize: Taro.pxTransform(sizes[size].fontSize),
60 |         ...textStyle
61 |       }}
62 |     >{text}</Text>
63 |     {!!afterImage && <Image className='btn-comp__image' src={afterImage} style={{ width: Taro.pxTransform(sizes[size].fontSize * 1.5), height: Taro.pxTransform(sizes[size].fontSize * 1.5) }} />}
64 |     {loading && <Loading size={sizes[size].fontSize * 1.5} />}
65 |   </View>
66 | 
67 | }
68 | 
69 | 


--------------------------------------------------------------------------------
/components/base/button.scss:
--------------------------------------------------------------------------------
 1 | .btn-comp{
 2 |   align-items: center;
 3 |   justify-content: center;
 4 |   flex-direction: row;
 5 |   border-width: 2px;
 6 |   /*postcss-pxtransform rn eject enable*/
 7 |   border-style: solid;
 8 |   /*postcss-pxtransform rn eject disable*/
 9 |   &--fillet{
10 |     border-radius: 750px;
11 |   }
12 |   &--fillet-min{
13 |     border-radius: 10px;
14 |   }
15 |   &--disabled{
16 |     opacity: 0.3;
17 |   }
18 |   &__image{
19 |     margin: 0 10px;
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/components/base/calendar/index.d.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentType, Component, CSSProperties } from 'react'
 2 | 
 3 | interface CalendarProps {
 4 |   /** 日历功能类型 默认为日期选择 */
 5 |   mode?: keyof {
 6 |     /** 日期选择 */
 7 |     day
 8 |     /** 周选择 */
 9 |     week
10 |     /** 日期范围选择 */
11 |     scope
12 |   }
13 |   /**
14 |    * 选中的值
15 |    * 当为日期选择时需要传入字符串 格式为 2020-01-01
16 |    * 当为周或者范围选择时需要传入数组，数字第一项为开始日期，第二项为结束日期 如 ['2020-01-01', '2020-01-05']
17 |    */
18 |   value?: string | string[]
19 |   /** 样式 */
20 |   style?: CSSProperties
21 |   /** 样式类名 */
22 |   className?: string
23 |   /** 当选择发生改变是触发的时事件 */
24 |   onChange?: (value: string | string[]) => void
25 |   /** 允许选择的最大日期 如2020-01-01 */
26 |   max?: string
27 |   /** 允许选择的最小日期 如2020-01-01 */
28 |   min?: string
29 |   /** 是否仅显示当前日期所在的周 为true只会显示一周的数据 */
30 |   onlyCurrentWeek?: boolean
31 |   /** 引用 */
32 |   ref?: string | ((node: any) => any)
33 | }
34 | 
35 | interface SelectTast extends Promise<SelectTast> {
36 | 
37 | }
38 | 
39 | interface CalendarSelectProps {
40 |   ref?: string | ((node: {
41 |     select: (option: CalendarProps) => SelectTast
42 |   }) => void)
43 | }
44 | 
45 | /**
46 |  * 日历选择组件
47 |  * @example
48 |  * <Calendar
49 |  *  mode='day'
50 |  *  value='2020-01-01',
51 |  *  onChange={val => console.log(val)}
52 |  * />
53 |  */
54 | export class Calendar extends Component<CalendarProps> {
55 |   /**
56 |    * 计算这个日期是哪一年第几月的第几周
57 |    * 返回一个数组 三项分别是年月周
58 |    */
59 |   static getMonthWeekForDay: (
60 |     /** 日期 如 2020-01-01 */
61 |     day: string
62 |   ) => string[]
63 | 
64 |   /**
65 |    * 计算指定日期所在的周的第一天和最后一天
66 |    * 返回一个数组 两项 分别是开始和结束日期的字符串
67 |    */
68 |   static getWeekScopeForDay: (
69 |     /** 日期 如 2020-01-01 */
70 |     day: string
71 |   ) => string[]
72 | 
73 |   /**
74 |    * 计算指定日期所在的月的第一天和最后一天
75 |    * 返回一个数组 两项 分别是开始和结束日期的字符串
76 |    */
77 |   static getMouthScopeForDay: (
78 |     /** 日期 如 2020-01-01 */
79 |     day: string
80 |   ) => string[]
81 | }
82 | 
83 | /**
84 |  * 通过创建一个ref，通过ref提供的select函数异步调用日历选择
85 |  * @example
86 |  * const calendarSelect = useRef(null)
87 |  *
88 |  * const select = useCallback(() => {
89 |  *  calendarSelect.select({})
90 |  * }, [])
91 |  *
92 |  * return <CalendarSelect
93 |  *  ref={calendarSelect}
94 |  * />
95 |  */
96 | export const CalendarSelect: ComponentType<CalendarSelectProps>
97 | 


--------------------------------------------------------------------------------
/components/base/calendar/index.scss:
--------------------------------------------------------------------------------
 1 | .calendars {
 2 |   background-color: #fff;
 3 |   padding: 10px 5px;
 4 |   &__head {
 5 |     padding: 10px 30px;
 6 |     flex-direction: row;
 7 |     align-items: center;
 8 |     justify-content: space-between;
 9 |     &__text {
10 |       font-size: 32px;
11 |       color: #000;
12 |     }
13 |   }
14 |   &__row {
15 |     flex-direction: row;
16 |     &__item {
17 |       flex: 1;
18 |       justify-content: center;
19 |       align-items: center;
20 |       height: 80px;
21 |       &__select {
22 |         position: absolute;
23 |         background-color: #f24844;
24 |         z-index: 1;
25 |         top: 10px;
26 |         bottom: 10px;
27 |         &--select {
28 |           left: 10px;
29 |           right: 10px;
30 |           border-radius: 40px;
31 |         }
32 |         &--start {
33 |           left: 10px;
34 |           right: -1px;
35 |           border-radius: 40px 0 0 40px;
36 |         }
37 |         &--end {
38 |           left: -1px;
39 |           right: 10px;
40 |           border-radius: 0 40px 40px 0;
41 |         }
42 |         &--center {
43 |           left: -1px;
44 |           right: -1px;
45 |         }
46 |       }
47 |       &__text {
48 |         color: #333;
49 |         font-size: 28px;
50 |         z-index: 1;
51 |         &--disable {
52 |           color: #999;
53 |         }
54 |       }
55 |     }
56 |   }
57 | }
58 | .calendars-select {
59 |   &__top {
60 |     background-color: #fff;
61 |     border-radius: 40px 40px 0 0;
62 |     justify-content: space-between;
63 |     flex-direction: row;
64 |     &__right {
65 |       padding: 32px 32px 12px;
66 |       font-size: 32px;
67 |       color: #f24844;
68 |     }
69 | 
70 |     &__center {
71 |       padding: 32px 32px 12px;
72 |       flex: 1;
73 |       font-size: 36px;
74 |       font-weight: bold;
75 |       color: #323233;
76 |       text-align: center;
77 |     }
78 | 
79 |     &__left {
80 |       padding: 32px 32px 12px;
81 |       font-size: 32px;
82 |       color: #999999;
83 |     }
84 |   }
85 | }
86 | 


--------------------------------------------------------------------------------
/components/base/icon.d.ts:
--------------------------------------------------------------------------------
 1 | import { CSSProperties, LegacyRef, ComponentType } from 'react'
 2 | 
 3 | interface IconProps {
 4 |   /** 图标库 */
 5 |   font?: string
 6 |   /**
 7 |    * 图标名称
 8 |    * 这是一个不包含前缀的名称
 9 |    * 你可以传名称或者一个数组第一项表示字体 第二项表示名称
10 |    */
11 |   name: string | [string, string]
12 |   /** 图标颜色 */
13 |   color?: string
14 |   /** 尺寸 等同于fontSize */
15 |   size?: number
16 |   /** 按钮样式 */
17 |   style?: CSSProperties
18 |   /** 点击事件 */
19 |   onClick: (event: Event | any) => void
20 |   /** 引用 */
21 |   ref?: LegacyRef<any>
22 | }
23 | 
24 | /**
25 |  * 图标
26 |  * @example
27 |  * ```jsx
28 |  * <Icon name='pingfen-yipingfen' />
29 |  * ```
30 |  */
31 | export const Icon: ComponentType<IconProps>
32 | 


--------------------------------------------------------------------------------
/components/base/icon.jsx:
--------------------------------------------------------------------------------
 1 | import Taro from '@tarojs/taro'
 2 | import { Text } from '@tarojs/components'
 3 | import classNames from 'classnames'
 4 | import { icons, styles } from '../../render'
 5 | import './icon.scss'
 6 | 
 7 | 
 8 | export default ({ font = 'icon', name, style, className, color, size = 32, onClick }) => {
 9 |   if (typeof name === 'object') {
10 |     font = name[0]
11 |     name = name[1]
12 |   }
13 |   if (!icons[font]) {
14 |     console.log(font + ' 图标库未定义')
15 |     return null
16 |   }
17 |   if (!icons[font].list?.[name]) {
18 |     console.log(font + ' 图标库下的 ' + name + ' 图标未定义')
19 |     return null
20 |   }
21 | 
22 |   return <Text
23 |     onClick={onClick}
24 |     style={styles({ color, fontSize: Taro.pxTransform(size) }, style)}
25 |     className={classNames(font, icons[font].prefix + name, className)}
26 |   />
27 | }
28 | 


--------------------------------------------------------------------------------
/components/base/icon.rn.jsx:
--------------------------------------------------------------------------------
 1 | import Taro from '@tarojs/taro'
 2 | import { Text } from 'react-native'
 3 | import { styles } from '../../render'
 4 | import { icons } from '../../render/util/icon'
 5 | import './icon.scss'
 6 | 
 7 | export default ({ font = 'icon', name, style, color, size = 32, onClick }) => {
 8 |   if (typeof name === 'object') {
 9 |     font = name[0]
10 |     name = name[1]
11 |   }
12 |   if (!icons[font]) {
13 |     console.log(font + ' 图标库未定义')
14 |     return null
15 |   }
16 |   if (!icons[font].list?.[name]) {
17 |     console.log(font + ' 图标库下的 ' + name + ' 图标未定义')
18 |     return null
19 |   }
20 | 
21 |   return <Text
22 |     onPress={onClick}
23 |     style={styles({ color, fontSize: Taro.pxTransform(size) }, style, { fontFamily: font })}
24 |   >{String.fromCharCode(icons[font].list[name])}</Text>
25 | }
26 | 
27 | 
28 | 


--------------------------------------------------------------------------------
/components/base/icon.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/components/base/icon.scss


--------------------------------------------------------------------------------
/components/base/image.jsx:
--------------------------------------------------------------------------------
 1 | import { Image } from '@tarojs/components'
 2 | import { filterProps } from '../../render'
 3 | import './image.scss'
 4 | 
 5 | export default props => <Image
 6 |   {...filterProps(props)}
 7 |   webp
 8 |   showMenuByLongpress
 9 | />
10 | 


--------------------------------------------------------------------------------
/components/base/image.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/components/base/image.scss


--------------------------------------------------------------------------------
/components/base/index.js:
--------------------------------------------------------------------------------
 1 | import Image from './image'
 2 | import Text from './text'
 3 | import Icon from './icon'
 4 | import Button from './button'
 5 | import Video from './video'
 6 | import View from './view'
 7 | import Loading from './loading'
 8 | import ScrollView from './scroll_view'
 9 | import KeyboardAvoiding from './keyboard_avoiding'
10 | import { SwiperLayout, SwiperItemLayout } from './swiper'
11 | import { Calendar, CalendarSelect } from './calendar'
12 | 
13 | export default {
14 |   view: View,
15 |   text: Text,
16 |   image: Image,
17 |   icon: Icon,
18 |   video: Video,
19 |   swiper: SwiperLayout,
20 |   'swiper-item': SwiperItemLayout,
21 |   loading: Loading
22 | }
23 | 
24 | export {
25 |   Icon,
26 |   Button,
27 |   Loading,
28 |   ScrollView,
29 |   KeyboardAvoiding,
30 |   Calendar,
31 |   CalendarSelect
32 | }
33 | 


--------------------------------------------------------------------------------
/components/base/keyboard_avoiding/index.d.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentType } from 'react'
 2 | 
 3 | interface KeyboardAvoidingProps {
 4 |   /** 引用 */
 5 |   ref?: string | ((node: any) => any)
 6 | }
 7 | 
 8 | /**
 9 |  * 键盘弹起时将会把键盘的部分排除在外 某些页面需要输入框在底部固定的将页面放在此组件内会自动弹起输入框
10 |  * @example
11 |  * <KeyboardAvoiding>
12 |  *  <Text>内容不会被渲染在全面屏的底部操作部分</Text>
13 |  *  <Input />
14 |  * </KeyboardAvoiding>
15 |  */
16 | export const KeyboardAvoiding: ComponentType<KeyboardAvoidingProps>
17 | 


--------------------------------------------------------------------------------
/components/base/keyboard_avoiding/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | export default ({ children }) => <>{children}</>
4 | 


--------------------------------------------------------------------------------
/components/base/keyboard_avoiding/index.rn.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { KeyboardAvoidingView, Platform } from 'react-native'
 3 | import './index.scss'
 4 | 
 5 | export default ({ children, isForm }) => {
 6 |   return isForm ?
 7 |     <KeyboardAvoidingView className='keyboard-avoiding' behavior={Platform.OS !== 'android' ? 'padding' : ''} enabled>
 8 |       {children}
 9 |     </KeyboardAvoidingView>
10 |     : <>{children}</>
11 | }
12 | 


--------------------------------------------------------------------------------
/components/base/keyboard_avoiding/index.scss:
--------------------------------------------------------------------------------
1 | .keyboard-avoiding {
2 |   flex: 1;
3 | }
4 | 


--------------------------------------------------------------------------------
/components/base/loading/index.d.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentType, CSSProperties } from 'react'
 2 | 
 3 | interface color {
 4 |   /** 深色 #7a7a7a */
 5 |   dark
 6 |   /** 白色 #fff */
 7 |   blank
 8 | }
 9 | 
10 | interface LoadingProps {
11 |   /** loading颜色 */
12 |   color?: keyof color,
13 |   /** loading尺寸 */
14 |   size?: number,
15 |   /** 图标样式 传入color和fontSize会覆盖 color和size属性 */
16 |   style?: CSSProperties,
17 |   /** 引用 */
18 |   ref?: string | ((node: any) => any)
19 | }
20 | 
21 | /**
22 |  * 菊花loading动画 三端统一
23 |  * @example <Loading size={60} />
24 |  * @info size不支持动态更改，只会渲染其初始值
25 |  */
26 | export const Loading: ComponentType<LoadingProps>
27 | 


--------------------------------------------------------------------------------
/components/base/loading/index.jsx:
--------------------------------------------------------------------------------
 1 | import { Component } from 'react'
 2 | import Taro from '@tarojs/taro'
 3 | import { View } from '@tarojs/components'
 4 | import './index.scss'
 5 | 
 6 | export default class Loading extends Component {
 7 | 
 8 |   state = {
 9 |     lines: [],
10 |     width: 0,
11 |     r: 0
12 |   }
13 | 
14 |   componentDidMount() {
15 |     const { size = 52 } = this.props
16 |     this.getList(size)
17 |   }
18 | 
19 |   // 获取直角三角形两直角边宽度
20 |   getTriangleWidth(hypotenuse, angle = 0) {
21 |     return {
22 |       opposite: hypotenuse * Math.cos(angle * 2 * Math.PI / 360), // 对边
23 |       frontier: hypotenuse * Math.sin(angle * 2 * Math.PI / 360) //  临边
24 |     }
25 |   }
26 | 
27 |   // 获取每个线条的位置
28 |   getList(size) {
29 |     const halfSize = size / 2 // 正方形的一半长
30 |     const r = size / 6 //空心圆的半径
31 |     const l = (size - r * 2) / 2 // 线的长度
32 |     const halfL = l / 2 // 线一半的长度
33 |     const centerR = halfL + r // 定位中心点的圆的半径
34 |     let lines = []
35 |     for (let i = 0; i < 8; i++) {
36 |       const { opposite: left, frontier: top } = this.getTriangleWidth(centerR, i * 45)
37 |       lines.push({
38 |         left: halfSize + left,
39 |         top: halfSize + top
40 |       })
41 |     }
42 |     this.setState({
43 |       width: size,
44 |       r: halfL,
45 |       lines
46 |     })
47 |   }
48 | 
49 |   render() {
50 |     const { style = {}, color = 'dark' } = this.props
51 |     const { lines, width, r } = this.state
52 |     const colors = {
53 |       dark: '#7a7a7a',
54 |       blank: '#fff'
55 |     }
56 |     return (
57 |       <View className='loading' style={{
58 |         ...style,
59 |         width: Taro.pxTransform(width),
60 |         height: Taro.pxTransform(width),
61 |       }}
62 |       >
63 |         {
64 |           lines.map((item, index) => {
65 |             return <View
66 |               key={'item' + index}
67 |               className={`child child-${index + 1}`}
68 |               style={{
69 |                 marginTop: Taro.pxTransform(- r),
70 |                 height: Taro.pxTransform(r * 2),
71 |                 transform: 'rotate(' + (index * 45 + 90) + 'deg)',
72 |                 left: Taro.pxTransform(item.left),
73 |                 top: Taro.pxTransform(item.top),
74 |                 backgroundColor: colors[color] || colors.dark
75 |               }}
76 |             />
77 |           })
78 |         }
79 |       </View>
80 |     )
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/components/base/loading/index.rn.jsx:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import Taro from '@tarojs/taro'
  3 | import { View } from '@tarojs/components'
  4 | import { Animated, Easing, StyleSheet } from 'react-native'
  5 | import { styles } from '../../../render'
  6 | 
  7 | export default class Loading extends Component {
  8 |   constructor(props) {
  9 |     super(props)
 10 |     this.animatedValue = new Animated.Value(1)
 11 |   }
 12 | 
 13 |   state = {
 14 |     lines: [],
 15 |     width: 0,
 16 |     r: 0
 17 |   }
 18 | 
 19 |   componentDidMount() {
 20 |     const { size = 52 } = this.props
 21 |     this.getList(Taro.pxTransform(size))
 22 |     this.animate()
 23 |   }
 24 | 
 25 |   animate() {
 26 |     this.animatedValue.setValue(1)
 27 |     Animated.timing(
 28 |       this.animatedValue,
 29 |       {
 30 |         toValue: 8,
 31 |         duration: 800,
 32 |         easing: Easing.linear,
 33 |         useNativeDriver: true
 34 |       }
 35 |     ).start(() => this.animate())
 36 |   }
 37 | 
 38 |   // 获取直角三角形两直角边宽度
 39 |   getTriangleWidth(hypotenuse, angle = 0) {
 40 |     return {
 41 |       opposite: hypotenuse * Math.cos(angle * 2 * Math.PI / 360), // 对边
 42 |       frontier: hypotenuse * Math.sin(angle * 2 * Math.PI / 360) //  临边
 43 |     }
 44 |   }
 45 | 
 46 |   // 获取每个线条的位置
 47 |   getList(size) {
 48 |     const halfSize = size / 2 // 正方形的一半长
 49 |     const r = size / 6 //空心圆的半径
 50 |     const l = (size - r * 2) / 2 // 线的长度
 51 |     const halfL = l / 2 // 线一半的长度
 52 |     const centerR = halfL + r // 定位中心点的圆的半径
 53 |     let lines = []
 54 |     for (let i = 0; i < 8; i++) {
 55 |       const { opposite: left, frontier: top } = this.getTriangleWidth(centerR, i * 45)
 56 |       lines.push({
 57 |         left: halfSize + left,
 58 |         top: halfSize + top
 59 |       })
 60 |     }
 61 |     this.setState({
 62 |       width: size,
 63 |       r: halfL,
 64 |       lines
 65 |     })
 66 |   }
 67 | 
 68 |   getAnimated(index) {
 69 |     let out = [0.125 * 1, 0.125 * 2, 0.125 * 3, 0.125 * 4, 0.125 * 5, 0.125 * 6, 0.125 * 7, 0.125 * 8]
 70 |     out = [...out.splice(out.length - index), ...out]
 71 |     return this.animatedValue.interpolate({
 72 |       inputRange: [1, 2, 3, 4, 5, 6, 7, 8],
 73 |       outputRange: out
 74 |     })
 75 |   }
 76 | 
 77 |   render() {
 78 |     const { style = {}, color = 'dark' } = this.props
 79 |     const { lines, width, r } = this.state
 80 |     const colors = {
 81 |       dark: '#7a7a7a',
 82 |       blank: '#fff'
 83 |     }
 84 |     return (
 85 |       <View style={styles(style, {
 86 |         width: width,
 87 |         height: width,
 88 |       })}
 89 |       >
 90 |         {
 91 |           lines.map((item, index) => {
 92 |             return <Animated.View
 93 |               key={'item' + index}
 94 |               style={{
 95 |                 ...styleSheet.child,
 96 |                 marginTop: - r,
 97 |                 height: r * 2,
 98 |                 transform: [{ rotate: (index * 45 + 90) + 'deg' }],
 99 |                 ...item,
100 |                 opacity: this.getAnimated(index),
101 |                 backgroundColor: colors[color] || colors.dark
102 |               }}
103 |             />
104 |           })
105 |         }
106 |       </View>
107 |     )
108 |   }
109 | }
110 | 
111 | const styleSheet = StyleSheet.create({
112 |   child: {
113 |     width: 3,
114 |     borderRadius: 1.5,
115 |     position: 'absolute',
116 |     marginLeft: -1.5
117 |   },
118 | })
119 | 


--------------------------------------------------------------------------------
/components/base/loading/index.scss:
--------------------------------------------------------------------------------
 1 | @keyframes line-spin-fade-loader {
 2 |   50% {
 3 |     opacity: 0.3;
 4 |   }
 5 |   100% {
 6 |     opacity: 1;
 7 |   }
 8 | }
 9 | 
10 | .loading {
11 |   position: relative;
12 |   .child {
13 |     border-radius: 3px;
14 |     animation-fill-mode: both;
15 |     position: absolute;
16 |     width: 6px;
17 |     margin-left: -3px;
18 |   }
19 |   .child-1 {
20 |     animation: line-spin-fade-loader 0.8s 0s infinite ease-in-out;
21 |   }
22 |   .child-2 {
23 |     animation: line-spin-fade-loader 0.8s 0.1s infinite ease-in-out;
24 |   }
25 |   .child-3 {
26 |     animation: line-spin-fade-loader 0.8s 0.2s infinite ease-in-out;
27 |   }
28 |   .child-4 {
29 |     animation: line-spin-fade-loader 0.8s 0.3s infinite ease-in-out;
30 |   }
31 |   .child-5 {
32 |     animation: line-spin-fade-loader 0.8s 0.4s infinite ease-in-out;
33 |   }
34 |   .child-6 {
35 |     animation: line-spin-fade-loader 0.8s 0.5s infinite ease-in-out;
36 |   }
37 |   .child-7 {
38 |     animation: line-spin-fade-loader 0.8s 0.6s infinite ease-in-out;
39 |   }
40 |   .child-8 {
41 |     animation: line-spin-fade-loader 0.8s 0.7s infinite ease-in-out;
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/components/base/panel.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react'
 2 | import { Text, View } from '@tarojs/components'
 3 | import classNames from 'classnames'
 4 | import { Icon } from '../../base'
 5 | import './panel.scss'
 6 | 
 7 | export default ({ children, title, open, className, style }) => {
 8 | 
 9 |   const [show, changeShow] = useState(true)
10 | 
11 |   useEffect(() => {
12 |     changeShow(open)
13 |   }, [open])
14 | 
15 |   return <View
16 |     className={classNames(className, 'form-panel')}
17 |     style={style}
18 |   >
19 |     <View
20 |       className='form-panel__head'
21 |       onClick={e => {
22 |         e.stopPropagation && e.stopPropagation()
23 |         changeShow(!show)
24 |       }}
25 |     >
26 |       <Text className='form-panel__head__title'>{title}</Text>
27 |       <Icon name={show ? 'shang2' : 'xia4'} />
28 |     </View>
29 |     {show && children}
30 |   </View>
31 | }
32 | 


--------------------------------------------------------------------------------
/components/base/panel.scss:
--------------------------------------------------------------------------------
 1 | .form-panel {
 2 |   margin: 10px;
 3 |   border: 1px solid #ededed;
 4 |   background-color: #fff;
 5 |   &__head {
 6 |     padding: 10px 20px;
 7 |     flex-direction: row;
 8 |     justify-content: space-between;
 9 |     border-bottom-width: 1px;
10 |     border-bottom-color: #ededed;
11 |     /*postcss-pxtransform rn eject enable*/
12 |     border-bottom-style: solid;
13 |     /*postcss-pxtransform rn eject disable*/
14 |     &__title {
15 |       font-size: 24px;
16 |       color: #333;
17 |     }
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/components/base/scroll_view/index.d.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentType, CSSProperties } from 'react'
 2 | 
 3 | interface ScrollViewProps {
 4 | 
 5 |   /** 组件的内联样式, 可以动态设置的内联样式 */
 6 |   style?: CSSProperties
 7 | 
 8 |   /** 设置竖向滚动条位置
 9 |    * @supported weapp, swan, alipay, tt, h5, rn
10 |    */
11 |   scrollTop?: number
12 | 
13 |   /** 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
14 |    * @supported weapp, swan, alipay, tt, h5
15 |    */
16 |   scrollIntoView?: string
17 | 
18 |   /** 在设置滚动条位置时使用动画过渡
19 |    * @supported weapp, swan, alipay, tt, h5, rn
20 |    * @default fasle
21 |    */
22 |   scrollWithAnimation?: boolean
23 | 
24 |   /** 滚动到底部/右边，会触发 scrolltolower 事件
25 |    * @supported weapp, swan, alipay, tt, h5, rn
26 |    */
27 |   onScrollToLower?: (event: Event) => any
28 | 
29 |   /** 滚动时触发
30 |    * `event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}`
31 |    * @supported weapp, swan, alipay, tt, h5, rn
32 |    */
33 |   onScroll?: (event: Event) => any
34 | 
35 |   /** 下拉刷新状态 设置为true显示加载中 false不显示加载中 */
36 |   refresh?: boolean
37 | 
38 |   /** 下拉刷新触发 */
39 |   onRefresh?: () => any
40 | 
41 |   /** 显示为空提示 */
42 |   emptyShow?: boolean
43 | 
44 |   /** 为空显示图标
45 |    * @default info
46 |    */
47 |   emptyIcon?: string
48 | 
49 |   /** 为空显示标题
50 |    * @default 什么都没有
51 |    */
52 |   emptyTitle?: string
53 | 
54 |   /** 为空显示简介 */
55 |   emptyDesc?: string
56 | 
57 |   /** 为空展示按钮 */
58 |   emptyBttton?: string
59 | 
60 |   /** 为空提示点击时触发 */
61 |   onReload?: () => any
62 | 
63 |   /** 点击为空按钮时触发 */
64 |   onEmptyButtonCilck?: () => any
65 | 
66 |   /** 180翻转内容 */
67 |   flip?: boolean
68 | 
69 |   /** 引用 */
70 |   ref?: string | ((node: any) => any)
71 | }
72 | 
73 | /**
74 |  * 自适应高度的滚动组件 支持设置下拉刷新 上拉加载 为空显示
75 |  * @example
76 |  * ```jsx
77 |  * <View className='page-root'>
78 |  *  <Text>顶部不滚动内容 一般为Header</Text>
79 |  *  <Scroll>
80 |  *    <Text>滚动内容放在此处</Text>
81 |  *  </Scroll>
82 |  *  <Text>底部不滚动内容 根据需要放置</Text>
83 |  * <View>
84 |  * ```
85 |  * @info 注意滚动组件是使用flex的自动最大宽度实现的 所以外层只能使用flex竖向布局 并且得具有固定高度
86 |  * @info 一般页面使用className='page-root'作为页面得最外层，然后将此组件作为它的子组件使用
87 |  */
88 | 
89 | export const ScrollView: ComponentType<ScrollViewProps>
90 | 


--------------------------------------------------------------------------------
/components/base/scroll_view/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Taro from '@tarojs/taro'
 3 | import { ScrollView, View, Text } from '@tarojs/components'
 4 | import Icon from '../icon'
 5 | import Button from '../button'
 6 | import './index.scss'
 7 | 
 8 | export default class Scroll extends Component {
 9 | 
10 |   scroll(e) {
11 |     this.props.onScroll && this.props.onScroll(e)
12 |   }
13 | 
14 |   scrollToLower(e) {
15 |     this.props.onScrollToLower && this.props.onScrollToLower(e)
16 |   }
17 | 
18 |   refresh() {
19 |     const { refresh } = this.props
20 |     !refresh && this.props.onRefresh && this.props.onRefresh(this)
21 |   }
22 | 
23 |   refreshReset() {
24 |   }
25 | 
26 |   reload() {
27 |     this.props.onReload && this.props.onReload()
28 |   }
29 | 
30 |   render() {
31 |     const {
32 |       style = {},
33 |       refresh,
34 |       emptyIcon = 'tishi',
35 |       emptyTitle = '什么都没有',
36 |       emptyDesc,
37 |       emptyBttton,
38 |       emptyColor,
39 |       emptyShow = false,
40 |       scrollWithAnimation = true,
41 |       scrollTop,
42 |       flip = false
43 |     } = this.props
44 | 
45 |     const colorStyle = emptyColor ? { color: emptyColor } : {}
46 | 
47 |     return <View className='scroll-root'>
48 |       <ScrollView
49 |         scrollY
50 |         className={`scroll-auto-height-weapp scroll ${flip ? 'scroll-flip' : ''}`}
51 |         style={style}
52 |         onScroll={this.scroll.bind(this)}
53 |         onScrollToLower={this.scrollToLower.bind(this)}
54 |         scrollWithAnimation={scrollWithAnimation}
55 |         scrollTop={scrollTop}
56 |         refresherEnabled={refresh !== undefined}
57 |         refresherThreshold={50}
58 |         onRefresherrefresh={this.refresh.bind(this)}
59 |         onRefresherrestore={this.refreshReset.bind(this)}
60 |         refresherTriggered={!!refresh}
61 |         refresherBackground='transparent'
62 |       >
63 |         {emptyShow ?
64 |           <View className={'scroll-info' + (emptyShow ? ' scroll-info--show' : '')} onClick={this.reload.bind(this)}>
65 |             <Icon name={emptyIcon} size={90} color={emptyColor || '#333'} />
66 |             {!!emptyTitle && <Text className='scroll-info__title' style={colorStyle}>{emptyTitle}</Text>}
67 |             {!!emptyDesc && <Text className='scroll-info__desc' style={colorStyle}>{emptyDesc}</Text>}
68 |             {!!emptyBttton && <Button size='m' text={emptyBttton} style={{ marginTop: Taro.pxTransform(20) }} onClick={() => this.props.onEmptyButtonCilck && this.props.onEmptyButtonCilck()} />}
69 |           </View> :
70 |           this.props.children
71 |         }
72 |       </ScrollView>
73 |     </View>
74 |   }
75 | }
76 | 


--------------------------------------------------------------------------------
/components/base/scroll_view/index.rn.jsx:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Taro from '@tarojs/taro'
 3 | import { View, Text, ScrollView } from '@tarojs/components'
 4 | import { RefreshControl } from 'react-native'
 5 | import { styles } from '../../../render'
 6 | import Icon from '../icon'
 7 | import Button from '../button'
 8 | import './index.scss'
 9 | 
10 | export default class Scroll extends Component {
11 | 
12 |   scroll(e) {
13 |     this.props.onScroll && this.props.onScroll(e)
14 |   }
15 | 
16 |   scrollToLower(e) {
17 |     this.props.onScrollToLower && this.props.onScrollToLower(e)
18 |   }
19 | 
20 |   reload() {
21 |     this.props.onReload && this.props.onReload()
22 |   }
23 | 
24 |   render() {
25 |     const {
26 |       style = {},
27 |       refresh = false,
28 |       emptyIcon = 'tishi',
29 |       emptyTitle = '什么都没有',
30 |       emptyDesc,
31 |       emptyBttton,
32 |       emptyColor,
33 |       emptyShow = false,
34 |       scrollWithAnimation = true,
35 |       scrollTop,
36 |       flip = false,
37 |       showsVerticalScrollIndicator = true,
38 |       contentContainerStyle = {},
39 |       flatListParams
40 |     } = this.props
41 | 
42 |     const colorStyle = emptyColor ? { color: emptyColor } : {}
43 | 
44 |     return (
45 |       <View style={{ flex: 1, transform: flip ? [{ rotate: '180deg' }] : [] }} >
46 |         <ScrollView
47 |           scrollY
48 |           showsVerticalScrollIndicator={showsVerticalScrollIndicator}
49 |           contentContainerStyle={contentContainerStyle}
50 |           {...{
51 |             refreshControl: this.props.onRefresh && <RefreshControl
52 |               refreshing={refresh}
53 |               onRefresh={this.props.onRefresh}
54 |               colors={['rgb(217, 51, 58)']}
55 |             />
56 |           }}
57 |           {...flatListParams}
58 |           style={styles({ height: 1 }, style)}
59 |           onScroll={this.scroll.bind(this)}
60 |           onScrollToLower={this.scrollToLower.bind(this)}
61 |           scrollWithAnimation={scrollWithAnimation}
62 |           scrollTop={scrollTop}
63 |           scrollIndicatorInsets={{ right: 1 }}
64 |         >
65 |           {!emptyShow && this.props.children}
66 |           {emptyShow && <View
67 |             className={'scroll-info-rn' + (emptyShow ? ' scroll-info--show' : '')}
68 |             onClick={this.reload.bind(this)}
69 |             style={(!!emptyBttton ? { zIndex: 1 } : {})}
70 |           >
71 |             <Icon name={emptyIcon} size={90} color={emptyColor || '#333'} />
72 |             {!!emptyTitle && <Text className='scroll-info__title' style={colorStyle}>{emptyTitle}</Text>}
73 |             {!!emptyDesc && <Text className='scroll-info__desc' style={colorStyle}>{emptyDesc}</Text>}
74 |             {!!emptyBttton && <Button size='m' text={emptyBttton} style={{ marginTop: Taro.pxTransform(20) }} onClick={() => this.props.onEmptyButtonCilck && this.props.onEmptyButtonCilck()} />}
75 |           </View>}
76 |         </ScrollView>
77 |       </View>
78 |     )
79 |   }
80 | }
81 | 


--------------------------------------------------------------------------------
/components/base/scroll_view/index.scss:
--------------------------------------------------------------------------------
 1 | /*postcss-pxtransform rn eject enable*/
 2 | .scroll-root {
 3 |   flex: 1;
 4 |   overflow: hidden;
 5 |   position: relative;
 6 | }
 7 | .scroll {
 8 |   display: initial;
 9 | }
10 | .scroll-flip {
11 |   transform: rotate(180deg);
12 | }
13 | .scroll-auto-height-weapp {
14 |   position: absolute;
15 |   top: 0;
16 |   right: 0;
17 |   bottom: 0;
18 |   left: 0;
19 |   // z-index: 1;
20 | }
21 | .scroll-auto-height-h5 {
22 |   position: absolute;
23 |   top: 0;
24 |   right: 0;
25 |   bottom: 0;
26 |   left: 0;
27 |   // z-index: 1;
28 | }
29 | .scroll-auto-height {
30 |   flex: 1;
31 | }
32 | .scroll-refresh {
33 |   display: flex;
34 |   justify-content: center;
35 |   align-items: center;
36 |   height: 100px;
37 |   position: absolute;
38 |   top: -140px;
39 |   left: 0;
40 |   right: 0;
41 |   // z-index: 2;
42 |   transform: translate3d(0px, 0px, 0px);
43 |   /*postcss-pxtransform rn eject enable*/
44 |   transition: transform 0s;
45 |   /*postcss-pxtransform rn eject disable*/
46 | }
47 | /*postcss-pxtransform rn eject disable*/
48 | .scroll-info {
49 |   position: absolute;
50 |   left: 0;
51 |   right: 0;
52 |   top: 150px;
53 |   justify-content: center;
54 |   align-items: center;
55 |   &--show {
56 |     opacity: 1;
57 |   }
58 |   &__title {
59 |     padding: 20px 0;
60 |     color: #333;
61 |     font-size: 32px;
62 |     /*postcss-pxtransform rn eject enable*/
63 |     word-break: break-all;
64 |     /*postcss-pxtransform rn eject disable*/
65 |   }
66 |   &__desc {
67 |     color: #999;
68 |     font-size: 32px;
69 |     /*postcss-pxtransform rn eject enable*/
70 |     word-break: break-all;
71 |     /*postcss-pxtransform rn eject disable*/
72 |   }
73 | }
74 | 
75 | .scroll-info-rn {
76 |   margin-top: 150px;
77 |   justify-content: center;
78 |   align-items: center;
79 | }
80 | 


--------------------------------------------------------------------------------
/components/base/swiper.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Swiper, SwiperItem } from '@tarojs/components'
 3 | import classNames from 'classnames'
 4 | import { filterProps } from '../../render'
 5 | import './swiper.scss'
 6 | 
 7 | const SwiperLayout = props => {
 8 |   return <Swiper {...filterProps(props)}>
 9 |     {props.children}
10 |   </Swiper>
11 | }
12 | 
13 | const SwiperItemLayout = ({ children, className, ...props }) => {
14 |   return <SwiperItem
15 |     className={classNames(className, 'form-swiper-item')}
16 |     {...filterProps(props)}
17 |   >
18 |     {children}
19 |   </SwiperItem>
20 | }
21 | 
22 | export {
23 |   SwiperLayout,
24 |   SwiperItemLayout
25 | }
26 | 


--------------------------------------------------------------------------------
/components/base/swiper.scss:
--------------------------------------------------------------------------------
1 | .form-swiper-item {
2 |   display: flex;
3 |   flex-direction: column;
4 |   /*  #ifndef  rn  */
5 |   box-sizing: border-box;
6 |   /*  #endif  */
7 | }
8 | 


--------------------------------------------------------------------------------
/components/base/tab.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useCallback, useMemo } from 'react'
 2 | import { View, Text } from '@tarojs/components'
 3 | import classNames from 'classnames'
 4 | import './tab.scss'
 5 | 
 6 | const Tab = ({ attr, hover, change, child }) => <View className={`form-tab__nav${['top', 'bottom'].includes(attr.position) ? ' form-tab__nav--row' : ''}`}>
 7 |   {child.map((item, index) => <View
 8 |     className={`form-tab__nav__item${hover === index ? ' form-tab__nav__item--hover' : ''}`}
 9 |     key={item.key}
10 |     onClick={e => {
11 |       e.stopPropagation && e.stopPropagation()
12 |       change(index)
13 |     }}
14 |   >
15 |     <Text className='form-tab__nav__item__txt'>{item.tabName || 'tab'}</Text>
16 |   </View>)}
17 | </View>
18 | 
19 | const TabLayout = ({ children, onEvent, _childNodes, ...attr }) => {
20 | 
21 |   const [hover, setHover] = useState(0)
22 | 
23 |   const change = useCallback((i) => {
24 |     setHover(i)
25 |   }, [])
26 | 
27 |   const tabStart = useMemo(() => ['left', 'top'].includes(attr.position), [attr])
28 | 
29 |   const row = useMemo(() => ['left', 'right'].includes(attr.position), [attr])
30 | 
31 |   const nodes = useMemo(() => {
32 |     _childNodes.map(item => {
33 |       item.hidden = true
34 |       return item
35 |     })
36 |     if (_childNodes[hover]) {
37 |       _childNodes[hover].hidden = false
38 |     }
39 |     return _childNodes
40 |   }, [_childNodes, hover])
41 | 
42 |   return <View className={classNames(attr.className, 'form-tab', { 'form-tab--row': row })} style={attr.style}>
43 |     {tabStart && <Tab attr={attr} child={_childNodes} hover={hover} change={change} />}
44 |     <View className='form-tab__child'>
45 |       {children({ nodes })}
46 |     </View>
47 |     {!tabStart && <Tab attr={attr} child={_childNodes} hover={hover} change={change} />}
48 |   </View>
49 | 
50 | }
51 | 
52 | TabLayout.designConfig = {
53 |   childFunc: true
54 | }
55 | 
56 | const TabItemLayout = ({ children }) => children
57 | 
58 | export {
59 |   TabLayout,
60 |   TabItemLayout
61 | }
62 | 


--------------------------------------------------------------------------------
/components/base/tab.scss:
--------------------------------------------------------------------------------
 1 | .form-tab {
 2 |   &--row {
 3 |     flex-direction: row;
 4 |   }
 5 |   &__nav {
 6 |     flex-shrink: 0;
 7 |     align-items: center;
 8 |     &--row {
 9 |       flex-direction: row;
10 |     }
11 |     &__item {
12 |       padding: 10px;
13 |       border-bottom-width: 4px;
14 |       border-bottom-color: transparent;
15 |       /*postcss-pxtransform rn eject enable*/
16 |       border-bottom-style: solid;
17 |       /*postcss-pxtransform rn eject disable*/
18 |       &--hover {
19 |         border-bottom-width: 4px;
20 |         border-bottom-color: #666;
21 |         /*postcss-pxtransform rn eject enable*/
22 |         border-bottom-style: solid;
23 |         /*postcss-pxtransform rn eject disable*/
24 |       }
25 |       &__txt {
26 |         font-size: 28px;
27 |         color: #333;
28 |       }
29 |     }
30 |   }
31 |   &__child {
32 |     flex: 1;
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/components/base/text.jsx:
--------------------------------------------------------------------------------
 1 | import { Text } from '@tarojs/components'
 2 | import classNames from 'classnames'
 3 | import { filterProps, styles } from '../../render'
 4 | import './text.scss'
 5 | 
 6 | export default ({ text, className, style, numberOfLines, ...props }) => {
 7 |   return <Text
 8 |     {...(numberOfLines ? { numberOfLines: Number(numberOfLines) } : {})}
 9 |     className={classNames(className, process.env.TARO_ENV === 'rn' ? '' : numberOfLines == 1 ? 'number-of-lines' : numberOfLines > 1 ? 'number-of-lines--more' : '')}
10 |     style={styles(
11 |       style,
12 |       (process.env.TARO_ENV !== 'rn' && numberOfLines > 1 ? {
13 |         '-webkit-line-clamp': numberOfLines
14 |       } : {})
15 |     )}
16 |     {...filterProps(props)}
17 |   >{text}</Text>
18 | }
19 | 


--------------------------------------------------------------------------------
/components/base/text.scss:
--------------------------------------------------------------------------------
 1 | /*postcss-pxtransform rn eject enable*/
 2 | .number-of-lines {
 3 |   //超出一行文字自动隐藏
 4 |   overflow: hidden;
 5 |   //文字隐藏后添加省略号
 6 |   text-overflow: ellipsis;
 7 |   //强制不换行
 8 |   white-space: nowrap;
 9 |   &--more {
10 |     display: -webkit-box;
11 |     overflow: hidden;
12 | 
13 |     /*! autoprefixer: ignore next */
14 |     -webkit-box-orient: vertical;
15 |     text-overflow: ellipsis;
16 |   }
17 | }
18 | /*postcss-pxtransform rn eject disable*/
19 | 


--------------------------------------------------------------------------------
/components/base/video.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Video } from '@tarojs/components'
3 | import { filterProps } from '../../render'
4 | import './video.scss'
5 | 
6 | export default props => <Video {...filterProps(props)} />
7 | 


--------------------------------------------------------------------------------
/components/base/video.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/components/base/video.scss


--------------------------------------------------------------------------------
/components/base/view.jsx:
--------------------------------------------------------------------------------
 1 | import { View } from '@tarojs/components'
 2 | import { filterProps } from '../../render'
 3 | import './view.scss'
 4 | 
 5 | export default props => {
 6 | 
 7 |   return <View {...filterProps(props)}>
 8 |     {props.children}
 9 |   </View>
10 | }
11 | 


--------------------------------------------------------------------------------
/components/base/view.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/components/base/view.scss


--------------------------------------------------------------------------------
/components/design.js:
--------------------------------------------------------------------------------
 1 | import form from './form'
 2 | import base from './base'
 3 | 
 4 | /**
 5 |  * 组件索引
 6 |  */
 7 | export default {
 8 |   ...base,
 9 |   ...form
10 | }
11 | 


--------------------------------------------------------------------------------
/components/editConfig.js:
--------------------------------------------------------------------------------
1 | import form from './form/editConfig'
2 | import base from './base/editConfig'
3 | 
4 | export default {
5 |   ...form,
6 |   ...base
7 | }
8 | 


--------------------------------------------------------------------------------
/components/form/array.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { getComponentConfig } from '../../render'
 3 | 
 4 | // 递归获取子表单
 5 | const getChild = (list, name, index = [0]) => {
 6 |   return list.map(item => {
 7 |     const newItem = { ...item }
 8 |     if (getComponentConfig(newItem.nodeName).isForm) {
 9 |       newItem.name = typeof name === 'object' ? [...name, index[0]] : [name, index[0]]
10 |       index[0]++
11 |     } else if (newItem.child) {
12 |       newItem.child = getChild(newItem.child, name, index)
13 |     }
14 |     return newItem
15 |   })
16 | }
17 | 
18 | const ArrayForm = ({ children, name, _childNodes, _edit }) => {
19 | 
20 |   return <React.Fragment>
21 |     {_edit ? children() : children({ nodes: getChild(_childNodes, name) })}
22 |   </React.Fragment>
23 | 
24 | }
25 | 
26 | ArrayForm.designConfig = {
27 |   childFunc: true,
28 |   defaultValue: () => [],
29 |   isForm: true
30 | }
31 | 
32 | export default ArrayForm
33 | 


--------------------------------------------------------------------------------
/components/form/array_one.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useMemo, useContext } from 'react'
 2 | import { View, Text } from '@tarojs/components'
 3 | import { getKey, recursionGetValue } from 'taro-tools'
 4 | import { Icon } from '../base'
 5 | import { getFormItemDefaultValue } from './utils'
 6 | import { FormContext } from './form'
 7 | import './array_one.scss'
 8 | 
 9 | const ArrayOne = ({ children, name, _childNodes, _edit, style }) => {
10 | 
11 |   const { updateValue, values } = useContext(FormContext)
12 | 
13 |   const value = useMemo(() => recursionGetValue(name, values), [name, values]) || []
14 | 
15 |   // 添加行
16 |   const addRow = useCallback(() => {
17 |     if (_childNodes.length === 0) {
18 |       return
19 |     }
20 |     value.push(getFormItemDefaultValue(_childNodes[0]))
21 |     updateValue(name, [...value])
22 |   }, [updateValue, name, value, _childNodes])
23 | 
24 |   // 删除行
25 |   const delRow = useCallback(index => {
26 |     value.splice(index, 1)
27 |     updateValue(name, [...value])
28 |   }, [updateValue, name, value])
29 | 
30 |   // 重组child
31 |   const nodes = useMemo(() => {
32 |     const list = []
33 |     const [item] = _childNodes
34 |     if (!item) {
35 |       return list
36 |     }
37 |     const newValue = _edit ? [''] : value
38 |     for (let i = 0, l = newValue.length; i < l; i++) {
39 |       list.push({
40 |         ...item,
41 |         name: [...(typeof name === 'object' ? name : [name]), i],
42 |         key: getKey()
43 |       })
44 |     }
45 |     return list
46 |   }, [_childNodes, name, value, _edit])
47 | 
48 |   return !_edit
49 |     ? <View style={style}>
50 |       <View className='form-array-one__form'>
51 |         <View className='form-array-one__create'>
52 |           {children({ nodes })}
53 |         </View>
54 |         <View className='form-array-one__actions'>
55 |           {
56 |             value.map((item, index) => <View key={'item' + index} className='form-array-one__actions__item'>
57 |               <Icon name='guanbi2' onClick={() => delRow(index)} />
58 |             </View>)
59 |           }
60 |         </View>
61 |       </View>
62 |       <View className='form-array-one__add' onClick={addRow}>
63 |         <Icon name='jiahao' />
64 |         <Text className='form-array-one__add__text'>添加行</Text>
65 |       </View>
66 |     </View> : children()
67 | }
68 | 
69 | ArrayOne.designConfig = {
70 |   childFunc: true,
71 |   defaultValue: () => [],
72 |   isForm: true
73 | }
74 | 
75 | export default ArrayOne
76 | 


--------------------------------------------------------------------------------
/components/form/array_one.scss:
--------------------------------------------------------------------------------
 1 | .form-array-one {
 2 |   &__form {
 3 |     flex-direction: row;
 4 |     border: 1px solid #ededed;
 5 |   }
 6 |   &__create {
 7 |     flex: 1;
 8 |   }
 9 |   &__actions {
10 |     flex-shrink: 0;
11 |     width: 100px;
12 |     &__item {
13 |       flex: 1;
14 |       flex-shrink: 0;
15 |       align-items: center;
16 |       justify-content: center;
17 |     }
18 |   }
19 |   &__add {
20 |     flex-direction: row;
21 |     align-items: center;
22 |     justify-content: center;
23 |     padding: 10px;
24 |     margin: 10px 0;
25 |     border: 1px solid #ededed;
26 |     &__text {
27 |       font-size: 24px;
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/components/form/array_two.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useMemo, useContext } from 'react'
  2 | import Taro from '@tarojs/taro'
  3 | import { ScrollView, View, Text } from '@tarojs/components'
  4 | import { deepCopy, recursionGetValue } from 'taro-tools'
  5 | import { Icon } from '../base'
  6 | import { getFormDefaultValue } from './utils'
  7 | import { FormContext } from './form'
  8 | import { styled } from '../../render'
  9 | import './array_two.scss'
 10 | 
 11 | const getLineNodeData = (child, index) => {
 12 |   return deepCopy(child).map(item => {
 13 |     const name = item?.child?.[0]?.name
 14 |     if (Array.isArray(name)) {
 15 |       name.splice(name.length - 1, 0, index)
 16 |     }
 17 |     return item
 18 |   })
 19 | }
 20 | 
 21 | const ArrayTwo = ({ children, name, _childNodes, _edit }) => {
 22 | 
 23 |   const { updateValue, values } = useContext(FormContext)
 24 | 
 25 |   const value = useMemo(() => recursionGetValue(name, values), [name, values])
 26 | 
 27 |   // 添加行
 28 |   const addRow = useCallback(() => {
 29 |     value.push(getFormDefaultValue(_childNodes))
 30 |     updateValue(name, value)
 31 |   }, [name, value, updateValue, _childNodes])
 32 | 
 33 |   // 删除行
 34 |   const delRow = useCallback(index => {
 35 |     value.splice(index, 1)
 36 |     updateValue(name, value)
 37 |   }, [name, value, updateValue])
 38 | 
 39 |   const showChild = _childNodes.filter(item => !item.child?.[0]?.hidden)
 40 | 
 41 |   const actionWidth = useMemo(() => 100, [])
 42 |   const newValue = useMemo(() => _edit ? [{}] : value || [], [_edit, value])
 43 | 
 44 |   return <ScrollView className='form-array-two' scrollX>
 45 |     {
 46 |       !_edit
 47 |         ? <View className='form-array-two__table'>
 48 |           <View className='form-array-two__head'>
 49 |             {showChild.map(item => <View
 50 |               key={item.key}
 51 |               className='form-array-two__head__item'
 52 |               style={styled.styleTransform(item.style).style}
 53 |             >
 54 |               <Text className='form-array-two__head__item__txt'>{item.text}</Text>
 55 |               <Text className='form-array-two__head__item__tip'>{item.tip}</Text>
 56 |             </View>)}
 57 |             <View
 58 |               className='form-array-two__head__item'
 59 |               style={{ width: Taro.pxTransform(actionWidth) }}
 60 |             >
 61 |               <Icon name='jiahao' onClick={addRow} />
 62 |             </View>
 63 |           </View>
 64 |           {
 65 |             newValue.map((item, index) => <View key={'item' + index} className='form-array-two__main'>
 66 |               {children({ nodes: getLineNodeData(showChild, index) })}
 67 |               <View className='form-array-two__main__action' style={{ width: Taro.pxTransform(actionWidth) }}>
 68 |                 <Icon name='guanbi2' onClick={() => delRow(index)} />
 69 |               </View>
 70 |             </View>)
 71 |           }
 72 |         </View>
 73 |         : <View className='form-array-two__edit'>
 74 |           <View className='form-array-two__head'>
 75 |             {showChild.map(item => <View
 76 |               key={item.key}
 77 |               className='form-array-two__head__item'
 78 |               style={styled.styleTransform(item.style).style}
 79 |             >
 80 |               <Text className='form-array-two__head__item__txt'>{item.text}</Text>
 81 |               <Text className='form-array-two__head__item__tip'>{item.tip}</Text>
 82 |             </View>)}
 83 |           </View>
 84 |           <View className='form-array-two__edit__main'>
 85 |             {children({ nodes: showChild })}
 86 |           </View>
 87 |         </View>
 88 |     }
 89 |   </ScrollView>
 90 | }
 91 | 
 92 | ArrayTwo.designConfig = {
 93 |   childFunc: true,
 94 |   defaultValue: () => [],
 95 |   isForm: true,
 96 |   // 当前子组件发生更新时更新我
 97 |   childForceUpdateSelf: true
 98 | }
 99 | 
100 | const ArrayTowItem = ({ children, _edit, _childNodes, ...props }) => {
101 |   return <View {...props}>{children}</View>
102 | }
103 | 
104 | export {
105 |   ArrayTwo,
106 |   ArrayTowItem
107 | }
108 | 


--------------------------------------------------------------------------------
/components/form/array_two.scss:
--------------------------------------------------------------------------------
 1 | .form-array-two {
 2 |   /*  #ifndef rn  */
 3 |   white-space: nowrap;
 4 |   &::-webkit-scrollbar {
 5 |     display: block;
 6 |     border-radius: 5px;
 7 |     height: 10px;
 8 |     background-color: #f5f5f5;
 9 |   }
10 |   /*定义滚动条轨道 内阴影+圆角*/
11 |   &::-webkit-scrollbar-track {
12 |     border-radius: 5px;
13 |     background-color: #f5f5f5;
14 |   }
15 | 
16 |   /*定义滑块 内阴影+圆角*/
17 |   &::-webkit-scrollbar-thumb {
18 |     border-radius: 5px;
19 |     background-color: #555;
20 |   }
21 |   /*  #endif  */
22 |   &__edit {
23 |     min-width: 100%;
24 |     /*  #ifndef rn  */
25 |     display: inline-block;
26 |     /*  #endif  */
27 |     &__main {
28 |       flex-direction: row;
29 |     }
30 |   }
31 |   &__table {
32 |     border: 1px solid #ededed;
33 |     /*  #ifndef rn  */
34 |     display: inline-block;
35 |     /*  #endif  */
36 |   }
37 |   &__head {
38 |     flex-direction: row;
39 |     border-bottom-width: 1px;
40 |     border-bottom-color: #ededed;
41 |     /*  #ifndef rn  */
42 |     border-bottom-style: solid;
43 |     /*  #endif  */
44 |     &__item {
45 |       align-items: center;
46 |       justify-content: center;
47 |       padding: 10px;
48 |       flex-shrink: 0;
49 |       &__txt {
50 |         font-size: 28px;
51 |         color: #333;
52 |         font-weight: bold;
53 |       }
54 |       &__tip {
55 |         font-size: 24px;
56 |         color: #999;
57 |       }
58 |     }
59 |   }
60 |   &__main {
61 |     flex-direction: row;
62 |     &__action {
63 |       flex-shrink: 0;
64 |       align-items: center;
65 |       justify-content: center;
66 |     }
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/components/form/check.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useContext, useMemo } from 'react'
 2 | import { View, Text } from '@tarojs/components'
 3 | import { recursionGetValue } from 'taro-tools'
 4 | import { Icon } from '../base'
 5 | import { FormContext } from './form'
 6 | import './check.scss'
 7 | 
 8 | const CheckForm = ({ name, title }) => {
 9 | 
10 |   const { updateValue, values = {} } = useContext(FormContext)
11 | 
12 |   const value = useMemo(() => recursionGetValue(name, values), [name, values])
13 | 
14 |   const input = useCallback(() => {
15 |     updateValue?.(name, !value)
16 |   }, [name, updateValue, value])
17 | 
18 |   return <View className='form-check' onClick={input}>
19 |     <View className='form-check__click'>
20 |       {!!value && value !== '0' && <Icon name='duihao2' size={38} />}
21 |     </View>
22 |     {!!title && <Text className='form-check__tip'>{title}</Text>}
23 |   </View>
24 | }
25 | 
26 | CheckForm.designConfig = {
27 |   defaultValue: false,
28 |   isForm: true
29 | }
30 | 
31 | export default CheckForm
32 | 


--------------------------------------------------------------------------------
/components/form/check.scss:
--------------------------------------------------------------------------------
 1 | .form-check{
 2 |   flex-direction: row;
 3 |   align-items: center;
 4 |   &__click{
 5 |     width: 60px;
 6 |     height: 60px;
 7 |     border: 1px solid #ededed;
 8 |     border-radius: 5px;
 9 |     align-items: center;
10 |     justify-content: center;
11 |   }
12 |   &__tip{
13 |     margin-left: 20px;
14 |     font-size: 26px;
15 |     color: #333;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/components/form/color.jsx:
--------------------------------------------------------------------------------
 1 | import { useRef, useContext, useMemo, useCallback, useState } from 'react'
 2 | import { View, Input } from '@tarojs/components'
 3 | import { isColorString, recursionGetValue } from 'taro-tools'
 4 | import { PullView } from '../../components'
 5 | import { FormContext } from './form'
 6 | import './color.scss'
 7 | 
 8 | const colors = ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E']
 9 | 
10 | const ColorForm = ({ name, _edit, ...attr }) => {
11 | 
12 |   const { updateValue, values } = useContext(FormContext)
13 | 
14 |   const value = useMemo(() => recursionGetValue(name, values), [name, values])
15 | 
16 |   const [show, setShow] = useState(false)
17 | 
18 |   const submit = useCallback(val => {
19 |     updateValue(name, val)
20 |   }, [name, updateValue])
21 | 
22 |   const close = useCallback(() => {
23 |     setShow(false)
24 |   }, [])
25 | 
26 |   // 颜色输入
27 |   const input = useCallback(e => {
28 |     // 验证颜色值的合法性
29 |     if (isColorString(e.detail.value) || e.detail.value === '') {
30 |       updateValue(name, e.detail.value)
31 |     }
32 |   }, [updateValue, name])
33 | 
34 |   // 点击选择颜色
35 |   const click = useCallback(() => {
36 |     if (_edit || attr.disabled) {
37 |       return
38 |     }
39 |     setShow(true)
40 |   }, [_edit, attr])
41 | 
42 |   const pullView = useRef(null)
43 | 
44 |   return <View className='form-color'>
45 |     <View
46 |       className='form-color__color'
47 |       style={{ backgroundColor: value || '#fff' }}
48 |       onClick={click}
49 |     />
50 |     <Input className='form-color__input' value={value} placeholder='颜色值' onInput={input} />
51 |     {show && <PullView ref={pullView} onClose={close}>
52 |       <View className='form-color-pull'>
53 |         {colors.map(item => <View
54 |           className='form-color-pull__item'
55 |           key={item}
56 |           style={{ backgroundColor: item }}
57 |           onClick={() => {
58 |             pullView.current.close()
59 |             submit(item)
60 |           }}
61 |         />)}
62 |         <View className='form-color-pull__item--empty' />
63 |         <View className='form-color-pull__item--empty' />
64 |         <View className='form-color-pull__item--empty' />
65 |         <View className='form-color-pull__item--empty' />
66 |         <View className='form-color-pull__item--empty' />
67 |         <View className='form-color-pull__item--empty' />
68 |         <View className='form-color-pull__item--empty' />
69 |         <View className='form-color-pull__item--empty' />
70 |         <View className='form-color-pull__item--empty' />
71 |         <View className='form-color-pull__item--empty' />
72 |       </View>
73 |     </PullView>}
74 |   </View>
75 | 
76 | }
77 | 
78 | ColorForm.designConfig = {
79 |   defaultValue: '#000',
80 |   isForm: true
81 | }
82 | 
83 | export default ColorForm
84 | 


--------------------------------------------------------------------------------
/components/form/color.scss:
--------------------------------------------------------------------------------
 1 | .form-color{
 2 |   height: 50px;
 3 |   border: 1px solid #ededed;
 4 |   flex-direction: row;
 5 |   align-items: center;
 6 |   padding: 0 10px;
 7 |   &__color{
 8 |     width: 40px;
 9 |     height: 40px;
10 |     border: 1px solid #ededed;
11 |     flex-shrink: 0;
12 |     margin-right: 10px;
13 |   }
14 |   &__input{
15 |     font-size: 24px;
16 |     min-width: 60px;
17 |   }
18 | }
19 | .form-color-pull {
20 |   background-color: #fff;
21 |   padding: 10px;
22 |   flex-direction: row;
23 |   flex-wrap: wrap;
24 |   justify-content: space-between;
25 |   &__item {
26 |     width: 50px;
27 |     height: 50px;
28 |     border: 1px solid #ededed;
29 |     margin: 10px;
30 |     &--empty {
31 |       width: 50px;
32 |       margin: 0 10px;
33 |     }
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/components/form/date.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useMemo, useContext } from 'react'
 2 | import { View, Text, Picker } from '@tarojs/components'
 3 | import { recursionGetValue, dateToStr } from 'taro-tools'
 4 | import { FormContext } from './form'
 5 | import './date.scss'
 6 | 
 7 | const DateForm = ({ name, ...attr }) => {
 8 | 
 9 |   const { updateValue, values } = useContext(FormContext)
10 | 
11 |   const value = useMemo(() => recursionGetValue(name, values), [name, values])
12 | 
13 |   const input = useCallback(e => {
14 |     updateValue(name, e.detail.value)
15 |   }, [name, updateValue])
16 | 
17 |   return <View className='form-date'>
18 |     <Picker mode='date' value={value} disabledd={!!attr.disabled} onChange={input}>
19 |       <Text className='form-date__text'>{value || '请选择日期'}</Text>
20 |     </Picker>
21 |   </View>
22 | }
23 | 
24 | DateForm.designConfig = {
25 |   defaultValue: () => dateToStr('yyyy-MM-dd'),
26 |   isForm: true
27 | }
28 | 
29 | export default DateForm
30 | 


--------------------------------------------------------------------------------
/components/form/date.scss:
--------------------------------------------------------------------------------
1 | .form-date{
2 |   &__text{
3 |     font-size: 26px;
4 |     color: #999;
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/components/form/form.scss:
--------------------------------------------------------------------------------
 1 | .form-item {
 2 |   &__text {
 3 |     padding: 10px;
 4 |   }
 5 |   &__main {
 6 |     flex: 1;
 7 |     min-width: 100px;
 8 |     overflow: hidden;
 9 |   }
10 |   &__verify {
11 |     font-size: 24px;
12 |     color: red;
13 |     margin-top: 8px;
14 |   }
15 |   &__tip {
16 |     font-size: 26px;
17 |     color: #666;
18 |     margin-top: 8px;
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/components/form/index.js:
--------------------------------------------------------------------------------
 1 | import Form, { FormItem } from './form'
 2 | import Input from './input'
 3 | import Select from './select'
 4 | import Switch from './switch'
 5 | import Check from './check'
 6 | import Steep from './steep'
 7 | import Slider from './slider'
 8 | import Rate from './rate'
 9 | import Date from './date'
10 | import Time from './time'
11 | import Color from './color'
12 | import Upload from './upload'
13 | import Object from './object'
14 | import Array from './array'
15 | import ArrayOne from './array_one'
16 | import { ArrayTwo, ArrayTowItem } from './array_two'
17 | import Button from '../base/button'
18 | 
19 | export default {
20 |   form: Form,
21 |   'form-item': FormItem,
22 |   input: Input,
23 |   select: Select,
24 |   switch: Switch,
25 |   check: Check,
26 |   steep: Steep,
27 |   slider: Slider,
28 |   rate: Rate,
29 |   date: Date,
30 |   time: Time,
31 |   color: Color,
32 |   upload: Upload,
33 |   object: Object,
34 |   array: Array,
35 |   'array-one': ArrayOne,
36 |   'array-two': ArrayTwo,
37 |   'array-two-item': ArrayTowItem,
38 |   button: Button
39 | }
40 | 


--------------------------------------------------------------------------------
/components/form/input.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useContext, useMemo } from 'react'
 2 | import { View, Input, Textarea } from '@tarojs/components'
 3 | import Taro from '@tarojs/taro'
 4 | import { recursionGetValue } from 'taro-tools'
 5 | import { Icon } from '../base'
 6 | import { FormContext } from './form'
 7 | import './input.scss'
 8 | 
 9 | const InputForm = ({ name, _edit, _key, multiline, ...attr }) => {
10 | 
11 |   const { updateValue, checkVerify, values } = useContext(FormContext)
12 | 
13 |   const value = useMemo(() => recursionGetValue(name, values), [name, values])
14 | 
15 |   const input = useCallback(e => {
16 |     updateValue(name, e.detail.value)
17 |   }, [updateValue, name])
18 | 
19 |   const blur = useCallback(() => {
20 |     checkVerify(_key)
21 |   }, [checkVerify, _key])
22 | 
23 |   return <View className='form-input'>
24 |     {!!attr.leftIcon && attr.leftIcon.length > 0 && <Icon name={attr.leftIcon} size={36} style={{ marginRight: Taro.pxTransform(10) }} />}
25 |     {
26 |       multiline ?
27 |         <Textarea
28 |           className='form-input__textarea'
29 |           placeholder={attr.placeholder || ''}
30 |           maxLength={attr.maxLength || 140}
31 |           disabled={!!attr.disabled || _edit}
32 |           focus={!!attr.focus}
33 |           value={value}
34 |           onInput={input}
35 |           onBlur={blur}
36 |         /> :
37 |         <Input
38 |           className='form-input__input'
39 |           type={attr.type || 'text'}
40 |           placeholder={attr.placeholder === undefined ? attr.text : attr.placeholder}
41 |           password={!!attr.password}
42 |           maxLength={attr.maxLength || 140}
43 |           disabled={!!attr.disabled || _edit}
44 |           focus={!!attr.focus}
45 |           value={value}
46 |           onInput={input}
47 |           onBlur={blur}
48 |         />
49 |     }
50 |   </View>
51 | }
52 | 
53 | InputForm.designConfig = {
54 |   defaultValue: '',
55 |   isForm: true
56 | }
57 | 
58 | export default InputForm
59 | 


--------------------------------------------------------------------------------
/components/form/input.scss:
--------------------------------------------------------------------------------
 1 | .form-input {
 2 |   flex-direction: row;
 3 |   align-items: center;
 4 |   border: 1px solid #ededed;
 5 |   padding: 10px 15px;
 6 |   &__input {
 7 |     flex: 1;
 8 |     font-size: 26px;
 9 |     padding: 0;
10 |   }
11 |   &__textarea {
12 |     min-width: 200px;
13 |     width: 100%;
14 |     flex: 1;
15 |     border-width: 0;
16 |     height: 140px;
17 |     min-height: 140px;
18 |     text-align-vertical: top;
19 |     textarea {
20 |       /*  #ifndef rn  */
21 |       font-size: 26px;
22 |       outline: none;
23 |       resize: none;
24 |       /*  #endif  */
25 |     }
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/components/form/object.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const ObjectForm = ({ children }) => {
 4 |   return <>{children}</>
 5 | }
 6 | 
 7 | ObjectForm.designConfig = {
 8 |   defaultValue: () => ({}),
 9 |   isForm: true
10 | }
11 | 
12 | export default ObjectForm
13 | 


--------------------------------------------------------------------------------
/components/form/rate.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useMemo, useContext } from 'react'
 2 | import { View } from '@tarojs/components'
 3 | import { recursionGetValue } from 'taro-tools'
 4 | import { Icon } from '../base'
 5 | import { FormContext } from './form'
 6 | import './rate.scss'
 7 | 
 8 | const Rote = ({ name, ...attr }) => {
 9 | 
10 |   const { updateValue, values } = useContext(FormContext)
11 | 
12 |   const value = useMemo(() => recursionGetValue(name, values), [name, values])
13 | 
14 |   const { rule = 5 } = attr
15 | 
16 |   const input = useCallback(val => {
17 |     updateValue(name, val * (rule / 5))
18 |   }, [name, updateValue, rule])
19 | 
20 |   const newValue = useMemo(() => Math.round(value / (rule / 5)), [value, rule])
21 |   const arr = useMemo(() => [1, 2, 3, 4, 5], [])
22 | 
23 |   return <View className='form-rate'>
24 |     {arr.map(item => <Icon
25 |       key={item}
26 |       size={42}
27 |       name={item <= newValue ? 'pingfen-yipingfen' : 'pingfen'}
28 |       color={item <= newValue ? '#333' : '#666'}
29 |       onClick={() => input(item)}
30 |     />)}
31 |   </View>
32 | }
33 | 
34 | Rote.designConfig = {
35 |   defaultValue: item => item.rule,
36 |   isForm: true
37 | }
38 | 
39 | export default Rote
40 | 


--------------------------------------------------------------------------------
/components/form/rate.scss:
--------------------------------------------------------------------------------
1 | .form-rate{
2 |   flex-direction: row;
3 | }
4 | 


--------------------------------------------------------------------------------
/components/form/select.scss:
--------------------------------------------------------------------------------
  1 | .form-select{
  2 |   &--row{
  3 |     flex-direction: row;
  4 |     flex-wrap: wrap;
  5 |   }
  6 |   &--image{
  7 |     justify-content: space-between;
  8 |   }
  9 |   &--card{
 10 |     align-items: stretch;
 11 |     flex-direction: column;
 12 |   }
 13 |   &__option{
 14 |     flex-direction: row;
 15 |   }
 16 |   &__item-text{
 17 |     flex-direction: row;
 18 |     padding: 6px 0;
 19 |     margin-right: 18px;
 20 |     &__right{
 21 |       // flex: 1;
 22 |     }
 23 |     &__name{
 24 |       font-size: 28px;
 25 |       color: #333;
 26 |       margin-top: 2px;
 27 |     }
 28 |     &__desc{
 29 |       margin-top: 6px;
 30 |       font-size: 24px;
 31 |       color: #888;
 32 |     }
 33 |   }
 34 |   &__item-card{
 35 |     flex-direction: row;
 36 |     padding: 10px 20px;
 37 |     margin-right: 18px;
 38 |     margin-bottom: 10px;
 39 |     border: 1px solid #ededed;
 40 |     align-items: center;
 41 |     border-radius: 10px;
 42 |     &__image{
 43 |       width: 80px;
 44 |       height: 80px;
 45 |       background-color: #ededed;
 46 |       margin-right: 10px;
 47 |     }
 48 |     &__right{
 49 |       flex: 1;
 50 |     }
 51 |     &__name{
 52 |       font-size: 28px;
 53 |       color: #333;
 54 |     }
 55 |     &__desc{
 56 |       margin-top: 6px;
 57 |       font-size: 24px;
 58 |       color: #888;
 59 |     }
 60 |   }
 61 |   &__item-image{
 62 |     margin-bottom: 10px;
 63 |     border: 1px solid #ededed;
 64 |     align-items: center;
 65 |     border-radius: 10px;
 66 |     overflow: hidden;
 67 |     width: 220px;
 68 |     position: relative;
 69 |     &__btn{
 70 |       position: absolute;
 71 |       z-index: 1;
 72 |       left: 10px;
 73 |       top: 10px;
 74 |     }
 75 |     &__image{
 76 |       width: 220px;
 77 |       height: 220px;
 78 |       background-color: #ededed;
 79 |     }
 80 |     &__bottom{
 81 |       padding: 8px;
 82 |       align-items: center;
 83 |     }
 84 |     &__name{
 85 |       font-size: 28px;
 86 |       color: #333;
 87 |     }
 88 |     &__desc{
 89 |       margin-top: 6px;
 90 |       font-size: 24px;
 91 |       color: #888;
 92 |     }
 93 |   }
 94 |   &__item-color{
 95 |     height: 60px;
 96 |     min-width: 60px;
 97 |     border-radius: 10px;
 98 |     border: 1px solid #ededed;
 99 |     margin-right: 10px;
100 |     margin-bottom: 10px;
101 |     align-items: center;
102 |     justify-content: center;
103 |     padding: 10px;
104 |   }
105 |   &__value{
106 |     &__select{
107 |       font-size: 26px;
108 |     }
109 |   }
110 |   &__pull{
111 |     &__head{
112 |       flex-direction: row;
113 |       align-items: center;
114 |       justify-content: center;
115 |       &__title{
116 |         font-size: 24px;
117 |       }
118 |     }
119 |     &__scroll{
120 |       margin: 20px 0;
121 |       height: 600px;
122 |     }
123 |   }
124 | }
125 | 


--------------------------------------------------------------------------------
/components/form/slider.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useMemo, useContext } from 'react'
 2 | import { Slider } from '@tarojs/components'
 3 | import { recursionGetValue } from 'taro-tools'
 4 | import { FormContext } from './form'
 5 | import './slider.scss'
 6 | 
 7 | const SliderForm = ({ name, ...attr }) => {
 8 | 
 9 |   const { updateValue, values } = useContext(FormContext)
10 | 
11 |   const value = useMemo(() => recursionGetValue(name, values), [name, values])
12 | 
13 |   const change = useCallback(e => {
14 |     updateValue(name, e.detail.value)
15 |   }, [name, updateValue])
16 | 
17 |   return <Slider value={value} min={attr.min} disabled={!!attr.disabled} max={attr.max} step={attr.step} activeColor='#666' backgroundColor='#ededed' onChange={change} />
18 | }
19 | 
20 | SliderForm.designConfig = {
21 |   defaultValue: item => item.min || 0,
22 |   isForm: true
23 | }
24 | 
25 | export default SliderForm
26 | 


--------------------------------------------------------------------------------
/components/form/slider.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/components/form/slider.scss


--------------------------------------------------------------------------------
/components/form/steep.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useMemo, useContext } from 'react'
 2 | import { View, Text } from '@tarojs/components'
 3 | import { recursionGetValue } from 'taro-tools'
 4 | import { Icon } from '../base'
 5 | import { FormContext } from './form'
 6 | import './steep.scss'
 7 | 
 8 | const Steep = ({ name, ...attr }) => {
 9 | 
10 |   const { updateValue, values } = useContext(FormContext)
11 | 
12 |   const value = useMemo(() => recursionGetValue(name, values), [name, values]) || 0
13 | 
14 |   const { min = 0, max = 9, step = 1 } = attr
15 | 
16 |   const change = useCallback(type => {
17 |     const newValue = Number(value) + (type === '+' ? step : -step)
18 |     if (newValue >= Number(min) && newValue <= Number(max)) {
19 |       updateValue(name, newValue)
20 |     }
21 |   }, [min, max, name, updateValue, value, step])
22 | 
23 |   return <View className='form-steep'>
24 |     <View className='form-steep__btn' onClick={() => change('-')}>
25 |       <Icon name='jianhao' size={32} color={Number(value) <= Number(min) ? '#999' : '#333'} />
26 |     </View>
27 |     <View className='form-steep__num'>
28 |       <Text className='form-steep__num__text'>{value}</Text>
29 |     </View>
30 |     <View className='form-steep__btn' onClick={() => change('+')}>
31 |       <Icon name='jiahao' size={32} color={Number(value) >= Number(max) ? '#999' : '#333'} />
32 |     </View>
33 |   </View>
34 | }
35 | 
36 | Steep.designConfig = {
37 |   defaultValue: item => item.min || 0,
38 |   isForm: true
39 | }
40 | 
41 | export default Steep
42 | 


--------------------------------------------------------------------------------
/components/form/steep.scss:
--------------------------------------------------------------------------------
 1 | .form-steep{
 2 |   flex-direction: row;
 3 |   border: 1px solid #ededed;
 4 |   border-radius: 10px;
 5 |   align-self: flex-start;
 6 |   align-items: stretch;
 7 |   &__btn{
 8 |     align-items: center;
 9 |     justify-content: center;
10 |     height: 60px;
11 |     width: 60px;
12 |   }
13 |   &__num{
14 |     align-items: center;
15 |     justify-content: center;
16 |     padding: 0 30px;
17 |     /*postcss-pxtransform rn eject enable*/
18 |     border-left-style: solid;
19 |     border-right-style: solid;
20 |     /*postcss-pxtransform rn eject disable*/
21 |     border-left-width: 1px;
22 |     border-left-color: #ededed;
23 |     border-right-width: 1px;
24 |     border-right-color: #ededed;
25 |     &__text{
26 |       font-size: 26px;
27 |       color: #333;
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/components/form/switch.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useMemo, useContext } from 'react'
 2 | import { Switch, View } from '@tarojs/components'
 3 | import { recursionGetValue } from 'taro-tools'
 4 | import { FormContext } from './form'
 5 | import './switch.scss'
 6 | 
 7 | const SwitchForm = ({ name, ...attr }) => {
 8 | 
 9 |   const { updateValue, values } = useContext(FormContext)
10 | 
11 |   const value = useMemo(() => recursionGetValue(name, values), [name, values])
12 | 
13 |   const input = useCallback(e => {
14 |     updateValue(name, e.detail.value)
15 |   }, [name, updateValue])
16 | 
17 |   return <View className='form-switch'>
18 |     <Switch checked={!!value && value !== '0'} disabled={!!attr.disabled} onChange={input} />
19 |   </View>
20 | }
21 | 
22 | SwitchForm.designConfig = {
23 |   defaultValue: false,
24 |   isForm: true
25 | }
26 | 
27 | export default SwitchForm
28 | 


--------------------------------------------------------------------------------
/components/form/switch.scss:
--------------------------------------------------------------------------------
1 | .form-switch{
2 |   flex-direction: row;
3 | }
4 | 


--------------------------------------------------------------------------------
/components/form/time.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useMemo, useContext } from 'react'
 2 | import { View, Text, Picker } from '@tarojs/components'
 3 | import { recursionGetValue, dateToStr } from 'taro-tools'
 4 | import { FormContext } from './form'
 5 | import './time.scss'
 6 | 
 7 | const TimeForm = ({ name, ...attr }) => {
 8 |   const { updateValue, values } = useContext(FormContext)
 9 | 
10 |   const value = useMemo(() => recursionGetValue(name, values), [name, values])
11 | 
12 |   const input = useCallback(e => {
13 |     updateValue(name, e.detail.value)
14 |   }, [name, updateValue])
15 | 
16 |   return <View className='form-time'>
17 |     <Picker mode='time' value={value} disabled={!!attr.disabled} onChange={input}>
18 |       <Text className='form-time__text'>{value || '请选择时间'}</Text>
19 |     </Picker>
20 |   </View>
21 | }
22 | 
23 | TimeForm.designConfig = {
24 |   defaultValue: () => dateToStr('HH:mm'),
25 |   isForm: true
26 | }
27 | 
28 | export default TimeForm
29 | 


--------------------------------------------------------------------------------
/components/form/time.scss:
--------------------------------------------------------------------------------
1 | .form-time{
2 |   &__text{
3 |     font-size: 26px;
4 |     color: #999;
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/components/form/upload.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useMemo, useContext } from 'react'
 2 | import { View, Text, Image } from '@tarojs/components'
 3 | import { recursionGetValue, upload, toast } from 'taro-tools'
 4 | import { Icon } from '../base'
 5 | import { FormContext } from './form'
 6 | import './upload.scss'
 7 | 
 8 | const Upload = ({ name, _edit, ...attr }) => {
 9 |   const { updateValue, values } = useContext(FormContext)
10 | 
11 |   const value = useMemo(() => recursionGetValue(name, values), [name, values]) || []
12 | 
13 |   const valueRes = useMemo(() => {
14 |     if (typeof value === 'string') {
15 |       // 处理base64图片
16 |       const text = /;base64,/g
17 |       const mark = ';base64;'
18 |       const newVal = value.replace(text, mark)
19 |       return !newVal ? [] : newVal.split(',').map(v => v.replace(mark, ';base64,'))
20 |     }
21 |     return value
22 |   }, [value])
23 | 
24 |   const getValue = useCallback(val => {
25 |     if (typeof value === 'string') {
26 |       return val.join(',')
27 |     }
28 |     return val
29 |   }, [value])
30 | 
31 |   const add = useCallback(() => {
32 |     if (_edit) {
33 |       return
34 |     }
35 |     if (valueRes.length >= attr.max) {
36 |       return toast('最多上传' + attr.max)
37 |     }
38 |     if (attr.type === 'media') {
39 |       upload(attr.max - valueRes.length, attr.mediaType).then(res => {
40 |         console.log(res)
41 |         valueRes.push(...res)
42 |         updateValue(name, getValue(valueRes))
43 |       })
44 |     }
45 |   }, [name, updateValue, valueRes, attr, _edit, getValue])
46 | 
47 |   const del = useCallback(index => {
48 |     valueRes.splice(index, 1)
49 |     updateValue(name, getValue(valueRes))
50 |   }, [valueRes, name, updateValue, getValue])
51 | 
52 |   const icons = useMemo(() => ({
53 |     'media-image': 'tupian1',
54 |     'media-video': 'shipindefuben',
55 |     'media-all': 'duomeitiwenjian',
56 |     'file-': 'wenjianjia'
57 |   }), [])
58 |   const texts = useMemo(() => ({
59 |     'media-image': '添加图片',
60 |     'media-video': '添加视频',
61 |     'media-all': '添加图片视频',
62 |     'file-': '添加文件'
63 |   }), [])
64 | 
65 |   const iconName = useMemo(() => (`${attr.type}-${attr.type === 'media' ? attr.mediaType : ''}`), [attr])
66 | 
67 |   return <View className='form-upload'>
68 |     {
69 |       valueRes.map((item, index) => <View key={item} className='form-upload__item'>
70 |         <Image className='form-upload__item__image' src={item} />
71 |         {!attr.disabled && <View className='form-upload__item__close'>
72 |           <Icon
73 |             name='guanbi2'
74 |             size={30}
75 |             color='#fff'
76 |             onClick={() => del(index)}
77 |           />
78 |         </View>}
79 |       </View>)
80 |     }
81 |     {!attr.disabled && <View activeOpacity={1} className='form-upload__add' onClick={add}>
82 |       <Icon name={icons[iconName]} size={60} color='#AAAAAA' />
83 |       <Text className='form-upload__add__text'>{texts[iconName]}</Text>
84 |     </View>}
85 |   </View>
86 | }
87 | 
88 | Upload.designConfig = {
89 |   defaultValue: () => [],
90 |   isForm: true
91 | }
92 | 
93 | export default Upload
94 | 


--------------------------------------------------------------------------------
/components/form/upload.scss:
--------------------------------------------------------------------------------
 1 | .form-upload {
 2 |   flex-direction: row;
 3 |   flex-wrap: wrap;
 4 |   &__add {
 5 |     width: 160px;
 6 |     height: 160px;
 7 |     background-color: rgba(244, 244, 244, 1);
 8 |     border-radius: 10px;
 9 |     flex-direction: column;
10 |     align-items: center;
11 |     justify-content: center;
12 |     margin-bottom: 30px;
13 |     margin-right: 15px;
14 |     &__text {
15 |       height: 34px;
16 |       font-size: 24px;
17 |       line-height: 34px;
18 |       color: rgba(111, 111, 111, 1);
19 |       margin-top: 20px;
20 |     }
21 |   }
22 |   &__item {
23 |     width: 160px;
24 |     height: 160px;
25 |     margin-bottom: 30px;
26 |     margin-right: 15px;
27 |     &__image {
28 |       width: 160px;
29 |       height: 160px;
30 |     }
31 |     &__close {
32 |       position: absolute;
33 |       top: 0;
34 |       right: 0;
35 |       width: 40px;
36 |       height: 40px;
37 |       background-color: rgba(0, 0, 0, 0.5);
38 |       align-items: center;
39 |       justify-content: center;
40 |     }
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/components/form/utils/index.js:
--------------------------------------------------------------------------------
  1 | import { componentList } from '../../../render'
  2 | 
  3 | /**
  4 |  * 获取单个表单的默认值
  5 |  * @param {*} item
  6 |  * @returns
  7 |  */
  8 | export const getFormItemDefaultValue = item => {
  9 |   const config = componentList[item.nodeName]?.designConfig
 10 |   const defaultValue = config?.defaultValue
 11 |   if (typeof defaultValue === 'function') {
 12 |     return defaultValue(item)
 13 |   } else if (typeof defaultValue !== 'undefined') {
 14 |     return defaultValue
 15 |   }
 16 |   return ''
 17 | }
 18 | 
 19 | /**
 20 |  * 获取表单的默认值
 21 |  * @param {array} form 表单
 22 |  * @return {object} 表单值
 23 |  */
 24 | const getFormDefaultValue = (form, value = {}) => {
 25 |   for (let i = 0, l = form.length; i < l; i++) {
 26 |     const item = form[i]
 27 |     const config = componentList[item.nodeName]?.designConfig
 28 |     const name = typeof item.name === 'object' ? item.name[item.name.length - 1] : typeof item.name === 'undefined' ? void 0 : item.name
 29 |     if (name !== undefined && value[name] !== undefined) {
 30 |       continue
 31 |     }
 32 |     if (config?.isForm) {
 33 |       const defaultValue = config?.defaultValue
 34 |       if (typeof defaultValue === 'function') {
 35 |         value[name] = defaultValue(item)
 36 |       } else if (typeof defaultValue !== 'undefined') {
 37 |         value[name] = defaultValue
 38 |       } else {
 39 |         value[name] = ''
 40 |       }
 41 |     }
 42 |     // 不是表单 去找子组件是否有表单
 43 |     if (item.child && !config?.isForm) {
 44 |       getFormDefaultValue(item.child, value)
 45 |     }
 46 |     // 是一个对象表单 给对象的内容赋值
 47 |     if (item.child && config?.isForm && typeof value[name] === 'objact' && !Array.isArray(value[name])) {
 48 |       getFormDefaultValue(item.child, value[name])
 49 |     }
 50 |   }
 51 |   return value
 52 | }
 53 | 
 54 | /**
 55 |  * 传入两个值 和判断条件 判断是否正确
 56 |  * @param {any} value 要判断的值
 57 |  * @param {any} beValue 被判断的值
 58 |  * @param {string} judge 判断条件 == | != | > | < | >= | <=
 59 |  * == | != 时：string| number | array, string | number将直接比较, array 将内容逐一比较 如果两边都是array只要其中有任何一个值相等,就通过验证（交集）
 60 |  * > | < | >= | <= 时：string | number 使用大小判断不支持数组，使用数组可能会得到不准确的结果
 61 |  * 所有的验证都是使用的非严格验证 如字符串和数组 '2' == 2 true, true == ''  true, true == '0' false
 62 |  * @return {boolean} 是否符合条件
 63 |  */
 64 | const chechWhere = (value, beValue, judge = '==') => {
 65 |   const types = [typeof value, typeof beValue]
 66 |   const getValue = () => {
 67 |     return typeof beValue === 'object' ? beValue[0] : beValue
 68 |   }
 69 |   switch (judge) {
 70 |     case '>':
 71 |       return value > getValue()
 72 |     case '<':
 73 |       return value < getValue()
 74 |     case '>=':
 75 |       return value >= getValue()
 76 |     case '<=':
 77 |       return value <= getValue()
 78 |     case '==':
 79 |     case '!=':
 80 |       let show = false
 81 |       if (types[0] !== 'object' && types[1] !== 'object') {
 82 |         show = value == beValue
 83 |       } else if (types[0] !== 'object') {
 84 |         show = beValue.some ? beValue.some(item => item == value) : false
 85 |       } else if (types[1] !== 'object') {
 86 |         show = value.some ? value.some(item => item == beValue) : false
 87 |       } else {
 88 |         if (!value.some || !beValue.some) {
 89 |           show = false
 90 |         } else {
 91 |           show = value.some(item => beValue.some(child => child == item))
 92 |         }
 93 |       }
 94 |       return judge === '==' ? show : !show
 95 |     default:
 96 |       return false
 97 |   }
 98 | }
 99 | 
100 | export {
101 |   getFormDefaultValue,
102 |   chechWhere
103 | }
104 | 


--------------------------------------------------------------------------------
/components/index.d.ts:
--------------------------------------------------------------------------------
 1 | export * from './base/button'
 2 | export * from './base/icon'
 3 | export * from './base/keyboard_avoiding'
 4 | export * from './base/loading'
 5 | export * from './base/scroll_view'
 6 | export * from './base/calendar'
 7 | 
 8 | export * from './overlay/top_view'
 9 | export * from './overlay/pull_view'
10 | export * from './overlay/modal'
11 | export * from './overlay/absolute'
12 | 


--------------------------------------------------------------------------------
/components/index.js:
--------------------------------------------------------------------------------
1 | export * from './overlay'
2 | 
3 | export { Icon, Button, Loading, ScrollView, KeyboardAvoiding, Calendar, CalendarSelect } from './base'
4 | 


--------------------------------------------------------------------------------
/components/overlay/absolute.d.ts:
--------------------------------------------------------------------------------
 1 | import { LegacyRef, ComponentType } from 'react'
 2 | 
 3 | interface AbsoluteProps {
 4 |   /** 引用 */
 5 |   ref?: LegacyRef<any>
 6 | }
 7 | 
 8 | /**
 9 |  * 将内容添加到顶层
10 |  * 此组件需要配合TopView组件使用
11 |  * @example
12 |  * ```jsx
13 |  * <Asbolute>
14 |  *   <Text>此处的内容将会添加在和TopView组件相同的位置上</Text>
15 |  * </Asbolute>
16 |  * ```
17 |  */
18 | export const Absolute: ComponentType<AbsoluteProps>
19 | 


--------------------------------------------------------------------------------
/components/overlay/absolute.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef } from 'react'
 2 | import TopView from './top_view'
 3 | 
 4 | export default ({ children }) => {
 5 |   const key = useRef(null)
 6 | 
 7 |   useEffect(() => {
 8 |     return () => {
 9 |       TopView.remove(key.current)
10 |     }
11 |   }, [])
12 | 
13 |   useEffect(() => {
14 |     if (key.current) {
15 |       TopView.update(key.current, children)
16 |     } else {
17 |       key.current = TopView.add(children)
18 |     }
19 |   }, [children])
20 | 
21 |   return <></>
22 | }
23 | 


--------------------------------------------------------------------------------
/components/overlay/index.js:
--------------------------------------------------------------------------------
 1 | import TopView from './top_view'
 2 | import PullView from './pull_view'
 3 | import Modal from './modal'
 4 | import Absolute from './absolute'
 5 | 
 6 | export {
 7 |   TopView,
 8 |   PullView,
 9 |   Modal,
10 |   Absolute
11 | }
12 | 


--------------------------------------------------------------------------------
/components/overlay/modal.d.ts:
--------------------------------------------------------------------------------
 1 | import { LegacyRef, ComponentType } from 'react'
 2 | 
 3 | interface ModalProps {
 4 |   /**
 5 |    * 控制Modal是否显示
 6 |    */
 7 |   show: boolean
 8 |   /** 引用 */
 9 |   ref?: LegacyRef<any>
10 | }
11 | 
12 | /**
13 |  * 全局Modal弹窗
14 |  * 此组件需要配合TopView组件使用
15 |  * @example
16 |  * ```jsx
17 |  * <Modal show>
18 |  *   <Text>此处的内容将会以动画的方式展示在页面中央</Text>
19 |  * </Modal>
20 |  * ```
21 |  */
22 | export const Modal: ComponentType<ModalProps>
23 | 


--------------------------------------------------------------------------------
/components/overlay/modal.jsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, useState, forwardRef, useImperativeHandle, useCallback } from 'react'
 2 | import { View } from '@tarojs/components'
 3 | import { stopPropagation } from 'taro-tools'
 4 | import classNames from 'classnames'
 5 | import TopView from './top_view'
 6 | import './modal.scss'
 7 | 
 8 | const ModalContent = forwardRef(({ children, animation, overlayOpacity = 0.2, onClose }, ref) => {
 9 |   const [show, setShow] = useState(!animation)
10 | 
11 |   useEffect(() => {
12 |     setTimeout(() => {
13 |       setShow(true)
14 |     }, 50)
15 |   }, [])
16 | 
17 |   useImperativeHandle(ref, () => ({
18 |     hide() {
19 |       setShow(false)
20 |     }
21 |   }))
22 | 
23 |   return <View onClick={onClose} className='modal-view' style={{ backgroundColor: show ? `rgba(0, 0, 0, ${overlayOpacity})` : 'rgba(0, 0, 0, 0)' }}>
24 |     <View
25 |       className={classNames('modal-view__main', {
26 |         'modal-view__main--show': show
27 |       })}
28 |       onClick={stopPropagation}
29 |     >
30 |       {children}
31 |     </View>
32 |   </View>
33 | })
34 | 
35 | export default ({ children, show, animation = true, maskClosable = true, overlayOpacity, onClose }) => {
36 |   const key = useRef(null)
37 | 
38 |   const ref = useRef(null)
39 | 
40 |   const close = useCallback(() => {
41 |     if (maskClosable) {
42 |       if (animation) {
43 |         ref.current.hide()
44 |         setTimeout(() => {
45 |           onClose?.()
46 |           TopView.remove(key.current)
47 |           key.current = null
48 |         }, 200)
49 |       } else {
50 |         onClose?.()
51 |         TopView.remove(key.current)
52 |         key.current = null
53 |       }
54 |     }
55 |   }, [maskClosable, animation, onClose])
56 | 
57 |   useEffect(() => {
58 |     return () => {
59 |       TopView.remove(key.current)
60 |     }
61 |   }, [])
62 | 
63 |   useEffect(() => {
64 |     if (show) {
65 |       const ele = <ModalContent ref={ref} animation={animation} onClose={close} overlayOpacity={overlayOpacity}>{children}</ModalContent>
66 |       if (key.current) {
67 |         TopView.update(key.current, ele)
68 |       } else {
69 |         key.current = TopView.add(ele)
70 |       }
71 |     } else if (!show && key.current) {
72 |       if (animation) {
73 |         ref.current.hide()
74 |         setTimeout(() => {
75 |           TopView.remove(key.current)
76 |           key.current = null
77 |         }, 200)
78 |       } else {
79 |         TopView.remove(key.current)
80 |         key.current = null
81 |       }
82 |     }
83 |   }, [children, show, animation, overlayOpacity, close])
84 | 
85 |   return <></>
86 | }
87 | 


--------------------------------------------------------------------------------
/components/overlay/modal.scss:
--------------------------------------------------------------------------------
 1 | .modal-view {
 2 |   position: absolute;
 3 |   left: 0;
 4 |   top: 0;
 5 |   bottom: 0;
 6 |   right: 0;
 7 |   z-index: 10;
 8 |   align-items: center;
 9 |   justify-content: center;
10 |   /*postcss-pxtransform rn eject enable*/
11 |   transition: background-color 0.2s;
12 |   /*postcss-pxtransform rn eject disable*/
13 |   &__main {
14 |     /*postcss-pxtransform rn eject enable*/
15 |     transition: all 0.2s;
16 |     transform: scale3d(0.1, 0.1, 1);
17 |     opacity: 0.2;
18 |     /*postcss-pxtransform rn eject disable*/
19 |     &--show {
20 |       /*postcss-pxtransform rn eject enable*/
21 |       transform: scale3d(1, 1, 1);
22 |       opacity: 1;
23 |       /*postcss-pxtransform rn eject disable*/
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/components/overlay/pull_view.d.ts:
--------------------------------------------------------------------------------
 1 | import { LegacyRef, ComponentType, CSSProperties } from 'react'
 2 | 
 3 | /** 弹出位置 */
 4 | interface side {
 5 |   /** 底部弹出 */
 6 |   bottom
 7 |   /** 顶部弹出 */
 8 |   top
 9 |   /** 左侧弹出 */
10 |   left
11 |   /** 右侧弹出 */
12 |   right
13 | }
14 | 
15 | interface PullViewProps {
16 |   /**
17 |    * 弹出位置
18 |    * @default buttom
19 |   */
20 |   side: keyof side,
21 |   /**
22 |    * 空白区域的不透明度
23 |    * @default 0.5
24 |   */
25 |   overlayOpacity: number
26 |   /**
27 |    * 是否锁定模态框 设置为true点击空白区域无法关闭模态框
28 |    * @default false
29 |   */
30 |   modal: boolean
31 |   /** 弹出层内层样式 */
32 |   style: CSSProperties
33 |   /** 点击非内容区域的关闭事件 */
34 |   onClose: () => any
35 |   /** 引用 */
36 |   ref?: LegacyRef<any>
37 | }
38 | 
39 | /**
40 |  * 从四个方向弹出模态框
41 |  * 此组件需要配合TopView组件使用
42 |  * 当side为top或者buttom时，请确保你的内容具有固定的高度 为left或者right是确保你的内容具有固定宽度（使用flex: 1或者height: 100%让你的内容获取全部高度）
43 |  * @example
44 |  * ```jsx
45 |  * {show && <PullView onClose={() => this.setState({ show: false })}>
46 |  *  <Text>将子内容放在这里，这里可以放任何内容作为弹出内容</Text>
47 |  * </PullView>}
48 |  * ```
49 |  */
50 | export const PullView: ComponentType<PullViewProps>
51 | 


--------------------------------------------------------------------------------
/components/overlay/pull_view.jsx:
--------------------------------------------------------------------------------
 1 | import { Component } from 'react'
 2 | import Taro from '@tarojs/taro'
 3 | import { View } from '@tarojs/components'
 4 | import Absolute from './absolute'
 5 | import './pull_view.scss'
 6 | 
 7 | export default class PullView extends Component {
 8 | 
 9 |   state = {
10 | 
11 |   }
12 | 
13 |   componentDidMount() {
14 |     setTimeout(() => {
15 |       this.setState({
16 |         show: true
17 |       })
18 |     }, 100)
19 |   }
20 | 
21 |   overlayCilck = () => {
22 |     const { modal } = this.props
23 |     if (modal) return
24 |     this.close()
25 |   }
26 | 
27 |   close() {
28 |     this.setState({
29 |       show: false
30 |     })
31 |     setTimeout(() => this.props.onClose && this.props.onClose(), 200)
32 |   }
33 | 
34 |   render() {
35 |     const { show } = this.state
36 |     const { side = 'bottom', style = {}, overlayOpacity = 0.5, children } = this.props
37 |     return <Absolute>
38 |       <View
39 |         className='pull-view'
40 |         style={{ backgroundColor: show ? `rgba(0, 0, 0, ${overlayOpacity})` : 'rgba(0, 0, 0, 0)' }}
41 |         onClick={e => e.stopPropagation && e.stopPropagation()}
42 |       >
43 |         <View className='pull-view__other' onClick={this.overlayCilck}></View>
44 |       </View>
45 |       <View
46 |         className={`pull-view__main pull-view__main--${side}${show ? ' pull-view__main--show' : ''}`}
47 |         style={style}
48 |       >
49 |         {children}
50 |       </View>
51 |     </Absolute>
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/components/overlay/pull_view.rn.jsx:
--------------------------------------------------------------------------------
  1 | import { Component } from 'react'
  2 | import { View } from '@tarojs/components'
  3 | import { findNodeHandle, UIManager, Animated, StyleSheet } from 'react-native'
  4 | import Absolute from './absolute'
  5 | import './pull_view.scss'
  6 | 
  7 | export default class PullView extends Component {
  8 | 
  9 |   constructor(...props) {
 10 |     super(...props)
 11 |     this.state.animationRoot = new Animated.Value(0)
 12 |     this.state.styleRn = StyleSheet.create({
 13 |       position: {},
 14 |       other: {
 15 |         left: 0,
 16 |         top: 0,
 17 |         right: 0,
 18 |         bottom: 0,
 19 |         backgroundColor: 'transparent'
 20 |       },
 21 |     })
 22 |   }
 23 | 
 24 |   state = {
 25 |     animationRoot: null,
 26 |     styleRn: null
 27 |   }
 28 | 
 29 |   componentDidMount() {
 30 |     const { side = 'bottom' } = this.props
 31 |     const position = {}
 32 |     // RN端动画
 33 |     setTimeout(() => {
 34 |       const handle = findNodeHandle(this.anRef)
 35 |       UIManager.measureInWindow(handle, (x, y, width, height) => {
 36 |         const { animationRoot } = this.state
 37 |         switch (side) {
 38 |           case 'left':
 39 |             position.top = 0
 40 |             position.bottom = 0
 41 |             break
 42 |           case 'right':
 43 |             position.top = 0
 44 |             position.bottom = 0
 45 |             break
 46 |           case 'top':
 47 |             position.left = 0
 48 |             position.right = 0
 49 |             break
 50 |           case 'bottom':
 51 |             position.left = 0
 52 |             position.right = 0
 53 |             break
 54 |         }
 55 | 
 56 |         this.setState({
 57 |           styleRn: StyleSheet.create({
 58 |             position
 59 |           })
 60 |         })
 61 |         Animated.timing(
 62 |           animationRoot,
 63 |           {
 64 |             toValue: 1,
 65 |             duration: this.animatedTime,
 66 |             useNativeDriver: false
 67 |           }
 68 |         ).start()
 69 |       })
 70 |     }, 100)
 71 |   }
 72 | 
 73 |   // 动画时间
 74 |   animatedTime = 200
 75 | 
 76 |   overlayCilck() {
 77 |     const { modal } = this.props
 78 |     if (modal) return
 79 |     this.close()
 80 |   }
 81 | 
 82 |   close() {
 83 |     const { animationRoot } = this.state
 84 |     Animated.timing(
 85 |       animationRoot,
 86 |       {
 87 |         toValue: 0,
 88 |         duration: this.animatedTime,
 89 |         useNativeDriver: false
 90 |       }
 91 |     ).start()
 92 |     setTimeout(() => this.props.onClose && this.props.onClose(), this.animatedTime)
 93 |   }
 94 | 
 95 |   render() {
 96 |     const { animationRoot, styleRn } = this.state
 97 |     const { side = 'bottom', style = {}, overlayOpacity = 0.5 } = this.props
 98 |     return <Absolute>
 99 |       <Animated.View
100 |         className='pull-view'
101 |         style={{
102 |           backgroundColor: animationRoot.interpolate({
103 |             inputRange: [0, 1],
104 |             outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${overlayOpacity})`]
105 |           })
106 |         }}
107 |       >
108 |         <View className='pull-view__other' onClick={this.overlayCilck.bind(this)}></View>
109 |       </Animated.View>
110 |       <Animated.View
111 |         ref={ref => this.anRef = ref}
112 |         className='pull-view__main'
113 |         style={{
114 |           ...styleRn.position,
115 |           ...style,
116 |           ...{
117 |             opacity: animationRoot.interpolate({
118 |               inputRange: [0, 1],
119 |               outputRange: [0, 1]
120 |             }),
121 |             [side]: animationRoot.interpolate({
122 |               inputRange: [0, 1],
123 |               outputRange: [-200, 0]
124 |             })
125 |           }
126 |         }}
127 |       >
128 |         {this.props.children}
129 |       </Animated.View>
130 |     </Absolute>
131 |   }
132 | }
133 | 


--------------------------------------------------------------------------------
/components/overlay/pull_view.scss:
--------------------------------------------------------------------------------
 1 | .pull-view {
 2 |   position: absolute;
 3 |   left: 0;
 4 |   top: 0;
 5 |   right: 0;
 6 |   bottom: 0;
 7 |   z-index: 10;
 8 |   background-color: rgba(0, 0, 0, 0.2);
 9 |   overflow: hidden;
10 |   /*postcss-pxtransform rn eject enable*/
11 |   transition: background-color 0.2s;
12 |   /*postcss-pxtransform rn eject disable*/
13 |   &__main {
14 |     position: absolute;
15 |     opacity: 0;
16 |     /*postcss-pxtransform rn eject enable*/
17 |     transition: opacity 0.2s, transform 0.2s;
18 |     /*postcss-pxtransform rn eject disable*/
19 |     z-index: 10;
20 |     &--top {
21 |       left: 0;
22 |       right: 0;
23 |       top: 0;
24 |       transform: translate(0, -200px);
25 |     }
26 |     &--bottom {
27 |       left: 0;
28 |       right: 0;
29 |       bottom: 0;
30 |       transform: translate(0, 200px);
31 |     }
32 |     &--left {
33 |       top: 0;
34 |       bottom: 0;
35 |       left: 0;
36 |       transform: translate(-200px, 0);
37 |     }
38 |     &--right {
39 |       top: 0;
40 |       bottom: 0;
41 |       right: 0;
42 |       transform: translate(200px, 0);
43 |     }
44 |     &--show {
45 |       opacity: 1;
46 |       transform: translate(0, 0);
47 |     }
48 |   }
49 |   &__other {
50 |     flex: 1;
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/components/overlay/status.jsx:
--------------------------------------------------------------------------------
 1 | import { Component } from 'react'
 2 | 
 3 | export default class Status extends Component {
 4 | 
 5 |   render() {
 6 |     return null
 7 |   }
 8 | 
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/overlay/status.rn.jsx:
--------------------------------------------------------------------------------
 1 | import { StatusBar } from 'react-native'
 2 | 
 3 | export default ({ barStyle }) => {
 4 | 
 5 |   // barStyle ['light-content', 'dark-content', 'default']
 6 |   return <StatusBar
 7 |     animated
 8 |     hidden={false}
 9 |     backgroundColor='transparent'
10 |     translucent
11 |     barStyle={barStyle}
12 |   />
13 | }
14 | 


--------------------------------------------------------------------------------
/components/overlay/top_view.d.ts:
--------------------------------------------------------------------------------
 1 | import { LegacyRef, ComponentType, Component, CSSProperties, ReactElement } from 'react'
 2 | import { design } from '../../design/components/edit'
 3 | 
 4 | interface TopViewProps {
 5 |   /**
 6 |    * 是否显示安全区域
 7 |    * @default false
 8 |   */
 9 |   isSafe: boolean
10 |   /**
11 |    * 是否是表单页面
12 |    * @default false
13 |   */
14 |   isForm: boolean
15 |   /**
16 |    * 组件页面标识 不传默认读取当前页面的路由
17 |    */
18 |   pageUrl: string
19 |   /** 顶层样式 */
20 |   style: CSSProperties
21 |   /** 引用 */
22 |   ref?: LegacyRef<any>
23 | }
24 | 
25 | interface AddAsyncTask extends Promise<AddAsyncTask> {
26 | 
27 | }
28 | /**
29 |  * 根节点 可以用于控制页面全局弹窗 下巴机型底部空白 键盘弹出控制
30 |  * @noInheritDoc
31 |  */
32 | export class TopView extends Component<TopViewProps> {
33 |   /**
34 |    * 添加一个Node节点到页面
35 |    * @param node 节点
36 |    * @return 返回一个key，用于更新或者删除
37 |    */
38 |   static addDiy(node: design.Node): number
39 | 
40 |   /**
41 |    * 更新一个已经创建的节点
42 |    * @param key 标识
43 |    * @param node 节点
44 |    */
45 |   static updateDiy(key: number, node: design.Node): void
46 | 
47 |   /**
48 |    * 移除一个已经创建的节点
49 |    * @param key 标识
50 |    */
51 |   static removeDiy(key: number): void
52 | 
53 |   /**
54 |    * 添加一个组件到全局
55 |    * @param element 组件
56 |    * @param page 标识 默认当前页面
57 |    * @return 返回一个key，用于更新或者删除
58 |    */
59 |   static add(element: ReactElement, page?: string): number
60 | 
61 |   /**
62 |    * 异步的add方法
63 |    * @param element 组件
64 |    * @param page 标识 默认当前页面
65 |    */
66 |   static addAsync(element: ReactElement, page?: string): AddAsyncTask
67 | 
68 |   /**
69 |    * 更新一个已经创建的组件
70 |    * @param key 标识
71 |    * @param element 元素
72 |    * @param page 页面
73 |    */
74 |   static update(key: number, element: ReactElement, page?: string): void
75 | 
76 |   /**
77 |    * 移除一个已经创建的组件
78 |    * @param key 标识
79 |    * @param page 页面
80 |    */
81 |   static remove(key: number, page?: string): void
82 | 
83 |   /**
84 |    * 移除所有添加的组件
85 |    * @param page 页面
86 |    */
87 |   static removeAll(page?: string): void
88 | }
89 | 


--------------------------------------------------------------------------------
/design/attrForm/common/box.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | import React from 'react'
 4 | import { View, Text } from '@tarojs/components'
 5 | import './box.scss'
 6 | 
 7 | export default () => {
 8 | 
 9 |   return <View className='attr-form-box'>
10 |     <View className='grid position'>
11 |       <Text contenteditable className='value' onInput={e => console.log(e.target.innerText)}>-</Text>
12 |       <Text contenteditable className='value'>-</Text>
13 |       <View className='grid margin'>
14 |         <Text contenteditable className='value'>-</Text>
15 |         <Text contenteditable className='value'>-</Text>
16 |         <View className='grid border'>
17 |           <Text contenteditable className='value'>-</Text>
18 |           <Text contenteditable className='value'>-</Text>
19 |           <View className='grid padding'>
20 |             <Text contenteditable className='value'>-</Text>
21 |             <Text contenteditable className='value'>-</Text>
22 |             <View className='size'>
23 |               <Text contenteditable>-</Text>
24 |               <Text>x</Text>
25 |               <Text contenteditable>-</Text>
26 |             </View>
27 |             <Text contenteditable className='value'>-</Text>
28 |             <Text contenteditable className='value'>-</Text>
29 |             <Text className='tip'>内边距</Text>
30 |           </View>
31 |           <Text contenteditable className='value'>-</Text>
32 |           <Text contenteditable className='value'>-</Text>
33 |           <Text className='tip'>边框</Text>
34 |         </View>
35 |         <Text contenteditable className='value'>-</Text>
36 |         <Text contenteditable className='value'>-</Text>
37 |         <Text className='tip'>外边距</Text>
38 |       </View>
39 |       <Text contenteditable className='value'>-</Text>
40 |       <Text contenteditable className='value'>-</Text>
41 |       <Text className='tip'>定位</Text>
42 |     </View>
43 |   </View>
44 | }
45 | 


--------------------------------------------------------------------------------
/design/attrForm/common/box.scss:
--------------------------------------------------------------------------------
 1 | .attr-form-box {
 2 |   padding: 10px;
 3 |   align-self: center;
 4 |   .position {
 5 |     background-color: #fff;
 6 |     border: 1px dashed #ededed;
 7 |   }
 8 |   .margin {
 9 |     background-color: #ae8152;
10 |   }
11 |   .border {
12 |     background-color: #e3c381;
13 |   }
14 |   .padding {
15 |     background-color: #b7c47f;
16 |   }
17 |   .size {
18 |     background-color: #87b2bc;
19 |     flex-direction: row;
20 |     justify-content: space-around;
21 |     min-width: 120px;
22 |   }
23 |   .position,
24 |   .margin,
25 |   .border,
26 |   .padding,
27 |   .size {
28 |     grid-area: center;
29 |     padding: 4px;
30 |     margin: 4px;
31 |   }
32 |   .grid {
33 |     position: relative;
34 |     display: grid;
35 |     grid-template-columns: auto auto auto;
36 |     grid-template-rows: auto auto auto;
37 |     grid-template-areas:
38 |       ". top ."
39 |       "left center right"
40 |       ". bottom .";
41 |     .tip {
42 |       font-size: 18px;
43 |       position: absolute;
44 |       left: 5px;
45 |       top: 5px;
46 |     }
47 |     .value {
48 |       font-size: 24px;
49 |       color: #333;
50 |       place-self: center;
51 |       outline: none;
52 |       &:nth-child(1) {
53 |         grid-area: top;
54 |       }
55 |       &:nth-child(2) {
56 |         grid-area: left;
57 |       }
58 |       &:nth-child(4) {
59 |         grid-area: right;
60 |       }
61 |       &:nth-child(5) {
62 |         grid-area: bottom;
63 |       }
64 |     }
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/design/attrForm/common/group.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react'
 2 | import { View, Text } from '@tarojs/components'
 3 | import classNames from 'classnames'
 4 | import './group.scss'
 5 | 
 6 | export default ({ name, children }) => {
 7 | 
 8 |   const [unfold, setUnfold] = useState(true)
 9 | 
10 |   return <View className='attr-form-group'>
11 |     <View className='nav'>
12 |       <View className={classNames('more', { unfold })} onClick={() => setUnfold(!unfold)} />
13 |       <Text className='text'>{name}</Text>
14 |     </View>
15 |     {unfold && children}
16 |   </View>
17 | }
18 | 


--------------------------------------------------------------------------------
/design/attrForm/common/group.scss:
--------------------------------------------------------------------------------
 1 | .attr-form-group {
 2 |   border-bottom: 1px solid #ededed;
 3 |   & > .nav {
 4 |     flex-direction: row;
 5 |     padding: 10px;
 6 |     align-items: center;
 7 |     &:hover {
 8 |       background-color: #f2f2f2;
 9 |     }
10 |     .more {
11 |       width: 0;
12 |       height: 0;
13 |       border-top: 8px solid transparent;
14 |       border-left: 12px solid #666;
15 |       border-bottom: 8px solid transparent;
16 |       margin-right: 10px;
17 |       flex-shrink: 0;
18 |       transition: transform 0.2s;
19 |       &.unfold {
20 |         transform: rotate(90deg);
21 |       }
22 |     }
23 |     .text {
24 |       font-size: 28px;
25 |       color: #666;
26 |     }
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/design/attrForm/common/iconSelect.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useRef, useState, useMemo, useContext, useCallback } from 'react'
  2 | import Taro from '@tarojs/taro'
  3 | import { View, Text, ScrollView, Input } from '@tarojs/components'
  4 | import classNames from 'classnames'
  5 | import { recursionGetValue } from 'taro-tools'
  6 | import { Modal } from '../../../components/overlay'
  7 | import { icons as fonts } from '../../../render'
  8 | import { FormContext } from '../form'
  9 | import './iconSelect.scss'
 10 | 
 11 | const Icon = ({ font, name, size = 24 }) => {
 12 |   if (typeof name === 'object') {
 13 |     font = name[0]
 14 |     name = name[1]
 15 |   }
 16 |   return <Text
 17 |     style={{ fontSize: Taro.pxTransform(size) }}
 18 |     className={classNames(font, fonts[font]?.prefix + name)}
 19 |   />
 20 | }
 21 | 
 22 | const Select = ({ onSelect }) => {
 23 | 
 24 |   const fontKeys = useMemo(() => Object.keys(fonts), [])
 25 | 
 26 |   const [hover, setHover] = useState(fontKeys[0] || '')
 27 |   const [keyword, setKeyword] = useState('')
 28 |   const [show, setShow] = useState(false)
 29 | 
 30 |   !show && setTimeout(() => {
 31 |     !show && setShow(true)
 32 |   }, 200)
 33 | 
 34 |   const icons = useMemo(() => {
 35 |     return show && keyword
 36 |       ? Object.keys(fonts[hover]?.list || {}).filter(item => item.indexOf(keyword) >= 0)
 37 |       : show
 38 |         ? Object.keys(fonts[hover]?.list || {})
 39 |         : []
 40 |   }, [show, keyword, hover])
 41 | 
 42 |   return <View className='form-icon-select-pull'>
 43 |     {fontKeys.length > 1 && <ScrollView scrollX className='form-icon-select-pull__cate'>
 44 |       {fontKeys.map(key => <View
 45 |         className={`form-icon-select-pull__cate__item${hover === key ? ' form-icon-select-pull__cate__item--hover' : ''}`}
 46 |         key={key}
 47 |         onClick={() => setHover(key)}
 48 |       >
 49 |         <Text className='form-icon-select-pull__cate__item__text'>{key}</Text>
 50 |       </View>)}
 51 |     </ScrollView>}
 52 |     <View className='form-icon-select-pull__search'>
 53 |       <Input className='form-icon-select-pull__search__input' placeholder='搜索图标' value={keyword} onInput={e => setKeyword(e.target.value)} />
 54 |     </View>
 55 |     <ScrollView scrollY className='form-icon-select-pull__scroll'>
 56 |       {show && <View className='form-icon-select-pull__icons'>
 57 |         {
 58 |           icons.map(name => <View
 59 |             key={name}
 60 |             className='form-icon-select-pull__icons__item'
 61 |             onClick={() => onSelect([hover, name])}
 62 |           >
 63 |             <Icon font={hover} name={name} size={48} />
 64 |             <Text className='form-icon-select-pull__icons__item__name'>{name}</Text>
 65 |           </View>)
 66 |         }
 67 |         <View className='form-icon-select-pull__icons__item--empty' />
 68 |         <View className='form-icon-select-pull__icons__item--empty' />
 69 |         <View className='form-icon-select-pull__icons__item--empty' />
 70 |         <View className='form-icon-select-pull__icons__item--empty' />
 71 |         <View className='form-icon-select-pull__icons__item--empty' />
 72 |         <View className='form-icon-select-pull__icons__item--empty' />
 73 |         <View className='form-icon-select-pull__icons__item--empty' />
 74 |         <View className='form-icon-select-pull__icons__item--empty' />
 75 |       </View>}
 76 |     </ScrollView>
 77 |   </View>
 78 | }
 79 | 
 80 | export default ({ name }) => {
 81 | 
 82 |   const { updataValue, formValue } = useContext(FormContext)
 83 | 
 84 |   const value = useMemo(() => recursionGetValue(name, formValue) || '', [name, formValue])
 85 | 
 86 |   const callback = useRef([])
 87 | 
 88 |   const submit = useCallback(val => {
 89 |     setSelectShow(false)
 90 |     callback.current[0](val)
 91 |   }, [])
 92 | 
 93 |   const [selectShow, setSelectShow] = useState(false)
 94 | 
 95 |   const close = useCallback(() => {
 96 |     setSelectShow(false)
 97 |     callback.current[1]()
 98 |   }, [])
 99 | 
100 |   // 选择图标
101 |   const select = useCallback(() => {
102 |     setSelectShow(true)
103 |     return new Promise((resolve, reject) => {
104 |       callback.current = [resolve, reject]
105 |     })
106 |   }, [])
107 | 
108 |   // 点击选择图标
109 |   const click = useCallback(() => {
110 |     select().then(res => {
111 |       updataValue(name, res)
112 |     }).catch(() => { })
113 |   }, [name, updataValue, select])
114 | 
115 |   return <View className='form-icon-select' onClick={click} >
116 |     <View className='form-icon-select__icon'>
117 |       <Icon name={value} size={24} />
118 |     </View>
119 |     <Modal show={selectShow} onClose={close}>
120 |       <Select onSelect={submit} />
121 |     </Modal>
122 |   </View>
123 | 
124 | }
125 | 


--------------------------------------------------------------------------------
/design/attrForm/common/iconSelect.scss:
--------------------------------------------------------------------------------
 1 | .form-icon-select {
 2 |   flex-direction: row;
 3 |   align-items: center;
 4 |   &__icon {
 5 |     width: 40px;
 6 |     height: 40px;
 7 |     align-items: center;
 8 |     justify-content: center;
 9 |     border: 1px solid #ededed;
10 |     flex-shrink: 0;
11 |   }
12 | }
13 | .form-icon-select-pull {
14 |   background-color: #fff;
15 |   width: 700px;
16 |   &__cate {
17 |     /*postcss-pxtransform rn eject enable*/
18 |     white-space: nowrap;
19 |     /*postcss-pxtransform rn eject disable*/
20 |     &__item {
21 |       /*postcss-pxtransform rn eject enable*/
22 |       display: inline-block;
23 |       /*postcss-pxtransform rn eject disable*/
24 |       border-bottom-width: 3px;
25 |       border-bottom-color: transparent;
26 |       /*postcss-pxtransform rn eject enable*/
27 |       border-bottom-style: solid;
28 |       /*postcss-pxtransform rn eject disable*/
29 |       padding: 10px 20px;
30 |       &--hover {
31 |         border-bottom-width: 3px;
32 |         border-bottom-color: #666;
33 |         /*postcss-pxtransform rn eject enable*/
34 |         border-bottom-style: solid;
35 |         /*postcss-pxtransform rn eject disable*/
36 |       }
37 |       &__text {
38 |         font-size: 24px;
39 |       }
40 |     }
41 |   }
42 |   &__search {
43 |     margin: 10px;
44 |     border: 1px solid #ededed;
45 |     border-radius: 40px;
46 |     padding: 4px 20px;
47 |     &__input {
48 |       font-size: 24px;
49 |       color: #666;
50 |     }
51 |   }
52 |   &__scroll {
53 |     height: 800px;
54 |   }
55 |   &__icons {
56 |     flex-direction: row;
57 |     flex-wrap: wrap;
58 |     justify-content: space-around;
59 |     padding: 10px 0;
60 |     &__item {
61 |       width: 150px;
62 |       border: 1px solid #ededed;
63 |       margin: 10px;
64 |       align-items: center;
65 |       overflow: hidden;
66 |       padding: 10px;
67 |       &--empty {
68 |         width: 150px;
69 |         margin: 0 10px;
70 |       }
71 |       &__name {
72 |         font-size: 24px;
73 |         color: #333;
74 |         margin: 6px 2px;
75 |         width: 100%;
76 |         /*postcss-pxtransform rn eject enable*/
77 |         word-wrap: break-word;
78 |         word-break: break-all;
79 |         /*postcss-pxtransform rn eject disable*/
80 |         text-align: center;
81 |       }
82 |     }
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/design/attrForm/common/input.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useContext, useMemo } from 'react'
 2 | import classNames from 'classnames'
 3 | import { recursionGetValue } from 'taro-tools'
 4 | import { FormContext } from '../form'
 5 | import './input.scss'
 6 | 
 7 | export default ({ name, text, type = 'text', option }) => {
 8 | 
 9 |   const { updataValue, formValue } = useContext(FormContext)
10 | 
11 |   const value = useMemo(() => recursionGetValue(name, formValue) || '', [name, formValue])
12 | 
13 |   const onUpdataValue = useCallback(e => {
14 |     // color事件合成失败
15 |     e.persist()
16 |     updataValue?.(name, e.target.value)
17 |   }, [updataValue, name])
18 | 
19 |   return <div className='attr-form-input--root item-child'>
20 |     {type !== 'select' && <div className='input-width'>
21 |       {type === 'text' && <input value={value} className='attr-form-input' placeholder={text} onChange={onUpdataValue} />}
22 |       {type === 'color' && <input value={value} type='color' className='attr-form-input' onChange={onUpdataValue} />}
23 |       {type === 'textarea' && <textarea value={value} className='attr-form-input' onChange={onUpdataValue} />}
24 |     </div>}
25 | 
26 |     {option && <select
27 |       value={value}
28 |       className={classNames('attr-form-select', { 'disable-input': type === 'select' })}
29 |       onChange={onUpdataValue}
30 |     >
31 |       {
32 |         Array.isArray(option)
33 |           ? option.map(item => {
34 |             const key = typeof item.value === 'undefined' ? item : item.value
35 |             return <option key={key} value={key}>{item.text || item}</option>
36 |           })
37 |           : Object.keys(option).map(key => <option key={key} value={key}>{option[key]}</option>)
38 |       }
39 |     </select>}
40 |   </div>
41 | }
42 | 


--------------------------------------------------------------------------------
/design/attrForm/common/input.scss:
--------------------------------------------------------------------------------
 1 | .input-width{
 2 |   flex: 1;
 3 |   display: flex;
 4 | }
 5 | .attr-form-input {
 6 |   font-size: 24px;
 7 |   width: 100%;
 8 |   height: auto;
 9 |   min-height: 32px;
10 |   border: none;
11 |   outline: none;
12 |   background-color: transparent;
13 |   &--root {
14 |     flex: 1;
15 |     display: flex;
16 |     flex-wrap: nowrap;
17 |     position: relative;
18 |     flex-direction: row;
19 |     align-items: center;
20 |   }
21 | }
22 | .attr-form-select {
23 |   width: 30px;
24 |   border: none;
25 |   outline: none;
26 |   font-size: 24px;
27 |   background-color: transparent;
28 |   flex-shrink: 0;
29 |   &.disable-input {
30 |     flex: 1;
31 |     width: auto;
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/design/attrForm/common/item.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useCallback } from 'react'
 2 | import { View, Text } from '@tarojs/components'
 3 | import classNames from 'classnames'
 4 | import './item.scss'
 5 | 
 6 | export default ({ name, children, renderMore }) => {
 7 | 
 8 |   const [unfold, setUnfold] = useState(false)
 9 | 
10 |   const itemClick = useCallback(e => {
11 |     if (e.path.slice(0, e.path.findIndex(item => item.classList.contains('attr-form-item'))).every(item => !item.classList.contains('item-child'))) {
12 |       renderMore && setUnfold(!unfold)
13 |     }
14 |   }, [unfold, renderMore])
15 | 
16 |   return <>
17 |     <View className='attr-form-item' onClick={itemClick}>
18 |       <View className='left'>
19 |         <View className={classNames('more', { hide: !renderMore, unfold })} />
20 |         <Text className={classNames('name', { child: children })}>{name}</Text>
21 |       </View>
22 |       {children}
23 |     </View>
24 |     {unfold && <View className='attr-form-item-more'>
25 |       {renderMore}
26 |     </View>}
27 |   </>
28 | }
29 | 


--------------------------------------------------------------------------------
/design/attrForm/common/item.scss:
--------------------------------------------------------------------------------
 1 | .attr-form-item {
 2 |   flex-direction: row;
 3 |   align-items: center;
 4 |   padding: 10px;
 5 |   &:hover {
 6 |     background-color: #f2f2f2;
 7 |   }
 8 |   & > .left {
 9 |     flex-direction: row;
10 |     align-items: center;
11 |     width: 50%;
12 |     flex-shrink: 0;
13 |     .more {
14 |       width: 0;
15 |       height: 0;
16 |       border-top: 8px solid transparent;
17 |       border-left: 12px solid #666;
18 |       border-bottom: 8px solid transparent;
19 |       margin-right: 10px;
20 |       flex-shrink: 0;
21 |       transition: transform 0.2s;
22 |       &.hide {
23 |         opacity: 0;
24 |       }
25 |       &.unfold {
26 |         transform: rotate(90deg);
27 |       }
28 |     }
29 |     .name {
30 |       font-size: 24px;
31 |       color: #666;
32 |       &.child {
33 |         color: #53bafe;
34 |       }
35 |     }
36 |   }
37 | }
38 | .attr-form-item-more {
39 |   padding-left: 20px;
40 | }
41 | 


--------------------------------------------------------------------------------
/design/attrForm/common/switch.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useContext, useMemo } from 'react'
 2 | import { Switch } from '@tarojs/components'
 3 | import { recursionGetValue } from 'taro-tools'
 4 | import { FormContext } from '../form'
 5 | import './switch.scss'
 6 | 
 7 | export default ({ name }) => {
 8 | 
 9 |   const { updataValue, formValue } = useContext(FormContext)
10 | 
11 |   const value = useMemo(() => recursionGetValue(name, formValue) || '', [name, formValue])
12 | 
13 |   const onUpdataValue = useCallback(e => {
14 |     updataValue?.(name, e.target.value)
15 |   }, [updataValue, name])
16 | 
17 | 
18 |   return <Switch checked={!!value && value !== '0'} onChange={onUpdataValue} />
19 | }
20 | 


--------------------------------------------------------------------------------
/design/attrForm/common/switch.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/design/attrForm/common/switch.scss


--------------------------------------------------------------------------------
/design/attrForm/common/tab.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useCallback, useMemo } from 'react'
 2 | import { View, Text } from '@tarojs/components'
 3 | import classNames from 'classnames'
 4 | import './tab.scss'
 5 | 
 6 | const TabMenu = ({ attr, hover, change, child }) => <View className={`form-tab__nav${['top', 'bottom'].includes(attr.position) ? ' form-tab__nav--row' : ''}`}>
 7 |   {child.map((item, index) => <View
 8 |     className={`form-tab__nav__item${hover === index ? ' form-tab__nav__item--hover' : ''}`}
 9 |     key={item.key}
10 |     onClick={e => {
11 |       e.stopPropagation && e.stopPropagation()
12 |       change(index)
13 |     }}
14 |   >
15 |     <Text className='form-tab__nav__item__txt'>{item.tabName || 'tab'}</Text>
16 |   </View>)}
17 | </View>
18 | 
19 | const Tab = ({ children, onEvent, _childNodes, ...attr }) => {
20 | 
21 |   const [hover, setHover] = useState(0)
22 | 
23 |   const change = useCallback((i) => {
24 |     setHover(i)
25 |   }, [])
26 | 
27 |   const tabStart = useMemo(() => ['left', 'top'].includes(attr.position), [attr])
28 | 
29 |   const row = useMemo(() => ['left', 'right'].includes(attr.position), [attr])
30 | 
31 |   const nodes = useMemo(() => {
32 |     _childNodes.map(item => {
33 |       item.hidden = true
34 |       return item
35 |     })
36 |     if (_childNodes[hover]) {
37 |       _childNodes[hover].hidden = false
38 |     }
39 |     return _childNodes
40 |   }, [_childNodes, hover])
41 | 
42 |   return <View className={classNames(attr.className, 'form-tab', { 'form-tab--row': row })} style={attr.style}>
43 |     {tabStart && <TabMenu attr={attr} child={_childNodes} hover={hover} change={change} />}
44 |     <View className='form-tab__child'>
45 |       {children({ nodes })}
46 |     </View>
47 |     {!tabStart && <TabMenu attr={attr} child={_childNodes} hover={hover} change={change} />}
48 |   </View>
49 | 
50 | }
51 | Tab.designConfig = {
52 |   childFunc: true
53 | }
54 | 
55 | const TabItem = ({ children }) => children
56 | 
57 | export {
58 |   Tab,
59 |   TabItem
60 | }
61 | 


--------------------------------------------------------------------------------
/design/attrForm/common/tab.scss:
--------------------------------------------------------------------------------
 1 | .form-tab {
 2 |   &--row {
 3 |     flex-direction: row;
 4 |   }
 5 |   &__nav {
 6 |     flex-shrink: 0;
 7 |     align-items: center;
 8 |     &--row {
 9 |       flex-direction: row;
10 |     }
11 |     &__item {
12 |       padding: 10px;
13 |       border-bottom-width: 4px;
14 |       border-bottom-color: transparent;
15 |       /*postcss-pxtransform rn eject enable*/
16 |       border-bottom-style: solid;
17 |       /*postcss-pxtransform rn eject disable*/
18 |       &--hover {
19 |         border-bottom-width: 4px;
20 |         border-bottom-color: #666;
21 |         /*postcss-pxtransform rn eject enable*/
22 |         border-bottom-style: solid;
23 |         /*postcss-pxtransform rn eject disable*/
24 |       }
25 |       &__txt {
26 |         font-size: 24px;
27 |         color: #333;
28 |       }
29 |     }
30 |   }
31 |   &__child {
32 |     flex: 1;
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/design/attrForm/form.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useMemo, useState, useEffect } from 'react'
 2 | import { recursionSetValue } from 'taro-tools'
 3 | import './style.scss'
 4 | 
 5 | export const FormContext = React.createContext({})
 6 | 
 7 | const noop = () => { }
 8 | 
 9 | export default ({ onChange = noop, defauleValue, children }) => {
10 | 
11 |   const [formValue, setFormValue] = useState({
12 |     style: {}
13 |   })
14 | 
15 |   const updataValue = useCallback((name, value) => {
16 |     recursionSetValue(name, formValue, value)
17 |     setFormValue({ ...formValue })
18 |     onChange({ ...formValue })
19 |   }, [formValue, onChange])
20 | 
21 |   useEffect(() => {
22 |     setFormValue(defauleValue)
23 |   }, [defauleValue])
24 | 
25 |   const context = useMemo(() => ({
26 |     updataValue,
27 |     formValue
28 |   }), [updataValue, formValue])
29 | 
30 |   return <FormContext.Provider value={context}>
31 |     {children}
32 |   </FormContext.Provider>
33 | }
34 | 


--------------------------------------------------------------------------------
/design/attrForm/form.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/design/attrForm/form.scss


--------------------------------------------------------------------------------
/design/attrForm/index.js:
--------------------------------------------------------------------------------
 1 | import { defineComponents } from '../../render'
 2 | 
 3 | import Style from './style'
 4 | import Item from './common/item'
 5 | import Group from './common/group'
 6 | import { Tab } from './common/tab'
 7 | import Input from './common/input'
 8 | import Switch from './common/switch'
 9 | import IconSelect from './common/iconSelect'
10 | 
11 | const comps = {
12 |   'edit-style': Style,
13 |   'edit-input': Input,
14 |   'edit-item': Item,
15 |   'edit-group': Group,
16 |   'edit-switch': Switch,
17 |   'edit-tab': Tab,
18 |   'edit-icon': IconSelect
19 | }
20 | 
21 | defineComponents(comps)
22 | 


--------------------------------------------------------------------------------
/design/attrForm/style.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { View } from '@tarojs/components'
 3 | import Group from './common/group'
 4 | import Input from './common/input'
 5 | import Item from './common/item'
 6 | import { styleGroup } from '../util/styled'
 7 | import { styled, styleConfig, styleType } from '../../render'
 8 | import './style.scss'
 9 | 
10 | const StyleItem = ({ name, renderMore }) => {
11 | 
12 |   const item = styleConfig[name[1]]
13 |   if (!item) {
14 |     console.log('不支持编辑的样式:' + name[1])
15 |     return null
16 |   }
17 |   const commonProsp = {
18 |     text: item.text,
19 |     name
20 |   }
21 |   if (item.type === styleType.enum) {
22 |     return <Item name={item.text} renderMore={renderMore}>
23 |       <Input {...commonProsp} type='select' option={item.values} disableInput />
24 |     </Item>
25 |   } else if (item.type === styleType.color) {
26 |     return <Item name={item.text} renderMore={renderMore}>
27 |       <Input {...commonProsp} type='color' option={item.values} />
28 |     </Item>
29 |   } else {
30 |     let option = null
31 |     if (item.valueClassData && item.valueClassData instanceof Array) {
32 |       option = item.valueClassData
33 |     } else if (item.valueClassData && item.valueClassData instanceof Object) {
34 |       option = Object.keys(item.valueClassData)
35 |     }
36 |     return <Item name={item.text} renderMore={renderMore}>
37 |       <Input {...commonProsp} option={option} />
38 |     </Item>
39 |   }
40 | }
41 | 
42 | 
43 | export default ({ styles = [], name = 'style' }) => {
44 | 
45 |   return <View className='attr-form-style'>
46 |     {/* <View className='group'>
47 |       <Box />
48 |     </View> */}
49 |     {
50 |       styleGroup.map(group => {
51 |         const list = group.styles.filter(v => {
52 |           if (typeof v === 'string') {
53 |             return styles.includes(v)
54 |           } else if (styled.isStyleName(v[0])) {
55 |             return styles.includes(v[0])
56 |           } else {
57 |             return v.slice(1).some(i => styles.includes(i))
58 |           }
59 |         }).map(v => {
60 |           if (typeof v === 'object' && !styled.isStyleName(v[0])) {
61 |             return v.filter((i, index) => index === 0 || styles.includes(i))
62 |           }
63 |           return v
64 |         })
65 | 
66 |         if (!list.length) {
67 |           return null
68 |         }
69 | 
70 |         return <Group key={group.name} name={group.name}>
71 |           {
72 |             list.map(item => {
73 |               if (typeof item === 'string') {
74 |                 return <StyleItem key={item} name={[name, item]} />
75 |               } else {
76 |                 if (styled.isStyleName(item[0])) {
77 |                   return <StyleItem
78 |                     key={item[0]}
79 |                     name={[name, item[0]]}
80 |                     renderMore={item.slice(1).map(more => <StyleItem key={more} name={[name, more]} />)}
81 |                   />
82 |                 } else {
83 |                   return <Item
84 |                     key={item[0]}
85 |                     name={item[0]}
86 |                     renderMore={item.slice(1).map(more => <StyleItem key={more} name={[name, more]} />)}
87 |                   />
88 |                 }
89 |               }
90 |             })
91 |           }
92 |         </Group>
93 |       })
94 |     }
95 |   </View>
96 | }
97 | 


--------------------------------------------------------------------------------
/design/attrForm/style.scss:
--------------------------------------------------------------------------------
1 | .attr-form-style {
2 |   .group {
3 |     border-bottom: 1px solid #ededed;
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/design/components/AttrForm.jsx:
--------------------------------------------------------------------------------
 1 | import { useContext, useMemo, useCallback, useEffect, useState, useRef } from 'react'
 2 | import { currentPage, deepCopy } from 'taro-tools'
 3 | import { ScrollView, TopView } from '../../components'
 4 | import Context from '../util/context'
 5 | import { PageUrlContext, Create } from '../../render'
 6 | import Form from '../attrForm/form'
 7 | import './attrForm.scss'
 8 | import comp from '../util/comp'
 9 | 
10 | export default () => {
11 | 
12 |   const { hover, setNodeData } = useContext(Context)
13 | 
14 |   // 属性编辑表单
15 |   const [form, setForm] = useState([])
16 |   const [formValue, setFormValue] = useState({})
17 | 
18 |   const change = useCallback(value => {
19 |     setNodeData(hover?.key, value)
20 |   }, [hover, setNodeData])
21 | 
22 |   const updateValue = useCallback(({ values }) => {
23 |     setNodeData(hover?.key, values)
24 |   }, [hover, setNodeData])
25 | 
26 |   /**
27 |    * 获取编辑表单
28 |    */
29 |   const getEditForm = useCallback((valueOnly) => {
30 |     if (hover) {
31 |       const data = comp.getEditForm(hover.nodeName)
32 | 
33 |       const value = deepCopy(hover)
34 |       delete value.child
35 |       delete value.parentNode
36 |       delete value.forceUpdate
37 |       delete value.key
38 |       delete value.nodeName
39 |       // 绑定节点事件和表单值
40 |       const [formNode] = data.form
41 |       formNode.onUpdateValue = updateValue
42 |       formNode.defaultValues = value
43 | 
44 |       !valueOnly && setForm(data.form)
45 |       setFormValue(value)
46 |     } else {
47 |       setForm([])
48 |       setFormValue({})
49 |     }
50 |   }, [hover, updateValue])
51 | 
52 | 
53 | 
54 |   /**
55 |    * 记录历史数据，防止重复获取表单
56 |    */
57 |   const getFormOldData = useRef({
58 |     hover: '-1'
59 |   })
60 | 
61 |   /**
62 |    * 监听什么时候重新生成表单
63 |    */
64 |   useEffect(() => {
65 |     const hoverString = hover?.key
66 |     if (getFormOldData.current.hover !== hoverString) {
67 |       getEditForm()
68 |       getFormOldData.current.hover = hoverString
69 |     } else {
70 |       // 重新获取value
71 |       getEditForm(true)
72 |     }
73 |   }, [hover, getEditForm])
74 | 
75 |   // 组件页面
76 |   const page = useMemo(() => currentPage() + '/attr-form', [])
77 | 
78 |   return <TopView pageUrl={page}>
79 |     <ScrollView>
80 |       <PageUrlContext.Provider value={page}>
81 |         <Form defauleValue={formValue} onChange={change}>
82 |           <Create nodes={form} />
83 |         </Form>
84 |       </PageUrlContext.Provider>
85 |     </ScrollView>
86 |   </TopView>
87 | }
88 | 


--------------------------------------------------------------------------------
/design/components/attr.jsx:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import { View, Text } from '@tarojs/components'
 3 | import classNames from 'classnames'
 4 | import { Icon } from '../../components'
 5 | import Node from './node'
 6 | import AttrForm from './AttrForm'
 7 | import './attr.scss'
 8 | 
 9 | const AttrItem = ({ name, status, children }) => {
10 | 
11 |   const [show, setShow] = useState(false)
12 | 
13 |   useEffect(() => {
14 |     setShow(status)
15 |   }, [status])
16 | 
17 |   return <View className={classNames('attr-item', { show })}>
18 |     <View className='head' onClick={() => setShow(!show)}>
19 |       <View className={classNames('icon', { show })}>
20 |         <Icon name='you2' size={28} color='#333' />
21 |       </View>
22 |       <Text className='name'>{name}</Text>
23 |     </View>
24 |     {show && children}
25 |   </View>
26 | }
27 | 
28 | export default ({
29 |   formRef
30 | }) => {
31 |   return <View className='attr-edit'>
32 |     <AttrItem name='节点管理' status>
33 |       <Node />
34 |     </AttrItem>
35 |     <AttrItem name='节点属性' status>
36 |       <AttrForm formRef={formRef} />
37 |     </AttrItem>
38 |   </View>
39 | }
40 | 


--------------------------------------------------------------------------------
/design/components/attr.scss:
--------------------------------------------------------------------------------
 1 | .attr-edit {
 2 |   width: 500px;
 3 |   height: 100%;
 4 |   background-color: #fff;
 5 |   box-shadow: -5px 0 5px #f2f2f2;
 6 |   & > .attr-item {
 7 |     border: 1px solid #f2f2f2;
 8 |     &.show {
 9 |       flex: 1;
10 |       .head {
11 |         box-shadow: -5px 5px 7px 0 #f2f2f2;
12 |       }
13 |     }
14 |     .head {
15 |       flex-direction: row;
16 |       padding: 10px;
17 |       z-index: 1;
18 |       .icon {
19 |         transition: transform 0.2s;
20 |         &.show {
21 |           transform: rotate(90deg);
22 |         }
23 |       }
24 |       .name {
25 |         font-size: 24px;
26 |         color: #333;
27 |         margin-left: 10px;
28 |       }
29 |     }
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/design/components/attrForm.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/design/components/attrForm.scss


--------------------------------------------------------------------------------
/design/components/create.scss:
--------------------------------------------------------------------------------
 1 | .create-dnd {
 2 |   flex: 1;
 3 |   &__edit {
 4 |     align-items: center;
 5 |     padding: 20px;
 6 |     background-color: #ededed;
 7 |     /*postcss-pxtransform rn eject enable*/
 8 |     transition: background-color 0.3s;
 9 |     /*postcss-pxtransform rn eject disable*/
10 |     min-width: 300px;
11 |     flex-shrink: 0;
12 |     &--drop {
13 |       background-color: #c2c2c2;
14 |     }
15 |     &__title {
16 |       color: #333;
17 |       font-size: 28px;
18 |     }
19 |     &__desc {
20 |       font-size: 24px;
21 |       color: #666;
22 |       margin-top: 20px;
23 |     }
24 |   }
25 |   &--row {
26 |     flex-direction: row;
27 |     width: 100%;
28 |   }
29 |   &--wrap {
30 |     flex-wrap: wrap;
31 |   }
32 | }
33 | 
34 | @keyframes insertAnimation {
35 |   0% {
36 |     background-color: #999;
37 |     opacity: 1;
38 |   }
39 |   50% {
40 |     opacity: 0.2;
41 |     background-color: #f2f2f2;
42 |   }
43 |   100% {
44 |     background-color: #999;
45 |     opacity: 1;
46 |   }
47 | }
48 | 
49 | .form-drag-drop {
50 |   position: initial;
51 |   &--hover {
52 |     opacity: 0.1;
53 |   }
54 |   &--row {
55 |     flex-direction: row;
56 |   }
57 |   &.insert {
58 |     opacity: 0.6;
59 |     animation-name: insertAnimation;
60 |     animation-duration: 0.8s;
61 |     animation-iteration-count: infinite;
62 |   }
63 |   &__add {
64 |     width: 100%;
65 |     height: 1px;
66 |     background-color: #666;
67 |     flex-shrink: 0;
68 |     &.row {
69 |       width: 1px;
70 |       height: 100%;
71 |     }
72 |   }
73 |   .eidt-item {
74 |     font-size: 24px;
75 |     color: #666;
76 |     position: absolute;
77 |     top: 2px;
78 |     right: 2px;
79 |     padding: 5px;
80 |     background-color: rgba(0, 0, 0, 0.3);
81 |     border-radius: 3px;
82 |     color: #fff;
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/design/components/del.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react'
 2 | import { View, Text } from '@tarojs/components'
 3 | import { useDrop } from 'react-dnd'
 4 | import EditTypes from '../util/editTypes'
 5 | import { Icon } from '../../components'
 6 | import Context from '../util/context'
 7 | 
 8 | import './del.scss'
 9 | 
10 | export default () => {
11 | 
12 |   const { moveNode } = useContext(Context)
13 | 
14 |   /**
15 |    * 放开到删除
16 |    */
17 |   const [{ deleteShow, deleteOver }, dropDelete] = useDrop({
18 |     accept: [EditTypes.FORM_MOVE, EditTypes.FORM_MOVE_NODE],
19 |     drop(item) {
20 |       moveNode(item.position)
21 |     },
22 |     collect: monitor => ({
23 |       deleteShow: monitor.canDrop(),
24 |       deleteOver: monitor.isOver()
25 |     })
26 |   })
27 | 
28 | 
29 |   return <View className={`delete${deleteShow ? ' delete-show' : ''}${deleteOver ? ' delete-over' : ''}`} ref={dropDelete}>
30 |     <View className='info'>
31 |       <Icon name='shanchu3' size={52} color={deleteOver ? '#ededed' : '#202020'} style={{ transition: 'color 0.1s' }} />
32 |       <Text className='text'>{deleteOver ? '放开删除' : '拖到这里删除'}</Text>
33 |     </View>
34 |   </View>
35 | }
36 | 


--------------------------------------------------------------------------------
/design/components/del.scss:
--------------------------------------------------------------------------------
 1 | .taro-design > .delete {
 2 |   position: absolute;
 3 |   right: -200px;
 4 |   bottom: -200px;
 5 |   z-index: 1;
 6 |   width: 400px;
 7 |   height: 400px;
 8 |   border-radius: 200px;
 9 |   background-color: #fff;
10 |   transform: translate(200px, 200px);
11 |   /*postcss-pxtransform rn eject enable*/
12 |   transition: transform 0.3s, background-color 0.1s;
13 |   /*postcss-pxtransform rn eject disable*/
14 |   box-shadow: 0 0 10px #ededed;
15 |   &.delete-show {
16 |     transform: translate(0, 0);
17 |   }
18 |   .info {
19 |     width: 230px;
20 |     align-items: center;
21 |     margin-top: 80px;
22 |     .text {
23 |       /*postcss-pxtransform rn eject enable*/
24 |       transition: color 0.1s;
25 |       /*postcss-pxtransform rn eject disable*/
26 |       font-size: 20px;
27 |       color: #999;
28 |       margin-top: 20px;
29 |     }
30 |   }
31 |   &.delete-over {
32 |     background-color: #ff4242;
33 |     transform: translate(0, 0) scale(1.05, 1.05);
34 |     .icon {
35 |       color: #ededed;
36 |     }
37 |     .text {
38 |       color: #ededed;
39 |     }
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/design/components/edit.d.ts:
--------------------------------------------------------------------------------
 1 | import { CSSProperties, LegacyRef, ComponentType, ReactElement } from 'react'
 2 | 
 3 | export namespace design {
 4 |   interface Node {
 5 |     /** 节点唯一标识 */
 6 |     nodeName: string
 7 |     /** 节点唯一key 类似于id的功能 */
 8 |     key: string
 9 |     /** 子节点 */
10 |     child: design.Node[]
11 |     /** 其他组件用到的属性 */
12 |     [propName: string]: any
13 |   }
14 | }
15 | 
16 | interface SaveTast extends Promise<SaveTast> {
17 | 
18 | }
19 | 
20 | interface DesignProps {
21 |   /** 尺寸 等同于fontSize */
22 |   size?: number
23 |   /** 页面标题 */
24 |   title: string
25 |   /** 用于自定义渲染标题，请传入jsx，当你定义这个参数时title将失效 */
26 |   renderTitle: ReactElement
27 |   /** 默认渲染节点 */
28 |   defaultNodes: design.Node[]
29 |   /** 是否开启导出功能 */
30 |   exportOpen: boolean
31 |   /** 是否开启模板功能 */
32 |   templateOpen: boolean
33 |   /** 按钮样式 */
34 |   style?: CSSProperties
35 |   /** 发生编辑时触发的事件 你可以返回一个Promise对象 将会显示一个正在保存的loading */
36 |   onChange: (event: design.Node[]) => SaveTast | void
37 |   /** 点击保存按钮时触发的事件，当你配置了这个选项才会出现保存按钮 你可以返回一个Promise对象 将会显示一个正在保存的loading */
38 |   onSave: (event: design.Node[]) => SaveTast | void
39 |   /** 引用 */
40 |   ref?: LegacyRef<any>
41 | }
42 | 
43 | /**
44 |  * 图标
45 |  * @example
46 |  * ```jsx
47 |  * <Design
48 |  *
49 |  * />
50 |  * ```
51 |  */
52 | export const Design: ComponentType<DesignProps>
53 | 


--------------------------------------------------------------------------------
/design/components/edit.scss:
--------------------------------------------------------------------------------
  1 | .taro-design {
  2 |   display: flex;
  3 |   background-color: #f5f5f5;
  4 |   position: relative;
  5 |   height: 100%;
  6 |   overflow: hidden;
  7 |   & > .action {
  8 |     height: 80px;
  9 |     flex-direction: row;
 10 |     align-items: center;
 11 |     border-bottom: 1px solid #ededed;
 12 |     background-color: #fff;
 13 |     & > .head {
 14 |       width: 500px;
 15 |       position: relative;
 16 |       &::before {
 17 |         content: "";
 18 |         position: absolute;
 19 |         top: 50%;
 20 |         right: 0;
 21 |         transform: translateY(-50%);
 22 |         width: 4px;
 23 |         height: 60px;
 24 |         background-color: #ededed;
 25 |       }
 26 |       .title {
 27 |         font-size: 36px;
 28 |         padding-left: 30px;
 29 |         color: #444;
 30 |       }
 31 |     }
 32 |     .flex-grow {
 33 |       flex: 1;
 34 |       flex-direction: row;
 35 |       padding: 0 20px;
 36 |       justify-content: center;
 37 |     }
 38 |     .history {
 39 |       font-size: 42px;
 40 |       color: #333;
 41 |       padding: 5px 10px;
 42 |       cursor: pointer;
 43 |       &.disabled {
 44 |         cursor: unset;
 45 |         color: #999;
 46 |       }
 47 |     }
 48 |     & > .btns {
 49 |       flex-direction: row;
 50 |       align-items: center;
 51 |       width: 500px;
 52 |       position: relative;
 53 |       justify-content: center;
 54 |       &::before {
 55 |         content: "";
 56 |         position: absolute;
 57 |         top: 50%;
 58 |         left: 0;
 59 |         transform: translateY(-50%);
 60 |         width: 4px;
 61 |         height: 60px;
 62 |         background-color: #ededed;
 63 |       }
 64 |     }
 65 |     .btn {
 66 |       border: 1px solid #999;
 67 |       padding: 0 20px;
 68 |       border-radius: 6px;
 69 |       margin-left: 40px;
 70 |       font-size: 26px;
 71 |       height: 40px;
 72 |       line-height: 40px;
 73 |       cursor: pointer;
 74 |       color: #333;
 75 |       &:nth-child(1) {
 76 |         margin-left: 0;
 77 |       }
 78 |       &.disabled {
 79 |         color: #999;
 80 |         border-color: #ccc;
 81 |       }
 82 |     }
 83 |     .save {
 84 |       background-color: #333;
 85 |       color: #fff;
 86 |       width: 60px;
 87 |       text-align: center;
 88 |       display: flex;
 89 |       align-items: center;
 90 |       justify-content: center;
 91 |     }
 92 |   }
 93 |   .design-main {
 94 |     flex: 1;
 95 |     flex-direction: row;
 96 |     justify-content: space-between;
 97 |     align-items: center;
 98 | 
 99 |     .phone {
100 |       height: 96%;
101 |       width: 750px;
102 |       background-color: #fff;
103 |       margin-bottom: 10px;
104 |       border-radius: 5px;
105 |       & > .scroll {
106 |         height: 100%;
107 |         position: relative;
108 |       }
109 |     }
110 |   }
111 | }
112 | 
113 | // 全局弹出菜单样式
114 | .global-menus {
115 |   position: absolute;
116 |   display: flex;
117 |   flex-direction: column;
118 |   background-color: #fff;
119 |   z-index: 99;
120 |   left: 0;
121 |   top: 0;
122 |   box-shadow: 0 0 4px 2px #f2f2f2;
123 |   .item {
124 |     font-size: 24px;
125 |     padding: 10px 20px;
126 |     &:hover {
127 |       background-color: #f2f2f2;
128 |     }
129 |   }
130 | }
131 | 


--------------------------------------------------------------------------------
/design/components/export.scss:
--------------------------------------------------------------------------------
 1 | .json {
 2 |   background-color: #fff;
 3 |   align-items: center;
 4 |   border-radius: 10px;
 5 |   overflow: hidden;
 6 |   & > .head {
 7 |     height: 60px;
 8 |     width: 1000px;
 9 |     border-bottom: 1px solid #ededed;
10 |     flex-direction: row;
11 |     align-items: center;
12 |     justify-content: space-between;
13 |     padding-right: 10px;
14 |     & > .type {
15 |       flex-direction: row;
16 |       align-self: stretch;
17 |       .item {
18 |         padding: 0 20px;
19 |         font-size: 28px;
20 |         color: #333;
21 |         display: flex;
22 |         align-items: center;
23 |         justify-content: center;
24 |         border-bottom: 3px solid #fff;
25 |         &.select {
26 |           border-bottom: 3px solid #333;
27 |         }
28 |       }
29 |     }
30 |   }
31 |   .main {
32 |     width: 1000px;
33 |     height: 800px;
34 |     position: relative;
35 |     background-color: rgb(245, 242, 240);
36 |     .scroll {
37 |       height: 100%;
38 |       font-size: 24px;
39 |       overflow-x: scroll;
40 |     }
41 |     .type {
42 |       flex-direction: row;
43 |       align-items: center;
44 |       background-color: #fff;
45 |       .item {
46 |         padding: 10px 15px;
47 |         font-size: 28px;
48 |         color: #333;
49 |         font-size: 24px;
50 |         background-color: #fff;
51 |         &.select {
52 |           background-color: #ededed;
53 |         }
54 |       }
55 |       .weui-cells_checkbox {
56 |         margin-left: 20px;
57 |         font-size: 20px;
58 |         margin-right: 10px;
59 |         display: flex;
60 |         flex-direction: row;
61 |         align-items: center;
62 |         & > input {
63 |           top: 0;
64 |           margin-right: 5px;
65 |         }
66 |       }
67 |     }
68 |     .copy {
69 |       position: absolute;
70 |       right: 0;
71 |       top: 0;
72 |       padding: 6px 10px;
73 |       background-color: #ededed;
74 |       flex-direction: row;
75 |       align-items: center;
76 |       .text {
77 |         font-size: 24px;
78 |         margin-left: 10px;
79 |         color: #666;
80 |       }
81 |     }
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/design/components/hover.jsx:
--------------------------------------------------------------------------------
  1 | 
  2 | import React, { useEffect, useContext, useCallback, useReducer } from 'react'
  3 | import { View } from '@tarojs/components'
  4 | import Context from '../util/context'
  5 | import { getOffset, toPx } from '../util/util'
  6 | import './hover.scss'
  7 | 
  8 | const diff = (newData, oldData) => {
  9 |   const add = []
 10 |   const del = []
 11 |   newData.forEach(key => {
 12 |     if (!oldData.includes(key)) {
 13 |       add.push(key)
 14 |     }
 15 |   })
 16 |   oldData.forEach(key => {
 17 |     if (!newData.includes(key)) {
 18 |       del.push(key)
 19 |     }
 20 |   })
 21 |   return [add, del]
 22 | }
 23 | 
 24 | const mutationData = {}
 25 | 
 26 | const monitorSize = (keys, callback) => {
 27 |   if (typeof keys !== 'object') {
 28 |     keys = [keys]
 29 |   }
 30 |   const [add, del] = diff(keys, Object.keys(mutationData))
 31 | 
 32 |   add.forEach(key => {
 33 |     let targetNode = document.querySelector(`.form-drag-drop.key-${key} .hydrated`)
 34 |     if (!targetNode || targetNode.classList.contains('form-drag-drop')) {
 35 |       targetNode = document.querySelector(`.form-drag-drop.key-${key}`)
 36 |     }
 37 |     if (!targetNode) {
 38 |       return
 39 |     }
 40 |     // 观察器的配置（需要观察什么变动）
 41 |     const config = { attributes: true, childList: true, subtree: true }
 42 | 
 43 |     // 历史布局信息 如果完全相同则不触发回调
 44 |     let oldData = {}
 45 |     // 当观察到变动时执行的回调函数
 46 |     const onChange = function () {
 47 |       const { width, height } = targetNode.getBoundingClientRect()
 48 |       const data = {
 49 |         key,
 50 |         ...getOffset(targetNode, document.querySelector('.phone .scroll')),
 51 |         width,
 52 |         height
 53 |       }
 54 |       if (data.left !== oldData.left || data.top !== oldData.top || data.width !== oldData.width || data.height !== oldData.height) {
 55 |         callback(data)
 56 |         oldData = data
 57 |       }
 58 |     }
 59 |     onChange()
 60 |     // 创建一个观察器实例并传入回调函数
 61 |     mutationData[key] = new MutationObserver(onChange)
 62 | 
 63 |     // 以上述配置开始观察目标节点
 64 |     mutationData[key].observe(targetNode, config)
 65 |   })
 66 |   del.forEach(key => {
 67 |     mutationData[key].disconnect()
 68 |     delete mutationData[key]
 69 |   })
 70 |   return del
 71 | }
 72 | 
 73 | const Item = ({ pos }) => {
 74 |   pos = { ...pos }
 75 |   pos.width -= 2
 76 |   // pos.height -= 1
 77 | 
 78 |   return <React.Fragment>
 79 |     <View className='select-box top' style={{ width: toPx(pos.width), left: toPx(pos.left), top: toPx(pos.top) }} />
 80 |     <View className='select-box right' style={{ height: toPx(pos.height), left: toPx(pos.left + pos.width), top: toPx(pos.top) }} />
 81 |     <View className='select-box bottom' style={{ width: toPx(pos.width), left: toPx(pos.left), top: toPx(pos.top + pos.height) }} />
 82 |     <View className='select-box left' style={{ height: toPx(pos.height), left: toPx(pos.left), top: toPx(pos.top) }} />
 83 |   </React.Fragment>
 84 | }
 85 | 
 86 | // 状态管理
 87 | const initialState = []
 88 | function reducer(state, action) {
 89 |   switch (action.type) {
 90 |     case 'change': {
 91 |       const index = state.findIndex(v => v.key === action.data.key)
 92 |       if (~index) {
 93 |         state.splice(index, 1, action.data)
 94 |       } else {
 95 |         state.push(action.data)
 96 |       }
 97 |       return [...state]
 98 |     }
 99 | 
100 |     case 'del': {
101 |       // 删除
102 |       return state.filter(item => !action.data.includes(item.key))
103 |     }
104 | 
105 |     default: {
106 |       return state
107 |     }
108 |   }
109 | }
110 | 
111 | export default () => {
112 | 
113 |   const { hoverKey } = useContext(Context)
114 | 
115 |   const [select, dispatch] = useReducer(reducer, initialState)
116 | 
117 |   const monitorCallback = useCallback(item => dispatch({ data: item, type: 'change' }), [])
118 | 
119 |   // 监听选中的表单
120 |   useEffect(() => {
121 |     let del
122 |     if (hoverKey) {
123 |       del = monitorSize(hoverKey, monitorCallback)
124 |     } else {
125 |       del = monitorSize([], monitorCallback)
126 |     }
127 |     dispatch({ type: 'del', data: del })
128 |   }, [hoverKey, monitorCallback])
129 | 
130 |   return select.map(item => <Item key={item.key} pos={item} />)
131 | 
132 | }
133 | 


--------------------------------------------------------------------------------
/design/components/hover.scss:
--------------------------------------------------------------------------------
 1 | .select-box {
 2 |   position: absolute;
 3 |   z-index: 9;
 4 |   &.top,
 5 |   &.bottom {
 6 |     border-top: 1px dashed #666;
 7 |   }
 8 |   &.left,
 9 |   &.right {
10 |     border-left: 1px dashed #666;
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/design/components/menus.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useContext, useState } from 'react'
 2 | import { useDrag } from 'react-dnd'
 3 | import { View, Text } from '@tarojs/components'
 4 | import classNames from 'classnames'
 5 | import TemplateList from '../template/list'
 6 | import Context from '../util/context'
 7 | import comp from '../util/comp'
 8 | import EditTypes from '../util/editTypes'
 9 | import { NodePosition } from '../util/edit'
10 | import './menus.scss'
11 | 
12 | const Module = ({ item }) => {
13 |   const { selectNode, moveNode, nodes } = useContext(Context)
14 | 
15 |   const [, drag] = useDrag({
16 |     type: EditTypes.FORM_ADD,
17 |     item: () => {
18 |       selectNode()
19 |       return { nodeName: item.nodeName }
20 |     }
21 |   })
22 | 
23 |   const add = useCallback(() => {
24 |     moveNode(item.nodeName, new NodePosition('__root__', nodes.length))
25 |   }, [item.nodeName, moveNode, nodes.length])
26 | 
27 |   return <View ref={drag} className='item' onClick={add}>
28 |     <Text className='text'>{item.text}</Text>
29 |   </View>
30 | }
31 | 
32 | export default ({
33 |   templateOpen
34 | }) => {
35 | 
36 |   const [cates] = useState(comp.getCates())
37 |   const [cateName, setCateName] = useState('base')
38 | 
39 |   const [module] = useState(comp.getComps())
40 | 
41 |   return <View className='menu'>
42 |     <View className='level-1'>
43 |       {
44 |         cates.map(cate => <View
45 |           className={`cate${cate.name === cateName ? ' hover' : ''}`}
46 |           key={cate.name}
47 |           onClick={() => setCateName(cate.name)}
48 |         >
49 |           <Text className='cate-name'>{cate.text}</Text>
50 |         </View>)
51 |       }
52 |       {templateOpen && <View
53 |         className={classNames('cate', { hover: '_template_' === cateName })}
54 |         onClick={() => setCateName('_template_')}
55 |       >
56 |         <Text className='cate-name'>模板</Text>
57 |       </View>}
58 |     </View>
59 |     {!!cateName && <View className='level-2'>
60 |       <View className='child-cate'>
61 |         {
62 |           module.filter(item => item.cate?.name === cateName).map(child => <Module key={child.nodeName} item={child} />)
63 |         }
64 |       </View>
65 |       {templateOpen && <TemplateList show={cateName === '_template_'} />}
66 |     </View>}
67 |   </View>
68 | }
69 | 


--------------------------------------------------------------------------------
/design/components/menus.scss:
--------------------------------------------------------------------------------
 1 | .taro-design > .design-main > .menu {
 2 |   flex-direction: row;
 3 |   align-self: stretch;
 4 |   .level-1 {
 5 |     width: 125px;
 6 |     background-color: #fff;
 7 |     overflow-y: auto;
 8 |     border-right: 1px solid #ededed;
 9 |   }
10 |   .level-2 {
11 |     width: 375px;
12 |     overflow-y: auto;
13 |     background-color: #fff;
14 |     &::-webkit-scrollbar {
15 |       /*滚动条整体样式*/
16 |       width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
17 |       height: 1px;
18 |     }
19 |     &::-webkit-scrollbar-thumb {
20 |       /*滚动条里面小方块*/
21 |       border-radius: 10px;
22 |       box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
23 |       background: #888;
24 |     }
25 |     &::-webkit-scrollbar-track {
26 |       /*滚动条里面轨道*/
27 |       box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
28 |       border-radius: 10px;
29 |       background: #ededed;
30 |     }
31 |   }
32 |   .cate {
33 |     position: relative;
34 |     .cate-name {
35 |       font-size: 26px;
36 |       padding: 20px 5px;
37 |       text-align: center;
38 |       color: #000;
39 |     }
40 |     &.hover {
41 |       background-color: #E8E8E8;
42 |     }
43 |   }
44 |   .child-cate {
45 |     flex-direction: row;
46 |     flex-wrap: wrap;
47 |     align-content: flex-start;
48 |     .item {
49 |       width: 50%;
50 |       padding: 20px 10px;
51 |       border-bottom: 1px solid #ededed;
52 |       border-right: 1px solid #ededed;
53 |       align-items: center;
54 |       justify-content: center;
55 |       .text {
56 |         font-size: 24px;
57 |         color: #202020;
58 |       }
59 |     }
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/design/components/node.scss:
--------------------------------------------------------------------------------
 1 | $nodeLeft: 20px;
 2 | 
 3 | .nodes {
 4 |   flex: 1;
 5 |   .scroll-root {
 6 |     flex: 1;
 7 |     width: 100%;
 8 |     position: relative;
 9 |   }
10 |   .scroll-main {
11 |     position: absolute;
12 |     left: 0;
13 |     top: 0;
14 |     height: 100%;
15 |     width: 100%;
16 |     overflow: auto;
17 |     display: block;
18 |   }
19 |   .item-add {
20 |     position: absolute;
21 |     height: 1px;
22 |     flex-shrink: 0;
23 |     background-color: #666;
24 |     margin-left: 40px;
25 |     min-width: 300px;
26 |     &.top {
27 |       top: -1px;
28 |     }
29 |     &.bottom {
30 |       bottom: -1px;
31 |     }
32 |   }
33 |   .item {
34 |     cursor: pointer;
35 |     height: 50px;
36 |     position: relative;
37 |     flex-direction: row;
38 |     align-items: center;
39 |     &.select {
40 |       background-color: #e8e8e8;
41 |     }
42 |     &.hover {
43 |       opacity: 0.6;
44 |     }
45 |     &.insert {
46 |       background-color: #e8e8e8;
47 |     }
48 |     .icon-you2 {
49 |       font-size: 24px;
50 |       color: #333;
51 |       transition: all 0.3s;
52 |       padding: 0 10px;
53 |       &:hover {
54 |         color: #999;
55 |       }
56 |       &.hide {
57 |         &::before {
58 |           opacity: 0;
59 |         }
60 |       }
61 |       &.unfold {
62 |         transform: rotate(90deg);
63 |       }
64 |     }
65 |     .text {
66 |       font-size: 24px;
67 |       color: #333;
68 |       white-space: nowrap;
69 |       padding: 0;
70 |       line-height: 1;
71 |     }
72 |     &:hover {
73 |       background-color: #e0e0e0;
74 |     }
75 |   }
76 |   @for $i from 0 to 50 {
77 |     .level-#{$i} {
78 |       padding-left: 16px * $i;
79 |     }
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/design/components/preview.jsx:
--------------------------------------------------------------------------------
 1 | 
 2 | import React, { useContext, useState, useMemo } from 'react'
 3 | import { View, ScrollView } from '@tarojs/components'
 4 | import { currentPage } from 'taro-tools'
 5 | import { Icon, PullView, TopView } from '../../components'
 6 | import Context from '../util/context'
 7 | import { PageUrlContext, Create, styled } from '../../render'
 8 | import './preview.scss'
 9 | 
10 | export default () => {
11 | 
12 |   const { nodes, setPreview } = useContext(Context)
13 | 
14 |   const [previewPhone] = useState([
15 |     { name: '手机', icon: 'shiwu-shouji', width: 480 },
16 |     { name: '平板', icon: 'shouji', width: 750 },
17 |     { name: '电脑', icon: 'dianshi', width: 1280 }
18 |   ])
19 |   const [previewPhoneHover, setPreviewPhoneHover] = useState(1)
20 | 
21 |   // 组件页面
22 |   const page = useMemo(() => currentPage() + '/preview', [])
23 | 
24 |   return <PullView side='top' onClose={() => setPreview(false)}>
25 |     <View className='preview'>
26 |       <View className='head'>
27 |         {
28 |           previewPhone.map((item, index) => <View
29 |             key={item.name}
30 |             className={`item${index === previewPhoneHover ? ' hover' : ''}`}
31 |             onClick={() => setPreviewPhoneHover(index)}
32 |           >
33 |             <Icon name={item.icon} size={36} color='#333' />
34 |           </View>)
35 |         }
36 |       </View>
37 |       <View
38 |         className='mobile'
39 |         style={styled.styleTransform({
40 |           width: previewPhone[previewPhoneHover].width
41 |         }).style}
42 |       >
43 |         <TopView pageUrl={page}>
44 |           <ScrollView className='scroll' scrollY>
45 |             <PageUrlContext.Provider value={page}>
46 |               <Create nodes={nodes} />
47 |             </PageUrlContext.Provider>
48 |           </ScrollView>
49 |         </TopView>
50 |       </View>
51 |     </View>
52 |   </PullView>
53 | }
54 | 


--------------------------------------------------------------------------------
/design/components/preview.scss:
--------------------------------------------------------------------------------
 1 | .preview {
 2 |   background-color: #f2f2f2;
 3 |   align-items: center;
 4 |   .head {
 5 |     height: 60px;
 6 |     flex-direction: row;
 7 |     align-items: center;
 8 |     .item {
 9 |       margin: 0 6px;
10 |       padding: 6px 4px;
11 |       border-radius: 4px;
12 |       &.hover {
13 |         background-color: #ededed;
14 |       }
15 |     }
16 |   }
17 |   .mobile {
18 |     position: relative;
19 |     background-color: #fff;
20 |     // overflow-y: scroll;
21 |     // &::-webkit-scrollbar {
22 |     //   display: none;
23 |     // }
24 |     .scroll {
25 |       height: 800px;
26 |     }
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/design/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from './components/edit'
2 | 
3 | export * from './util/styled'
4 | 
5 | export * from './util/config'
6 | 
7 | export * from './util/formCreate'
8 | 


--------------------------------------------------------------------------------
/design/index.js:
--------------------------------------------------------------------------------
 1 | import '../render/init'
 2 | import './init'
 3 | 
 4 | export { default as Design } from './components/edit'
 5 | 
 6 | export { styleGroup, styleNode } from './util/styled'
 7 | 
 8 | export * from './util/config'
 9 | 
10 | export { default as FormCreate } from './util/formCreate'
11 | 


--------------------------------------------------------------------------------
/design/init.js:
--------------------------------------------------------------------------------
1 | import { defineComponentConfigs } from './util/config'
2 | import editConfig from '../components/editConfig'
3 | 
4 | defineComponentConfigs(editConfig)
5 | 


--------------------------------------------------------------------------------
/design/min.js:
--------------------------------------------------------------------------------
1 | export { default as Design } from './components/edit'
2 | 
3 | export { styleGroup, styleNode } from './util/styled'
4 | 
5 | export * from './util/config'
6 | 
7 | export { default as FormCreate } from './util/formCreate'
8 | 


--------------------------------------------------------------------------------
/design/template/add.scss:
--------------------------------------------------------------------------------
 1 | .temp-add {
 2 |   width: 400px;
 3 |   height: 600px;
 4 |   background-color: #fff;
 5 |   border-radius: 10px;
 6 |   .head {
 7 |     flex-direction: row;
 8 |     align-items: center;
 9 |     padding: 20px;
10 |     .title {
11 |       flex: 1;
12 |       margin-left: 20px;
13 |       font-size: 24px;
14 |       text-align: center;
15 |     }
16 |   }
17 |   .load {
18 |     height: 100px;
19 |     align-items: center;
20 |     justify-content: center;
21 |   }
22 |   .item {
23 |     flex-direction: row;
24 |     align-items: center;
25 |     padding: 20px;
26 |     justify-content: space-between;
27 |     &:hover {
28 |       background-color: #f2f2f2;
29 |       .icon {
30 |         opacity: 1;
31 |       }
32 |     }
33 |     &.select {
34 |       background-color: #ededed;
35 |     }
36 |     .input {
37 |       font-size: 20px;
38 |       color: #333;
39 |       border-bottom: 1px solid #ccc;
40 |       padding: 0 5px;
41 |       flex: 1;
42 |     }
43 |     .name {
44 |       font-size: 20px;
45 |       flex: 1;
46 |     }
47 |     .public {
48 |       padding: 0 8px;
49 |       border: 1px solid #999;
50 |       border-radius: 30px;
51 |       font-size: 18px;
52 |       color: #666;
53 |       margin-left: 10px;
54 |     }
55 |     .icon {
56 |       transition: opacity 0.2s;
57 |       opacity: 0;
58 |     }
59 |   }
60 |   .btn {
61 |     padding: 20px;
62 |     flex-direction: row;
63 |     align-items: center;
64 |     .name {
65 |       font-size: 24px;
66 |       border-bottom: 1px solid #ededed;
67 |       margin-right: 10px;
68 |       padding: 0 5px;
69 |     }
70 |   }
71 | }
72 | 


--------------------------------------------------------------------------------
/design/template/auth.jsx:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect, useCallback } from 'react'
 2 | import { View, Text, Input } from '@tarojs/components'
 3 | import { event, toast } from 'taro-tools'
 4 | import { Icon, Modal, Button } from '../../components'
 5 | import { request } from './utils/request'
 6 | import { userInfo } from './utils/user'
 7 | import './auth.scss'
 8 | 
 9 | const Login = ({ onLogin }) => {
10 |   const [account, setAccount] = useState('')
11 |   const [password, setPassword] = useState('')
12 | 
13 |   const [load, setLoad] = useState(false)
14 | 
15 |   const login = useCallback(() => {
16 |     setLoad(true)
17 |     request({
18 |       url: 'User/login',
19 |       method: 'POST',
20 |       data: {
21 |         account,
22 |         password
23 |       },
24 |       toastError: true
25 |     }).then(res => {
26 |       userInfo.set(res.userinfo)
27 |       event.emit('template-auth-callback', true)
28 |       onLogin()
29 |     }).catch(err => {
30 |       toast(err.message)
31 |     }).finally(() => {
32 |       setLoad(false)
33 |     })
34 |   }, [account, password, onLogin])
35 | 
36 |   return <View className='template-auth__login'>
37 |     <Input className='template-auth__login__input' placeholder='用户名' onInput={e => setAccount(e.detail.value)} />
38 |     <Input className='template-auth__login__input' placeholder='密码' onInput={e => setPassword(e.detail.value)} password />
39 |     <Button text='登录' size='s' loading={load} disabled={!account || !password} onClick={login} />
40 |     <Text className='template-auth__login__reg'>去注册</Text>
41 |   </View>
42 | }
43 | 
44 | export default () => {
45 |   const [show, setShow] = useState(false)
46 | 
47 |   const close = useCallback(() => {
48 |     setShow(false)
49 |     event.emit('template-auth-callback', false)
50 |   }, [])
51 | 
52 |   useEffect(() => {
53 |     const func = () => setShow(true)
54 |     event.add('template-auth-show', func)
55 |     return () => {
56 |       event.remove('template-auth-show', func)
57 |     }
58 |   }, [])
59 | 
60 |   return <Modal show={show} onClose={close}>
61 |     <View className='template-auth'>
62 |       <View className='template-auth__head'>
63 |         <Text className='template-auth__head__title'>登录</Text>
64 |         <Icon name='cuo' size={46} onClick={close} />
65 |       </View>
66 |       <Login onLogin={close} />
67 |     </View>
68 |   </Modal>
69 | }
70 | 


--------------------------------------------------------------------------------
/design/template/auth.scss:
--------------------------------------------------------------------------------
 1 | .template-auth {
 2 |   width: 400px;
 3 |   background-color: #fff;
 4 |   &__head {
 5 |     flex-direction: row;
 6 |     padding: 10px 25px;
 7 |     justify-content: space-between;
 8 |     border-bottom: 1px solid #f2f2f2;
 9 |     align-items: center;
10 |     &__title {
11 |       font-size: 26px;
12 |     }
13 |   }
14 |   &__login {
15 |     padding: 30px;
16 |     &__input {
17 |       font-size: 24px;
18 |       margin-bottom: 20px;
19 |       padding: 10px;
20 |       border-bottom: 1px solid #f2f2f2;
21 |     }
22 |     &__reg {
23 |       margin-top: 16px;
24 |       text-align: center;
25 |       font-size: 24px;
26 |       color: #666;
27 |     }
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/design/template/index.jsx:
--------------------------------------------------------------------------------
 1 | import React, { } from 'react'
 2 | import Auth from './auth'
 3 | import Add from './add'
 4 | import './auth.scss'
 5 | 
 6 | export default () => {
 7 | 
 8 |   return <>
 9 |     <Auth />
10 |     <Add />
11 |   </>
12 | }
13 | 


--------------------------------------------------------------------------------
/design/template/index.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/design/template/index.scss


--------------------------------------------------------------------------------
/design/template/list.scss:
--------------------------------------------------------------------------------
  1 | .temp-list-nav {
  2 |   flex-direction: row;
  3 |   align-items: stretch;
  4 |   height: 60px;
  5 |   &__item {
  6 |     flex: 1;
  7 |     text-align: center;
  8 |     font-size: 26px;
  9 |     line-height: 60px;
 10 |     color: #333;
 11 |   }
 12 |   &__line {
 13 |     position: absolute;
 14 |     bottom: 0;
 15 |     left: 0;
 16 |     height: 3px;
 17 |     background-color: #666;
 18 |     transition: transform 0.2s;
 19 |   }
 20 | }
 21 | .temp-list-nav-main {
 22 |   flex: 1;
 23 |   position: relative;
 24 |   &__item {
 25 |     position: absolute;
 26 |     background-color: #fff;
 27 |     z-index: 0;
 28 |     left: 0;
 29 |     top: 0;
 30 |     bottom: 0;
 31 |     right: 0;
 32 |   }
 33 | }
 34 | .temp-list-user {
 35 |   padding: 0 10px;
 36 |   border-top: 1px solid #ededed;
 37 |   height: 60px;
 38 |   flex-direction: row;
 39 |   align-items: center;
 40 |   justify-content: center;
 41 |   &__tip {
 42 |     font-size: 20px;
 43 |     &__login {
 44 |       font-size: 20px;
 45 |       color: blue;
 46 |       margin-right: 6px;
 47 |       cursor: pointer;
 48 |     }
 49 |   }
 50 |   &__name {
 51 |     font-size: 24px;
 52 |     flex: 1;
 53 |   }
 54 |   &__out {
 55 |     padding: 5px 10px;
 56 |     border: 1px solid #999;
 57 |     font-size: 20px;
 58 |     border-radius: 20px;
 59 |     color: #666;
 60 |     cursor: pointer;
 61 |   }
 62 | }
 63 | .temp-list {
 64 |   flex: 1;
 65 |   // padding: 10px 10px 0 10px;
 66 |   .search {
 67 |     flex-direction: row;
 68 |     align-items: center;
 69 |     padding: 6px 10px;
 70 |     border: 1px solid #f2f2f2;
 71 |     margin: 6px 10px;
 72 |     border-radius: 5px;
 73 |     taro-input-core {
 74 |       flex: 1;
 75 |       font-size: 24px;
 76 |       margin-left: 10px;
 77 |       color: #333;
 78 |     }
 79 |     taro-text-core {
 80 |       font-size: 24px;
 81 |       color: #999;
 82 |     }
 83 |   }
 84 |   .item {
 85 |     margin-top: 28px;
 86 |     box-shadow: 0 0 6px 2px #f2f2f2;
 87 |     border-radius: 10px;
 88 |     overflow: hidden;
 89 |     &__zoom {
 90 |       position: relative;
 91 |       overflow: hidden;
 92 |       &__pos {
 93 |         position: absolute;
 94 |         left: 0;
 95 |         top: 0;
 96 |         width: 750px;
 97 |         transform-origin: 0 0;
 98 |         transform: scale3d(0.5, 0.5, 1);
 99 |       }
100 |     }
101 |     &:nth-child(1) {
102 |       margin-top: 0;
103 |     }
104 |     .title {
105 |       flex-direction: row;
106 |       align-items: center;
107 |       justify-content: space-between;
108 |       padding: 10px 14px;
109 |       background-color: #a3a5ab;
110 |       .name {
111 |         font-size: 20px;
112 |         color: #fff;
113 |       }
114 |       .cate {
115 |         font-size: 20px;
116 |         color: #fff;
117 |         &::after {
118 |           font-family: "icon" !important;
119 |           content: "\e71f";
120 |           font-size: 20px;
121 |         }
122 |       }
123 |     }
124 |     .uninstall {
125 |       margin-top: 10px;
126 |       font-size: 20px;
127 |       color: #fff;
128 |       padding: 10px;
129 |       line-height: 1.2;
130 |       background-color: #ff4a4a;
131 |     }
132 |   }
133 | }
134 | .temp-list-project {
135 |   flex: 1;
136 |   padding: 10px 10px 0 10px;
137 |   .search {
138 |     flex-direction: row;
139 |     align-items: center;
140 |     padding: 6px 10px;
141 |     border: 1px solid #f2f2f2;
142 |     margin: 6px 10px;
143 |     border-radius: 5px;
144 |     taro-input-core {
145 |       flex: 1;
146 |       font-size: 24px;
147 |       margin-left: 10px;
148 |       color: #333;
149 |     }
150 |     taro-text-core {
151 |       font-size: 24px;
152 |       color: #999;
153 |     }
154 |   }
155 |   &__item {
156 |     padding: 12px;
157 |     margin-top: 10px;
158 |     box-shadow: 0 0 6px 2px #f2f2f2;
159 |     &__name {
160 |       font-size: 28px;
161 |     }
162 |     &__count {
163 |       font-size: 20px;
164 |       color: #666;
165 |       background-color: #ededed;
166 |       border-radius: 20px;
167 |       padding: 1px 12px;
168 |     }
169 |     &__bottom {
170 |       flex-direction: row;
171 |       justify-content: space-between;
172 |       margin-top: 16px;
173 |     }
174 |     &__tips {
175 |       flex: 1;
176 |       flex-direction: row;
177 |       align-items: center;
178 |     }
179 |     &__public {
180 |       padding: 4px 10px;
181 |       border: 1px solid #999;
182 |       border-radius: 30px;
183 |       font-size: 20px;
184 |       color: #666;
185 |       margin-right: 10px;
186 |     }
187 |     &__user {
188 |       font-size: 24px;
189 |       color: #999;
190 |     }
191 |   }
192 | }
193 | 


--------------------------------------------------------------------------------
/design/template/utils/index.js:
--------------------------------------------------------------------------------
 1 | import { event } from 'taro-tools'
 2 | import { isLogin } from './user'
 3 | 
 4 | /**
 5 |  * 添加值模板
 6 |  * @param {*} nodes
 7 |  * @returns
 8 |  */
 9 | export const addTemplate = nodes => {
10 |   return new Promise((resolve, reject) => {
11 |     if (isLogin(true, () => addTemplate(nodes).then(resolve).catch(reject))) {
12 |       event.emit('template-add-show', nodes)
13 |       const callback = status => {
14 |         event.remove('template-add-callback', callback)
15 |         status ? resolve() : reject()
16 |       }
17 |       event.add('template-add-callback', callback)
18 |     }
19 |   })
20 | }
21 | 


--------------------------------------------------------------------------------
/design/template/utils/request.js:
--------------------------------------------------------------------------------
 1 | import { request as oldRequest, throttleRequest as oldThrottleRequest } from 'taro-tools'
 2 | import { userInfo } from './user'
 3 | 
 4 | 
 5 | const config = {
 6 |   /**
 7 |    * 请求配置
 8 |    * 请求支持json及form格式
 9 |    */
10 |   request: {
11 |     // 请求域名及端口号 请勿以/结尾
12 |     origin: 'https://taro-design.platelet.xyz',
13 |     // 公共请求路径
14 |     path: 'api',
15 |     /**
16 |      * Content-Type 请求媒体类型 有效值如下
17 |      * 设置这个值将用户post请求的时候设置请求body类型
18 |      * application/json
19 |      * application/x-www-form-urlencoded
20 |      */
21 |     contentType: 'application/json',
22 |     /**
23 |      * 公共请求header
24 |      * 可以传入函数或者对象 函数需要返回一个对象
25 |      */
26 |     header: () => {
27 |       const header = {
28 |         Accept: 'application/json',
29 |         Token: userInfo.get().token || ''
30 |       }
31 |       return header
32 |     },
33 |     /**
34 |      * 要携带在请求上的参数
35 |      * 根据method请求类型 参数自动设置在GET或者POST
36 |      * 可以传入函数或者对象 函数需要返回一个对象
37 |      */
38 |     data: {
39 | 
40 |     },
41 |     /**
42 |      * 要携带在请求url上的参数
43 |      * 即使使用POST请求时 也在GET参数上
44 |      * 可以传入函数或者对象 函数需要返回一个对象
45 |      */
46 |     getData: {
47 | 
48 |     }
49 |   },
50 |   /**
51 |    * 返回结果配置
52 |    * 返回结果仅支持JSON格式数据
53 |    */
54 |   result: {
55 |     /**
56 |      * 成功的code
57 |      * code对不上，请求将会走catch方法
58 |      */
59 |     succesCode: 1,
60 |     /**
61 |      * 请求失败的标准code
62 |      * 这个code将用于内部使用
63 |      */
64 |     errorCode: 0,
65 |     /**
66 |      * 返回值获取code字段
67 |      * 多级请用数组表示
68 |      * 可以传入函数处理数据
69 |      */
70 |     code: ['data', 'code'],
71 |     /**
72 |      * 返回值获取提示信息的字段
73 |      * 多级请用数组表示
74 |      * 可以传入函数处理数据
75 |      */
76 |     message: ['data', 'msg'],
77 |     /**
78 |      * 要返回到请求结果的字段
79 |      * 当code对比成功时返回此值
80 |      * 多级请用数组表示
81 |      * 可以传入函数处理数据
82 |      */
83 |     data: ['data', 'data'],
84 |   }
85 | }
86 | 
87 | /**
88 |  * 封装当前模块请求
89 |  */
90 | const request = params => oldRequest({ config, ...params })
91 | 
92 | // 请求封装
93 | const throttleRequest = (params, mark) => oldThrottleRequest({ config, ...params }, mark)
94 | 
95 | export {
96 |   request,
97 |   throttleRequest
98 | }
99 | 


--------------------------------------------------------------------------------
/design/template/utils/user.js:
--------------------------------------------------------------------------------
 1 | import { event, noop } from "taro-tools"
 2 | 
 3 | const userInfo = {
 4 |   get() {
 5 |     const data = localStorage.getItem('template_user')
 6 |     if (data) {
 7 |       return JSON.parse(data)
 8 |     }
 9 |     return {}
10 |   },
11 |   set(val) {
12 |     const user = this.get()
13 |     localStorage.setItem('template_user', JSON.stringify({ ...user, ...val }))
14 |   },
15 |   clear() {
16 |     localStorage.removeItem('template_user')
17 |   }
18 | }
19 | 
20 | const isLogin = (openLogin, callback = noop) => {
21 |   const status = !!userInfo.get().token
22 |   if (!status && openLogin) {
23 |     login().then(callback).catch(noop)
24 |   }
25 |   return status
26 | }
27 | 
28 | /**
29 |  * 调用登录
30 |  * @returns
31 |  */
32 | const login = () => {
33 |   return new Promise((resolve, reject) => {
34 |     event.emit('template-auth-show')
35 |     const callback = status => {
36 |       event.remove('template-auth-callback', callback)
37 |       status ? resolve() : reject()
38 |     }
39 |     event.add('template-auth-callback', callback)
40 |   })
41 | }
42 | 
43 | /**
44 |  * 退出登录
45 |  */
46 | const loginOut = () => {
47 |   userInfo.clear()
48 | }
49 | 
50 | export {
51 |   isLogin,
52 |   login,
53 |   loginOut,
54 |   userInfo
55 | }
56 | 


--------------------------------------------------------------------------------
/design/util/config.d.ts:
--------------------------------------------------------------------------------
  1 | import { CSSProperties, Component } from 'react'
  2 | import { design } from '../components/edit'
  3 | 
  4 | declare namespace config {
  5 |   interface ComponentCateItem {
  6 |     /** 唯一标识 */
  7 |     name: string
  8 |     /** 名称 */
  9 |     text: string
 10 |   }
 11 |   interface ComponentListItem {
 12 |     /** 节点名称 */
 13 |     text: string
 14 |     /** 组件分类 */
 15 |     cate: string,
 16 |     /** 返回默认节点属性 */
 17 |     attr?: () => {
 18 |       /** 组件样式 */
 19 |       style?: CSSProperties,
 20 |       /** 其他属性 */
 21 |       [propName: string]: any
 22 |     }
 23 |     /** 返回编辑节点的表单组成的nodeList */
 24 |     form?: () => design.Node[]
 25 |     /**
 26 |      * 在编辑模式下要加在 拖拽组件上的样式
 27 |      * 因为编辑模式再每个组件外围添加了一个View组件，这个组件可能会影响到布局，当出现这个情况的时候，你可以添加一些样式到这个View上还原你原本的效果
 28 |      */
 29 |     designItemStyle?: () => CSSProperties
 30 |     /**
 31 |      * 子组件相关配置
 32 |      * 当你的节点需要使用了children这个props，也就是能进行嵌套时，请添加此字段，不添加此字段则不能将其他组件拖动到此组件内部
 33 |      */
 34 |     child?: {
 35 |       /**
 36 |        * 配置能添加到组件内的组件，不配置则所有组件都能添加为此组件的子组件
 37 |        * 你也可以传入一个函数，函数的参数是待验证的子节点标识，返回true标示禁用
 38 |        */
 39 |       disable?: (childNodeName: string) => boolean | {
 40 |         /** 组件列表 */
 41 |         comp: string[]
 42 |         /**
 43 |          * 组件判断是否是包含这些组件还是不包含这些组件
 44 |          * 为true表示白名单机制，否则是黑名单机制
 45 |          */
 46 |         contain: boolean
 47 |       }
 48 |       /** 最多能放多少个子节点 不配置则不限制 */
 49 |       max?: number
 50 |     }
 51 |     /**
 52 |      * 父组件相关配置
 53 |      * 一般用来配置字组件只能放在某些父组件里面
 54 |      */
 55 |     parent?: {
 56 |       /**
 57 |        * 配置字组件在哪些父组件中被禁用，也就是说不能放在这些父组件中
 58 |        * 你也可以传入一个函数，函数的参数是待验证的父节点标识，返回true标示禁用
 59 |        */
 60 |       disable?: (childNodeName: string) => boolean | {
 61 |         /** 组件列表 */
 62 |         comp: string[]
 63 |         /**
 64 |          * 组件判断是否是包含这些组件还是不包含这些组件
 65 |          * 为true表示白名单机制，否则是黑名单机制
 66 |          */
 67 |         contain: boolean
 68 |       }
 69 |     }
 70 |   }
 71 | }
 72 | 
 73 | /**
 74 |  * 获取表单
 75 |  * @param styles styles 样式单独处理
 76 |  * @param attr 属性的表单
 77 |  */
 78 | export function getBaseAttrForm(styles: object, attr: object): void
 79 | 
 80 | /**
 81 |  * 返回表单name的Index
 82 |  */
 83 | export function getNameIndex(): number
 84 | 
 85 | /**
 86 |  * 组件分类
 87 |  */
 88 | export const componentCate: {
 89 |   /** 基础组件 */
 90 |   base: config.ComponentCateItem
 91 |   /** 表单组件 */
 92 |   form: config.ComponentCateItem
 93 |   /** 其他定义的分类 */
 94 |   [propName: string]: config.ComponentCateItem
 95 | }
 96 | 
 97 | /**
 98 |  * 节点表单相关配置
 99 |  */
100 | export const componentList: {
101 |   /** 根节点 */
102 |   root: config.ComponentListItem
103 |   /** 其他定义的组件配置 */
104 |   [propName: string]: config.ComponentListItem
105 | }
106 | 
107 | /**
108 |  * 定义一个组件分类
109 |  * @param name 英文标识 唯一标识
110 |  * @param text 分类名称
111 |  */
112 | export function defineComponentCate(name: string, text: string): void
113 | 
114 | /**
115 |  * 定义一个组件配置
116 |  * @param key 组件标识
117 |  * @param component 组件
118 |  */
119 | export function defineComponentConfig(key: string, component: Component): void
120 | 
121 | /**
122 |  * 定义多个组件配置
123 |  * @param  data 一个由key: 组件组成的对象
124 |  */
125 | export function defineComponentConfigs(data: {
126 |   [propName: string]: Component
127 | }): void
128 | 


--------------------------------------------------------------------------------
/design/util/context.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | export default React.createContext({})
4 | 
5 | export const NodeContext = React.createContext({})
6 | 


--------------------------------------------------------------------------------
/design/util/edit.js:
--------------------------------------------------------------------------------
 1 | import { deepCopy } from "taro-tools"
 2 | import { querySelectByKeyOriginal } from "../../render"
 3 | 
 4 | /**
 5 |  * 节点位置信息类
 6 |  */
 7 | export class NodePosition {
 8 |   /**
 9 |    *
10 |    * @param {*} key
11 |    * @param {*} index
12 |    */
13 |   constructor(key, index) {
14 |     this.key = key
15 |     this.index = index
16 |   }
17 | 
18 |   getNode(nodes) {
19 |     return querySelectByKeyOriginal(nodes, this.key)
20 |   }
21 | 
22 |   getIndexNode(nodes) {
23 |     return querySelectByKeyOriginal(nodes, this.key)?.child?.[this.index]
24 |   }
25 | 
26 |   toString() {
27 |     return this.key + '-' + this.index
28 |   }
29 | }
30 | 
31 | 
32 | // 查找属性中的不同值，当检测到不同值是将会进行赋值
33 | export const diffAttr = (a, b, keys = []) => {
34 |   for (const k in b) {
35 |     if (Object.hasOwnProperty.call(b, k)) {
36 |       const typeb = typeof b[k]
37 |       if (typeb === 'undefined') {
38 |         const res = a[k]
39 |         delete a[k]
40 |         return [[...keys, k], res, b[k]]
41 |       } else if (typeb !== 'object' && a[k] != b[k]) {
42 |         const res = a[k]
43 |         a[k] = b[k]
44 |         return [[...keys, k], res, b[k]]
45 |       } else if (b[k] instanceof Array && JSON.stringify(a[k]) !== JSON.stringify(b[k])) {
46 |         const res = deepCopy(a[k])
47 |         a[k] = b[k]
48 |         return [[...keys, k], res, deepCopy(b[k])]
49 |       } else if (typeb === 'object') {
50 |         const res = diffAttr(a[k], b[k], [...keys, k])
51 |         if (res[0].length !== 0) {
52 |           return res
53 |         }
54 |       }
55 |     }
56 |   }
57 |   return [[], void 0]
58 | }
59 | 


--------------------------------------------------------------------------------
/design/util/editTypes.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   FORM_MOVE: 'form_move',
3 |   TEMPLATE_ADD: 'template_add',
4 |   FORM_ADD: 'form_add',
5 |   FORM_MOVE_NODE: 'form_move_node'
6 | }
7 | 


--------------------------------------------------------------------------------
/design/util/formCreate.d.ts:
--------------------------------------------------------------------------------
 1 | import { design } from '../components/edit'
 2 | 
 3 | export class FormCreate {
 4 |   /**
 5 |    * 创建一个表单的分组
 6 |    * @param name 分组名称
 7 |    * @param child 分组内容
 8 |    */
 9 |   static group(name: string, child: design.Node[]): design.Node
10 | 
11 |   /**
12 |    * 创建一个输入框 选择框 颜色选择框
13 |    * @param text 显示名称
14 |    * @param name 提交name
15 |    * @param type 类型 text输入框 select选择框（必须设置option参数） color颜色选择 textarea多行文本
16 |    * @param option 提供的下拉选项 当你你同此选项是则则是为此输入框提供几个快捷选项
17 |    */
18 |   static input(
19 |     text: string,
20 |     name: string,
21 |     type?: keyof { text, select, color, textarea },
22 |     option?: Array<{
23 |       /** 选项文本 */
24 |       text: string
25 |       /** 选项value */
26 |       value: string | number
27 |     } | string> | {
28 |       /** 由key value 组成的对象 */
29 |       [propName: string]: string | number
30 |     }): design.Node
31 | 
32 |   /**
33 |    * 创建一个开关表单
34 |    * @param text 显示名称
35 |    * @param name 提交name
36 |    */
37 |   static switch(text: string, name: string): design.Node
38 | 
39 |   /**
40 |    * 创建一个图标选择器
41 |    * @param text 显示名称
42 |    * @param name 提交name
43 |    */
44 |   static icon(text: string, name: string): design.Node
45 | }
46 | 


--------------------------------------------------------------------------------
/design/util/formCreate.js:
--------------------------------------------------------------------------------
  1 | 
  2 | import { getKey } from 'taro-tools'
  3 | import { nodeCreate } from '../../render'
  4 | 
  5 | export default class FormCreate {
  6 | 
  7 |   static group(name, child) {
  8 |     return nodeCreate('edit-group', { name }, child)
  9 |   }
 10 | 
 11 |   static input(text, name, type = 'text', option) {
 12 |     return nodeCreate('edit-item', { name: text }, nodeCreate('edit-input', { text, name, type, option }))
 13 |   }
 14 | 
 15 |   static switch(text, name) {
 16 |     return nodeCreate('edit-item', { name: text }, nodeCreate('edit-switch', { text, name }))
 17 |   }
 18 | 
 19 |   static icon(text, name) {
 20 |     return nodeCreate('edit-item', { name: text }, nodeCreate('edit-icon', { text, name }))
 21 |   }
 22 | 
 23 |   static init(...props) {
 24 |     return new this(...props)
 25 |   }
 26 | 
 27 |   constructor(nodeName, text, name, key) {
 28 |     this.form = {
 29 |       key: key || getKey(),
 30 |       name,
 31 |       nodeName,
 32 |       text
 33 |     }
 34 |     return this
 35 |   }
 36 | 
 37 |   // 表单数据
 38 |   form = {}
 39 | 
 40 |   // 提示
 41 |   tip(tip) {
 42 |     this.form.tip = tip
 43 |     return this
 44 |   }
 45 | 
 46 |   // 输入框提示
 47 |   placeholder(placeholder) {
 48 |     this.form.placeholder = placeholder
 49 |     return this
 50 |   }
 51 | 
 52 |   // 输入框类型
 53 |   inputType(inputType) {
 54 |     this.form.type = inputType
 55 |     return this
 56 |   }
 57 | 
 58 |   // 输入框类型为数字
 59 |   inputNumber() {
 60 |     this.form.valueType = 'number'
 61 |     this.form.type = 'number'
 62 |     return this
 63 |   }
 64 | 
 65 |   // 数据类型
 66 |   valueType(valueType) {
 67 |     this.form.valueType = valueType
 68 |     return this
 69 |   }
 70 | 
 71 |   // 字符串数据类型
 72 |   valueString() {
 73 |     this.form.valueType = 'string'
 74 |     return this
 75 |   }
 76 | 
 77 |   // 数字串数据类型
 78 |   valueNumber() {
 79 |     this.form.valueType = 'number'
 80 |     return this
 81 |   }
 82 | 
 83 |   // 布尔值数据类型
 84 |   valueBoolean() {
 85 |     this.form.valueType = 'boolean'
 86 |     return this
 87 |   }
 88 | 
 89 |   // 设置style
 90 |   style(style) {
 91 |     this.form.style = style
 92 |     return this
 93 |   }
 94 | 
 95 |   // 设置option通用参数
 96 |   option(data) {
 97 |     this.form = { ...this.form, ...data }
 98 |     return this
 99 |   }
100 | 
101 |   // 单选多选用的参数
102 |   select(option, type = 'radio', mode = 'show', theme = 'text') {
103 |     this.form = {
104 |       ...this.form,
105 |       type,
106 |       mode,
107 |       theme,
108 |       option
109 |     }
110 |     return this
111 |   }
112 | 
113 |   // 配置局部布局参数 覆盖全局参数
114 |   config(config) {
115 |     this.form.config = config
116 |     return this
117 |   }
118 | 
119 |   // 子内容
120 |   child(child = []) {
121 |     this.form.child = child
122 |     return this
123 |   }
124 | 
125 |   // 子表单宽度
126 |   childWidth(width) {
127 |     this.form.width = width
128 |     return this
129 |   }
130 | 
131 |   // 指定显示条件
132 |   where(key, judge, value) {
133 |     this.form.showWhere = {
134 |       key,
135 |       judge,
136 |       value
137 |     }
138 |     return this
139 |   }
140 | 
141 |   // 面板组件参数
142 |   panel(title, defaultShow = true) {
143 |     this.form = {
144 |       ...this.form,
145 |       title,
146 |       open: defaultShow
147 |     }
148 |     return this
149 |   }
150 | 
151 |   /*  设置表单验证
152 |     * {
153 |     *  reg: 'required|phone-tel|l5_8',
154 |     *  emptyMsg: '为空提示',
155 |     *  errMsg: '验证错误提示',
156 |     *  lengthErrMsg: '长度错误提示'
157 |     * }
158 |    */
159 | 
160 |   verify(verify) {
161 |     this.form.verify = verify
162 |     return this
163 |   }
164 | 
165 |   // 返回表单数据
166 |   get() {
167 |     return this.form
168 |   }
169 | }
170 | 


--------------------------------------------------------------------------------
/design/util/history.js:
--------------------------------------------------------------------------------
  1 | import { deepCopy } from "taro-tools"
  2 | import { keyboardEvent } from './util'
  3 | 
  4 | /**
  5 |  * 历史记录管理
  6 |  */
  7 | export class EditHistory {
  8 | 
  9 |   constructor() {
 10 |     keyboardEvent.add('z', this.revoke, true)
 11 |     keyboardEvent.add('z', this.recover, true, true)
 12 |   }
 13 | 
 14 |   // 历史记录列表
 15 |   list = []
 16 | 
 17 |   // 操作指针 后退步数
 18 |   backSetp = 0
 19 | 
 20 |   // 节点数据
 21 |   nodes
 22 | 
 23 |   // 设置节点数据函数
 24 |   setNodeData
 25 | 
 26 |   // 移动节点数据函数
 27 |   moveNode
 28 | 
 29 |   // 通过keys创建一个多层级对象
 30 |   createKeyData(keys, value, obj = {}) {
 31 |     if (keys.length === 1) {
 32 |       obj[keys[0]] = value
 33 |     } else {
 34 |       obj[keys[0]] = {}
 35 |       this.createKeyData(keys.slice(1), value, obj[keys[0]])
 36 |     }
 37 |     return obj
 38 |   }
 39 | 
 40 |   // 撤销
 41 |   revoke = () => {
 42 |     const current = this.current()
 43 |     if (!current) {
 44 |       return
 45 |     }
 46 |     const { value, type } = current
 47 |     switch (type) {
 48 |       case 'edit': {
 49 |         this.setNodeData?.(value[3], this.createKeyData(value[0], value[1]), true)
 50 |         break
 51 |       }
 52 |       case 'insert': {
 53 |         this.moveNode?.(value[0], false, true)
 54 |         break
 55 |       }
 56 |       case 'insert-template': {
 57 |         this.moveNode?.(value[0], value[1].length, true)
 58 |         break
 59 |       }
 60 |       case 'move': {
 61 |         this.moveNode?.(value[1], value[0], true)
 62 |         break
 63 |       }
 64 |       case 'delete': {
 65 |         this.moveNode?.([value[1]], value[0], true)
 66 |         break
 67 |       }
 68 |     }
 69 |     this.backSetp++
 70 |     this.actionCallback()
 71 |   }
 72 | 
 73 |   // 恢复
 74 |   recover = () => {
 75 |     const next = this.next()
 76 |     if (!next) {
 77 |       return
 78 |     }
 79 |     const { value, type } = next
 80 |     switch (type) {
 81 |       case 'edit': {
 82 |         this.setNodeData?.(value[3], this.createKeyData(value[0], value[2]), true)
 83 |         break
 84 |       }
 85 |       case 'insert': {
 86 |         this.moveNode?.([value[1]], value[0], true)
 87 |         break
 88 |       }
 89 |       case 'insert-template': {
 90 |         this.moveNode?.(value[1], value[0], true)
 91 |         break
 92 |       }
 93 |       case 'move': {
 94 |         this.moveNode?.(value[0], value[1], true)
 95 |         break
 96 |       }
 97 |       case 'delete': {
 98 |         this.moveNode?.(value[0], false, true)
 99 |         break
100 |       }
101 |     }
102 |     this.backSetp--
103 |     this.actionCallback()
104 |   }
105 | 
106 |   /**
107 |    * 页面卸载的时候调用销毁方法
108 |    */
109 |   destroy() {
110 |     keyboardEvent.remove('z', this.revoke, true)
111 |     keyboardEvent.remove('z', this.recover, true, true)
112 |     this.actionFcuns = []
113 |   }
114 | 
115 |   setTools(nodes, setNodeData, moveNode) {
116 |     this.nodes = nodes
117 |     this.setNodeData = setNodeData
118 |     this.moveNode = moveNode
119 |   }
120 | 
121 |   // 获取当前指针
122 |   pointer() {
123 |     return this.list.length - this.backSetp
124 |   }
125 | 
126 |   // 当前要做做的记录
127 |   current() {
128 |     return this.list[this.pointer() - 1]
129 |   }
130 | 
131 |   // 下一个要操作的记录 用于前进
132 |   next() {
133 |     return this.list[this.pointer()]
134 |   }
135 | 
136 |   actionFcuns = []
137 |   onAction(func) {
138 |     this.actionFcuns.push(func)
139 |   }
140 | 
141 |   actionCallback() {
142 |     this.actionFcuns.forEach(func => func({
143 |       back: this.list.length > this.backSetp,
144 |       going: this.backSetp > 0
145 |     }))
146 |   }
147 | 
148 |   // 插入记录
149 |   insert(type, value) {
150 |     // 删除后面的记录
151 |     this.list.splice(this.pointer())
152 |     this.backSetp = 0
153 | 
154 |     if (type === 'edit') {
155 |       const current = this.current()
156 |       // 多次重复修改一个属性，将其记录为一次修改记录
157 |       if (current?.value?.[3] === value[3] && current?.value?.[0]?.join() === value[0].join()) {
158 |         current.value[2] = value[2]
159 |         return
160 |       }
161 |     } else if (type === 'insert') {
162 |       value[1] = deepCopy(value[1])
163 |     } else if (type === 'insert-template') {
164 |       value[1] = deepCopy(value[1])
165 |     }
166 |     this.list.push({
167 |       type,
168 |       value
169 |     })
170 |     this.actionCallback()
171 |   }
172 | }
173 | 


--------------------------------------------------------------------------------
/design/util/node.js:
--------------------------------------------------------------------------------
  1 | import { styled, getComponentConfig } from '../../render'
  2 | 
  3 | /**
  4 |  * 组件名称转换
  5 |  * @param {*} nodeName
  6 |  * @returns
  7 |  */
  8 | const getItemName = nodeName => nodeName.split('-').map(name => name.replace(name[0], name[0].toUpperCase())).join('')
  9 | 
 10 | /**
 11 |  * 节点中用到的不重复的组件名称列表
 12 |  * @param {*} nodes
 13 |  * @param {*} nodeNames
 14 |  * @returns
 15 |  */
 16 | export const getNodesNames = (nodes, nodeNames = []) => {
 17 |   nodes.forEach(item => {
 18 |     if (!nodeNames.includes(item.nodeName)) {
 19 |       nodeNames.push(item.nodeName)
 20 |     }
 21 |     if (item.child?.length) {
 22 |       getNodesNames(item.child, nodeNames)
 23 |     }
 24 |   })
 25 |   return nodeNames
 26 | }
 27 | 
 28 | /**
 29 |  * 获取组件框架
 30 |  * @param {*} comps 用到的组件列表
 31 |  * @param {*} type 类型 function 函数组件 class 类组件
 32 |  * @param {*} jsx 组件JSX内容
 33 |  */
 34 | const getBase = (comps = [], type, jsx) => {
 35 |   return `import React${type === 'class' ? ', { Component }' : ''} from 'react'
 36 | ${jsx.indexOf('Taro.') !== -1 ? 'import Taro from \'@tarojs/taro\'\r\n' : ''}import { getComponentList, TopView } from 'taro-design'
 37 | 
 38 | const { ${comps.map(getItemName).join(', ')} } = getComponentList([${comps.map(name => `'${name}'`).join(', ')}])
 39 | 
 40 | export default ${type === 'function'
 41 |       ? `() => {
 42 | 
 43 |   return <TopView>
 44 | ${jsx}
 45 |   </TopView>
 46 | }`
 47 |       : `class TaroDesignPage extends Component {
 48 | 
 49 |   render() {
 50 |     return <TopView>
 51 | ${jsx}
 52 |     </TopView>
 53 |   }
 54 | }`
 55 |     }
 56 | `
 57 | }
 58 | 
 59 | /**
 60 |  * 获取空格
 61 |  * @param {*} type
 62 |  * @param {*} level
 63 |  * @returns
 64 |  */
 65 | const getSpace = (type, level) => {
 66 |   let base = ''
 67 |   for (let i = 0, l = level + (type === 'function' ? 2 : 3); i < l; i++) {
 68 |     base += '  '
 69 |   }
 70 |   return base
 71 | }
 72 | 
 73 | const toJsxItem = (
 74 |   { nodeName, style, child, tplAlias, key, forceUpdate, ...props },
 75 |   { index, length },
 76 |   type,
 77 |   globalClass,
 78 |   cssSeparate,
 79 |   level,
 80 |   cssList
 81 | ) => {
 82 |   // 当前空格缩进
 83 |   const space = getSpace(type, level)
 84 |   // 是否是最后一个
 85 |   const isLast = index === length - 1
 86 |   // 转换后的组件名称
 87 |   const name = getItemName(nodeName)
 88 |   if (getComponentConfig(nodeName).childFunc) {
 89 |     return space + '{/* ' + name + ' 组件定义了子元素为函数，不支持导出为JSX */}' + (isLast ? '' : '\r\n')
 90 |   }
 91 | 
 92 |   let { style: styleOriginal, className, css } = styled.styleTransform(style, globalClass, cssSeparate, true)
 93 | 
 94 |   // css和样式处理
 95 |   if (css && !cssList[css]) {
 96 |     cssList[css] = 'class-' + (++cssList.index)
 97 |   }
 98 |   if (css) {
 99 |     className += (className ? ' ' : '') + cssList[css]
100 |   }
101 | 
102 |   const styleRes = cssSeparate
103 |     ? ''
104 |     : JSON
105 |       .stringify(styleOriginal)
106 |       // 尺寸函数转换
107 |       .replace(/\"Taro.pxTransform\((\d{1,})\)\"/g, (res, val) => 'Taro.pxTransform(' + val + ')')
108 |       // 将双引号改为单引号
109 |       .replace(/\"([a-zA-Z]{1,})\":\"([a-zA-Z-#,\(\)]{1,})\"/g, (res, val1, val2) => `"${val1}":'${val2}'`)
110 |       // 增加属性之间的空格 和 名称的引号
111 |       .replace(/,\"([a-zA-Z]{1,})\":/g, (res, val) => ', ' + val + ': ')
112 |       // 去除名称的引号
113 |       .replace(/\"([a-zA-Z]{1,})\":/g, (res, val) => val + ': ')
114 | 
115 |   const start = [
116 |     space,
117 |     // 标识
118 |     '<' + name,
119 |     // 类名
120 |     ...(className ? [' className=\'' + className + '\''] : []),
121 |     // 样式
122 |     ...(!cssSeparate && styleOriginal && Object.keys(styleOriginal).length ? [' style={{ ' + styleRes.substr(1, styleRes.length - 2) + ' }}'] : []),
123 |     // 属性
124 |     Object.keys(props).map(k => {
125 |       const keyType = typeof props[k]
126 |       return ` ${k}=${keyType === 'object'
127 |         ? `{${JSON.stringify(props[k])}}`
128 |         : keyType === 'number' || keyType === 'boolean'
129 |           ? `{${props[k]}}`
130 |           : `'${props[k]}'`}`
131 |     }).join(''),
132 |     // 结尾
133 |     child?.length ? '>' : ' />'
134 |   ].join('')
135 |   const center = child?.length ? nodeToJsx(child, type, globalClass, cssSeparate, level + 1, cssList) : ''
136 |   const end = space + (child?.length ? `</${name}>` : '')
137 |   return start + (center ? ('\r\n' + center + '\r\n' + end) : '') + (isLast ? '' : '\r\n')
138 | }
139 | 
140 | /**
141 |  * 将节点转换为jsx数据
142 |  * @param {*} nodes 节点
143 |  * @param {*} type 组件类型 函数和类 function class
144 |  * @param {*} globalClass 使用全局样式
145 |  * @param {*} cssSeparate 样式分离
146 |  * @param {*} level
147 |  * @returns
148 |  */
149 | export const nodeToJsx = (nodes, type = 'function', globalClass, cssSeparate, level = 0, css = { index: 0 }) => {
150 |   const jsx = nodes.map((node, index) => toJsxItem(node, {
151 |     index,
152 |     length: nodes.length
153 |   }, type, globalClass, cssSeparate, level, css)).join('')
154 |   if (level === 0) {
155 |     return {
156 |       jsx: getBase(getNodesNames(nodes), type, jsx),
157 |       css: Object.keys(css).filter(key => key !== 'index').map(value => `.${css[value]} ${value}`).join('\n\r')
158 |     }
159 |   }
160 |   return jsx
161 | }
162 | 


--------------------------------------------------------------------------------
/design/util/styled.d.ts:
--------------------------------------------------------------------------------
 1 | declare namespace styled {
 2 |   interface StyleGroupItem {
 3 |     /** 分组中文名称 */
 4 |     name: string
 5 |     /** 分组包含的style */
 6 |     styles: string[]
 7 |   }
 8 | }
 9 | 
10 | /**
11 |  * 定义了样式的分组信息
12 |  */
13 | export const styleGroup: styled.StyleGroupItem[]
14 | 
15 | /**
16 |  * 定义了某个组件支持的样式列表
17 |  */
18 | export const styleNode: {
19 |   /** View组件支持的style */
20 |   view: string[]
21 |   /** Text组件支持的style */
22 |   text: string[]
23 |   /** Image组件支持的style */
24 |   image: string[]
25 |   /** 定义的其他组件支持的style */
26 |   [propName: string]: string[]
27 | }
28 | 


--------------------------------------------------------------------------------
/design/util/styled.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 样式类型分组
 3 |  * 不同类型的组件拥有不同的样式
 4 |  */
 5 | export const styleGroup = [
 6 |   {
 7 |     name: '弹性盒子',
 8 |     styles: [
 9 |       'flexDirection',
10 |       'flexWrap',
11 |       'alignItems',
12 |       'justifyContent',
13 |       'alignContent'
14 |     ]
15 |   },
16 |   {
17 |     name: '弹性盒子项目',
18 |     styles: [
19 |       'flexGrow',
20 |       'flexShrink',
21 |       'alignSelf'
22 |     ]
23 |   },
24 |   {
25 |     name: '布局',
26 |     styles: [
27 |       'width',
28 |       'height',
29 |       ['最大最小尺寸', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth'],
30 |       ['padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
31 |       ['margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
32 |       ['position', 'top', 'right', 'bottom', 'left', 'zIndex'],
33 |     ]
34 |   },
35 |   {
36 |     name: '字体',
37 |     styles: [
38 |       'color',
39 |       'fontSize',
40 |       'textAlign',
41 |       'lineHeight',
42 |       'fontWeight',
43 |       ['更多', 'fontFamily', 'fontStyle', 'letterSpacing', 'textDecorationLine', 'textTransform']
44 |     ]
45 |   },
46 |   {
47 |     name: '外观',
48 |     styles: [
49 |       'backgroundColor',
50 |       'borderStyle',
51 |       ['borderWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'borderBottomWidth'],
52 |       ['borderColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'borderBottomColor'],
53 |       ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'],
54 |       'overflow',
55 |       'opacity'
56 |     ]
57 |   }
58 | ]
59 | 
60 | /**
61 |  * 定义节点支持的style
62 |  */
63 | export const styleNode = {
64 |   // 布局组件通用
65 |   view: ['width', 'height', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'opacity', 'backgroundColor', 'overflow', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'borderStyle', 'borderWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'borderBottomWidth', 'borderColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'borderBottomColor', 'borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'position', 'left', 'right', 'top', 'bottom', 'zIndex', 'flexDirection', 'flexWrap', 'alignItems', 'justifyContent', 'alignContent', 'flex', 'flexGrow', 'flexShrink', 'alignSelf'],
66 |   // 文本 输入框类组件通用
67 |   text: ['width', 'height', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'opacity', 'backgroundColor', 'overflow', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'borderStyle', 'borderWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'borderBottomWidth', 'borderColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'borderBottomColor', 'position', 'left', 'right', 'top', 'bottom', 'zIndex', 'color', 'fontSize', 'lineHeight', 'fontWeight', 'fontFamily', 'fontStyle', 'letterSpacing', 'textAlign', 'textDecorationLine', 'textTransform', 'flex', 'flexGrow', 'flexShrink', 'alignSelf'],
68 |   // 图片专用
69 |   image: ['width', 'height', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'opacity', 'backgroundColor', 'overflow', 'margin', 'marginLeft', 'marginRight', 'marginTop', 'marginBottom', 'borderStyle', 'borderWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth', 'borderBottomWidth', 'borderColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'borderBottomColor', 'position', 'left', 'right', 'top', 'bottom', 'zIndex', 'flex', 'flexGrow', 'flexShrink', 'alignSelf']
70 | }
71 | 


--------------------------------------------------------------------------------
/doc/customComponent.md:
--------------------------------------------------------------------------------
  1 | # 把自己的组件放在TaroDesign中运行
  2 | 你可以简单的开发一个组件，通过TaroDesign提供的注册函数，实现在其中运行，包括编辑器和运行时
  3 | 
  4 | ## 定义组件
  5 | 假设你有一个下面这样的组件，内容你可以自己掌控
  6 | ```jsx
  7 | export const Custom = () => {
  8 |   return <View>
  9 |     <Text>这是个自定义组件</Text>
 10 |   </View>
 11 | }
 12 | ```
 13 | 在app.jsx，或者你使用了运行时的页面中，将这个组件添加到TaroDesign
 14 | 
 15 | ```jsx
 16 | import { defineComponent } from 'taro-design'
 17 | import { Custom } from '你的组件所在位置'
 18 | 
 19 | defineComponent('author-custom', Custom)
 20 | ```
 21 | 如果你想一次性导入多个组件，可以用`defineComponents`方法
 22 | ```jsx
 23 | import { defineComponents } from 'taro-design'
 24 | import { Custom, Custom2 } from '你的组件所在位置'
 25 | 
 26 | defineComponents({
 27 |   'author-custom': Custom,
 28 |   'author-custom2': Custom2
 29 | })
 30 | ```
 31 | 在上面的例子中我们看到给组件定义了名称：`author-custom`，当你定义名称时请遵循`作者名-组件名`的形式，全部采用小写进行定义，这名称必须是唯一的
 32 | 
 33 | ## 定义编辑器表单
 34 | 你经过上面的操作后你的组件可以正常运行在运行时下了，但是在编辑器上还不能使用你这个组件，要在编辑器上使用这个组件，你还需要定义编辑器需要的参数。  
 35 | 编辑器的参数定义请不要放在`app.jsx`文件里面，因为这样会导致编辑器和运行时混乱，你应该在你导入编辑器组件的地方定义，像下面这样。
 36 | 
 37 | ```jsx
 38 | import React from 'react'
 39 | import { Design, defineComponentConfig } from 'taro-design/design'
 40 | import { componentCate } from 'taro-design/design/min'
 41 | import { TopView } from 'taro-design'
 42 | 
 43 | defineComponentConfig('author-custom', {
 44 |   // 节点中文名称
 45 |   text: '自定义组件',
 46 |   // 节点所在分类
 47 |   cate: componentCate.base,
 48 | })
 49 | 
 50 | export default () => {
 51 |   return <TopView>
 52 |     <Design />
 53 |   </TopView>
 54 | }
 55 | ```
 56 | 
 57 | 完成上面的操作你就能在基础分类下看到一个名称为`自定义组件`的组件，将这个组件拖到编辑区域即可看到效果。
 58 |   
 59 | 如果你想一次定义多个节点可以使用下面的函数定义
 60 | 
 61 | ```jsx
 62 | import { defineComponentConfigs } from 'taro-design/design/min'
 63 | 
 64 | defineComponentConfigs({
 65 |   'author-custom': {},
 66 |   'author-custom2': {},
 67 | })
 68 | ```
 69 | 一个组件很多情况下都会有一个或多个属性样式，比如下面的常见的`children, style, text, show`
 70 | ```jsx
 71 | export const Custom = ({ children, style, text, show }) => {
 72 |   return <View style={style}>
 73 |     {show && <Text>{text}</Text>}
 74 |     {children}
 75 |   </View>
 76 | }
 77 | ```
 78 | 那么你在定义参数的时候需要加上面这些参数
 79 | ```jsx
 80 | import React from 'react'
 81 | import { Design, defineComponentConfig } from 'taro-design/design'
 82 | import { componentCate, getBaseAttrForm, FormCreate, styleNode } from 'taro-design/design/min'
 83 | 
 84 | import { TopView } from 'taro-design'
 85 | 
 86 | defineComponentConfig('author-custom', {
 87 |   // 节点中文名称
 88 |   text: '自定义组件',
 89 |   // 节点所在分类
 90 |   cate: componentCate.base,
 91 |   // 组件默认属性
 92 |   attr() {
 93 |     return {
 94 |       // 当你使用了children，需要返回一个child为空
 95 |       child: [],
 96 |       // 默认样式 请给他一个默认空对象 或者你需要的默认样式
 97 |       style: {},
 98 |       // 其他属性根据你的需求指定默认值 你也可以不指定，默认不会给组件设置这个值
 99 |       show: false
100 |     }
101 |   },
102 |   // 创建编辑这些属性需要用到的表单
103 |   // 下面的函数你可以直接阅读源码获得帮助
104 |   // 返回编辑表单实际就是用封装的函数创建了一个TaroDesign运行时的json数据
105 |   form() {
106 |     return getBaseAttrForm({
107 |       text: '样式',
108 |       name: 'style',
109 |       styles: styleNode.view
110 |     }, [
111 |       FormCreate.input('文本', 'text'),
112 |       FormCreate.switch('显示', 'show'),
113 |     ])
114 |   }
115 |   // 子节点 当你这个节点调用了children时，必须定义此属性，默认值定义为空对象，反之请勿定义此属性
116 |   child: {
117 |     // 定义可以容纳的子节点的最大值 未定义则不限制
118 |     max: 99,
119 |     // 如果你需要禁止一些组件被拖到子节点，请配置这个选项
120 |     disable: {
121 |       // 组件
122 |       comp: ['swiper-item'],
123 |       // 组件判断是否是包含这些组件还是不包含这些组件
124 |       // 为true表示白名单机制，否则是黑名单机制
125 |       contain: true
126 |     }
127 |   }
128 | })
129 | 
130 | export default () => {
131 |   return <TopView>
132 |     <Design />
133 |   </TopView>
134 | }
135 | ```
136 | 通过上面的一顿操作，你就能在选中这个组件时获得编辑表单了。
137 | 
138 | ## 新增分类
139 | 
140 | 默认有基础和表单这两个分类，当你组件过多时你可以自定义增加一些分类
141 | ```jsx
142 | import { defineComponentCate } from 'taro-design/design/min'
143 | 
144 | defineComponentCate('cate', '新分类')
145 | 
146 | defineComponentConfig('author-custom', {
147 |   // 节点中文名称
148 |   text: '自定义组件',
149 |   // 节点所在分类 设置为上面定义的新分类
150 |   cate: componentCate.cate,
151 | })
152 | 
153 | ```
154 | ## 更多高级功能等待更新或者阅读源码获得支持
155 | 


--------------------------------------------------------------------------------
/doc/icon.md:
--------------------------------------------------------------------------------
 1 | # 自定义图标库
 2 | 
 3 | 当你你在阿里的[iconfont](https://www.iconfont.cn/)有一个图标库，你就可以将这个图标库天加到项目中来使用，只需要将其定义即可。
 4 | 
 5 | ```jsx
 6 | import { defineIcon } from 'taro-design'
 7 | import icons from '你的人图标库'
 8 | 
 9 | defineIcon('name', icons)
10 | 
11 | ```
12 | 导入的文件内容参考 `taro-design/render/static/icon/icon.js`  
13 | 定义后你好需要在app.jsx里面全局导入你的样式文件
14 | 


--------------------------------------------------------------------------------
/doc/images/image1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/doc/images/image1.png


--------------------------------------------------------------------------------
/doc/images/qq.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ShaoGongBra/taro-design/0e8a41aed325ee3be7e7274ca53c1292fd4373de/doc/images/qq.png


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | const gulp = require('gulp')
 2 | const typedoc = require("gulp-typedoc");
 3 | 
 4 | gulp.task("typedoc", function () {
 5 |   return gulp.src(["index.d.ts"]).pipe(
 6 |     typedoc({
 7 |       out: "./docs/",
 8 |       name: "TaroDesign",
 9 |       categorizeByGroup: false,
10 |       disableSources: true,
11 |       hideGenerator: true
12 |     })
13 |   );
14 | });
15 | 


--------------------------------------------------------------------------------
/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from './components'
2 | export * from './render'
3 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | // 初始化组件
2 | import './render/init'
3 | 
4 | export * from './render'
5 | 
6 | export * from './components'
7 | 
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "taro-design",
 3 |   "version": "1.0.43",
 4 |   "description": "跨端页面设计器，支持小程序、RN、h5。做到了运行时和编辑时分离。可以自定义组件用于编辑和使用。",
 5 |   "main": "index.js",
 6 |   "author": "908634674@qq.com",
 7 |   "license": "MIT",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+https://github.com/ShaoGongBra/taro-design.git"
11 |   },
12 |   "bugs": {
13 |     "url": "https://github.com/ShaoGongBra/taro-design/issues"
14 |   },
15 |   "homepage": "https://github.com/ShaoGongBra/taro-design#readme",
16 |   "dependencies": {
17 |     "react-dnd": "^14.0.4",
18 |     "react-dnd-html5-backend": "14.0.2",
19 |     "react-syntax-highlighter": "^15.4.4",
20 |     "taro-tools": "^1.0.20"
21 |   },
22 |   "devDependencies": {
23 |     "gulp": "^4.0.2",
24 |     "gulp-typedoc": "^3.0.2",
25 |     "typedoc": "^0.22.10",
26 |     "typedoc-plugin-no-inherit": "^1.3.1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/render/ComponentItem.d.ts:
--------------------------------------------------------------------------------
  1 | import { Component, ComponentType, LegacyRef, CSSProperties } from 'react'
  2 | import { design } from '../design/components/edit'
  3 | 
  4 | 
  5 | declare namespace ComponentItem {
  6 |   interface ComponentConfig {
  7 |     /** 是否是一个表单组件 */
  8 |     isForm?: boolean
  9 |     /**
 10 |      * 当你定义了这是一个表单组件 就需要为此表单提供一个返回默认值的函数
 11 |      * 或者你可以定义一个原始值作为默认值
 12 |      */
 13 |     defaultValue?: (item: design.Node) => any | string | number | boolean
 14 |     /**
 15 |      * 创建子组件是否用函数进行创建
 16 |      * 当组件指定了此参数，则你调用 children的时候应该这样用，此时children是一个函数，你可以在此处截断child的渲染，传入自己的child
 17 |      * 此用法请慎用，可能在后续的更新中被删除
 18 |      * ```jsx
 19 |      * export default ({ children, _child }) => {
 20 |      *
 21 |      *  return <>
 22 |      *    {children({ nodes: _child })}
 23 |      *  </>
 24 |      * }
 25 |      * ```
 26 |      */
 27 |     childFunc?: boolean
 28 |     /**
 29 |      * 当子组件发生更新是更新当前组件
 30 |      * 为了提升性能，编辑模式时默认只会刷新正在编辑的组件，但有的时候子组件的内容可能会影响到父组件，此时就打开此选项
 31 |      */
 32 |     childForceUpdateSelf?: boolean
 33 | 
 34 |     /**
 35 |      * 当前组件发生更新时是否更新父组件
 36 |      * 为了提升性能，编辑模式时默认只会刷新正在编辑的组件，但有的时候子组件的内容可能会影响到父组件，此时就打开此选项
 37 |      * 此选项和上面的 childForceUpdateSelf 的功能一样，只是定义的位置不一致
 38 |      */
 39 |     parentForceUpdate?: boolean
 40 | 
 41 |     /**
 42 |      * 当前组件更新时，是否更新子组件
 43 |      */
 44 |     childForceUpdate?: boolean
 45 |   }
 46 | }
 47 | 
 48 | /**
 49 |  * 组件索引
 50 |  */
 51 | export const componentList: {
 52 |   [propName: string]: Component
 53 | }
 54 | 
 55 | interface ComponentItemProps {
 56 |   /** 是否处于编辑模式 */
 57 |   edit: boolean
 58 |   /** 父级节点 */
 59 |   parentNode: design.Node
 60 |   /**
 61 |    * 用于创建页面的组件 默认调用当前路径下的Create组件创建
 62 |    */
 63 |   Create?: Component
 64 |   /** 赋值在组件上的属性 */
 65 |   attr: {
 66 |     /** 组件标识 */
 67 |     nodeName: string
 68 |     /** 组件唯一key */
 69 |     key: string
 70 |     /** 是否隐藏组件 */
 71 |     hidden?: boolean
 72 |     /** 子节点 */
 73 |     child?: design.Node[]
 74 |     /** 组件样式 */
 75 |     style?: CSSProperties
 76 |     /** 组件其他属性 */
 77 |     [propName: string]: any
 78 |   }
 79 |   ref?: LegacyRef<any>
 80 | }
 81 | 
 82 | /**
 83 |  * 用于创建指定组件的组件
 84 |  */
 85 | export const ComponentItem: ComponentType<ComponentItemProps>
 86 | 
 87 | /**
 88 |  * 判断是不是一个合法的节点
 89 |  * @param nodeName 节点
 90 |  */
 91 | export function isComponent(nodeName: string): boolean
 92 | 
 93 | /**
 94 |  * 获取组件配置
 95 |  * @param nodeName 节点
 96 |  */
 97 | export function getComponentConfig(nodeName: string): ComponentItem.ComponentConfig
 98 | 
 99 | /**
100 |  * 获取指定的一系列节点转换为大驼峰命名后的结果
101 |  * @param nodeNames 指定要获取的节点 如果不传入此字段则返回所有组件
102 |  * @example
103 |  * ```jsx
104 |  * const { View, Text } = getComponentList(['view', 'text'])
105 |  *
106 |  * return <View>
107 |  *   <Text text='文本内容'></Text>
108 |  * </View>
109 |  * ```
110 |  */
111 | export function getComponentList(nodeName?: string[]): {
112 |   [propName: string]: Component
113 | }
114 | 
115 | /**
116 |  * 定义一个组件
117 |  * @param key 组件标识
118 |  * @param component 组件
119 |  */
120 | export function defineComponent(key: string, component: Component): void
121 | 
122 | /**
123 |  * 定义多个组件
124 |  * @param data 多个组件组成的对象
125 |  */
126 | export function defineComponents(data: {
127 |   [propName: string]: Component
128 | }): void
129 | 


--------------------------------------------------------------------------------
/render/ComponentItem.jsx:
--------------------------------------------------------------------------------
  1 | import { Component } from 'react'
  2 | import { styled } from './util/styled'
  3 | import CreateDefault from './Create'
  4 | import './static/base.css'
  5 | 
  6 | /**
  7 |  * 组件索引
  8 |  */
  9 | export const componentList = {}
 10 | 
 11 | /**
 12 |  * 组件更新函数
 13 |  * @param {*} attr
 14 |  */
 15 | const compUpdate = function (attr) {
 16 |   this.forceUpdate()
 17 |   const { parentNode } = this.props
 18 |   const Item = componentList[attr.nodeName]
 19 |   const parentItem = componentList[parentNode?.nodeName]
 20 |   // 让父组件更新
 21 |   // 在当前组件定义 parentForceUpdate 或者在父组件定义 childForceUpdateSelf
 22 |   if (Item?.designConfig?.parentForceUpdate || parentItem?.designConfig?.childForceUpdateSelf) {
 23 |     parentNode?.forceUpdate?.()
 24 |   }
 25 | 
 26 |   // 让子组件更新
 27 |   if (Item?.designConfig?.childForceUpdate) {
 28 |     const { child } = attr
 29 |     child.forEach(item => item.forceUpdate?.())
 30 |   }
 31 | }
 32 | 
 33 | export default class ComponentItem extends Component {
 34 | 
 35 |   componentDidMount() {
 36 |     const { attr } = this.props
 37 |     if (!attr.forceUpdate) {
 38 |       attr.forceUpdate = () => compUpdate.call(this, attr)
 39 |     }
 40 |   }
 41 | 
 42 |   componentWillUnmount() {
 43 |     const { attr } = this.props
 44 |     if (attr.forceUpdate) {
 45 |       delete attr.forceUpdate
 46 |     }
 47 |   }
 48 | 
 49 |   render() {
 50 |     const { attr, Create = CreateDefault, parentNode, edit = false } = this.props
 51 |     const { hidden, nodeName, child, style, key, ...otherItem } = attr
 52 | 
 53 |     if (hidden) {
 54 |       return null
 55 |     }
 56 | 
 57 |     const Item = componentList[nodeName]
 58 | 
 59 |     if (!Item) {
 60 |       console.log(nodeName + ' 组件未定义')
 61 |       return null
 62 |     }
 63 | 
 64 |     const { style: styleRes, className } = styled.styleTransform(style, true)
 65 | 
 66 |     return <Item {...otherItem} style={styleRes} className={className} _key={key} _childNodes={child} _parentNode={parentNode} _edit={edit}>
 67 |       {(child && child.length > 0 || Item.designConfig?.childFunc) && (
 68 |         Item.designConfig?.childFunc ?
 69 |           ((slotProps = {}) => (child || slotProps.nodes) && <Create
 70 |             nodes={child}
 71 |             compName={nodeName}
 72 |             {...slotProps}
 73 |             parentNode={attr}
 74 |           />) :
 75 |           <Create
 76 |             nodes={child}
 77 |             compName={nodeName}
 78 |             parentNode={attr}
 79 |           />
 80 |       )}
 81 |     </Item>
 82 |   }
 83 | }
 84 | 
 85 | /**
 86 |  * 是不是一个合法的节点
 87 |  * @param {string} nodeName 节点
 88 |  */
 89 | export const isComponent = nodeName => !!componentList[nodeName]
 90 | 
 91 | /**
 92 |  * 获取组件配置
 93 |  * @param {string} nodeName 节点
 94 |  * @returns
 95 |  */
 96 | export const getComponentConfig = nodeName => componentList[nodeName]?.designConfig || {}
 97 | 
 98 | /**
 99 |  * 获取指定的一系列节点转换为大驼峰命名后的结果
100 |  * @param {*} nodeNames 指定要获取的节点 如果不传入此字段则返回所有组件
101 |  */
102 | export const getComponentList = nodeNames => {
103 |   return Object.fromEntries(
104 |     (nodeNames ? nodeNames : Object.keys(componentList))
105 |       .map(key => [key.split('-').map(name => name.replace(name[0], name[0].toUpperCase())).join(''), componentList[key]])
106 |   )
107 | }
108 | 
109 | /**
110 |  * 定义一个组件
111 |  * @param {String} key 组件标识
112 |  * @param {Component} value 组件
113 |  */
114 | export const defineComponent = (key, value) => {
115 |   componentList[key] = value
116 | }
117 | 
118 | /**
119 |  * 定义多个组件
120 |  * @param {Object} data 一个由key: 组件组成的对象
121 |  */
122 | export const defineComponents = (data) => {
123 |   for (const key in data) {
124 |     if (Object.hasOwnProperty.call(data, key)) {
125 |       componentList[key] = data[key]
126 |     }
127 |   }
128 | }
129 | 


--------------------------------------------------------------------------------
/render/Create.d.ts:
--------------------------------------------------------------------------------
 1 | import { ComponentType, LegacyRef } from 'react'
 2 | import { design } from '../design/components/edit'
 3 | 
 4 | interface CreateProps {
 5 |   /** 节点列表 */
 6 |   nodes: design.Node[]
 7 |   /** ref引用 */
 8 |   ref?: LegacyRef<any>
 9 | }
10 | 
11 | /**
12 |  * 用于渲染节点的组件
13 |  */
14 | export const Create: ComponentType<CreateProps>
15 | 


--------------------------------------------------------------------------------
/render/Create.jsx:
--------------------------------------------------------------------------------
 1 | import { Component } from 'react'
 2 | import ComponentItem from './ComponentItem'
 3 | 
 4 | class Create extends Component {
 5 | 
 6 |   shouldComponentUpdate(nextProps) {
 7 |     const { nodes } = this.props
 8 |     if (nextProps.nodes === nodes && nextProps.nodes.length === nodes.length) {
 9 |       const mark = nextProps.nodes.map(item => item.key + '-' + (item.hidden ? '1' : '0')).join('|')
10 |       if (this.mark === mark) {
11 |         return false
12 |       }
13 |       this.mark = mark
14 |     }
15 |     return true
16 |   }
17 | 
18 |   render() {
19 |     const { nodes = [], parentNode } = this.props
20 |     return nodes.map((item, index) => <ComponentItem
21 |       key={item.key}
22 |       index={index}
23 |       attr={item}
24 |       parentNode={parentNode}
25 |     />)
26 |   }
27 | }
28 | 
29 | export default Create
30 | 


--------------------------------------------------------------------------------
/render/index.d.ts:
--------------------------------------------------------------------------------
1 | export * from './ComponentItem'
2 | export * from './Create'
3 | export * from './util/styled'
4 | export * from './util/node'
5 | export * from './util/icon'
6 | 


--------------------------------------------------------------------------------
/render/index.js:
--------------------------------------------------------------------------------
 1 | export { default as ComponentItem, componentList, defineComponent, defineComponents, isComponent, getComponentConfig, getComponentList } from './ComponentItem'
 2 | export { default as Create } from './Create'
 3 | 
 4 | export { styled, styles, styleType, styleConfig } from './util/styled'
 5 | 
 6 | export * from './util/context'
 7 | 
 8 | export * from './util/node'
 9 | 
10 | export * from './util/icon'
11 | 


--------------------------------------------------------------------------------
/render/init.js:
--------------------------------------------------------------------------------
1 | import comps from '../components/design'
2 | import { defineComponents } from './ComponentItem'
3 | import { defineIcon } from './util/icon'
4 | import icon from './static/icon/icon'
5 | import './static/icon/icon.css'
6 | 
7 | defineComponents(comps)
8 | defineIcon('icon', icon)
9 | 


--------------------------------------------------------------------------------
/render/static/base.css:
--------------------------------------------------------------------------------
  1 | /*  #ifdef rn  */
  2 | /* overflow */
  3 | .overflow-hidden {
  4 |   overflow: hidden;
  5 | }
  6 | 
  7 | /* 定位 */
  8 | .absolute {
  9 |   position: absolute;
 10 | }
 11 | 
 12 | .inset-0 {
 13 |   top: 0;
 14 |   bottom: 0;
 15 |   right: 0;
 16 |   left: 0;
 17 | }
 18 | 
 19 | .top-0 {
 20 |   top: 0;
 21 | }
 22 | 
 23 | .right-0 {
 24 |   right: 0;
 25 | }
 26 | 
 27 | .bottom-0 {
 28 |   bottom: 0;
 29 | }
 30 | 
 31 | .left-0 {
 32 |   left: 0;
 33 | }
 34 | 
 35 | /* z-index */
 36 | 
 37 | .z-0 {
 38 |   z-index: 0;
 39 | }
 40 | .z-1 {
 41 |   z-index: 1;
 42 | }
 43 | .z-2 {
 44 |   z-index: 2;
 45 | }
 46 | .z-3 {
 47 |   z-index: 3;
 48 | }
 49 | .z-4 {
 50 |   z-index: 4;
 51 | }
 52 | .z-5 {
 53 |   z-index: 5;
 54 | }
 55 | .z-6 {
 56 |   z-index: 6;
 57 | }
 58 | .z-7 {
 59 |   z-index: 7;
 60 | }
 61 | .z-8 {
 62 |   z-index: 8;
 63 | }
 64 | .z-9 {
 65 |   z-index: 9;
 66 | }
 67 | .z-10 {
 68 |   z-index: 10;
 69 | }
 70 | 
 71 | /* flex */
 72 | .flex-row {
 73 |   flex-direction: row;
 74 | }
 75 | .flex-row-reverse {
 76 |   flex-direction: row-reverse;
 77 | }
 78 | .flex-col-reverse {
 79 |   flex-direction: column-reverse;
 80 | }
 81 | 
 82 | .flex-wrap {
 83 |   flex-wrap: wrap;
 84 | }
 85 | .flex-wrap-reverse {
 86 |   flex-wrap: wrap-reverse;
 87 | }
 88 | 
 89 | .flex-grow {
 90 |   flex-grow: 1;
 91 | }
 92 | 
 93 | .flex-shrink {
 94 |   flex-shrink: 0;
 95 | }
 96 | 
 97 | .justify-end {
 98 |   justify-content: flex-end;
 99 | }
100 | .justify-center {
101 |   justify-content: center;
102 | }
103 | .justify-between {
104 |   justify-content: space-between;
105 | }
106 | .justify-around {
107 |   justify-content: space-around;
108 | }
109 | .justify-evenly {
110 |   justify-content: space-evenly;
111 | }
112 | 
113 | .content-center {
114 |   align-content: center;
115 | }
116 | .content-start {
117 |   align-content: flex-start;
118 | }
119 | .content-end {
120 |   align-content: flex-end;
121 | }
122 | .content-between {
123 |   align-content: space-between;
124 | }
125 | .content-around {
126 |   align-content: space-around;
127 | }
128 | 
129 | .items-start {
130 |   align-items: flex-start;
131 | }
132 | .items-end {
133 |   align-items: flex-end;
134 | }
135 | .items-center {
136 |   align-items: center;
137 | }
138 | .items-baseline {
139 |   align-items: baseline;
140 | }
141 | 
142 | .self-start {
143 |   align-self: flex-start;
144 | }
145 | .self-end {
146 |   align-self: flex-end;
147 | }
148 | .self-center {
149 |   align-self: center;
150 | }
151 | .self-stretch {
152 |   align-self: stretch;
153 | }
154 | .self-baseline {
155 |   align-self: baseline;
156 | }
157 | 
158 | /* size */
159 | .w-full {
160 |   width: 100%;
161 | }
162 | .h-full {
163 |   height: 100%;
164 | }
165 | 
166 | /* 文本 */
167 | .text-24 {
168 |   font-size: 24px;
169 | }
170 | .text-26 {
171 |   font-size: 26px;
172 | }
173 | .text-28 {
174 |   font-size: 28px;
175 | }
176 | .text-30 {
177 |   font-size: 30px;
178 | }
179 | .text-32 {
180 |   font-size: 32px;
181 | }
182 | .text-36 {
183 |   font-size: 32px;
184 | }
185 | .text-48 {
186 |   font-size: 48px;
187 | }
188 | 
189 | /* 斜体 */
190 | .italic {
191 |   font-style: italic;
192 | }
193 | 
194 | /* 加粗 */
195 | .bold {
196 |   font-weight: bold;
197 | }
198 | 
199 | /* 文本对齐 */
200 | .text-left {
201 |   text-align: left;
202 | }
203 | .text-center {
204 |   text-align: center;
205 | }
206 | .text-right {
207 |   text-align: right;
208 | }
209 | .text-justify {
210 |   text-align: justify;
211 | }
212 | 
213 | /* 文本颜色 */
214 | .text-transparent {
215 |   color: transparent;
216 | }
217 | 
218 | .text-black {
219 |   color: #000;
220 | }
221 | .text-white {
222 |   color: #fff;
223 | }
224 | 
225 | /* 文本装饰 */
226 | .underline {
227 |   text-decoration: underline;
228 | }
229 | .line-through {
230 |   text-decoration: line-through;
231 | }
232 | 
233 | /* 文本转换 */
234 | .uppercase {
235 |   text-transform: uppercase;
236 | }
237 | .lowercase {
238 |   text-transform: lowercase;
239 | }
240 | .capitalize {
241 |   text-transform: capitalize;
242 | }
243 | 
244 | /* 边框颜色 */
245 | .border-black {
246 |   border-color: #000;
247 | }
248 | .border-white {
249 |   border-color: #fff;
250 | }
251 | 
252 | /* 边框样式 */
253 | .border-dotted {
254 |   border-style: dotted;
255 | }
256 | .border-dashed {
257 |   border-style: dashed;
258 | }
259 | 
260 | /* 不透明度 */
261 | .opacity-0 {
262 |   opacity: 0;
263 | }
264 | .opacity-10 {
265 |   opacity: 0.1;
266 | }
267 | .opacity-20 {
268 |   opacity: 0.2;
269 | }
270 | .opacity-30 {
271 |   opacity: 0.3;
272 | }
273 | .opacity-40 {
274 |   opacity: 0.4;
275 | }
276 | .opacity-50 {
277 |   opacity: 0.5;
278 | }
279 | .opacity-60 {
280 |   opacity: 0.6;
281 | }
282 | .opacity-70 {
283 |   opacity: 0.7;
284 | }
285 | .opacity-80 {
286 |   opacity: 0.8;
287 | }
288 | .opacity-90 {
289 |   opacity: 0.9;
290 | }
291 | /*  #endif  */
292 | 


--------------------------------------------------------------------------------
/render/util/context.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | 
3 | // TopView的页面
4 | export const PageUrlContext = React.createContext(void 0)
5 | 


--------------------------------------------------------------------------------
/render/util/icon.d.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | interface IconList {
 3 |   /** 图标名称对应的value */
 4 |   [propName: string]: number
 5 | }
 6 | 
 7 | export const icon: {
 8 |   [propName: string]: {
 9 |     /** 图标列表 */
10 |     list: IconList
11 |     /** 前缀 */
12 |     prefix: string
13 |   }
14 | }
15 | 
16 | /**
17 |  * 定义图标库
18 |  * @param fontFamily 字体名称
19 |  * @param list 图标列表 格式如下
20 |  * ```jsvascript
21 |  * {
22 |  *  name: 175416,
23 |  *  name1: 123855
24 |  * }
25 |  * ```
26 |  * @param prefix 字体图标class前缀 默认为 fontFamily + '-'
27 |  */
28 | export function defineIcon(fontFamily: string, list: IconList, prefix?: string): void
29 | 


--------------------------------------------------------------------------------
/render/util/icon.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 图标库列表
 3 |  */
 4 | export const icons = {}
 5 | 
 6 | /**
 7 |  * 定义图标库
 8 |  * @param {*} fontFamily 字体名称
 9 |  * @param {*} list 图标列表 格式如下
10 |  * {
11 |  *  name: 175416,
12 |  *  name1: 123855
13 |  * }
14 |  * @param {*} prefix 字体图标class前缀
15 |  */
16 | export const defineIcon = (fontFamily, list, prefix = fontFamily + '-') => {
17 |   icons[fontFamily] = {
18 |     list,
19 |     prefix
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/render/util/node.d.ts:
--------------------------------------------------------------------------------
 1 | import { design } from '../../design/components/edit'
 2 | 
 3 | /**
 4 |  * 通过key查找到一个节点 返回的parentNode是他的父节点数据，可以递归查找到最顶层节点直到这个值为null
 5 |  * @param nodes 节点列表
 6 |  * @param  key 节点key
 7 |  */
 8 | export function querySelectByKey(
 9 |   nodes: design.Node[],
10 |   key: string
11 | ): design.Node
12 | 
13 | /**
14 |  * 查找到这个节点的原始数据
15 |  * 使用querySelectByKey查找到的数据是经过处理的，当你需要原始值则使用这个函数查找
16 |  * @param nodes 节点列表
17 |  * @param  key 节点key
18 |  */
19 | export function querySelectByKeyOriginal(
20 |   nodes: design.Node[],
21 |   key: string
22 | ): design.Node
23 | 
24 | /**
25 |  * 判断一个节点是不是另外一个节点的子节点
26 |  * @param childKey 子节点key
27 |  * @param key 要判断的节点key
28 |  * @param nodes 节点列表
29 |  */
30 | export function isChildNode(childKey: string, key: string, nodes: design.Node[]): boolean
31 | 
32 | /**
33 |  * 节点数据数据创建
34 |  * @param nodeName 节点标识
35 |  * @param attr 节点属性
36 |  * @param child 子节点
37 |  */
38 | export function nodeCreate(nodeName: string, props?: object, child?: design.Node[]): design.Node
39 | 
40 | /**
41 |  * 筛选节点数据，过滤以下划线_开头的数据和禁用列表的数据，筛选后的数据可以用于组件的属性绑定
42 |  * @param props
43 |  */
44 | export function filterProps<T>(props: T): T
45 | 


--------------------------------------------------------------------------------
/render/util/node.js:
--------------------------------------------------------------------------------
  1 | import { getKey } from 'taro-tools'
  2 | 
  3 | const getParent = (next, current = { ...next[next.length - 1] }) => {
  4 |   if (next.length > 1) {
  5 |     current.parentNode = { ...next[next.length - 2] }
  6 |     getParent(next.slice(0, next.length - 1), current.parentNode)
  7 |   } else {
  8 |     current.parentNode = null
  9 |   }
 10 |   return current
 11 | }
 12 | 
 13 | /**
 14 |  * 通过key查找到一个节点 返回的parentNode是他的父节点数据，可以递归查找到最顶层节点直到这个值为null
 15 |  * @param {Array} nodes 节点列表
 16 |  * @param {string} key 节点key
 17 |  * @param {*} path
 18 |  * @returns
 19 |  */
 20 | export const querySelectByKey = (
 21 |   nodes,
 22 |   key,
 23 |   path = [{
 24 |     nodeName: 'root',
 25 |     parentNode: null,
 26 |     child: nodes
 27 |   }]
 28 | ) => {
 29 |   if (key === '__root__') {
 30 |     return path[0]
 31 |   }
 32 |   if (
 33 |     nodes.some(item => {
 34 |       if (item.key === key) {
 35 |         path.splice(1, 0, item)
 36 |         return true
 37 |       } else if (item.child && item.child.length) {
 38 |         if (querySelectByKey(item.child, key, path)) {
 39 |           path.splice(1, 0, item)
 40 |           return true
 41 |         } else {
 42 |           return false
 43 |         }
 44 |       } else {
 45 |         return false
 46 |       }
 47 |     })
 48 |   ) {
 49 |     return getParent(path)
 50 |   } else {
 51 |     return null
 52 |   }
 53 | }
 54 | 
 55 | export const querySelectByKeyOriginal = (
 56 |   nodes,
 57 |   key
 58 | ) => {
 59 |   const path = [{
 60 |     nodeName: 'root',
 61 |     parentNode: null,
 62 |     child: nodes
 63 |   }]
 64 |   querySelectByKey(nodes, key, path)
 65 |   return path[path.length - 1]
 66 | }
 67 | 
 68 | const childNodeSome = (key, nodes) => !!nodes && nodes instanceof Array && nodes.some(item => {
 69 |   if (item.key === key) {
 70 |     return true
 71 |   } else if (item.child && item.child.length) {
 72 |     if (childNodeSome(item.child, key)) {
 73 |       return true
 74 |     } else {
 75 |       return false
 76 |     }
 77 |   } else {
 78 |     return false
 79 |   }
 80 | })
 81 | 
 82 | /**
 83 |  * 判断一个节点是不是另外一个节点的子节点
 84 |  * @param {*} childKey 子节点key
 85 |  * @param {*} key 要判断的节点key
 86 |  * @param {*} nodes 节点列表
 87 |  */
 88 | export const isChildNode = (childKey, key, nodes) => {
 89 |   const node = querySelectByKey(nodes, key)
 90 |   if (!node || !node.child || !node.child.length) {
 91 |     return false
 92 |   }
 93 |   return childNodeSome(childKey, node.child)
 94 | }
 95 | 
 96 | /**
 97 |  * 节点数据数据创建
 98 |  * @param {*} nodeName 节点标识
 99 |  * @param {*} attr 节点属性
100 |  * @param {*} child 子节点
101 |  * @returns
102 |  */
103 | export const nodeCreate = (nodeName, attr, child = []) => {
104 |   return {
105 |     nodeName,
106 |     key: attr.key || getKey(),
107 |     ...attr,
108 |     child: typeof child === 'object' && !Array.isArray(child) ? [child] : child
109 |   }
110 | }
111 | 
112 | 
113 | /**
114 |  * 筛选节点数据，过滤以下划线_开头的数据贺禁用列表的数据，筛选后的数据可以用于组件的属性绑定
115 |  * @param {*} props
116 |  */
117 | export const filterProps = props => {
118 |   const newProps = {}
119 |   const disableKeys = ['child', 'children']
120 |   for (const key in props) {
121 |     if (Object.hasOwnProperty.call(props, key) && !key.startsWith('_') && !disableKeys.includes(key)) {
122 |       newProps[key] = props[key]
123 |     }
124 |   }
125 |   return newProps
126 | }
127 | 


--------------------------------------------------------------------------------
/render/util/styled.d.ts:
--------------------------------------------------------------------------------
 1 | import { CSSProperties } from 'react'
 2 | 
 3 | /**
 4 |  * 定义样式的值所属的类型
 5 |  */
 6 | export enum styleType {
 7 |   /** 枚举类型 */
 8 |   enum = 'enum',
 9 |   /** 尺寸 */
10 |   size = 'size',
11 |   /** 支持百分百比的尺寸 */
12 |   sizePercent = 'size-percent',
13 |   /** 数字类型 */
14 |   number = 'number',
15 |   /** 颜色类型 */
16 |   color = 'color',
17 |   /** 字符串类型 */
18 |   string = 'string'
19 | }
20 | 
21 | /** 样式的分组和样式配置 */
22 | export const styleConfig: {
23 |   [propName: string]: {
24 |     /** 显示名称 */
25 |     text: string
26 |     /** 样式值的类型 */
27 |     type: keyof styleType
28 |   }
29 | }
30 | 
31 | export namespace styled {
32 |   /**
33 |    * 判断名称是不是一个style样式
34 |    * @param name 样式名
35 |    */
36 |   function isStyleName(name: string): boolean
37 |   /**
38 |    * 判断样式名是不是一个size类型的样式
39 |    * @param name 样式名
40 |    */
41 |   function isSizeStyle(name: string): boolean
42 | 
43 |   /**
44 |    * 判断value是不是默认值
45 |    * @param name 样式名
46 |    * @param value 值
47 |    */
48 |   function isDefaultStyleValue(name: string, value: string | number): boolean
49 | 
50 |   /**
51 |    * 判断是不是无效的Style
52 |    * 比如值为空，或则超出选项范围则是无效样式
53 |    * @param name 样式名
54 |    * @param value 值
55 |    */
56 |   function isInvalidStyle(name: string, value: string | number): boolean
57 | 
58 |   /**
59 |    * 将style转换为className 转化失败返回undefined
60 |    * @param name 样式名
61 |    * @param value 值
62 |    */
63 |   function getClassName(name: string, value: string | number): string | void
64 | 
65 |   /**
66 |    * 处理样式
67 |    * @param {object} style 要处理的样式
68 |    * @param {boolean} transformClass 是否转换为ClassName
69 |    * @param {boolean} transformClass 将样式转换为css输出
70 |    * @param {boolean} platform 保留平台差异 Taro.pxTransform函数将直接以字符串的形式输出
71 |    */
72 |   function styleTransform(style: CSSProperties, transformClass: boolean, css: boolean, platform: boolean): {
73 |     /** 处理有剩余的style */
74 |     style?: CSSProperties
75 |     /** 处理有的className */
76 |     className?: string
77 |     /** 当transformClass传入true则会返回此参数 这是一个css文本 */
78 |     css?: string
79 |   }
80 | }
81 | 
82 | /**
83 |  * 组件内部style样式的合并，用法类似与classNames，用于兼容rn与其他端style的差异
84 |  * @param arg 样式
85 |  */
86 | export function styles(...arg: CSSProperties[]): CSSProperties[]
87 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------