Browse Source

dev: 初步实现图文编辑组件

Roxas 4 years ago
parent
commit
a9fd17774d

+ 9
- 1
src/components/Editor/CommonTool/ControlsToolBar.tsx View File

14
   toolList: Array<ToolListItem>;
14
   toolList: Array<ToolListItem>;
15
   injectIconWrapStyle?: any;
15
   injectIconWrapStyle?: any;
16
   injectIconStyle?: any;
16
   injectIconStyle?: any;
17
+  injectIconTextStyle?: any;
17
 }
18
 }
18
 
19
 
19
 export const ControlsToolBar = (props: ControlsToolBarProps) => {
20
 export const ControlsToolBar = (props: ControlsToolBarProps) => {
23
     toolList = [],
24
     toolList = [],
24
     injectIconWrapStyle = {},
25
     injectIconWrapStyle = {},
25
     injectIconStyle = {},
26
     injectIconStyle = {},
27
+    injectIconTextStyle = {},
26
   } = props;
28
   } = props;
27
   const IconWrapStyle = {
29
   const IconWrapStyle = {
30
+    display: 'flex',
31
+    alignItems: 'center',
28
     cursor: "pointer",
32
     cursor: "pointer",
29
     textAlign: "center" as const,
33
     textAlign: "center" as const,
30
-    width: "42px",
34
+    minWidth: "42px",
31
     ...injectIconWrapStyle,
35
     ...injectIconWrapStyle,
32
   };
36
   };
33
   const IconStyle = { fontSize: "21px", ...injectIconStyle };
37
   const IconStyle = { fontSize: "21px", ...injectIconStyle };
38
+  const IconTextStyle = { margin: "0 4px", ...injectIconTextStyle };
34
 
39
 
35
   if (toolList.length < 1) {
40
   if (toolList.length < 1) {
36
     return null;
41
     return null;
46
           onClick={i.onClick}
51
           onClick={i.onClick}
47
         >
52
         >
48
           <i className={i.iconClass} style={IconStyle} />
53
           <i className={i.iconClass} style={IconStyle} />
54
+          {
55
+            i.text ? <span style={IconTextStyle}>{i.text}</span> : null
56
+          }
49
         </div>
57
         </div>
50
       ))
58
       ))
51
     }
59
     }

+ 3
- 0
src/components/Editor/QAEditor/SimpleEditor.tsx View File

7
 interface QASimpleEditorProps extends BaseEditorProps {
7
 interface QASimpleEditorProps extends BaseEditorProps {
8
   toolAlign?: 'inner' | 'bottom';
8
   toolAlign?: 'inner' | 'bottom';
9
   toolList?: Array<ToolListItem>;
9
   toolList?: Array<ToolListItem>;
10
+  injectControlsToolBar?: any;
10
   toolBarContainerStyle?: any;
11
   toolBarContainerStyle?: any;
11
   appendToolBtn?: any;
12
   appendToolBtn?: any;
12
 }
13
 }
17
     onChange, 
18
     onChange, 
18
     toolAlign = 'inner',
19
     toolAlign = 'inner',
19
     toolList = [],
20
     toolList = [],
21
+    injectControlsToolBar = {},
20
     toolBarContainerStyle = {},
22
     toolBarContainerStyle = {},
21
     appendToolBtn = null,
23
     appendToolBtn = null,
22
   } = props;
24
   } = props;
52
             editorState={value}
54
             editorState={value}
53
             setEditorState={onChange}
55
             setEditorState={onChange}
54
             toolList={toolList}
56
             toolList={toolList}
57
+            {...injectControlsToolBar}
55
           />
58
           />
56
         </div>
59
         </div>
57
         {appendToolBtn}
60
         {appendToolBtn}

+ 10
- 1
stories/Editor.stories.tsx View File

125
             {
125
             {
126
               key: 1,
126
               key: 1,
127
               color: "#f07977",
127
               color: "#f07977",
128
+              text: "长文",
128
               iconClass: "schedule schedule-icon_story",
129
               iconClass: "schedule schedule-icon_story",
129
               onClick: () => {
130
               onClick: () => {
130
                 setEditorState(
131
                 setEditorState(
135
             {
136
             {
136
               key: 2,
137
               key: 2,
137
               color: "#3d9bfe",
138
               color: "#3d9bfe",
139
+              text: "话题",
138
               iconClass: "schedule schedule-icon_topic",
140
               iconClass: "schedule schedule-icon_topic",
139
               onClick: () => {
141
               onClick: () => {
140
                 setEditorState(
142
                 setEditorState(
145
             {
147
             {
146
               key: 3,
148
               key: 3,
147
               color: "#ffa405",
149
               color: "#ffa405",
150
+              text: "表情",
148
               iconClass: "schedule schedule-icon_emoticon",
151
               iconClass: "schedule schedule-icon_emoticon",
149
               onClick: () => {
152
               onClick: () => {
150
                 setEditorState(
153
                 setEditorState(
155
             {
158
             {
156
               key: 4,
159
               key: 4,
157
               color: "#71c135",
160
               color: "#71c135",
161
+              text: "图片",
158
               iconClass: "schedule schedule-icon_img",
162
               iconClass: "schedule schedule-icon_img",
159
               onClick: () => {
163
               onClick: () => {
160
                 setEditorState(
164
                 setEditorState(
163
               }
167
               }
164
             }
168
             }
165
           ]}
169
           ]}
170
+          injectControlsToolBar={{
171
+            injectIconWrapStyle: {
172
+              marginRight: "4px"
173
+            }
174
+          }}
166
           toolAlign={select("toolAlign", {
175
           toolAlign={select("toolAlign", {
167
             Inner: 'inner',
176
             Inner: 'inner',
168
             Bottom: 'bottom',
177
             Bottom: 'bottom',
185
                   }
194
                   }
186
                 >
195
                 >
187
                   <Checkbox>
196
                   <Checkbox>
188
-                    anonymous
197
+                    Anonymous
189
                   </Checkbox>
198
                   </Checkbox>
190
                 </Popover>
199
                 </Popover>
191
               </div>
200
               </div>