@jswork/antd-components 1.0.0

package/dist/lib/search.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SearchProps } from 'antd/es/input';
+type StdEventTarget = {
+    target: {
+        value: any;
+    };
+};
+type StdCallback = (inEvent: StdEventTarget) => void;
+type Props = {
+    className?: string;
+    value?: boolean;
+    onChange?: StdCallback;
+    onSearch?: StdCallback;
+    autoComplete?: boolean;
+} & SearchProps;
+export declare class AcSearch extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        onChange: any;
+        onSearch: any;
+        autoComplete: boolean;
+        placeholder: string;
+    };
+    get complete(): "on" | "off";
+    handleSearch: (inEvent: any) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/select.d.ts

@@ -0,0 +1,31 @@
+import React, { HTMLAttributes } from 'react';
+type StdEventTarget = {
+    target: {
+        value: any;
+    };
+};
+type StdCallback = (inEvent: StdEventTarget) => void;
+type TemplateCallback = (item: {
+    item: any;
+    index: number;
+}) => React.ReactNode;
+type Props = {
+    className?: string;
+    items?: any[];
+    onChange?: StdCallback;
+    onSearch?: StdCallback;
+    template?: TemplateCallback;
+} & HTMLAttributes<any>;
+export declare class AcSelect extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        placeholder: string;
+        items: never[];
+        template: (args: any) => JSX.Element;
+        onChange: any;
+        onSearch: any;
+    };
+    handleChange: (inValue: any) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/slider-range.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SliderRangeProps } from 'antd/es/slider';
+type StdEventTarget = {
+    target: {
+        value: any;
+    };
+};
+type StdCallback = (inEvent: StdEventTarget) => void;
+type Props = {
+    className?: string;
+    range?: true;
+    onChange?: StdCallback;
+} & Omit<SliderRangeProps, 'range'>;
+export declare class AcSliderRange extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        onChange: any;
+    };
+    handleChange: (inEvent: any) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/slider.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SliderSingleProps } from 'antd';
+type StdEventTarget = {
+    target: {
+        value: any;
+    };
+};
+type StdCallback = (inEvent: StdEventTarget) => void;
+type Props = {
+    className?: string;
+    onChange?: StdCallback;
+} & SliderSingleProps;
+export declare class AcSlider extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        onChange: any;
+    };
+    handleChange: (inEvent: any) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/switch.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { SwitchProps } from 'antd';
+type StdEventTarget = {
+    target: {
+        value: any;
+    };
+};
+type StdCallback = (inEvent: StdEventTarget) => void;
+type Props = {
+    className?: string;
+    value?: boolean;
+    onChange?: StdCallback;
+} & SwitchProps;
+export declare class AcSwitch extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        onChange: any;
+    };
+    handleChange: (inEvent: any) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/textarea.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TextAreaProps } from 'antd/es/input';
+type StdEventTarget = {
+    target: {
+        value: any;
+    };
+};
+type StdCallback = (inEvent: StdEventTarget) => void;
+type Props = {
+    className?: string;
+    value?: boolean;
+    onChange?: StdCallback;
+} & TextAreaProps;
+export declare class AcTextarea extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        onChange: any;
+    };
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/time-picker.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { TimePickerProps } from 'antd';
+import dayjs from 'dayjs';
+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 declare class AcTimePicker extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        onChange: any;
+        format: string;
+    };
+    handleChange: (inEvent: any) => void;
+    parse: (inValue: any) => dayjs.Dayjs;
+    stringify: (inValue: any) => any;
+    normalize: (inValues: any) => any;
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/transfer.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { TransferProps } from 'antd';
+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[];
+    defaultValue?: any[];
+    onChange?: StdCallback;
+} & TransferProps<any>;
+export declare class AcTransfer extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        items: never[];
+        template: ({ item }: {
+            item: any;
+        }, options?: any) => React.ReactNode;
+        defaultValue: never[];
+        onChange: any;
+    };
+    get templateCallback(): any;
+    state: {
+        value: any[] | undefined;
+    };
+    handleChange: (inEvent: any) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/tree-select.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { TreeSelectProps } from 'antd';
+type StdEventTarget = {
+    target: {
+        value: any;
+    };
+};
+type StdCallback = (inEvent: StdEventTarget) => void;
+type Props = {
+    className?: string;
+    items?: any[];
+    template?: any;
+    itemsKey?: string | ((index: number, item: any) => any);
+    onChange?: StdCallback;
+} & TreeSelectProps;
+export declare class AcTreeSelect extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        items: never[];
+        template: ({ item }: {
+            item: any;
+        }, cb: any) => JSX.Element;
+        itemsKey: string;
+        onChange: any;
+    };
+    get childView(): any;
+    handleChange: (inValue: any) => void;
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/tree.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TreeProps } from 'antd';
+type Props = {
+    className?: string;
+    items?: any[];
+    template?: any;
+    itemsKey?: string | ((index: number, item: any) => any);
+    directory?: boolean;
+} & TreeProps;
+export declare class AcTree extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        directory: boolean;
+        items: never[];
+        template: ({ item }: {
+            item: any;
+        }, cb: any) => JSX.Element;
+        itemsKey: string;
+    };
+    get childView(): any;
+    render(): JSX.Element | null;
+}
+export {};

package/dist/lib/upload-dragger.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DraggerProps } from 'antd/es/upload';
+type StdEventTarget = {
+    target: {
+        value: any;
+    };
+};
+type StdCallback = (inEvent: StdEventTarget) => void;
+type Props = {
+    className?: string;
+    value?: any[];
+    defaultValue?: any[];
+    onChange?: StdCallback;
+} & DraggerProps;
+export declare class AcUploadDragger extends React.Component<Props> {
+    static displayName: string;
+    static defaultProps: {
+        onChange: any;
+    };
+    handleTemplate: (node: any, file: any, fileList: any) => JSX.Element;
+    render(): JSX.Element;
+}
+export {};

package/dist/lib/upload-picture-card.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { DraggerProps } from 'antd/es/upload';
+import { UploadChangeParam } from 'antd/es/upload/interface';
+import { UploadFile } from 'antd';
+type StdEventTarget = {
+    target: {
+        value: any;
+    };
+};
+type StdCallback = (inEvent: StdEventTarget) => void;
+type Props = {
+    className?: string;
+    value?: any[];
+    onChange?: StdCallback;
+} & DraggerProps;
+type State = {
+    fileList: UploadFile[];
+};
+export declare class AcUploadPictureCard extends React.Component<Props, State> {
+    static displayName: string;
+    static defaultProps: {
+        onChange: any;
+    };
+    private rootRef;
+    private sortable;
+    private viewer;
+    state: {
+        fileList: any[];
+    };
+    componentDidMount(): Promise<void>;
+    mountSortable(el: any): void;
+    mountViewer(el: any): Promise<void>;
+    componentWillUnmount(): void;
+    handlePreview: (file: UploadFile<any>) => void;
+    handleChange: (inEvent: UploadChangeParam<UploadFile<any>>) => void;
+    handleSortEnd: (inEvent: any) => void;
+    doChange: (inValue: any) => void;
+    previewFile: (file: any) => Promise<string>;
+    render(): JSX.Element;
+}
+export {};

package/dist/main.d.ts

@@ -0,0 +1,25 @@
+export * from './lib/breadcrumb';
+export * from './lib/checkable-all';
+export * from './lib/checkable-tag';
+export * from './lib/checkbox';
+export * from './lib/checkbox-group';
+export * from './lib/date-picker';
+export * from './lib/editable-tag-group';
+export * from './lib/input';
+export * from './lib/input-number';
+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-card';

package/dist/style.css

@@ -0,0 +1,147 @@
+@charset "UTF-8";
+.ac-checkable-tag {
+  user-select: none;
+}
+.ac-checkable-tag[disabled] {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.ant-upload.ant-upload-dragger,
+.ant-upload.ant-upload-drag {
+  border: 5px dashed rgba(0, 0, 0, 0.16);
+  border-radius: 5px;
+}
+.ant-upload.ant-upload-dragger:hover,
+.ant-upload.ant-upload-drag:hover {
+  border: 5px dashed rgba(64, 169, 255, 0.8196078431);
+}
+
+.ac-checkable-tag {
+  user-select: none;
+  background: #ededed;
+}
+.ac-checkable-tag.ant-tag-checkable-checked {
+  background: #1677ff;
+}
+.ac-checkable-tag > [role=img] {
+  margin-left: 2px;
+}
+
+.ac-checkable-all {
+  --ac-checkable-all-active-bg: #1677ff;
+  --ac-checkable-all-inactive-bg: #ededed;
+}
+.ac-checkable-all .ac-is-aside {
+  border-radius: 3px;
+}
+.ac-checkable-all .ac-is-item {
+  padding: 1px 7px;
+  background: var(--ac-checkable-all-inactive-bg);
+}
+.ac-checkable-all .ac-is-item.ant-tag-checkable-checked {
+  background: var(--ac-checkable-all-active-bg);
+}
+
+.ac-editable-tag-group {
+  display: inline-block;
+}
+.ac-editable-tag-group .ant-tag {
+  margin-bottom: 5px;
+  padding-right: 15px;
+  position: relative;
+}
+.ac-editable-tag-group .ant-btn {
+  position: relative;
+  padding-left: 15px;
+}
+.ac-editable-tag-group__input input {
+  border-color: transparent;
+  background: none;
+  text-align: center;
+}
+.ac-editable-tag-group__create {
+  font-size: 12px;
+  line-height: 22px;
+}
+.ac-editable-tag-group__plus {
+  width: 10px;
+  height: 10px;
+  opacity: 0.3;
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+}
+.ac-editable-tag-group__plus:hover {
+  opacity: 1;
+}
+.ac-editable-tag-group__plus:before, .ac-editable-tag-group__plus:after {
+  position: absolute;
+  left: 0;
+  content: "";
+  height: 10px;
+  width: 1px;
+  background-color: #333;
+}
+.ac-editable-tag-group__plus:before {
+  transform: rotate(90deg);
+}
+.ac-editable-tag-group__plus:after {
+  transform: rotate(180deg);
+}
+.ac-editable-tag-group__close {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 10px;
+  height: 10px;
+  opacity: 0.3;
+  cursor: pointer;
+}
+.ac-editable-tag-group__close:hover {
+  opacity: 1;
+}
+.ac-editable-tag-group__close:before, .ac-editable-tag-group__close:after {
+  position: absolute;
+  left: 0;
+  content: "";
+  height: 10px;
+  width: 1px;
+  background-color: #333;
+}
+.ac-editable-tag-group__close:before {
+  transform: rotate(45deg);
+}
+.ac-editable-tag-group__close:after {
+  transform: rotate(-45deg);
+}
+
+.ac-upload-picture-card {
+  /**
+   定义 css 变量，可以改变 image-item 的大小
+  */
+}
+.ac-upload-picture-card .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,
+.ac-upload-picture-card .ant-upload.ant-upload-select {
+  --ac-upload-images-size: 102px;
+  border-width: 3px !important;
+  width: var(--ac-upload-images-size) !important;
+  height: var(--ac-upload-images-size) !important;
+}
+.ac-upload-picture-card .ant-upload-list-item-container {
+  user-select: none;
+}
+.ac-upload-picture-card .ant-upload-list-item-container:hover .ant-upload-list-item {
+  border-width: 2px !important;
+  border-style: dashed !important;
+  border-color: orange !important;
+}
+.ac-upload-picture-card__modal {
+  width: 800px;
+  text-align: center;
+}
+.ac-upload-picture-card__modal .is-img {
+  width: 100%;
+  height: 100%;
+}

package/dist/style.scss

@@ -0,0 +1,179 @@
+.ac-checkable-tag {
+  user-select: none;
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+}
+
+// upload-dragger
+// .dragger for < 5.0.0
+// .drag for 5.0.0+
+.ant-upload.ant-upload-dragger,
+.ant-upload.ant-upload-drag {
+  border: 5px dashed rgb(0 0 0 / 16%);
+  border-radius: 5px;
+
+  &:hover {
+    border: 5px dashed #40a9ffd1;
+  }
+}
+
+.ac-checkable-tag {
+  user-select: none;
+  background: #ededed;
+
+  &.ant-tag-checkable-checked {
+    background: #1677ff;
+  }
+
+  > [role="img"] {
+    margin-left: 2px;
+  }
+}
+
+.ac-checkable-all {
+  --ac-checkable-all-active-bg: #1677ff;
+  --ac-checkable-all-inactive-bg: #ededed;
+
+  .ac-is-aside {
+    border-radius: 3px;
+  }
+
+  .ac-is-item {
+    padding: 1px 7px;
+    background: var(--ac-checkable-all-inactive-bg);
+
+    &.ant-tag-checkable-checked {
+      background: var(--ac-checkable-all-active-bg)
+    }
+  }
+}
+
+.ac-editable-tag-group {
+  display: inline-block;
+
+  .ant-tag {
+    margin-bottom: 5px;
+    padding-right: 15px;
+    position: relative;
+  }
+
+  .ant-btn {
+    position: relative;
+    padding-left: 15px;
+  }
+
+  &__input {
+    input {
+      border-color: transparent;
+      background: none;
+      text-align: center;
+    }
+  }
+
+  &__create {
+    font-size: 12px;
+    line-height: 22px;
+  }
+
+  &__plus {
+    width: 10px;
+    height: 10px;
+    opacity: 0.3;
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:before,
+    &:after {
+      position: absolute;
+      left: 0;
+      content: "";
+      height: 10px;
+      width: 1px;
+      background-color: #333;
+    }
+
+    &:before {
+      transform: rotate(90deg);
+    }
+
+    &:after {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__close {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 10px;
+    opacity: 0.3;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:before,
+    &:after {
+      position: absolute;
+      left: 0;
+      content: "";
+      height: 10px;
+      width: 1px;
+      background-color: #333;
+    }
+
+    &:before {
+      transform: rotate(45deg);
+    }
+
+    &:after {
+      transform: rotate(-45deg);
+    }
+  }
+}
+
+
+.ac-upload-picture-card {
+  /**
+  定义 css 变量，可以改变 image-item 的大小
+ */
+  .ant-upload-list.ant-upload-list-picture-card .ant-upload-list-item-container,
+  .ant-upload.ant-upload-select {
+    --ac-upload-images-size: 102px;
+    border-width: 3px !important;
+    width: var(--ac-upload-images-size) !important;
+    height: var(--ac-upload-images-size) !important;
+  }
+
+  .ant-upload-list-item-container {
+    user-select: none;
+
+    &:hover {
+      .ant-upload-list-item {
+        border-width: 2px !important;
+        border-style: dashed !important;
+        border-color: orange !important;
+      }
+    }
+  }
+
+  &__modal {
+    width: 800px;
+    text-align: center;
+
+    .is-img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}