feat(@uform/antd/next): support array classname

alibaba · Jun 28, 2019 · f0c853a · f0c853a
1 parent b5f868b
commit f0c853a
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 54 deletions.
diff --git a/packages/antd/src/fields/array.js b/packages/antd/src/fields/array.js
@@ -33,7 +33,7 @@ export const TextButton = styled.div.attrs({
   className: 'ant-btn-text'
 })`
   display: inline-block;
-  height:20px;
+  height: 20px;
   line-height: 20px;
   cursor: pointer;
   .op-name {
@@ -49,33 +49,34 @@ export const TextButton = styled.div.attrs({
 export const ArrayField = createArrayField({
   CircleButton,
   TextButton,
-  AddIcon: () => <Icon type='plus' />,
-  RemoveIcon: () => <Icon type='delete' />,
-  MoveDownIcon: () => <Icon type='down' />,
-  MoveUpIcon: () => <Icon type='up' />
+  AddIcon: () => <Icon type="plus" />,
+  RemoveIcon: () => <Icon type="delete" />,
+  MoveDownIcon: () => <Icon type="down" />,
+  MoveUpIcon: () => <Icon type="up" />
 })
 
 registerFormField(
   'array',
   styled(
     class extends ArrayField {
       render() {
-        const { className, name, schema, value, renderField } = this.props
-        const style = (schema['x-props'] && schema['x-props'].style) || {}
+        const { className, name, value, renderField } = this.props
+        const cls = this.getProps('className')
+        const style = this.getProps('style')
         return (
           <div
-            className={className}
+            className={`${className} ${cls}`}
             style={style}
             onClick={this.onClearErrorHandler()}
           >
             {value.map((item, index) => {
               return (
-                <div className='array-item' key={`${name}.${index}`}>
-                  <div className='array-index'>
+                <div className="array-item" key={`${name}.${index}`}>
+                  <div className="array-index">
                     <span>{index + 1}</span>
                   </div>
-                  <div className='array-item-wrapper'>{renderField(index)}</div>
-                  <div className='array-item-operator'>
+                  <div className="array-item-wrapper">{renderField(index)}</div>
+                  <div className="array-item-operator">
                     {this.renderRemove(index, item)}
                     {this.renderMoveDown(index, item)}
                     {this.renderMoveUp(index, item)}

diff --git a/packages/antd/src/fields/cards.js b/packages/antd/src/fields/cards.js
@@ -20,7 +20,11 @@ const FormCardsField = styled(
 
     renderEmpty(title) {
       return (
-        <Card style={this.getProps('style')} title={title} className='card-list'>
+        <Card
+          style={this.getProps('style')}
+          title={title}
+          className="card-list"
+        >
           {super.renderEmpty()}
         </Card>
       )
@@ -30,6 +34,8 @@ const FormCardsField = styled(
       const { value, className, schema, renderField } = this.props
       const {
         title,
+        style,
+        className: cls,
         renderAddition,
         renderRemove,
         renderEmpty,
@@ -39,7 +45,11 @@ const FormCardsField = styled(
         ...others
       } = this.getProps() || {}
       return (
-        <div className={className} onClick={this.onClearErrorHandler()}>
+        <div
+          className={`${className} ${cls}`}
+          style={style}
+          onClick={this.onClearErrorHandler()}
+        >
           {toArr(value).map((item, index) => {
             return (
               <Card
@@ -49,7 +59,7 @@ const FormCardsField = styled(
                     {index + 1}. {title || schema.title}
                   </span>
                 }
-                className='card-list'
+                className="card-list"
                 key={index}
                 extra={this.renderOperations(item, index)}
               >
@@ -58,7 +68,7 @@ const FormCardsField = styled(
             )
           })}
           {value.length === 0 && this.renderEmpty(title)}
-          <div className='addition-wrapper'>
+          <div className="addition-wrapper">
             {value.length > 0 && this.renderAddition()}
           </div>
         </div>

diff --git a/packages/antd/src/fields/table.js b/packages/antd/src/fields/table.js
@@ -254,11 +254,12 @@ registerFormField(
           renderField,
           getOrderProperties
         } = this.props
-        const style = schema['x-props'] && schema['x-props'].style
-        const operationsWidth = schema['x-props'] && schema['x-props'].operationsWidth
+        const cls = this.getProps('className')
+        const style = this.getProps('style')
+        const operationsWidth = this.getProps('operationsWidth')
         return (
           <div
-            className={className}
+            className={`${className} ${cls}`}
             style={style}
             onClick={this.onClearErrorHandler()}
           >

diff --git a/packages/antd/src/form.js b/packages/antd/src/form.js
@@ -175,6 +175,7 @@ export const FormItem = styled(
         isTableColItem,
         validateState,
         autoAddColon,
+        maxTipsNum,
         required,
         type,
         schema,

diff --git a/packages/next/src/fields/array.js b/packages/next/src/fields/array.js
@@ -37,19 +37,19 @@ export const CircleButton = styled.div.attrs({ className: 'cricle-btn' })`
 export const ArrayField = createArrayField({
   CircleButton,
   TextButton: props => (
-    <Button text size='large'>
+    <Button text size="large">
       {props.children}
     </Button>
   ),
-  AddIcon: () => <Icon type='add' className='next-icon-first' />,
+  AddIcon: () => <Icon type="add" className="next-icon-first" />,
   RemoveIcon: () => (
-    <Icon size='xs' type='ashbin' className='next-icon-first' />
+    <Icon size="xs" type="ashbin" className="next-icon-first" />
   ),
   MoveDownIcon: () => (
-    <Icon size='xs' type='arrow-down' className='next-icon-first' />
+    <Icon size="xs" type="arrow-down" className="next-icon-first" />
   ),
   MoveUpIcon: () => (
-    <Icon size='xs' type='arrow-up' className='next-icon-first' />
+    <Icon size="xs" type="arrow-up" className="next-icon-first" />
   )
 })
 
@@ -58,22 +58,23 @@ registerFormField(
   styled(
     class extends ArrayField {
       render() {
-        const { className, name, schema, value, renderField } = this.props
-        const style = (schema['x-props'] && schema['x-props'].style) || {}
+        const { className, name, value, renderField } = this.props
+        const cls = this.getProps('className')
+        const style = this.getProps('style')
         return (
           <div
-            className={className}
+            className={`${className} ${cls}`}
             style={style}
             onClick={this.onClearErrorHandler()}
           >
             {value.map((item, index) => {
               return (
-                <div className='array-item' key={`${name}.${index}`}>
-                  <div className='array-index'>
+                <div className="array-item" key={`${name}.${index}`}>
+                  <div className="array-index">
                     <span>{index + 1}</span>
                   </div>
-                  <div className='array-item-wrapper'>{renderField(index)}</div>
-                  <div className='array-item-operator'>
+                  <div className="array-item-wrapper">{renderField(index)}</div>
+                  <div className="array-item-operator">
                     {this.renderRemove(index, item)}
                     {this.renderMoveDown(index, item)}
                     {this.renderMoveUp(index, item)}

diff --git a/packages/next/src/fields/cards.js b/packages/next/src/fields/cards.js
@@ -20,7 +20,12 @@ const FormCardsField = styled(
 
     renderEmpty(title) {
       return (
-        <Card style={this.getProps('style')} title={title} className='card-list' contentHeight='auto'>
+        <Card
+          style={this.getProps('style')}
+          title={title}
+          className="card-list"
+          contentHeight="auto"
+        >
           {super.renderEmpty()}
         </Card>
       )
@@ -30,6 +35,8 @@ const FormCardsField = styled(
       const { value, className, schema, renderField } = this.props
       const {
         title,
+        style,
+        className: cls,
         renderAddition,
         renderRemove,
         renderEmpty,
@@ -39,7 +46,11 @@ const FormCardsField = styled(
         ...others
       } = this.getProps() || {}
       return (
-        <div className={className} onClick={this.onClearErrorHandler()}>
+        <div
+          className={`${className} ${cls}`}
+          style={style}
+          onClick={this.onClearErrorHandler()}
+        >
           {toArr(value).map((item, index) => {
             return (
               <Card
@@ -49,17 +60,17 @@ const FormCardsField = styled(
                     {index + 1}. {title || schema.title}
                   </span>
                 }
-                className='card-list'
+                className="card-list"
                 key={index}
-                contentHeight='auto'
+                contentHeight="auto"
                 extra={this.renderOperations(item, index)}
               >
                 {renderField(index)}
               </Card>
             )
           })}
           {value.length === 0 && this.renderEmpty(title)}
-          <div className='addition-wrapper'>
+          <div className="addition-wrapper">
             {value.length > 0 && this.renderAddition()}
           </div>
         </div>

diff --git a/packages/next/src/fields/table.js b/packages/next/src/fields/table.js
@@ -11,7 +11,7 @@ const Table = styled(
   class Table extends Component {
     renderCell({ record, col, rowIndex, colIndex }) {
       return (
-        <div className='next-table-cell-wrapper'>
+        <div className="next-table-cell-wrapper">
           {isFn(col.cell)
             ? col.cell(
               record ? record[col.dataIndex] : undefined,
@@ -27,18 +27,18 @@ const Table = styled(
 
     renderTable(columns, dataSource) {
       return (
-        <div className='next-table-body'>
+        <div className="next-table-body">
           <table>
             <thead>
               <tr>
                 {columns.map((col, index) => {
                   return (
                     <th
                       key={index}
-                      className='next-table-header-node'
+                      className="next-table-header-node"
                       style={{ minWidth: col.width }}
                     >
-                      <div className='next-table-cell-wrapper'>{col.title}</div>
+                      <div className="next-table-cell-wrapper">{col.title}</div>
                     </th>
                   )
                 })}
@@ -47,10 +47,10 @@ const Table = styled(
             <tbody>
               {dataSource.map((record, rowIndex) => {
                 return (
-                  <tr key={rowIndex} className='next-table-row'>
+                  <tr key={rowIndex} className="next-table-row">
                     {columns.map((col, colIndex) => {
                       return (
-                        <td key={colIndex} className='next-table-cell'>
+                        <td key={colIndex} className="next-table-cell">
                           {this.renderCell({
                             record,
                             col,
@@ -73,11 +73,11 @@ const Table = styled(
     renderPlacehodler(dataSource, columns) {
       if (dataSource.length === 0) {
         return (
-          <tr className='next-table-row'>
-            <td className='next-table-cell' colSpan={columns.length}>
-              <div className='next-table-empty' style={{ padding: 10 }}>
+          <tr className="next-table-row">
+            <td className="next-table-cell" colSpan={columns.length}>
+              <div className="next-table-empty" style={{ padding: 10 }}>
                 <img
-                  src='//img.alicdn.com/tfs/TB1cVncKAzoK1RjSZFlXXai4VXa-184-152.svg'
+                  src="//img.alicdn.com/tfs/TB1cVncKAzoK1RjSZFlXXai4VXa-184-152.svg"
                   style={{ height: 60 }}
                 />
               </div>
@@ -108,8 +108,8 @@ const Table = styled(
       const dataSource = toArr(this.props.dataSource)
       return (
         <div className={this.props.className}>
-          <div className='next-table zebra'>
-            <div className='next-table-inner'>
+          <div className="next-table zebra">
+            <div className="next-table-inner">
               {this.renderTable(columns, dataSource)}
             </div>
           </div>
@@ -254,11 +254,12 @@ registerFormField(
           renderField,
           getOrderProperties
         } = this.props
-        const style = schema['x-props'] && schema['x-props'].style
-        const operationsWidth = schema['x-props'] && schema['x-props'].operationsWidth
+        const cls = this.getProps('className')
+        const style = this.getProps('style')
+        const operationsWidth = this.getProps('operationsWidth')
         return (
           <div
-            className={className}
+            className={`${className} ${cls}`}
             style={style}
             onClick={this.onClearErrorHandler()}
           >
@@ -290,13 +291,13 @@ registerFormField(
                   []
                 )}
                 <Column
-                  key='operations'
+                  key="operations"
                   title={locale.operations}
-                  dataIndex='operations'
+                  dataIndex="operations"
                   width={operationsWidth}
                   cell={(item, index) => {
                     return (
-                      <div className='array-item-operator'>
+                      <div className="array-item-operator">
                         {this.renderRemove(index, item)}
                         {this.renderMoveDown(index, item)}
                         {this.renderMoveUp(index, item)}

diff --git a/packages/next/src/form.js b/packages/next/src/form.js
@@ -176,6 +176,7 @@ export const FormItem = styled(
         validateState,
         autoAddColon,
         required,
+        maxTipsNum,
         type,
         schema,
         ...others