jjb-lc-designable/react-settings-form/components/FontStyleSetter/index.js

基于alibaba-designable源码二次封装的表单设计器。

import React from 'react';
import { usePrefix, IconWidget } from 'jjb-lc-designable/react';
import { useField, Field, observer } from 'jjb-lc-formily/react';
import { Select, Radio, NumberPicker } from 'jjb-lc-formily/antd';
import { FoldItem } from '../FoldItem';
import { InputItems } from '../InputItems';
import { SizeInput } from '../SizeInput';
import { ColorInput } from '../ColorInput';
import cls from 'classnames';
const createFontFamilyOptions = fonts => {
  return fonts.map(font => {
    const splited = font.split('=');
    const label = splited?.[0];
    const value = splited?.[1];
    return {
      label: /*#__PURE__*/React.createElement("span", {
        style: {
          fontFamily: value
        }
      }, label),
      value
    };
  });
};
const FontFamilyOptions = createFontFamilyOptions(['宋体=SimSun', '微软雅黑=Microsoft Yahei', '苹方=PingFang SC', 'Andale Mono=andale mono,monospace', 'Arial=arial,helvetica,sans-serif', 'Arial Black=arial black,sans-serif', 'Book Antiqua=book antiqua,palatino,serif', 'Comic Sans MS=comic sans ms,sans-serif', 'Courier New=courier new,courier,monospace', 'Georgia=georgia,palatino,serif', 'Helvetica Neue=Helvetica Neue', 'Helvetica=helvetica,arial,sans-serif', 'Impact=impact,sans-serif', 'Symbol=symbol', 'Tahoma=tahoma,arial,helvetica,sans-serif', 'Terminal=terminal,monaco,monospace', 'Times New Roman=times new roman,times,serif', 'Trebuchet MS=trebuchet ms,geneva,sans-serif', 'Verdana=verdana,geneva,sans-serif']);
export const FontStyleSetter = observer(props => {
  const field = useField();
  const prefix = usePrefix('font-style-setter');
  return (
    /*#__PURE__*/
    // @ts-ignore
    React.createElement(FoldItem, {
      label: field.title,
      className: cls(prefix, props.className),
      style: props.style
    }, /*#__PURE__*/React.createElement(FoldItem.Base, null, /*#__PURE__*/React.createElement(Field, {
      name: "fontFamily",
      basePath: field.address.parent(),
      component: [Select, {
        style: {
          width: '100%'
        },
        placeholder: 'Helvetica Neue'
      }],
      dataSource: FontFamilyOptions
    })), /*#__PURE__*/React.createElement(FoldItem.Extra, null, /*#__PURE__*/React.createElement(InputItems, null, /*#__PURE__*/React.createElement(InputItems.Item, {
      icon: "FontWeight",
      width: "50%"
    }, /*#__PURE__*/React.createElement(Field, {
      name: "fontWeight",
      basePath: field.address.parent(),
      component: [NumberPicker, {
        placeholder: '400'
      }]
    })), /*#__PURE__*/React.createElement(InputItems.Item, {
      icon: "FontStyle",
      width: "50%"
    }, /*#__PURE__*/React.createElement(Field, {
      name: "fontStyle",
      basePath: field.address.parent(),
      dataSource: [{
        label: /*#__PURE__*/React.createElement(IconWidget, {
          infer: "NormalFontStyle"
        }),
        value: 'normal'
      }, {
        label: /*#__PURE__*/React.createElement(IconWidget, {
          infer: "ItalicFontStyle"
        }),
        value: 'italic'
      }],
      component: [Radio.Group, {
        optionType: 'button'
      }]
    })), /*#__PURE__*/React.createElement(InputItems.Item, {
      icon: "FontColor",
      width: "100%"
    }, /*#__PURE__*/React.createElement(Field, {
      name: "color",
      basePath: field.address.parent(),
      component: [ColorInput]
    })), /*#__PURE__*/React.createElement(InputItems.Item, {
      icon: "FontSize",
      width: "50%"
    }, /*#__PURE__*/React.createElement(Field, {
      name: "fontSize",
      basePath: field.address.parent(),
      component: [SizeInput, {
        exclude: ['auto']
      }]
    })), /*#__PURE__*/React.createElement(InputItems.Item, {
      icon: "LineHeight",
      width: "50%"
    }, /*#__PURE__*/React.createElement(Field, {
      name: "lineHeight",
      basePath: field.address.parent(),
      component: [SizeInput, {
        exclude: ['auto']
      }]
    })), /*#__PURE__*/React.createElement(InputItems.Item, {
      icon: "TextAlign"
    }, /*#__PURE__*/React.createElement(Field, {
      name: "textAlign",
      basePath: field.address.parent(),
      dataSource: [{
        label: /*#__PURE__*/React.createElement(IconWidget, {
          infer: "TextAlignLeft"
        }),
        value: 'left'
      }, {
        label: /*#__PURE__*/React.createElement(IconWidget, {
          infer: "TextAlignCenter"
        }),
        value: 'center'
      }, {
        label: /*#__PURE__*/React.createElement(IconWidget, {
          infer: "TextAlignRight"
        }),
        value: 'right'
      }, {
        label: /*#__PURE__*/React.createElement(IconWidget, {
          infer: "TextAlignJustify"
        }),
        value: 'justify'
      }],
      component: [Radio.Group, {
        optionType: 'button'
      }]
    })), /*#__PURE__*/React.createElement(InputItems.Item, {
      icon: "TextDecoration"
    }, /*#__PURE__*/React.createElement(Field, {
      name: "textDecoration",
      basePath: field.address.parent(),
      dataSource: [{
        label: '--',
        value: 'none'
      }, {
        label: /*#__PURE__*/React.createElement(IconWidget, {
          infer: "TextUnderline"
        }),
        value: 'underline'
      }, {
        label: /*#__PURE__*/React.createElement(IconWidget, {
          infer: "TextLineThrough"
        }),
        value: 'line-through'
      }],
      component: [Radio.Group, {
        optionType: 'button'
      }]
    })))))
  );
});