plain-design 1.0.0-beta.22 → 1.0.0-beta.24

package/src/packages/components/VirtualList/useVirtualList.tsx

@@ -1,4 +1,4 @@
-import {computed, getComponentCls, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
+import {computed, createCounter, getComponentCls, onMounted, onUpdated, reactive, useClasses, useStyles, watch} from "plain-design-composition";
 import {delay} from "plain-utils/utils/delay";
 import './virtual-list.scss';
 import Scroll from "../Scroll";
@@ -9,13 +9,15 @@ interface DataNode {
   top: number;
   bottom: number;
   height: number;
-
-  data: any;
-  index: number;
+  item: any;
+  id: string;
+  index: number,
 }
 
 const ScrollDirection = createEnum(['up', 'down', 'none'] as const);
 
+const nextRowId = createCounter('__v__');
+
 export function useVirtualList(
   {
     props,
@@ -53,10 +55,30 @@ export function useVirtualList(
   };
   /*响应式属性*/
   const state = reactive({
-    nodes: [] as DataNode[],                    // 格式化的data数组数据
     scrollTop: 0,                               // 当前滚动scrollTop（非实时的）
     pageSize: 0,                                // 页大小
     scrollDirection: ScrollDirection.none as typeof ScrollDirection.TYPE,
+    id2height: {} as Record<string, number | undefined>,
+    avgHeight: props.size
+  });
+
+  const idMap = new WeakMap<object, string>();
+  let prevBottom = 0;
+
+  const nodes = computed(() => {
+    prevBottom = 0;
+    return props.data.map((item, index): DataNode => {
+      let id = idMap.get(item);
+      if (!id) {
+        id = nextRowId();
+        idMap.set(item, id);
+      }
+      const height: number = state.id2height[id] || state.avgHeight;
+      let top = prevBottom;
+      let bottom = top + height;
+      prevBottom = bottom;
+      return { id: id!, item, height, top, bottom, index };
+    });
   });
 
   /**
@@ -64,22 +86,21 @@ export function useVirtualList(
    * @author  韦胜健
    * @date    2020/11/15 9:28
    */
-  const offsetData = computed((): { list: { item: any, index: number }[], startPageIndex: number, start: number } => {
+  const offsetData = computed((): { list: { item: any, id: string, index: number }[], startPageIndex: number, start: number } => {
     const { pageSize, scrollTop } = state;
-    const data = props.data || [];
     if (!pageSize) {
       return { list: [], startPageIndex: 0, start: 0 };
     }
     if (props.disabled) {
       return {
-        list: data.map((item, index) => ({ item, index })),
+        list: nodes.value,
         start: 0,
         startPageIndex: 0,
       };
     }
     const { start, end, pageIndex } = utils.getPageIndex(scrollTop, pageSize);
     return {
-      list: data.map((item, index) => ({ item, index })).slice(start, end),
+      list: nodes.value.slice(start, end),
       startPageIndex: pageIndex,
       start,
     };
@@ -116,7 +137,7 @@ export function useVirtualList(
     if (!props.dynamicSize) {
       style.height = `${(props.data || []).length * props.size}px`;
     } else {
-      style.height = `${state.nodes[state.nodes.length - 1].bottom}px`;
+      style.height = `${nodes.value[nodes.value.length - 1].bottom}px`;
     }
   });
 
@@ -140,7 +161,7 @@ export function useVirtualList(
     if (!props.dynamicSize) {
       top = start * props.size;
     } else {
-      top = state.nodes[start].top;
+      top = nodes.value[start].top;
     }
 
     if (transform !== false) {
@@ -165,13 +186,13 @@ export function useVirtualList(
         // console.log('not dynamic》》》getIndex', top / props.size)
         return Math.floor(top / props.size);
       } else {
-        const { nodes } = state;
+        const _nodes = nodes.value;
         let start = 0;
-        let end = nodes.length - 1;
+        let end = _nodes.length - 1;
         let temp = 0;
         while (start <= end) {
           let middle = Math.floor((start + end) / 2);
-          let middleBottom = nodes[middle].bottom;
+          let middleBottom = _nodes[middle].bottom;
           if (middleBottom === top) {
             return middle + 1;
           } else if (middleBottom < top) {
@@ -240,21 +261,6 @@ export function useVirtualList(
         pageIndex,
       };
     },
-    /**
-     * 格式化props.data为 DataNode数组
-     * @author  韦胜健
-     * @date    2020/11/15 9:29
-     */
-    resetData: (data: any[]) => {
-      // console.log('resetData')
-      state.nodes = data.map((item, index) => ({
-        data: item,
-        index,
-        top: props.size * index,
-        height: props.size,
-        bottom: props.size * (index + 1),
-      }));
-    }
   };
 
   /*---------------------------------------handler-------------------------------------------*/
@@ -282,9 +288,7 @@ export function useVirtualList(
     if (!props.dynamicSize) {
       return;
     }
-    !!refs.scroll && refs.scroll.methods.scrollTop(0, 0);
-    /*如果是动态高度，则刷state.nodes*/
-    utils.resetData(data);
+    // !!refs.scroll && refs.scroll.methods.scrollTop(0, 0);
   });
 
   onMounted(() => {
@@ -299,9 +303,6 @@ export function useVirtualList(
     }
 
     state.pageSize = Math.floor(hostHeight / props.size);
-    if (props.dynamicSize && !props.disabled) {
-      utils.resetData(props.data);
-    }
   });
 
   onUpdated(async () => {
@@ -313,7 +314,9 @@ export function useVirtualList(
     }
     await delay();
     // console.log('dynamic scan height')
-    const elNodes = (Array.from(refs.content!.childNodes || []) as HTMLElement[]).filter(node => node.nodeType !== 3);
+    const elNodes = (refs.content?.querySelectorAll('[data-vid],[vid]') || []) as HTMLElement[];
+    let newAvgHeight = state.avgHeight;
+
     for (let i = 0; i < elNodes.length; i++) {
       const el = elNodes[i];
       const { offsetHeight: height } = el;
@@ -321,19 +324,15 @@ export function useVirtualList(
       if (vid == null) {
         throw new Error('Each item of the virtual-list must have an attribute named "vid", please set :vid="index" or :data-vid="index"');
       }
-      vid = Number(vid);
-      const prevNode = state.nodes[vid];
-      const prevHeight = prevNode.height;
-      let deltaHeight = prevHeight - height;
-      if (deltaHeight !== 0) {
-        prevNode.height = height;
-        prevNode.bottom = prevNode.bottom - deltaHeight;
-        for (let j = vid + 1; j < state.nodes!.length; j++) {
-          state.nodes![j].top = state.nodes![j - 1].bottom;
-          state.nodes![j].bottom = state.nodes![j].bottom - deltaHeight;
-        }
+      if (state.id2height[vid] != height) {
+        state.id2height[vid] = height;
+        newAvgHeight = Number(((state.avgHeight + height) / 2).toFixed(0));
       }
     }
+
+    if (newAvgHeight != state.avgHeight) {
+      state.avgHeight = newAvgHeight;
+    }
   });
 
   return {

package/src/packages/components/VirtualTable/index.tsx

@@ -29,7 +29,7 @@ export const VirtualTable = designComponent({
   },
   slots: ['colgroup', 'head', 'headColgroup'],
   scopeSlots: {
-    default: (scope: { item: any, index: number, virtualIndex: number }) => {},
+    default: (scope: { item: any, index: number, vIndex: number, vid: string }) => {},
   },
   setup({ props, slots, scopeSlots, event: { emit } }) {
 
@@ -70,7 +70,7 @@ export const VirtualTable = designComponent({
     const strutStyles = useStyles(style => {
       Object.assign(style, virtual.strutStyles.value);
       !!props.width && (style.width = unit(props.width));
-      style.minHeight = bodyTableWrapperStyles.value.minHeight
+      style.minHeight = bodyTableWrapperStyles.value.minHeight;
     });
 
     const contentStyles = useStyles(style => {
@@ -168,7 +168,7 @@ export const VirtualTable = designComponent({
                         <div className="virtual-table-body-table-wrapper" ref={onRef.body} style={bodyTableWrapperStyles.value}>
                           <table className="virtual-table-body-table" {...{ ...PublicTableAttrs, style: tableStyles.value }}>
                             {slots.colgroup()}
-                            <tbody>{list.map((node, virtualIndex) => scopeSlots.default({ ...node, virtualIndex }))}</tbody>
+                            <tbody>{list.map((item, vIndex) => scopeSlots.default({ ...item, vIndex, vid: item.id }))}</tbody>
                           </table>
                         </div>
                       </div>
@@ -177,7 +177,7 @@ export const VirtualTable = designComponent({
                       <div className="virtual-table-summary-table-wrapper" ref={onRef.summary}>
                         <table className="virtual-table-summary-table" style={summaryTableStyles.value}{...PublicTableAttrs} data-virtual-foot>
                           {slots.colgroup()}
-                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, virtualIndex: index }))}</tbody>
+                          <tbody>{!props.summaryData ? null : props.summaryData.map((item, index) => scopeSlots.default({ item, index, vIndex: index, vid: `__smy__${index}` }))}</tbody>
                         </table>
                       </div>
                     )}

package/src/packages/entry.tsx

@@ -189,6 +189,7 @@ export type {
 } from './components/AutoTable/use/useTableOption.cache.utils';
 export {PageThemeUtils} from './components/PageThemeUtils';
 export {ThemePrimaryColors} from './components/ThemePrimaryColors';
+export {ThemeEditor} from './components/ThemeEditor';
 export {useReferenceTrigger} from './components/useReferenceTrigger';
 export {usePopupTrigger} from './components/usePopupTrigger';
 export {useWatchAutoClear} from './components/useWatchAutoClear';

package/src/pages/index/Demo/DemoRow.scss

@@ -93,8 +93,8 @@
 
 .demo-row-collector-operator {
   position: fixed;
-  bottom: 20px;
-  right: 20px;
+  bottom: 8px;
+  right: 0;
   display: flex;
   align-items: center;
 
@@ -105,16 +105,19 @@
     font-size: 12px;
     cursor: pointer;
     color: plv(text-2);
+    display: flex;
+    align-items: center;
 
     &:first-child {
       border-right: none;
-      border-bottom-left-radius: 2px;
-      border-top-left-radius: 2px;
+      border-bottom-left-radius: plv(box-size-normal-border-radius);
+      border-top-left-radius: plv(box-size-normal-border-radius);
     }
 
     &:last-child {
-      border-bottom-right-radius: 2px;
-      border-top-right-radius: 2px;
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right: none;
     }
 
     & > span {

package/src/pages/index/Demo/DemoRowController.tsx

@@ -26,11 +26,11 @@ export const DemoRowController = designComponent({
           <div className="demo-row-collector-operator">
             <div onClick={() => methods.changeAll(false)}>
               <span>全部收起</span>
-              <Icon icon="pi-left" style={{ transform: 'rotate(-90deg)' }}/>
+              <Icon icon="pi-fullscreen-exit"/>
             </div>
             <div onClick={() => methods.changeAll(true)}>
               <span>全部展开</span>
-              <Icon icon="pi-left" style={{ transform: 'rotate(90deg)' }}/>
+              <Icon icon="pi-fullscreen"/>
             </div>
           </div>
         </>

package/src/pages/index/components/normal/DemoDropdown.tsx

@@ -432,7 +432,7 @@ export const demoDropdownScroll = designPage(() => {
 
 export const demoDropdownVirtualList = designPage(() => {
 
-  const options = new Array(10000).fill({});
+  const options = new Array(1000).fill({});
 
   return () => (
     <DemoRow title="虚拟滚动，长列表">

package/src/pages/index/components/normal/DemoVirtualList.tsx

@@ -1,4 +1,4 @@
-import {computed, designPage, getComponentCls, classnames,reactive} from "plain-design-composition";
+import {computed, designPage, getComponentCls, classnames, reactive} from "plain-design-composition";
 import data2 from '../../../data/data-2.json';
 import {DemoRow} from "../../Demo/DemoRow";
 import {Alert, ApplicationConfigurationProvider, Checkbox, VirtualList} from "../../../../packages";
@@ -11,7 +11,7 @@ export const demo1 = designPage(() => {
     if (colors.length === 0) {colors = [...sourceColors];}
     const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
     const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    const color = `var(--${getComponentCls(`${palette}-6`)})`;
     return { backgroundColor, color };
   };
   const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
@@ -91,7 +91,7 @@ export const demo2 = designPage(() => {
     if (colors.length === 0) {colors = [...sourceColors];}
     const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
     const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    const color = `var(--${getComponentCls(`${palette}-6`)})`;
     return { backgroundColor, color };
   };
   const list = computed(() => data2.slice(0, 188).map(item => ({ ...item, color: getRandomColor() })));
@@ -100,11 +100,11 @@ export const demo2 = designPage(() => {
     <DemoRow title={'动态高度'}>
       <div style={{ width: '300px', height: '400px', backgroundColor: '#f6f6f6' }}>
         <VirtualList data={list.value} size={60} dynamicSize v-slots={{
-          default: ({ item, index }) => (
+          default: ({ item, vid, index, vIndex }) => (
             <div
-              key={index}
-              data-vid={index}
-              onClick={() => console.log(index, { ...item })}
+              key={vIndex}
+              data-vid={vid}
+              onClick={() => console.log(vid, { ...item })}
               style={{
                 ...item.color,
                 height: item.size + 'px',
@@ -165,7 +165,7 @@ export const demo3 = designPage(() => {
     if (colors.length === 0) {colors = [...sourceColors];}
     const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
     const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    const color = `var(--${getComponentCls(`${palette}-6`)})`;
     return { backgroundColor, color };
   };
   const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));
@@ -250,7 +250,7 @@ export const demo4 = designPage(() => {
     if (colors.length === 0) {colors = [...sourceColors];}
     const palette = colors.splice(Math.floor(Math.random() * colors.length), 1);
     const backgroundColor = `var(--${getComponentCls(`${palette}-1`)})`;
-    const color = `var(--${getComponentCls(`${palette}-6`)})`
+    const color = `var(--${getComponentCls(`${palette}-6`)})`;
     return { backgroundColor, color };
   };
   const list = computed(() => data2.map(item => ({ ...item, color: getRandomColor() })));

package/src/pages/index/components/table/DemoTableExpand.tsx

@@ -8,7 +8,19 @@ import {ColorPicker, DatePicker, Form, FormItem, Input, InputNumber, Plc, PlcExp
 export const demoExpand = designPage(() => {
 
   const state = reactive({
-    data,
+    data: data.map((item) => {
+      return {
+        ...item,
+        children: new Array(Math.ceil(Math.random() * 5 + 2)).fill(null).map((_, index) => {
+          return {
+            id: index,
+            date: item.date,
+            name: item.name + `_${index + 1}`,
+            address: item.addr,
+          };
+        })
+      };
+    }),
   });
 
   const summaryData = deepcopy(data.slice(0, 2));
@@ -19,6 +31,8 @@ export const demoExpand = designPage(() => {
         data={state.data}
         summaryData={summaryData}
         virtual
+        virtualRowType="realIndex"
+        dynamicSize
         showRows={10}
       >
         <PlcIndex/>
@@ -27,14 +41,12 @@ export const demoExpand = designPage(() => {
           v-slots={{
             expand: ({ row }) => {
               return (
-                <div style={{ padding: '12px' }}>
-                  <Form column={1} disabled key={row.id}>
-                    <FormItem label={'普通文本'}>{row.name}</FormItem>
-                    <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
-                    <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
-                    <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
-                    <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
-                  </Form>
+                <div style={{ padding: '20px' }}>
+                  <Table data={row.children} showRows="auto" size="small">
+                    <Plc title="名称" field="name"/>
+                    <Plc title="日期" field="date"/>
+                    <Plc title="地址" field="address"/>
+                  </Table>
                 </div>
               );
             }
@@ -68,7 +80,19 @@ export const demoExpand = designPage(() => {
 export const demoExpandVirtualCOlumn = designPage(() => {
 
   const state = reactive({
-    data,
+    data: data.map((item) => {
+      return {
+        ...item,
+        children: new Array(Math.ceil(Math.random() * 5 + 2)).fill(null).map((_, index) => {
+          return {
+            id: index,
+            date: item.date,
+            name: item.name + `_${index + 1}`,
+            address: item.addr,
+          };
+        })
+      };
+    }),
   });
 
   const summaryData = deepcopy(data.slice(0, 2));
@@ -80,23 +104,21 @@ export const demoExpandVirtualCOlumn = designPage(() => {
         summaryData={summaryData}
         virtual
         showRows={10}
+        dynamicSize
         virtualColumn
       >
         <PlcIndex/>
         <PlcExpand
-          toggleOnClickRow
           fixedWidth
           v-slots={{
             expand: ({ row }) => {
               return (
-                <div style={{ padding: '12px' }}>
-                  <Form column={1} disabled key={row.id}>
-                    <FormItem label={'普通文本'}>{row.name}</FormItem>
-                    <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
-                    <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
-                    <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
-                    <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
-                  </Form>
+                <div style={{ padding: '20px' }}>
+                  <Table data={row.children} showRows="auto" size="small">
+                    <Plc title="名称" field="name"/>
+                    <Plc title="日期" field="date"/>
+                    <Plc title="地址" field="address"/>
+                  </Table>
                 </div>
               );
             }

package/src/pages/index/components/table/DemoVirtualTable.tsx

@@ -69,8 +69,8 @@ export const demo1 = designPage(() => {
                   </tr>
                 ))
               ),
-              default: ({ item, index, virtualIndex }) => (
-                <tr key={virtualIndex} {...{ vid: index } as any} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
+              default: ({ item, vid, vIndex }) => (
+                <tr key={vIndex} data-vid={vid} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
                   {Object.keys(DATA[0] as any).map((key: string) => (
                     <td key={key}>{(item as any)[key]}</td>
                   ))}
@@ -104,8 +104,8 @@ export const demo1 = designPage(() => {
                   </tr>
                 ))
               ),
-              default: ({ item, index, virtualIndex }) => (
-                <tr key={virtualIndex} {...{ vid: index } as any} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
+              default: ({ item, vIndex, vid }) => (
+                <tr key={vIndex} data-vid={vid} style={{ height: '40px', borderBottom: 'solid 1px #ececec', backgroundColor: "item.color" }}>
                   {Object.keys(DATA[0] as any).map((key: string) => (
                     <td key={key}>{(item as any)[key]}</td>
                   ))}

package/src/pages/index/home/AppHead.tsx

@@ -1,48 +1,9 @@
-import {designPage, reactive} from "plain-design-composition";
+import {designPage} from "plain-design-composition";
 import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
-import {PageThemeUtils, Select, SelectOption, ThemePrimaryColors} from "../../../packages";
-import ClientZoom from "../../../packages/components/ClientZoom";
 import logoImage from './plain-design.png';
+import {ThemeEditor} from "../../../packages/components/ThemeEditor";
 
 export const AppHead = designPage(() => {
-
-  const state = reactive({
-    size: PageThemeUtils.state.size || 'normal',
-    dark: PageThemeUtils.state.dark ? 'dark' : 'light',
-    shape: PageThemeUtils.state.shape || 'square',
-    zoom: PageThemeUtils.state.zoom || null,
-    primaryKey: PageThemeUtils.state.primaryKey as string || 'default',
-    inputMode: PageThemeUtils.state.inputMode || 'flat',
-  });
-
-  const onSizeChange = () => {
-    PageThemeUtils.size(state.size);
-  };
-
-  const onShapeChange = () => {
-    PageThemeUtils.shape(state.shape);
-  };
-
-  const onZoomChange = () => {
-    PageThemeUtils.zoom(state.zoom);
-    ClientZoom.set(state.zoom);
-  };
-
-  const onDarkChange = () => {
-    const val = !state.dark ? false : state.dark === 'dark';
-    PageThemeUtils.toggle(val);
-  };
-
-  const onPrimaryChange = () => {
-    PageThemeUtils.primary(state.primaryKey);
-  };
-
-  const onInputModeChange = () => {
-    PageThemeUtils.inputMode(state.inputMode);
-  };
-
-  const publicPopperAttrs = { trigger: 'hover' };
-
   return () => (
     <div className="app-head">
       <div className="app-head-logo">
@@ -50,55 +11,7 @@ export const AppHead = designPage(() => {
         <img src={logoImage}/>
       </div>
       <div className="app-head-operation">
-        <Select v-model={state.inputMode} onChange={onInputModeChange} size="mini" width="100" placeholder="输入框" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="输入框:填充" val="flat"/>
-          <SelectOption label="输入框:描边" val="stroke"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.primaryKey} onChange={onPrimaryChange} size="mini" width="90" placeholder="主题色" popperAttrs={publicPopperAttrs}>
-          {Object.entries(ThemePrimaryColors).map(([key, value]) => (
-            <SelectOption label={value!.label} val={key} key={key}>
-              {!!value!.primary && <span style={{ height: '1em', width: '1em', display: 'inline-block', marginRight: '4px', background: value!.primary }}/>}
-              <span>{value!.label}</span>
-            </SelectOption>
-          ))}
-        </Select>
-        &nbsp;
-        <Select v-model={state.size} onChange={onSizeChange} size="mini" width="90" placeholder="主题尺寸" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="大尺寸" val="large"/>
-          <SelectOption label="中等尺寸" val="normal"/>
-          <SelectOption label="小尺寸" val="small"/>
-          <SelectOption label="极小尺寸" val="mini"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.dark} onChange={onDarkChange} size="mini" width="90" placeholder="黑白主题" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="黑色主题" val="dark"/>
-          <SelectOption label="白色主题" val="light"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.shape} onChange={onShapeChange} size="mini" width="90" placeholder="圆角类型" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="圆角" val="round"/>
-          <SelectOption label="小圆角" val="square"/>
-          <SelectOption label="无圆角" val="none"/>
-        </Select>
-        &nbsp;
-        <Select v-model={state.zoom} onChange={onZoomChange} size="mini" width="90" placeholder="页面缩放" popperAttrs={publicPopperAttrs}>
-          <SelectOption label="0.6" val={0.6}/>
-          <SelectOption label="0.7" val={0.7}/>
-          <SelectOption label="0.8" val={0.8}/>
-          <SelectOption label="0.9" val={0.9}/>
-          <SelectOption label="1.0" val={null}/>
-          <SelectOption label="1.1" val={1.1}/>
-          <SelectOption label="1.2" val={1.2}/>
-          <SelectOption label="1.3" val={1.3}/>
-          <SelectOption label="1.4" val={1.4}/>
-          <SelectOption label="1.5" val={1.5}/>
-          <SelectOption label="1.6" val={1.6}/>
-          <SelectOption label="1.7" val={1.7}/>
-          <SelectOption label="1.8" val={1.8}/>
-          <SelectOption label="1.9" val={1.9}/>
-          <SelectOption label="2.0" val={2.0}/>
-        </Select>
+        <ThemeEditor/>
       </div>
     </div>
   );