@jswork/antd-components 1.0.89 → 1.0.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jswork/antd-components",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "main": "dist/main.cjs.js",
   "module": "dist/main.esm.js",
   "types": "dist/main.d.ts",
@@ -17,8 +17,8 @@
     "release": "release-it --ci"
   },
   "devDependencies": {
-    "@jswork/harmony-events": "^1.2.1",
-    "@jswork/next": "^1.2.2",
+    "@jswork/harmony-events": "^1.2.2",
+    "@jswork/next": "^1.2.6",
     "@swc/core": "^1.3.93",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
@@ -39,14 +39,13 @@
   },
   "dependencies": {
     "@jswork/antd-form-builder": "^1.1.27",
-    "@jswork/antd-tpls": "^1.0.16",
     "@jswork/loadkit": "^1.0.6",
-    "@jswork/next-dom-event": "^1.0.7",
+    "@jswork/next-dom-event": "^1.0.8",
     "@jswork/next-gpid": "^1.0.4",
     "@jswork/next-tree-walk": "^1.0.7",
     "@jswork/noop": "^1.0.0",
-    "@jswork/react-codeflask": "^1.0.18",
-    "@jswork/react-list": "^1.2.9",
+    "@jswork/react-codeflask": "^1.1.2",
+    "@jswork/react-list": "^1.2.10",
     "@jswork/weibo2res": "^1.0.4",
     "fast-deep-equal": "^3.1.3",
     "nanoid": "^4.0.2",

package/src/lib/breadcrumb.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import noop from '@jswork/noop';
 import { Breadcrumb, BreadcrumbProps } from 'antd';
 import ReactList, { TemplateArgs } from '@jswork/react-list';
-import { breadcrumbDefault } from '@jswork/antd-tpls';
+import { breadcrumbDefault } from '../tpls/breadcrumb';
 import cx from 'classnames';
 
 // hack for react-list
@@ -26,7 +26,7 @@ export class AcBreadcrumb extends React.Component<Props> {
   static displayName = CLASS_NAME;
   static defaultProps = {
     onChange: noop,
-    template: breadcrumbDefault
+    template: breadcrumbDefault,
   };
 
   render() {

package/src/lib/checkbox-group.tsx

@@ -3,7 +3,7 @@ import ReactList from '@jswork/react-list';
 import noop from '@jswork/noop';
 import { Checkbox } from 'antd';
 import cx from 'classnames';
-import { checkboxKv } from '@jswork/antd-tpls';
+import { checkboxKv } from '../tpls/kv';
 import { CheckboxGroupProps } from 'antd/es/checkbox';
 
 const CLASS_NAME = 'ac-checkbox-group';

package/src/lib/radio-group.tsx

@@ -3,7 +3,7 @@ import ReactList from '@jswork/react-list';
 import noop from '@jswork/noop';
 import { Radio } from 'antd';
 import cx from 'classnames';
-import { radioKv } from '@jswork/antd-tpls/dist/esm';
+import { radioKv } from '../tpls/kv';
 
 const CLASS_NAME = 'ac-radio-group';
 type StdEventTarget = { target: { value: any } };

package/src/lib/select.tsx

@@ -3,12 +3,12 @@ import ReactList from '@jswork/react-list';
 import noop from '@jswork/noop';
 import { Select, SelectProps } from 'antd';
 import cx from 'classnames';
-import { selectKv, kv as KvTmpl } from '@jswork/antd-tpls';
+import { selectKv, kv as KvTmpl } from '../tpls/kv';
 
 const CLASS_NAME = 'ac-select';
 const DEFAULT_KV = {
   label: 'label',
-  value: 'value'
+  value: 'value',
 };
 
 type StdEventTarget = { target: { value: any } };
@@ -33,11 +33,11 @@ export class AcSelect extends React.Component<Props> {
     kv: DEFAULT_KV,
     template: selectKv,
     onChange: noop,
-    onSearch: noop
+    onSearch: noop,
   };
 
   state = {
-    value: this.props.value
+    value: this.props.value,
   };
 
   shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
@@ -64,7 +64,7 @@ export class AcSelect extends React.Component<Props> {
     if (kv === DEFAULT_KV) return template!(args);
     return KvTmpl(args, {
       component: Select.Option,
-      ...kv
+      ...kv,
     });
   };
 
@@ -73,7 +73,6 @@ export class AcSelect extends React.Component<Props> {
     const { value: _value } = this.state;
     return (
       <ReactList
-        allowEmpty
         as={Select}
         onChange={this.handleChange}
         className={cx(CLASS_NAME, className)}

package/src/lib/transfer.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import noop from '@jswork/noop';
 import { Transfer, TransferProps } from 'antd';
 import cx from 'classnames';
-import { transferLabel } from '@jswork/antd-tpls';
+import { transferLabel } from '../tpls/transfer';
 
 const CLASS_NAME = 'ac-transfer';
 type StdEventTarget = { target: { value: any } };

package/src/lib/tree-select.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import noop from '@jswork/noop';
 import { TreeSelect, TreeSelectProps } from 'antd';
 import '@jswork/next-tree-walk';
-import { treeSelectKv } from '@jswork/antd-tpls';
+import { treeSelectKv } from '../tpls/kv';
 
 const CLASS_NAME = 'ac-tree-select';
 type StdEventTarget = { target: { value: any } };
@@ -26,7 +26,7 @@ export class AcTreeSelect extends React.Component<Props> {
     items: [],
     template: treeSelectKv,
     itemsKey: 'children',
-    onChange: noop
+    onChange: noop,
   };
 
   get childView() {

package/src/lib/tree.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import { Tree, TreeProps } from 'antd';
 import cx from 'classnames';
 import '@jswork/next-tree-walk';
-import { treeKv, kv as KvTmpl } from '@jswork/antd-tpls';
+import { treeKv, kv as KvTmpl } from '../tpls/kv';
 
 const CLASS_NAME = 'ac-tree';
 const DEFAULT_KV = {
   label: 'label',
-  value: 'value'
+  value: 'value',
 };
 
 type Props = {
@@ -27,7 +27,7 @@ export class AcTree extends React.Component<Props> {
     items: [],
     kv: DEFAULT_KV,
     template: treeKv,
-    itemsKey: 'children'
+    itemsKey: 'children',
   };
 
   get childView() {
@@ -40,7 +40,7 @@ export class AcTree extends React.Component<Props> {
     if (kv === DEFAULT_KV) return template!(args);
     return KvTmpl(args, {
       component: Tree.TreeNode,
-      ...kv
+      ...kv,
     });
   };
 

package/src/main.ts

@@ -1,3 +1,9 @@
+import { breadcrumbDefault } from './tpls/breadcrumb';
+import { kv, checkboxKv, radioKv, treeKv, selectKv, treeSelectKv } from './tpls/kv';
+import { raw, checkboxRaw, radioRaw, selectRaw } from './tpls/raw';
+import { transferLabel } from './tpls/transfer';
+
+
 export * from './lib/alert';
 export * from './lib/breadcrumb';
 export * from './lib/checkable-dropdown';
@@ -32,3 +38,24 @@ export * from './lib/upload-dragger';
 export * from './lib/upload-picture';
 export * from './lib/upload-picture-card';
 export * from './lib/upload';
+
+
+// export all templates
+export {
+  // breadcrumb
+  breadcrumbDefault,
+  // kv
+  kv,
+  checkboxKv,
+  radioKv,
+  treeKv,
+  selectKv,
+  treeSelectKv,
+  // raw
+  raw,
+  checkboxRaw,
+  radioRaw,
+  selectRaw,
+  // transfer
+  transferLabel,
+};

package/src/tpls/breadcrumb/index.tsx

@@ -0,0 +1,8 @@
+import { Breadcrumb } from 'antd';
+import React from 'react';
+
+export const breadcrumbDefault = ({ item, index, items }) => {
+  const last = items?.length - 1 === index;
+  const child = last ? <span>{item.label}</span> : <a href={item.value}>{item.label}</a>;
+  return <Breadcrumb.Item key={index}>{child}</Breadcrumb.Item>;
+};

package/src/tpls/kv/index.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Checkbox, Select, Radio, Tree, TreeSelect } from 'antd';
+
+interface Options {
+  component: React.ComponentType<any>;
+  value?: string;
+  label?: string;
+
+  [key: string]: any;
+}
+
+const defaults = {
+  value: 'value',
+  label: 'label',
+};
+
+/**
+ * KV component template, for key-value pair.
+ * @param item
+ * @param index
+ * @param options
+ */
+export const kv = ({ item, index }, options: Options) => {
+  const opts = { ...defaults, ...options };
+  const { component: Component, value, label, ...otherProps } = opts;
+  const val = item[value];
+  const children = item[label];
+
+  return (
+    <Component key={index} value={val} {...otherProps}>
+      {children}
+    </Component>
+  );
+};
+
+// checkboxKv
+export const checkboxKv = (args) => {
+  return kv(args, {
+    component: Checkbox,
+  });
+};
+
+// selectKv
+export const selectKv = (args) => {
+  return kv(args, {
+    component: Select.Option,
+  });
+};
+
+// radioKv
+export const radioKv = (args, opts) => {
+  const { isButton, ...otherProps } = opts || {};
+  const RadioComponent = isButton ? Radio.Button : Radio;
+  const radioProps = isButton ? otherProps : {};
+
+  return kv(args, {
+    component: RadioComponent,
+    ...radioProps,
+  });
+};
+
+export const treeKv = ({ item }, cb) => {
+  const { value, label, ...itemProps } = item;
+  return (
+    <Tree.TreeNode key={value} title={label} {...itemProps}>
+      {cb()}
+    </Tree.TreeNode>
+  );
+};
+
+export const treeSelectKv = ({ item }, cb) => {
+  const { value, label } = item;
+  return <TreeSelect.TreeNode key={value} value={value} title={label} children={cb()} />;
+};

package/src/tpls/raw/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Checkbox, Radio, Select } from 'antd';
+
+interface Options {
+  component: React.ComponentType<any>;
+
+  [key: string]: any;
+}
+
+/**
+ * Raw component template, for array of items.
+ * @param item
+ * @param index
+ * @param options
+ */
+export const raw = ({ item, index }, options: Options) => {
+  const { component: Component, ...otherProps } = options;
+
+  return (
+    <Component key={index} value={item} {...otherProps}>
+      {item}
+    </Component>
+  );
+};
+
+export const checkboxRaw = (args) => {
+  return raw(args, {
+    component: Checkbox,
+  });
+};
+
+export const selectRaw = (args) => {
+  return raw(args, {
+    component: Select.Option,
+  });
+};
+
+export const radioRaw = (args, opts) => {
+  const { isButton, ...otherProps } = opts || {};
+  const RadioComponent = isButton ? Radio.Button : Radio;
+  const radioProps = isButton ? otherProps : {};
+
+  return raw(args, {
+    component: RadioComponent,
+    ...radioProps,
+  });
+};

package/src/tpls/transfer/index.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+const defaults = {
+  label: 'label',
+};
+
+export const transferLabel = ({ item }, options?: any): React.ReactNode => {
+  const opts = { ...defaults, ...options };
+  return item[opts?.label];
+};