Skip to content

Commit 195f442

Browse files
janryWangjanryWang
committed
feat(settings): support BorderStyleSetter
1 parent c05a928 commit 195f442

File tree

9 files changed

+218
-15
lines changed

9 files changed

+218
-15
lines changed

‎.github/GIT_COMMIT_SPECIFIC.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ All lines are wrapped at 100 characters !
1212

1313
**Allowed `<type>`**
1414

15-
- breaking 💥 Breaking Change",
16-
- feat 🎉 A new feature",
17-
- bugfix 🐞 Bug Fix",
18-
- doc 📝 Documentation",
19-
- refactor 🌹 Some Code Change",
20-
- test 🚧 Update Test Cases",
21-
- perf 🚀 Improve Performace",
22-
- build 🛠️ Update Workflow Scripts",
23-
- chore 😊 Improve Some Code"
15+
- breaking --- Breaking Change,
16+
- feat --- A new feature,
17+
- bugfix --- Bug Fix,
18+
- doc --- Documentation,
19+
- refactor --- Some Code Change,
20+
- test --- Update Test Cases,
21+
- perf --- Improve Performace,
22+
- build --- Update Workflow Scripts,
23+
- chore --- Improve Some Code
2424

2525
**Allowed `<scope>`**
2626
Scope could be anything specifying place of the commit change.

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
# Designable
22

3-
> Make everything is designable
3+
> Make everything designable

‎packages/core/src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export * from './models'
77
export * from './events'
88
export * from './types'
99

10-
export const createEngine = (props: IEngineProps<Engine> = {}) => {
10+
export const createDesigner = (props: IEngineProps<Engine> = {}) => {
1111
const drivers = props.drivers || []
1212
const effects = props.effects || []
1313
const shortcuts = props.shortcuts || []

‎packages/playground/src/main.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
SettingsPanel,
1717
} from '@designable/react'
1818
import { SettingsForm } from '@designable/react-settings-form'
19-
import { createEngine, registry } from '@designable/core'
19+
import { createDesigner, registry } from '@designable/core'
2020
import { Content } from './content'
2121
import { Space, Button } from 'antd'
2222
//import { Sandbox } from '@designable/react-sandbox'
@@ -82,6 +82,10 @@ registry.registerDesignerProps({
8282
title: 'Padding',
8383
'x-component': 'BoxStyleSetter',
8484
},
85+
'style.border': {
86+
title: 'Border',
87+
'x-component': 'BorderStyleSetter',
88+
},
8589
},
8690
},
8791
},
@@ -136,7 +140,7 @@ const App = () => {
136140
const [view, setView] = useState('design')
137141
const engine = useMemo(
138142
() =>
139-
createEngine({
143+
createDesigner({
140144
defaultComponentTree: [
141145
{
142146
componentName: 'Field',

‎packages/react-settings-form/src/SchemaField.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
CornerInput,
2626
ValueInput,
2727
BoxStyleSetter,
28+
BorderStyleSetter,
2829
} from './components'
2930

3031
export const SchemaField = createSchemaField({
@@ -39,6 +40,7 @@ export const SchemaField = createSchemaField({
3940
CornerInput,
4041
BackgroundImageInput,
4142
BoxStyleSetter,
43+
BorderStyleSetter,
4244
NumberPicker,
4345
DatePicker,
4446
TimePicker,

‎packages/react-settings-form/src/components/BorderStyleSetter/index.tsx

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React, { Fragment, useMemo } from 'react'
2+
import { usePrefix } from '@designable/react'
3+
import { camelCase } from '@formily/shared'
4+
import { Select } from '@formily/antd'
5+
import { observable } from '@formily/reactive'
6+
import { useField, Field, observer } from '@formily/react'
7+
import { Space } from 'antd'
8+
import { FoldItem } from '../FoldItem'
9+
import { ColorInput } from '../ColorInput'
10+
import { SizeInput } from '../SizeInput'
11+
import { PositionInput } from '../PositionInput'
12+
import cls from 'classnames'
13+
import './styles.less'
14+
15+
const Positions = ['center', 'top', 'right', 'bottom', 'left']
16+
17+
const BorderStyleOptions = [
18+
{
19+
label: 'None',
20+
value: 'none',
21+
},
22+
{
23+
label: <span className="border-style-solid-line" />,
24+
value: 'solid',
25+
},
26+
{
27+
label: <span className="border-style-dashed-line" />,
28+
value: 'dashed',
29+
},
30+
{
31+
label: <span className="border-style-dotted-line" />,
32+
value: 'dotted',
33+
},
34+
]
35+
36+
export interface IBorderStyleSetterProps {
37+
className?: string
38+
style?: React.CSSProperties
39+
}
40+
41+
export const BorderStyleSetter: React.FC<IBorderStyleSetterProps> = observer(
42+
({ className, style }) => {
43+
const currentPosition = useMemo(
44+
() =>
45+
observable({
46+
value: 'center',
47+
}),
48+
[]
49+
)
50+
const field = useField()
51+
const prefix = usePrefix('border-style-setter')
52+
return (
53+
<FoldItem label={field.title}>
54+
<FoldItem.Extra>
55+
<div className={cls(prefix, className)} style={style}>
56+
<div className={prefix + '-position'}>
57+
<PositionInput
58+
value={currentPosition.value}
59+
onChange={(value) => {
60+
currentPosition.value = value
61+
}}
62+
/>
63+
</div>
64+
<div className={prefix + '-input'}>
65+
{Positions.map((position, key) => {
66+
const reaction = (field: Formily.Core.Models.Field) => {
67+
field.display =
68+
currentPosition.value === position ? 'visible' : 'hidden'
69+
if (position !== 'center') {
70+
const borderStyle = field.query('.borderStyle').value()
71+
const borderWidth = field.query('.borderWidth').value()
72+
const borderColor = field.query('.borderColor').value()
73+
if (borderStyle || borderWidth || borderColor) {
74+
field.value = undefined
75+
}
76+
}
77+
}
78+
return (
79+
<Fragment key={key}>
80+
<Field
81+
name={camelCase(
82+
`border${
83+
position === 'center' ? '' : `-${position}`
84+
}Style`
85+
)}
86+
basePath={field.address.parent()}
87+
dataSource={BorderStyleOptions}
88+
reactions={reaction}
89+
component={[Select]}
90+
/>
91+
<Field
92+
name={camelCase(
93+
`border${
94+
position === 'center' ? '' : `-${position}`
95+
}Width`
96+
)}
97+
basePath={field.address.parent()}
98+
reactions={reaction}
99+
component={[SizeInput]}
100+
/>
101+
<Field
102+
name={camelCase(
103+
`border${
104+
position === 'center' ? '' : `-${position}`
105+
}Color`
106+
)}
107+
basePath={field.address.parent()}
108+
reactions={reaction}
109+
component={[ColorInput]}
110+
/>
111+
</Fragment>
112+
)
113+
})}
114+
</div>
115+
</div>
116+
</FoldItem.Extra>
117+
</FoldItem>
118+
)
119+
}
120+
)

‎packages/react-settings-form/src/components/BorderStyleSetter/styles.less

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.dn-border-style-setter {
2+
display: flex;
3+
4+
&-input {
5+
height: 110px;
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: space-between;
9+
margin-bottom: 10px;
10+
}
11+
}
12+
13+
.border-style-solid-line {
14+
position: relative;
15+
width: 100%;
16+
height: 100%;
17+
display: block;
18+
19+
&::after {
20+
position: absolute;
21+
top: 50%;
22+
left: 0;
23+
display: block;
24+
content: '';
25+
height: 0;
26+
width: 100%;
27+
border-top: 2px solid currentColor;
28+
transform: translateY(-50%);
29+
}
30+
}
31+
32+
.border-style-dashed-line {
33+
position: relative;
34+
width: 100%;
35+
height: 100%;
36+
display: block;
37+
38+
&::after {
39+
position: absolute;
40+
top: 50%;
41+
left: 0;
42+
display: block;
43+
content: '';
44+
height: 0;
45+
width: 100%;
46+
border-top: 2px dashed currentColor;
47+
transform: translateY(-50%);
48+
}
49+
}
50+
51+
.border-style-dotted-line {
52+
position: relative;
53+
width: 100%;
54+
height: 100%;
55+
display: block;
56+
57+
&::after {
58+
position: absolute;
59+
top: 50%;
60+
left: 0;
61+
display: block;
62+
content: '';
63+
height: 0;
64+
width: 100%;
65+
border-top: 2px dotted currentColor;
66+
transform: translateY(-50%);
67+
}
68+
}

‎packages/react-settings-form/src/components/FoldItem/index.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
import React, { Fragment, useState, useRef } from 'react'
22
import { FormItem, IFormItemProps } from '@formily/antd'
3+
import { useField } from '@formily/react'
34
import { IconWidget, usePrefix } from '@designable/react'
45
import cls from 'classnames'
56
import './styles.less'
67

8+
const ExpandedMap = new Map<string, boolean>()
9+
710
export const FoldItem = ({
811
className,
912
style,
1013
children,
1114
...props
1215
}: React.PropsWithChildren<IFormItemProps>) => {
1316
const prefix = usePrefix('fold-item')
14-
const [expand, setExpand] = useState(false)
17+
const field = useField()
18+
const [expand, setExpand] = useState(
19+
ExpandedMap.get(field.address.toString())
20+
)
1521
const slots = useRef({ base: null, extra: null })
1622
React.Children.forEach(children, (node) => {
1723
if (React.isValidElement(node)) {
@@ -33,7 +39,9 @@ export const FoldItem = ({
3339
expand,
3440
})}
3541
onClick={() => {
36-
setExpand(!expand)
42+
const newExpaned = !expand
43+
setExpand(newExpaned)
44+
ExpandedMap.set(field.address.toString(), newExpaned)
3745
}}
3846
>
3947
<IconWidget infer="Expand" size={10} />

‎packages/react-settings-form/src/components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ export * from './PositionInput'
55
export * from './SizeInput'
66
export * from './ValueInput'
77
export * from './BoxStyleSetter'
8+
export * from './BorderStyleSetter'

0 commit comments

Comments
 (0)