@jswork/antd-components 1.0.57 → 1.0.59

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AcAbstractUpload } from './_abstract-upload';
+export declare class AcUploadPicture extends AcAbstractUpload {
+    static displayName: string;
+    static formSchema: string;
+    static defaultProps: {
+        onChange: any;
+        value: never[];
+        maxCount: number;
+        transformURL: (pid: any) => any;
+        transformResponse: (inFileList: any) => any;
+    };
+    render(): React.JSX.Element;
+}

package/dist/lib/upload.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { UploadProps, ButtonProps } from 'antd';
+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 declare class AcUpload extends React.Component<Props> {
+    static displayName: string;
+    static formSchema: string;
+    static defaultProps: {
+        onChange: any;
+        onRequest: (inEvent: any) => Promise<any>;
+    };
+    handleChange: (inEvent: any) => void;
+    handleCustomRequest: (inRequestOption: any) => void;
+    render(): React.JSX.Element;
+}
+export {};

package/dist/main.d.ts

@@ -0,0 +1,32 @@
+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-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';

package/dist/style.css

@@ -0,0 +1,218 @@
+@charset "UTF-8";
+.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);
+}
+
+.ant-dropdown-menu .ant-dropdown-menu-item .ant-dropdown-menu-title-content {
+  display: block;
+}
+.ant-dropdown-menu .ant-dropdown-menu-item .ant-dropdown-menu-title-content .ant-checkbox-wrapper {
+  display: flex;
+}
+.ant-dropdown-menu .ant-dropdown-menu-item .ant-dropdown-menu-title-content .ant-checkbox-wrapper > span:last-child {
+  flex: 1;
+}
+
+.react-codeflask {
+  width: 100%;
+  outline: 1px solid #ccc;
+  position: relative;
+  --codeflask-loading-size: 40px;
+}
+.react-codeflask__spin {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(2px);
+  position: absolute;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+}
+.react-codeflask__spin [hidden] {
+  display: none;
+  z-index: -1;
+}
+.react-codeflask__spin > img {
+  left: 50%;
+  top: 50%;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  width: var(--codeflask-loading-size);
+  height: var(--codeflask-loading-size);
+}
+.react-codeflask[disabled] > .is-editor {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.react-codeflask > .language-name {
+  position: absolute;
+  right: 10px;
+  top: 0;
+  padding: 0.1rem 0.3rem 0.15rem;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  background: #627eee;
+  color: #eee;
+  font-family: "JetBrains Mono", Monaco, monospace, sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue";
+  font-size: 0.7rem;
+}
+
+.ac-checkable-tag {
+  user-select: none;
+  background: #ededed;
+}
+.ac-checkable-tag[disabled] {
+  pointer-events: none;
+  opacity: 0.7;
+}
+.ac-checkable-tag.ant-tag-checkable-checked {
+  background: #1677ff;
+}
+.ac-checkable-tag > [role=img] {
+  margin-left: 2px;
+}
+
+.ac-checkable-tag-list {
+  --ac-checkable-tag-list-active-bg: #1677ff;
+  --ac-checkable-tag-list-inactive-bg: #ededed;
+}
+.ac-checkable-tag-list .ac-is-aside {
+  border-radius: 3px;
+}
+.ac-checkable-tag-list .ac-is-item {
+  padding: 1px 7px;
+  background: var(--ac-checkable-tag-list-inactive-bg);
+}
+.ac-checkable-tag-list .ac-is-item.ant-tag-checkable-checked {
+  background: var(--ac-checkable-tag-list-active-bg);
+}
+
+.ac-editable-tag-group {
+  display: inline-block;
+}
+.ac-editable-tag-group .ant-tag {
+  margin-bottom: 5px;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ac-editable-tag-group .ant-btn {
+  position: relative;
+  padding-left: 15px;
+}
+.ac-editable-tag-group__input {
+  flex: 1;
+}
+.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: relative;
+  margin-left: 3px;
+  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%;
+}
+
+.ac-checkable-dropdown__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.ac-checkable-dropdown__btn .is-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ac-upload-picture {
+  --ac-upload-picture-height: 120px;
+}
+
+.ac-input-token__token {
+  user-select: none;
+  cursor: pointer;
+}

package/dist/style.scss

@@ -0,0 +1,191 @@
+@import "./styles/override";
+@import "@jswork/react-codeflask/dist/style.scss";
+
+
+.ac-checkable-tag {
+  user-select: none;
+  background: #ededed;
+
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+
+  &.ant-tag-checkable-checked {
+    background: #1677ff;
+  }
+
+  > [role="img"] {
+    margin-left: 2px;
+  }
+}
+
+.ac-checkable-tag-list {
+  --ac-checkable-tag-list-active-bg: #1677ff;
+  --ac-checkable-tag-list-inactive-bg: #ededed;
+
+  .ac-is-aside {
+    border-radius: 3px;
+  }
+
+  .ac-is-item {
+    padding: 1px 7px;
+    background: var(--ac-checkable-tag-list-inactive-bg);
+
+    &.ant-tag-checkable-checked {
+      background: var(--ac-checkable-tag-list-active-bg)
+    }
+  }
+}
+
+.ac-editable-tag-group {
+  display: inline-block;
+
+  .ant-tag {
+    margin-bottom: 5px;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .ant-btn {
+    position: relative;
+    padding-left: 15px;
+  }
+
+  &__input {
+    flex: 1;
+    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: relative;
+    margin-left: 3px;
+    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%;
+    }
+  }
+}
+
+.ac-checkable-dropdown {
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .is-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.ac-upload-picture {
+  --ac-upload-picture-height: 120px;
+}
+
+.ac-input-token {
+  &__token {
+    user-select: none;
+    cursor: pointer;
+  }
+}

package/dist/styles/override.scss

@@ -0,0 +1,29 @@
+// 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;
+  }
+}
+
+
+.ant-dropdown-menu {
+  .ant-dropdown-menu-item {
+    .ant-dropdown-menu-title-content {
+      display: block;
+
+      .ant-checkbox-wrapper {
+        display: flex;
+
+        > span:last-child {
+          flex: 1;
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@jswork/antd-components",
   "homepage": "https://js.work",
-  "version": "1.0.57",
+  "version": "1.0.59",
   "description": "Antd wrapped components.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -102,5 +102,5 @@
     "type": "git",
     "url": "https://github.com/afeiship/boilerplate-react-ts-component.git"
   },
-  "gitHead": "ff023a2ded3ed7aec1fc53792274a995d6ba442f"
+  "gitHead": "c093c28fb4e696903b28995e4f6cb0f9839180b6"
 }