diff --git a/example/src/Create.js b/example/src/Create.js index 00dc5381ee3a18844c115662c0c16396da0777d3..aa80e157f707c2d682cf27552c851578d6918529 100644 --- a/example/src/Create.js +++ b/example/src/Create.js @@ -44,5 +44,6 @@ const PageConfig = [ Config.TreeSelect.NewCreate(Fields.TreeSelect), Config.CascadeSelect.NewCreate(Fields.Location), Config.BitSelect.NewCreate(Fields.Configuration), */ - Config.CharSelect.NewCreate(Fields.Authrise), + //Config.CharSelect.NewCreate(Fields.Authrise), + Config.TextArea.NewCreate(Fields.Description), ]; diff --git a/example/src/Detail.js b/example/src/Detail.js index fb0ad3223a99c8b21c8dd319dec9e3ed0e725e92..27a73171b1ce4d3aca83be14ff457cebba1b3dd7 100644 --- a/example/src/Detail.js +++ b/example/src/Detail.js @@ -18,7 +18,7 @@ export default class extends React.PureComponent { export const DetailData = { id: 1, - name: "测试名称", + name: "测试名称123", count: 15, gender: false, one_date: "2018-03-12", @@ -31,6 +31,7 @@ export const DetailData = { district: undefined, configuration: 6, authrise: "Vc", + description: "公共停车场是根据城市规划建造以及公共建筑配套专供社会车辆停放的（露天或室内）收费营业性停车场，称公共停车场。而公共停车场又分为路内、路外两种：一、路内临时性公共停车场路内临时停车场是指经批准，在规定时限，占用城市部分道路，允许停放大量车辆，以满足特大型活动（游行、集会等）的临时场地。" }; const PageConfig = [ @@ -46,4 +47,5 @@ const PageConfig = [ Config.CascadeSelect.NewDetail(Fields.Location), Config.BitSelect.NewDetail(Fields.Configuration), Config.CharSelect.NewDetail(Fields.Authrise), + Config.TextArea.NewDetail(Fields.Description), ]; diff --git a/example/src/Edit.js b/example/src/Edit.js index f5b8fdf66d64ae88f2aeaa1eeb2c8b7a68a489e7..cd5971b72fc0155a76f2c3e4e1924fe262dd30d5 100644 --- a/example/src/Edit.js +++ b/example/src/Edit.js @@ -37,4 +37,5 @@ const PageConfig = [ Config.TreeSelect.NewEdit(Fields.TreeSelect), Config.BitSelect.NewEdit(Fields.Configuration), Config.CharSelect.NewEdit(Fields.Authrise), + Config.TextArea.NewEdit(Fields.Description), ]; diff --git a/example/src/Field.js b/example/src/Field.js index f0b442ffb13d95a04a5f0278dc02c5e602982e39..02dccbea432d41e40614894b4ac577c233d23891 100644 --- a/example/src/Field.js +++ b/example/src/Field.js @@ -145,3 +145,10 @@ export const Authrise = Config.CharSelect.NewBase("authrise", "权限配置", { }, ], }); +export const Description = Config.TextArea.NewBase("description", "描述", { + placeholder: "aaaaaaaaa", + valueWidth: 200, + valueHeight: 60, + minRows: 2, + maxRows: 6 +}); diff --git a/lib/config/index.d.ts b/lib/config/index.d.ts index 8ff79d6dbb7718302f2bda458decf115f6a970ad..9adb9452c1c6f09e4b13cc97a1d9fda1837930e5 100644 --- a/lib/config/index.d.ts +++ b/lib/config/index.d.ts @@ -9,4 +9,5 @@ import * as Select from './select'; import * as Switch from './switch'; import * as Text from './text'; import * as TreeSelect from './tree_select'; -export { ArraySelect, Base, BitSelect, CascadeSelect, CharSelect, DateTime, Digit, Select, Switch, Text, TreeSelect, }; +import * as TextArea from './text_area'; +export { ArraySelect, Base, BitSelect, CascadeSelect, CharSelect, DateTime, Digit, Select, Switch, Text, TreeSelect, TextArea, }; diff --git a/lib/config/index.js b/lib/config/index.js index ba76eec74f30303687fd3679afb7af20b9cf702a..8371c24f82455ab3fcf130050ec41fe0f47c7c30 100644 --- a/lib/config/index.js +++ b/lib/config/index.js @@ -29,3 +29,5 @@ const Text = __importStar(require("./text")); exports.Text = Text; const TreeSelect = __importStar(require("./tree_select")); exports.TreeSelect = TreeSelect; +const TextArea = __importStar(require("./text_area")); +exports.TextArea = TextArea; diff --git a/lib/config/text_area.d.ts b/lib/config/text_area.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..b6a36f994e5d458eb652f930096f672399dbd172 --- /dev/null +++ b/lib/config/text_area.d.ts @@ -0,0 +1,38 @@ +/** + * 文本类型。 + */ +import * as Base from './base'; +export declare const Type = "text_area"; +export interface Options { + /** + * 提示文本。 + */ + placeholder: string | undefined; + /** + * (文本字段) 最大长度，0不限制。 + */ + maxLength: number; + /** + * 值宽度。 + */ + valueWidth?: number; + /** + * 值高度。 + */ + valueHeight?: number; + /** + * 最小行数。 + */ + minRows?: number; + /** + * 最大行数。 + */ + maxRows?: number; +} +export declare const DefaultOptions: Options; +export declare const NewBase: (name: string, label: string, options?: Partial) => Base.Config; +export declare const NewList: (base: Base.Config, options?: Partial) => Base.Config; +export declare const NewCreate: (base: Base.Config, options?: Partial) => Base.Config; +export declare const NewEdit: (base: Base.Config, options?: Partial) => Base.Config; +export declare const NewDetail: (base: Base.Config, options?: Partial) => Base.Config; +export declare const NewSearch: (base: Base.Config, options?: Partial) => Base.Config; diff --git a/lib/config/text_area.js b/lib/config/text_area.js new file mode 100644 index 0000000000000000000000000000000000000000..e07dd19c57249b058e7e97c86f989fc17e57cf5c --- /dev/null +++ b/lib/config/text_area.js @@ -0,0 +1,24 @@ +"use strict"; +/** + * 文本类型。 + */ +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; + result["default"] = mod; + return result; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const Base = __importStar(require("./base")); +exports.Type = "text_area"; +exports.DefaultOptions = { + placeholder: undefined, + maxLength: 0, +}; +exports.NewBase = Base.BaseGenerator(exports.Type, exports.DefaultOptions); +exports.NewList = Base.Generator(Base.DefaultListOptions); +exports.NewCreate = Base.Generator(Base.DefaultCreateOptions); +exports.NewEdit = Base.Generator(Base.DefaultEditOptions); +exports.NewDetail = Base.Generator(Base.DefaultDetailOptions); +exports.NewSearch = Base.Generator(Base.DefaultSearchOptions); diff --git a/lib/field/detail/index.d.ts b/lib/field/detail/index.d.ts index 483a0212f6308e9dbf450a31d17b18db78899b11..2322192dbdfa2b3f6dfa2233e04b644debfd3876 100644 --- a/lib/field/detail/index.d.ts +++ b/lib/field/detail/index.d.ts @@ -9,4 +9,5 @@ import './select'; import './switch'; import './text'; import './tree_select'; +import './text_area'; export { get, set, }; diff --git a/lib/field/detail/index.js b/lib/field/detail/index.js index 67d1133f31fa3fab10c007a75e80623559f4c0a1..5a88224499016a6583d1f3623e38a141c0d83a36 100644 --- a/lib/field/detail/index.js +++ b/lib/field/detail/index.js @@ -13,3 +13,4 @@ require("./select"); require("./switch"); require("./text"); require("./tree_select"); +require("./text_area"); diff --git a/lib/field/detail/text_area.d.ts b/lib/field/detail/text_area.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..b545f2a5ed29d9d76a1adf6a9cd69b4bbdf05881 --- /dev/null +++ b/lib/field/detail/text_area.d.ts @@ -0,0 +1,6 @@ +import * as React from 'react'; +import * as Storage from './storage'; +declare class TextView extends React.PureComponent { + render(): JSX.Element; +} +export default TextView; diff --git a/lib/field/detail/text_area.js b/lib/field/detail/text_area.js new file mode 100644 index 0000000000000000000000000000000000000000..b409839e86cb2d735f376ce9f5fdd46be3997961 --- /dev/null +++ b/lib/field/detail/text_area.js @@ -0,0 +1,28 @@ +"use strict"; +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; + result["default"] = mod; + return result; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const React = __importStar(require("react")); +const Storage = __importStar(require("./storage")); +const Field = __importStar(require("../../config")); +class TextView extends React.PureComponent { + render() { + const field = this.props.field; + const data = this.props.data; + let value = ""; + if (data[field.name] !== undefined) { + value += data[field.name]; + } + return value === "" + ? React.createElement("div", { className: "xc-detail-content" }) + : React.createElement("div", { className: "xc-detail-content" }, + React.createElement("span", { style: { width: field.options.valueWidth || "auto" } }, value)); + } +} +Storage.set(Field.TextArea.Type, (option) => React.createElement(TextView, Object.assign({}, option))); +exports.default = TextView; diff --git a/lib/field/modify/index.d.ts b/lib/field/modify/index.d.ts index 9c392f941f58cd72ab4c795f0dc3a9952cf34402..7c8480a0452cc9b4fccb106a70afbf231938c7ab 100644 --- a/lib/field/modify/index.d.ts +++ b/lib/field/modify/index.d.ts @@ -9,4 +9,5 @@ import './select'; import './switch'; import './text'; import './tree_select'; +import './text_area'; export { get, set, Prefix, }; diff --git a/lib/field/modify/index.js b/lib/field/modify/index.js index cc5cc8cb2a5ea0fefd078bc287c39c7b7d8758d6..43ff47d521e78267ace2149d6d142dffb9481276 100644 --- a/lib/field/modify/index.js +++ b/lib/field/modify/index.js @@ -14,3 +14,4 @@ require("./select"); require("./switch"); require("./text"); require("./tree_select"); +require("./text_area"); diff --git a/lib/field/modify/text_area.d.ts b/lib/field/modify/text_area.d.ts new file mode 100644 index 0000000000000000000000000000000000000000..b545f2a5ed29d9d76a1adf6a9cd69b4bbdf05881 --- /dev/null +++ b/lib/field/modify/text_area.d.ts @@ -0,0 +1,6 @@ +import * as React from 'react'; +import * as Storage from './storage'; +declare class TextView extends React.PureComponent { + render(): JSX.Element; +} +export default TextView; diff --git a/lib/field/modify/text_area.js b/lib/field/modify/text_area.js new file mode 100644 index 0000000000000000000000000000000000000000..9017acf2b9205ea996a688eab42207e54a292446 --- /dev/null +++ b/lib/field/modify/text_area.js @@ -0,0 +1,32 @@ +"use strict"; +var __importStar = (this && this.__importStar) || function (mod) { + if (mod && mod.__esModule) return mod; + var result = {}; + if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; + result["default"] = mod; + return result; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +const React = __importStar(require("react")); +const antd_1 = require("antd"); +const Storage = __importStar(require("./storage")); +const Field = __importStar(require("../../config")); +const { TextArea } = antd_1.Input; +// TODO numberOfLines支持 +class TextView extends React.PureComponent { + render() { + const field = this.props.field; + const form = this.props.form; + const label = field.options.label || field.label; + return (React.createElement(antd_1.Form.Item, { className: "xc-modify-content", label: label }, form.getFieldDecorator(field.name, { + rules: [{ + required: field.options.required, + message: "请填写" + label, + max: field.options.maxLength > 0 ? field.options.maxLength : undefined, + }], + initialValue: this.props.initialValue || "", + })(React.createElement(TextArea, { placeholder: field.options.placeholder, style: { width: field.options.valueWidth || 200, height: field.options.valueHeight || 60 }, autoSize: { minRows: field.options.minRows || 2, maxRows: field.options.maxRows || 6 } })))); + } +} +Storage.set(Field.TextArea.Type, (option) => React.createElement(TextView, Object.assign({}, option))); +exports.default = TextView; diff --git a/lib/page/create.d.ts b/lib/page/create.d.ts index 8a49727cd2f4a7b1838a5a0060e364b23ba9318d..40406ea555aa7d103eff18ea581d753fb65caf65 100644 --- a/lib/page/create.d.ts +++ b/lib/page/create.d.ts @@ -54,5 +54,5 @@ declare class CreateComponent extends React.PureComponent { _onSubmit: (e: React.FormEvent) => void; _onReset: (e: React.MouseEvent) => void; } -declare const _default: import("antd/lib/form/interface").ConnectedComponentClass>; +declare const _default: import("antd/lib/form/interface").ConnectedComponentClass>; export default _default; diff --git a/lib/page/edit.d.ts b/lib/page/edit.d.ts index e8019fb549ecf88c91a6680b7d2fc2a47fffbd00..a28d7554c39d14278892749edfd9dde2710a2365 100644 --- a/lib/page/edit.d.ts +++ b/lib/page/edit.d.ts @@ -60,5 +60,5 @@ declare class EditComponent extends React.PureComponent { _onSubmit: (e: React.FormEvent) => void; _onReset: (e: React.MouseEvent) => void; } -declare const _default: import("antd/lib/form/interface").ConnectedComponentClass>; +declare const _default: import("antd/lib/form/interface").ConnectedComponentClass>; export default _default; diff --git a/src/config/index.ts b/src/config/index.ts index 4d4da351206d19a0e8cb1263becfbd579fd104c0..98b3462298aee2843f371a8f8c93472344f3632a 100644 --- a/src/config/index.ts +++ b/src/config/index.ts @@ -9,6 +9,7 @@ import * as Select from './select'; import * as Switch from './switch'; import * as Text from './text'; import * as TreeSelect from './tree_select'; +import * as TextArea from './text_area'; export { ArraySelect, @@ -22,4 +23,5 @@ export { Switch, Text, TreeSelect, + TextArea, } diff --git a/src/config/text_area.ts b/src/config/text_area.ts new file mode 100644 index 0000000000000000000000000000000000000000..6f0505f50bdd26177a2ceebfe0d71adea3798aba --- /dev/null +++ b/src/config/text_area.ts @@ -0,0 +1,52 @@ +/** + * 文本类型。 + */ + +import * as Base from './base'; + +export const Type = "text_area"; + +export interface Options { + /** + * 提示文本。 + */ + placeholder: string | undefined; + /** + * (文本字段) 最大长度，0不限制。 + */ + maxLength: number; + + /** + * 值宽度。 + */ + valueWidth?: number; + /** + * 值高度。 + */ + valueHeight?: number; + /** + * 最小行数。 + */ + minRows?: number; + /** + * 最大行数。 + */ + maxRows?: number; +} + +export const DefaultOptions: Options = { + placeholder: undefined, + maxLength: 0, +}; + +export const NewBase = Base.BaseGenerator(Type, DefaultOptions); + +export const NewList = Base.Generator(Base.DefaultListOptions); + +export const NewCreate = Base.Generator(Base.DefaultCreateOptions); + +export const NewEdit = Base.Generator(Base.DefaultEditOptions); + +export const NewDetail = Base.Generator(Base.DefaultDetailOptions); + +export const NewSearch = Base.Generator(Base.DefaultSearchOptions); diff --git a/src/field/detail/index.ts b/src/field/detail/index.ts index 1179a8c58df7e0c57a43e613eb3bd2e0777b0264..1a1010f8bfe8effd30836fb041780e054c69730f 100644 --- a/src/field/detail/index.ts +++ b/src/field/detail/index.ts @@ -9,6 +9,7 @@ import './select'; import './switch'; import './text'; import './tree_select'; +import './text_area'; export { get, diff --git a/src/field/detail/text_area.tsx b/src/field/detail/text_area.tsx new file mode 100644 index 0000000000000000000000000000000000000000..a6a3a8b258a2757423e531f80709c0ce77b31a35 --- /dev/null +++ b/src/field/detail/text_area.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import * as Storage from './storage'; +import * as Field from '../../config'; + +type TextAreaDetail = Field.Base.Config; + +class TextView extends React.PureComponent { + render() { + const field = this.props.field as TextAreaDetail; + const data = this.props.data; + let value = ""; + if (data[field.name] !== undefined) { + value += data[field.name]; + } + return value === "" + ?
+ :
+ + {value} + +
; + } +} + +Storage.set(Field.TextArea.Type, (option) => ); + +export default TextView; diff --git a/src/field/modify/index.ts b/src/field/modify/index.ts index 1645bc4458eeb7e4e9c267fe6e52c154bc7b321d..87946ab76905f4e644143482676d364200f3712f 100644 --- a/src/field/modify/index.ts +++ b/src/field/modify/index.ts @@ -9,6 +9,7 @@ import './select'; import './switch'; import './text'; import './tree_select'; +import './text_area'; export { get, diff --git a/src/field/modify/text_area.tsx b/src/field/modify/text_area.tsx new file mode 100644 index 0000000000000000000000000000000000000000..c182d1f28ba40bce3ad9cf7bb9ec7c2d94815fd0 --- /dev/null +++ b/src/field/modify/text_area.tsx @@ -0,0 +1,39 @@ +import * as React from 'react'; +import { Input, Form } from 'antd'; +import * as Storage from './storage'; +import * as Field from '../../config'; + +const { TextArea } = Input; + +type TextCreate = Field.Base.Config; + +// TODO numberOfLines支持 +class TextView extends React.PureComponent { + render() { + const field = this.props.field as TextCreate; + const form = this.props.form; + const label = field.options.label || field.label; + return ( + + {form.getFieldDecorator(field.name, { + rules: [{ + required: field.options.required, + message: "请填写" + label, + max: field.options.maxLength > 0 ? field.options.maxLength : undefined, + }], + initialValue: this.props.initialValue || "", + })( +