@jswork/antd-components 1.0.78 → 1.0.80

package/src/lib/switch.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Switch, SwitchProps } from 'antd';
+import cx from 'classnames';
+
+const CLASS_NAME = 'ac-switch';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  value?: boolean;
+  onChange?: StdCallback;
+} & SwitchProps;
+
+export class AcSwitch extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop
+  };
+
+  state = {
+    value: Boolean(this.props.value)
+  };
+
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    const { value } = nextProps;
+    if (value !== this.props.value) this.setState({ value });
+    return true;
+  }
+
+  handleChange = (value) => {
+    const { onChange } = this.props;
+    const target = { value };
+    this.setState(target, () => onChange!({ target }));
+  };
+
+  render() {
+    const { className, value, onChange, ...props } = this.props;
+    const _value = this.state.value;
+
+    return (
+      <Switch
+        checked={_value}
+        className={cx(CLASS_NAME, className)}
+        onChange={this.handleChange}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/textarea.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Input } from 'antd';
+import cx from 'classnames';
+import { TextAreaProps } from 'antd/es/input';
+
+const CLASS_NAME = 'ac-textarea';
+const TextArea = Input.TextArea;
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  value?: boolean;
+  onChange?: StdCallback;
+} & TextAreaProps;
+
+export class AcTextarea extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop
+  };
+
+  render() {
+    const { className, defaultValue, ...props } = this.props;
+    return <TextArea className={cx(CLASS_NAME, className)} {...props} />;
+  }
+}

package/src/lib/time-picker.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { TimePicker, TimePickerProps } from 'antd';
+import cx from 'classnames';
+import dayjs from 'dayjs';
+
+const CLASS_NAME = 'ac-time-picker';
+const STD_FORMAT = 'HH:mm:ss';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+type Props = {
+  className?: string;
+  value?: string | dayjs.Dayjs;
+  defaultValue?: string | dayjs.Dayjs;
+  onChange?: StdCallback;
+} & Omit<TimePickerProps, 'value' | 'defaultValue'>;
+
+export class AcTimePicker extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop,
+    format: STD_FORMAT
+  };
+
+  handleChange = (inEvent) => {
+    const value = this.stringify(inEvent);
+    const { onChange } = this.props;
+    onChange!({ target: { value } });
+  };
+
+  parse = (inValue) => {
+    const { format } = this.props;
+    return dayjs(inValue, format as string);
+  };
+
+  stringify = (inValue) => {
+    if (!inValue) return null;
+    const { format } = this.props;
+    return inValue.format(format as string);
+  };
+
+  normalize = (inValues) => {
+    Object.keys(inValues).forEach((key) => {
+      const value = inValues[key];
+      if (value) inValues[key] = this.parse(value);
+      else delete inValues[key];
+    });
+    return inValues;
+  };
+
+  render() {
+    const { className, value, defaultValue, onChange, ...props } = this.props;
+    const values = this.normalize({ value, defaultValue });
+
+    return (
+      <TimePicker
+        className={cx(CLASS_NAME, className)}
+        onChange={this.handleChange}
+        {...values}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/transfer.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Transfer, TransferProps } from 'antd';
+import cx from 'classnames';
+import { transferLabel } from '@jswork/antd-tpls';
+
+const CLASS_NAME = 'ac-transfer';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+type TemplateCallback = (item: { item: any }, options?: any) => React.ReactNode;
+
+type Props = {
+  className?: string;
+  items?: any[];
+  template: TemplateCallback;
+  value?: any[];
+  onChange?: StdCallback;
+} & TransferProps<any>;
+
+export class AcTransfer extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    items: [],
+    template: transferLabel,
+    onChange: noop
+  };
+
+  get templateCallback(): any {
+    const { template } = this.props;
+    return (item: any) => template({ item });
+  }
+
+  state = {
+    value: this.props.value
+  };
+
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    const { value } = nextProps;
+    const isNewValue = this.props.value !== value;
+    if (isNewValue && value !== this.state.value) {
+      this.setState({ value });
+    }
+    return true;
+  }
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    const target = { value: inEvent };
+    this.setState(target, () => onChange!({ target }));
+  };
+
+  render() {
+    const { className, value, onChange, items, template, ...props } = this.props;
+
+    const _value = this.state.value;
+
+    return (
+      <Transfer
+        className={cx(CLASS_NAME, className)}
+        dataSource={items}
+        render={this.templateCallback}
+        targetKeys={_value}
+        rowKey={(item) => item.value}
+        onChange={this.handleChange}
+        {...props}
+      />
+    );
+  }
+}

package/src/lib/tree-select.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+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';
+
+const CLASS_NAME = 'ac-tree-select';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+
+// @see: https://github.com/afeiship/react-ant-tree-select
+
+type Props = {
+  className?: string;
+  items?: any[];
+  template?: any;
+  itemsKey?: string | ((index: number, item: any) => any);
+  onChange?: StdCallback;
+} & TreeSelectProps;
+
+export class AcTreeSelect extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    items: [],
+    template: treeSelectKv,
+    itemsKey: 'children',
+    onChange: noop
+  };
+
+  get childView() {
+    const { items, template, itemsKey } = this.props;
+    return nx.treeWalk(items!, { template, itemsKey });
+  }
+
+  handleChange = (inValue) => {
+    const { onChange } = this.props;
+    onChange!({ target: { value: inValue } });
+  };
+
+  render() {
+    const {
+      className,
+      items,
+      itemsKey,
+      template,
+      treeData,
+      onChange,
+      ...props
+    } = this.props;
+
+    return (
+      <TreeSelect
+        data-component={CLASS_NAME}
+        className={cx(CLASS_NAME, className)}
+        onChange={this.handleChange}
+        treeNodeFilterProp="title"
+        {...props}>
+        {this.childView}
+      </TreeSelect>
+    );
+  }
+}

package/src/lib/tree.tsx

@@ -0,0 +1,60 @@
+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';
+
+const CLASS_NAME = 'ac-tree';
+const DEFAULT_KV = {
+  label: 'label',
+  value: 'value'
+};
+
+type Props = {
+  className?: string;
+  items?: any[];
+  kv?: Record<string, string>;
+  template?: any;
+  itemsKey?: string | ((index: number, item: any) => any);
+  directory?: boolean;
+} & TreeProps;
+
+export class AcTree extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    directory: false,
+    items: [],
+    kv: DEFAULT_KV,
+    template: treeKv,
+    itemsKey: 'children'
+  };
+
+  get childView() {
+    const { items, itemsKey } = this.props;
+    return nx.treeWalk(items!, { template: this.template, itemsKey });
+  }
+
+  template = (args) => {
+    const { template, kv } = this.props;
+    if (kv === DEFAULT_KV) return template!(args);
+    return KvTmpl(args, {
+      component: Tree.TreeNode,
+      ...kv
+    });
+  };
+
+  render() {
+    const { className, children, items, template, itemsKey, directory, ...props } = this.props;
+
+    const RootComp: any = directory ? Tree.DirectoryTree : Tree;
+
+    if (items?.length === 0) return null;
+
+    return (
+      <RootComp className={cx(CLASS_NAME, className)} {...props}>
+        {this.childView}
+      </RootComp>
+    );
+  }
+}

package/src/lib/upload-dragger.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { InboxOutlined } from '@ant-design/icons';
+import { Upload } from 'antd';
+import cx from 'classnames';
+import { DraggerProps } from 'antd/es/upload';
+
+const CLASS_NAME = 'ac-upload-dragger';
+const { Dragger } = Upload;
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+type CustomRequest = (inEvent: any) => Promise<any>;
+
+type Props = {
+  className?: string;
+  value?: any[];
+  defaultValue?: any[];
+  onChange?: StdCallback;
+  onRequest?: CustomRequest;
+} & DraggerProps;
+
+export class AcUploadDragger extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop,
+    onRequest: (inEvent) => Promise.resolve(inEvent)
+  };
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    onChange!({ target: { value: inEvent } });
+  };
+
+  handleCustomRequest = (inRequestOption) => {
+    const { onRequest } = this.props;
+    const { file } = inRequestOption;
+    onRequest!(file)
+      .then((res) => inRequestOption.onSuccess(res, file))
+      .catch((err) => inRequestOption.onError(err, file));
+  };
+
+  render() {
+    const { className, value, onChange, ...props } = this.props;
+    return (
+      <Dragger
+        className={cx(CLASS_NAME, className)}
+        listType="picture"
+        onChange={this.handleChange}
+        customRequest={this.handleCustomRequest}
+        {...props}>
+        <p className="ant-upload-drag-icon">
+          <InboxOutlined />
+        </p>
+        <p className="ant-upload-text">单击或拖动文件到此区域以上传</p>
+        <p className="ant-upload-hint">支持单个或批量上传，请不要上传公司数据或其他重要文件</p>
+      </Dragger>
+    );
+  }
+}

package/src/lib/upload-picture-card.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Space, Upload } from 'antd';
+import cx from 'classnames';
+import { UploadOutlined } from '@ant-design/icons';
+
+import nx from '@jswork/next';
+import weibo2res from '@jswork/weibo2res';
+import '@jswork/next-gpid';
+import { AcAbstractUpload } from './_abstract-upload';
+
+const CLASS_NAME = 'ac-upload-picture-card';
+const toWeiboPid = (inItem) => {
+  if (typeof inItem === 'string' && inItem.includes('sina.com.cn')) return weibo2res(inItem).pid;
+  return null;
+};
+
+export class AcUploadPictureCard extends AcAbstractUpload {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop,
+    value: [],
+    transformURL: (pid) => (pid.includes('://') ? pid : `https://tva1.js.work/large/${pid}.jpg`),
+    transformResponse: (inFileList: any) => {
+      return inFileList.map((item) => {
+        return toWeiboPid(item) || item.uid || item.pid || nx.gpid(item.url);
+      });
+    }
+  };
+
+  render() {
+    const { className, value, onChange, ...props } = this.props;
+    const { fileList } = this.state;
+
+    return (
+      <div className={cx(CLASS_NAME, className)} ref={this.rootRef}>
+        <Upload
+          className={cx(`${CLASS_NAME}__uploader`, className)}
+          fileList={fileList}
+          listType="picture-card"
+          name="pic1"
+          multiple
+          previewFile={this.previewFile}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          {...props}>
+          <Space direction="horizontal">
+            <UploadOutlined />
+            <span>上传</span>
+          </Space>
+        </Upload>
+      </div>
+    );
+  }
+}

package/src/lib/upload-picture.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { UploadOutlined } from '@ant-design/icons';
+import { Upload, Button } from 'antd';
+import cx from 'classnames';
+import { AcAbstractUpload } from './_abstract-upload';
+import nx from '@jswork/next';
+
+const CLASS_NAME = 'ac-upload-picture';
+
+export class AcUploadPicture extends AcAbstractUpload {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop,
+    value: [],
+    maxCount: 1,
+    transformURL: (pid) => (pid.includes('://') ? pid : `https://tva1.js.work/large/${pid}.jpg`),
+    transformResponse: (inFileList: any) => {
+      return inFileList.map((item) => {
+        return item.uid || item.pid || nx.gpid(item.url);
+      });
+    }
+  };
+
+  render() {
+    const { className, value, onChange, ...props } = this.props;
+    const { fileList } = this.state;
+
+    return (
+      <div className={cx(CLASS_NAME, className)} ref={this.rootRef}>
+        <Upload
+          accept="images/*"
+          name="pic1"
+          listType="picture"
+          multiple={false}
+          onChange={this.handleChange}
+          onPreview={this.handlePreview}
+          previewFile={this.previewFile}
+          fileList={fileList}
+          {...props}>
+          <Button icon={<UploadOutlined />}>上传({fileList.length})</Button>
+        </Upload>
+      </div>
+    );
+  }
+}

package/src/lib/upload.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import noop from '@jswork/noop';
+import { Upload, Button } from 'antd';
+import type { UploadProps, ButtonProps } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+
+import cx from 'classnames';
+
+const CLASS_NAME = 'ac-upload';
+type StdEventTarget = { target: { value: any } };
+type StdCallback = (inEvent: StdEventTarget) => void;
+type CustomRequest = (inEvent: any) => Promise<any>;
+
+type Props = {
+  className?: string;
+  value?: number;
+  onChange?: StdCallback;
+  onRequest?: CustomRequest;
+  btnProps?: ButtonProps;
+} & UploadProps;
+
+export class AcUpload extends React.Component<Props> {
+  static displayName = CLASS_NAME;
+  static formSchema = CLASS_NAME;
+  static defaultProps = {
+    onChange: noop,
+    onRequest: (inEvent) => Promise.resolve(inEvent)
+  };
+
+  handleChange = (inEvent) => {
+    const { onChange } = this.props;
+    onChange!({ target: { value: inEvent } });
+  };
+
+  handleCustomRequest = (inRequestOption) => {
+    const { onRequest } = this.props;
+    const { file } = inRequestOption;
+    onRequest!(file)
+      .then((res) => inRequestOption.onSuccess(res, file))
+      .catch((err) => inRequestOption.onError(err, file));
+  };
+
+  render() {
+    const { className, value, onChange, btnProps, ...props } = this.props;
+    return (
+      <Upload
+        className={cx(CLASS_NAME, className)}
+        onChange={this.handleChange}
+        customRequest={this.handleCustomRequest}
+        {...props}>
+        <Button icon={<UploadOutlined />} children="点击上传" {...btnProps} />
+      </Upload>
+    );
+  }
+}

package/src/main.ts

@@ -0,0 +1,34 @@
+export * from './lib/alert';
+export * from './lib/breadcrumb';
+export * from './lib/checkable-dropdown';
+export * from './lib/checkable-tag';
+export * from './lib/checkable-tag-list';
+export * from './lib/checkbox';
+export * from './lib/checkbox-group';
+export * from './lib/codeflask';
+export * from './lib/confirm-button';
+export * from './lib/date-picker';
+export * from './lib/editable-tag-group';
+export * from './lib/input';
+export * from './lib/input-hidden';
+export * from './lib/input-number';
+export * from './lib/input-tags';
+export * from './lib/input-token';
+export * from './lib/pre-select';
+export * from './lib/radio-group';
+export * from './lib/range-picker';
+export * from './lib/rate';
+export * from './lib/search';
+export * from './lib/select';
+export * from './lib/slider';
+export * from './lib/slider-range';
+export * from './lib/switch';
+export * from './lib/textarea';
+export * from './lib/time-picker';
+export * from './lib/transfer';
+export * from './lib/tree';
+export * from './lib/tree-select';
+export * from './lib/upload-dragger';
+export * from './lib/upload-picture';
+export * from './lib/upload-picture-card';
+export * from './lib/upload';