From 31196cad088252b12948db5a0e2e3b3ea070a6f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8D=A3=E5=BD=AC?= Date: Mon, 10 Aug 2020 16:50:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=F0=9F=A4=92=EF=B8=8F=E6=96=B0=E5=A2=9Eico?= =?UTF-8?q?nsetter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/demo/public/assets.json | 4 +- .../editor-setters/src/color-setter/index.tsx | 47 +++---- .../editor-setters/src/icon-setter/index.scss | 44 +++++++ .../editor-setters/src/icon-setter/index.tsx | 121 ++++++++++++++++++ packages/editor-setters/src/index.tsx | 45 ++++--- .../editor-setters/src/mixin-setter/index.tsx | 66 +++++----- .../editor-setters/src/style-setter/index.tsx | 6 +- .../src/transducers/parse-props.ts | 8 +- 8 files changed, 252 insertions(+), 89 deletions(-) create mode 100644 packages/editor-setters/src/icon-setter/index.scss create mode 100644 packages/editor-setters/src/icon-setter/index.tsx diff --git a/packages/demo/public/assets.json b/packages/demo/public/assets.json index 2caf8ae3f..f791136bf 100644 --- a/packages/demo/public/assets.json +++ b/packages/demo/public/assets.json @@ -9776,7 +9776,7 @@ }, { "name": "icon", - "propType": "string", + "propType": "icon", "description": "图标" }, { @@ -10857,7 +10857,7 @@ }, { "name": "icon", - "propType": "string", + "propType": "icon", "description": "图标" }, { diff --git a/packages/editor-setters/src/color-setter/index.tsx b/packages/editor-setters/src/color-setter/index.tsx index cd6358c61..1ae6ada64 100644 --- a/packages/editor-setters/src/color-setter/index.tsx +++ b/packages/editor-setters/src/color-setter/index.tsx @@ -18,23 +18,23 @@ export default class ColorPickerView extends PureComponent { static display = 'ColorPicker'; static propTypes = { onChange: PropTypes.func, - value: PropTypes.string + value: PropTypes.string, }; static defaultProps = { onChange: () => {}, - value: '' + value: '', }; - constructor(props: Readonly<{value: string; defaultValue: string}>) { + constructor(props: Readonly<{ value: string; defaultValue: string }>) { super(props); this.state = { - value: props.value || props.defaultValue + value: props.value || props.defaultValue, }; } - static getDerivedStateFromProps(props: { value: string; }, state: { preValue: string; }) { + static getDerivedStateFromProps(props: { value: string }, state: { preValue: string }) { if (props.value != state.preValue) { return { preValue: props.value, - value: props.value + value: props.value, }; } return null; @@ -42,35 +42,35 @@ export default class ColorPickerView extends PureComponent { onChangeComplete = (color: Color): void => { let value; if (color.rgb.a < 1) { - let rgb = color.rgb; - let rgba = [rgb.r, rgb.g, rgb.b, rgb.a]; + const rgb = color.rgb; + const rgba = [rgb.r, rgb.g, rgb.b, rgb.a]; value = `rgba(${rgba.join(',')})`; } else { value = color.hex; } this.setState({ - value + value, }); this.props.onChange && this.props.onChange(value); - } + }; onInputChange = (value: string): void => { if (/^[0-9a-zA-Z]{6}$/.test(value)) value = '#' + value; this.setState({ - value + value, }); this.props.onChange && this.props.onChange(value); - } - render(): React.ReactNode { + }; + render(): React.ReactNode { const { value, onChange, ...restProps } = this.props; - let boxStyle = { - backgroundColor: this.state.value + const boxStyle = { + backgroundColor: this.state.value, }; - let triggerNode = ( + const triggerNode = (
); - let InnerBeforeNode = ( + const InnerBeforeNode = ( { alignEdge="edge" offset={[-3, -6]} > - + ); return ( - + ); } } diff --git a/packages/editor-setters/src/icon-setter/index.scss b/packages/editor-setters/src/icon-setter/index.scss new file mode 100644 index 000000000..ad419cff8 --- /dev/null +++ b/packages/editor-setters/src/icon-setter/index.scss @@ -0,0 +1,44 @@ +.lowcode-icon-box { + display: inline-block; + margin-right: -5px; + padding: 3px 0 3px 0; + width: 26px; + height: 26px; + text-align: center; + line-height: 20px; + background: #f2f2f2; + div { + width: 20px; + height: 20px; + border: 1px solid #ddd; + } +} + + +.lc-icon-setter{ + .next-input{ + width: auto !important; + } +} + + +.lowcode-icon-setter-popup{ + max-width: 354px; + .lowcode-icon-list{ + + overflow: auto; + li{ + float: left; + margin-bottom: 10px; + width: 40px; + color: #666; + cursor: pointer; + text-align: center; + + &:hover{ + color: #000; + } + } + } +} + diff --git a/packages/editor-setters/src/icon-setter/index.tsx b/packages/editor-setters/src/icon-setter/index.tsx new file mode 100644 index 000000000..7bf84b31d --- /dev/null +++ b/packages/editor-setters/src/icon-setter/index.tsx @@ -0,0 +1,121 @@ +import React, { PureComponent } from 'react'; +// import PropTypes from 'prop-types'; +import { Input, Icon, Balloon } from '@alifd/next'; + +import './index.scss'; + +const icons = [ + 'smile', + 'cry', + 'success', + 'warning', + 'prompt', + 'error', + 'help', + 'clock', + 'success-filling', + 'delete-filling', + 'favorites-filling', + 'add', + 'minus', + 'arrow-up', + 'arrow-down', + 'arrow-left', + 'arrow-right', + 'arrow-double-left', + 'arrow-double-right', + 'switch', + 'sorting', + 'descending', + 'ascending', + 'select', + 'semi-select', + 'loading', + 'search', + 'close', + 'ellipsis', + 'picture', + 'calendar', + 'ashbin', + 'upload', + 'download', + 'set', + 'edit', + 'refresh', + 'filter', + 'attachment', + 'account', + 'email', + 'atm', + 'copy', + 'exit', + 'eye', + 'eye-close', + 'toggle-left', + 'toggle-right', + 'lock', + 'unlock', + 'chart-pie', + 'chart-bar', + 'form', + 'detail', + 'list', + 'dashboard', +]; +interface IconSetterProps { + value: string; + onChange: (icon: string) => undefined; + icons: string[]; +} +export default class IconSetter extends PureComponent { + static defaultProps = { + value: '', + icons: icons, + onChange: (icon: string) => undefined, + }; + + onInputChange() { + console.log(this); + } + + onSelectIcon(icon: string) { + const { onChange } = this.props; + onChange(icon); + } + + render() { + const { icons, value } = this.props; + + const triggerNode = ( +
+ +
+ ); + const InnerBeforeNode = ( + +
    + {icons.map((icon) => ( +
  • this.onSelectIcon(icon)}> + +
    • + ))} +
+ + ); + + return ( +
+ +
+ ); + } +} diff --git a/packages/editor-setters/src/index.tsx b/packages/editor-setters/src/index.tsx index df88e2b95..3dc8f157a 100644 --- a/packages/editor-setters/src/index.tsx +++ b/packages/editor-setters/src/index.tsx @@ -1,3 +1,4 @@ +import React, { Component } from 'react'; import { registerSetter } from '@ali/lowcode-editor-core'; import { isJSExpression } from '@ali/lowcode-types'; import { DatePicker, TimePicker, Input, Radio, Select, Switch, NumberPicker } from '@alifd/next'; @@ -6,7 +7,8 @@ import ColorSetter from './color-setter'; import JsonSetter from './json-setter'; import EventsSetter from './events-setter'; import StyleSetter from './style-setter'; -import React, { Component } from 'react'; +import IconSetter from './icon-setter'; + export const StringSetter = { component: Input, defaultProps: { placeholder: '请输入', style: { maxWidth: 180 } }, @@ -15,14 +17,16 @@ export const StringSetter = { }; export const NumberSetter = NumberPicker; export class BoolSetter extends Component { - render() { const { onChange, value, defaultValue } = this.props; - return { - onChange(val) - } - }/>; + return ( + { + onChange(val); + }} + /> + ); } } export const SelectSetter = Select; @@ -49,25 +53,27 @@ export const DateRangeSetter = DatePicker.RangePicker; export { ExpressionSetter, EventsSetter }; class StringDateSetter extends Component { - render() { const { onChange, editor } = this.props; - return { - onChange(val.format()) - } - }/>; + return ( + { + onChange(val.format()); + }} + /> + ); } } class StringTimePicker extends Component { - render() { const { onChange, editor } = this.props; - return { - onChange(val.format('HH:mm:ss')) - } - }/>; + return ( + { + onChange(val.format('HH:mm:ss')); + }} + /> + ); } } @@ -97,6 +103,7 @@ const builtinSetters: any = { ColorSetter, JsonSetter, StyleSetter, + IconSetter, }; registerSetter(builtinSetters); diff --git a/packages/editor-setters/src/mixin-setter/index.tsx b/packages/editor-setters/src/mixin-setter/index.tsx index a77664758..ded1ea12b 100644 --- a/packages/editor-setters/src/mixin-setter/index.tsx +++ b/packages/editor-setters/src/mixin-setter/index.tsx @@ -25,25 +25,27 @@ export default class Mixin extends PureComponent { static defaultProps = { locale: 'zh-CN', messages: zhCN, - types: [{ - "name": "StringSetter", - "props": {} - }], + types: [ + { + name: 'StringSetter', + props: {}, + }, + ], }; typeMap: any; - i18n: (key: any, values?: {}) => string | void | (string | void)[]; + i18n: (key: any, values?: {}) => string | void | Array; constructor(props: Readonly<{}>) { super(props); - let type = props.defaultType;// judgeTypeHandler(props, {}); + const type = props.defaultType; // judgeTypeHandler(props, {}); this.i18n = generateI18n(props.locale, props.messages); this.state = { preType: type, - type + type, }; } changeType(type: string) { if (typeof type === 'object' || type === this.state.type) return; - let { onChange } = this.props; + const { onChange } = this.props; let newValue = undefined; const setterProps = this.typeMap[type]['props']; if (setterProps) { @@ -60,18 +62,10 @@ export default class Mixin extends PureComponent { onChange && onChange(newValue); } render() { - const { - style = {}, - className, - locale, - messages, - types = [], - defaultType, - ...restProps - } = this.props; + const { style = {}, className, locale, messages, types = [], defaultType, ...restProps } = this.props; this.typeMap = {}; - let realTypes: any[] = []; - types.forEach( (el: { name: any; props: any; }) => { + const realTypes: any[] = []; + types.forEach((el: { name: any; props: any }) => { const { name, props } = el; const Setter = getSetter(name); if (Setter) { @@ -79,15 +73,15 @@ export default class Mixin extends PureComponent { label: name, component: Setter.component, props, - } + }; } realTypes.push(name); - }) + }); let moreBtnNode = null; //如果只有2种，且有变量表达式，则直接展示变量按钮 if (realTypes.length > 1) { - let isTwoType = !!(realTypes.length === 2 && ~realTypes.indexOf('ExpressionSetter')); - let btnProps = { + const isTwoType = !!(realTypes.length === 2 && ~realTypes.indexOf('ExpressionSetter')); + const btnProps = { size: 'small', text: true, style: { @@ -100,13 +94,13 @@ export default class Mixin extends PureComponent { width: 16, height: 16, lineHeight: '16px', - textAlign: 'center' - } + textAlign: 'center', + }, }; if (isTwoType) { btnProps.onClick = this.changeType.bind(this, realTypes.indexOf(this.state.type) ? realTypes[0] : realTypes[1]); } - let triggerNode = ( + const triggerNode = ( @@ -114,19 +108,19 @@ export default class Mixin extends PureComponent { if (isTwoType) { moreBtnNode = triggerNode; } else { - let MenuItems: {} | null | undefined = []; - realTypes.map(type => { + const MenuItems: {} | null | undefined = []; + realTypes.map((type) => { if (this.typeMap[type]) { MenuItems.push({this.typeMap[type]['label']}); } else { console.error( this.i18n('typeError', { - type - }) + type, + }), ); } }); - let MenuNode = ( + const MenuNode = ( +
{moreBtnNode}
diff --git a/packages/editor-setters/src/style-setter/index.tsx b/packages/editor-setters/src/style-setter/index.tsx index be7001d63..b6a75679c 100644 --- a/packages/editor-setters/src/style-setter/index.tsx +++ b/packages/editor-setters/src/style-setter/index.tsx @@ -4,7 +4,7 @@ import PropTypes from 'prop-types'; import LowStyleSetter from '@ali/lc-style-setter'; import { globalLocale } from '@ali/lowcode-editor-core'; -export default class StyleSetter extends Component{ +export default class StyleSetter extends Component { static displayName = 'StyleSetter'; static propTypes = { @@ -15,7 +15,7 @@ export default class StyleSetter extends Component{ }; static defaultProps = { value: {}, - onChange: () => {}, + onChange: () => { }, placeholder: '', locale: globalLocale.getLocale() || 'en-US' }; @@ -25,7 +25,7 @@ export default class StyleSetter extends Component{ onChange(val.native); } - render () { + render() { const { value } = this.props; return (
diff --git a/packages/editor-skeleton/src/transducers/parse-props.ts b/packages/editor-skeleton/src/transducers/parse-props.ts index 618a7d100..70c42eb6c 100644 --- a/packages/editor-skeleton/src/transducers/parse-props.ts +++ b/packages/editor-skeleton/src/transducers/parse-props.ts @@ -54,6 +54,12 @@ function propTypeToSetter(propType: PropType): SetterType { initialValue: '', }; + case 'icon': + return { + componentName: 'IconSetter', + isRequired, + initialValue: '', + }; case 'number': return { componentName: 'NumberSetter', @@ -164,7 +170,7 @@ function propTypeToSetter(propType: PropType): SetterType { componentName: 'MixedSetter', props: { // TODO: - setters: (propType as OneOfType).value.map(item => propTypeToSetter(item)), + setters: (propType as OneOfType).value.map((item) => propTypeToSetter(item)), }, isRequired, };